방어형 웹사이트 기획

에러 메시지, 도움말, 입력폼 등을 개선하여 고객이 처한 위기 상황을 극복하는 방어형 웹사이트를 만들자!

- 40개의 핵심 가이드라인을 통해 흔히 저지르는 오류를 방지하고, 문제가 생긴 고객을 친절하게 이끌어 줄 수 있습니다.
- 수많은 실제 사례를 통해 아마존, 구글 같은 회사가 위기 상황을 어떻게 처리하는지 볼 수 있습니다.
- 사이트 자체 점검을 쉽게 할 수 있는 테스트를 통해 멀리 내다보고 사이트를 개선할 수 있는 방법을 알 수 있습니다.

저자 : 37시그널즈 (매튜 린더만, 제이슨 프라이드)

37시그널즈(www.37signals.com)는 시카고에 기반을 둔 웹디자인/웹사용성 전문가 팀으로서, 단순하면서도 사용성이 높고 철저하게 고객 중심으로 디자인하는 걸 목표로 한다. 37시그널즈는 DesignNotFound.com 웹사이트와 다양한 기사를 통해서 위기대응 고려설계와 방어고려설계 개념을 많은 사람에게 알렸다. 또한 다양한 컨퍼런스와 많은 회사에서 워크샵과 프리젠테이션을 했다.
37시그널즈의 고객에는 마이크로소프트, 퀘스트, 클리어채널, 몬스터닷컴, 파네라 브레드, 밋업, 퍼포먼스 바이크, 트랜스포테이션닷컴 등이 있다. 그들의 작업은 뉴욕타임스, 워싱턴 포스트, CNN 등에서 보도했으며 다양한 출판물에 소개됐다. AIGA Risk/Reward, Activ8, South By Southwest, HOW 디자인 컨퍼런스, ForUse 등 컨퍼런스에서도 강사로 활약한 바 있다. 더 자세한 정보는 www.37signals.com에서 볼 수 있다.
이 책은 37시그널즈의 매튜 린더만과 제이슨 프라이드가 썼으며, 집필에는 관여하지 않았지만 37시그널즈의 멤버로 라이언 싱어와 스콧 업튼 등이 있다.

기술 감수 : 토비 브라운

정보 아키텍처와 웹 인터페이스 디자인에 특화된 정보 디자이너이다(www.tbid.com). 그는 이 책이 출간되기까지의 모든 과정 동안 그의 전문적인 경험을 아낌없이 제공했다. 책을 쓰는 동안 관련된 기술 사항과 책의 구성과 흐름에 대해 감수를 했으며, 독자들에게 이 책에 실린 기술 정보를 쉽게 이해시키는 데 그의 피드백이 매우 중요한 역할을 했다.
그의 디자인 스타일의 특징으로는 단순성, 사용용이성, 높은 가독성을 들 수 있다. 이전에는 광고 아트 디렉터로 활동했으며, CAD와 인터랙티브 마케팅 전략 관련 에반젤리스트로도 활동했다. MIT 미디어 랩, 컬럼비아 대학, 시카고 아트 인스티튜트 등에서 강의를 하고 있다. 토비의 작업과 글은 IEEE 스펙트럼, ProjectCool.com, Suck.com 등의 웹사이트와 Information Week, Yahoo! Internet Life, Entertainment Weekly 등의 잡지에 실린 바 있으며, 그는 20년 이상의 디자인 경력을 지니고 있다.

역자 : 박수만

명지대학교와 대학원에서 소프트웨어공학을 전공했다. 『실용예제로 배우는 웹표준』을 비롯한 웹표준 3종 세트를 한국에 소개한 이후로 하루가 멀다 하고 웹표준에 다가가는 국내 인터넷을 보면서 흐뭇해하는 그는 현재 미투데이에 몰입해 있다.
http://me2day.net/sumanpark으로 가서 책 얘기를 꺼내며 친구신청을 하면 기쁘게 맞아줄 것이다.

1장. 방어형 웹디자인에 대하여: 실수를 극복하는 방법 2

들어가면서 3
누구나 완벽할 수는 없다 5
왜 “방어 디자인”을 해야 하는가 5
위기 상황 5
위기대응 디자인을 통한 해법 8
성공 사례 9
이 책에서 다루는 내용 11
이 책에서 다루지 않는 내용 12
이 책을 반드시 읽어야 하는 사람 12
이 책의 활용법 13
가이드라인 미리 보기 13
융통성을 발휘하자 15
마지막 권고사항: 사용자가 아니라 사람을 보라 15
시작해보자 15

2장. 문제점을 드러내라: 명백한 오류이유를 명확하게 표시하라 16

들어가며 17
가이드라인 1: 한눈에 알아볼 수 있는 에러 메시지를 제공하라 18
가이드라인 2: 색상, 아이콘, 텍스트 등을 사용해서 문제 발생 영역을 눈에 띄게 강조하라 24
가이드라인 3: 오류를 알릴 때는 일관된 방법을 항상 유지하라 28
가이드라인 4: 앞뒤로 반복해서 이동되지 않게 하라 31
비교체험 극과 극: 폼 입력 항목을 누락한 경우 34
요약 36

3장. 알아들을 수 있게 설명하라: 명확한 사용설명법을 제시하라 38

들어가며 39
가이드라인 5: 고객이 생소하게 느낄 만한 언어를 사용하지 말라 41
가이드라인 6: 설명문은 될 수 있...1장. 방어형 웹디자인에 대하여: 실수를 극복하는 방법 2

들어가면서 3
누구나 완벽할 수는 없다 5
왜 “방어 디자인”을 해야 하는가 5
위기 상황 5
위기대응 디자인을 통한 해법 8
성공 사례 9
이 책에서 다루는 내용 11
이 책에서 다루지 않는 내용 12
이 책을 반드시 읽어야 하는 사람 12
이 책의 활용법 13
가이드라인 미리 보기 13
융통성을 발휘하자 15
마지막 권고사항: 사용자가 아니라 사람을 보라 15
시작해보자 15

2장. 문제점을 드러내라: 명백한 오류이유를 명확하게 표시하라 16

들어가며 17
가이드라인 1: 한눈에 알아볼 수 있는 에러 메시지를 제공하라 18
가이드라인 2: 색상, 아이콘, 텍스트 등을 사용해서 문제 발생 영역을 눈에 띄게 강조하라 24
가이드라인 3: 오류를 알릴 때는 일관된 방법을 항상 유지하라 28
가이드라인 4: 앞뒤로 반복해서 이동되지 않게 하라 31
비교체험 극과 극: 폼 입력 항목을 누락한 경우 34
요약 36

3장. 알아들을 수 있게 설명하라: 명확한 사용설명법을 제시하라 38

들어가며 39
가이드라인 5: 고객이 생소하게 느낄 만한 언어를 사용하지 말라 41
가이드라인 6: 설명문은 될 수 있는 한 간결하고 이해하기 쉽게 쓴다 47
비교체험 극과 극: 위기 상황을 위한 카피라이팅 52
가이드라인 7: 예의바른 태도를 유지한다 55
요약 59

4장. 완벽한 입력폼을 제공하라: 쉽게 완성할 수 있는 고객 친화적인 입력폼을 만들라 60

들어가며 61
가이드라인 8: 필수 입력 항목과 선택 입력 항목을 구분해서 표시하라 62
가이드라인 9: 통상적인 표시형식을 모두 받아들여라 65
가이드라인 10: 입력 예제, 풀다운 메뉴, 입력형식 힌트를 제공해서 깔끔한 데이터를 받으라 68
가이드라인 11: 글자 개수나 숫자 범위 등의 제약 사항을 명시적으로 설명하라 74
비교체험 극과 극: 메시지 길이 제한 78
가이드라인 12: 고객이 선택하지 않은 것은 보여주지 말라 80
가이드라인 13: 가능한 한 빨리 입력내용을 검사하라 85
가이드라인 14: 재입력 버튼을 없애고, 전송 버튼은 한 번 클릭한 후에는 다시 눌리지 않게 하라 90
가이드라인 15: 폼 정보 유실을 막기 위해 폼 정보를 저장하라 96
요약 101

5장. 없는 걸 요청할 때를 대비하라: 존재하지 않는 페이지/이미지/플러그인을 찾을 때의 대처방법 102

들어가며 103
가이드라인 16: “페이지를 찾을 수 없습니다” 페이지를 직접 만들라 104
비교체험 극과 극: 철자법이 틀린 주소 108
가이드라인 17: 잘못 입력한 주소에 있는 페이지와 유사한 곳으로 자동이동하라 111
가이드라인 18: 이미지에 ALT 태그 사용하기 117
가이드라인 19: 구식 버전을 쓰는 사용자들을 막지 말라. 대처할 수 있는 버전을 준비하고 업그레이드 관련 정보를 제공하라 120
요약 125

6장. 도움의 손길을 내밀어라: 실질적으로 도움이 되는 도움말 제공하기 126

들어가며 127
가이드라인 20: 문제가 발생한 페이지 내에서 해결책을 제시하라 128
가이드라인 21: 쉽게 이용할 수 있는 도움말 영역과 명확한 링크를 제공하라 133
가이드라인 22: 온라인 토론방이나 교육과정을 통해서 고객들이 서로 도울 수 있게 하라 140
가이드라인 23: 채팅, 전화, 이메일 등 사람이 직접 개입하는 지원 대책을 구비하라 144
가이드라인 24: 이메일 응대는 빠르고 효율적으로 148
가이드라인 25: 짧은 설명과 이메일을 활용해서 로그인 과정을 도우라 153
요약 156

7장. 불필요한 건 치워버려라: 충성도 높은 회원이 되는 데 장애 요소가 될만한 것들을 제거하라(불필요한 광고, 회원 가입, 사이트 이동 등) 158

들어가며 159
가이드라인 26: 웹 브라우저의 “뒤로 가기” 버튼 기능을 죽이지 말라 160
가이드라인 27: 예쁘게 만들기보다는 빠르게 돌아가게 하라 164
가이드라인 28: 회원 가입을 강제하지 말라 168
가이드라인 29: 컨텐트를 보는 데 광고가 방해가 되지 않게 하라 171
가이드라인 30: 여러 단계로 이뤄진 과정 중에 불필요한 내비게이션을 제거하라 176
요약 179

8장. 필요한 걸 찾을 수 있게 하라: 똑똑한 검색엔진 지원을 통해 올바른 검색 결과 제공하기 180

들어가며 181
가이드라인 31: 검색 결과가 없거나 정확하게 일치하지 않을 때 명확한 설명을 제공하라 182
비교체험 극과 극: 검색 결과가 없는 경우 186
가이드라인 32: 흔히 발생할 수 있는 실수에 미리 대비하고 관련된 결과를 제공하라 188
비교체험 극과 극: 흔히 저지르는 실수 191
비교체험 극과 극: 검색어 철자를 잘못 입력한 경우 194
가이드라인 33: 검색 결과가 너무 많은 경우, 해당 결과를 정제하고 걸러낼 수 있는 기능을 제공하라 196
비교체험 극과 극: 검색 결과가 너무 많아 208
가이드라인 34: 검색 결과가 없을 경우 검색을 확장할 수 있는 기능을 제공하라 211
가이드라인 35: 검색 결과를 향상시킬 수 있는 팁을 제공하라 214
가이드라인 36: 고급검색 기능에 의존하지 말라 217
요약 220

9장. 재고가 없는 상품을 찾을 때 대처방법: 재고가 없다고 그걸로 끝나게 해서는 안 된다 222

들어가며 223
가이드라인 37: 주문불가 품목이라는 사실을 명확하게 설명하라 224
가이드라인 38: 추후에 주문가능한 제품이라면 주문가능한 일자와 제품상세 정보를 제공하고, 예약주문을 할 수 있게 하라 228
비교체험 극과 극: 주문할 수 없는 품목 230
가이드라인 39: 이메일 공지를 하라 232
가이드라인 40: 선택할 수 있는 유사한 제품을 제시하라 237
비교체험 극과 극: 등록불가능한 도메인명 242
요약 244

10장. 위기대응지수 테스트: 우리 사이트는 몇 점일까? 246

들어가며 245
누가 이 테스트를 진행할 것인가? 245
여타 사용성 테스트와 다른 점 246
점수 계산방법 246
위기 상황 디자인 테스트 247
점수 계산하기 251
순위 살펴보기 251

맺음말. 방어형 웹사이트 기획을 마치며: 멀리 내다보고 달성해야 할 위기대응 설계 254

들어가며 255
고객지원 요청사항 분석 256
피드백 확보 256
서버 로그 분석 261
외부 자문과 의견 수렴 261
위기대응 디자인 전임자 구비 262
지식 데이터베이스 구축 262
문제 상황 대처자세 263
결론: 한 번에 한 단계씩 263