모바일 UI·UX 디자인시 고려해야 할 가이드라인 5
Brunch Story
🏷 Vivian's curating
드디어 모바일 ui/ux 디자인 시 고려해야 할 가이드라인 마지막 시리즈를 정리해봅니다. 이외에도 많은 꿀팁들이 있다면 댓글로 공유해주세요😘
✍️ 요약
41. 한 화면에 뒤로 가기 버튼은 하나여야 한다.
→ 작은 화면에 동일한 기능을 중복 배치하는 것은 이용자에게 혼란을 준다.
→ 하단 탭바가 있는 경우 상단 내비게이션 바와 기능이 중복되지 않아야 한다.
42. 상단 내비게이션 바에 내비게이션 요소의 중복을 피하는 것을 권장한다.
→ 내비게이션 바 좌측에 뒤로 가기와 같은 내비게이션 요소가 있다면 우측에는 해당 페이지와 관련된 컨트롤을 표시하는 것을 권장한다.
→ 만약 차별화 된 경험을 제공하기 위한 전략적인 판단이 있다면 이 가이드를 무시해도 된다.
43. 뒤로 가기 버튼 옆의 레이블은 이전 화면명이다.
→ 현재 페이지의 상위 그룹으로의 이동을 의미한다.
→ 현재 페이지 화면명은 내비게이션 바의 중앙에 위치시킨다.
ex. 좌측: 뒤로가기버튼 / 중간: 현재 페이지 화면명 / 우측: 현재 페이지에 대한 컨트롤 (정렬, 편집 등)
44. 모바일에서는 브레드크럼(Breadcrumbs)을 사용하지 않는다.
→ 모바일에서는 내비게이션을 단순화해야 한다. 내비게이션 요소를 최소화하여 콘텐츠에 집중!
45. 탑 버튼을 사용하지 않아도 된다.
→ 꼭 필요하다면, 이용자가 아래로 스크롤할 경우 노출하지 않고 스크롤을 멈추거나 위로 스크롤할 때 노출하는 인터랙션을 사용하는 것 권장.
46. 가독성을 위해서 중앙 정렬은 피한다.
→ 이용자는 F패턴으로 콘텐츠를 훑어보므로 중앙 정렬은 가독성이 떨어진다.
→ 글이 많은 콘텐츠의 경우 좌측 정렬을 권장한다.
47. 비활성화 요소에 활성화 요소와 동일한 색상을 사용하지 않는다.
→ 비활성화 요소는 탭을 해도 반응하지 않음을 의미하므로 같은 색을 띠면 이용자는 어떤 요소가 탭이 가능한지 구분하기 어렵다.
→ 비활성화 요소를 동일 색을 사용하여 투명도를 조절하는 것보다 아예 다른 색을 사용할 것을 권장한다.
48. 버튼에 이용자의 의도와 관련이 없는 [예], [아니오] 같은 레이블은 사용하지 않는다.
→ 이용자가 버튼을 누를 때 발생할 동작을 설명하는 텍스트 레이블을 사용해야 한다.
→ 버튼의 레이블을 명확하고 예측 가능하게 하여 이용자가 버튼을 실행했을 때 어떤 일이 발생하는지 명확하게 예측할 수 있어야 한다.
ex. 계좌이체 시, [확인],[예] 버튼 보다 [이체하기],[이체] 등의 명확한 레이블을 사용한다.
#UXUI디자인 #모바일디자인 #앱디자인 #디자인가이드
다음 내용이 궁금하다면?
이미 회원이신가요?
2021년 5월 14일 오전 2:11
M&A 시장에선 이미 어느정도 조심하려는 움직임이 나타남.
... 더 보기온
... 더 보기