11가지 양식 디자인 설계 지침 (11 form design guidelines)

이 글은 Jeremiah Lam11 form design guidelines글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

양식 설계는 지루할 수 있으며 사용자는 항상 양식 작성을 싫어합니다.

presentation
illustration by Ouch.pics
양식은 모든 웹 사이트의 필수 구성 요소입니다. 연락처 양식, 결제 세부 정보, 계정 생성, 리드 생성 등, 사용자는 제품을 사용할 때 반드시 일종의 양식과 상호 작용해야 합니다. 이 게시물의 목적은 더 나은 양식을 설계할 때 제가 따르는 몇 가지 주요 지침을 강조하기 위한 것입니다.

짧게 하세요.

아무도 긴 폼을 좋아하지 않아요. 디자인 설계 프로세스의 "범위 정의" 단계에서 사용자가 목표를 달성하기 위해 각 필드가 필요한지 여부를 질문하는 데 약간의 시간이 걸립니다. 시간이 더 필요할 수도 있지만 사용자 작업 감소로 인해 더 많은 사용자가 양식을 작성할 수 있습니다.
presentation
ASOS 등록 화면은 불필요하게 길고 중복 필드를 포함합니다.

필드 및 해당 레이블을 육안으로 그룹화합니다.

레이블은 각 필드에 가까워야 합니다. 특히 라벨이 필드 위에 있는 경우 흰색 공간을 사용하여 명확하게 분리합니다.
항상 레이블을 다른 필드보다 관련 필드 가까이에 배치합니다. 왜냐하면 인간은 서로 밀접하게 결합되어 있는 사물들을 통해 연결시키는 방식으로 연결되어 있기 때문입니다. -게스탈트의 원리(Gestalt’s Principles)-
presentation
Amazon 가입 양식은 보기 용이하도록 각 필드 사이에 충분한 흰색 공간을 사용합니다.

요구 사항을 명확하게 보여줍니다.

사용자에게 필요한 사항을 알려줍니다. 양식을 작성할 때까지 기다리지 말고 오류 메시지(부정 보강의 일종)를 표시합니다. 검증 규칙을 명확하게 표시하지 않으면 사용자는 이 규칙에서 예상되는 내용을 알지 못합니다. 이는 특히 제품마다 요구 사항이 다르기 때문에 "암호" 필드에 해당됩니다.
presentation
Mailchimp의 경험은 암호 오류 마찰을 완화시킬 뿐만 아니라 사용자가 새 계정을 만들 때 긍정적인 모멘텀을 제공합니다.

Placeholder 텍스트를 필드 레이블로 사용하지 않습니다.

일반적으로 placeholder의 역할은 특정 입력 필드에 필요한 정보 유형에 대한 힌트를 제공하는 데 사용됩니다. 하지만 일부 디자이너는 이를 사용하여 필드 라벨을 교체하여 어수선함과 보다 미니멀한 외관을 줄이고 있습니다.
이 경우 사용자가 입력 필드와 상호 작용하면 placeholder가 사라집니다. 사용자가 필드의 목적을 잊어버리고 placeholder를 다시 보려면 필드 바깥쪽을 클릭해야 하는 경우 이 문제가 발생할 수 있습니다.
여기서 placeholder 텍스트를 필드 레이블로 사용할 때의 부정적 의미에 대해 자세히 읽을 수 있습니다.
presentation
Google은 이 문제를 해결하기 위해 smart micro-interaction을 사용합니다.
사용자가 입력 필드를 클릭하면 자리 표시자 텍스트가 희미해져 왼쪽 상단의 미니 필드 레이블이 됩니다.

자동 포커스를 사용합니다.

양식들이 첫 번째 입력 필드에 자동 포커스를 맞추는 것이 정말 좋습니다. 입력, 탭, 입력, 탭, 완료만 하면 됩니다. 한 번의 클릭만 더 줄일 수 있지만, 미묘한 방법으로 전체 환경을 향상시킵니다.
자동 포커스를 허용하면 활성 필드를 강조 표시하여 첫 번째 필드가 이미 선택되어 있고 계속 작성될 수 있음을 사용자에게 알립니다.

활성 필드(active fields)를 강조 표시(Highlight)합니다.

이 작업은 일반적으로 테두리 색상과 크기를 변경하여 보다 강력한 시각적 신호를 제공하는 방식으로 수행됩니다. 사용자가 무의식적으로 활성 필드에 집중할 수 있도록 선택한 필드의 색이 나머지 양식에서 두드러지도록 합니다. 오류에도 동일한 개념을 사용할 수 있습니다. 일반적으로 오류가 발생하면 텍스트 필드가 빨간색으로 강조 표시됩니다.
presentation
활성 필드(active field)를 강조 표시(highlighting)하여 쉽게 집중할 수 있습니다.

캡 잠금(caps lock)이 켜져 있음을 사용자에게 알립니다.

이것은 매우 간단한 기능이지만 구현된 제품은 많지 않습니다. 캡 잠금(caps lock)이 채워져 있다는 사실을 깨닫지 못하고 계속 거부당해 좌절할 때도 있었습니다. 가장 나쁜 것은, 오류 메시지가 캡 잠금 장치가 켜져 있다는 것조차 알려주지 않았고, 계속해서 제 암호가 잘못되었다는 것입니다. 이것은 사용자들에게 정말 짜증날 수 있습니다.
presentation
Mac OS는 사용자에게 캡 잠금(caps lock)이 설정되어 있는지 알려줍니다.

시각적 제약 조건(visual constraints)을 사용합니다.

시각적 제약 조건(Visual constraints)은 사용자가 필요로 하는 정보를 보강하는 데 도움이 됩니다. 예를 들어 "월(month)" 필드에 두 문자만 필요한 경우 "이름(name)" 필드만큼 길지 않아도 됩니다. 그렇지 않으면 사용자에게 혼란을 줄 수 있습니다.
presentation
Invision은 필요한 정보를 기반으로 필드 길이 크기를 다르게 설정하여 작업을 수행하는 것이 좋습니다.

오류 메시지(error messages)를 숨기지 않습니다.

일부 디자인 설계에서는 도구 팁을 사용하여 오류 메시지(error messages)를 릴레이합니다. 이 작업은 텍스트 필드 옆에 알림 아이콘이 있고 사용자가 아이콘 위에 마우스를 놓으면 오류 메시지가 표시됩니다. 사용자들이 실수를 수정하기 위해 더 많은 노력을 필요로 하기 때문에 이것은 정말 나쁜 UX입니다. 일부 사용자는 오류 메시지를 보기 위해 추가 단계(아이콘 위로 이동)를 수행해야 하는지도 모를 수 있습니다.
presentation
텍스트 필드 맨 아래에 오류 메시지를 표시하는 것이 좋지 않을까요?
양식 내에서 오류 메시지를 설계하는 방법에 대해 자세히 알아보려면 여기에서 오류 메시지에 대한 자세한 내용을 볼 수 있습니다.

옵션 필드(option fields)를 명확하게 표시합니다.

첫 번째 팁을 무시하고(양식을 짧게 유지) 선택적 필드를 사용하는 경우, 선택 사항으로 명확히 표시되어 있는지 확인합니다. 별표만 사용하는 것이 아니라 필드를 "선택적(optional)" 텍스트로 표시하기 위한 보다 강력한 시각적 신호를 제공합니다. 일부 사용자는 별표가 유효성 검사 오류를 나타내는 데 사용되기 때문에 별표라는 의미를 이해하지 못할 수도 있습니다.
presentation
선택적(optional) 텍스트를 사용하면 별표 사용과 비교할 수 있습니다.

이미지를 사용하여 참여를 늘립니다.

이치에 맞는 경우 선택 시 이미지를 사용하여 사용자 환경을 개선합니다. 텍스트, 아이콘 및/또는 이미지를 사용하여 각 선택 항목을 더 잘 설명하려면 이 옵션을 사용하는 것이 좋습니다.
presentation
Google 광고는 이미지를 사용하여 캠페인 유형을 표시합니다.

가능할 때마다 예측 검색을 사용합니다.

이 기능은 주로 사용자가 휴일 목적지와 같이 미리 정의된 옵션이 많은 정보를 입력하도록 요청할 때 작동합니다. 따라서 사용자는 전체 이름을 입력하는 대신 목적지 도시를 찾기 위한 몇 개의 문자만 입력할 수 있습니다. 이 작업은 상당히 짜증날 수 있습니다.
또한 사용자가 검색어를 잘못 입력할 가능성이 적기 때문에 검색 실패 가능성도 줄어듭니다.
presentation
Airbnb는 예측 검색을 사용하여 사용자가 휴가 여행지를 쉽게 찾을 수 있도록 도와줍니다.
저는 양식을 설계하는 것이 지루한 과정이 될 수 있고 대부분의 사용자들은 항상 양식을 작성하는 것을 싫어한다는 것을 알고 있습니다. 하지만 위의 지침을 따르고 UX 카피 안에 유머를 주입하면 사용자의 경험을 향상시키고 감정적인 반응을 이끌어낼 수 있습니다.
그렇게 하는 것은 의심할 여지 없이 UX 디자이너의 역할로서의 목표 중 하나인 완성률을 증가시킬 것입니다.
공동 작업, UI/UX 설계에 대한 설명 또는 대화만 원하는 경우 LinkedIn을 통해 연결하면 됩니다. 행복한 디자인 하세요!
Thanks to Fabricio Teixeira.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz