사용자를 끌어들이는 UX/UI의 비밀(UX insight)

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)

변하지 않는 패턴과 원칙



찾아보기

제니퍼 티드웰 Jenifer Tidwell

20여 년 동안 다양한 업종에 맞는 사용자 인터페이스(UI)를 설계하고 구축해 왔다. 구글 북스(Google Books) 인터페이스를 재설계했으며, 그 전에는 매스웍스(MathWorks)의 사용자 인터페이스 디자이너로서 공학용 소프트웨어인 매트랩(MATLAB)의 차트 작성과 시각화 UI 설계에 중요한 역할을 했다. 최근 디지털 디자인에서 조경 디자인으로 커리어를 전환했다. 여전히 사용성과 아름다움, 훌륭한 엔지니어링 사이에서 균형을 유지하기 위해 노력하고 있다.