유틸리티 탐색 사용자 경험 디자인에 미치는 영향

효과적이고 사용자 친화적 인 탐색을 디자인하기 위해 Google은 방법에 대해 생각할 필요가 없습니다. 우리의 콘텐츠를 체계적인 메뉴로 그룹화하십시오. 사용자가 원하는 것을 쉽게 찾을 수있게 해줄뿐 아니라 사이트와 상호 작용하는 데 필요한 도구를 디자인하십시오.

콘텐츠와 엄격하게 관련이 없으며 사용자가 다른 작업을 수행하는 데 도움이되는 탐색이 호출됩니다. 유틸리티 탐색, 사용자 경험 디자인에서 덜 널리 논의되었지만 매우 중요한 측면입니다. 검색 창, 로그인 및 가입 양식, 가입, 공유 및 인쇄 버튼, 장바구니, 상황 별 메뉴 및 사용자가 언어 또는 글꼴 크기를 전환 할 수있는 도구는 유틸리티 탐색의 일반적인 예입니다.

첫눈에 보이는 것처럼 쉽게 디자인 할 수는 없습니다. 우리가 필요로하는 요소, 배치 장소 및 표시 방법을 파악하기 위해 고려해야합니다. 방문자가 신속하게 찾아서 그들이 어떻게 작동하는지 이해할 수 있도록.

유틸리티 탐색이 UX에 미치는 영향

유틸리티 네비게이션을 설계 할 때 우리는 사용자가 우리 사이트와 상호 작용할 수있는 방법을 결정해야합니다. 우리는 그들에게 상호 작용 구조 고객의 비즈니스 목표에 부합하고 고객을 통해 고객을 이끌어주고 이해하기 쉬운 옵션을 제공하며 쾌적한 사용자 경험을 제공합니다..

가장 먼저, 그들이 원하는 행동을 신속하게 수행 할 수 있어야합니다.. 우리가 그렇게 할 수있게하면 고객 만족도가 높아질 것이고 기쁘게 생각하는 사용자는 웹 사이트에 더 많은 시간과 돈을 소비하는 경향이 있습니다.

AirBnB의 홈페이지는이 UX 원칙을 따르며 최상위 메뉴에는 유틸리티 도구 만 포함되어 있습니다. 일반적인 해결책은 아니지만 AirBnB의 엄청난 성장률을 살펴 본다면 완벽한 선택입니다..

4 가지 주요 메뉴 항목은 일반적으로 AirBnB 사이트를 방문하는 4 명의 주요 인물을 대상으로합니다 : 호스트가되는 데 관심이있는 사람들 (“호스트되기”), 서비스를 사용하는 동안 발생한 문제를 해결하려는 사람들 (“도움”), 신규 및 재 방문 사용자 (“가입” 과 “로그인”). AirBnB의 유틸리티 중심 홈 페이지에는 숙박 임대 웹 사이트에서 중요한 도구 인 빠른 검색 막대가 포함되어 있습니다.

둘째로, 너무 많은 혼란이주의를 산만하게하고 초점을 감소시키기 때문에 사용자는 불필요한 유틸리티가 필요하지 않습니다.. 유틸리티 탐색에 필요한 도구는 무엇이며 사이트의 특성에 의존하지 않는 것은 무엇입니까? 예를 들어 블로그 또는 뉴스 사이트에 인쇄보기를 포함하는 것이 유용 할 수 있지만 같은 기능은 포럼 게시판이나 소셜 미디어 웹 사이트에서 불필요한 산만 함이 될 수 있습니다.

예를 들어 Washington Post는 홈페이지에서와 달리 단일 게시물 페이지에 유틸리티 탐색을 표시합니다. 이런 식으로 사용자는 관련성 높은 유틸리티 도구를 만난다. 어쨌든 사용하고 싶지 않은 옵션으로 유인되지 않는다..

방문자가 사이트 전체에서 사용하고자하는 세 가지 유틸리티 탐색 항목이 있습니다. 고정 된 상단 막대 (검색 도구, “로그인”, 과 “구독하기”). 그러나 사용자는 다음과 같은 단일 게시물과 관련된 옵션에 대해 생각할 필요가 없습니다. “독서 목록” 그들이 홈 페이지 또는 카테고리 페이지 중 하나를 브라우징 할 때.

셋째로, 사용자는 사이트에서 수행 할 수있는 작업을 신속하게 이해해야합니다.. 방문자가 원하는 것을 반드시 알 필요는 없으므로 항상 옵션에 대한 정보를 제공해야합니다..

아래 스크린 샷을 보면 The New York Times가 사용자에게 3 가지 에디션의 사용 가능 여부를 알리는 것을 볼 수 있습니다. 미국 사람, 국제 노동자 동맹, 과 중국말, 또한 신속하게 세 가지 사이를 전환하십시오.. 똑똑한 유틸리티 탐색의 위대한 예는 사용자가 덜 방해적이고 우아한 방식으로 독자적으로 찾을 수없는 덜 분명한 옵션을 보여줍니다.

최고의 장소 찾기

사용자가 직관적으로 이러한 도구를 찾는 유틸리티 탐색을위한 일반적인 배치가 있습니다. 대부분의 웹 사이트에서 익숙한 도구이기 때문입니다. 웹 디자인 컨벤션을 깨는 것은 나쁜 사용자 경험으로 간주되며, 유틸리티 네비게이션의 경우 특히 그렇습니다. 대부분의 경우, 창의성보다는 유용성에 관한 것입니다.

유틸리티 네비게이션은 대부분의 웹 사이트에서 컨텐츠 기반 네비게이션보다 보조적이기 때문에 자주 눈에 띄지 않지만 눈에 잘 띄는 곳에 배치됩니다. 이것은 일반적으로 (1) 웹 사이트의 오른쪽 상단과 (2) 바닥 글의 하단 부분을 의미합니다. 그 이 규칙을 따르는 것이 좋습니다., 같이 이들은 대부분의 사용자가 유틸리티 도구를 먼저 찾는 장소입니다.

아래에서 볼 수 있듯이 로이터 통신은 대부분의 유틸리티 도구를 사이트의 오른쪽 위 모서리와 콘텐츠 기반 탐색 아래의 바닥 글 하단 부분에 배치했습니다. 여기서 유일한 해결책은 디자이너가 가장 중요하다고 생각했던 2 가지 유틸리티 항목이있는 고정 된 추가 바닥 글입니다. “로그인 또는 등록” 과 “My Wire의 최신 정보”.

흥미로운 점은 추가 유틸리티 탐색 영역은 사용자가 일반적으로 유사한 도구를 찾는 일종의 꼬리말에 배치되므로 로이터의 디자이너는 창조적 인 방법으로 그러나 여전히 사용성을 유지하기 위해 웹 디자인 협약을 따랐습니다..

논리적 구조 만들기

높은 전환율로 사이트를 구축하려면 유틸리티 도구를 논리적 구조로 그룹화하는 것이 중요합니다. 사용자에게 다양한 옵션을 제공하지 않으려는 경우에도 문제가 될 수 있지만 Amazon은 유틸리티 탐색의 복잡성을 다음 단계로 끌어 올립니다. 아마존은 다양한 옵션으로 매우 복잡한 유틸리티 탐색 기능을 제공합니다., 하지만 우리가 아마존을 규칙적으로 사용하면 그렇게 보이지 않습니다.. 스마트 디자인의 마술입니다..

사용자가 찾을 수있는 오른쪽 상단 모서리에 유틸리티 탐색을 배치했을뿐만 아니라 검색 막대, 검색 막대 아래에 사용자 관련 정보 (3) ), (3) 사용자가 사이트에서 수행 할 수있는 작업.

장바구니 나 검색 아이콘과 같은 시각적 신호 덕분에 고객은 사용하려는 그룹이 눈 깜짝 할 사이에 결정될 수 있고 이후 다른 두 그룹은 무시할 수 있기 때문에 현명합니다. 그룹은 하나뿐입니다 (“귀하의 계정”, “프라임 시도”, “바구니”, 과 “위시리스트”) 또한 논리적으로 구조화 된 하위 메뉴가 있으며 다른 하위 메뉴 그룹은 사용자가 원하는 것을 빨리 찾을 수 있도록 구분되지만 눈에 띄는 구분 기호로 구분됩니다.

효과적인 비주얼 디자인 만들기

효과적인 유틸리티 탐색의 시각적 디자인은 유명한 KISS 원칙 (Keep It Simple, Stupid)을 따라야합니다. 아이콘에 텍스트 레이블을 제공하고 컨트롤을 컨트롤처럼 보이게하고 시각적으로 가장 중요한 작업을 강조하는 것이 좋습니다. 약간 다른 디자인을 사용하여 유틸리티와 콘텐츠 기반 탐색을 구별하는 것도 좋은 생각입니다.

Walmart 's와 Etsy의 웹 사이트에서 효과적인 시각적 디자인의 두 가지 좋은 예를 찾을 수 있습니다. 디자이너는 두 사이트의 최상위에 유틸리티 탐색을 배치하고 나머지 탐색, 파란색 배경의 월마트 및 파란색 글꼴이있는 Etsy와는 다른 색상으로 강조 표시했습니다..

두 사이트 다양한 비주얼 디자인 요소로 가장 중요한 사용자 행동 강조, 월마트는 검색 버튼과 로그인 버튼에 노란색을 사용하고, Etsy는 로그인 버튼에 파란색 경계선을 제공하고 카트 메뉴 위에 회색 쇼핑 카트 아이콘을 포함합니다.

Etsy가 유틸리티 메뉴에서 아이콘을 사용하는 유일한 장소 인 반면 Walmart는 각 항목 옆에 아이콘을 표시하지만 아이콘 바로 옆에 필요한 텍스트 레이블을 포함하는 것을 잊지 않습니다.