모바일 UI·UX 디자인 시 고려해야 할 가이드라인 2
애플 iOS HIG와 구글 Material design가이드를 중심으로
모바일에서는 한 화면에 한 가지 행동만 집중하게 디자인해야 합니다.
13. 회원가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공하세요.
입력한 비밀번호는 기본적으로 (......) 형태로 가려져 있어야 합니다. 모바일에서는 작은 키보드로 인해 오타 발생이 빈번합니다. 사용자가 입력한 비밀번호를 볼 수 있는 옵션을 토글 형태로 제공한다면 빠르게 수정이 가능합니다. 또한 사용자가 비밀번호를 잊어버릴 확률을 줄일 수 있습니다.
사용자가 입력한 암호를 빠르게 보거나 가릴 수 있는 토글 형태의 옵션을 제공하세요. 암호 입력 시 오류를 줄일 수 있습니다.
14. 서로 관련성 있는 요소는 가깝게 배치합니다. 근접한 개체들은 동일한 개체로 인식됩니다.
근접성 Proximity의 원칙은 사람들은 가까이 있는 요소끼리는 하나로 묶이는 경향이 있다는 원칙입니다. 디자인 시 근접성을 적용하면 가독성을 높이고 콘텐츠를 빠르게 인식하는데 도움을 줍니다.
은행로고와 은행명을 동일한 간격으로 했을 경우 읽기가 어렵습니다.
개별 정보 간의 간격을 적절하게 조정하면 가독성은 향상됩니다.근접성 원칙에 대한 자세한 내용은 아래 글애서 확인하세요.
https://brunch.co.kr/@chulhochoiucj0/30
15. 사용자가 입력하는 내용이 형식에 맞을 경우 실시간 피드백을 해주세요.
텍스트 필드에 사용자가 입력하는 내용이 형식에 맞을 경우 실시간 데이터 확인을 통해 적절한 실시간 피드백을 제공해야 합니다. 이는 사용자의 입력 오류를 줄여주고 다이얼로그의 양식 form 입력을 완료할 가능성을 높입니다. 사용자가 입력 완료 후 경고창 alert으로 애러 메시지를 노출하는 것은 지양합니다.
사용자가 입력하는 내용이 형식에 맞을 경우 실시간 데이터 확인을 통해 적절한 피드백을 제공해 입력 오류를 줄여줍니다. 입력 완료 후 애러 메시지를 노출하는 것은 지양합니다.
16. 버튼에 사용한 스타일을 다른 요소(섹션 제목)에 사용하지 마세요.
주문서 화면에서 [결제하기]는 CTA(콜투액션) 버튼입니다. 즉 화면에서 사용자에게 가장 눈에 띄게 해야 할 요소 중에 하나입니다. 버튼은 화면 요소에서 시각적으로 차별화해야 합니CAT(Call to Action)는 사용자에게 어떤 행위를 권하거나 유도하는 도구 또는 기법을 말합니다. ‘전환율’을 높이는데 중요한 역할을 합니다. 여기서는 전환을 유도하는 버튼과 버튼 레이블(문구)을 의미합니다.
버튼에 대한 자세한 내용은 아래를 참조
17. 수량 선택 기능은 오류 방지를 위해 드롭다운보다 스텝퍼 사용을 권장합니다.
장바구니의 수량 변경 같은 기능은 스텝퍼 Stepper 사용을 권장합니다.18. 텍스트 필드에 입력 한 텍스트를 모두 지울 수 있는 Clear button은 필수 적으로 제공해야 합니다.
Clear button은 텍스트 필드 내 입력한 텍스트를 한 번에 모두 지우는 버튼입니다.
모바일에서 텍스트를 입력하는 것만큼 지우는 것 또한 어렵습니다. 텍스트를 즉시 지울 수 있는 버튼(Clear button)을기본으로 제공해야 합니다.텍스트 필드에 대한 더 자세한 내용은 아래 링크를 참고하세요.
https://brunch.co.kr/@chulhochoiucj0/20
라디오 버튼의 디자인을 조금 더 사용성이 높은 디자인으로 적용해 보세요
라디오 버튼은 두 가지 이상의 옵션 중 하나만 선택할 수 있습니다. 사용자는 라디오 버튼들 중에 하나만 선택할 수 있습니다. 상호배타적인 옵션 선택을 위한 선택 컨트롤의 기본적인 형태로 오랫동안 사용되어 왔습니다.
하지만 사용자가 옵션을 선택해야 하는 인터페이스를 디자인할 경우 반드시 라디오 버튼 형태로 디자인할 필요는 없습니다.
20. 옵션 선택을 완료하지 않은 상태에서 오류를 방지를 위해 완료 버튼은 비 활성화를 권장합니다.
만약 시스템 적인 문제나 그 외 적인 문제로 인해 옵션을 드롭다운으로 해야만 한다면 옵션을 선택하지 않은 상태에서 완료 버튼(Buy Now 같은)을 활성화시키지 않아야 합니다. 이는 사용자가 탭한 후 오류 메시지를 노출하여 행동의 흐름을 단절시키지 않기 위함입니다.
라디오 버튼과 같은 기능의 옵션 선택을 드롭박스로 해야 할 경우 오류를 방지할 방안을 모색해야 합니다. 우측 같이 꼭 선택해야 할 옵션을 눈에 띄게 하고 실행 버튼은 비활성화하세요21. '예' , '아니요' 같이 두 개의 옵션만 있는 경우 하나의 체크박스 또는 토글스위치를 사용합니다.
예를 들어 "동의함" 라디오 버튼과 "동의 안 함" 라디오 버튼을 각각 사용하는 대신 "동의함" 체크박스를 사용합니다.
위와 같이 둘 중에 하나만 선택할 경우는 라디오 버튼보다 체크박스를 사용을 권장합니다.22. 키보드에 중요한 액션 버튼이 가리지 않아야 합니다.
풀 스크린에서 로그인 등 입력 필드 하단에 확인 버튼이 있는 경우 키보드에 버튼이 가려지지 않아야 합니다. 키보드가 있는 상태에서 완료가 가능해야 합니다. 사용자가 정보를 입력을 완료하고 키보드를 내린 후 확인 버튼을 탭하지 않아야 합니다. 만약 입력 필드가 많아 완료 버튼이 가려진다면 우측 상단에 배치하는 것을 고려해 보세요.
키보드에 로그인 같은 중요한 액션 버튼은 가리지 않아야 합니다.23. 모바일에서는 한 화면에 한 가지 행동만 집중하게 디자인해야 합니다.
한 화면에 지나치게 많은 정보를 요청하지 않고 단계를 나눠 요청합니다.
모바일의 가장 큰 특성 중 하나는 작은 화면입니다. 작은 화면에 사용자에게 한꺼번에 많은 정보를 입력하도록 요청한다면 사용자는 쉽게 입력을 포기하거나 부담을 느껴 입력을 망설입니다.
복잡한 프로세스를 한 페이지에 모두 디자인하지 않고 여러 개의 작은 조각으로 나누어 단계별로 배치해서 디자인해야 사용자의 인지부하를 감소시키고, 페이지 속도가 빨라지고, 오류 처리가 쉬워집니다.
한 페이지에 입력해야 할 내용이 모두 있으면 사용자가 단순하게 느낄 것이라고 생각할 수 있지만, 사용자가 작업을 포기하지 않고 완료하기를 원한다면 여러 단계로 나누어 디자인하면 사용자의 이탈률을 낮출 수 있고, 회원가입 완료나 결제 완료 같은 전환율을 높이는 좋은 수단이 될 수 있습니다.
https://brunch.co.kr/@chulhochoiucj0/31
24. 모바일에서 좌우 슬라이드 되는 콘텐츠는 가로 그리드에 딱 맞출 필요는 없습니다.
모바일의 한정된 화면 크기에서 콘텐츠를 부각할 방안을 고민해야 합니다. 좌우 슬라이더 하단의 도트 페이지 네이션(iOS 명칭) 공간을 절약하는 것도 하나의 방법입니다.
슬라이더 하단에 도트 페이지네이션을 노출하고 가로 그리드에 딱 맞추기보다는 우측같이 좌우 스크롤 개념으로 디자인하는 것을 고려하세요.
애플 앱스토어와 에어비앤비는 우측의 콘텐츠를 잘려 보이게 디자인했습니다. 잘린 콘텐츠는 좌우로 스와이프 해서 콘텐츠를 볼 수 있다는 시각적인 단서를 제공합니다.25. 모바일 화면의 창에 모달을 표시하는 대신 모달 시트를 사용합니다.
모바일 화면에 모달창을 사용하는 대신 모달 시트 Modal Sheet를 사용합니다.
모달창은 데스크톱 화면에서는 레이아웃에 문제가 없지만 모바일에서는 화면의 크기가 작아 콘텐츠를 표시할 영역이 작아지고 버튼을 터치하기가 더 어려워집니다.
화면 중앙에 고정되어 있기 때문에 한 손으로 휴대폰을 잡을 때 사용자의 엄지 손가락이 버튼에 쉽게 닿지 않습니다.
모달 시트 Modal Sheet는 화면 하단에서 슬라이드 되어 나타나고 화면의 전체영역에 콘텐츠와 컨트롤을 레이아웃할 수 있습니다.
모바일 UI 디자인 시 고려해야 할 가이드 모음입니다.
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 님, 흔디님 감사합니다.
