모바일 UI·UX 디자인시 고려해야 할 가이드라인 5
애플 iOS HIG와 Material design 가이드를 중심으로
41. 한 화면에 뒤로 가기 버튼은 하나여야 합니다.
작은 화면에 동일한 기능을 중복 배치하는 것은 사용자에게 혼란을 줍니다. 하단 텝바(bottom navigation bar)가 있는 앱의 경우 상단 내비게이션 바와 기능이 중복되지 않아야 합니다. 불필요한 기능이나 자주 사용하지 않는 가능은 숨기거나 제거해야 합니다. 콘텐츠 페이지에서 중요한 것은 사용자가 글을 읽는데 집중 또는 몰입하는 것입니다. 그 이후 공유를 유도하고 댓글을 쓰거나 북마크를 하는 등의 상호작용을 유도해야 합니다.
상단 내비게이션 바와 하단 텝바 (bottom navigation bar)에 동일한 내비게이션 기능을 중복하지 않아야합니다.42. 상단 내비게이션 바에 내비게이션 요소의 중복을 피할 것을 권장합니다.
모바일 앱의 콘텐츠 페이지 또는 상세 페이지에서 내비게이션 바 왼쪽에 뒤로 가기와 같은 내비게이션 요소가 있다면 우측에 내비게이션 요소는 없어야 합니다. 이 경우 내비게이션 우측은 편집, 완료, 공유 버튼 같은 컨트롤이 있어야 합니다. 만약 iOS(또는 안드로이드)의 UX가이드를 뛰어넘는 차별화된 경험을 제공하기 위한 전략적인 판단이 있다면 위 가이드를 무시해도 무방합니다.
내비게이션 바 왼쪽 상단에 뒤로가기 버튼이 있다면 우측은 해당 페이지와 관련된 컨트롤을 표시하길 권장합니다.43. 뒤로 가기 버튼 옆의 레이블은 이전 화면명입니다.
iOS에서는 일반적으로 뒤로 가기 화살표 아이콘 옆에 이전 화면명을 배치시킵니다. 즉 현재 페이지의 상위 그룹으로 이동을 의미합니다. 현재 페이지의 화면명은 혼란을 피하기 위해 내비게이션 바의 중앙에 위치시켜야 합니다.
내비게이션 바에서 뒤로가기 아이콘 우측 레이블은 이전 화면명이어야 합니다. 현재 화면명은 가운데 정렬을 권장합니다.
내비게이션 바 왼쪽에 뒤로가기 버튼을 중간에 현재 페이지의 화면명을, 우측은 현재 페이지에 대한 컨트롤- 정렬/편집 등 - 을 배치합니다.44. 모바일에서는 브레드크럼 Breadcrumbs을 사용하지 않습니다.
모바일에서는 내비게이션을 단순화해야 합니다. 브레드 스크럼이 있어야 한다면 내비게이션이 복잡함을 의미합니다. 브레드 스크럼은 사이트 전체 구조 안에서 어디에 위치했는지 알려주는 유용한 내비게이션 요소입니다. 특히 이커머스 사이트 같은 많은 양의 콘텐츠가 복잡한 계층 구조로 이루어진 사이트는 반드시 브레드 스크럼 내비게이션을 이용해야 합니다. 사이트 구조를 보여주고, 특정 페이지에 도달하기까지 지나온 경로를 보여주어 내비게이션 과정에서 사용자가 길을 잃지 않게 도와줍니다. 브레드 스크럼이 여러 장점이 있지만 이는 데스크톱 웹사이트에 한해서입니다. 모바일에서는 사용하지 않는 것이 좋습니다. 모바일에서는 브레드 스크럼이 불필요할 정도로 사이트 또는 앱의 내비게이션 요소를 최소화해야 합니다. 모바일 정보 아키텍처에서는 내비게이션 구조를 단순화해야 합니다. 지나치게 깊은 계층구조는 피해야 합니다.
모바일은 데스크탑에 비해 화면 크기 제약이 큽니다. 브레드스크럼을 사용하기보다는 계층구조들 단순화하여 내비게이션 요소를 최소화하여 콘텐츠에 집중하십시요.45. 모바일에서 탑 버튼을 사용하지 않아도 됩니다.
모바일에서는 데스크톱에 비해 탑 버튼이 불필요할 수 있습니다. 꼭 사용해야 한다면 사용자가 아래로 스크롤할 경우 노출하지 않고 스크롤을 멈추거나 위로 스크롤할 때 노출하는 인터렉션을 고민하세요.
모바일에서 탑버튼은 불필요한 요소일 수 있습니다. 사용자가 아래로 스크롤 중에는 노출하지 않는게 좋습니다.46. 가독성을 위해서 중앙 정렬은 피하세요.
사용자는 F패턴으로 콘텐츠를 훑어봅니다. 중앙 정렬은 F패턴으로 읽을 경우 가독성이 떨어집니다.
왼쪽 정렬은 모든 문장의 첫 번째 글자가 동일한 기준 선에 배치되어 새로운 행의 시작을 찾는 것이 쉬워 자연스럽게 읽힙니다. 중앙 정렬은 각 행의 첫 번째 글자가 들쑥날쑥해 시선의 흐름이 자연스럽지 않고 훑어보기에 적합하지 않습니다. 이로 인해 눈의 피로가 발생할 수 있어 많은 양의 글에는 가운데 정렬을 피하세요. 특히 이동 중일 경우 사용자는 읽기를 포기할지도 모릅니다.
가운데 정렬은 각 행의 첫글의 시작 위치가 들쑥 날쑥합니다. 글이 많은 컨텐츠의 경우 왼쪽정렬을 권장합니다.47. 비활성화 요소에 활성화 요소와 동일한 색상을 사용하지 마세요.
비활성화 요소는 텝을 해도 반응하지 않음을 의미합니다. 비활성화 요소가 활성화 요소와 같은 색을 띠면 사용자는 어떤 요소가 텝이 가능한지 구분하기 어렵습니다.
왼쪽 예시에서 비디오와 메일을 비활성화되었습니다. 이 경우 활성화때와 동일 색을 사용하여 투명도를 조절하는 것보다 우측같이 다른 색 사용하여 비활성 처리할 것을 권장합니다.48. 버튼에 사용자의 의도와 관련이 없는 [예], [아니오] 같은 레이블은 사용하지 않아야 합니다.
버튼은 사용자가 클릭하거나 터치할 때 발생할 동작 Action을 표현합니다. 사용자가 버튼을 누를 때 발생할 동작을 설명하는 텍스트 레이블을 사용해야 합니다. 버튼의 레이블은 명확하고 예측 가능해야 합니다. 즉, 사용자는 버튼을 텝 할 때 어떤 일이 발생하는지 명확하게 예상할 수 있어야 합니다.
위 예시에서 사용자는 계좌이체를 하려고 합니다. 이때 버튼은 [예] 가 아니라 [이체하기] 또는 [이체] 여야 합니다. 버튼의 레이블은 사용자가 의도하는 행동을 나타내야 합니다.버튼레이블에 대한 자세한 내용은 다음을 참고하세요.
참고자료
https://brunch.co.kr/@ebprux/45
https://brunch.co.kr/@zalhanilll/86
https://brunch.co.kr/@zalhanilll/80
http://m.blog.naver.com/uiux_lab/220581686385#
책
