애플 iOS HIG와 구글 Material design가이드를 중심으로
입력한 비밀번호는 기본적으로 (......) 형태로 가려져 있어야 합니다. 모바일에서는 작은 키보드로 인해 오타 발생이 빈번합니다. 사용자가 입력한 비밀번호를 볼 수 있는 옵션을 토글 형태로 제공한다면 빠르게 수정이 가능합니다. 또한 사용자가 비밀번호를 잊어버릴 확률을 줄일 수 있습니다.
5개 이상의 주요 탐색 경로가 있을 경우 내비게이션 드로워 Navigation drawers를 사용할 수 있습니다. 모바일은 내비게이션 구조를 단순화해야 합니다. 작은 화면에 지나치게 많은 메뉴를 보여 주면 인지하기가 어렵습니다. 주로 사용하는 기능을 상위에 노출하고 사용빈도가 적은 기능은 스크롤해서 볼 수 있게 디자인해야 합니다.
텍스트 필드에 사용자가 입력하는 내용이 형식에 맞을 경우 실시간 데이터 확인을 통해 적절한 실시간 피드백을 제공해야 합니다. 이는 사용자의 입력 오류를 줄여주고 다이얼로그의 양식 form 입력을 완료할 가능성을 높입니다. 사용자가 입력 완료 후 경고창 alert으로 애러 메시지를 노출하는 것은 지양합니다.
CAT(Call to Action)는 사용자에게 어떤 행위를 권하거나 유도하는 도구 또는 기법을 말합니다. ‘전환율’을 높이는데 중요한 역할을 합니다. 여기서는 전환을 유도하는 버튼과 버튼 레이블(문구)을 의미합니다.
버튼에 대한 자세한 내용은 아래를 참조
Clear button은 텍스트 필드 내 입력한 텍스트를 한 번에 모두 지우는 버튼입니다.
텍스트 필드에 대한 더 자세한 내용은 아래 링크를 참고하세요.
https://brunch.co.kr/@chulhochoiucj0/20
라디오 버튼은 두 가지 이상의 옵션 중 하나만 선택할 수 있습니다. 사용자는 라디오 버튼들 중에 하나만 선택할 수 있습니다. 라디오 버튼 그룹 중 사용자가 가장 많이 선택할 옵션이나 편리한 옵션을 기본으로 선택되어 있게 하십시오. 텝을 한 번이라도 단축하는 효과가 있습니다.
만약 시스템 적인 문제나 그 외 적인 문제로 인해 옵션을 드롭다운으로 해야만 한다면 옵션을 선택하지 않은 상태에서 완료 버튼(Buy Now 같은)을 활성화시키지 않아야 합니다. 이는 사용자가 텝한 후 오류 메시지를 노출하여 행동의 흐름을 단절시키지 않기 위함입니다.
예를 들어 "동의함" 라디오 버튼과 "동의 안 함" 라디오 버튼을 각각 사용하는 대신 "동의함" 체크박스를 사용합니다.
풀 스크린에서 로그인 등 입력 필드 하단에 확인 버튼이 있는 경우 키보드에 버튼이 가려지지 않아야 합니다. 키보드가 있는 상태에서 완료가 가능해야 합니다. 사용자가 정보를 입력을 완료하고 키보드를 내린 후 확인 버튼을 텝하지 않아야 합니다. 만약 입력 필드가 많아 완료 버튼이 가려진다면 우측 상단에 배치하는 것을 고려해보세요.
모바일의 한정된 화면 크기에서 콘텐츠를 부각할 방안을 고민해야 합니다. 좌우 슬라이더 하단의 도트 페이지 네이션(iOS 명칭) 공간을 절약하는 것도 하나의 방법입니다.
https://brunch.co.kr/@chulhochoiucj0/8
https://brunch.co.kr/@chulhochoiucj0/10
https://brunch.co.kr/@chulhochoiucj0/12
참고 사이트
https://developer.apple.com/ios/human-interface-guidelines/ui-controls/steppers/
https://material.google.com/components/selection-controls.html#selection-controls-checkbox
https://medium.com/about-codecademy/reimagining-codecademy-com-1ebd994e2c08#.qnipcgmvf
https://brunch.co.kr/@ebprux/26
https://brunch.co.kr/@ebprux/92
https://msdn.microsoft.com/ko-kr/windows/uwp/controls-and-patterns/radio-button
https://uxdesign.cc/design-better-forms-96fadca0f49c?source=linkShare-5e55544be209-1476968478
해외 UX 관련 글을 번역해주시는 전민수 님, Elly 님 , 흔디님 감사합니다.