바오밥나무

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

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. TOP5 오픈 소스 프로젝트 관리 도구

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

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

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

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

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

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

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

    #UI/UX 읽기
    Read More
  9. 이탈률(bounce rate rate), 종료(Exits), 종료율(% Exit)

    #GA 읽기
    Read More
  10. II 웹사이트 설계 -3.네비게이션 설계

    #UI/UX 읽기
    Read More
  11. Web Navigation-네비게이션의 종류

    #UI/UX 읽기
    Read More
  12. [번역] 무한 스크롤 : 바닥에 닿을 수 있게 만들자

    #UI/UX 읽기
    Read More
  13. 드릴 스루(drill through)

    #UI/UX 읽기
    Read More
  14. 드릴 다운(drill down)

    #UI/UX 읽기
    Read More
  15. [번역] 태블릿 인터페이스를 수평 스와이프로 디자인하라

    #UI/UX 읽기
    Read More
  16. [요약] 구글 애널리틱스 : 웹로그 분석의 시작과 끝

    #GA 읽기
    Read More
  17. Account(계정), Property(속성), View(보기)

    #GA 읽기
    Read More
  18. 6가지 형식의 브랜드 플랫폼, 플랫폼을 주도하는 2가지 영역, 통합적 브랜드 가치 창출을 위한 에코시스템

    #Mkt 읽기
    Read More
  19. B2B기업의 SNS 활용하기

    #Mkt 읽기
    Read More
  20. C2DM Push Notification

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