이 책의 키워드는 ‘사용성’이다.
사용성은 기술이 아니라 사람에 대한 것이고 사람이 사물을 이해하고 사용하는 방법에 대한 것이다.
전문가 사용성 리뷰: 사용자가 하고 싶어 할 만한 것을 수행하고 막힐 법한 부분을 기록
사용성 평가: 다른 사람이 사용하는 모습을 관찰하며 어디에서 막히는지 기록
사용성이 뛰어나다
= 평범한 혹은 평균 이하의 능력과 경험을 가진 사람이 어떤 사물을 사용해서 무언인가 하려고 할 때 사용법을 스스로 알아낼 수 있다.
단 투입한 수고에 비해 얻은 가치가 더 커야 한다.
1. 사용자를 고민에 빠뜨리지 마라!
사용자가 찰나의 순간이라도 클릭 여부를 고민하는 데 쓰게 하지 마라.
모든 물음표는 인지적 부하를 더하는 주의 분산 요인이 된다.
명백하게 만들기 어렵다면 최소한 설명을 추가할 필요는 없을 정도로 만들어야 한다.
사람들은 페이지를 보는데 매우 적은 시간을 소비한다.
러므로 효과적인 페이지를 만들려면 사용자가 사용 방법을 한눈에 알아볼 수 있어야 한다.
2. 우리가 실제 웹을 사용하는 방법
사용자는 웹 페이지를 읽지 않는다. 훑어본다.
사용자는 최선의 선택을 하지 않는다. 최소 조건만 충족되면 만족한다.
사용자는 작동방식까지 이해하려 하지 않는다. 적당히 임기응변한다.
3. 광고판 디자인 첫걸음
사용자가 스치듯 지나가니, 그들이 알아야 할 내용을 최대한 많이 전달하고 이해시켜야 한다.
관례를 이용하라
관례는 널리 사용되거나 표준화된 디자인 패턴이다. 웹 관례가 자리를 잘 잡을수록 사용자들의 삶이 편해진다.
하지만 디자이너들이 종종 관례 이용을 꺼린다. 하지만 시간만 허비하고 원점으로 되돌아오는 때가 대부분이다.
혁신적인 결과를 내려면 대체하고자 하는 것이 지닌 가치를 이해해야 한다.
새로운 아이디어가 더 낫다는 것을 확신할 때 현식하라.
그렇지 않을 때는 관례를 잘 활용하라. 창의적이고 혁신적인 방법은 사용자의 편의성을 확실히 보장한 상태에서 해야 한다.
일관성도 중요하지만, 명료성이 일관성보다 더 중요하다.
- 시각적 계층구조를 효과적으로 구성하라
- 페이지의 구역을 또렷하게 구분하라
- 클릭할 수 있는 요소를 명확히 표시하라
- 주의를 흩뜨릴 만한 요소를 없애라 (시끄러움, 무질서, 어수선함)
페이지를 편집할 때 모든 것이 시각적 잡음이라고 가정하고 시작하는 편이 좋다.
진짜 도움이 되는 부분만 남기고 나머지는 모두 없애라.
- 내용을 훑어보기 좋은 방식으로 구성하라
- 제목을 많이 넣어라. (제목 수준 간에 명확한 차이를 두라. 제목이 둥둥 떠다니게 하지 않게 해라.)
- 단락의 길이를 짧게 유지하라.
- 불릿 목록을 사용하라.
- 주요 용어를 강조하라.
4. 동물입니까, 식물입니까, 무생물입니까?
진짜 중요한 것은 원하는 페이지에 도달하기 위한 클릭 수보다 클릭 한 번에 얼마나 수고가 드느냐에 있다.
별 고민 없이 클릭할 수 있고 본인이 옳은 방향으로 가고 있다는 확신만 꾸준히 든다면,
클릭을 많이 하더라도 사용자는 크게 개의치 않는 편이다.
사용자는 ‘정보의 냄새’라 부르는 자취를 따라간다.
아무 고민 없이 할 수 있는 클릭 3번은 고민해야 하는 클릭 1번과 같다.
사용자에게 고민이 필요한 선택지를 줄 수밖에 없다면 그들이 딱 필요로 할 만큼의 적절한 안내를 함께 제공하라.
- 간결성. 사용자에게 도움이 되는 정보를 선별해서 최소한의 양만 남기라.
- 적시성. 사용자가 딱 필요로 할 순간에 마주칠 위치에 두라.
- 불가피성. 반드시 놓치지 않고 볼 수 있는 포맷을 사용하라.
안내를 넣어야 할지 고민될 때는, 가장 중요한 요소가 선택을 고민 없이 할 수 있게 하는 데 있다는 점을 기억하라.
5. 불필요한 단어를 덜어내라
불필요한 단어는 생략하라. 건강한 문체는 간결하다.
문장에 불필요한 단어가 없어야 하고 문단에는 불필요한 문장이 없어야 한다.
그림에 불필요한 선이 없어야 하고 기계에 불필요한 부품이 없어야 하는 것과 같은 이치다.
단어의 절반을 빼라는 정도가 현실적인 목표다.
불필요한 인사말을 빼라. 인사말은 잡담이나 다름없다. 웹 사용자에게는 잡담할 시간이 없다.
설명을 없애라. 임기응변 방식으로 탐색하며 실패를 반복하지 않는 한 설명을 읽는 사람은 없다.
항상 모든 내용이 자명해서 설명이 없어도 이해가 되는 수준을 목표로 하고 디자인하라.
6. 표지판과 breadcrumb
사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다.
스스로 찾기로 했다고 해도 마음대로 일이 풀려나가지 않는다면 결국 누군가에게 물어보게 될 가능성이 크다.
어떤 사이트에 들어가든지 검색 상자부터 찾는 이들도 있다.(검색 중심 사용자)
반면 훑어보기를 선호하는 이들도 있다.(링크 중심 사용자)
웹 사이트에서나 실제 세계에서나 원하는 것을 찾는 과정은 유사하다.
하지만 실제 생활에서 공간을 가늠하기 위해 활용하는 많은 단서가 웹 경험에는 없다.
- 규모에 대한 감각이 없다.
- 방향 감각이 없다.
- 위치 감각이 없다.
웹 사이트에서 특정 부분으로 되돌아가려면 물리적 공간감에 의존하기보다 개념적 계층구조상 어디에 있었는지 기억해서 되짚어가야 한다. (바로가기나 즐겨찾기 기능이 중요한 이유, 뒤로가기 버튼이 가장 자주 사용되는 이유, 처음으로 돌아갈 수 있는 홈페이지가 중요한 이유)
웹 내비게이션을 잘 구축해야 한다.
- 사이트에 어떤 내용이 있는지 알려준다.
- 사이트 이용 방법을 알려준다.
- 사이트를 만든 사람에 대한 신뢰도를 높인다.
내비게이션 요소의 위치를 통일하면 적은 시간과 수고를 들여도 찾을 수 있다.
예외로 채워 넣어야 할 폼이 있는 페이지에서는 고정 내비게이션은 주의력을 분산시키는 불필요한 요소이다.
웹 사이트의 사이트 ID나 로고는 건물의 이름 같은 역할을 한다.
사이트 ID는 사이트 전체 논리적 계층구조의 최상위에 있다.
사이트 ID는 페이지 맨 꼭대기에 위치한다. 꼭대기는 페이지 전체 틀을 잡는 위치이다.
사이트 ID를 사이트 ID 다운 모양으로 제작하는 것도 중요하다.
어떤 크기로 두더라도 쉽게 구분되도록 눈에 띄는 서체와 그래픽을 사용해서 브랜드 로고나 표지판이 지닐 법한 특징을 지녀야 한다.
1, 2단계 이후의 내비게이션에 대해서도 고민해야 한다
전 단계를 아우르는 내비게이션이 포함된 샘플 페이지 제작이 중요하다.
웹 페이지 이름은 거리에 있는 도료 표지판에 해당한다.
모든 페이지에는 이름이 필요하다. 이름이 있는 위치도 적절해야 한다.
이름은 눈에 띄어야 하고, 이름은 내가 클릭한 것과 일치해야 한다.
현재 위치를 표시하는 것도 중요하다. 브레드크럼브도 현재 위치와 비슷한 역할을 한다.
브레드크럼브는 맨 꼭대기에 두어야 하고 부등호 기호가 있어야한다.
목록의 마지막 항목은 현재 페이지일 것이므로 이를 볼드체로 표기하는 게 좋다.(링크가 아닐 것임)
탭은 사용자 인터페이스에 물리적인 메타포를 실제로 적용한 몇 안 되는 사례 중 하나다.
트렁크 평가
- 사이트에 있는 페이지 중 하나를 임의로 고르고 인쇄한다.
- 페이지를 호릿하게 보이는 상태로 만든다.
- 최대한 빠른 속도로 다음 항목을 찾는다.
- 사이트 이름
- 페이지 이름
- 섹션 (고정 내비게이션)
- 로컬 내비게이션
- 현재 위치 표시
- 검색