1.3광고판 디자인 첫걸음

사용자는 스치듯 지나가기 때문에, 꼭 알려주고 싶은 내용들을 전달하려면 아래의 사항들을 기억해야 한다.

• 관례를 이용하기
• 시각적 계층구조를 효과적으로 구성하라
• 페이지의 구역을 또렷하게 구분하라
• 클릭할 수 있는 요소의 명확한 표시
• 주의를 분산시킬만한 요소를 없애기
• 내용을 훑어보기 좋게 구성하기

관례를 이용하기

널리 사용되거나 표준화된 디자인 패턴이다. 예를 들면, 정지 표지판은 어느 나라를 가든 비슷하게 생겼다.(빨간색 팔각형 안에 볼드체 글씨)

페이지상 항목들의 위치도 어느 정도 관례를 따른다. 예를 들면 로고는 대개 페이지 상단 왼쪽 모서리에 있고, 최초의 탐색은 왼쪽 위에서 대각선 아래로 이루어진다. 쇼핑카트는 대개 장바구니다. 동영상 링크 아이콘, 검색 아이콘, 공유 옵션 등의 요소들도 이미 외적 특징이 표준화된 상태다.

다만, 관례에는 한 가지 문제가 있는데 디자이너들이 종종 이용을 꺼린다는 점이다. 디자이너는 관례를 답습하지 않고 무언가 새롭고 다른걸 창조하려고 한다. 하지만, 혁신적인 결과를 내려면 대체하고자 하는 것이 지닌 가치를 이해해야 한다.

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

• 사람들이 별도로 익히는 수고를 안 해도 될 정도로 명확해서 관례 만큼이나 좋은것으로 대체
• 익히는 수고를 약간 들여도 그만큼의 가치가 있는 것으로 대체

해야 한다.

스티브 크룩의 추천은, 새로운 아이디어가 더 낫다고 확신할 때만 혁신하라는 것이다.

또, 경우에 따라 일관성을 약간 벗어나야만 전체적인 내용이 더 명확해지는 때가 있다. 이런 경우에는 명료성이 일관성보다 더 중요하다라는 원칙 하에, 일관성을 약간 해쳐야한다면 명료성을 우선하는 것이 좋다.

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

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

• 더 중요한 부분이 더 눈에 띈다.
  • 가장 중요한 요소는 크게, 두껍게 표시하거나 눈에 띄는 색을 쓴다.
  • 주변에 넓은 공간을 두어 분리한다.
• 논리적으로 연관된 요소가 시각적으로 연결되어 있다.
  • 비슷한 요소는 하나의 제목 아래 그룹으로 묶거나 동일한 시각적 스타일을 적용하거나, 명확히 구분된 구역에 모아둔다.
• 두 요소 간 상하위 관계가 형성되어 있다면 이를 시각적으로도 보여준다.

사용자는 늘 무의식적으로 빠르게 시각적 계층구조를 분석하는데, 시각적 계층구조가 잘 구성된 웹페이지는 한눈에 사용자에게 이해된다. 하지만 예를 모든 요소가 똑같이 중요하게 보이는 사이트를 본다면 페이지를 훑어보는 처리 속도가 느려진다.

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

페이지 구역이 명확히 나뉘어 있어야 사용자가 어디에 초점을 맞출지 어떤 부분은 마음 편히 무시할지 빠르게 결정할 수 있다. 광고를 포함하고 있는 영역은 주로 사용자가 철저히 무시하는데, 배너 맹(Banner Blindness)라는 용어까지 있다.

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

일반적으로는 모든 텍스트 링크를 하나의 색상으로 입히거나 클릭해도 된다는걸 형태나 위치로 구분할 수 있게 한다. 대신, 이렇게 하면 클릭이 안되는 요소는 클릭될 것 같은 색상이나 형태, 위치를 가져서는 안된다.

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

시각적 잡음(Visual Noise)은 페이지 이해를 방해한다. 읽으려던 페이지에 동영상이 있으면 동영상을 포스트잇으로 가리는 사용자도 있다고 한다.

시각적 잡음은 세 종류로 나뉜다.

• 시끄러움: 페이지에 너무 많은 요소들이 주의를 끌기 위해 아우성을 친다. 하지만 모든 요소가 다 중요할 리는 없다. 사용자를 안내할 시각적 계층 구조의 기준이 될 가장 중요한 요소를 선정하라.
• 무질서: 온갖 요소가 사방에 흩어져 있는 페이지. 페이지 요소를 기준선에 따라 배열해야 한다.
• 어수선함: 너무 많은 내용을 담은 페이지. 전문용어론 신호 대 잡음 비(signal-to-noise ratio)가 낮은 페이지다.

웹 페이지를 편집할 때는 모든 것이 시각적 잡음이라고 가정하고 시작하라. 즉, 진짜 도움이 되는 부분만 남기고 나머지는 모두 없애라. 사용자의 시간과 주의력엔 한계가 있다.

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

• 제목을 많이 넣어라: 각 섹션에 어떤 내용이 담겨 있는지 보여주면 사용자가 읽어야할 부분인지, 건너 뛰어야할 부분인지 판단하는데 도움을 준다. 제목이 여러 수준으로 나뉜다면, 수준 간에 누구나 명확히 알아볼 수 있는 차이를 둬야 한다.
• 단락의 길이를 짧게 유지하라: 단락이 길어지면 벅차다는 느낌이 든다. 짧은 단락 여러 개를 훑어보는게 긴 단락 하나를 훑는것 보다 쉽다.
• 불릿 목록을 사용하라: 불릿 목록으로 만들 수 있는 항목이라면 가급적 만드는 것이 좋다. 불릿 목록 사이에는 추가 공간이 약간 있어야 한다.
• 주요 용어를 강조하라: 페이지를 훑어볼 때 주로 찾는 것은 중요한 단어나 구절이기 때문에, 가장 중요한 단어가 본문에 처음 등장할 때는 굵게 표시한다. 물론 너무 많은 항목을 강조하면 효과가 떨어지니 남용하지 않는다.