1. 내비게이션 디자인하기
사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다.
웹 내비게이션 첫걸음
- 웹 사이트에는 보통 무언가를 찾기 위해 들어간다.
- 검색할지 직접 찾아볼지 선택한다.
- 검색 중심 사용자 : 어떤 사이트에 들어가든지 검색 상자부터 찾는 사람들
- 링크 중심 사용자 : 훑어보기를 선호하는 사람들. 클릭할 만한 링크는 다 클릭했거나 심하게 답답하다고 느낄 때만 검색한다.
- 그 외 : 상황에 따라 탐색 방식을 결정한다.
- 훑어보기로 했다면 안내에 따라서 사이트의 계층구조(섹션)를 찾아보며 옳다고 생각되는 항목을 클릭하고, 또 세부 항목들을 클릭하며 정보의 냄새를 따라간다.
- 찾던 항목이 없다는 확신이 들거나 더 찾기 답답해졌을 때 그 사이트를 떠난다.
웹이 지닌 특이성
- 규모에 대한 감각이 없다.
웹 사이트의 규모가 어느 정도인지(1,000? 17,000 페이지) 감을 잡기 어렵다. - 방향 감각이 없다.
웹 사이트에서는 상하좌우 구분이 없지만, 계층구조상 위 아래를 표현하기도 한다. - 위치 감각이 없다.
웹 사이트에서는 개념적 계층구조상 어디에 있었는지 기억해서 본인이 갔던 길을 되짚어가는 방식을 사용해야 한다.
(바로가기나 즐겨찾기 기능이 중요한 이유나 웹브라우저의 뒤로가기 버튼이 가장 자주 사용되는 이유도 여기에 있다.)
내비게이션이 없으면 '어디'에 있다는 감각도 없다. 그러니 잘 구축해야 한다.
왜 내비게이션이라고 불리우는가?
이 이유가 웹에 물리적인 특성이 없어서 생기는 단점을 설명해준다. 내비게이션의 사전적 정의에는 두 가지 행동이 내포되어있다.
- 한 장소에서 다른 장소로 가는 것
- 본인이 어디에 있는지 알아내는 것
물리적인 공간에 비해 웹에서는 본인이 어디에 있는지 알아내야 하는 상황이 훨씬 자주 발생한다. 웹 사이트 내비게이션은 계층구조를 통해 사용자가 '어디'에 있는지 느끼게 해준다. 계층구조가 물리적 세계에 존재하는 공간 감각을 대체하는 것이다.
내비게이션의 용도
- 사용자가 원하는 것을 찾아준다.
- 사용자가 어디 있는지 알려준다.
- 사이트에 어떤 내용이 있는지 알려준다.
- 사이트 이용 방법을 알려준다.
- 사이트를 만든 사람에 대한 신뢰도를 높인다. (명확한 내비게이션을 완성하면 사용자에게 좋은 인상을 남길 수 있다.)
2. 웹 내비게이션 관례
위치와 형태
내비게이션 요소의 위치를 통일하면 적은 시간과 수고를 들여도 찾을 수 있다. 형태를 통일하면 다른 요소와 구분하기도 쉽다. 내비게이션을 통일하면 사용법을 한 번만 이해해도 되므로 중요하다.
물론 예외는 있다. 채워 넣어야 할 폼이 있는 페이지에서는 관련이 없는 다른 요소는 방해가 될 뿐이다. 이런 페이지에서는 고정 내비게이션을 최소(사이트 ID, 홈페이지 연결링크, 폼 채우는데 도움되는 유틸리티)로 유지하는 편이 좋다.
사이트 ID
웹 사이트의 사이트 ID나 로고는 건물의 이름 같은 역할을 한다. 보통 페이지 맨 위 왼쪽 가장자리에 아니면 적어도 그 근처에 있는데 그 이유는, 사이트 ID가 사이트 전체 논리적 계층구조의 최상위에 있기 때문이다.
최상위 계층을 페이지에 드러내는 방법은 페이지에서 그 부분을 가장 두드러지게 디자인하거나, 그 부분 위주로 전체 페이지를 구성하는 것이다.
사이트 ID 다운 모양으로 제작하는 것도 중요하다. 어떤 크기로 두더라도 쉽게 구분되도록 눈에 띄는 서체와 그래픽을 사용해서 사이트 ID가 가게 밖에 붙이는 브랜드 로고나 표지판이 지닐 법한 특징을 지녀야 한다.
섹션
사이트 계층구조상 최상위에 있는 사이트 주요 구역으로 이어지는 링크를 가르킨다. 섹션 이름을 가르키거나 클릭했을 때 드롭다운 메뉴가 드러나거나 클릭하면 하위 내비게이션이 담긴 섹션 첫 페이지로 데려가는 디자인도 있다.
유틸리티
콘텐츠 계층구조에 포함되지 않는 사이트 주용 요소로 연결되는 링크를 가르킨다. 섹션보다 덜 눈에 띄는 것이 좋다. 글로벌 내비게이션(고정 내비게이션)에는 사용자가 가장 자주 사용하는 4~5개 정도의 유틸리티만 넣고, 자주 사용하지 않는 유틸리티는 페이지 맨 하단 내비게이션에 두자.
ex) 로그인/가입하기, 고객센터, 사이트맵, 장바구니, 회사 소개, 연락처, 도움말
홈 버튼
사용자를 홈페이지로 데려다 주는 버튼이나 링크는 글로벌 내비게이션(고정 내비게이션)을 이루는 가장 주요한 요소이다. 홈 버튼이 시야에 들어가면 사이트 내부에서 길을 잃더라도 언제든 다시 시작할 수 있다는 안정감이 든다. 웹 사용자 다수는 사이트 ID가 홈페이지로 연결되는 버튼이라고 생각하기도 한다.
검색
그냥 훑어보기보다 검색하는 방식을 선호나는 사람들의 수가 많다는 사실을 고려해볼 때 모든 페이지에 검색 상자나 검색 페이지로 연결되는 링크를 넣는 것이 좋다. (단, 규모가 매우 작고 정리가 아주 잘 되어 있는 사이트가 아니라면) 그리고 검색할 이유가 특별히 적은 사이트가 아니라면 링크보다 검색 상자를 넣는 게 더 낫다.
- 미사여구를 사용하지 말자
찾기, 빠르게 찾기, 빠른 검색, 키워드 검색이 아닌 그냥 "검색"이라는 단어를 사용하자 - 설명을 줄이자
공식대로 만든 검색창이라면 웹을 접한 지 며칠 정도밖에 되지 않는 사용자라도 사용법을 이미 알고 있을 것이다. - 옵션을 두지 말자
사용자는 검색 옵션이 있으면 옵션의 내용이 무엇인지, 본인에게 유용한 옵션인지 따져봐야 한다. 이처럼 옵션이 추가되어 사용자에게 고민을 안겨주면서 발생하는 손해는 이득보다 대게적으로 크다.
하위 단계 내비게이션
여러 단계로 이루어진 웹 사이트 내비게이션은 원래 만들기 어렵다. 제한된 페이지 공간에 다양한 요소를 욱여넣어야 한다는 점을 고려하면 그럴 수밖에 없다. 그뿐 아니라 디자이너들이 콘텐츠 책임자에게 하위 단계에 대한 예를 요청한다고한들 그들도 그 단계까지는 보통 생각해두지 않기 때문에 초기 설계를 하기가 어렵긴 하다.
하지만 실제 사용자들이 머무는 시간의 양은 상위 페이지나 하위 페이지나 비슷하다. 그리고 처음부터 내비게이션 전체 구조를 고려해서 설계하지 않았다면 나중에 이어 붙인 부분에서도 일관성이 유지되길 기대하긴 어렵다. 따라서 사이트에 포함될 가능성이 있는 전 단계를 아우르는 내비게이션이 포함된 샘플 페이지 제작이 중요하다.
페이지 이름
페이지 이름은 거리에 있는 도로 표지판에 해당한다. 내 의도와는 다르게 이상한 방향으로 간다고 생각들 때, 사이트 안에서 현재 내 위치를 나타내는 페이지 이름이 눈에 띄어야 당황하지 않는다.
- 모든 페이지는 이름이 필요하다.
- 이름은 눈에 띄어야 한다
- 이름은 내가 클릭한 것과 일치해야 한다.
아래에는 페이지 이름의 예시이다.
현재 위치 표시
사용자는 사이트에서 '길을 잃은 듯한' 느낌을 자주 받는다. 따라서 페이지 내비게이션 바나 목록, 메뉴 어디에든 사용자의 현재 위치를 강조해야한다.
빵 부스러기 (Breadcrumbs)
이 용어는 헨젤이 숲 속에 빵부스러기를 뿌려서 그레텔과 함께 집으로 돌아오는 길을 찾을 수 있었던 것에서 왔다. 아래는 빵 부스러기의 예제이다.
이처럼 빵 부스러기는 홈페이지에서 내가 있는 현 위치까지의 경로를 보여주는 동시에 사이트 상위 체계로 쉽게 거슬러 올라갈 수 있게 도와준다. 복잡한 계층구조로 구성된 큰 사이트에서 굉장히 유용하다.
- 빵 부스러기는 맨 꼭대기에 두어라.
액세서리처럼, 책의 페이지번호처럼 본문과 격리된 느낌이 들기 때문에 역할에 잘 어울린다. - 각 단계 사이에 > 기호를 넣어라
아래 단계로 내려가는 움직임을 시각적으로 잘 보여주기 때문이다. - 마지막 항목의 서체를 볼드체로 표기하라
마지막 항목은 사용자가 현재 머물고 있는 페이지를 나타내므로 눈에 띄게 표시하는 것이 적절하다.
탭
섹션을 분리하는 역할을 하는 탭은 아래와 같은 장점을 지녔다.
- 탭의 사용법은 자명하다 : 인터페이스가 쉽다.
- 탭은 눈에 잘 띈다 : 시각적으로 도드라지므로 사람들이 잘 놓치지 않는다.
- 탭은 보기 좋다
단, 탭을 쓸 거라면 활성화된 탭이 다른 탭보가 앞으로 나와 있는 듯한 착시 효과를 주어야 좋은 효과를 거둘 수 있다.
평가
페이지가 잘 설계되어 있다면 다음 질문에 망설임 없이 명확한 답을 낼 수 있어야 한다.
- 이 사이트는 무슨 사이트인가? (사이트 ID)
- 내가 지금 무슨 페이지에 있는가? (페이지 이름)
- 이 사이트의 메인 섹션은 무엇인가? (섹션)
- 현재 페이지의 내비게이션 상태는 어떠하다고 생각하는가? (로컬 내비게이션)
- 전체 사이트 구성에서 현재 위치는 어디에 해당하는가? ('현재 위치' 표시)
- 검색은 어떻게 하는가?
트렁크 평가
눈가리개를 한 상태로 자동차 트렁크에 갇혀서 끌려다닌 후에 어떤 웹사이트의 깊숙한 곳에 있는 페이지에 던져졌다고 상상하고 평가를 해보자
- 1단계 : 사이트에 있는 페이지 중 하나를 임의로 고르고 인쇄한다
- 2단계 : 인쇄한 페이지를 약간 거리를 두고 보거나, 눈을 가늘게 뜨고 흐릿하게 보이는 상태를 만든다.
- 3단계 : 최대한 빠른 속도로 다음 항목을 하나씩 찾아서 동그라미표시한다.
- 사이트 이름
- 페이지 이름
- 섹션 (고정 내비게이션)
- 로컬 내비게이션
- '현재 위치' 표시
- 검색
- BOOK REVIEW 1 : 사용성의 원칙 : https://cheri.tistory.com/256
- BOOK REVIEW 2 : 내비게이션 : https://cheri.tistory.com/261
- BOOK REVIEW 3 : 모바일 앱 사용성 : https://cheri.tistory.com/272
'📝 꾸준함이 무기 > Information' 카테고리의 다른 글
| [BOOK REVIEW 3 : 모바일 앱 사용성] 사용자를 생각하게 하지마! (2) | 2022.08.03 |
|---|---|
| Mac에서 폴더구조 txt파일만들기 (1) | 2022.07.29 |
| [BOOK REVIEW 1 : 사용성의 원칙] 사용자를 생각하게 하지마! (0) | 2022.05.12 |
| Cypress - 테스팅 프레임워크 (2) | 2021.11.19 |
| PWA로 애플리케이션 만들기 (2) | 2021.11.11 |
