10.웹사이트 폼 사용성을 위한
10가지 중요한 것들
[2.폼과 마법사]
https://www.nngroup.com/articles/design-pattern-guidelines/#Input%20Controls
폼과 마법사
TSA (미국 운수 보안국)은 항공을 이용하는 여행자들의 안전을 돕는다. 그러나 지연이슈 또는 공공장소에서 의류를 벗고 검사를 하는 것들은 많은 사람들의 귀찮고 짜증낼만한 일이기 때문에 TSA는 꽤 많은 양의 불편사항이 접수 될 것이라고 당신은 기대할 수 있다.
그래서 내가 처음 TSA 불편 접수 양식을 처음 보았을때 잘못된 디자인이 명백해서 나는 일부러 이렇게 디자인 한것인가 궁금했다. 이 양식은 '이전으로' 그리고 '전제 삭제'라는 버튼 두개를 포함하고 있었다. '이전으로' 라벨은 사용자들이 기대하는 '다음으로' 또는 '제출하기'버튼이 아니기에 애매한 문구이다. 그러나 진짜 문제는 '전체 삭제'버튼인데 작성했던 모든 내용을 삭제하는 기능으로 작동되기 때문이다.
의도했던 안했던 이렇게 나열된 버튼들은 의심할여지 없이 불편접수량 자체를 줄일 수 있을 것이다. 그러나 이렇게 디자인 되는 것은 폼 디자인 가이드라인에 맞지 않는 양식이므로 지양해야한다.
나는 최근에 이 폼디자인이 의도적으로 나쁘게 만든것이 아니였다는 결론을 내렸다. 왜냐하면 TSA는 실제로 다시 업데이트된 불편접수 양식에서 제대로 한개의 '제출하기'버튼을 폼양식 밑에 두었기 때문이다. 이번에 업데이트 된 버튼은 디자인 가이드에 맞게 디자인 되었기 때문에 이전의 이상한 두개의 버튼이 아래 있던 것은 실수였던것 같다.
신경써서 폼 디자인을 디자인하면 사용자가 입력해야하는 폼 내용에 대해서 이해하고 정확하게 값을 입력할 수 있도록 독려하게되여 빠른 속도른 내는데 영향을 미치게된다. 사실 요즘 CHI에 기고된 CHI by Seckler and her colleagues에서 보여주듯이 폼 디자인이 기본적인 사용성 가이드라임나 따르게 되도 작성을 완료하는데 소요되는 시간이 현저하게 감소하고 사용자가 거의 2배이상 폼을 에러 없이 한번에 제출 할 수 있음을 보여줬다. 가이드를 따른 경우 78퍼센트는 한번에 제출했고 가이드를 따르지 않은 경우 42%만 한번에 작성하여 폼을 제출했다. 만양 당신이 왜 당신의 컨버션 퍼널이 폼페이지에서 급감하는지 궁금하다면 이 연구에 대한 내용이 단서를 줄 수 있을 것이다. 폼에 관련된 사용성 문제는 비지니스에 부정적인 영향을 줄수있다.
당신의 웹사이트는 폼디자인 사용성 가이드라인을 잘 따르고 있는가?
웹 폼 디자인의 좋은 적용들
최선의 디자인 솔루션은 다양한 기준(폼의 길이, 사용 맥락, 수집될 데이터)에 의해 결정된다. 특수한 상황이 아니라면 당신은 가이드라인을 무시할 핑계가 없다. 그대신에 아래의 권장사항들을 시작점으로 사용하고 만약 아래의 내용에서 벗어나야한다면 분명한 이유가 있어야 한다.
1. 입력필드를 짧게 해라 : Blaise Pascal 수학자가 말한 유명한 말중에 "나는 짧게 만들 시간이 없기 때문에 이걸 평소보다 길게 만들었다." 이 법칙은 웹사이트 폼에도 적용된다. 불필요한 필드는 시간을 더 소요하게 만든다. 불필요한 필드를 삭제하는 일에는 많은 시간이 소요되지만 사용자가 적은 노력을 들이게 하고 작성 완료율을 높인데 충분한 가치가 있다. a.다른방법으로 수집 할 수 있는 정보이거나, b.나중에 더 편리하게 수집 할 수 있거나, c. 단순히 생략할 수 있는 필드라면 제거해라. 6개를 입력해야하는 필드인데 2개만 입력하도록 줄일 수 있다면 줄이는 것이 좋다. 매번 당신은 폼의 길이를 줄이거나 폼의 질문을 줄이게 될때 당신은 폼작성완료율이 오르는 것을 알 수 있을 것이다.
2.시각적으로 관련있는 라벨과 필드들을 묶어라 : 라벨들은 반드시 입력필드와 가까워야디스플레이 환경에 따라 다르지만 모바일과 넓이가 좁은 디바이스에서는 라벨을 위로 올리고 넓은 환경에서는 옆에 위치하게 한다.) 라벨과 각 필드사이의 간격은 동일해야하고 애매모호한 간격을 피한다. 만약 당신의 폼이 두개의 다른 주제에 대해서 묻는 다면 2개는 다른 그룹으로 묶어서 제공해야한다.
3.한개의 행에 필드가 보이도록 해라 : 여러개의 행으로 디자인된 입력 폼은 수직으로 폼을 내리고 올려야해서 번거롭다. 사용자가 시각적으로 알아서 입력할 다음 폼들을 찾게 두지말고 사용자들이 입력할 값들을 한개의 행안에서만 달라붙어 한개의 행안에서 열만 이동하며 값을 채우도록 한다. 하지만 예외로 짧은 값을 입력하며 서로 상관관계가 있는 우편번호, 도시등에 대한 정보를 보여줘야한다면 같은 열에 두개의 값을 둘 수 있다.
4.논리적인 순서로 배열하라 : 기본적인 순서에 맞추고 값을 고를 수 있도록 해라 . 예를 들어 신용카드 정보를 입력한다면 카드 번호 다음에 유효기간 다음에 보안코드를 작성하도록 하고 배송기간을 고르게 한다면 기본배송(3-5일), 이틀이 걸리는 배송, 하루만에 배송되는 순서로 배열한다. 그러나 자주 사용되는 값에 대해서 고려를 하여 가장 많이 사용되는 값을 맨 위에 위치시켜야한다. 키보드 사용자들은 Tab키를 사용해 필드를 이동하는 것에 익숙하기 때문에 탭사용에 대한 적용도 확인한다.
5.인풋값 사이즈와 종류에 맞춰 디자인 하라 : 드랍다운은 2-3개의 옵션이 있을 때는 적용하는 것을 피한다. 2-3개의 옵션이라면 라디오 버튼으로 디자인 한다. 텍스트 필드는 사용자가 입력할 값의 길이의 대략적인 크기로 디자인한다. 예를 들어 2130며의 최근 UX 컨퍼런스에 참가한 참가자들의 주거지를 입력도록 하였는데대부분의 도시 이름이 3자에서 22자사이였다. 99.9프로의 도시 이름은 19자이거나 그것보다 짧았기 때문에 19자가 들어 갈 수 있는 도시 입력 필드로 디자인 하였다.
6.필수 입력 필드와 선택적인 입력 필드를 구분할 수 있게 해라 : 먼저 선택적으로 입력해도 되는 많은 필드들은 되도록 제거해라. 한개 또는 두개의 선택적인 입력필드를 제공하는 것으로 제한하고 선택입력사항이라는 라벨을 분명히 표기한다.
7.요구되는 포멧이 있는 경우 설명을 꼭 써라 : 만약 입력필드에 특정 포멧 또는 타입이 입력되어야한다면 정확한 지시사항을 표기한다. 사용자가 애매한 비밀번호 포맷을 추측하도록 하지 말아라. 같은 적용 예로 전화번호 또는 신용카드 번호를 입력할 떄 마침표, 띄어쓰기에 대한 내용을 기입한다. 숫자만 입력하도록 하는 것이 좋다.
8.리셋 또는 클리어 버튼 사용을 피한다 : 실수로 전체 삭제를 누르게 되는 위험이 '처음부터 다시시작' 버튼을 눌러야만 하는 가망성이 없는 필요보다 훨씬 크다. 폼에서 재정정보같은 민감한 정보에는 '취소하기'버튼을 지원하여 사용자가 정보를 지우고 싶어할때 삭제할 수 있도록 한다. 그러나 '취소하기'버튼의 경우 '제출하기' 버튼보다는 눈에 띄게 디자인 하지 않도록 하여 실수로 클릭하지 않도록 확실히 디자인 한다.
9.눈에 확실하게 띄고 구체적인 에러메세지를 제공해라 : 에러는 다양한 신호를 통해 표시 되어야하고 색상만으로는 부족하다. 아웃라인으로 필드에 표시하고 빨강색 글씨와 두꺼운 폰트로 표시하여 사용자가 중요한 정보를 그냥 지나치지지 못하도록 확실하게 한다. 애매하게 남겨두지 말아라.
에러가 날 수 있는 인풋에는 사용자가 에러를 방지하고 옳은 값을 입력 할 수 ㅣㅇㅆ도록 하고 문제에 대한 구체적인 설명을 적는다
결론
웹폼의 사용성은 새로운 주제가 아니다. 일반적인 사용성 참고자료에서 다뤄진 가이드 라인이다. 이커머스 쇼핑카트를 위한 114개 UX 가이드라인에서도 폼디자인 이슈가 전문적으로 다뤄졌다. 폼 디자인만 다룬 책들도 있고 가이드라인 준수 효과에 대한 학술 연구들도 있다.
위의 요약된 내용들이 다른 자료들에서 찾은 깊이 있는 분석 내용들을 대체할 수 있지 않다. 만약 당신이 폼디자인에 집중해서 일하고 있다면 다양한 상황에서 복잡한 모범예제들을 찾는 것에 당신의 시간을 쓰는 것이 가치 있는 업무일것이다.
그러나 많은 나쁜 사례의폼디자인이 가진 문제는 복잡하거나 분명하지 않은 문제가 아니고 당신이 이미 위에서 읽어서 알고 있는 기준을 떠올려 쉽게 해결할 수 있는 문제들이다. 당신의 웹사이트 폼을 들여달볼 시간을 갖고 잘 알고 있는 실수를 만들지 말아라. 누가 알겠나 당신이 두배의 전화율을 올리게 될지!
*저는 전문 번역가가 아니기 때문에 정확한 내용은 원문을 통해 확인하시길 바랍니다*
