도서관에서 웹 사이트 만들기에 관련된 책을 빌려 읽었는데요.
원제 Don’t make me think 의 2번째 개정판 “상식이 통하는 웹사이트가 성공한다” 와 3번째 개정판 “(사용자를) 생각하게 하지마” 입니다.
저자 스티브 크룩은 사용자 입장에서 웹 사이트를 평가하고 개선 사항을 알려주는 일을 하는데요.
이 책에서 웹 사이트를 만드는데 필요한 중요한 규칙들을 알려주고 있습니다. 책의 주요 내용과 제 생각을 포스팅 합니다.
제 1 장 – 사용자를 고민에 빠드리지 말자
사용자가 웹페이지를 보는 순간 무슨 웹 페이지이고 어떻게 사용해야 하는지를 생각할 필요 없이 바로 알 수 있게 해줘야 합니다.
제 아내가 이마트, 롯데마트, 홈플러스 사이트를 자주 이용하는데요. 유독 홈플러스 사이트에서 분통을 터트리는 경우가 종종 있습니다.
< 홈플러스 사이트 >
홈플러스 마트(1)에서 ‘라면’을 검색하면 검색결과(2)를 보여주는데요. 마트에서 검색했는데도 몰까지 포함된 통합검색 결과(3)를 보여줍니다.
가장 이상한 결과는 (4)번에 X 표시입니다. 아래 내용은 화면에 보이지 않은채 X가 표시되니 순간적으로 상품이 없다고 생각했답니다.
저도 왜 디자이너가 X 표시를 사용했는지 이해할 수가 없습니다.
제 2장 – 사용자가 실제 웹을 사용하는 방법
첫 번째 진실 : 웹 사이트 제작자의 의도와 다르게 웹 사이트 사용자는 웹페이지를 읽지 않고 흝어보다가 어느정도 만족하면 대충 넘어갑니다.
대부분 사용자는 시간에 쫓기고 관심이 있거나 즉시 처리해야할 과제만 찾아다닙니다. 이미 흝어 보기에 익숙해져 있습니다.
두 번째 진실 : 사용자는 최선을 선택하지 않고 적당히 만족합니다. 사용자들은 처음 눈에 띠는 적당한 항목을 선택합니다.
찾고 있는 항목으로 연결해 줄 듯 보이는 링크를 발견하자마자 바로 클릭할 가능성이 매우 큽니다.
세 번째 진실 : 사용자는 작동방식에 관심이 없습니다. 지적 능력이 부족해서가 아니라 관심이 없어서입니다.
사용하는데 지장만 없다면 작동 방식을 이해하지 못해도 아무런 문제가 없습니다. 또한 사용자는 작동하기만 한다만 일부러 더 좋은 방법을 찾지 않습니다.
이렇게 대충 대충 웹사이트를 사용하는 사용자를 위해 사용자가 딱 보고 알만한 사이트를 만들어야 합니다.
< 롯데마트 사이트 >
롯데마트 사이트 메뉴를 통해 ‘필기도구’ 섹션 풀다운 메뉴에서 낮은 가격을 선택하면 바로 이동하지 않고 [이동]을 클릭해야 합니다.
제 아내는 11번가, 이마트 등 대부분의 사이트에서 선택을 하면 이동을 하기 때문에 처음 사용할 때 [이동]을 누를 생각을 하지 않고 기다렸다고 합니다.
또한, 매장 배송 상품만 보고 싶은데 매장 배송 상품 선택 항목이 보이지 않아 클릭해서 하나씩 둘러보라는 의도로 이해했다고 합니다.
우측 체크표시 아이콘을 클릭하면 조건별 상품 찾기 메뉴가 보이는데요. [조건별 상품찾기]와 체크표시 아이콘이 떨어져 있어 발견하지 못한 것입니다.
제 3장 – 흝어보기 좋도록 디자인 하는법
사용자들이 사이트를 대충 둘러본다는 것을 알고 있기때문에 쉽게 이해할 수 있도록 다음 사항에 유의해 사이트를 디자인해야 합니다.
- 각 페이지를 명확히 눈에 띄는 계층 구조로 만들어야 합니다.
1-1. 중요한 내용일수록 제목은 크고 굵은 서체를 적용하거나, 눈에 띄는 색을 채우거나, 넉넉한 여백을 주어 돋보이게 하거나,
페이지 상단에 가까이 둡니다.
1-2. 논리적으로 연관된 항목들은 시각적으로도 연관되도록 표시합니다.
예를들면, 함께 모아두거나 비슷한 모양으로 표시하고 명확히 구분된 구역 안에 배치하는 것입니다.
2. 관례의 형식을 따르라
2-1. 사용자는 웹 페이즈를 흝어볼 때 클릭할 수 있는 시각적 단서를 찾습니다. 시각적 단서는 버튼, 탭, 메뉴, 색상, 밑줄을 통해 드러납니다.
2-2. 로고, 메뉴, 사이드바 메뉴와 같은 관례적 형식은 사용자에게 익숙하기 때문에 안심하고 링크를 누를 수 있습니다.
3. 혼란스러울 요소를 없애라
3-1. 페이지에 있는 모든 요소가 주의를 끌기 위해 아우성을 치고 있다면 사용자에게 굉장한 부담으로 다가옵니다.
자동 슬라이드쇼, 동영상, 팝업 등 주의를 끌려는 요소가 많으면 사용자는 어느 곳에도 눈을 두지 못하고 떠나버릴 것입니다.
3-2. 웹사이트를 편집할 때는 모든 것을 시각적 잡음이라고 가정하고 시작하는 편이 좋습니다.
사용자의 시간과 주의력에는 한계가 있으므로 진짜 도움이 되는 부분만 남기고 모두 없애야 합니다.
4. 내용을 흝어보기 좋은 방식으로 구성하라
4-1. 여러분의 생각보다 제목의 수를 더 늘리고 제목과 소제목 본문을 구분하기 위해 글자 크기를 키워야 합니다.
제목 위에는 여백을 두고 제목과 본문은 가깝게 해야 합니다.
4-2. 단락의 길이를 짧게 유지 해야합니다. 짧은 단락 여러 개를 흝어보는 것보다 긴 단락 하나를 흝어보는 것이 더 어렵습니다.
4-3. 숫자, 기호등을 사용해 목록으로 만드는 편이 좋습니다. 읽기 좋게 만들기 위해 목록 사이에 여백을 추가 합니다.
제 4장 – 몇 번 클릭했는지는 중요치 않습니다. 클릭할 때마다 고민하지 않고 명쾌하게 선택하기만 한다면.
웹에서는 항상 선택을 해야 할 상황에 직면하게 됩니다.
그럴 때 고민하지 않고 선택할 수 있도록 명쾌하게 설계하는 것이 사이트 사용을 쉽게 해주는 중요 요건중 하나입니다.
제 5장 – 불필요한 단어를 덜어내라
불필요한 인사말을 덜어내야 합니다. 대체로 “..에 오신 것을 환영합니다.”라는 말로 시작하는 첫 페이지가 많습니다.
이런 말은 사교적인 활동의 일환일 뿐 내용은 없습니다. 사용자는 시간이 없습니다. 그들은 바로 본론으로 들어가길 원합니다.
장황한 설명 문구를 줄여야 합니다. 항상 모든 내용이 자명해서 설명이 없어도 이해가 되는 수준을 목표로하고 디자인 해야 합니다.
설명이 꼭 필요할 때는 양을 최소로 줄이도록 합니다.
제 6장 – 페이지 이름과 경로 표시
웹사이트에는 보통 무언가를 찾기 위해 들어갑니다. 사용자는 찾기 위해 검색을 할 지 흝어보기를 할 지 결정합니다.
흝어보기로 결정했다면 홈페이지를 전체적으로 둘러보면서 그 사이트의 주요 섹션 목록을 찾아내서 적당해 보이는 하나를 클릭합니다.
하지만 찾지 못할 경우 사이트를 떠납니다.
네비게이션의 용도 – 사이트에 어떤 내용이 있는지 알려줍니다. 깔끔하게 잘 정비된 네비게이션은 사이트에 좋은 인상을 줄 수 있습니다.
웹 네비게이션 관례 – 사이트 식별 ID(로고), 섹션(메뉴), 유틸리티(로그인, 가입하기,장바구니 등), 검색, 현재 위치, 경로표시(브레드크럼)
사용자를 홈페이지로 데려다 주는 버튼이나 링크는 웹 사이트의 가장 주요한 요소 중 하나 입니다.
< Samsung.com 첫화면 >
< Samsung.com – 제품정보 > 휴대폰/태블릿 > 스마트폰 >
페이지 이름은 적당한 위치에 있어야 하고 눈에 확 띠어야 합니다. 페이지 이름과 클릭한 링크 단어와 일치해야 합니다.
경로표시는 다른 내용보다 페이지의 최상단에 위치할 때 가장 효과적으로 보입니다. 경로 표시는 단지 엑세서리일 뿐이니 작은 폰트를 사용하세요.
마지막 항목은 현재 페이지의 이름이니 눈에 잘 띄도록 굵게 표시하는 게 적절합니다.
탭은 네비게이션으로 사용하기에 가장 휼륭해 보입니다. 섹션(메뉴)에 탭을 쓸거라면 올바르게 사용해야 합니다.
활성화된 탭이 다른 탭보다 앞으로 나와 있는 듯한 착시 효과를 내야 진짜 탭 같은 느낌이 납니다.
활성화된 탭의 색상을 다르게 하거나 탭 아래 공간과 끊어지지 않게 만들어야 이런 효과가 납니다.
제 7장 – 홈페이지 디자인
사이트 로고와 태그라인 – 홈페이지에 들어가자마자 이 사이트가 어떤 사이트이며, 사이트의 목적이 무엇인지를 단번에 알 수 있어야 합니다.
사이트 계층구조(메뉴) – 여기서 무엇을 찾을 수 있는지와 무엇을 할 수 있는지 알려줘야 합니다.
검색 – 홈페이지에서 검색창은 눈에 잘 띄는 곳에 배치해야 합니다.
관심끌기 – 잡지표지처럼 홈페이지도 안에 ‘보물’이 그득하다는 암시를 줘서 사용자의 관심을 끌어야 합니다.
가장 새롭고 가장 인기 있으며 질 높은 컨텐츠에 이목을 집중시켜 컨텐츠를 선전해야 합니다.
제휴광고 – 홈페이지에는 광고, 배너교환, 협력브랜드 등을 위한 공간이 마련되어야 합니다.
잊어서는 안 되는 중요한 요소는 전체적인 그림을 보여주는 것입니다.
< kickstarter.com – 프로젝트 크라우드 펀딩사이트>
저자는 새로운 사이트에 처음 들어가면 4가지 질문이 떠오른다고 합니다.
- 이 사이트는 어떤 사이트일까 ?
- 이 사이트에서 무엇을 할 수 있지 ?
- 이 사이트에는 어떤 것들이 있을까 ?
- 다른 사이트를 제쳐두고 이 사이트를 애용할 이유가 있을까 ?
홈페이지가 잘 구성되었는지 평가하려면 처음 접속한 사람의 입장에서 이 네 가지 질문에 되도록 빠르고 정확하게 답할 수 있는지 점검해 봐야 합니다.
현재의 사용자들은 링크를 통해 사이트 한가운데로 순간이동해 접속한 페이지를 둘러봅니다.
그 다음에 가장 많이 하는 행동은 자신이 있는 위치를 확인하기 위해 홈페이지를 방문합니다.
홈페이지 태그라인은 한 기업의 특징을 설명하는 함축적인 한 구절을 가리킵니다.
좋은 태그라인은 명확하고 유익하며 여러분이 만든 사이트나 여러분이 몸담은 조직이 하는 일을 정확하게 설명합니다.
< zipcar.com – 시간당으로 차를 빌릴수 있는 사이트 >
워드프레스로 만든 사이트도 결국 웹 사이트이기 때문에 이 책의 내용이 많은 도움이 되었습니다.
이 책의 내용을 참고해 국내 해외 사이트 들을 살펴보니 몇몇 사이트는 이 책을 보고 만들었나 하는 생각이 들 정도입니다.
워드프레스는 유료테마를 사용해 위에서 설명한 내용들을 웹 사이트 디자인에 쉽게 적용할 수 있어 다행입니다.
