서비스의 성패를 가르는 디테일부터 전략까지,
성공적인 서비스를 위한 디자인 가이드!

디자인과 사용성을 다루는 책은 이미 수없이 많다. 하지만 구체적인 방안이 생략된 추상적인 원리나 깊이 없는 얄팍한 요령만 늘어놓은 책들은 올바른 UX를 만드는 데 아무런 도움을 주지 못한다. 그에 반해 이 책은 비밀번호 입력 필드와 같은 디테일부터 사용자 테스트, 고객 여정 설계에 이르는 폭넓은 UX 문제에 대한 명확한 답을 제공한다. 입문자부터 경험 많은 전문가까지 흥미롭게 읽을 수 있는 으로 더 나은 고객 경험을 고민한다면 일독을 강력히 권한다.

[목 차]

1장. 누구나 UX 전문가가 될 수 있다
2장. 두 가지 이상의 서체를 사용하지 마라
3장. 사용자의 컴퓨터에 설치된 폰트를 사용하라
4장. 글자 크기를 사용해서 정보 체계를 표현하라
5장. 본문에는 합리적인 기본 크기를 사용하라
6장. 줄임표를 사용해서 다음 단계가 있다는 것을 알려라
7장. 버튼을 버튼처럼 보이게 만들어라
8장. 버튼을 적절한 크기로 만들고, 기능에 따라 그룹핑하라
9장. 텍스트만이 아니라 버튼 전체가 클릭 가능하게 만들어라
10장. 새로운 컨트롤을 제멋대로 만들지 마라
11장. 검색은 입력 필드와 ‘검색’이라고 적힌 버튼으로 구성돼야 한다
12장. 슬라이더는 수량화할 수 없는 값에만 사용해야 한다
13장. 정확한 숫자를 위해서는 숫자 입력 필드를 사용하라
14장. 옵션이 많지 않다면 드롭다운 메뉴를 사용하지 마라
15장. 사용자가 파괴적인 액션을 취소할 수 있게 하라
16장. 스크린에서 살짝 벗어난 것들을 고려하라
17장. 피드 스타일의 콘텐트에서만 ‘무한 스크롤’을 사용하라
18장. 콘텐트에 시작, 중간, 끝이 있다면 페이지 번호 매김을 사용하라
19장. 무한 스크롤을 사용해야 한다면, 사용자의 위치를 기억하고 그곳으로 돌려보내라
20장. ‘빈 공간’을 단순한 백지 상태 이상의 것으로 만들어라
21장. ‘시작하기’ 팁은 닫기 쉽게 만들어라
22장. 사용자가 피드를 ‘새로고침’하면, 읽지 않은 가장 최신 항목으로 이동시켜라
23장. 항목들을 ‘햄버거’ 메뉴 속에 숨기지 마라
24장. 링크를 링크처럼 보이게 만들어라
25장. 메뉴 항목을 하위 섹션으로 나눠서 사용자가 긴 목록을 기억할 필요가 없게 하라
26장. 대부분의 사용자에게는 ‘고급’ 설정을 감춰라
27장. 메뉴 항목을 바닥글이나 뷰 하단에 반복 배치하라
28장. 제품 전반에서 일관된 아이콘을 사용하라
29장. 한물간 아이콘을 사용하지 마라
30장. 기존 아이콘으로 신규 아이디어를 표현하려고 하지 마라
31장. 아이콘 위에 텍스트를 쓰지 마라
32장. 항상 아이콘에 텍스트 레이블을 제공하라
33장. 이모티콘은 세상에서 가장 널리 알려진 아이콘이다
34장. 가급적 기기의 기본 입력 기능을 사용하라
35장. 필드에서 비밀번호를 숨기되, ‘비밀번호 표시’ 토글을 제공하라
36장. 비밀번호 필드에 붙여넣기를 허용하라
37장. 이메일 주소를 인증하려고 하지 마라
38장. 명확한 요구가 있지 않다면 사용자가 입력한 데이터를 절대 지우지 마라
39장. 여러 줄의 입력 필드에 맞는 적절한 크기를 선택하라
40장. 사용자가 사용하려고 할 때 UI가 움직여선 안 된다
41장. 한 가지의 데이트 피커 컨트롤을 일관되게 사용하라
42장. ‘비밀번호 찾기’ 필드에서 사용자 이름을 미리 채워라
43장. 대소문자를 구분하지 마라
44장. 좋은 폼 경험을 제공한다면, 사용자들은 당신의 제품을 사랑하게 될 것이다
45장. 가능한 한 빨리 데이터 입력을 검증하라
46장. 폼을 검증하지 못한다면, 어떤 필드에 주의를 기울여야 하는지를 사용자에게 보여라
47장. 너그러워져라 - 사용자는 어떤 데이터를 넣어야 하는지 모른다(그리고 신경도 안 쓴다)
48장. 작업에 적합한 컨트롤을 선택하라
49장. 사용자가 원하는 대로 전화번호를 입력할 수 있게 하라
50장. 날짜 입력에서 드롭다운을 현명하게 사용하라
51장. 지불 카드 정보를 요구할 때에는 최소한의 정보만 받아라
52장. 우편 또는 ZIP 코드 입력을 쉽게 만들어라
53장. 통화 입력에서 소수 자리를 덧붙이지 마라
54장. 사용자가 어려움 없이 이미지를 추가할 수 있게 하라
55장. 소요 시간이 확실한 태스크라면 ‘직선 형태의’ 진행 표시줄을 사용하라
56장. 소요 시간을 가늠할 수 없는 태스크라면 ‘스피너’를 보여 줘라
57장. 애니메이션되고 반복되는 진행 표시줄은 절대로 사용하지 마라
58장. 진행 표시줄에 숫자로 된 인디케이터를 제공하라
59장. 명암비는 당신 편이다
60장. ‘플랫 디자인’을 사용해야 한다면 컨트롤에 시각적 어포던스를 추가하라
61장. 애매모호한 기호를 피하라
62장. 링크는 콘텍스트와 분리해도 의미가 통하게 만들어라
63장. 헤더와 내비게이션 위에 ‘콘텐트로 건너뛰기’ 링크를 추가하라
64장. 컬러만 사용해서 정보를 전달하지 마라
65장. 메타 태그를 써서 기기의 줌 기능을 끄는 것은 악랄한 행위다
66장. 내비게이션 요소에 타당한 탭 순서를 부여하라
67장. 컨트롤에 명확한 레이블을 적어라
68장. 사용자가 특정 알림을 끌 수 있게 하라
69장. 탭 가능 영역을 손가락 크기로 만들어라
70장. 사용자 여정에는 시작, 중간, 끝이 있어야 한다
71장. 사용자는 모든 여정에서 자신이 어느 단계에 있는지 항상 알아야 한다
72장. 이동 경로 내비게이션을 사용하라
73장. 사용자가 선택적 여정 중이라면 ‘건너뛰기’ 컨트롤을 제공하라
74장. 사용자들은 당신의 회사에 관심이 없다
75장. e-커머스의 표준 패턴을 따르라
76장. 사용자의 작업이 저장되지 않았다면 타이틀 바에 인디케이터를 표시하라
77장. 사용자에게 앱을 평가하라고 괴롭히지 마라
78장. 무의미한 스플래시 화면을 사용하지 마라
79장. 당신의 파비콘을 독특하게 만들어라
80장. ‘기존에서 만들기’ 흐름을 추가하라
81장. 사용자가 쉽게 지불할 수 있도록 만들어라
82장. 검색 결과를 섹션으로 분류하라
83장. 사용자들은 파일 시스템을 이해하지 못할 것이다
84장. 말하지 말고 보여 줘라
85장. 용어를 일관되게 사용하라
86장. ‘로그 인’과 ‘로그 아웃’이 아닌 ‘사인 인’과 ‘사인 아웃’을 사용하라
87장. ‘등록’보다 ‘사인 업’이 더 낫다
88장. 애매한 말이 아닌 ‘비밀번호 찾기’를 사용하라
89장. 사람이 쓴 것처럼 작성하라
90장. 수동보다 능동태 동사를 선택하라
91장. 검색 결과 페이지 맨 위에 가장 관련성이 높은 결과를 표시해야 한다
92장. 알맞은 기본값을 선택하라
93장. 사용자의 기대에 어긋나지 마라
94장. 적절한 기본값을 사용해서 사용자가 완료해야 하는 태스크의 수를 줄여라
95장. 기존 메타포를 기반으로 만들어라 - 이건 절도가 아니다
96장. 인터랙션이 명확해야 하는지, 쉬워야 하는지 아니면 가능해야 하는지 결정하라
97장. ‘모바일에서 작동하는가?’라는 말은 구식이다
98장. 메시징은 이미 해결된 문제다
99장. 브랜드는 다 헛소리다
100장. 어둠의 세력에 합류하지 마라
101장. 실제 사용자들과 함께 테스트하라
보너스 - 단순함을 위해 노력하라

[본 문]

101가지 원칙은 디지털 제품 디자인을 위한 광범위한 가이드라인이다. 수천 개의 원칙이 더 있겠지만, 이 책은 대다수의 제품을 사용하기 쉽고 효과적으로 만들어 줄 핵심 원칙을 다룬다. 이 원칙이 당신의 시간을 절약하고 사용자를 더 행복하게 만들 것이다.

웹 성숙도가 높아지는 과정의 어딘가에서 우리는 중요한 것을 잊었다. 사용자 경험은 예술이 아니라 그 정반대에 있다. 사용자 경험(UX, User Experience) 디자인은 사용자에게 도움을 줘야 한다. 좋아 보여야 하지만 작업에 방해가 돼서는 안 된다. 열악한 디자인은 수년 간 영향을 끼쳐왔고, 일부 디지털 제품은 조금씩 더 나빠졌다. 어쩌다 이 지경이 된 것일까?

브랜딩 에이전시(branding agency)가 관여된 경우, 에이전시는 우리가 사진을 '추억'이라 부르기 때문에 사진 메뉴 또한 추억이라고 불러야 한다고 주장한다. 사진 메뉴를 추억이라고 부른다면 그게 무엇을 의미하는지, 사진을 어떻게 찾아야 할지 아무도 모른다.

최고경영자(CEO)가 회사와 관련한 모든 곳의 제목에 바닷바람의 색조를 사용하도록 직접 선택했고, 그 결과 모든 제목은 옅은 파란색이 됐다. 결국 모바일 폰 화면의 흰 배경에서는 아무도 제목을 읽을 수 없게 된 것이다.

마케팅 부서는 전체 화면 크기의 팝업을 띄워서 사용자의 이메일 주소를 수집하는 것이 4분기 고객관계관리(CRM) 지표로 적합하다고 결정했다. 그 후 그들은 "고객이 팝업을 닫으면 안 되니까 닫기 아이콘을 너무 크게 만들지 말아요"라고 말했다.

웹 도처에서 발견할 수 있는 이 세 가지 간단한 예에서 회사는 사용자 니즈를 고려하지 않고, 사용자를 우선시하지 않았다는 것을 알 수 있다. 지난 20여 년간, 나는 디지털 제품 디자인에서 많은 것을 배웠다. 이 모든 교훈이 머릿속에서 하나의 커다란 UX 운영 체제로 집대성된 것처럼 느껴지기 때문에 개별 교훈을 하나씩 뽑아내기는 어렵다.

내 자신이 디자인 순수주의자임을 인정하는 것은 부끄럽지 않다. 물론 미학을 중시하지만 이를 '불만족 요인(hygiene factor)'인 동시에 필수품으로 본다. 나는 미학의 겉치장을 넘어서 기능이 분명하거나, 쉽게 발견하고 이해할 수 있는 편리하고 강력한 소프트웨어를 만들고자 항상 노력해왔다.

이 책은 경험이 부족한 디자이너에게 '성공으로 향하는 지름길'이며, 경험 많은 UX 전문가에게는 일반적으로 받아들여지는 생각에 대한 도전이다.

그 원칙은 서체, 컨트롤, 여정, 일관성과 같은 폭넓은 섹션과 다양한 분야의 UX 사례로 구성된다. 이 책을 마음대로 들춰보고 참고서로 활용해라. 순서대로 꼼꼼하게 읽도록 디자인했지만, 읽는 순서는 상관없다.

아마 몇 가지 원칙은 동의할 수 없을지도 모른다. 하지만 의견 차이는 기존 생각을 점검하고, 사용자의 목표를 달성하는 데 더 좋은 방법이 있을지를 다시 고려해보게 만드는 계기가 될 것이다.

이 책을 즐겼으면 좋겠다. 더 좋은 UX 전문가가 되는 데 이 책이 도움을 줘서 여러분이 효과적인 경험을 구현하고, 일반적인 함정에 빠지지 않고, 자신감을 쌓아서 사용자를 위해 싸울 수 있길 바란다.
('지은이의 말' 중에서)

공들여 입력했더니 화면에는 8자 이상의 알파벳과 숫자, 특수 문자의 조합을 강요하는 비밀번호 설정이 뒤늦게 뜹니다. 나도 모르게 최근 배송지가 자동으로 선택돼서 집으로 받아야 할 물건을 회사로 보내게 만든 주문/결제 화면을 마주할 때도 있습니다.

이처럼 온라인에서 우리를 힘들게 하는 경우는 셀 수 없을 만큼 많습니다. 대개 자신의 부주의를 먼저 탓하지만, 사실 이 문제의 원인은 사용자가 아닙니다. 사용자가 아닌 회사의 입장만 살피며 기존 업무 방식을 고집하는 모든 이가 이에 대한 책임을 사이좋게 나눠 가져야 할 듯 합니다. 물론 사용자 경험(UX)을 담당하는 이른바 UXer의 책임이 가장 큰 것은 당연합니다. UXer는 왜 아직도 이런 일이 벌어지게 놔두는 걸까요? 신입이거나 아직 경력이 길지 않다면 어떤 디자인이 사용자를 위한 것인지 몰라서 그랬다고 변명할 수도 있고, 어느 정도 연차가 쌓였다면 마케터나 개발자가 자신의 말을 들어주지 않았다며 남을 탓할 수도 있습니다. 몰라서 못하거나 어렴풋이 알지만 제대로 디자인하지 못한 경우 모두 '끔찍한 UX'의 책임에서 자유로울 수 없습니다. 올바른 가이드라인을 체계적으로 학습하고, 이를 실무에 적용하면서 좋은 UX를 직접 경험하는 과정이 필수적입니다.

이 책은 UXer가 반드시 알아야 할 드롭다운 메뉴나 비밀번호 표시와 같이 놓치기 쉬운 사소한 디테일부터 사용자 여정 설계, 사용자 테스트에 이르는 다양한 주제를 폭넓게 다룹니다. 현실감 없는 교과서적인 기본 개념을 늘어놓는 것이 아니라, 실무에 근거한 생생한 원칙과 구체적인 팁을 우수 사례를 곁들여 알기 쉽고 흥미롭게 풀어 나갑니다. 디자인 결정이 필요한 순간에 실질적인 도움을 주는 UX 필수 매뉴얼로서 쓰기 편한 제품/

서비스 설계에 꼭 필요한 기초를 다지고 응용해 나갈 수 있는 기회를 제공합니다. UX를 공부하는 학생은 물론, UX 업무를 담당하거나 흥미를 가진 모든 분에게 유용한 지식과 깨달음을 줄 것으로 기대합니다. 이 책을 읽고 사용자를 먼저 생각하고 배려하는 진정한 UXer로 거듭나길 바랍니다.
('옮긴이의 말' 중에서)

[이 책에서 다루는 내용]

- 적절한 서체를 사용해 텍스트의 가독성 확보
- 인터랙션을 간소화하는 컨트롤 디자인
- 콘텐트의 이해를 돕는 내비게이션 제작
- 일관된 아이콘과 함께 정보 전달하기
- 사용자의 입력을 효과적으로 처리하는 방법
- 사용자에게 진행 상황 알리기
- 시각 장애나 신체 장애가 있는 사용자도 쓸 수 있는 인터페이스 제공
- 사용자를 이해하고 기대에 부응하기

[이 책의 대상 독자]

이 책은 소프트웨어 제품을 디자인하는 모든 사람을 위한 것이다. 대상 독자는 디자이너, UX 전문가 혹은 제품 UX의 의사결정권자일 수도 있다. 이 책에 소개된 원칙은 제품을 향상시키고, 사용자 니즈를 더 효과적으로 충족시키도록 돕는다.

이 책에 등장하는 다양한 사례에는 모바일 앱, 웹사이트, 웹앱 혹은 데스크톱 소프트웨어를 포함하지만, 이 원칙들은 차량 UI(User Interface), 모바일 게임, 조종실 제어부터 세탁기, 그리고 그 사이에 존재하는 모든 것에 이르는 광범위한 범위의 애플리케이션에 적용될 수 있다.

- UX를 공부하는 학생
- 초보/신입 디자이너, 기획자, 개발자 등의 UXer
- 좋은 사례와 불변의 원칙을 꾸준히 참고해야 하는 중급 이상의 UXer
- 웹과 모바일 중심으로 부담 없이 공부하고 싶은 UXer

추천사


"처음부터 끝까지 읽을 만한 가치가 있으며, 유려하게 쓴 글은 즐겁다. 각 장은 제대로 고민해 본 적 없던 원칙을 다시 생각해 보게 한다. 대수롭지 않게 생각하던 몇 가지 원칙을 명확하게 표현해야겠다는 자극을 받았다."
- 엘리자베스 처칠(Elizabeth Churchill) / Google UX 디렉터

"이 책은 훌륭한 실용서다. 현업에서 UX 문제를 해결할 때 참고서로 사용하기 좋다. UX 입문서로 강력 추천하며, 경험 많은 디자이너에게는 모범 사례를 상기시켜 주는 역할을 할 것이다."
- 앤 마리 레제(Anne-Marie Leger) / Shopify 디자이너

"기분 좋게 만들고 활기를 불어넣는다. 경기 전에 스포츠 코치가 해주는 좋은 응원의 말처럼, 윌은 우리 모두가 흔히 겪게 되는 위험 상황을 피할 수 있도록 다시 한번 알려 준다."
- 케이트 핀콧(Kate Pincott) / Facebook 디자이너

윌 그랜트(Will Grant)
영국의 UI/UX 전문가이자 디지털 제품 디자이너다. 20년 이상의 경력을 지닌 웹 기술 사업가로, 기술과 사용성의 교차점에서 팀과 제품을 이끌고 있다. 컴퓨터 과학 학위를 딴 후, 디자인 사용성의 세계적인 리더인 닐슨노먼그룹(Nielsen Norman Group)에서 제이콥 닐슨(Jakob Nielsen)과 브루스 토냐치니(Bruce Tognazzini)와 함께 교육을 받았다. 그 이후에 사용자가 10억 명에 이르는 여러 대규모 웹 사이트와 앱의 사용자 경험 및 인터랙션 디자인을 맡았다. ‘디자인 순수주의자’이며, 고객이 직관적으로 사용법을 알 수 있는 아름답고 매력적이며 친숙한 제품에 집 착한다.

옮긴이 심규대
디자인 리서치의 가치를 믿는 UX 디자이너. KAIST 산업디자인학과를 졸업하고 동대학원에서 인터랙션 디자인 전공으로 공학석사 학위를 받았다. LG전자 단말연구소에서 UX 연구원으로 일하면서 모바일 폰 UI 기획과 사용성 테스트, 사용자 리서치에 이르는 폭넓은 영역에서 깊이 있는 실무 경험을 쌓았다. 이후 SK텔레콤에서 다양한 서비스의 모바일과 웹 UX 설계 업무를 담당하는 UX 매니저로 활동했다. 현재 현대자동차 연구소에서 책임연구원으로 재직 중이며, 모바일 분야에서 쌓은 다년간의 경험을 바탕으로 새로운 자동차 UX 설계를 연구하고 있다. 역서로는 [심리 를 꿰뚫는 UX 디자인](에이콘출판, 2010), [Designing the iPhone User Experience 한국어판](에이콘출판, 2011)이 있다.