반응형

Don't Make Me Think!

 

Chapter 6. Street signs and Breadcrumbs DESIGNING NAVIGATION

 

And you may find yourself | in a beautiful house | with a beautiful wife And you may ask yourself | Well... | How did I get here?!
—TALKING HEADS, “ONCE IN A LIFETIME”

 

So how do you create the proverbial “clear, simple, and consistent” navigation?

 

 

Basically, you use the store’s navigation systems (the signs and the organizing hierarchy that the signs embody) and your ability to scan shelves full of products to find what you’re looking for.

 

Of course, the actual process is a little more complex. For one thing, as you walk in the door you usually devote a few microseconds to a crucial decision: Are you going to start by looking for chainsaws on your own or are you

 

going to ask someone where they are?

 

It’s a decision based on a number of variables—how familiar you are with the store, how much you trust their ability to organize things sensibly, how much of a hurry you’re in, and even how sociable you are.

 

When we factor this decision in, the process looks something like this:

 

Note that even if you start looking on your own, if things don’t pan out there’s a good chance that eventually you’ll end up asking someone for directions anyway.

 

기본적으로, 당신은 상점의 내비게이션 시스템(표지판과 그들이 표현하는 조직적인 계층 구조)과 제품으로 가득 찬 선반을 훑어서 원하는 것을 찾습니다. 물론, 실제 과정은 조금 더 복잡합니다. 먼저 문을 열고 들어가면 보통 수 밀리초 동안 중요한 결정에 시간을 할애합니다: 당신은 스스로 전기톱을 찾을 것인가요 아니면 누군가에게 물어볼 것인가요?

 

이 결정은 여러 변수에 기반합니다. 상점에 얼마나 익숙한지, 그들이 물건을 합리적으로 정리할 수 있는 능력을 얼마나 신뢰하는지, 얼마나 급한 상황인지, 그리고 얼마나 사교적인지 등이 있습니다. 이 결정을 고려할 때, 과정은 다음과 같이 보입니다. 주목해야 할 점은, 스스로 찾기 시작한다 해도, 만약 제대로 찾지 못할 경우 언젠가는 누군가에게 방향을 물어볼 가능성이 높다는 것입니다.

 

Web Navigation 101

 

In many respects, navigating a website parallels the process of finding your way in the physical world. Whether it's locating the emergency room or a family-sized bottle of ketchup in real life, or seeking a pair of headphones or the name of an actor in a classic film like Casablanca online, the objective is the same: finding what you need.

 

Just as you might decide whether to ask for directions or explore on your own in a physical store, the same decision-making process applies when entering a website. However, unlike in a brick-and-mortar store, there's no one readily available to assist you. Instead, the web equivalent of asking for directions is using the search function, typing in keywords, and receiving a list of relevant links.

 

Some users, termed "search-dominant" by Jakob Nielsen, habitually turn to the search box upon entering a site, similar to those who seek out a store clerk immediately. Conversely, "link-dominant" users prefer browsing first, only resorting to search when browsing proves ineffective or frustrating.

 

For the remaining users, the choice between browsing and searching depends on factors like their current mindset, urgency, and the perceived navigational ease of the site. Opting to browse, users navigate through the site's hierarchy, akin to following signs in a physical store. Starting from the homepage, they locate main sections and then proceed to subsections until they find relevant content.

 

Ideally, a few clicks should lead users to their desired information, similar to how one would inspect products on shelves. However, if users struggle to find what they seek, they're likely to exit the site—much like leaving a physical store empty-handed due to unavailability or frustration.

 

This process of navigation applies universally, whether online or offline, illustrating the critical role of effective website navigation in user satisfaction and retention.

 

웹 사이트에 들어가면 실제 세계와 비슷한 과정을 거칩니다. 보통 무언가를 찾고자 합니다. 현실에서는 응급실이나 대용량 케첩 병이 될 수 있지만, 웹에서는 헤드폰이나 '카사블랑카'의 레스토랑 리그의 웨이터 역할을 한 배우의 이름일 수 있습니다.

 

먼저 물어볼지 먼저 살펴볼지를 결정합니다. 다만, 웹 사이트에서는 물건의 위치를 알려줄 수 있는 사람이 주위에 서 있지 않습니다. 방향을 묻는 것의 웹 상에서의 동등물은 검색입니다. 즉, 검색 상자에 찾고 있는 것에 대한 설명을 입력하고 그것이 있는 곳의 링크 목록을 반환 받는 것입니다.

 

어떤 사람들은 (Jakob Nielsen은 이들을 "검색 중심" 사용자라고 부릅니다) 사이트에 들어가자마자 거의 항상 검색 상자를 찾을 것입니다. (이들은 상점에 들어가자마자 가장 가까운 직원을 찾는 것과 비슷할 수 있습니다.)

 

다른 사람들은 (Nielsen의 "링크 중심" 사용자) 대부분 처음에는 살펴보다가 가능한 링크를 모두 클릭했거나 사이트에 충분히 답답해진 경우에만 검색합니다.

 

다른 사람들에게는 현재의 마음 상태, 얼마나 급한지, 그리고 사이트에 어떤 식으로든 훌륭한 탐색 기능이 있는 것처럼 보이는지에 따라 살펴보기 또는 검색을 시작할지 여부가 달라집니다.

 

살펴보기를 선택하면 표지판을 사용하여 계층 구조를 통해 이동합니다. 일반적으로 홈 페이지에서 사이트의 주요 섹션 목록(상점의 부서 표지판과 유사)을 찾아 적절한 것을 클릭합니다. 그런 다음 섹션 목록에서 선택합니다. 행운이 좋다면, 몇 번의 클릭 후에 찾고 있는 것과 유사한 목록을 얻을 수 있습니다. 그런 다음 개별 링크를 클릭하여 세부 정보를 살펴볼 수 있습니다. 이는 상품을 선반에서 빼내어 라벨을 읽는 것과 같습니다.

 

마침내 원하는 것을 찾지 못하면 떠납니다. 이것은 시어스에서와 같이 웹 사이트에서도 마찬가지입니다. 그것들이 없다고 확신되거나 계속해서 찾는 것이 너무 답답할 때 떠납니다.

 

 

The unbearable lightness of browsing

 

Navigating a website and navigating physical spaces share similarities, yet the web lacks cues we rely on to navigate physical environments. Notably:

 

No Sense of Scale: Unlike physical spaces, it's challenging to gauge the size of a website, making it hard to know when we've explored everything of interest.

 

No Sense of Direction: While we may refer to moving up or down on a website, it's about hierarchy rather than physical direction.

 

No Sense of Location: Unlike in physical spaces where we develop a mental map, on the web, we rely on memory and conceptual hierarchies to find our way back to content.

 

Lack of Physicality: Website navigation occurs through clicks, devoid of the physical traversal experienced in physical spaces.

 

Importance of Home Pages: Home pages serve as fixed reference points, akin to the North Star, providing a fresh starting point.

 

This absence of physicality on the web has both positive and negative aspects. While it offers a weightless experience, akin to being immersed in a good book, it also presents challenges in terms of orienting oneself. Web navigation addresses this by embodying the site's hierarchy, creating a sense of "place."

 

In essence, navigation isn't just a feature but the essence of a website, essential for establishing a sense of "there." Therefore, effective web navigation is paramount for user experience and engagement.

 


웹 사이트를 탐색하고 물리적인 공간을 탐색하는 것은 유사점이 많지만, 웹은 물리적인 환경을 탐색하는 데 의존하는 단서가 부족합니다. 특히 다음과 같은 웹 공간의 이상한 점들이 있습니다.

 

  • 크기 감각 없음: 물리적 공간과 달리, 웹 사이트의 크기를 파악하는 것은 어려우며, 흥미로운 모든 것을 탐색했는지 알기 어렵습니다.
  • 방향 감각 없음: 웹사이트에서 위아래로 이동한다고 말하지만, 실제 방향이 아닌 계층구조에 관한 것입니다.
  • 위치 감각 없음: 물리적 공간에서는 정신적 지도를 개발하지만, 웹에서는 기억과 개념적인 계층구조를 기반으로 콘텐츠로 돌아가야합니다.
  • 물리적 요소 부족: 웹 사이트에서 탐색은 클릭을 통해 이루어지며, 물리적인 이동 없이 이루어집니다.
  • 홈 페이지의 중요성: 홈 페이지는 북쪽 별과 같은 고정된 참조점으로 작용하여 새로운 시작점을 제공합니다.
    웹에서 물리적 성질의 부재는 긍정적인 면과 부정적인 면이 모두 있습니다. 좋은 책에 빠져든 것과 같이 경험을 가볍게 만들어 주지만, 자신의 위치를 파악하는 것은 도전적입니다. 웹 탐색은 이러한 문제를 해결하기 위해 사이트의 계층구조를 대표하며, "장소"라는 감각을 조성합니다.
    요약하자면, 탐색은 단순히 기능이 아니라 웹 사이트의 본질이며, 사용자 경험과 참여에 있어서 중요합니다.

 

The overlooked purposes of navigation

 

Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for and to tell us where we are. But navigation has some other equally important—and easily overlooked— functions:

 

  • It tells us what’s here. By making the hierarchy visible, navigation tells us what the site contains. Navigation reveals content! And revealing the site may be even more important than guiding or situating us.
  • It tells us how to use the site. If the navigation is doing its job, it tells you implicitly where to begin and what your options are. Done correctly, it should be all the instructions you need. (Which is good, since most users will ignore any other instructions anyway.)
  • It gives us confidence in the people who built it. Every moment we’re in a Web site, we’re keeping a mental running tally: “Do these guys know what they’re doing?” It’s one of the main factors we use in deciding whether to bail out and deciding whether to ever come back. Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression.

 

탐색의 목적 중 두 가지는 상당히 명백합니다: 우리가 찾는 것을 찾도록 도와주고, 우리가 어디에 있는지를 알려줍니다. 그러나 탐색에는 또 다른 중요하고 쉽게 간과되는 기능들이 있습니다.

 

  • 여기에 무엇이 있는지 알려줍니다. 계층구조를 통해 탐색이 가시적으로 표시되면, 사이트에 어떤 내용이 있는지 알려줍니다. 탐색은 콘텐츠를 드러냅니다! 사이트를 드러내는 것이 안내하거나 위치를 정하는 것보다 더 중요할 수 있습니다.
  • 사이트를 사용하는 방법을 알려줍니다. 탐색이 잘 되어 있다면, 암시적으로 시작할 위치와 옵션을 알려줍니다. 제대로 수행된다면, 이것이 당신이 필요한 모든 지침이 될 것입니다. (대부분의 사용자들은 어차피 다른 지침을 무시할 것이기 때문에 이것이 좋은 것입니다.)
  • 그것을 만든 사람들에 대한 신뢰를 줍니다. 우리가 웹 사이트에 있는 동안, 우리는 계속해서 "이 사람들은 제대로 하는 걸까?"라는 생각을 합니다. 이것은 우리가 이탈할지, 다시 돌아올지를 결정하는 주요 요인 중 하나입니다. 명확하고 신중하게 고려된 탐색은 사이트가 좋은 인상을 남길 수 있는 최고의 기회 중 하나입니다.

 

Web navigation conventions

 

Physical spaces like cities and buildings (and even information spaces like books and magazines) have their own navigation systems, with conventions that have evolved over time like street signs, page numbers, and chapter titles. The conventions specify (loosely) the appearance and location of the navigation elements so we know what to look for and where to look when we need them.

 

Putting them in a standard place lets us locate them quickly, with a minimum of effort; standardizing their appearance makes it easy to distinguish them from everything else.

 

For instance, we expect to find street signs at street corners, we expect to find them by looking up (not down), and we expect them to look like street signs (horizontal, not vertical).

 

We also take it for granted that the name of a building will be above or next to its front door. In a grocery store, we expect to find signs near the ends of each aisle. In a magazine, we know there will be a table of contents somewhere in the first few pages and page numbers somewhere in the margin

 

of each page—and that they’ll look like a table of contents and page numbers.

 

Think of how frustrating it is when one of these conventions is broken (when magazines don’t put page numbers on advertising pages, for instance).

 

Although their appearance can vary significantly, these are the basic navigation conventions for the Web:

 

도시와 건물 같은 물리적 공간(그리고 책과 잡지와 같은 정보 공간)에는 자체적인 내비게이션 시스템이 있습니다. 이러한 내비게이션 시스템은 시간이 흐름에 따라 발전한 관습들을 포함합니다. 예를 들어, 거리 표지판, 페이지 번호, 장 제목과 같은 것들입니다.

 

이러한 관습들은 내비게이션 요소의 모양과 위치를 (느슨하게) 지정하여 필요할 때 어디를 보고 무엇을 찾아야 하는지 알 수 있도록 합니다.

 

표준 위치에 넣음으로써 우리는 최소한의 노력으로 그것들을 빨리 찾을 수 있습니다. 그들의 모양을 표준화하면 다른 것들과 구별하기 쉽습니다.

 

예를 들어, 우리는 거리 표지판을 거리 모퉁이에 위치하는 것을 기대하고, 그것들을 위를 보고 (아래를 보지 않고) 찾을 것으로 예상하며, 그것들이 거리 표지판처럼 보일 것으로 기대합니다.

 

또한 건물의 이름이 정문 위나 옆에 있을 것으로 가정합니다. 식료품 점에서는 각 통로 끝 근처에 표지판이 있을 것으로 예상합니다. 잡지에서는 몇 페이지 안에 목차가 있고 각 페이지의 가장자리에 페이지 번호가 있을 것으로 알고 있습니다. 그리고 그것들이 목차와 페이지 번호처럼 보일 것입니다.

 

한 가지 이러한 관습이 어기어지면 얼마나 짜증나는지 생각해보십시오 (예를 들어, 잡지가 광고 페이지에 페이지 번호를 넣지 않았을 때).

 

비록 그 외관은 크게 달라질 수 있지만, 이것들이 웹의 기본 내비게이션 관습입니다

 

반응형