brunch

매거진 UX 디자인의 모든 것

라이킷 69 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Jan 28. 2020

메뉴/기능 선택의 절차 줄이기 UX 디자인 가이드 원칙

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 디자인 가이드 원칙 중 메뉴/기능 선택의 절차 줄이기 원칙에 대해 이야기 하고자 합니다.

메뉴/기능 선택의 절차 줄이기 UX 디자인 가이드 원칙

메뉴/기능 선택의 절차 줄이기 원칙 1. 사용자 행위가 반복적으로 이뤄지는 서비스가 있다면 과업 행위는 최소화 해야 합니다.

사용자의 반복적 행위를 최소화 해주는 서비스의 대표적인 기능이 즐겨찾기가 있습니다. 예를 들면 카카오 지하철은 내가 자주 가는 경로가 정해져 있는데 즐겨찾기를 해 놓으면 상위에 고정되어 출근할 때마다 경로 검색이 용이합니다. 매번 별도의 검색없이 즐겨찾기 경로를 통해 지하철이 언제 오는지, 환승 시간, 그 다음 열차시간까지 고려해서 내릴 수 있는 시간까지 보여주기 때문입니다.

또한, 카톡의 경우 대부분 자주 대화하는 친구랑 대화를 많이하다보니까 즐겨찾기를 해 놓으면 평소에 많이 대화하는 친구가 상단에 고정되어 쉽게 대화할 수 있습니다.

만약, 카톡에서 즐겨찾기 기능이 없다면 매번 방문할 때 마다 자주 대화하는 친구가 있음에도 불구하고 그 친구를 찾기 위해 매번 스크롤 하든지, 가나나 검색, 혹은 초성 검색하여 친구를 찾아야 하는 불편이 있을 것입니다.

카카오톡. 즐겨찾기 목록이 상단에 배치어 있스빈다. .

메뉴/기능 선택의 절차 줄이기 원칙 2. 사용자가 관심있어 하는 정보는 저장했다가 빠르게 찾아갈 수 있도록 도와줘야 합니다.

쇼핑몰에서 상품 정보를 탐색하다가 사용자가 상품이 마음에 드는 경우 장바구니에 담아 둘 수 있습니다.

개편전 Hmall에서 사용자가 쇼핑 시 마음에 드는 상품이 있어 장바구니에 담고자 하는 경우 구매하기 버튼만 있어 구매하기 버튼을 한 번더 눌러야 하는 번거로움이 있었습니다. 구매하기는 실제 상품을 주문하겠다는 의미임에 비해, 구매하기 버튼 선택 시 구매하기와 장바구니 버튼이 함께 나타나 혼동이 됩니다. 이는 버튼명이 보여주는 의도와 사용자의 행위가 다르기 때문입니다.

개편전 Hmall. 상품 정보에 구매하기 버튼만 있고, 장바구니 버튼이 없습니다.

반면, 아마존의 경우 상품정보에 구매하기 버튼 외 장바구니 버튼도 함께 보여줍니다.

아마존. 상품 정보에 장바구니 버튼만 보여주고 있습니다.

개편된 Hmall은 상품 정보에 '구매하기' 버튼만 보여주는 것이 아닌, '장바구니와 구매하기' 버튼을 함께 보여줘 사용 편의성을 높여줍니다. 이는 쇼핑몰 상품 페이지에서 사용자가 상품을 바로 구매하겠다는 행위와 장바구니에 담겠다는 행위에 맞춰 명확한 버튼명이 제공되기 때문입니다. 개편전에는 '장바구니가 어디에 있지?' 구매 버튼을 눌러봐야 하는 번거로움이 있었지만, 개편된 Hmall은 '장바구니에 담으려면 어떻게 해야 하지' 이런 생각을 하지 않고, 고민을 하지 않고 바로 액션을 취할 수 있습니다.

Hmall. 왼쪽 홈 / 오른쪽 상품 페이지 (장바구니와 구매하기 버튼이 함께 보여주고 있습니다.)

메뉴/기능 선택의 절차 줄이기 원칙 3. 버튼은 선택하기 편리한 위치에 제공합니다.

모바일에서 보통 사용자는 대화창에서 제공된 버튼의 레이블을 읽지 않고 그냥 평소대로 액션을 취합니다. 그런데, 오른쪽에 배치된 버튼이 긍정적 버튼이 아닌 부정적 액션을 취하는 '취소' 버튼이 있는 경우, 사용자를 당황하게 할 수 있습니다. 버튼을 선택하고 나서야 '아! 이게 취소 버튼이었구나!' 인지할 수 있기 때문입니다.

예를 들어 탐앤탐스에서 개인정보 수정을 위해 사진등록 선택 시 설정창이 열리는데 '설정' 버튼이 오른쪽에 있지 않고 왼쪽에 있어 습관적으로 '취소' 버튼을 누룰 수가 있습니다. 모바일에서 오른손 잡이의 사용자를 배려하여 대화창 제공 시 긍정적이거나 사용자들이 많이 선택하는 경우 버튼은 오른쪽에, 부정적 의미인 경우 버튼은 왼쪽에 배치되어야 합니더. 그런데 버튼의 위치가 우리가 알고 있는 일반적 위치와 달라 혼동스럽습니다. 또한, 버튼의 의미를 더 명확하게 전달하기 위해서는 버튼명 텍스트에 색상만 들어가는 것이 아닌, 버튼임을 강조하는 색상을 줘 버튼임을 다시 한번 확인할 필요가 있습니다.

탐앤탐스

롯데시네마의 경우 긍정적 의미의 'OK' 버튼이 오른쪽에 배치되어 있어 누르기 편합니다.

롯데시네마. 팝업창 제공 시 긍정적 버튼은 팝업창 오른쪽에 배치됩니다.

메뉴/기능 선택의 절차 줄이기 원칙 4. 과업 수행 시 버튼 누르는 행위를 최소화 합니다.

사용자가 과업을 수행 시, 버튼을 누르는 행위를 최소화하는 것이 편의성을 높이는 것입니다.

메가박스는 관람 인원 선택 후 반드시 '선택완료' 버튼을 누르고 나서, 본인이 원하는 좌석을 선택해야 합니다. 관람 인원 선택 후 하단에 있는 좌석 선택 영역을 터치하면 되는데 불필요하게 '선택완료' 버튼을 누르고 좌석을 선택해야 하는 번거로움이 있습니다. 모바일에서는 사용자가 버튼을 누르는 행위를 최소화해야 하는 이유는 과업 수행 시 버튼 선택하는 행위가 많아지면 많아질수록 귀찮아 하기 때문입니다. 한가지 더 사용성 관점에서 불편한 사항을 더 언급하면 관람 인원 선택 시 상단 영역에 선택한 인원이 나타나는데 화면이 중간이 잘라져 보입니다. 우측 끝에 있는 'X' 버튼이 'V' 버튼처럼 보여져 상단 영역에서 보여주는 내용을 보고자 해서 'V' 보여주는 버튼을 눌렀을 때는 영화 예매가 취소됩니다. 이처럼 사용자의 실수를 최소화 화기 위해서는 사용자의 다양한 모바일 디바이스 환경을 고려해 인터페이스를 보여줘야 합니다.

메가박스. 관람 인원 선택 후 '선택완료' 버튼을 눌러야 합니다.

반면, CGV는 관람 인원 선택 시 별도의 '선택완료' 버튼을 누르지 않아도 바로 페이지 하단의 좌석 선택 영역으로 순차적으로 이동하여 편합니다. 다시 말하면 위의 메가박스는 인원 및 좌석 선택 시 3번을 선택해야 함에 비해 CGV는 2번만 선택할 수 있어 더 사용 편의성이 좋습니다.