[도서 정리] 사용자를 생각하게 하지마 - 표지판과 빵부스러기 ( 내비게이션 디자인하기 ) |
-
"사용자를 생각하게 하지마” 라는 책의 핵심 내용 정리 내용입니다. 구체적 내용과 예시 등은 책을 구매해서 보세요~
-
부인할 수 없는 사실이 하나 있다.
사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다.
어떤 사이트를 방문해서 필요한 내용을 찾지 못하거나 사이트가 어떻게 구성되었는지를 이해할 수 없다면 그 사이트에 오래 머물러 있지도, 다시 방문하지도 않을 공산이 크다.
-
웹 사이트에는 보통 무언가를 찾기 위해 들어간다.
다른 사람에게 물어볼지 직접 찾아볼지 선택한다.
어떤 사이트에 들어가든지 검색상자부터 찾는 이들이 있다.
제이콥 닐슨은 이를 “검색 중심” 사용자라고 명명했다.
훑어보기를 선호하는 이들도 있다.
제이콥 닐슨은 “링크 중심” 사용자라는 이름을 붙였다.
이들은 클릭할 만한 링크는 다 클릭했거나 심하게 답답하다고 느낄 때만 검색한다.
그 외의 사람들은 시간 여유가 얼마나 있는지, 들어간 사이트의 내비게이션 상태가 괜찮아 보이는지 등 닥친 상황에 맞게 탐색 방식을 결정한다.
-
실제 생활에서 공간을 가늠하기 위해 활용하는 많은 단서가 웹 경험에는 없다.
웹이 지닌 특이성을 정리하면 다음과 같다.
규모에 대한 감각이 없다.
웹 사이트에 담긴 내용이 매우 적은 경우를 제외하면 웹 사이트를 아무리 많이 사용하더라도 그 웹 사이트의 규모가 어느 정도인지 감을 잡기 어렵다.
기껏해야 아직 보지 않은 내용이 많다는 사실을 짐작하는 정도에 그친다.
방향 감각이 없다.
웹 사이트에서는 상하좌우 구분이 없다.
위아래로 가라고 말하긴 하지만 계층구조상 위아래를 의미하는 것이다.
위치 감각이 없다.
물리적 공간에서는 움직이는 동안 그 공간에 대한 정보를 수집하므로 사물의 위치에 대한 감각이 생겨서 특정 사물에 도달하는 지름길도 알아낼 수 있다.
-
웹 사이트에서 특정 부분으로 되돌아가려면 물리적 공간감에 의존하기보다 개념적 계층구조상 어디에 있었는지 기억해서 본인이 갔던 길을 되짚어가는 방식을 사용해야 한다.
바로가기나 즐겨찾기 기능이 중요한 이유나 웹브라우저의 뒤로가기 버튼이 가장 자주 사용되는 이유도 여기에 있다.
홈페이지라는 개념이 중요한 까닭도 이런 관점에서 설명할 수 있다.
홈페이지는 상대적으로 고정적인 장소다.
홈페이지는 사이트의 북극성 같은 존재다.
홈페이지를 클릭하면 처음으로 돌아가 다시 시작할 수 있다.
-
물리적인 특성이 없어서 생기는 장점도 있고, 단점도 있다.
떠다니는 듯한 즐거운 느낌 덕분인지 웹에 접속해 있을 때는 시간 가는 줄 모를 때가 많다는 건 장점이다.
-
우리는 웹 상에서 길을 잃을 수밖에 없다.
웹 사이트 내비게이션은 계층구조를 통해 사용자가 “어디”에 있는지 느끼게 해준다.
-
내비게이션의 숨은 용도
사이트에 어떤 내용이 있는지 알려준다.
내비게이션은 사이트의 계층구조를 드러내는 역할을 한다.
사이트에 어떤 내용이 있는지 알아보기 쉬워진다.
현재 위치를 알려주는 기능보다 콘텐츠가 잘 보이게 해주는 기능이 더 중요할 수도 있다.
사이트 이용 방법을 알려준다.
사이트를 만든 사람에 대한 신뢰도를 높인다.
-
내비게이션 요소의 위치를 통일하면 적은 시간과 수고를 들여도 찾을 수 있다.
형태를 통일하면 다른 요소와 구분하기도 쉽다.
페이지 번호가 없는 잡지 광고면을 보면 답답한 느낌이 든다.
이처럼 관례 중 하나만 지켜지지 않아도 우리가 얼마나 답답하다고 느끼는지 생가해보자.
-
사이트 모든 페이지에 드러나는 내비게이션 요소 세트를 고정 내비게이션(Persistent Navigation)이라고 부른다.
글로벌 내비게이션(Global Navigation)이라 부르기도 한다.
-
고정 내비게이션은 "어딜 가든 나를 따라온다” 라는 원칙에는 한 가지 예외가 있다. 그것은 “폼(Form)” 이다.
채워 넣어야 할 폼이 있는 페이지에서는 고정 내비게이션이 주의력을 분산시키는 불필요한 요소에 지나지 않는다.
쇼핑몰 사이트에서 구입한 물건값을 결제하는 상황이 그 예이다.
가입 페이지, 등록 페이지, 의견이나 설문을 받는 페이지도 마찬가지다.
이런 페이지들에서는 고정 내비게이션을 최소 버전으로 유지하는 편이 좋다.
-
고정 내비게이션에는 사용자가 가장 자주 사용하는 네 가지 요소가 포함되어야 한다.
사이트 ID, 섹션, 유틸리티, 검색 방법
** 사이트 ID
-
페이지 맨 위쪽에는 사이트 ID 가 있을 것이라 예상한다.
보통은 맨 위 왼쪽 가장자리에 아니면 그 근처에 있다.
-
사이트 ID 의 위치가 사용자의 예상에 맞는 것도 중요하지만, 사이트 ID 를 사이트 ID 다운 모양으로 제작하는 것도 중요하다.
단추 만한 작은 크기에서 광고판 만한 큰 크기에 이르기까지 어떤 크기로 두더라도 쉽게 구분되도록 눈에 띄는 서체와 그래픽을 사용해서 사이트 ID 가 가게 밖에 붙이는 브랜드 로고나 표지판이 지닐 법한 특징을 지녀야 한다는 뜻이다.
-
사용자를 홈페이지로 데려다 주는 버튼이나 링크는 고정 내비게이션을 이루는 가장 주요한 요소 중 하나이다.
홈 버튼이 시야에 들어오면 사이트 내부에서 길을 잃더라도 언제든 다시 시작할 수 있다는 안정감이 든다.
** 섹션
-
섹션은 사이트 계층구조상 최상위에 있는 사이트 주요 구역으로 이어지는 링크를 가리킨다.
이를 기본 내비게이션이라 부른다.
기본 내비게이션에 현재 섹션 세부 항목의 목록을 보여주는 하위 내비게이션을 표시할 공간을 남겨두는 디자인도 있다.
** 유틸리티
-
유틸리티는 콘텐츠 계층구조에 포함되지 않는 사이트 주요 요소로 연결되는 링크를 가리킨다.
로그인/가입하기, 고객센터, 사이트맵, 장바구니처럼 사이트 사용을 도와주는 요소나 회사 소개, 연락처처럼 제작자에 대한 정보를 제공하는 요소가 여기에 해당한다.
-
유틸리티 목록은 섹션보다 덜 눈에 띄는 편이 좋다.
-
고정 내비게이션에는 사용자가 가장 자주 사용하는 4~5개 정도의 유틸리티만 넣는 것이 좋다.
많이 넣을수록 번잡해 보여서 혼란만 유발한 가능성이 크다.
자주 사용하지 않는 유틸리티는 하단 내비게이션에 두라.
하단 내비게이션이란 각 페이지 맨 아래에 있는 작은 텍스트 링크를 가리킨다.
** 검색 방법
-
모든 페이지에 검색 상자나 검색 페이지로 연결되는 링크를 넣는 것이 좋다.
규모가 매우 작고 정리가 아주 잘 되어 있는 사이트가 아니라면 말이다.
그리고 검색 이유가 특별히 적은 사이트가 아니라면 링크보다 검색 상자를 넣는 게 더 낫다.
-
새로운 사이트에 처음 접속했을 때 검색 창을 찾기 위해 페이지부터 훑어보는 사용자의 비율이 꽤 높다는 사실을 기억해야 한다.
복잡하게 구성하지 말고 공식에 따르라.
-
다음 사항을 피하는 게 좋다.
미사여구
사용자는 “검색(Search)” 이라는 단어를 찾는다. 그러니 찾기(Find), 빠르게 찾기, 빠른 검색(Quick Search), 키워드 검색 등 다른 말을 쓰지 말고 검색이라는 단어를 사용하라. ( 상자에 “검색” 이라는 이름을 붙이고 버튼에 “Go” 라는 단어를 넣어라. )
설명
‘키워드를 넣으세요.’ 같은 설명은 전화 음성 메시지를 남길 때 나오는 “삐 소리가 나면 메시지를 남기세요.” 라는 안내 메시지처럼 사족이나 다름없다.
옛날에는 필요했을지 모른다. 하지만 지금은 너무 뭘 모르고 만들었다는 느낌이 들게 할 뿐이다.
옵션
검색 범위가 햇갈릴 우려가 있다면 무슨 일이 있어도 설명을 붙여두라.
검색 대상이 사이트 전체인지 사이트 일부인지 웹 전체인지 말이다.
검색 범위를 해당 사이트의 현재 섹션에 국한하는 등 검색 범위에 옵션을 설정할 생각이라면 결정하기 전에 심사숙고하라.
제목이나 작가명, 부품 번호, 제품 이름처럼 특정 검색어로만 검색하도록 검색 방법에 제한을 두는 옵션을 설정하려고 할 때도 마찬가지다.
사용자는 검색 옵션이 있으면 옵션의 내용이 무엇인지, 본인에게 유용한 옵션인지 따져봐야 한다.
이처럼 옵션이 추가되어 사용자에게 고민을 안겨주면서 발생하는 손해에 비해 얻게 되는 이득이 큰 경우는 좀처럼 보지 못했다.
검색 결과 페이지에 나타나는 결과가 너무 많아서 범위를 좁힐 필요가 있을 때처럼 검색 옵션이 실제로 유용할 때만 설정하도록 하라.
-
웹 디자인 시 상위 단계에 비해 하위 단계에 적은 관심을 기울이는 일은 무척 흔하게 접한다.
이런 문제는 사이트가 클수록 더욱 자주 발생한다.
두 번째 단계만 가도 내비게이션 시스템이 무너져서 임시방편 수준이 되는 경우가 많다.
실제 사용자들이 머무는 시간의 양은 상위 페이지나 하위 페이지나 비슷하다.
그리고 처음부터 내비게이션 전체 구조를 고려해서 설계하지 않았다면 나중에 이어 붙인 부분에서도 일관성이 유지되길 기대하긴 어렵다.
사이트에 포함될 가능성이 있는 전 단계를 아우르는 내비게이션이 포함된 샘플 페이지 제작이 중요하다.
-
내 의도와 달리 이상한 방향으로 가고 있다고 느껴질 때 현 위치를 알려주는 페이지 이름이 눈에 잘 띄어야 당황하지 않을 수 있다.
모든 페이지는 이름이 필요하다.
이름이 있는 위치가 적절해야 한다.
이름은 눈에 띄어야 한다.
이름은 내가 클릭한 것과 일치해야 한다.
-
페이지 이름은 해당 페이지에 도달하기 위해 클릭한 단어와 일치해야 한다.
링크 이름과 페이지 이름 간에 큰 차이가 하나 있거나 작은 차이가 여러 개 있다면 그 사이트나 사이트 제작자의 능력에 대한 신뢰가 감소한다.
클릭한 단어와 페이지 이름을 정확히 일치시키지 못할 때는 (1) 가능한 한 비슷하게 해야 하고, (2) 차이가 있을 수밖에 없는 이유가 명확해야 한다.
-
사용자는 사이트에서 “길을 잃은 듯한” 느낌을 자주 받는다.
“현재 위치” 를 표시하려면 페이지 내비게이션 바나 목록, 메뉴 어디에서든 사용자의 현재 위치를 강조해서 보여주면 된다.
-
확실히 눈에 잘 띄게 하려면 시각적으로 차별 요소를 하나 이상 두는 것도 방법이다.
색상을 다르게 할 뿐 아니라 글꼴을 두껍게 하는 것처럼 말이다.
-
디자이너들은 미묘한 단서를 좋아한다.
미묘한 느낌을 살렸을 때 세련된 디자인이 완성되는 경우가 많기 때문이다.
하지만 일반 웹 사용자들은 급하게 본인의 일을 처리하려고 하는 때가 많으므로 이러한 미묘한 단서를 쉽게 놓치곤 한다.
디자이너인 여러분의 눈에 어떤 요소가 조금 과하게 눈에 띈다는 느낌이 드는가?
그렇다면 과하게 보이는 그 상태보다도 2배 더 강조하면 된다고 생각하라.
-
빵부스러기라는 이름은 헨젤이 숲 속에 빵부스러기를 뿌려서 그레텔과 함께 집으로 돌아오는 길을 찾을 수 있었던 것에서 유래했다.
빵부스러기는 홈페이지에서 여러분이 있는 현 위치까지의 경로를 보여주는 동시에 사이트 상위 체계로 쉽게 거슬러 올라갈 수 있게 도와준다.
-
빵 부스러기를 구성하는 최고의 방법은..
맨 꼭대기에 두어라.
각 단계 사이에 > 기호를 넣어라
마지막 항목의 서체를 볼드체로 표기하라.
-
내가 탭을 여전히 사랑하는 세 가지 이유
탭의 사용법은 자명하다
탭은 눈에 잘 띈다.
탭은 보기 좋다.
-
탭을 쓸거라면 올바른 사용법을 알아야 한다.
사용자가 탭을 잘 활용하게 하려면 활성화된 탭이 다른 탭보다 앞으로 나와 있는 듯한 착시 효과를 내야 한다.
탭 형태에 눈에 띄는 스타일을 적용하는 것보다 이러한 착시 효과가 더 효과적이다.
활성화된 탭의 색상을 다르게 하거나 대비되는 음영을 주고 탭 아래 공간과 끊어지지 않게 만들어야 이런 효과가 난다.
-
트렁크 평가를 하라
눈가리개를 한 상태로 자동차 트렁크에 갇혀서 끌려다닌 후에 어떤 웹사이트의 깊숙한 곳에 있는 페이지에 던져졌다고 상상해보라.
도착한 페이지가 잘 설계되어 있다면 다음 질문에 망설임 없이 명확한 답을 낼 수 있어야 한다.
이 사이트는 무슨 사이트인가? ( 사이트 ID )
내가 지금 무슨 페이지에 있는가? ( 페이지 이름 )
이 사이트의 메인 섹션을 무엇인가? ( 섹션 )
현재 페이지의 내비게이션 상태는 어떠하다고 생각하는가? ( 로컬 내비게이션 )
사이트 구성에서 현재 위치는 어디에 해당하는가? ( ‘현재 위치’ 표시 )
검색은 어떻게 하는가?
-
우리는 보통 사이트 한 가운데 뚝 떨어지므로 지금 내가 어디에 와 있는지도 모르는 경우가 다반사다.
보통 검색 엔진이나 SNS, 친구가 보낸 이메일에 있는 링크를 따라서 다니는 데다 사이트 내비게이션 체계를 검토할 만한 여유도 보통 없기 때문이다.
-
트렁크 평가를 수행하는 방법은 다음과 같다.
1단계 : 사이트에 있는 페이지 중 하나를 임의로 고르고 인쇄한다.
2단계 : 인쇄한 페이지를 약간 거리를 두고 보거나 눈을 가늘게 뜨고 흐릿하게 보이는 상태를 만든다.
3단계 : 최대한 빠른 속도로 다음 항목을 하나씩 찾아서 동그라미 표시한다.
사이트 이름
페이지 이름
섹션 ( 고정 내비게이션 )
로컬 내비게이션
“현재 위치” 표시
검색
댓글