brunch

매거진 UX 디자인의 모든 것

라이킷 39 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Dec 15. 2017

UX원칙#4-5 메뉴/기능 선택절차의줄이기와 바로가기

전민수의 UX 가이드 칼럼 #04

UX 컨설턴트 전민수입니다.

지난 5년간 브런치에서 아티클 작성한 것을 토대로, 여러분께 UX 아티클의 내용을 더 쉽게 전달 시키는 목적으로 별도 강의 촬영하게 되었습니다. 그간 UX 강의 촬영했던 영상을 편집해서 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.

UX 라이브클래스 패키지를 통해 전체 178여개 UX 강좌를 하나의 패키지 형태(총 121시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 2023년 3월 한정 이벤트 판매로 할인율 98%(정가 5,340,000원 > 할인가 99,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다.

https://ebprux.liveklass.com/packages/137053

(3월 한정 이벤트) UX 라이브클래스 패키지(총 121시간): 178개 UX 강의묶음, 할인율 98%, 할인가 99,000

매일 !!!! UX 방법론 A-Z, UX 리서치 A-Z 등 강의 진행합니다.

ebprux.liveklass.com

앞으로도 국내 환경에 맞는 UX 방법론을 더 연구하고, 브런치에 최대한 많이 공유하겠습니다.

감사합니다.

UX 원칙 #04. 메뉴/기능 선택의 절차 줄이기

메뉴 선택의 절차 줄이기 원칙 1. 사이트 내 전체 서비스를 한 눈에 알아볼 수 있는 모아보기 기능이 제공되어야 합니다.

모아보기 기능은 대표적 사례는 카테고리, 퀵 메뉴, 자주 가는 메뉴 등이 있습니다. 사용자들이 자주 찾는 메뉴가 한 곳에 모여 있으면 사용자가 찾고자 하는 메뉴를 더욱 빠르게 찾을 수 있습니다. 다만, 모아보기 형태로 메뉴를 제공하고자 하는 경우 모든 메뉴가 한눈에 알아볼 수 있어야 합니다.

팟캐스트의 앱 중인 하나인 팟티는 카테고리 메뉴가 나열 형태로 보여줘 한눈에 알아보기 편합니다.

팟티. 카테고리가 한 눈에 알아보기 편합니다.

반면, 팟빵은 카테고리를 보여주는 방식이 상단에 가롤 스크롤 형태로 보여 카테고리를 찾기 위해서는 가롤 스크롤 해야 하는 번거로움이 있습니다.

팟빵. 찾고자 하는 카테고리를 찾기 위해서는 상단 영역 가로 스크롤을 해야 합니다

메뉴/기능 선택의 절차 줄이기 원칙 2. 사용자가 자주 이용하는 기능들을 모아 즐겨찾기 기능으로 제공해야 합니다.

위키백과에서는 즐겨찾기를 다음과 같이 정의합니다. “즐겨찾기(Favorites, 문화어: 수집통)또는 북마크(Bookmark)는 웹브라우저에서 사용자가 웹사이트의 URL을 등록하는 기능 또는 그렇게 등록한 URL의 목록”이라고. ‘즐겨찾기’는 인터넷 익스플로러에서 쓰이기 시작한 말이고, 구글 크롬, 파이어폭스 등의 웹브라우저는 ‘북마크’라고 합니다.

즐겨찾기를 통해서 주소창에 URL을 매번 번거롭게 입력하지 않고 바로 해당 링크를 클릭하는 것만으로도 사용자가 원하는 웹사이트에 바로 접속할 수 있습니다. 또 URL이 정확히 기억나지 않더라도 즐겨찾기에 추가해둔 상태라면 쉽게 다시 찾을 수 있다는 장점이 있습니다.

카카오톡은 즐겨찾기 목록을 상단에 배치해 평소에 많이 대화하는 친구에게 쉽게 대화할 수 있도록 했습니다. 즐겨찾기 기능이 없으면 한 참 스크롤 하든지, 가나나 검색, 혹은 초성 검색하여 친구를 찾아야 하는 불편이 있을 것입니다.

(모바일 웹) 네이버 카페는 전체 카페 목록 중에서 사용자가 자주 방문하는 카페의 게시판을 직접 즐겨찾기 할 수 있도록 제작해 사용자는 자신의 카페 목록에서 쉽게 접근할 수 있습니다.

UX 원칙 #05. 바로가기

바로가기 원칙 1. 페이지 하단에서 상단으로 이동할 수 있도록 'Top' 버튼이 제공되어야 합니다.

예를 들어 네이버 뮤직 TOP100 코너의 경우 페이지 하단에 상단으로 이동할 수 있도록 'TOP' 버튼이 제공되고 있습니다.

네이버 뮤직

반면, 멜론의 경우 TOP100 코너의 페이지 하단에 'TOP' 버튼이 제공되고 있지 않아 상위 곡을 살펴보기 위해서는 스크롤 업 해야 하는 번거로움이 있습니다.

멜론

바로가기 원칙 2. 정보 접근을 위해 여러 번의 클릭이 아닌 한 번에 접근할 수 있도록 바로가기 기능이 제공되어야 합니다.

바로가기(Shortcut)는 명령어 실행을 위한 특정 기능입니다. 예를 들어, 바로가기는 제공되는 콘텐츠 성격에 따라서 상세 페이지가 아닌 목록에서도 쉽게 접근할 수 있어야 합니다.

네이버 뮤직은 TOP 100 메뉴에 ‘전체 선택’, ‘전체 듣기’ 기능이 있어 곡을 하나하나 선택하지 않아도 한 번에 들을 수 있어 편합니다. 또한, ‘…’을 선택하면 ‘앨범 상세정보, 아티스트 상세정보, 뮤직비디오 등’ 바로가기 기능을 달리 제공해 사용자가 원하는 형태로 노래를 감상할 수 있습니다.

카카오톡은 채팅 메뉴 하단에 플로팅 버튼이 제공되어 ‘오픈 채팅, 비밀 채팅, 일반 채팅’ 에 바로 참여할 수 있습니다.

과업 수행 시 여러 단계를 거치면 사용자는 시스템 이용이 복잡하다고 느껴질 수 있습니다. 과업 단계는 가능한 줄여 주는 것이 좋습니다. 시스템이 요청한 사항을 한 페이지에서 처리할 수 있도록 UI가 구성되면 편할 것 같습니다.

바로가기 원칙 3. 관련 페이지로 바로 이동할 수 있어야 합니다.

예를 들어 팟티의 경우 특정 에피소드를 듣고 있다가 해당 에피소드를 운영하는 팟캐스트 홈으로 바로 이동하고자 할 경우 페이지 하단의 'YTN 지식카페' 선택하면 바로 한 번에 이동할 수 있습니다.

반면, 팟빵은 에피소드를 듣고 있다가 해당 팟캐스트의 홈으로 이동할 수 있는 버튼이 없어 불편합니다. 물론 상단의 백 버튼을 통해 이전 페이지가 팟캐스트 홈이었다면 운이 좋게 돌아갈 수 있지만, 만약 이전 페이지가 추천 에피소드 목록이었다면 해당 팟캐스트 홈으로 가기에는 여러 페이지를 거쳐야만 해서 불편합니다.