[도서 정리] 사용자를 생각하게 하지마 - 광고판 디자인 첫걸음 ( 훑어보기 좋은 디자인 )

[도서 정리] 사용자를 생각하게 하지마 - 광고판 디자인 첫걸음 ( 훑어보기 좋은 디자인 )

-

"사용자를 생각하게 하지마” 라는 책의 핵심 내용 정리 내용입니다. 구체적 내용과 예시 등은 책을 구매해서 보세요~

-

사용자가 스치듯 지나간다는 사실을 알게 되었으니 그들이 알아야 할 내용 혹은 여러분이 그들에게 알려주었으면 하는 내용을 최대한 많이 전달하고 이해시키기 위해 여러분이 꼭 해야 할 몇 가지 중요한 사항은 아래와 같다.

     관례를 이용하라

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

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

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

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

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

관례를 이용하라

-

관례는 널리 사용되거나 표준화된 디자인 패턴을 말한다.

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

-

관례는 어느 날 갑자기 생기지 않는다.

모든 관례는 누군가 낸 좋은 아이디어에서 시작되었다.

한 아이디어가 좋은 효과를 거두면 다른 사이트들이 그 아이디어를 따라 한다.

사용자들이 이 아이디어를 많은 곳에서 접하다 보면 마침내 별도의 설명 없이도 사용할 수 있는 상태에 이른다.

-

관례에도 한 가지 문제가 있다.

디자이너들이 종종 관례 이용을 꺼린다는 점이다.

관례를 따르면 사용자가 이해하기 쉬운 디자인이 완성될 가능성이 커지는 것을 알고 있다 하더라도, 디자이너들은 바퀴를 재창조해야 한다는 유혹에 시달린다.

디자이너는 본인을 고용한 이유가 관례를 답습하는 데 있지 않고 무언가 새롭고 다른 것을 창조하는 데 있다고 생각하기 때문이다.

바퀴를 재창조하는데 들인 시간 덕분에 혁신적인 회전 장치가 탄생하는 때도 간혹 있다.

하지만 시간만 허비하고 원점으로 되돌아오는 때가 대부분이다.

-

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

-

웹 관례를 활용하지 않으려면

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

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

-

여러분의 새로운 아이디어가 더 낫다는 것을 확실할 때 혁신하라.

하지만 그렇지 않을 떄는 관례를 잘 활용하라.

-

창의적이고 혁신적인 방법을 얼마든지 사용해도 좋다.

심미적인 요소도 얼마든지 넣어도 된다.

사실 그렇게 해야 마땅하다.

단, “사용자의 편의성을 확실히 보강한 상태에서 해야 한다."

-

사이트나 앱을 만들 때 일관성을 유지하기 위해 노력하는 것이 좋기는 하다.

하지만 경우에 따라 일관성을 약간 벗어나야만 전체적인 내용이 더 명확해지는 때도 있다.

앞으로는 다음 규칙을 마음에 새겨두라.

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

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

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

-

페이지에 나타난 요소의 외형에 페이지 요소 간의 관계가 잘 드러나게 하는 것도 페이지를 빠르게 이해할 수 있도록 하는 하나의 방법이다.

무엇이 가장 중요하고 어떤 것들이 비슷하며 요소 간의 위계는 어떠한지 시각적 단서를 주는 것이다.

다시 말해 각 페이지는 시각적 계층구조를 명확히 보여주어야 한다.

-

시각적 계층 구조가 분명한 페이지에는 세 가지 특징이 있다.

1. 더 중요한 부분이 더 눈에 띈다.

     가장 중요한 요소는 크게, 두껍게 표시하거나 눈에 띄는 색을 쓰고 주변에 넓은 공간을 두어 분리하거나 페이지 맨 꼭대기에 가깝게 둔다.

     아니면 이러한 시각적 요소 여러 개를 복합적으로 사용해서 눈에 띄게 한다.

2. 논리적으로 연관된 요소가 시각적으로 연결되어 있다.

     비슷한 요소는 하나의 제목 아래 그룹으로 묶거나 동일한 시각적 스타일을 적용하거나 명확히 구분된 하나의 구역에 모아두라.

3. 두 요소 간 상,하위 관계가 형성되어 있다면 이를 시각적으로도 보여준다.

-

사용자는 늘 부지불식간에 시각적 계층구조를 분석한다.

분석이 매번 너무 빠르게 완료되어 인식하지 못하는 것 뿐이다.

-

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

내용에 우선순위를 매기고 조직화하는 작업을 미리 해둔 덕분에 사용자가 별도로 페이지를 분석할 필요가 없기 때문이다.

-

시간적 계층 구조가 명료하지 못한 페이지를 볼 때는 페이지를 훑어보는 처리 속도가 느려진다.

단어와 구절을 밝혀내고 중요한 내용은 무엇이며 어떤 방식으로 정리되어 있는지 이해하기 위해 훨씬 더 많은 과정을 거쳐야 하기 때문이다.

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

-

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

웹 페이지를 훑어보는 사용자의 시선을 추적 연구해보면 페이지의 어떤 부분이 유용할지 한눈에 매우 빠르게 결정하는 걸 알 수 있다.

선택하지 않은 부분은 거의 거기 있지도 않은 것처럼 지나친다.

광고를 포함하고 있다고 생각되는 영역을 사용자가 철저히 무시할 수 있는 능력을 배너 맹(Banner blindness)이라고 하는데 이는 극단적인 예이다.

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

-

일반적으로 모든 텍스트 링크에 한 가지 색상을 입히거나 클릭해도 된다는 걸 형태나 위치로 구분할 수 있게 하는 정도면 충분하다.

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

-

시각적 잡음(visual noise)은 페이지 이해를 방해하는 주요 요소 중 하나다.

* 시끄러움

     페이지에 있는 모든 요소가 주의를 끌기 위해 아우성을 치고 있다면 굉장한 부담으로 다가온다.

     모든 요소가 중요할 리는 없다.

     사용자를 안내할 시각적 계층 구조의 기준이 될 만한 가장 중요한 요소가 무엇인지 모를 때 이렇게 시끄러운 웹 사이트가 탄생한다.

* 무질서

* 어수선함

     신호 대 잡음비(signal-to-noise ratio) 가 낮다고 말하는 상태이다.

     잡음만 많고 정보는 적으므로 유용한 부분이 잡음에 가려 잘 보이지 않는다.

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

     “결백이 증명되기까지 유죄로 추정” 하는 접근법이다.

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

     사용자의 시간과 주의력에는 한계가 있다.

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

* 제목을 많이 넣어라.

     사려 깊게 잘 지은 제목이 사이사이에 있으면 페이지 내용의 개요나 표를 대신하는 역할을 한다.

     여러분의 생각보다 제목의 수를 더 늘리고 제목을 작성할 때 더 많은 노력을 들여야 한다고 보면 된다.

     그리고 제목에 적절한 서식을 적용하라.

     제목이 여러 수준으로 나뉜다면 수준 간에 누구나 명확히 알아볼 수 있는 차이를 두라.

     제목의 단계가 높아질수록 크기를 키우거나 제목 위에 더 넓은 공간을 남겨라.

     그리고 이보다 저 중요한 건 제목이 둥둥 떠나니게 하지 않는 것이다.

     앞에 나온 섹션보다 그 제목이 속하는 섹션에 더 가까이 위치하게 하라.

* 단락의 길이를 짧게 유지하라.

     긴 단락을 만난 독자는 벅차다는 느낌 때문에 읽는 데 어려움을 느낀다.

     짧은 단락 여러 개를 훑어보는 것보다 긴 단락 하나를 훑어보는 것이 더 어렵다.

* 블릿 목록을 사용하라.

     블릿 목록으로 만들 수 있는 항목이라면 만드는 편이 좋다.

     여러분이 만든 단락에 쉼표나 세미콜론으로 나눈 일련의 항목이 있는지 살펴보라.

     읽기 좋은 최적의 상태를 만들려면 항목 사이에 추가 공간을 약간 넣어야 한다.

* 주요 용어를 강조하라.

     가장 중요한 단어가 본문에 처음 등장할 때 굵게 표기하면 찾기 쉬워진다.

     너무 많은 항목을 강조하지는 마라.

     너무 자주 사용하면 효과가 떨어진다.

본문을 훑어보기 쉽게 만든느 방법이나 화면상에 글을 쓸 때 일반적으로 고려해야 할 사항을 배우고 싶다면,

당장 지니 레디쉬의 저서 “Letting Go of the Words” 를 주문하라.

다음글 : 사용자를 생각하게 하지마 - 동물입니까, 식물입니까, 무생물입니까? (사용자가 고민 없이 선택하길 좋아하는 이유)

visual noise, [도서 정리] 사용자를 생각하게 하지마 - 광고판 디자인 첫걸음 ( 훑어보기 좋은 디자인 ), 결백이 증명되기까지 유죄로 추정, 관례를 이용하라, 광고판 디자인 첫걸음, 내용을 훑어보기 좋은 방식으로 구성하라, 논리적으로 연관된 요소가 시각적으로 연결되어 있다., 단락의 길이를 짧게 유지하라., 더 중요한 부분이 더 눈에 띈다., 명료성이 일관성보다 더 중요하다, 무질서, 블릿 목록을 사용하라., 사용자를 생각하게 하지마, 새로운 시도의 가치, 시각적 계층구조, 시각적 계층구조를 효과적으로 구성하라., 시각적 잡음, 시끄러움, 어수선함, 요소간 상하위 관계, 제목을 많이 넣어라., 주요 용어를 강조하라., 주의를 흩뜨릴 만한 요소를 없애라, 클릭할 수 있는 요소를 명확히 표시하라, 페이지의 구역을 또렷하게 구분하라, 혁신은 기존 가치를 이해한 후, 훑어보기 좋은 디자인