brunch

매거진 UX 디자인의 모든 것

라이킷 23 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 24. 2016

유저 행위에 따른 내비게이션 UX 설계

UX 디자인 배우기 #16

Today UX 아티클

UX Booth에 게재된 Tucker FitzGerald의 글 Searchersand Browsers: the Personality Types of UX를 소개하고자 합니다.

웹사이트에서 콘텐츠를 찾는 방법은 메뉴를 통한 탐색하기(browsing)과 검색바를 통한 검색하기(searching)으로 나뉜다고 합니다.

Tucker FitzGerald는 탐색하는 유저와 검색하는 유저의 차이를 이케아에서의 쇼핑 경험에 빗대어 설명합니다. 처음 이케아에 들어서면 침실, 주방, 거실, 원룸 등으로 꾸며진 쇼룸을 천천히 구경하고, 그다음에 창고로 가서 원하는 물건을 찾는다고 합니다. 여기저기 왔다 갔다 하면서 쇼룸을 보는 행위를 ‘탐색’이라고 할 수 있고, 원하는 물건을 바로 찾아가는 것을 ‘검색’이라고 할 수 있다고 합니다.

탐색하는 사람

탐색하는 유저는 클릭을 많이 하며 돌아다니는데, 문제는 클릭 횟수가 너무 많을 때 생기는 것이 아니라 원하던 것을 찾을 수 없는 클릭이 너무 많아질 때 생긴다고 합니다. 즉, 한 번에 원하는 곳으로 갈 수 있는 링크를 제공해야 하는 것이 아니라, 몇 번 클릭을 하더라도 원하는 곳으로 갈 수 있는 명확한 길을 제공해야 한다는 뜻입니다. 아래 이미지처럼 한 번에 원하는 카테고리로 갈 수 있는 메가 메뉴는 많은 유저를 무력하게 만든다고 합니다.

탐색하는 사람들을 위해 디자인할 때는 ‘간단하고 의미 있는 선택지’를 제공해야 한다고 하면서, 고려해야 할 3가지를 말합니다.

일단 선택지를 줄여서 단계별로 보여주는 것이 한 방법이 될 수 있다고 합니다. 예를 들면 고객이 제품 고객지원을 받으러 회사 홈페이지에 들어왔을 때, 한 번에 모든 디바이스 목록을 보여주는 것이 아니라 ‘고객지원’을 클릭해서 들어오면 ‘랩탑, 데스크톱, 모바일 기기’ 중 분류를 선택하게 한 후에 원하는 기기를 찾을 수 있게 해주는 겁니다.

두 번째는 타이포그래피와 색상, 여백 등을 적절하게 사용하여 명확하고 미니멀한 웹사이트를 만들면 유저가 직관적인 선택을 하는 데 도움이 된다고 합니다.

세 번째는 메뉴 항목을 크게 쓰고 클릭 가능한 영역을 크게 만들어 클릭을 편하게 할 수 있게 만들어야 한다고 합니다.

검색하는 사람

탐색하는 사람보다는 검색하는 사람이 훨씬 더 드물다고 합니다. 왜냐하면 탐색은 링크가 어디로 가는 것인지 인지(recognition)만 하면 되는 반면, 검색을 하려면 명확한 단어를 회상(recall)해내야 하기 때문이라고 합니다. 이런 어려움에도 불구하고 검색 기능을 넣어야 하는 이유는 일부 유저가 사이트 계층구조나 내비게이션을 이해하지 못할 수도 있기 때문이라고 합니다.

특히 규모가 큰 웹사이트 일수록 검색 바에 대한 의존도는 더 올라간다고 합니다.

더 중요한 점은 검색을 통해 만들어지는 유저 데이터라고 합니다. 검색 데이터로 검색하는 사람이 가진 어젠다를 알 수 있을 뿐만 아니라 이를 통해 내비게이션을 개선할 수도 있다고 합니다.

이 글에서는 탐색하는 사람과 검색하는 사람 각각을 위한 디자인을 다음과 같이 정리합니다.

탐색하는 사람을 위해서는

햄버거 메뉴의 사용을 제한하라고 합니다.

메뉴는 일반적으로 많이 사용하는 위치에 놓으라고 합니다.

고정된 메뉴는 찾는 속도를 22% 빠르게 해 주고 100%의 유저가 선호한 다고 합니다.

메뉴 순서를 최적화해야 한다고 합니다.

검색하는 사람을 위해서는

웹사이트의 모든 페이지를 쉽게 검색할 수 있게 만들라고 합니다.

검색어 자동완성을 이용하면 검색 결과 속도를 높일 수 있다고 합니다.

스펠링 오류도 너그럽게 이해하여 결과를 보여주면 좋다고 합니다.

검색 데이터 연구에 시간을 쏟고 그에 따라 변화를 주는 것이 좋다고 합니다.