바오밥나무

[번역] 상단 내비게이션 vs 왼쪽 내비게이션 : 어떤 것이 더 적합한가?

In UI/UX Posted Nov 25, 2016
Extra Form
저작자 anthony (UX movement)
출처 http://uxmovement.com/navigation/top-nav...ks-better/
?

단축키

Prev이전 문서

Next다음 문서

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

상단 내비게이션과 왼쪽 내비게이션 중 사용자에게 더 좋은 것은 무엇인가? 웹 디자이너들은 이 이슈에 대해 오랫동안 토론해왔다. 많은 사람들이 나름의 결론을 내리고 있지만, 어떤 이들은 감정을 섞고 있기도 하다. 사실 절대적인 정답은 없다. 사용자를 위해 디자인을 할 때는 맥락이 바로 왕이다.

 

한 맥락에서 잘 작동하는 내비게이션은 다른 맥락에서는 그렇지 않을 수 있다. 어떤 내비게이션이 당신의 사이트에 가장 좋은지 알기 위해서는 상단과 왼쪽 내비게이션이 가장 적합한지 다른 맥락을 이해하는 것이 중요하다.

 

top-vs-left-nav.png

 

탐색 Scanning

왼쪽 내비게이션은 탐색에 빠르고 효율적이다. 3개의 시각적 응시점(visual fixation)을 가정했을 때, 사용자는 왼쪽 내비게이션에서 6개의 아이템을 탐색하는 반면 상단 내비게이션에서는 3개의 아이템만을 탐색하게 된다. 또한 왼쪽 내비게이션은 수직 방향으로 탐색을 용이하게 하는 반면, 상단 내비게이션은 사람들이 보통 글을 읽을 때처럼 수평 방향으로 탐색하게 한다.

페이지 공간 Page Space

상단 내비게이션은 왼쪽 내비게이션보다 수직 방향의 페이지 공간을 절약한다. 왼쪽 내비게이션에서는 내비게이션 링크들이 페이지의 왼쪽 칼럼을 차지한다. 왼쪽 내비게이션은 페이지의 콘텐트 영역을 줄이고 좁히며, 이것은 결국 콘텐트의 공간이 적어진다는 것을 의미한다. 상단 내비게이션은 최소한의 수직 공간을 사용하며, 따라서 페이지의 콘텐트 영역을 콘텐트만으로 채울 수 있다.

 

아이템 우선 순위 Item Priority

상단 내비게이션의 아이템들은 비중이 동등하지 않다. 가장 왼쪽의 아이템은 주요한 시선의 영역(상단 왼쪽) 때문에 다른 아이템들보다 시각적인 비중이 높다. 상단 왼쪽 영역의 아이템은 다른 아이템보다 더 빈번하게 노출되고 중요한 아이템으로 눈에 들어오게 된다.  하지만 왼쪽 내비게이션의 아이템들은 반대되는 오른쪽 방향으로 놓인 아이템 없이 모두가 왼쪽에 위치해있기 때문에 비중이 동등하다. 사용자는 왼쪽에서 오른쪽으로 글을 읽기 때문에, 아이템을 읽을 때 수직 방향보다 수평 방향이 더 우선 순위가 더 강조된다. 

 

가시성 Visibility

상단 내비게이션 아이템들은 항상 최초 화면(above the fold)에 놓여있고 찾기 쉽기 때문에 더 가시적이다. 왼쪽 내비게이션의 아이템들은 개수가 많을 경우 최초 화면에 모두 들어오지 않고 일부는 아래로 밀리게 된다. 또한 상단 내비게이션에는 웹 페이지에서 시각적으로 두드러지는 헤더와 로고가 함께 따라 다니므로 메뉴를 더 찾기가 쉽다.

 

넓은 주제와 관심사를 다루는 웹사이트 Websites with Broad Topics and Interests

상단 내비게이션과 왼쪽 내비게이션 모두 강점과 약점이 있다. 강점과 약점들을 고려해 볼 때, 사이트에 가장 적합한 내비게이션의 형태는 사이트의 콘텐트의 형태에 달려있다는 것을 의미한다.

 

사이트가 광범위한 사용자 계층을 대상으로 다양한 주제의 콘텐트를 생산한다면(예를 들어 이커머스 사이트) 여러가지 주제를 포함하고 있는 왼쪽 내비게이션은 사용자들을 위해 최선의 방법이 될 수 있다. 사용자는 일정한 범위의 관심사를 가지고 있기 때문에, 내비게이션의 아이템들 중에서 자신에게 가장 중요한 아이템들을 결정하게 된다.

 

이러한 이유로, 아이템의 시각적 비중과 우선 순위가 편중되게 하지 않으려면 왼쪽 내비게이션에 아이템을 배치하는 것이 중요하다. 사용자들로 하여금 다양한 관심사의 묶음을 탐색하게 함으로서 자신에게 중요한 아이템을 직접 결정하게 만드는 것이다.

 

특정한 주제와 관심사를 다루는 웹사이트 Websites with Specific Topics and Interests

하지만 사이트가 좁은 관심사(예를 들어 니체 웹사이트)를 가지는 타게팅된 사용자를 대상으로 특정한 주제의 콘텐트를 생산한다면, 어떤 아이템들은 다른 것들보다 더 높은 우선 순위를 갖게 될 것이다. 이 맥락에서는 사용자의 관심 주제는 더 제한되어 있기 때문에, 사용자는 상단 내비게이션에서 자신이 원하는 것을 더 빠르고 쉽게 찾을 수 있다.

 

아이템을 탐색하는 능력은 여기서 필요하지 않다. 무엇이더 중요한지는 더 높은 우선 순위를 가지는 아이템을 빨리 잡아내는 능력이다. 가장 왼쪽에 위치한 아이템은 시각적으로 가장 높은 비중을 차지하므로, 상단 내비게이션은 사용자가 이것을 더 효율적으로 하게 한다.

 

디자인에 있어서 모든 상황에서 항상 100% 효율적인 하나의 절대적인 접근 방법은 없다. 당신과 사용자에게 가장 좋은 접근 방법을 찾으려면 그와 관계된 맥락을 이해하는 것이 필요하다. 맥락을 이해하지 못한다면, 사용자의 경험 디자인도 이해하지 못할 것이다.

 

 

Top Navigation vs Left Navigation: Which Works Better?

 

Which is better for users, a top or left navigation? Web designers have debated this issue for a long time. Many have drawn their own conclusions, but others have mixed feelings. The truth is that there is no absolute answer. When it comes to designing for users, context is king.


A navigation that works well in one context, may not work as well in another. To figure out which navigation is best for your site, it’s important to understand the different contexts where the top and left navigation work best.

 

top-vs-left-nav.png

Scanning

A left navigation is faster and more efficient for users to scan. In just three visual fixations, users scan six items in the left navigation compared to the three items scanned in the top navigation. The left navigation also facilitates a vertical scanning direction that is natural for people, while the top navigation forces a horizontal scanning direction that people often use when they’re reading.


Page Space

A top navigation conserves more vertical page space than a left navigation. With a left navigation, the navigation links occupy the left column of your page. This shrinks and narrows the content area of your page, which means you will have less space for your content. A top navigation, however, uses minimal vertical space, which allows you to occupy the content area of your page with content only.


Item Priority

Items in a top navigation do not have equal weight. The leftmost items carry more visual weight than other items because of its placement in the primary optical area (top left). Items in the top left area get more exposure and are often seen as more important than other items. The items in a left navigation, however, do have equal weight because they are all placed on the left with no other items in its opposing direction on the right. Because users read items from left to right, the priority direction for reading items is stronger horizontally than vertically.


Visibility

Top navigation items are more visible because they are always above the fold and are easier to find. Left navigation items are not always above the fold because sometimes if you have too many items, some of them can get pushed below the fold. Top navigations are also easier to find because they are usually accompanied by the header and logo, both of which are visually dominant objects on a web page.


Websites with Broad Topics and Interests

There are strengths and weaknesses with both top and left navigations. Given these different strengths and weaknesses, this implies that the type of navigation that is best suited for your site is dependent on the type of content your site has.


If your site produces a variety of content for a widespread audience (e.g. eCommerce sites) then a left navigation containing different topics would be best for your users. Because your users have a range of interests, they’re the ones who decide which items in the navigation are most important to them.


Therefore, it’s important to place your items in a left navigation, so that the visual weight and priority of the items are neutral. This lets users decide what’s important to them by allowing them to scan among a broad set of interests.


Websites with Specific Topics and Interests

However, if your site produces a specific topic of content that’s targeted towards users with a narrow set of interests (e.g. niche websites), you will have certain items with higher priority than others. Because the user’s topic of interest is more limited in this context, placing items in a top navigation allows users to find what they want faster and easier.


The ability to scan items isn’t needed here. What’s more important is the ability to spot high priority items quickly. A top navigation allows users to do this more efficiently because leftmost items carry the most visual weight.

 

When it comes to design, there are few absolutes where one approach will be 100% effective all the time for all cases. Finding the approach that is best for you and your users, calls for an understanding of the context involved. If you don’t understand context, you won’t understand user experience design.


  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