바오밥나무

[번역] 면적 과잉 : 사이드바 내비게이션을 단순화하기

In UI/UX Posted Nov 25, 2016
Extra Form
저작자 anthony (UX Movement)
출처 http://uxmovement.com/navigation/faceted...avigation/
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

웹사이트에 면 형태의 사이드바 내비게이션을 사용하는 것은 수직적 공간에 제약을 받지 않는 장점이 있다. 링크가 많이 필요하다면 필요한 만큼 얼마든지 나열할 수 있다. 하지만 이 장점은 단점도 된다. 너무 많은 링크를 사이드바에 나열하는 것은 면적 과잉를 초래할 수 있다.

 

사용자는 최초 화면 아래의 가려진 링크들을 잃어버린다.

 

이것은 면 형태의 내비게이션이 최초 화면의 아래로 확장되고 사용자는 링크에 압도될 때이다. 이 면적 과잉은 정보를 찾기 어렵게 하고, 사용자의 속도를 떨어뜨리며, 페이지를 잡동사니로 어수선하게 채워버린다.

 

faceted_overload.png

 

 

과부화된 사이드바는 링크의 일부가 최초 화면의 아래에 놓이게 되므로 링크를 찾기 어렵게 한다. 이것은 사용자가 나머지를 보기 위해 화면을 스크롤 해야한다는 것을 의미한다. 사용자는 중요한 링크를 놓칠 수도 있다.

 

대부분의 사용자는 최초 화면 위의 링크들에 더 집중한다. 그들은 자신이 원하는 것을 찾기 위해 긴 링크의 목록을 탐색하며 시간과 노력을 허비하길 원치 않는다. 몇 초 안에 원하는 링크를 찾아야 한다.

 

면적 과잉는 또한 사용자의 참여를 떨어뜨릴 수 있다. 더 많은 링크를 보여줄수록, 사용자가 결정하는 데에 시간이 더 걸린다. 사용자는 탐색해야 할 뿐만 아니라 어느 곳으로 가야할지 또한 결정해야 한다. 더 많은 옵션이 앞에 놓여 있을수록, 결정은 더 어려워진다.

 

최상위 링크는 사이드바를 최소화할 수 있다.

 

작업량을 최소화하면서 사이드바에 위치해야 하는 링크들을 유지할 수 있는 방법이 있다. 면적 최소화를 적용함으로써 사용자를 압도하지 않고 모든 링크들을 최초 화면 위에 출력할 수 있다.

 

 

faceted-minimization.png

 

대부분의 면 형태의 내비게이션은 최상위 링크를 가지고 있다. 최상위 링크는 그 하위에 위치한 다른 링크들을 설명하는 메인 타이틀이다. 사용자들은 다른 링크들을 읽기 전에 먼저 이것을 읽는다. 면적 최소화는 차상위 링크를 숨기고 최상위 링크를 먼저 보여준다.

 

사용자는 자신들이 찾는 것이 무엇인지 메인 타이틀만 탐ㅅ핵하면 된다. 원하는 것을 찾아서 클릭하면 다른 링크들이 출력된다. 이런 방식으로 사용자는 사이드바의 모든 링크를 탐색할 필요가 없다. 사용자는 메인 타이틀을 탐색하면서 더 쉽게 원하는 것을 찾을 수 있다.

 

면 형태의 사이드바 내비게이션은 많은 링크를 페이지에 나열할 수 있게 한다. 하지만 사용자들은 너무 많은 목록에 압도될 수 있다. 사이드바 내비게이션이 과잉 상태가 되기 시작하면, 사이드바를 좀 더 사용하기 쉽도록 면적 최소화를 적용하라. 정보를 가공하고 결정을 내리는 것은 시간과 노력을 필요로 한다. 사용자는 이미 너무 많은 시간과 노력을 들이고 있다.

 

 


  1. [번역] 빵조각 메뉴: 무엇, 언제, 어떻게

    Read More
  2. [번역] 고통없는 계정 UX에 대한 3가지 법칙 : 로그인

    #UI/UX 읽기
    Read More
  3. [번역] 이 이메일에 회신하지 마시오

    #UI/UX 읽기
    Read More
  4. Survivorship Bias (생존자 편향의 오류)

    #Mkt 읽기
    Read More
  5. Top 25 Free Mobile Friendly & Responsive HTML Email Templates 2017

    #Web 읽기
    Read More
  6. Mobile Application Frameworks (HTML, CSS & JavaScript)

    #UI/UX 읽기
    Read More
  7. 여러 도메인 추적하기(Cross Domain Tracking)

    #GA 읽기
    Read More
  8. Envato Market의 Standard 라이센스(Regular 라이선스 vs. Extended 라이선스)

    #Web 읽기
    Read More
  9. 코딩이 필요 없는 웹사이트 제작 툴 & 사이트 10선

    #Web 읽기
    Read More
  10. 기술에 대해 "충분히 아는" PM이 되는 길

    #Web 읽기
    Read More
  11. 주목해야할 5개의 엔터프라이즈 오픈 소스 위키

    #Web 읽기
    Read More
  12. 어플리케이션 생명주기 관리를 위한 무료 소프트웨어

    #Web 읽기
    Read More
  13. TOP5 오픈 소스 프로젝트 관리 도구

    #Web 읽기
    Read More
  14. [번역] 이메일 마케팅: 고객의 참여를 높이기 위한 7가지 이메일 디자인과 문구 비법

    #UI/UX 읽기
    Read More
  15. [번역] 면적 과잉 : 사이드바 내비게이션을 단순화하기

    #UI/UX 읽기
    Read More
  16. [번역] 상단 내비게이션 vs 왼쪽 내비게이션 : 어떤 것이 더 적합한가?

    #UI/UX 읽기
    Read More
  17. NRE (Non-recurring engineering)

    #Web 읽기
    Read More
  18. IT용어중 POC, Pilot, BMT의 업계에서 통용되는 의미에 대한 정리

    #Web 읽기
    Read More
  19. 프로젝트 라이프 사이클의 이해

    #Web 읽기
    Read More
  20. 모바일 터치 제스쳐 정의

    #UI/UX 읽기
    Read More
목록
Board Pagination Prev 1 2 3 4 Next
/ 4