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
15년간 사랑받은 UX 분야 아마존 스테디셀러 기본에 충실한 영감으로 가득한 믿을 만한 패턴 북 80가지 UX/UI 패턴! 400여 개 UI 스크린 샷!
좋은 인터페이스는 삶을 더 쉽게 만들어야 한다 디지털 인터페이스가 없는 일상을 상상하기 어려운 세상이다. 일하고, 놀고, 대화하고, 쇼핑하고, 새로운 것을 배우는 모든 일이 화면에서 시작된다. 매력적인 인터페이스는 말이 잘 통하는 친구와 나누는 대화처럼 기분 좋은 경험을 불러오지만, 페인 포인트가 넘쳐 나는 서비스는 사용자에게 짜증과 좌절감을 안겨 준다. 로딩이 느린 화면, 어디로 가라는 건지 도무지 알 수 없는 내비게이션, 번거롭게 자꾸 열리는 모달 박스로 사용자 이탈률을 높이고 있지는 않은가?
정보 설계에서 내비게이션, 액션, 비주얼 디자인까지 사용자를 사로잡는 인터페이스 디자인 기술 이 책은 SNS, 이미지/영상 편집, 길 찾기를 비롯한 다양한 앱에서부터 쇼핑, 예약, 금융 웹사이트까지 웹과 모바일을 위한 화면 기반 인터랙션에 최적화된 UX/UI 패턴 80가지를 소개한다. 원활한 사용자 흐름을 만들고 이용자의 태스크 달성을 돕는 데 효과적인 패턴들을 400여 개의 실제 서비스 스크린 샷으로 일목요연하게 보여 준다. 버즈피드(BuzzFeed), 슬랙(Slack), 어도비 포토샵(Adobe Photoshop), 스포티파이(Spotify), 세일즈포스(Salesforce) 등의 글로벌 서비스가 고객이 체감할 수 있는 최대한의 효용을 가능한 한 직관적으로 제공하기 위해, 어떻게 인터페이스를 디자인하는지 체계적으로 설명한다.
인터페이스와 인터랙션 디자인 세계를 탐험하는 가장 완벽한 로드맵 사용자의 스크롤 행동 패턴을 보면 대부분 웹사이트의 첫 화면에서 25%가 이탈한다고 한다. 인터페이스에서 사람들은 무슨 생각을 하고 어떻게 행동할까? 디자인 패턴은 인간의 감각과 같은 방향으로 움직여야 한다. 이 책에서 소개하는 디자인 패턴은 기획자, 디자이너, 개발자가 사용자를 위한 인터페이스를 구축할 때 가장 든든하고 유용한 기초 블록으로 쓰일 것이다.
인터페이스 디자인의 아름다움은 진짜 문제를 해결하는 데 있다! · 한순간에 사용자를 사로잡는 직관적인 화면 기반 인터페이스는 어떻게 만들까? · 어떤 맥락에서도 짜증을 불러일으키지 않는 원활한 워크플로를 구축하려면? · 최고의 효용과 사용성을 선사하는 태스크 구조 설계하기 · 센스 있는 와우 포인트로 자꾸 찾고 싶은 페이지를 디자인하고 싶다면?
“인터페이스 디자인에 대해 진지하게 생각하는 사람이라면 누구나 책장에 꽂아 둬야 할 책. 플랫폼에 상관없이 적용할 수 있는 검증된 인터페이스 패턴을 다룬다.” - 댄 새퍼, 《인터랙션 디자인》 저자
총 
멀티플라이어
