모바일 UI·UX 디자인 시 고려해야 할 가이드라인 4
애플 iOS HIG와 Material design 가이드를 중심으로
34. 내비게이션 요소와 UI 요소가 콘텐츠보다 더 부각되지 않아야 합니다.
내비게이션 요소와 컨트롤은 사용자가 콘텐츠를 탐색하고 상호작용할 수 있게 해주는 수단일 뿐입니다. 이 두 요소는 콘텐츠보다 부각되어서는 안 됩니다. 수많은 연구가 사람들은 웹 콘텐츠를 훑어본다는 것을 보여줍니다. 내비게이션은 목표가 아니라 수단입니다. 내비게이션은 사용자가 무엇인가를 찾도록 도와주는 것입니다. 사용자가 내비게이션의 존재를 느끼지 못한다면 가장 훌륭한 내비게이션입니다. 모바일에서 사용자가 필수적인 콘텐츠에 관심을 집중할 수 있게 다자인해야 합니다.
사용자가 콘텐츠에 집중해야 합니다. UI컨트롤과 내비게이션 요소를 조직화하고 통합하여 콘텐츠보다 부각되는 걸 최소화합니다.
콘텐츠 페이지에서는 콘텐츠 외적인 요소는 최소화해야 합니다. 내비게이션바는 한단이어야 합니다. 모바일은 데스크톱에 비해 내비게이션을 단순화해야 합니다.35. 삭제와 같이 되돌릴 수 없는 액션의 경우, 다시 한번 확인요청을 합니다
사용자가 실수로 항목을 삭제할 경우 되돌리기는 매우 어렵습니다. 항목을 삭제하거나 입력을 하던 중 취소할 경우, 정말로 실행할 것인지 확인요청을 해야 합니다. 사용자가 실수를 해도 이를 다시 원상 복구할 수 있어야 합니다.
사용자가 장바구니에 상품을 담기 위해서는 많은 탐색시간을 소요한 이후입니다. 담긴 상품을 실수로 삭제할 경우 이전과 비슷한 노력을 들여야 동일 상품을 담을 수 있습니다.
iOS의 사진 앱은 사진을 삭제할 경우 다시 한번 확인합니다.36. 사용자의 노력으로 만들어진 정보는 쉽게 삭제할 수 없게 디자인되어야 합니다.
블로그, 주소록, 장바구니에 담긴 상품 등 사용자가 직접 입력하거나 실행하여 만들어진 정보는 삭제가 어렵게 만드는 것이 좋습니다. 사용자가 액션을 취소하고 다시 실행할 수 있어야 합니다. 사용자가 실수를 했다면 원래 상태로 되돌릴 수 있어야 합니다.
장바구니 '전체 삭제' 또는 '선택 삭제'같은 기능은 아무리 생각해도 바보 같은 기능입니다. 장바구니에 담긴 상품은 사용자가 장시간 탐색을 통한 결과물입니다.장바구니에서 구매 포기율이 평균 60%가 넘는 상황입니다. 장바구니에 담긴 상품을 두 번의 터치만으로 전체 삭제가 가능하게 한다는 것은 사용성뿐만 아니라 전환율에도 좋지 않습니다. 장바구니에 담긴 상품은 스팸메일이 아닙니다. (메일도 삭제하면 휴지통으로 이동하고 다시 복구할 수 있습니다.)
자라 앱은 편집 모드로 이동 후 삭제 가능합니다.
페이스북은 개별삭제만 가능합니다. 삭제버튼은 노출하지 않고 팝오버를 통해 삭제가 가능합니다.도널드 A. 노먼(Donald Arthur Norman)은 UI에서 자연스러운 제약이 필요하다고 했습니다.
사용자의 잘못된 사용으로 인한 시간적 손실과 발생 가능한 시스템과 사용자의 위험 요소를 방지하기 위해 자연스러운 인터페이스의 제약이 필요하다고 합니다. 이커머스 사이트와 페이스북과 같은 SNS에서 '시스템과 사용자의 위험 요소'는 사용자의 노력으로 생성된 콘텐츠가 삭제되는 것일 수 있습니다.
37. 리스트에서 선택 또는 실행 버튼은 불필요합니다.
리스트의 항목 하나하나를 터치할 경우 주요 액션이 실행됩니다. 따라서 주 액션을 실행하기 위한 버튼이나 아이콘, 텍스트는 사용하지 않습니다. 리스트 내에 주 액션 외의 부수적인 액션은 오른쪽에 놓습니다.
주문 결제에서 배송지 목록 중 하나를 탭할 경우 배송지가 바로 적용됩니다. 따라서 선택 버튼은 불 팔요 합니다. 주소를 수정하는 부수적인 액션은 우측에 놓습니다.
우측같이 멜론 앱의 음악 차트 리스트는 듣기 버튼이 없습니다. 리스트 항목이 맥락상 바로 실행 가능한 항목일 경우 액션 버튼은 불필요합니다.38. 주 액션과 되돌릴 수 없는 액션은 같은 위치에 배치하지 않을 것을 권장합니다.
화면에서 주 액션을 부가적인 액션과 동일한 위치에 배치하지 않아야 합니다. CTA버튼은 가장 강조되고 그 외의 부가적인 버튼이 부각되지 않아야 합니다.
장바구니의 목적은 사용자가 주문버튼을 터치하도록 하는 것입니다. 주 액션은 주문하기 버튼입니다. 선택상품 삭제 같은 부가적인 액션은 동일한 위치에 있지 않는 게 좋습니다.39. 본문의 행간은 150% 이상 어야 읽기가 쉽습니다.
모바일 화면에서 정보를 읽을 때 이해도 점수는 데스크톱 수준의 48%에 그친다고 합니다. - 제이콥 닐슨의 모바일 사용성 컨설팅 보고서 발췌 -. 모바일은 작은 화면으로 웹보다도 가독성이 떨어지는 환경이므로 글줄의 간격 Line height이 더 넓어야 합니다. 모바일 콘텐츠는 쉽게 읽고 훑어볼 수 있어야 합니다. 웹브라우저나 피그마 같은 디자인 툴의 기본값은 보통 1.2입니다.
왼쪽의 본문의 행간을 Auto로 설정했고 오른쪽은 160%를 줬습니다. 글줄의 간격이 좁으면 읽기가 힘듭니다. 블로그나 뉴스의 본문(body)은 웹에서보다 행간이 넓어야 합니다.한글은 영문보다 행간이 더 넓어야 합니다. 따라서 150% 적용한다면 16pt사이즈 폰트에서는 24pt이상의 행간이 적절합니다.
https://brunch.co.kr/@chulhochoiucj0/32
40. 내비게이션 바에 너무 많은 컨트롤은 피하세요.
일반적으로 콘텐츠 페이지와 상세정보 화면에서 내비게이션 바 Navigation bar에는 현재 화면 타이틀, 뒤로 가기, 화면 콘텐츠를 관리하는 컨트롤 외에 추가적인 요소는 넣지 않는 것을 권장합니다.
메인화면을 제외하고 내비게이션 바의 요소를 최소화해야 합니다. 좌측 같이 내비게이션 바를 겹쳐서 서용하지 않아야 합니다.참고 자료
https://developer.apple.com/ios/human-interface-guidelines
https://davidhyk.github.io/google-design-ko/material-design/introduction.html
https://brunch.co.kr/@zalhanilll/80
제이콥 닐슨의 모바일 사용성 보고서 - 사용자 중심의 모바일 디자인 전략. 제이콥 닐슨, 라쿠카 부듀 지음
