[책내용정리] (사용자를) 생각하게 하지마! - 3

(사용자를) 생각하게 하지 마! - 스티브 크룩

 

 

3. 광고판 디자인 첫걸음

 

 

 

1) 관례를 이용하라

 

- 관례 : 널리 사용되거나 표준화된 디자인 패턴

 

- 통용되고 있는 관례를 따르면 사용자가 내용을 빠르고 쉽게 이해하는 데 도움이 됨

 

 

 

# 관례 예시

 

· 정지 표지판 :  안전을 위해 매우 중요. 모든 정지 표지판은 같은 형태로 제작되고 세계 어디를 가도 전체적인 일관성이 잘 유지됨

 

· 자동차 제어 장치 : 가속 페달의 위치 / 경적의 위치

 

· 페이지상 항목의 위치 : 로고의 보통 위치는 페이지 상단 왼쪽 모서리에 있고 왼쪽 위부터 대각선 아래로 탐색

 

· 작동 방식 : 쇼핑카트 메타포를 사용.  지불 방법,  배송 주소 등 특정항목이 매우 비슷

 

· 보이는 형태 : 동영상 링크 아이콘 , 검색 아이콘, 공유 옵션 등이 표준화 됨

 

 

 

# 혁신적인 결과를 내려면 대체하고자 하는 것이 지닌 가치를 이해해야함.

 

예 ) 스크롤바 : 미관상의 이유로 바꾸려 하지만 긴 시간 동안 섬세하게 조정하고 진화한 노력의 산물

 

 

 

#관례를 활용하지 않으려면?

 

a) 사람들이 별도로 익히는 수고를 하지 않아도 될 정도로 명확하거나 설명 없이도 이해할 수 있어서 관례 만큼이나 좋은 것으로 대체

 

b) 익히는 수고를 약간 들이더라도 그만큼의 가치가 있는 것으로 대체

 

 

 

# 필자의 추천하는 바는?

 

-  새로운 아이디어가 더 낫다는 것을 확신할 때 혁신하고 그렇지 않을 때는 관례를 이용

 

- 사용자의 편의성을 확실히 보장한 상태에서 심미적인 요소와 창의적이고 혁신적인 방법을 사용해도 좋다.

 

 

 

#명료성이 일관성보다 더 중요하다

 

-일관성을 약간 해쳐서 전체적인 명료성이 크게 증가한다면 명료성을 우선 하라.

 

 

 

 

2) 시각적 계층구조를 효과적으로 구성하라

 

-페이지 요소 간의 관계가 잘 드러나게 하면 페이지를 이해하기 쉬움

 

 

 

# 계층 구조가 분명한 페이지

 

· 더 중요한 부분이 더 눈에 띔  : 중요한 요소는 크게,  두껍게 표시 /  눈에 띄는 색을 쓰고 주변에 넓은 공간을 두어 분리하거나 페이지 맨 꼭대기에 가깝게 둠

 

· 논리적으로 연관된 요소가 시각적으로 연결되어 있음 : 하나의 제목아래 그룹으로 묶거나 동일한 시각적 스타일을 적용하거나 명확히 구분된 하나의 구역에 모아라

 

· 두 요소 간 상·하위 관계가 형성되어 있다면 이를 시각적으로도 보여줌  : 컴퓨터 관련 도서 같은 섹션 이름은 그 섹션에 속하는 개별 도서 제목 위에 두어야 함. 같은 맥락에서 각 도서 제목이 그 책에 속하는 모든 요소를 아우르게 해야함.

 

 

 

- 사용자는 항상 시각적 계층 구조를 분석한다.

 

- 시각적 계층구조가 잘 구성된 사이트는 한눈에 이해기 좋음

 

- 시각적 계층 구조가 명료하지 않으면 페이지를 훑어보는 처리 속도가 느려짐.

 

 

 

 

 

3) 페이지의 구역을 또렷하게 구분하라

 

- 페이지 구역이 명확히 나뉘어 있어야 사용자가 페이지의 어떤 부분에 초점을 맞출지 어떤 부분은 마음 편히 무시할지 빠르게 결정할 수 있음.

 

ex) 배너 맹(Banner blindness) : 광고를 포함하고 있다고 생각되는 영역을 사용자가 철저히 무시할 수 있는 능력

 

 

 

 

 

4) 클릭할 수 있는 요소를 명확히 표시하라

 

- 사용자는 웹 페이지를 훑어볼 때 클릭할 수 있는 요소를 구분할 시각적 단서를 찾음. ( 버튼, 탭, 메뉴 표시줄 안 위치, 색상, 밑줄)

 

- 클릭할 수 있는 요소가 쉽게 구분되도록 디자인해야함.

 

 

 

 

5) 주의를 흩뜨릴 만한 요소를 없애라

 

- 시각적 잡음 : 페이지 이해를 방해하는 주요 요소 중 하나

 

 

 

#잡음의 종류

 

· 시끄러움 : 페이지에 있는 모든 요소가 주의를 끄는 경우. 시각적 계층 구조의 기준이 될만한 중요 요소가 정리 되지 않은 경우

 

· 무질서 : 요소가 사방에 흩어져 있는 페이지. 페이지 요소를 기준선에 따라서 배열하지 않았을 때.

 

· 어수선함 : 너무 많은 내용을 담은 페이지. 유용한 부분이 잡음에 가려 잘 보이지 않음.

 

 

 

- 웹 페이지를 편집할 때 모든 것이 시각적 잡음이라고 가정하고 시작하는 편이 좋음.

 

- 진짜로 도움이 되는 부분만 남기고 나머지는 모두 없애라.

 

 

 

 

6) 내용을 훑어보기 좋은 방식으로 구성하라

 

- 사용자 대부분은 자신이 원하는 것을 찾기 위해 텍스트를 훑어봄.

 

 

 

 

# 훑어보기 좋은 방식으로 구성하는 법

 

· 제목을 많이 넣어라 : 잘 지은 제목이 사이사이에 있으면 페이지 내용의 개요나 표를 대신하는 역할을 함. 제목에 적절한 서식을 적용해라.

 

· 단락의 길이를 짧게 유지하라 : 단락이 길어지면 독자는 벅차다는 느낌 떄문에 읽는 데 어려움을 느낀다.

 

· 불릿 목록을 사용하라 : 불릿 목록으로 만들 수 있는 항목은 불릿 목록으로 만들자. 읽기 좋은 상태를 만들려면 항목 사이에 추가 공간을 넣어라.

 

· 주요 용어를 강조하라 : 페이지를 훑어볼 때 주로 찾는 것은 중요한 단어나 구절이다. 중요한 단어가 본문에 처음 등장할 떄 굵게 표기하면 찾기 쉽다.