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

🏷 Vivian's curating
드디어 모바일 ui/ux 디자인 시 고려해야 할 가이드라인 마지막 시리즈를 정리해봅니다. 이외에도 많은 꿀팁들이 있다면 댓글로 공유해주세요😘



✍️ 요약
41. 한 화면에 뒤로 가기 버튼은 하나여야 한다.
→ 작은 화면에 동일한 기능을 중복 배치하는 것은 이용자에게 혼란을 준다.
→ 하단 탭바가 있는 경우 상단 내비게이션 바와 기능이 중복되지 않아야 한다.

42. 상단 내비게이션 바에 내비게이션 요소의 중복을 피하는 것을 권장한다.
→ 내비게이션 바 좌측에 뒤로 가기와 같은 내비게이션 요소가 있다면 우측에는 해당 페이지와 관련된 컨트롤을 표시하는 것을 권장한다.
→ 만약 차별화 된 경험을 제공하기 위한 전략적인 판단이 있다면 이 가이드를 무시해도 된다.

43. 뒤로 가기 버튼 옆의 레이블은 이전 화면명이다.
→ 현재 페이지의 상위 그룹으로의 이동을 의미한다.
→ 현재 페이지 화면명은 내비게이션 바의 중앙에 위치시킨다.
ex. 좌측: 뒤로가기버튼 / 중간: 현재 페이지 화면명 / 우측: 현재 페이지에 대한 컨트롤 (정렬, 편집 등)

44. 모바일에서는 브레드크럼(Breadcrumbs)을 사용하지 않는다.
→ 모바일에서는 내비게이션을 단순화해야 한다. 내비게이션 요소를 최소화하여 콘텐츠에 집중!

45. 탑 버튼을 사용하지 않아도 된다.
→ 꼭 필요하다면, 이용자가 아래로 스크롤할 경우 노출하지 않고 스크롤을 멈추거나 위로 스크롤할 때 노출하는 인터랙션을 사용하는 것 권장.

46. 가독성을 위해서 중앙 정렬은 피한다.
→ 이용자는 F패턴으로 콘텐츠를 훑어보므로 중앙 정렬은 가독성이 떨어진다.
→ 글이 많은 콘텐츠의 경우 좌측 정렬을 권장한다.

47. 비활성화 요소에 활성화 요소와 동일한 색상을 사용하지 않는다.
→ 비활성화 요소는 탭을 해도 반응하지 않음을 의미하므로 같은 색을 띠면 이용자는 어떤 요소가 탭이 가능한지 구분하기 어렵다.
→ 비활성화 요소를 동일 색을 사용하여 투명도를 조절하는 것보다 아예 다른 색을 사용할 것을 권장한다.

48. 버튼에 이용자의 의도와 관련이 없는 [예], [아니오] 같은 레이블은 사용하지 않는다.
→ 이용자가 버튼을 누를 때 발생할 동작을 설명하는 텍스트 레이블을 사용해야 한다.
→ 버튼의 레이블을 명확하고 예측 가능하게 하여 이용자가 버튼을 실행했을 때 어떤 일이 발생하는지 명확하게 예측할 수 있어야 한다.
ex. 계좌이체 시, [확인],[예] 버튼 보다 [이체하기],[이체] 등의 명확한 레이블을 사용한다.

#UXUI디자인 #모바일디자인 #앱디자인 #디자인가이드

모바일 UI·UX 디자인시 고려해야 할 가이드라인 5

Brunch Story

모바일 UI·UX 디자인시 고려해야 할 가이드라인 5

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2021년 5월 14일 오전 2:11

 • 

저장 40조회 2,401

댓글 0

    함께 읽은 게시물

    《끝나지 않는 존재의 의미》

    ... 더 보기


    🍚한촌설렁탕의 파격적인 도전은 성공할 수 있을까요?

    ... 더 보기

    외식 온라인몰의 비밀: 한촌설렁탕엔 있고 더본코리아엔 없는 것

    더스쿠프

    외식 온라인몰의 비밀: 한촌설렁탕엔 있고 더본코리아엔 없는 것