내가 필요해서 정리한 모바일 UX/UI 디자인 가이드라인 2

🏷 Vivian's curating
애플 iOS HIG와 구글 MDG를 중심으로 정리한 ux/ui 디자인 가이드라인 두번째. 첫번째 아티클에 이어 두번째 아티클도 공유! 링크를 보면 이미지가 첨부되어 있어 내용을 좀 더 잘 이해할 수 있다🤩

✍️요약
13. 회원가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공한다.
→ 입력한 비밀번호는 기본적으로 가려져 있어야 하지만 모바일은 오타 발생이 빈번하므로 이용자가 입력한 비밀번호를 볼 수 있는 옵션을 토글 형태로 제공한다면 빠르게 수정이 가능하다.
👀 [회원가입/로그인 UX를 향상시키는 12가지 방법] 포스팅을 참고하세요!

14.네비게이션 드로워는 1단을 권장한다.
→ 작은 화면에 지나치게 많은 메뉴를 보여주면 인지하기가 어렵기 때문에 네비게이션 구조를 단순화해야 한다. 주로 사용하는 기능은 상위에 사용 빈도가 적은 기능은 스크롤해서 볼 수 있게 디자인해야 한다.
→ 메뉴를 2단으로 할 경우 엄지손가락으로 터치하기가 어려워진다.

15. 이용자가 입력하는 내용이 형식에 맞을 경우 실시간 피드백을 해준다.
→ 이는 이용자의 입력 오류를 줄여주고 다이얼로그의 양식 폼 입력을 완료할 가능성을 높인다.
→ 사용자가 입력 완료 후 경고창 alert으로 에러 메시지를 노출하는 것은 지양한다.

16. 버튼에 사용한 스타일을 다른 요소(섹션 제목 등)에 사용하지 않는다.
→ CTA(Call To Action)은 '전환율'을 높이는데 중요한 역할을 한다. 즉 화면에서 이용자에게 가장 눈에 띄게 해야할 요소 중 하나이기에 버튼은 화면 요소에서 시작적으로 차별화해야 한다.

17. 수량 선택 기능은 오류 방지를 위해 드롭다운보다 스텝퍼 사용을 권장한다.

18. 텍스트 필드에 입력한 텍스트를 모두 지울 수 있는 clear button은 필수적으로 제공해야 한다.
→ 모바일 환경에선 텍스트 입력만큼 지우는 것도 어렵기에 텍스트를 한번에 즉시 지울 수 있는 버튼을 기본으로 제공해야 한다.

19. 라디오 버튼은 언제나 하나의 항목이 기본으로 선택되어 있어야 한다.
→ 라디오 버튼 그룹 중 이용자가 가장 많이 선택할 옵션이나 편리한 옵션을 기본으로 선택되어 있게 한다면 탭을 한 번이라도 단축하는 효과가 있다.
→ 결제 단계와 같은 경우 이용자가 이전에 선택했던 옵션을 디폴트로 선택되게 하는 방법도 좋다.
→ 상품 페이지에 컬러나 사이즈 같은 상품의 옵션 또한 라디오 버튼과 같은 기능을 한다. 사용자가 상품 옵션을 선택하기 전에 기본 옵션을 선택해 놓는 걸 권장한다.

20. 옵션 선택을 완료하지 않은 상태에서 오류 방지를 위해 완료 버튼은 비활성화를 권장한다.
→ 옵션을 드롭다운 형태로 사용하게 된다면 선택하지 않은 상태에서 완료 버튼을 활성화시키지 않아야 한다. 이는 이용자에게 오류 메시지를 노출하여 행동의 흐름을 끊기게 하지 않기 위함이다.
→ 꼭 선택해야하는 옵션은 눈에 띄도록 디자인하고 실행 버튼은 비활성화 한다.

21. '예', '아니오' 같이 두 개의 옵션만 있는 경우 하나의 체크박스 또는 토글스위치 사용을 권장한다.
→ 예를 들어 "동의함" 라디오 버튼고 "동의 안 함" 라디오 버튼을 각각 사용하는 대신 "동의함" 체크박스만을 사용한다.

22. 키보드에 중요한 액션 버튼이 가리지 않아야 한다.
→ 이용자가 정보 입력을 완료하고 키보드를 내린 후 확인 버튼을 탭하지 않고 키보드가 있는 상태에서 완료가 가능해야 한다. 만약 입력 필드가 많아 완료 버튼이 가려진다면 우측 상단에 배치하는 것을 고려해야 한다.

23. 모바일에서 팝업을 권장하지 않지만 꼭 필요하다면 풀 프레임 팝업을 고려한다.
→ 모달 팝업은 이용자에게 거부감을 줄 수 있다.

24. 모바일에서 좌우 슬라이드 되는 콘텐츠는 가로 그리드에 딱 맞추지 않아도 된다.
→ 좌우 슬라이더 하단의 도트 페이지네이션 공간을 절약하는 것도 하나의 방법이다.
→ 우측에 콘텐츠를 잘려보이게 디자인하면 좌우로 스와이프해서 볼 수 있다는 시각적인 단서를 제공한다.

25. 메인 페이지의 슬라이더 이미지는 3~5개가 적당하다.
→ 이용자는 슬라이더를 모두 둘러보지 않기 때문에 두번째, 세번째 이상의 프로모션은 노출이 적고 효과가 크지 않다.

#UX/UI디자인 #앱디자인 #모바일디자인 #디자인가이드