장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
사용자를 끌어들이는 UX/UI의 비밀
미리보기

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

  • 제니퍼티드웰 ,찰스브루어 ,아인발렌시아
  • |
  • 인사이트
  • |
  • 2021-05-18 출간
  • |
  • 580페이지
  • |
  • 172 X 225 mm
  • |
  • ISBN 9788966262991
판매가

33,000원

즉시할인가

29,700 원

카드할인

0원(즉시할인 0%)

적립금

1,650원 적립(5%적립)

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가혜택

네이버페이 무조건 1%적립+ 추가 1%적립

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
29,700원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평




인터페이스 디자인의 아름다움은 진짜 문제를 해결하는 데 있다!
ㆍ 한순간에 사용자를 사로잡는 직관적인 화면 기반 인터페이스는 어떻게 만들까?
ㆍ 어떤 맥락에서도 짜증을 불러일으키지 않는 원활한 워크플로를 구축하려면?
ㆍ 최고의 효용과 사용성을 선사하는 태스크 구조 설계하기
ㆍ 센스 있는 와우 포인트로 자꾸 찾고 싶은 페이지를 디자인하고 싶다면?

“인터페이스 디자인에 대해 진지하게 생각하는 사람이라면 누구나 책장에 꽂아 둬야 할 책. 플랫폼에 상관없이 적용할 수 있는 검증된 인터페이스 패턴을 다룬다.”
- 댄 새퍼, 《인터랙션 디자인》 저자


목차


제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
추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.