추가 적립 안내

좋은 인터페이스는 유저의 삶을 더 쉽게 만들어야 한다

매력적인 인터페이스는 말이 잘 통하는 친구와 나누는 대화처럼 기분 좋은 경험을 불러오지만, 페인 포인트가 넘쳐 나는 서비스는 사용자에게 짜증과 좌절감을 안겨 준다. 로딩이 느린 화면, 어디로 가라는 건지 도무지 알 수 없는 내비게이션, 번거롭게 자꾸 열리는 모달 박스로 사용자 이탈률을 높이고 있지는 않은가? 《사용자를 끌어들이는 UX/UI의 비밀》에서 알려 주는 80가지 UX/UI 실무 패턴으로 사용자를 고민하게 하지 않는 인터페이스를 만들어 보자!

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)
변하지 않는 패턴과 원칙

찾아보기