사용자를 끌어들이는 UX/UI의 비밀 (MAU는 높이고 이탈률은 낮추는 UX/UI 실무 패턴 80)

제니퍼티드웰,찰스브루어,아인발렌시아

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

저자:찰스브루어CharlesBrewer
다양한디지털제품출시경험이풍부한사용자경험(UX)디자이너다.웹1.0시대부터비자(Visa),유나이티드항공(UnitedAirlines),월트디즈니(WaltDisneyCompany)와함께일하며웹사이트와웹앱디자인을진행했다.UX와소프트웨어,비즈니스가만나는교차점에집중해목적에적합하며배우기쉽고사용하기간편한소프트웨어를디자인하고있다.파크미(Parkme)의예약수익프로덕트와빅토리어스(Victorious)의비디오CMS및소셜미디어관리플랫폼을만들었다.

저자:아인발렌시아AynneValencia
마케팅회사샌프란시스코디지털서비스(SanFranciscoDigitalServices)의디자인디렉터이자캘리포니아컬리지오브아트(CaliforniaCollegeoftheArts)의부교수로재직하고있다.기술과디자인이인간행동에미치는영향에대한깊은이해를바탕으로디지털제품및서비스디자인분야에서주요글로벌브랜드와협업했다.이베이(eBay)의플랫폼전략구축에참여했으며,어도비의개발자커뮤니티,뱅크오브아메리카(BankofAmerica)의중소기업커뮤니티등의서비스를출시했다.최근에는제스처로제어되는홈오디오프로젝트를진행하고있다.

역자:박재현
서울대학교에서경제학을전공하고,영국왕립예술대학교(RoyalCollegeofArts)에서서비스디자인을공부했다.졸업후UX디자인컨설턴시pxd에서UX컨설턴트로일하면서다양한도메인의UX전략,컨설팅,글로벌리서치프로젝트를수행하고있다.회사와개인블로그(brunch.co.kr/@jaehyun-design)에틈틈이UX리서치,디자인시스템관련글을쓰고있다.HCI학회와UX얼라이언스(UXAlliance)등에서케이스스터디를통해일하면서배운노하우를공유하고있다.

감수:한상택
전산과학을전공하고그래픽디자인을하다UI디자이너가되었다.인터랙션보다사람과도구사이의정보교환이라는관점에더관심을갖고인터페이스를공부하고있다.pxdUXtech랩(lab.pxd.co.kr)을운영하며기존사용자경험디자인방법에기술을접목하여사람들의다양한생각을보다잘이해하는도구를만들고있다.

제3판서문:인터페이스는삶을더쉽게만들어야한다

1장문제를정확히파악하고제대로해결하는디자인

사용자를둘러싼컨텍스트파악하기
_당신은사용자가아니다
_인터랙션은대화처럼
_콘텐츠와기능을사용자에게맞춰라
_숙련도에따라달라지는것들
_인터페이스는목표를달성하는수단일뿐
_‘왜?’라고묻고또묻기
_문제를정확히파악하고제대로해결하기
사용자를있는그대로이해하는법
_직접관찰
_케이스스터디
_설문조사
_퍼소나(personas)
_디자인리서치는마케팅리서치가아니다
인터페이스에서사람들은무슨생각을하고어떻게행동할까?
_안전한탐색(SafeExploration)
_즉각적만족(Instantgratification)
_만족화(Satisficing)
_중도에바꾸기(ChangesinMidstream)
_선택미루기(DeferredChoices)
_점진적창조(IncrementalConstruction)
_습관화(Habituation)
_짬시간활용(Microbreaks)
_공간기억(SpatialMemory)
_미래계획기억(ProspectiveMemory)
_능률적반복(StreamlinedRepetition)
_키보드만사용하기(KeyboardOnly)
_소셜미디어(SocialMedia),소셜프루프(SocialProof),협업(Collaboration)
성공적인인터랙션디자인을위한필수요소

2장콘텐츠구성하기:정보설계와애플리케이션구조

사용에방해되지않는정보구조만들기
정보구조란?
_사용자를위한정보공간
접근법
_정보와정보의표현을분리하라
상호배타적이면서전체를포괄하기
콘텐츠를구성하고분류하는방법
_위치(Location)
_가나다순(Alphabetical)
_시간(Time)
_카테고리(Category)또는다면필터(Facet)
_위계(Hierarchy)
_숫자(Number)
태스크와작업흐름위주의앱디자인하기
_자주사용하는항목을눈에띄게하라
_일련의단계로작업‘쪼개기’
_다양한채널과화면크기는우리가직면해야하는현실
_정보를카드형태로보여줘라
화면유형의시스템디자인
개요보기:목록이나그리드위에서항목과옵션보여주기
집중하기:한번에하나만표시하기
만들기:창작을위한툴제공하기
수행하기:하나의태스크를효과적으로완료하기
패턴
_01추천(Feature),검색(Search),탐색(Browse)
_02모바일다이렉트액세스(MobileDirectAccess)
_03스트림(Streams)과피드(Feeds)
_04미디어브라우저(MediaBrowser)
_05대시보드(Dashboard)
_06캔버스(Canvas)와팔레트(Palette)
_07마법사(Wizard)
_08설정편집기(SettingsEditor)
_09다양한보기모드(AlternativeViews)
_10작업공간나누기(ManyWorkspaces)
_11도움말시스템(HelpSystems)
_12태그(Tags)
유연하면서도단단한정보구조를만들자

3장이동하기:표지판,길찾기,내비게이션

정보와태스크공간이해하기
표지판
길찾기
내비게이션
_글로벌내비게이션(GlobalNavigation)
_유틸리티내비게이션(UtilityNavigation)
_연관및인라인내비게이션(AssociativeandInlineNavigation)
_관련콘텐츠(RelatedContent)
_태그(Tags)
_소셜(Social)
디자인할때고려할점
_내비게이션디자인과시각적표현분리하기
_인지부담
_이동거리최소화하기
내비게이션모델
_허브앤스포크(HubandSpoke)
_완전히연결된(FullyConnected)모델
_멀티레벨(Multilevel)또는트리(Tree)
_단계별모델
_피라미드모델
_넓고얕은내비게이션
패턴
_13명확한진입점(ClearEntryPoints)
_14메뉴페이지(MenuPage)
_15피라미드(Pyramid)
_16모달패널(ModalPanel)
_17딥링크(DeepLink)
_18탈출구(EscapeHatch)
_19메가메뉴(FatMenu)
_20사이트맵푸터(SitemapFooter)
_21로그인툴(Sign-InTools)
_22프로그레스인디케이터(ProgressIndicator)
_23브레드크럼(Breadcrumbs)
_24주석이붙은스크롤바(AnnotatedScrollBar)
_25전환애니메이션(AnimatedTransition)
변함없는가치를전달하는내비게이션

4장화면구성요소의레이아웃

레이아웃의기본
_시각적계층구조(VisualHierarchy)
_시각적계층구조적용하기
_물체의중요도가늠하기
_게슈탈트법칙4가지
_시선의흐름(VisualFlow)
_동적인디스플레이사용하기
_반응형활성화
_단계적정보공개
_사용자인터페이스영역
패턴
_레이아웃
_정보분리하기
_26시각적프레임워크(VisualFramework)
_27센터스테이지(CenterStage)
_28균등한그리드(GridofEquals)
_29제목을붙인섹션(TitledSections)
_30모듈탭(ModuleTabs)
_31아코디언(Accordion)
_32접히는패널(CollapsiblePanels)
_33이동식패널(MovablePanels)

5장비주얼스타일과아름다움

비주얼디자인의기초
_시각적계층구조
_구성
_색상
_타이포그래피
_가독성
_감정불러일으키기
_이미지
기업용애플리케이션을위한시각디자인
_접근성
다양한비주얼스타일
_스큐어모픽(Skeuomorphic)
_일러스트
_플랫디자인(FlatDesign)
_미니멀리즘
_적응형/매개변수형디자인
아름다움이가진힘을과소평가하지말라

6장모바일인터페이스

모바일디자인의어려움과기회영역
_작은화면크기
_다양한화면너비
_터치스크린
_문자입력하기
_물리적환경의제약
_위치인식
_사회적영향과집중력의한계
모바일디자인에접근하는방법
_모바일사용자에게무엇이필요할까?
_웹/앱을본질에맞게발라내기
_모바일기기의하드웨어활용하기
_콘텐츠를선형으로배치하기
_가장일반적인인터랙션시퀀스최적화
_소개할만한좋은사례들
패턴
_34버티컬스택(VerticalStack)
_35필름스트립(Filmstrip)
_36터치툴(TouchTools)
_37하단내비게이션(BottomNavigation)
_38컬렉션(Collections)과카드(Cards)
_39무한리스트(InfiniteList)
_40넉넉한터치영역(GenerousBorders)
_41로딩(Loading)또는프로그레스인디케이터(ProgressIndicators)
_42유기적인앱연동(RichlyConnectedApps)
모바일화하기

7장목록만들기

목록의유스케이스
정보구조떠올려보기
무엇을보여줄것인가?
_선택된항목세부사항표시하기
_무거운시각요소보여주기
_아주긴목록관리하기
_카테고리나계층으로정리된목록표시하기
패턴
_432분할패널(Two-PanelSelector)또는분할화면(SplitView)
_44단일화면상세진입(One-WindowDrilldown)
_45포괄목록(ListInlay)
_46카드(Cards)
_47섬네일그리드(ThumbnailGrid)
_48캐러셀(Carousel)
_49페이지네이션(Pagination)
_50항목으로즉시이동하기(JumptoItem)
_51문자/숫자스크롤바(Alpha/NumericScroller)
_52신규항목추가행(New-ItemRow)
수많은목록들

8장작업하기:동작과명령

탭(Tap),스와이프(Swipe),핀치(Pinch)
회전(Rotate)과흔들기(Shake)
버튼(Buttons)
메뉴바(MenuBars)
팝업메뉴(Pop-UpMenus)
드롭다운메뉴(Drop-DownMenus)
툴바(Toolbars)
링크(Links)
조작패널(ActionPanels)
호버툴(HoverTools)
한번클릭하기vs.더블클릭하기
키보드조작(KeyboardActions)
_단축키370
_탭이동(TabOrder)370
드래그앤드롭(Drag-and-Drop)
텍스트명령(TypedCommands)
어포던스(Affordance)
객체직접조작(DirectManipulationofObjects)
패턴
_53버튼그룹(ButtonGroups)
_54호버(Hover)또는팝업툴(Pop-UpTools)
_55조작패널(ActionPanel)
_56완료버튼강조(ProminentDoneButton)
_57지능형메뉴항목(SmartMenuItems)
_58미리보기(Preview)
_59스피너(Spinner)와로딩인디케이터(LoadingIndicator)
_60취소가능성(Cancelability)
_61다단계실행취소(MultilevelUndo)
_62명령기록(CommandHistory)
_63매크로(Macros)
가장중요한동작이제일잘보이게

9장복잡한데이터보여주기

인포그래픽의기초
_데이터를구성하는조직모델
_전주의적(preattentive)변수의힘
_데이터탐험하기
_데이터재배열하기
_검색과필터링으로필요한데이터만보기
_특정데이터값이궁금할때
패턴
_64데이터팁(Datatip)
_65데이터스포트라이트(DataSpotlight)
_66동적쿼리(DynamicQ