취미/[독서]
(사용자를) 생각하게 하지마!
뉴아희씨
2020. 2. 24. 14:16
스티브 크룩 (사용성에 대해서 아는 사람이 거의 없던 시절부터 활동해온 유명한 사용성 컨설턴트!)
웹 사이트를 기본으로 했지만 최근 편에서는 앱도 포함되었다고 한다.
하단의 내용은 나중에도 읽기위한.. 기록용
💡스티브 크룩의 사용성 원칙
제1원칙. 사용자를 고민에 빠뜨리지 마라!
제2원칙. 클릭 수가 늘어나는 것은 괜찮다. 클릭 할 때 고민할 필요만 없다면.
제3원칙. 각 페이지에 담긴 단어의 절반을 덜어내라. 그리고 남은 부분에서 또 절반을 덜어내라.
< 내용 >
3장. 훑어보기 좋은 디자인
- 사용자를 고민에 빠뜨리지 마라!
- 고민 ↔ 명확
- 사용자는 읽지 않는다. 훑어본다.
- ⭐️ 사용자에게 최대한 많이 전달하고 이해시키는 방법 ⭐️
- 1. 관례
- 2. 일관성
- 3. 시각적 계층 구조
- 4. 페이지의 구분 또렷히
- 5. 클릭할 수 있는 요소를 명확하게
- 6. 시선 분산시키는 요소 제거
- 7. 훑어보기 좋은 방식으로 구성
- [관련 추천 도서] 지니 레디쉬 'Letting Go the Words'
- 1. 관례를 사용하라 (관례: 널리 사용되거나 표준화된 패턴)
- 디자이너는 재창조의 유혹에 시달린다. 하지만 시간만 허비하고 원점으로 돌아오는 경우가 있다.
- 혁신적인 결과를 내고자 할 때에는..
- 사람들이 별도로 익히는 수고를 안해도 될만큼 명확해서 관례만큼 좋거나
- 익히는 수고를 약간 들이더라도 그 만큼의 가치가 있는 것으로 대체해야한다.
- 확신할 때 혁신하라.
- 창의적이고 혁신적인 방법을 얼마든지 사용하라. 심미적인 요소는 마땅히 들어가야 한다.
단, 사용자의 편의성을 확실하게 보장한 상태에서 해야한다.
- 2. 일관성
- 일관성을 유지하기 위한 노력은 중요하다. 하지만 경우에 따라 일관성이 약간 벗어나야만 전체적인 내용이 더 명확해지는 때도 있다.
- 명료성이 일관성보다 더 중요하다!!!
- 3. 시각적 계층구조를 효과적으로 구성하라
- 무엇이 가장 중요하고 어떤 것들이 비슷하며 요소 간의 위계는 어떠한지 시각적 단서를 주는 것.
- (a) 더 중요한 부분이 더 눈에 띈다.
- 가장 중요한 요소는 크게, 볼드, 눈에 띄는 색상을 사용하고 주변에 넓은 공간을 두어 분리하거나 페이지 맨 꼭대기에 가깝게 둔다.
- (b) 논리적으로 연관된 요소가 시각적으로 연결되어있다.
- 비슷한 요소는 하나의 제목 아래 그룹으로 묶는다
- 동일한 시각적 스타일을 적용하거나 명확히 구분된 하나의 구역에 모아둔다
- (c) 두 요소 간 상, 하위 관계가 형성되어 있다면 이를 시각적으로 보여준다.
- (a) 더 중요한 부분이 더 눈에 띈다.
- 중요도, 그룹 만들기, 상하위 관계 보여주기 등의 방법을 이용하여 내용을 읽지 않은 상태에서도 계층구조를 알 수 있어야 한다.
- 분석이 매번 너무 빠르게 완료되어 인식하지 못하지만 사용자는 늘 시각적 계층구조를 분석한다.
- 내용에 우선순위를 매기고 조직화하는 작업을 미리한다.
- 무엇이 가장 중요하고 어떤 것들이 비슷하며 요소 간의 위계는 어떠한지 시각적 단서를 주는 것.
- 4. 페이지의 구역을 또렷히 구분하라
- 페이지 구역이 명확히 나뉘어져 있어야 사용자가 페이지의 어떤 부분에 초점을 맞출지, 무시할지 빠르게 결정할 수 있다.
- ex) 광고를 포함하고 있다 생각해 사용자가 철저히 무시할 수 있는 능력 배너 맹(Bannner-Blindness)
- 5. 클릭할 수 있는 요소를 명확히 표시
- 클릭할 수 있는 요소가 쉽게 구분되도록 디자인한다.
- 사용자는 웹 페이지를 훑어볼 때 클릭/터치 할 수 있는 요소를 구분할 시각적인 단서를 찾는다.
- 단서 -> 보통 형태(버튼, 탭), 위치(메뉴 표시줄 안), 서식(색상, 밑줄)
- 모바일 디자인 분야에서도 클릭할 요소를 명확히 표시하는 문제를 재조명 하는 중
- 6. 주의를 흩뜨릴 만한 요소를 배제하라.
- 복잡성이나 주의 분산에 대한 허용치는 사용자마다 차이가 있다.
- 시각적 잡음(visual noise) 은 페이지 이해를 방해하는 주요 요소
- (a) 시끄러움
- 페이지의 모든 요소가 주의를 끌기 위해 아우성을 치고 있다면 굉장한 부담으로 다가온다.
- 모든 요소가 중요할 리 없다!
- 사용자를 안내할 시각적 계층 구조의 기준이 될 만한 가장 중요한 요소가 무엇인지 모를 때 시끄러운 결과물이 나온다.
- (b) 무질서
- 온갖 요소가 사방에 흩어져 있는 페이지. 페이지 요소를 기준선에 따라서 배열하지 않았을 때 이러한 문제가 발생
- (c) 어수선함
- 너무 많은 내용을 담은 페이지. 진짜 신경을 써야 하므로 메시지를 찾아서 집중하기 어렵다.
- 기술자들이 신호 대 잡음비(signal-to-noise ratio)가 낮다고 말하는 상태에 처하게 된다.
- 잡음만 많고 정보는 적으므로 유용한 부분이 잡음에 가려 보이지 않는 것
- 편집할 때 모든 것이 시각적 잡음이라고 가정하고 시작하는 것이 좋다.
- 진짜 도움이 필요한 부분을 제외한 나머지는 모두 없애라. 사용자의 시간과 주의력에는 한계가 있다.
- (a) 시끄러움
- 7. 훑어보기 좋은 방식으로 구성하라
- (a) 제목을 많이 넣는다
- 사려 깊게 잘 지은 제목이 사이사이에 있으면 페이지 내용의 개요나 표를 대신하는 역할을 한다.
- 제목에 적절한 서식을 적용하라. 제목이 여러 수준으로 나뉜다면 수준 간 명확한 차이를 두라.
- 제목이 둥둥 떠다니게 하지 않아야 한다. 앞에 나온 섹션보다 제목이 속하는 섹션에 더 가깝게 두라.
- (b) 단락의 길이를 짧게 유지하라
- 긴 단락을 만난 사용자는 벅차다는 느낌 때문에 읽는게 어려움을 느낀다.
- 짧은 단락 여러 개 > 긴 단락 한 개
- 문단 분량을 짧게 유지하는 습관을 들여야 한다.
- (c) 블릿 목록을 사용하라
- (지금 이 문장 앞의 기호와 같은 것)
- 읽기 좋은 최적의 상태를 만들려면 항목 사이에 추가 공간을 약간 넣어야 한다. (적절한 행간)
- (d) 주요 용어를 강조하라
- 가장 중요한 단어가 본문에 처음 등장할 때 굵게 표기한다.
- 너무 많은 항목을 강조하면 효과가 떨어진다.
- (a) 제목을 많이 넣는다
4장. 동물입니까, 식물입니까, 무생물 입니까? (사용자가 고민 없이 선택하길 좋아하는 이유)
- 페이지에 도달하기 위한 클릭 수보다 클릭 한 번에 얼마나 수고가 드느냐, 에 있다. 이는 내가 하는 선택이 옳은지 판단하기 위해 고민해야 하는 양, 불확실성의 정도로 측정할 수 있다.
- 별 고민 없이 클릭할 수 있고 본인이 옳은 방향으로 가고 있다는 확신만 꾸준히 든다면 클릭을 많이 하더라도 사용자는 크게 개의치 않는 편이다.
- 사용자에게 고민이 필요한 선택지를 줄 수밖에 없다면 그들이 딱 필요로 할 만큼의 적절한 안내를 함께 제공하라.
- 간결성. 사용자에게 도움이 되는 정보를 선별해서 최소한의 양만 남기라.
- 적시성. 사용자가 딱 필요로 할 순간에 마주칠 위치에 두라.
- 불가피성. 반드시 놓치지 않고 볼 수 있는 포맷을 사용하라.
5장. 불필요한 단어를 제외하라.
불필요한 단어는 생략하라.
건강한 문체는 간결하다. 문장에 불필요한 단어가 없어야 하고 문단에는 불필요한 문장이 없어야 한다.
그림에 불필요한 선이 없어야 하고 기계에 불필요한 부품이 없어야 하는 것과 같은 이치다.
- E.B.White 'The Elements of Style'
- 아무도 읽지 않을 텐데 단순히 자리만 차지하고 있는 단어로 가득한 페이지가 많다.
- 아무도 읽지 않은 불필요한 단어를 제거 했을 때
- 페이지의 소음 수준이 낮아진다.
- 유용한 부분이 더욱 도드라진다.
- 페이지 길이가 짧아지므로 사용자는 스크롤을 내리지 않고도 한눈에 전체를 훑어볼 수 있다.
- 아무도 읽지 않은 불필요한 단어를 제거 했을 때
- 불필요한 인사말을 빼라
- 이런 인사말을 형편없는 글솜씨로 자기만족을 위해 쓴 홍보용 글인 경우가 많다. 이런 글에는 유용한 정보가 없다.
- 사용자들은 이런 잡담할 시간이 없다. 그들은 바로 본론으로 들어가길 원한다.
- 설명을 빼라
- 설명을 읽는 사람이 거의 없다는 사실을 꼭 기억하라.
- 설사 읽는다 해도 설명이 장황하다면 사용자가 본인이 필요로 하는 정보를 찾을 확률이 매우 낮다.
- 항상 모든 내용이 자명해서 설명이 없어도 이해가 되는 수준을 목표로 디자인하라.
6장. 표지판과 부스러기 (내비게이션 디자인하기)
- 사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다.
< 후기? >
- 읽으면서도 내가 쓴 정리 글이 참 어수선하다는 생각이 든다. 지식 활용도가 떨어진다..
- 명료성 >>> 일관성 - 내가 이전까지 잘못 알고있던 지식. 명료함이 가장 1순위
- 회사에서 문서를 기안하고 지적받았던 내용이 떠오른다. '디테일하게 기록하는 것은 좋지만 언제나 읽기가 힘들다.'
여태 잘 고쳐지지 않았는데 이런 습관이 사용자에게는 불편함을 줄 수 있다고 생각하니 매우 치명적인 단점으로 느껴진다.