지은이의 말

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

이 책은 사용자 경험(UX, User eXperience)의 여러 측면을 논하지만 사용자 인터페이스(UI, User Interface)에 중점을 둔다. 사실 스크린의 픽셀은 여전히 디지털 제품의 고객 경험에서 큰 부분을 차지한다. UI(스크린의 버튼, 양식의 컨트롤)는 사용자가 제품과 인터랙션(interaction)하는 유일한 방법이기 때문에 UX(전체 경험)의 품질은 인터페이스의 품질과 사용성에 밀접하게 연관된다. UX는 UI보다 더 큰 영역이지만, UI가 UX에 얼마나 중요한지를 무시할 수는 없다.

웹 성숙도가 높아지는 여정의 어딘가에서 우리는 중요한 사실을 잊었다. UX는 예술이 아니다. 오히려 그 반대다. UX 디자인은 사용자에게 서비스 제공이라는 기능을 수행해야 한다. 여전히 멋져 보여야 하지만, 실제 기능을 희생하면 안 된다. 몇 년 동안 형편없는 디자인이 점차 생겨났으며 일부 디지털 제품은 100여 개의 사소한 방식으로 악화됐다.

어쩌다 이 지경이 된 것인가? 브랜딩 에이전시(branding agency)가 관여됐다. 에이전시는 우리가 사진을 ‘추억’이라고 부르기 때문에 사진 메뉴도 추억이라고 불러야 한다고 주장했다. 그것이 무엇을 의미하는지, 사진을 어떻게 찾아야 하는지 아는 사람은 아무도 없다.

CEO는 회사가 관련된 모든 곳의 제목에 바닷바람의 색조를 사용하도록 직접 선택했고, 그 결과 모든 제목이 옅은 파란색이 됐다. 이는 모바일 폰 화면의 흰색 바탕에서는 아무도 제목을 읽을 수 없다는 뜻이다. 마케팅 부서는 전체 화면 크기의 팝업을 띄워서 사용자의 이메일 주소를 수집하는 것이 4분기 고객관계관리(CRM, Customer Relationship Management) 지표에 적합하다고 결정했다. 그러고 나서 그들은 ‘고객이 팝업을 닫으면 안 되니까 닫기 아이콘을 너무 크게 만들지 마세요’라고 말했다.

웹 도처에서 발견할 수 있는 이 세 가지 예에서 회사는 사용자 니즈를 간과하고 사용자를 최우선으로 고려하지 않았다는 것을 알 수 있다. 지난 20년 동안 나는 디지털 제품 디자인에 대해 많은 것을 배웠다. 이 모든 교훈이 머릿속에서 하나의 커다란 UX 운영체제로 집대성된 것처럼 느껴지기 때문에 개별 교훈을 하나씩 뽑아내기는 어렵다.
내 자신이 디자인 순수주의자임을 인정하는 것은 부끄럽지 않다. 물론 미학도 중시하지만 난 이를 ‘불만족 요인(hygiene factor) ’인 동시에 필수적인 것으로 본다. 나는 미학의 겉치장을 넘어서 기능이 분명하거나 쉽게 발견하고 이해할 수 있는 편리하고 강력한 소프트웨어를 만들고자 항상 노력해왔다.

이 책은 경험이 부족한 디자이너에게 ‘성공으로 향하는 지름길’이며, 경험 많은 UX 전문가에게는 보편적인 생각에 대한 도전이다.

그 원칙은 서체, 컨트롤, 여정과 같은 폭넓은 섹션과 더 넓은 분야의 UX 사례로 구성된다. 이 책을 마음대로 들춰 보고 참고서로 활용하기 바란다. 순서대로 읽도록 디자인했지만, 읽는 순서는 상관없다. 아마 몇 가지 원칙은 동의할 수 없을지도 모른다. 이것은 어쨌든 의견을 강하게 드러낸 책이다. 하지만 의견 차이는 당신의 생각을 점검하고, 사용자의 목표를 달성하는 데 더 좋은 방법이 있을지를 다시 고려해 보게 만드는 계기가 될 것이다.

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

옮긴이의 말

오랫동안 UX 분야에서 일하다 보니 주변의 UXer는 물론 기획자나 개발자로부터 책 추천을 부탁받는 경우가 종종 있다. 기초부터 쌓았으면 하는 욕심에 UX의 기본 개념을 다룬 개론서를 추천해주고 나면, 부담 없이 읽긴 좋았지만 그래서 뭘 어떻게 해야 하는지는 모르겠다는 피드백을 듣게 된다. “고객의 입장에서 생각하라!”와 같은 지침만 반복해서 접하다 보면 손에 잡히는 실용적인 노하우나 지식에 대한 갈증이 쌓이기 마련이다.

나는 뻔하고 추상적인 이론의 나열이 아니라 쉽게 이해되는 구체적인 디테일을 잡은 실용서를 늘 기다려 왔다. 좋은 UX에 대한 소중한 관심을 꺼트리지 않고 이어나가고 싶은 욕심 때문이다. 다행스럽게도 몇 년 전에 『UX 원칙』을 국내에 소개하면서 그동안의 기다림과 갈증을 해소할 수 있었다. 책을 읽은 주변인들은 원칙과 예시가 구체적이고 명확해서 이해하기 쉬웠다는 한결같은 반응을 보였다.

많은 이로부터 찬사를 받은 『UX 원칙』이 더 완벽해진 모습으로 돌아왔다. 1판의 본질은 고스란히 유지하면서 최근의 기술 및 트렌드에 맞춰 내용을 가다듬었다. 연관성 높은 원칙을 그룹핑하고 최신의 사례로 업데이트해 완성도를 한 단계 끌어올렸다. 이를 통해 디지털 실무자가 하기 쉬운 실수를 줄이고, 제품을 더 사용하기 쉽고 효과적으로 만드는 데 도움을 준다.

좋은 UX에 대한 안목을 키우기 위해서는 실용적인 참고서가 한 권쯤은 꼭 필요하다. 이 책이 제품의 성공을 담보하는 실질적인 해결책을 제공하리라 확신한다.

UX 실무
__1장. 누구나 UX를 잘 할 수 있다
__2장. 원칙을 전략적으로 사용하라
__3장. 간단한 제품의 출시를 두려워 마라
__4장. 누군가에게는 복잡성이 좋을 수도 있다
__5장. A/B 테스트를 사용해서 아이디어를 검증하라
__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장. 메뉴 항목을 바닥글이나 뷰 하단에 반복 배치하라

아이코노그래피(iconography)
__34장. 제품 전반에서 일관된 아이콘을 사용하라
__35장. 시대에 뒤처진 아이콘을 사용하지 마라
__36장. 기존 아이콘으로 신규 아이디어를 표현하려고 하지 마라
__37장. 아이콘 위에 텍스트를 쓰지 마라
__38장. 항상 아이콘에 텍스트 레이블을 제공하라

입력
__39장. 가급적 기기의 기본 입력 기능을 사용하라
__40장. 비밀번호 생성 및 입력을 간소화하라
__41장. 비밀번호 필드에 붙여 넣기를 허용하라
__42장. 이메일 주소를 인증하려고 하지 마라
__43장. 사용자가 입력에 쏟은 시간과 노력을 존중하라
__44장. 여러 줄의 입력 필드에 맞는 적절한 크기를 선택하라
__45장. UI에서 애니메이션은 주의해서 사용하라
__46장. 한 가지 날짜 피커 컨트롤을 일관되게 사용하라
__47장. '비밀번호 찾기' 필드에서 사용자 이름을 미리 채워라
__48장. 대소문자를 구분하지 마라
__49장. 챗봇은 별로다

서식
__50장. 서식이 좋으면 제품도 좋다
__51장. 되도록 빨리 데이터 입력을 검증하라
__52장. 서식을 검증하지 못한다면 어떤 필드에 주의해야 하는지를 사용자에게 보여 줘라
__53장. 사용자는 데이터 포맷을 모른다(그리고 신경도 안 쓴다)
__54장. 작업에 적합한 컨트롤을 선택하라

사용자 데이터
__55장. 사용자가 원하는 대로 전화번호를 입력할 수 있게 하라
__56장. 날짜 입력에서 드롭다운을 센스 있게 사용하라
__57장. 결제 카드 정보를 요구할 때에는 최소한의 정보만 받아라
__58장. 우편 또는 ZIP 코드 입력을 쉽게 만들어라
__59장. 통화 입력에서 소수자리를 덧붙이지 마라
__60장. 사용자가 어려움 없이 이미지를 추가할 수 있게 하라

진척
__61장. 소요 시간이 확실한 태스크라면 '직선 모양'의 진행 표시줄을 사용하라
__62장. 진행 표시줄에 숫자로 된 인디케이터를 제공하라
__63장. 소요 시간을 가늠할 수 없는 태스크라면 '스피너'를 표시하라

접근성을 고려한 디자인
__64장. 명암비는 당신 편이다
__65장. '플랫 디자인'을 사용해야 한다면 컨트롤에 시각적 어포던스를 추가하라
__66장. 모호한 기호를 피하라
__67장. 링크는 콘텍스트와 분리해도 의미가 통하게 만들어라
__68장. 헤더와 내비게이션 위에 '콘텐츠로 건너뛰기' 링크를 추가하라
__69장. 컬러만 사용해서 정보를 전달하지 마라
__70장. 메타 태그를 써서 기기의 줌 기능을 끄는 것은 악랄한 행위다
__71장. 내비게이션에 타당한 탭 순서를 부여하라
__72장. 컨트롤에 명확한 레이블을 작성하라
__73장. 탭 가능 영역을 손가락 크기로 만들어라

여정과 상태
__74장. 사용자가 특정 알림을 끌 수 있게 하라
__75장. 사용자 여정의 모든 측면에는 시작과 끝이 있어야 한다
__76장. 사용자는 모든 여정에서 자신이 어느 단계에 있는지 항상 알아야 한다
__77장. 이동 경로 내비게이션을 사용하라
__78장. 사용자는 당신의 회사에 전혀 관심이 없다
__79장. e-커머스의 표준 패턴을 따르라
__80장. 사용자의 작업이 저장되지 않았다면 인디케이터를 표시하라
__81장. 피드백을 제공하되 사용자를 귀찮게 하지 마라
__82장. 무의미한 스플래시 화면을 사용하지 마라
__83장. 파비콘을 독특하게 만들어라
__84장. '기존 항목에서 만들기' 흐름을 추가하라
__85장. 사용자가 쉽게 결제할 수 있게 만들어라
__86장. 검색 결과를 사용자가 필터링할 수 있게 하라
__87장. 사용자는 파일 시스템을 이해하지 못할 것이다
__88장. 말하지 말고 보여 줘라

용어
__89장. 용어를 일관되게 사용하라
__90장. '로그 인'과 '로그 아웃' 말고 '사인 인'과 '사인 아웃'을 사용하라
__91장. 가입인지 사인 인인지 명확하게 밝혀라
__92장. 비밀번호 재설정 경험을 표준화하라
__93장. 사람이 쓴 것처럼 작성하라
__94장. 수동태보다 능동태 동사를 선택하라

기대
__95장. 검색 결과 페이지 최상단에 가장 관련성이 높은 결과를 표시해야 한다
__96장. 알맞은 기본값을 선택하라
__97장. 액션을 막으려면 모달 뷰만 사용하라
__98장. 사용자가 기대하는 경험을 제공하라
__99장. 인터랙션이 명확해야 하는지, 쉬워야 하는지 또는 가능해야 하는지 결정하라
__100장. '모바일에서 작동하는가?'라는 말은 구식이다

UX 철학
__101장. 악의 유혹에 빠지지 마라
__보너스. 단순함을 위해 노력하라