2nd

UX 기본지식 3가지; UX흐름 – PART2 탐색

* UX 기본지식 시리즈는 라이트브레인 조성봉 이사의 출간 예정인 ‘This is UX UI Design’ 중 일부 내용을 발췌해 UX 실무자와 UX에 관심 있어 하는 여러분들의 이해를 돕고자 Rightbrain Lab을 통해 공개해 드립니다

 

3.3.3. 탐색

탐색은 조회와 더불어 서비스에서 제일 중요한 단계로써 대부분의 고충이 이 과정에서 나타난다고 해도 과언이 아니다. 탐색은 크게 4가지로 나뉜다. 홈 화면 콘텐츠 탐색, 메뉴를 통한 탐색(Browsing), 검색을 통한 탐색(Searching), 추천에 의한 탐색이 그것인데, 실제로는 이 4가지가 조합되어서 제공된다.

2-011

2-012

(좌측 위로부터) 에어비앤비, 네이버, 코레일, 알리익스프레스, 유튜브

 

검색 위주 서비스였던 에어비앤비는 홈 화면 콘텐츠 탐색을 강화시키는 방향으로 UX/UI 디자인을 했다. 반대로 네이버 모바일앱은 홈 화면 콘텐츠 탐색 위주였던 기존 UX/UI를 검색을 강화시키는 방향으로 변경되었다. 코레일 앱은 서비스 특성상 첫 화면 자체가 검색 화면이다. 알리익스프레스나 유튜브는 홈화면 탐색과 추천이 결합되어 있다. 사용자의 행동, 관심사에 따라서 홈화면이 실시간으로 변경된다.

에어비앤비가 검색 중심에서 홈 화면 콘텐츠 탐색으로 전환시킨 것은 판매 상품을 다양화 하기 위해서였으나 오히려 메인 상품인 숙소 검색만 더 어려워졌다. 좋은 UX를 제공하기 위해서는 탐색 방법의 희생과 선택(Trade-off)이 신중하게 결정되어야 한다.

모바일 UX/UI에서는 뒤로가기(Back key) 탐색도 매우 중요하다. 사용자들은 홈이나 이전 화면으로 돌아가려고 할 때 특정 메뉴나 버튼을 클릭하기 보다는 단순히 뒤로가기 버튼을 누르는 데 익숙해져 있다.
2-02

* 네이버 쇼핑의 뒤로가기 설계

맘에 드는 상품에 들어가서 리뷰를 보다가 뒤로가기를 눌렀을 때 상품 정보가 아닌, 목록으로 건너뛰는 것은 잘못된 탐색 설계이다. 사용자는 맥락상 상품 정보 내에서의 뒤로가기를 기대했을 가능성이 더 높기 때문이다.

서비스 내부가 아닌, 외부의 다른 서비스로 연계되는 탐색도 중요하다. 검색을 하거나 정보를 저장, 공유하는 경험이 여기에 해당한다.

 

2-03

* 음악 플레이 중 외부서비스를 이용한 곡명 검색

 

위 사례는 모르는 음악을 듣다가 검색을 누르자 가수와 곡명을 함께 외부 검색 서비스로 보내서 곡명(Imagine)만으로 검색했을 때에 비해서 훨씬 정확한 정보를 찾을 수 있는 ‘좋은 UX’를 제공하고 있다.
서비스 특성에 따라서 불가피하게 탐색의 맥락이 끊길 때도 있다. 탐색 과정 중에 인증을 요구하거나 비밀번호 재설정을 요구할 때도 있고, 아래 예시와 같이 서비스 제공 방식을 선택하라고 할 때도 있다.

 

2-04

* 해피오더 앱

 

위 예시는 브랜드와 메뉴 선택 사이에 주문 방식을 묻는 과정이 있어서 사용자의 탐색 맥락을 끊는 것을 보여주고 있다. 서비스 특성상 불가피하다고 할 수도 있는데 더 좋은 UX/UI 설계는 과연 없을까?

 

모바일에서 사용되는 7가지 주요 제스처들

 

2-051
* 모바일 주요 제스처

탐색 및 조회 과정에서는 단순히 탭하는 것뿐만 아니라 롱탭, 더불탭, 작은 스와이프, 큰 스와이프, 핀치&스프레드와 같이 여러 가지 제스처가 맥락에 맞게 사용된다. 특정 목록을 저장하기 위해서 롱탭을 했는데, 아무 일도 일어나지 않는 경우 사용자는 기대와 다른 인터렉션으로 인해서 껄끄러움을 느낄 것이다.

 

– UX 컨설팅 그룹 조성봉

 

 _ * 시리즈 보기
UX 기본지식 3가지; UX흐름 – PART1 외부탐색과 접근
UX 기본지식 3가지; UX흐름 – PART 2 탐색
UX 기본지식 3가지; UX흐름 – PART 3 조회
UX 기본지식 3가지; UX흐름 – PART 4 주활동
UX 기본지식 3가지; UX흐름 – PART 5 부가 활동
UX 기본지식 3가지; UX흐름 – PART 6 인증
UX 기본지식 3가지; UX흐름 – PART 7 개인화
UX 기본지식 3가지; UX흐름 – PART 8 이탈

_

 
Share this:

Leave a comment