2.6표지판과 빵부스러기

웹사이트에는 보통 뭔가를 찾기 위해 들어간다. 마치 바디워시를 사기 위해 올리브영에 가는 것과 같다고 할 수 있다. 올리브영과 달리, 웹사이트에는 무엇이 어딨는지 알려줄 사람이 없다. 웹사이트에서는 사람에게 묻지 않고 검색 상자에 검색한다. 어떤 사이트에 들어가든지 검색 상자부터 찾는 사람들이 있는데, Jakob Nielsen은 이를 '검색 중심' 사용자라고 분류했다.

반면, 어떤 사용자들은 훑어보기를 선호하며 이들은 '링크 중심' 사용자다. 이들은 심하게 답답할 때만 검색한다. 링크 중심 사용자는 안내에 따라 사이트의 계층구조를 찾아본다. 올리브영으로 치면 매장의 어디에 어떤 코너가 있는지 보는 것이다. 링크 중심 사용자는 운이 좋다면 클릭 한두 번 만에 원하던 제품이 있는 목록을 만날 수 있지만, 찾던게 눈에 띄지 않으면 웹사이트를 떠난다.

올리브영과 웹사이트는 비슷해보이지만, 실제로는 웹은 아래와 같은 특이성이 있다.

• 규모에 대한 감각이 없다: 웹사이트는 얼마나 더 보아야 다 볼 수 있는지 알 수가 없다. 올리브영은 전체 규모가 쓱 훑어보면 보인다.
• 방향 감각이 없다: 상하좌우 구분이 없다. 위아래라는 말이 있지만 계층 구조를 의미하는 것이다.
• 위치 감각이 없다: 어떻게 특정 위치에 도달하는지에 대한 감각이 없다.

따라서 웹사이트에서는 특정 부분으로 가려면 물리적 공간감이 아니라 개념적 계층구조에 의존해야 한다. 홈페이지가 중요한 이유도 이 개념으로 설명할 수 있는데, 홈페이지는 사이트의 북극성 같은 역할을 하며 상대적으로 고정된 장소를 제공한다.

물리적 공간에 비해 웹에서는 본인이 어디에 있는지 알아내야 하는 상황이 자주 발생한다. 우리는 웹상에서 길을 잃을 수밖에 없고, 웹사이트 내비게이션은 계층구조를 통해 사용자가 어디에 있는지 느끼게 해준다.

내비게이션의 숨은 용도

내비게이션의 용도는 우리가 원하는 것을 찾아주고 우리가 어디 있는지 알려준다는 것이다. 하지만 이외에도 숨은 용도들이 있다:

• 사이트에 어떤 내용이 있는지 알려준다: 사이트의 계층구조를 드러내기 때문에, 콘텐츠가 잘 보이게 해준다. 목적지로 안내하거나 현재 위치를 알려주는 기능보다 콘텐츠가 잘 보이게 해주는 기능이 더 중요할 수도 있다.
• 사이트 이용 방법을 알려준다: 사이트를 어디서부터 봐야 하는지, 어떤 선택지가 있는지 간접적으로 알려준다. 사용자들은 별도의 설명서는 무시하는 경향이 있기 때문에 이 부분은 큰 장점이다.
• 사이트를 만든 사람에 대한 신뢰도를 높인다: 명확한 내비게이션은 사용자들에게 좋은 인상을 남긴다.

웹 내비게이션 관례

내비게이션 요소의 위치를 통일하면 누구나 금세 찾을 수 있다. 형태를 통일하면 다른 요소와 구분하기도 쉽다. 구체적인 형태는 다르지만, 웹에는 내비게이션 기본 관례들이 있다:

어딜 가든 따라온다

내비게이션은 고정(persistent) 내비게이션, 또는 글로벌 내비게이션이라고도 불리는데 사이트의 모든 페이지에 내비게이션이 항상 같은 위치에 있기 때문이다. 고정 내비게이션에는 사이트의 이름, 유틸리티(로그인, 연락처) 기능, 섹션들(제품, 뉴스, 지원, 회사 소개...) 및 검색창이 있다.

폼은 예외다

'어딜 가든 따라온다'의 유일한 예외는 채워 넣어야할 폼이 있는 페이지이다. 예를 들어, 쇼핑몰 사이트에서 구입할 물건값을 결제하는 상황이라면 폼과 관련없는 모든 것은 방해 요소다.

여기는 캔사스가 확실히 아냐

웹사이트 로고나 ID는 건물의 이름 같은 역할로, 어떤 페이지에 있던 사용자는 페이지 맨 왼쪽 위에 사이트 이름이 있을 것이라고 기대한다. 그 이유는 사이트 전체 논리적 계층구조의 최상위에 사이트 이름이 있기 때문이다.

즉, 사이트>섹션>세부 항목>현제 페이지>페이지 구역>개별 항목이라는 구조에서 사이트 이름은 최상위에 존재한다.

사이트 이름, 로고의 위치가 사용자의 예상대로인 곳에 있는 것도 중요하지만, 로고가 로고처럼 생긴것도 중요하다. 눈에 띄는 폰트와 그래픽을 이용해서 가게 밖에 붙이는 브랜드 로고나 표지판 같은 느낌을 줘야한다는 의미다.

섹션

섹션은 사이트 계층구조상 최상위에 있는 주요 구역으로 이어지는 링크다. 기본 내비게이션이라고도 불린다. 섹션 이름을 호버하거나 클릭했을 때 드롭다운 메뉴가 나오는 디자인도 있고, 하위 내비게이션이 담긴 섹션의 첫 페이지로 가는 디자인도 있다.

유틸리티

유틸리티는 콘텐츠 계층 구조에 포함되지 않는 사이트 주요 요소로 가는 링크로, 로그인/가입하기, 고객 센터, 장바구니 같은 요소이다. 유틸리티 목록은 섹션보다는 덜 눈에 띄는 것이 좋다. 백화점의 예를 들면, 이 층이 남성 패션과 관련된 층이라는 사실을 보여주는 것이 화장실, 엘리베이터로 가는 길을 알려주는 것보다는 더 중요하다.

세 번 클릭하고 이렇게 말해보세요, "집이 최고야"

사용자를 홈페이지로 데려다 주는 버튼이나 링크는 고정 내비게이션을 이루는 가장 주요한 요소 중 하나다. 홈 버튼이 시야에 있으면 사이트 내부에서 길을 잃더라도 언제든 다시 시작할 수 있다는 안정감이 든다.

검색 방법

규모가 아주 작고 매우 정리가 잘 되어 있는 사이트가 아니라면 검색창은 넣는 것이 좋다.

1, 2단계 이후의 내비게이션에 대해서도 고민해라.

웹 디자인 시 상위 단계에 비해 하위 단계에 보통 적은 관심을 기울인다. 내비게이션도 마찬가지여서, 두 번째 정도 단계로만 들어가도 내비게이션 시스템이 무너지는 경우가 많다. 하지만 실제 사용자들이 머무는 시간의 양은 상위 페이지나 하위 페이지나 비슷하다.

사이트에 포함될 가능성이 있는 전 단계를 아우르는 내비게이션이 포함된 샘플 페이지를 제작하면 유용하다.

LA에서 드라이브하기 즐거운 데는 이유가 있다.

페이지 이름에 대해서는 아래의 사항들이 중요하다:

• 모든 페이지는 이름이 필요하다: "네비게이션에서 이름을 강조했으니 그 정도로 충분하겠지"라고 생각하지만, 페이지 이름은 꼭 있어야 한다.
• 이름이 있는 위치가 적절해야 한다: 이름은 그 페이지에만 해당하는 콘텐츠 전체를 아우르는 역할을 해야 한다.
• 이름은 눈에 띄어야 한다: 위치, 크기, 색상, 폰트를 조합해 이름에서 "이게 이 페이지의 이름이다"라는 사실이 드러나야 한다. 그래서 보통 페이지에 있는 글자 중 가장 크다.
• 이름은 내가 클릭한 것과 일치해야 한다: 페이지 이름은 해당 페이지에 도달하기 위해 클릭한 단어와 일치해야 한다. 가끔 타협해야할 때도 있는데, 주로 공간 제약 때문이다. 이럴 땐 가능한 비슷하게 해야한다. 예를 들면, "그녀를 위한 선물"을 클릭했다면 "여성용 선물" 페이지가 열려도 이해할 수 있을 것이다.

현재 위치를 표시하라

사용자는 사이트에서 '길을 잃은' 느낌을 자주 받는다. 웹에서 이런 정보를 표시하려면 내비게이션 바나 목록, 메뉴 어디에서든 사용자의 현재 위치를 강조해서 보여주면 된다. 방법은 여러가지가 있다:

• 항목 옆에 화살표 두기
• 글자 색 바꾸기
• 볼드체 적용하기
• 버튼 색 반전하기
• 버튼 색깔 바꾸기

감지하기 어려운 미묘한 단서를 주면 표시가 제 역할을 못한다. 디자이너들은 미묘한 느낌을 살렸을 때 세련된 디자인이 되는 경우가 많기 때문에 미묘하게 단서를 주곤 한다. 하지만 일반 웹 사용자들은 급하게 웹을 사용하므로 이런 단서를 놓치기 쉽다.

빵부스러기(Breadcrumbs)

dont_make_me_think / 디자인 적용 / 2.6 표지판과 빵부스러기와 같은 형태도 사용자가 어디있는지 알려준다. 빵부스러기만 잘 만들어두면 설명이 필요 없다. 상위 단계로 쉽게 거슬러 올라갈 수 있고 홈으로 가기처럼 사용자가 가장 자주 사용하는 행동을 할 수 있는 일관성 있는 방법을 제공한다. 빵부스러기 사용법은 아래와 같다:

• 맨 꼭대기에 두어라.
• 각 단계 사이에 > 기호를 넣어라: 여러 시행착오를 거치며 밝혀낸 결과로, 아래 단계로 내려가는 움직임이 시각적으로 표현되기 때문에 가장 선호된다.
• 마지막 항목의 서체를 볼드체로 표기하라: 현재 페이지의 이름을 눈에 잘 띄도록 굵게 표시한다.

내가 탭을 여전히 사랑하는 세 가지 이유

탭은 사용자 인터페이스에 물리적인 메타포를 실제로 적용한 몇 안되는 사례 중 하나로, 3공 바인더 파일이나 파일 서랍에 달린 인덱스가 튀어 나와 있는 것처럼 브라우저의 탭도 돌출된 부분이 섹션을 분리하는 역할을 한다. 스티브 크룩이 탭을 좋아하는 이유는 다음과 같다:

• 탭의 사용법은 자명하다.
• 탭은 눈에 잘 띈다.
• 탭은 보기 좋다.

단, 탭은 올바르게 사용해야 한다. 우선, 활성화된 탭이 다른 탭보다 앞으로 나와 있는 듯한 착시 효과를 내야 한다. 활성화된 탭의 색상을 다르게 하거나 대비되는 음영을 주고, 탭 아래 공간과 끊어지지 않게 해야 이런 효과가 난다.

트렁크 평가를 하라

준비가 완료되었다고 느낄 때, 웹 내비게이션이 잘 되었는지 확인해야 한다.

이런 사고 실험을 해보자. 눈가리개를 한 상태로 자동차 트렁크에 갇혀 끌려다닌 후에 어떤 웹사이트의 깊숙한 곳에 있는 페이지에 던져졌다고 상상해보라. 도착한 페이지가 잘 설계된 사이트라면 다음 질문들에 망설임 없이 명확히 답할 수 있어야 한다:

• 이 사이트가 무슨 사이트인지? (사이트 이름)
• 내가 지금 무슨 페이지에 있는지? (페이지 이름)
• 이 사이트의 메인 섹셔은 무엇인지? (섹션)
• 현재 페이지의 내비게이션 상태는?
• 전체 사이트 구성에서 현재 위치는?
• 검색은 어떻게 하는지?

웹 경험은 공원 산책보다는 납치에 가깝다. 페이지를 디자인할때, 방문자들이 디자이너가 깔끔하게 정돈해둔 경로를 따라서 홈페이지부터 차례로 둘러본다고 생각하면 오산이다. 보통 사이트 한 가운데로 뚝 떨어지기 때문에 어디에 와 있는지도 모르는 경우가 많다. 따라서, 꼼곰히 볼 시간이 없는 시간이 없는 사람들도 각 요소를 쉽게 찾을 수 있도록 페이지가 명확하게 구성되어 있는지 확인하는 것이 좋다.

트렁크 평가는 아래와 같이 수행한다:

• 1단계: 사이트에 있는 페이지 중 하나를 임의로 고르고 인쇄한다.
• 2단계: 인쇄한 페이지를 약간 거리를 두고 보거나 눈을 가늘게 뜨고 흐릿하게 본다.
• 3단계: 최대한 빠른 속도로 다음 항목들을 찾아 동그라미 친다.
  • 사이트 이름
  • 페이지 이름
  • 섹션(고정 내비게이션)
  • 로컬 내비게이션
  • 현재 위치
  • 검색