홈앤서비스 SK BROADBAND

좋은 인터페이스는 삶을 더 쉽게 만들어야 한다
디지털 인터페이스가 없는 일상을 상상하기 어려운 세상이다. 일하고, 놀고, 대화하고, 쇼핑하고, 새로운 것을 배우는 모든 일이 화면에서 시작된다. 매력적인 인터페이스는 말이 잘 통하는 친구와 나누는 대화처럼 기분 좋은 경험을 불러오지만, 페인 포인트가 넘쳐 나는 서비스는 사용자에게 짜증과 좌절감을 안겨 준다. 로딩이 느린 화면, 어디로 가라는 건지 도무지 알 수 없는 내비게이션, 번거롭게 자꾸 열리는 모달 박스로 사용자 이탈률을 높이고 있지는 않은가?

정보 설계에서 내비게이션, 액션, 비주얼 디자인까지
사용자를 사로잡는 인터페이스 디자인 기술
이 책은 SNS, 이미지/영상 편집, 길 찾기를 비롯한 다양한 앱에서부터 쇼핑, 예약, 금융 웹사이트까지 웹과 모바일을 위한 화면 기반 인터랙션에 최적화된 UX/UI 패턴 80가지를 소개한다. 원활한 사용자 흐름을 만들고 이용자의 태스크 달성을 돕는 데 효과적인 패턴들을 400여 개의 실제 서비스 스크린 샷으로 일목요연하게 보여 준다. 버즈피드(BuzzFeed), 슬랙(Slack), 어도비 포토샵(Adobe Photoshop), 스포티파이(Spotify), 세일즈포스(Salesforce) 등의 글로벌 서비스가 고객이 체감할 수 있는 최대한의 효용을 가능한 한 직관적으로 제공하기 위해, 어떻게 인터페이스를 디자인하는지 체계적으로 설명한다.

인터페이스와 인터랙션 디자인 세계를 탐험하는 가장 완벽한 로드맵
사용자의 스크롤 행동 패턴을 보면 대부분 웹사이트의 첫 화면에서 25%가 이탈한다고 한다. 인터페이스에서 사람들은 무슨 생각을 하고 어떻게 행동할까? 디자인 패턴은 인간의 감각과 같은 방향으로 움직여야 한다. 이 책에서 소개하는 디자인 패턴은 기획자, 디자이너, 개발자가 사용자를 위한 인터페이스를 구축할 때 가장 든든하고 유용한 기초 블록으로 쓰일 것이다.

제3판 서문: 인터페이스는 삶을 더 쉽게 만들어야 한다 xiv

1장 문제를 정확히 파악하고 제대로 해결하는 디자인 1
사용자를 둘러싼 컨텍스트 파악하기 2
당신은 사용자가 아니다 3
인터랙션은 대화처럼 3
콘텐츠와 기능을 사용자에게 맞춰라 4
숙련도에 따라 달라지는 것들 5
인터페이스는 목표를 달성하는 수단일 뿐 7
‘왜?’라고 묻고 또 묻기 8
문제를 정확히 파악하고 제대로 해결하기 8
사용자를 있는 그대로 이해하는 법 10
직접 관찰 12
케이스 스터디 12
설문조사 13
퍼소나(personas) 13
디자인 리서치는 마케팅 리서치가 아니다 14
인터페이스에서 사람들은 무슨 생각을 하고 어떻게 행동할까? 15
안전한 탐색(Safe Exploration) 16
즉각적 만족(Instant gratification) 17
만족화(Satisficing) 18
중도에 바꾸기(Changes in Midstream) 20
선택 미루기(Deferred Choices) 21
점진적 창조(Incremental Construction) 22
습관화(Habituation) 23
짬시간 활용(Microbreaks) 25
공간 기억(Spatial Memory) 26
미래 계획 기억(Prospective Memory) 28
능률적 반복(Streamlined Repetition) 30
키보드만 사용하기(Keyboard Only) 32
소셜 미디어(Social Media), 소셜 프루프(Social Proof), 협업(Collaboration) 33
성공적인 인터랙션 디자인을 위한 필수 요소 35

2장 콘텐츠 구성하기: 정보 설계와 애플리케이션 구조 37
사용에 방해되지 않는 정보 구조 만들기 38
정보 구조란? 39
사용자를 위한 정보 공간 40

접근법 40
정보와 정보의 표현을 분리하라 40
상호 배타적이면서 전체를 포괄하기 41
콘텐츠를 구성하고 분류하는 방법 42
위치(Location) 42
가나다순(Alphabetical) 43
시간(Time) 43
카테고리(Category) 또는 다면 필터(Facet) 43
위계(Hierarchy) 44
숫자(Number) 44
태스크와 작업흐름 위주의 앱 디자인하기 44
자주 사용하는 항목을 눈에 띄게 하라 44
일련의 단계로 작업 ‘쪼개기’ 45
다양한 채널과 화면 크기는 우리가 직면해야 하는 현실 45
정보를 카드 형태로 보여 줘라 46
화면 유형의 시스템 디자인 46
개요 보기: 목록이나 그리드 위에서 항목과 옵션 보여 주기 47
집중하기: 한 번에 하나만 표시하기 49
만들기: 창작을 위한 툴 제공하기 50
수행하기: 하나의 태스크를 효과적으로 완료하기 50
패턴 51
01 추천(Feature), 검색(Search), 탐색(Browse) 52
02 모바일 다이렉트 액세스(Mobile Direct Access) 61
03 스트림(Streams)과 피드(Feeds) 63
04 미디어 브라우저(Media Browser) 76
05 대시보드(Dashboard) 87
06 캔버스(Canvas)와 팔레트(Palette) 90
07 마법사(Wizard) 95
08 설정 편집기(Settings Editor) 99
09 다양한 보기 모드(Alternative Views) 104
10 작업 공간 나누기(Many Workspaces) 112
11 도움말 시스템(Help Systems) 117
12 태그(Tags) 128
유연하면서도 단단한 정보 구조를 만들자 133

3장 이동하기: 표지판, 길 찾기, 내비게이션 135
정보와 태스크 공간 이해하기 136
표지판 136
길 찾기 137
내비게이션 138
글로벌 내비게이션(Global Navigation) 138
유틸리티 내비게이션(Utility Navigation) 139
연관 및 인라인 내비게이션(Associative and Inline Navigation) 139
관련 콘텐츠(Related Content) 140
태그(Tags) 140
소셜(Social) 140
디자인할 때 고려할 점 140
내비게이션 디자인과 시각적 표현 분리하기 141
인지 부담 141
이동 거리 최소화하기 142
내비게이션 모델 144
허브 앤 스포크(Hub and Spoke) 144
완전히 연결된(Fully Connected) 모델 144
멀티레벨(Multilevel) 또는 트리(Tree) 145
단계별 모델 146
피라미드 모델 147
넓고 얕은 내비게이션 148
패턴 149
13 명확한 진입점(Clear Entry Points) 150
14 메뉴 페이지(Menu Page) 155
15 피라미드(Pyramid) 161
16 모달 패널(Modal Panel) 164
17 딥링크(Deep Link) 169
18 탈출구(Escape Hatch) 174
19 메가 메뉴(Fat Menu) 177
20 사이트맵 푸터(Sitemap Footer) 182
21 로그인 툴(Sign-In Tools) 188
22 프로그레스 인디케이터(Progress Indicator) 190
23 브레드크럼(Breadcrumbs) 194
24 주석이 붙은 스크롤바(Annotated Scroll Bar) 198
25 전환 애니메이션(Animated Transition) 201
변함없는 가치를 전달하는 내비게이션 207

4장 화면 구성 요소의 레이아웃 209
레이아웃의 기본 209
시각적 계층 구조(Visual Hierarchy) 210
시각적 계층 구조 적용하기 210
물체의 중요도 가늠하기 210
게슈탈트 법칙 4가지 215
시선의 흐름(Visual Flow) 218
동적인 디스플레이 사용하기 220
반응형 활성화 221
단계적 정보 공개 222
사용자 인터페이스 영역 222
패턴 224
레이아웃 224
정보 분리하기 225
26 시각적 프레임워크(Visual Framework) 225
27 센터 스테이지(Center Stage) 228
28 균등한 그리드(Grid of Equals) 232
29 제목을 붙인 섹션(Titled Sections) 235
30 모듈 탭(Module Tabs) 238
31 아코디언(Accordion) 241
32 접히는 패널(Collapsible Panels) 244
33 이동식 패널(Movable Panels) 246

5장 비주얼 스타일과 아름다움 251
비주얼 디자인의 기초 252
시각적 계층 구조 254
구성 254
색상 255
타이포그래피 259
가독성 266
감정 불러일으키기 267
이미지 272
기업용 애플리케이션을 위한 시각 디자인 275
접근성 276
다양한 비주얼 스타일 277
스큐어모픽(Skeuomorphic) 277
일러스트 279
플랫 디자인(Flat Design) 280
미니멀리즘 281
적응형/매개변수형 디자인 283
아름다움이 가진 힘을 과소평가하지 말라 285

6장 모바일 인터페이스 287
모바일 디자인의 어려움과 기회 영역 288
작은 화면 크기 289
다양한 화면 너비 289
터치 스크린 289
문자 입력하기 290
물리적 환경의 제약 290
위치 인식 290
사회적 영향과 집중력의 한계 291
모바일 디자인에 접근하는 방법 291
모바일 사용자에게 무엇이 필요할까? 291
웹/앱을 본질에 맞게 발라내기 292
모바일 기기의 하드웨어 활용하기 293
콘텐츠를 선형으로 배치하기 293
가장 일반적인 인터랙션 시퀀스 최적화 293
소개할 만한 좋은 사례들 294
패턴 297
34 버티컬 스택(Vertical Stack) 298
35 필름스트립(Filmstrip) 301
36 터치 툴(Touch Tools) 304
37 하단 내비게이션(Bottom Navigation) 306
38 컬렉션(Collections)과 카드(Cards) 308
39 무한 리스트(Infinite List) 311
40 넉넉한 터치 영역(Generous Borders) 313
41 로딩(Loading) 또는 프로그레스 인디케이터(Progress Indicators) 315
42 유기적인 앱 연동(Richly Connected Apps) 318
모바일화하기 321

7장 목록 만들기 323
목록의 유스케이스 323
정보 구조 떠올려 보기 325
무엇을 보여 줄 것인가? 327
선택된 항목 세부사항 표시하기 327
무거운 시각 요소 보여 주기 328
아주 긴 목록 관리하기 329
카테고리나 계층으로 정리된 목록 표시하기 330
패턴 330
43 2분할 패널(Two-Panel Selector) 또는 분할 화면(Split View) 331
44 단일 화면 상세 진입(One-Window Drilldown) 335
45 포괄 목록(List Inlay) 338
46 카드(Cards) 342
47 섬네일 그리드(Thumbnail Grid) 345
48 캐러셀(Carousel) 349
49 페이지네이션(Pagination) 353
50 항목으로 즉시 이동하기(Jump to Item) 356
51 문자/숫자 스크롤바(Alpha/Numeric Scroller) 358
52 신규 항목 추가 행(New-Item Row) 359
수많은 목록들 362

8장 작업하기: 동작과 명령 363
탭(Tap), 스와이프(Swipe), 핀치(Pinch) 365
회전(Rotate)과 흔들기(Shake) 366
버튼(Buttons) 366
메뉴바(Menu Bars) 367
팝업 메뉴(Pop-Up Menus) 367
드롭다운 메뉴(Drop-Down Menus) 367
툴바(Tool bars) 367
링크(Links) 368
조작 패널(Action Panels) 368
호버 툴(Hover Tools) 368
한 번 클릭하기 vs. 더블 클릭하기 369
키보드 조작(Keyboard Actions) 369
단축키 370
탭 이동(Tab Order) 370
드래그 앤 드롭(Drag-and-Drop) 371
텍스트 명령(Typed Commands) 371
어포던스(Affordance) 371
객체 직접 조작(Direct Manipulation of Objects) 372
패턴 373
53 버튼 그룹(Button Groups) 375
54 호버(Hover) 또는 팝업 툴(Pop-Up Tools) 377
55 조작 패널(Action Panel) 380
56 완료 버튼 강조(Prominent Done Button) 385
57 지능형 메뉴 항목(Smart Menu Items) 389
58 미리 보기(Preview) 392
59 스피너(Spinner)와 로딩 인디케이터(Loading Indicator) 396
60 취소 가능성(Cancelability) 401
61 다단계 실행 취소(Multilevel Undo) 403
62 명령 기록(Command History) 408
63 매크로(Macros) 411
가장 중요한 동작이 제일 잘 보이게 417

9장 복잡한 데이터 보여 주기 419
인포그래픽의 기초 419
데이터를 구성하는 조직 모델 421
전주의적(preattentive) 변수의 힘 422
데이터 탐험하기 426
데이터 재배열하기 428
검색과 필터링으로 필요한 데이터만 보기 430
특정 데이터값이 궁금할 때 433
패턴 434
64 데이터팁(Datatip) 435
65 데이터 스포트라이트(Data Spotlight) 440
66 동적 쿼리(Dynamic Queries) 443
67 데이터 브러싱(Data Brushing) 446
68 다중 Y축 그래프(Multi-Y Graph) 449
69 스몰 멀티플즈(Small Multiples) 453
데이터 시각화의 힘 457

10장 사용자에게 입력값 받기: 폼과 컨트롤 459
폼 디자인의 기초 460
폼 디자인은 계속 진화한다 463
더 읽을거리 465
패턴 465
70 자유도가 높은 폼(Forgiving Format) 467
71 구조화된 폼(Structured Format) 470
72 빈칸 채우기(Fill-in-the-Blanks) 474
73 입력 힌트(Input Hints) 477
74 입력 프롬프트(Input Prompt) 481
75 암호 보안 수준 표시(Password Strength Meter) 484
76 자동 완성(Autocompletion) 488
77 드롭다운 선택창(Drop-down Chooser) 495
78 목록 편집창(List Builder) 499
79 적절한 기본값(Good Defaults)과 지능형 사전 입력(Smart Prefills) 502
80 오류 메시지(Error Messages) 506
하면 할수록 어려운 폼 디자인 513

11장 사용자 인터페이스 시스템과 아토믹 디자인 515
UI 시스템 트렌드 516
마이크로소프트의 플루언트 디자인 시스템 517
확장 가능한 일관된 인터페이스 설계하기 520
아토믹 디자인 개요 521
아토믹 디자인 계층 구조 523
UI 프레임워크는 천장이 아니라 바닥이다 525
개요 525
장점 525
UI 프레임워크의 대두 526
대표적인 UI 프레임워크 살펴보기 527
왜 아토믹 디자인인가? 537

12장 화면의 이면 그리고 화면을 넘어서 539
스마트 시스템의 재료 540
인터넷 연결 기기(Connected Devices) 541
선행 시스템(Anticipatory Systems) 541
보조 시스템(Assistive Systems) 541
내추럴 사용자 인터페이스(Natural User Interfaces) 541
변하지 않는 패턴과 원칙 541

찾아보기 543