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

제3판 서문: 인터페이스는 삶을 더 쉽게 만들어야 한다 1장 문제를 정확히 파악하고 제대로 해결하는 디자인 사용자를 둘러싼 컨텍스트 파악하기 _당신은 사용자가 아니다 _인터랙션은 대화처럼 _콘텐츠와 기능을 사용자에게 맞춰라 _숙련도에 따라 달라지는 것들 _인터페이스는 목표를 달성하는 수단일 뿐 _‘왜?’라고 묻고 또 묻기 _문제를 정확히 파악하고 제대로 해결하기 사용자를 있는 그대로 이해하는 법 _직접 관찰 _케이스 스터디 _설문조사 _퍼소나(personas) _디자인 리서치는 마케팅 리서치가 아니다 인터페이스에서 사람들은 무슨 생각을 하고 어떻게 행동할까? _안전한 탐색(Safe Exploration) _즉각적 만족(Instant gratification) _만족화(Satisficing) _중도에 바꾸기(Changes in Midstream) _선택 미루기(Deferred Choices) _점진적 창조(Incremental Construction) _습관화(Habituation) _짬시간 활용(Microbreaks) _공간 기억(Spatial Memory) _미래 계획 기억(Prospective Memory) _능률적 반복(Streamlined Repetition) _키보드만 사용하기(Keyboard Only) _소셜 미디어(Social Media), 소셜 프루프(Social Proof), 협업(Collaboration) 성공적인 인터랙션 디자인을 위한 필수 요소 2장 콘텐츠 구성하기: 정보 설계와 애플리케이션 구조 사용에 방해되지 않는 정보 구조 만들기 정보 구조란? _사용자를 위한 정보 공간 접근법 _정보와 정보의 표현을 분리하라 상호 배타적이면서 전체를 포괄하기 콘텐츠를 구성하고 분류하는 방법 _위치(Location) _가나다순(Alphabetical) _시간(Time) _카테고리(Category) 또는 다면 필터(Facet) _위계(Hierarchy) _숫자(Number) 태스크와 작업흐름 위주의 앱 디자인하기 _자주 사용하는 항목을 눈에 띄게 하라 _일련의 단계로 작업 ‘쪼개기’ _다양한 채널과 화면 크기는 우리가 직면해야 하는 현실 _정보를 카드 형태로 보여 줘라 화면 유형의 시스템 디자인 개요 보기: 목록이나 그리드 위에서 항목과 옵션 보여 주기 집중하기: 한 번에 하나만 표시하기 만들기: 창작을 위한 툴 제공하기 수행하기: 하나의 태스크를 효과적으로 완료하기 패턴 _01 추천(Feature), 검색(Search), 탐색(Browse) _02 모바일 다이렉트 액세스(Mobile Direct Access) _03 스트림(Streams)과 피드(Feeds) _04 미디어 브라우저(Media Browser) _05 대시보드(Dashboard) _06 캔버스(Canvas)와 팔레트(Palette) _07 마법사(Wizard) _08 설정 편집기(Settings Editor) _09 다양한 보기 모드(Alternative Views) _10 작업 공간 나누기(Many Workspaces) _11 도움말 시스템(Help Systems) _12 태그(Tags) 유연하면서도 단단한 정보 구조를 만들자 3장 이동하기: 표지판, 길 찾기, 내비게이션 정보와 태스크 공간 이해하기 표지판 길 찾기 내비게이션 _글로벌 내비게이션(Global Navigation) _유틸리티 내비게이션(Utility Navigation) _연관 및 인라인 내비게이션(Associative and Inline Navigation) _관련 콘텐츠(Related Content) _태그(Tags) _소셜(Social) 디자인할 때 고려할 점 _내비게이션 디자인과 시각적 표현 분리하기 _인지 부담 _이동 거리 최소화하기 내비게이션 모델 _허브 앤 스포크(Hub and Spoke) _완전히 연결된(Fully Connected) 모델 _멀티레벨(Multilevel) 또는 트리(Tree) _단계별 모델 _피라미드 모델 _넓고 얕은 내비게이션 패턴 _13 명확한 진입점(Clear Entry Points) _14 메뉴 페이지(Menu Page) _15 피라미드(Pyramid) _16 모달 패널(Modal Panel) _17 딥링크(Deep Link) _18 탈출구(Escape Hatch) _19 메가 메뉴(Fat Menu) _20 사이트맵 푸터(Sitemap Footer) _21 로그인 툴(Sign-In Tools) _22 프로그레스 인디케이터(Progress Indicator) _23 브레드크럼(Breadcrumbs) _24 주석이 붙은 스크롤바(Annotated Scroll Bar) _25 전환 애니메이션(Animated Transition) 변함없는 가치를 전달하는 내비게이션 4장 화면 구성 요소의 레이아웃 레이아웃의 기본 _시각적 계층 구조(Visual Hierarchy) _시각적 계층 구조 적용하기 _물체의 중요도 가늠하기 _게슈탈트 법칙 4가지 _시선의 흐름(Visual Flow) _동적인 디스플레이 사용하기 _반응형 활성화 _단계적 정보 공개 _사용자 인터페이스 영역 패턴 _레이아웃 _정보 분리하기 _26 시각적 프레임워크(Visual Framework) _27 센터 스테이지(Center Stage) _28 균등한 그리드(Grid of Equals) _29 제목을 붙인 섹션(Titled Sections) _30 모듈 탭(Module Tabs) _31 아코디언(Accordion) _32 접히는 패널(Collapsible Panels) _33 이동식 패널(Movable Panels) 5장 비주얼 스타일과 아름다움 비주얼 디자인의 기초 _시각적 계층 구조 _구성 _색상 _타이포그래피 _가독성 _감정 불러일으키기 _이미지 기업용 애플리케이션을 위한 시각 디자인 _접근성 다양한 비주얼 스타일 _스큐어모픽(Skeuomorphic) _일러스트 _플랫 디자인(Flat Design) _미니멀리즘 _적응형/매개변수형 디자인 아름다움이 가진 힘을 과소평가하지 말라 6장 모바일 인터페이스 모바일 디자인의 어려움과 기회 영역 _작은 화면 크기 _다양한 화면 너비 _터치 스크린 _문자 입력하기 _물리적 환경의 제약 _위치 인식 _사회적 영향과 집중력의 한계 모바일 디자인에 접근하는 방법 _모바일 사용자에게 무엇이 필요할까? _웹/앱을 본질에 맞게 발라내기 _모바일 기기의 하드웨어 활용하기 _콘텐츠를 선형으로 배치하기 _가장 일반적인 인터랙션 시퀀스 최적화 _소개할 만한 좋은 사례들 패턴 _34 버티컬 스택(Vertical Stack) _35 필름스트립(Filmstrip) _36 터치 툴(Touch Tools) _37 하단 내비게이션(Bottom Navigation) _38 컬렉션(Collections)과 카드(Cards) _39 무한 리스트(Infinite List) _40 넉넉한 터치 영역(Generous Borders) _41 로딩(Loading) 또는 프로그레스 인디케이터(Progress Indicators) _42 유기적인 앱 연동(Richly Connected Apps) 모바일화하기 7장 목록 만들기 목록의 유스케이스 정보 구조 떠올려 보기 무엇을 보여 줄 것인가? _선택된 항목 세부사항 표시하기 _무거운 시각 요소 보여 주기 _아주 긴 목록 관리하기 _카테고리나 계층으로 정리된 목록 표시하기 패턴 _43 2분할 패널(Two-Panel Selector) 또는 분할 화면(Split View) _44 단일 화면 상세 진입(One-Window Drilldown) _45 포괄 목록(List Inlay) _46 카드(Cards) _47 섬네일 그리드(Thumbnail Grid) _48 캐러셀(Carousel) _49 페이지네이션(Pagination) _50 항목으로 즉시 이동하기(Jump to Item) _51 문자/숫자 스크롤바(Alpha/Numeric Scroller) _52 신규 항목 추가 행(New-Item Row) 수많은 목록들 8장 작업하기: 동작과 명령 탭(Tap), 스와이프(Swipe), 핀치(Pinch) 회전(Rotate)과 흔들기(Shake) 버튼(Buttons) 메뉴바(Menu Bars) 팝업 메뉴(Pop-Up Menus) 드롭다운 메뉴(Drop-Down Menus) 툴바(Tool bars) 링크(Links) 조작 패널(Action Panels) 호버 툴(Hover Tools) 한 번 클릭하기 vs. 더블 클릭하기 키보드 조작(Keyboard Actions) _단축키 370 _탭 이동(Tab Order) 370 드래그 앤 드롭(Drag-and-Drop) 텍스트 명령(Typed Commands) 어포던스(Affordance) 객체 직접 조작(Direct Manipulation of Objects) 패턴 _53 버튼 그룹(Button Groups) _54 호버(Hover) 또는 팝업 툴(Pop-Up Tools) _55 조작 패널(Action Panel) _56 완료 버튼 강조(Prominent Done Button) _57 지능형 메뉴 항목(Smart Menu Items) _58 미리 보기(Preview) _59 스피너(Spinner)와 로딩 인디케이터(Loading Indicator) _60 취소 가능성(Cancelability) _61 다단계 실행 취소(Multilevel Undo) _62 명령 기록(Command History) _63 매크로(Macros) 가장 중요한 동작이 제일 잘 보이게 9장 복잡한 데이터 보여 주기 인포그래픽의 기초 _데이터를 구성하는 조직 모델 _전주의적(preattentive) 변수의 힘 _데이터 탐험하기 _데이터 재배열하기 _검색과 필터링으로 필요한 데이터만 보기 _특정 데이터값이 궁금할 때 패턴 _64 데이터팁(Datatip) _65 데이터 스포트라이트(Data Spotlight) _66 동적 쿼리(Dynamic Queries) _67 데이터 브러싱(Data Brushing) _68 다중 Y축 그래프(Multi-Y Graph) _69 스몰 멀티플즈(Small Multiples) 데이터 시각화의 힘 10장 사용자에게 입력값 받기: 폼과 컨트롤 폼 디자인의 기초 _폼 디자인은 계속 진화한다 _더 읽을거리 패턴 _70 자유도가 높은 폼(Forgiving Format) _71 구조화된 폼(Structured Format) _72 빈칸 채우기(Fill-in-the-Blanks) _73 입력 힌트(Input Hints) _74 입력 프롬프트(Input Prompt) _75 암호 보안 수준 표시(Password Strength Meter) _76 자동 완성(Autocompletion) _77 드롭다운 선택창(Drop-down Chooser) _78 목록 편집창(List Builder) _79 적절한 기본값(Good Defaults)과 지능형 사전 입력(Smart Prefills) _80 오류 메시지(Error Messages) 하면 할수록 어려운 폼 디자인 11장 사용자 인터페이스 시스템과 아토믹 디자인 UI 시스템 트렌드 _마이크로소프트의 플루언트 디자인 시스템 확장 가능한 일관된 인터페이스 설계하기 _아토믹 디자인 개요 _아토믹 디자인 계층 구조 UI 프레임워크는 천장이 아니라 바닥이다 _개요 _장점 _UI 프레임워크의 대두 _대표적인 UI 프레임워크 살펴보기 왜 아토믹 디자인인가? 12장 화면의 이면 그리고 화면을 넘어서 스마트 시스템의 재료 _인터넷 연결 기기(Connected Devices) _선행 시스템(Anticipatory Systems) _보조 시스템(Assistive Systems) _내추럴 사용자 인터페이스(Natural User Interfaces) 변하지 않는 패턴과 원칙 찾아보기