보다 효율적인 Form 설계
Structure, Inputs, Labels and Actions
(출처 : https://uxplanet.org/designing-more-efficient-forms-structure-inputs-labels-and-actions-e3a47007114f#.ybnc6l6ot의 기사를 번역 및 가공한 컨텐츠 입니다.)
유저들은 특별한 목표를 달성하기 위해 앱이나 사이트를 사용하고, 유저와 유저가 원하는 목표 사이에는 사이트의 폼(form, 양식)이 존재합니다.
폼은 웹이나 앱의 유저들에게 가장 중요한 상호작용이 일어나는 곳이기도 하면서 유저가 원하는 바를 달성하기 위한 중요한 요소이긴 하지만, 결국엔 유저가 원하는 목표를 이루게 할 수 있게 하는 수단일 뿐이며 유저가 폼을 입력할 때 혼란 없이 빠르게 완료할 수 있어야 합니다.
이 기사에서는 사용성 테스트, 필드 테스트, 아이트래킹 및 불만을 가진 유저가 작성한 실제 불만 사항을 토대로 만들어진 실용적인 가이드라인을 볼 수 있습니다.
폼의 구성요소
일반적인 폼은 다음과 같은 다섯 가지 구성 요소가 있습니다.
1. 구조 - 필드들의 정렬, 페이지의 모양 및 여러 필드 간의 상호 관계가 포함됩니다.
2. 인풋필드(입력란) - 여기에는 텍스트 필드, 패스워드 필드, 체크 박스, 라디오 버튼, 슬라이더 및 유저가 정보를 입력하기 위해 사용되는 모든 필드가 포함됩니다.
3. 레이블 - 해당 인풋필드의 뜻이나 의미를 유저에게 알려줍니다.
4. 액션버튼 - 유저가 버튼을 누르면 해당 액션이 완료됩니다. (예 : 제출하기)
5. 피드백 - 유저는 피드백을 통해 자신이 작성한 인풋필드의 결과를 알게 됩니다. 대부분의 앱이나 사이트는 피드백으로 메시지를 사용합니다. 메시지는 결과에 대해 유저에게 알려주고 그 결과가 긍정적(폼이 성공적으로 제출된 것을 나타냄)이거나 부정적(“입력하신 숫자가 잘못되었습니다”) 일 수 있습니다.
이 외에도 추가로 폼에는 다음과 같은 구성요소가 있습니다:
1. 지원, 보조의 요소 : 폼에 대한 작성 방법을 설명해주고 도와줌.
2. 확인의 요소 : 유저의 데이터가 올바른지 자동으로 검사해서 확인해 줌.
하지만, 이 기사에서는 구조, 인풋필드(입력란), 레이블 및 액션버튼과 관련된 측면을 다룹니다.(위의 항목에 대해서는 https://uxplanet.org/designing-more-efficient-forms-assistance-and-validation-f26a5241199d#.700zl56bm 여기서 도움을 얻을 수 있습니다)
폼의 구조
폼은 유저와 나누는 대화입니다.
꼭 얻고 싶은 정보만 물어보기
당신이 정말로 필요한 것을 물어야 합니다. 폼에 추가되는 모든 필드는 전환율에 영향을 주기 때문에 왜 당신이 이 정보를 유저에게 요청했고 어떻게 사용될지, 이 질문을 유저에게 던지는 게 맞는지에 대해서 얻고자 하는 바가 명확해야 합니다.
논리적인 배치
일반적으로 이름 앞에 주소를 물어보는 것은 드문 일인 것처럼 폼에 포함된 세부사항은 DB의 순서가 아니라 유저 관점에서 자연스러운 플로우로, 연관된 질문들과 함께 배치되어야 합니다.
관련된 정보끼리 그룹화
하나의 블록이나 세트로 관련정보를 묶어야 합니다. 관련 필드를 그룹화 하면 유저는 입력해야하는 정보를 이해하는 데 도움이됩니다. 아래는 연락처 정보의 예입니다.
그룹은 연관된 항목끼리 그룹핑되어 있어야 합니다. Image credits: NNGroup한 줄 vs 여려 줄
양식은 둘 이상의 줄로 구성되어서는 안됩니다.
두 줄 이상의 줄로 구성되어 있을 경우, 유저는 일관성 없이 필드를 해석할 수 있습니다.
폼에 가로에 가까운 필드가 있는 경우 Z 패턴으로 필드들을 스캔해야 하므로 한 줄에 비해 속도가 느려지고 폼 작성을 완료하기까지 유저가 길을 헤맬 수도 있습니다.
반대로, 폼이 한 줄로 구성되어 있다면 완료까지 경로가 직선으로 곧게 나 있어서 길을 헤매지 않고 빠른 속도로 완료할 수 있습니다.
왼쪽 : 필드가 2열로 배치되었을 때 유저가 어떻게 해석하는지를 보여줍니다. 오른쪽: 유저의 폼 작성 경로가 폼을 따라 곧게 나 있습니다인풋필드(입력란)
인풋 필드는 유저가 양식을 채울 수 있는 폼입니다. 어떤 정보를 묻는지에 따라 텍스트 필드, 패스워드 필드, 드롭 다운, 체크 박스, 라디오 버튼, 데이트 피커 등 다양한 유형의 필드가 있습니다.
필드의 갯수
가능하면 필드의 수를 최소화하십시오. 이 방법은 특히 유저에게 많은 정보를 요청할 때 로드가 적어 보일 수 있어서 좋습니다. 하지만 필드의 숫자를 최소화 시키기 위해 필드들을 서로 겹쳐두는 건 좋지 않습니다.
3가지 필드 형식으로 보이지만 30가지 필드의 질문으로 변하는 폼은 어떤 유저도 반가워하지 않습니다.
하나의 필드에 여러가지 필드를 조합시킨 예필수입력 vs 선택입력
폼에 선택입력 항목이 표시되지 않도록 하는 게 좋지만, 만약 선택입력필드를 표시할 경우 유저가 비워 둘 수없는 필수입력 항목도 분명히 알려줘야 합니다.
별표 (*) 또는 ‘선택입력 사항’(여러 필수입력 항목이 있는 긴 양식의 경우 선택입력 항목을 알려주는 것이 바람직)을 사용하는 방식이 일반적입니다.
Mailchimp의 메일 구독 양식기본값의 설정
여러 가지 옵션을 선택해야 하는 필수 입력항목인 경우에 유저의 상당수(90 % 정도)가 해당 값을 선택한다고 고려되지 않는 한 고정된 기본값을 사용하지 않는 것이 좋습니다.
유저들은 기본적으로 폼을 빠르게 스캔합니다. 이미 선택된 고정 값이 있을 경우 그 항목을 스킵 하여 오류가 발생할 확률이 높습니다.
그러나 똑똑한 기본값을 사용하면 유저가 양식을 더 빠르고 정확하게 완성할 수 있습니다.
예를 들어 지리적 위치 데이터를 기반으로 유저의 국가를 미리 선택해두는 방식이 그중 하나입니다. 하지만 유저는 미리 선택된 필드를 그대로 두는 경향이 있으므로 기본값을 사용할 때는 주의해서 사용해야 합니다.
똑똑한 기본값을 통해 미리 선택된 국가를 결제 양식에 포함합니다.데스크탑에서: 키보드로 친숙한 폼 만들기
유저는 키보드만 사용하여 모든 필드를 편집 및 작성할 수 있어야 합니다.
키보드를 많이 사용하는 경향이 있는 유저는 손가락을 키보드에서 떼지 않고 탭하여 필요한 편집 및 입력 작업을 완료할 수 있어야 합니다. 키보드와 폼의 상호 작용에 대한 자세한 요구 사항은 W3C(http://www.w3.org/TR/wai-aria-practices/#aria_ex)에서 찾을 수 있습니다.
간단한 데이트피커도 W3C을 따르면 사용하기 편합니다. 이미지출처 : Salesforce데스크탑에서: 인풋필드에 오토포커싱
인풋필드에 오토포커싱을 주면 유저가 양식을 채우기 시작했다는 표시와 입력의 시작점을 제공해주기 때문에 유저가 폼을 빠르게 작성할 수 있습니다.
초점이 이동했다는 명확한 시각적인 '알림'을 제공하는 방법으로는 인풋필드의 색상 변경, 상자 안의 페이드, 화살표 등으로 깜박이는 장치를 만드는 것입니다. Amazon의 등록 품은 유저들에게 오토포커싱 기능과 시각적인 알림 기능을 제공합니다
모바일에서 : 입력되는 텍스트의 종류에 따라 키보드의 양식 맞추기
앱 유저는 텍스트 입력에 적절한 키보드를 제공하는 앱을 고맙게 생각합니다.
이 기능은 특정 작업에만 적용되는 것이 아니라 앱 전반에 걸쳐 일관되게 제공되어야 합니다.
이미지출처 : Google레이블
명확한 레이블 텍스트는 유저에게 필드의 용도를 알려줌으로써, UI의 접근성을 높일 수 있는 주요 방법 중 하나입니다. 필드에 포커스가 있을 때도 레이블이 유지되어야 하며 필드를 완료 한 후에도 레이블은 유지되어야 합니다.
단어의 수
레이블은 도움말 텍스트가 아닙니다.
유저가 양식을 빠르게 스캔 할 수 있도록 간결하고 설명이 쉬운 레이블 (한두 단어)을 사용해야 합니다. 이전 버전의 Amazon 등록폼에는 많은 단어가 포함되어 있어 완료율이 낮았습니다.
현재 버전은 훨씬 짧은 레이블로 변경되었습니다.
레이블에 대한 정렬 : 위쪽 정렬 vs 왼쪽 정렬 vs 오른쪽 정렬
Matteo Penzo의 2006 년 레이블 배치에 관한 기사는 레이블이 필드 위에 있을 경우 폼이 더 빨리 완성된다는 것을 보여줍니다. 위쪽으로 정렬된 필드 레이블은 유저가 폼을 최대한 빠르게 훑어보도록 하려는 경우에 유용합니다.
왼쪽 정렬 , 오른쪽 정렬 , 위쪽 정렬 레이블 / 이미지 출처 : uxmatters하지만 최초 연구와 달리 추가 연구는 필드 위에 있는 레이블과 오른쪽 정렬된 레이블 간에 차이가 없음을 발견했습니다.
위쪽정렬 레이블
레이블이 위쪽으로 정렬된 경우의 가장 큰 장점은 글자 수에 따라 다른 다양한 크기의 레이블들과, 레이블의 성격에 따라 커스텀 된 인풋필드를 폼에 쉽게 적용할 수있게 해줍니다 (특히 폼의 공간이 제한된 모바일 화면에 적합).
이미지 출처 : csstricks왼쪽정렬 레이블
왼쪽 정렬 레이블의 가장 큰 단점은 폼이 완성되기까지 가장 시간이 오래 걸린다는 것입니다. 이 단점은 레이블과 인풋필드 사이의 시각적 거리 때문에 발생하는데 레이블이 짧을수록 레이블과 인풋필드가 더 멀리 떨어져 입력되기 때문입니다.
그러나 느린 완성도가 항상 나쁜 것은 아니며, 특히 폼에 신중하게 데이터를 입력받을 때는 유저에게 시간을 더 제공하는 것이 좋습니다. 운전면허증이나 여권번호와 같은 중요한 데이터를 요구하는 경우 유저를 조금 늦추고 올바르게 입력하도록 하십시오.
이미지 출처 : csstricks오른쪽정렬 레이블
오른쪽 정렬 레이블의 가장 큰 장점은 레이블과 입력 간의 강력한 시각적 연결입니다. 서로 가까이 있는 항목이 관련되어 표시되기 때문입니다. 관련 항목을 서로 가깝게 배치하는 이 원칙은 게슈탈트 심리학에서의 근접법을 사용한 방법론입니다.
단점으로는, 짧은 형식의 경우 오른쪽 정렬 레이블의 완성 시간이 조금 더 길어질 수 있습니다. 오른쪽 정렬 라벨의 단점은 안정감이 부족하다는 점입니다. 일관된 왼쪽 출발점이 없어서 보기가 쉽지 않고 생소한 레이블명을 사용해야 할 경우 읽기가 더 어려워질 수 있습니다.
이미지 출처 : csstricks유저가 양식을 빨리 스캔하도록 하려면 각 필드 위에 레이블을 붙이는 것이 좋습니다.
이 타입의 레이아웃은 시선이 페이지 위에서 아래로 수직으로 이동하기 때문에 문맥을 따라 스캔하기가 더 쉽습니다.
하지만 유저가 주의 깊게 읽도록 해야 한다면 필드의 왼쪽에 레이블을 붙이는 것이 더 좋습니다. 수직보다 더 느린 상하 (Z 모양) 모션으로 읽히기 때문에 유저에게 신중함을 이끌어 낼 수 있습니다.
일직선 레이블 (플레이스 홀더 텍스트)
플레이스 홀더 텍스트는 간단한 유저 이름 및 비밀번호 같은 인풋필드가 주요 요소인 폼에 적합합니다.
이미지 출처 : snapwi그러나 간단하지 않고 많은 정보가 있을 때엔 기존 레이블을 대체할 수는 없습니다.
플레이스 홀더에 레이블을 사용하는 것은 좋아 보일지 모르지만 유저가 텍스트 상자를 클릭하면 레이블이 사라지므로 유저는 자신이 작성한 내용이 실제로 작성했어야 하는 내용인지 다시 확인할 수 없습니다. 또 다른 단점으로는 유저가 텍스트 상자 내부에 쓰인 것을 볼 때 그 부분이 이미 미리 채워져 있다고 가정하고 무시할 수 있다는 것입니다.
필드에 라벨로서 플레이스 홀더가 쓰인 경우플레이스 홀더 텍스트에 적합한 솔루션은 플로팅 레이블입니다.
플레이스 홀더는 기본적으로 표시되어있지만 인풋 필드를 두드리고 텍스트를 입력하면 플레이스 홀더 텍스트가 희미해지고 상단 정렬 레이블이 애니메이션으로 나타납니다.
이미지 출처 : dribbble플레이스 홀더만 의존하지 말고 기존 레이블도 함께 사용하는 것이 좋습니다, 플레이스 홀더가 있는 인풋 필드가 한번 채워지면 플레이스 홀더는 더 이상 표시되지 않기 때문에 유저가 본인이 입력한 정보의 유효성을 확인하기가 어렵습니다. 유저가 올바른 필드를 채웠는지 확인 가능하게 하는 플로팅 레이블을 사용할 수 있습니다.
액션버튼
버튼을 클릭하면 양식을 제출하는 등, 작업의 트리거 역할을 합니다.
메인액션vs 보조액션
메인액션과 보조액션 간의 시각적 차이가 없으면 매인 액션이 쉽게 유도되지 못하고 유저의 목표가 보조액션의 방해를 받아 실패할 확률이 높아집니다. 보조액션의 시각적 돋보임을 줄이면 실패의 잠재적인 위험을 최소화하고 유저들이 원하는 결과를 얻기 쉽습니다.
이미지 소스 : Lukew버튼 위치
복잡한 양식에는 일반적으로 뒤로 가기 버튼이 필요합니다.
이러한 버튼이 입력 필드 바로 아래에 있으면 유저가 실수로 이를 클릭할 수 있습니다. (하단 스크린샷 참조) 뒤로 버튼은 부차적인 동작이기 때문에 하단 스크린샷의 오른쪽 사진처럼 올바른 위치에 있어야 합니다.
좌측 : 잘못된 뒤로가기 버튼 위치 | 우측 : 위치대비와 색상대비를 통해 뒤로가기 버튼이 거의 안보이는 경우 / 이미지출처: Caroline Jarrett버튼 이름
액션에 대해 "제출 "과 같은 일반적인 단어는 사용하지 않는 것이 좋습니다.
폼 자체가 일반적이라는 인상을 주기 때문입니다. 버튼을 클릭할 때 '내 무료 계정 만들기'또는 '나에게 주간 일정 보내기'와 같이 버튼을 눌렀을 때 할 수 있는 동작을 설명하는 것이 좋습니다.
액션버튼을 동시에 사용하기
유저의 목표를 분산시킬 수 있으므로 여러가지 액션 버튼을 섞어서 사용하면 안됩니다.
초기화 버튼
폼의 내용을 초기화시키는 버튼은 좋지 않습니다.
사실상 폼의 내용을 초기화시키는 ‘리셋’버튼은 유저에게 거의 도움이되지 않습니다.
이미지 출처 : form-ux-tips버튼의 시각요소
액션버튼이 버튼처럼 보이는지 확인해야 합니다.
살짝 띄우는 방식이나 볼륨 등으로 스타일을 지정해서 클릭 할 수 있음을 나타내 주는 것이 좋습니다. (버튼에 대한 자세한 내용 : https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6#.g2spn689u)
시각적으로 피드백 주기
유저가 폼을 채운 작업 후에 해당 폼이 처리 중임을 분명히 보여주는 방식으로 버튼을 디자인해야 합니다. 이렇게 하면 유저에게 피드백을 제공하는 동시에 이중 게시물도 피할 수 있습니다.
이미지 출처 : cssbuttons결론
유저는 폼을 작성하는 것을 주저할 수 있으므로 폼을 가능한 한 쉽게 만들어야 합니다.
필드들을 그룹으로 묶는다던지, 각 필드들에 어떤 정보들이 들어가야 하는지 직관적으로 알 수 있게 하는 작은 변화들은 폼의 유용성을 크게 높일 수 있습니다.
사용성 테스트는 폼을 디자인 할 때 필수적입니다. 단지 몇 가지 테스트를 수행하거나 동료에게 폼의 프로토타입을 사용하게 해보는 것만으로도 폼 디자인에 대한 인사이트를 얻을 수 있을 것입니다
