Post on 22-Jun-2015
description
모바일 스크린 디자인하기
10 Principles
for Mobile Design
다음커뮤니케이션 UX2팀 | 김기성
1
2
ericsson-mobility-report-november-2013
3
MOBILE: 이동하기[움직이기] 쉬운,
가동성의, 고정되어 있지 않은
4
CONTEXT
DEVICE
INTER- ACTION
5
CONTEXT
Immersion
6
CONTEXT
Both Hands Connectivity
7
CONTEXT
Lean Back
8
DEVICE 9
DEVICE
근접센서
10
DEVICE
가속도 센서
11
DEVICE 12
DEVICE 13
DEVICE 자이로센서
14
INTERACTION 15
INTERACTION 16
INTERACTION 17
INTERACTION 18
모바일 스크린 디자인 원칙
10 Principles
for Mobile Design
19
1. DIET INFORMATION 정보 다이어트 하기
PARETO'S LAW 전체 결과의 80%가 전체 원인의 20%에서 일어나는 현상
예를 들어, 20%의 고객이 백화점 전체 매출의 80%에 해
당하는 만큼 쇼핑하는 현상을 설명할 때 이 용어를 사용
할 수 있음. 2 대 8 법칙이라고도 함.
21 DIET INFORMATION
PC
Powerful Features
Mobile
Essential Features
Basic & Intuitive
Basic Function
Intuitive Structure
Powerful & Detail
Powerful Editing
Detail Management Tool
DIET INFORMATION
22
DIET INFORMATION
23
Desk-top
편지쓰기, 전체선택 , 새로고침, 편지함, 검색, 별표기,
답장, 전달, 삭제, 이동, 내게쓰기, 스팸차단, 환경설정,
상세검색, 스팸클리너, 첨부파일, 문자보관함, 탭구조, 사용량
DIET INFORMATION
24
Desk-top
편지쓰기, 전체선택 , 새로고침, 편지함, 검색, 별표기,
답장, 전달, 삭제, 이동, 내게쓰기, 스팸차단, 환경설정,
상세검색, 스팸클리너, 첨부파일, 문자보관함, 탭구조, 사용량
DIET INFORMATION
25
DIET INFORMATION
26
Desk-top
Mobile
편지쓰기, 전체선택 , 새로고침, 편지함, 검색, 별표기,
답장, 전달, 삭제, 이동, 내게쓰기, 스팸차단, 환경설정,
상세검색, 스팸클리너, 첨부파일, 문자보관함, 탭구조, 사용량
편지쓰기, 전체선택 , 새로고침, 편지함, 검색, 별표기,
답장, 전달, 삭제, 이동, 내게쓰기, 스팸차단, 환경설정,
상세검색, 스팸클리너, 첨부파일, 문자보관함, 탭구조, 사용량
DIET INFORMATION
27
2. REDUCE DRILL DOWN 정보의 단계 줄이기
STROLLING AROUND 주변의 다양한 방해요소들(Distractions)으로 인해
넓고 깊은 구조를 가지는 PC의 메뉴구조에 비해
모바일은 좁고 얕은 구조를 가지는 것이 사용자들이
작은 화면에서 좀 더 쉽게 정보에 접근할 수 있는
방법일 수 있음.
29 REDUCE DRILL DOWN
PC
Broad Menu
Structure
Mobile
Narrow Menu
Structure
Narrow & Shallow
Tab menu
Vertical Menu Layout
Sidebar
3~5 menu
Broad & Deep
Breadcrumb
Static Menu Layout
5~9 menu
REDUCE DRILL DOWN
30
Top Level View
Category View
Detail/Edit View
REDUCE DRILL DOWN
31
Top Level View
REDUCE DRILL DOWN
32
Category View
REDUCE DRILL DOWN
33
Detail/Edit View
REDUCE DRILL DOWN
34
Top Level View Category View Detail/Edit View
REDUCE DRILL DOWN
35
Top Level View Category View Detail/Edit View
REDUCE DRILL DOWN
36
3. CONTENTS OVER NAVIGATION 내비게이션 보다는 콘텐츠에 집중하기
OCCAM'S RAZOR 모바일의 작은 화면에서는 복잡한 내비게이션
메뉴보다 콘텐츠에 먼저 집중할 수 있도록 간결
한 구성을 하는 것이 사용자가 원하는 정보에 더
빨리 접근할 수 있는 방법이다.
CONTENTS OVER NAVIGATION
Contents > Navi
Emphasize contents
Pivot and Explore
Contextual Navigation menus
Contents < Navi
Lots of Navigation type
A number of Menu
PC
Rich Navigation
Mobile
Essential Navigation
CONTENTS OVER NAVIGATION
39
다음카페
퀵 & 슬라이드 기능으로 가고 싶은 게시판으로의 빠른 이동 제공
CONTENTS OVER NAVIGATION
40
위드 WITH
화보처럼 보여지는 나의 일상 플릭 한번으로 이어지는 콘텐츠 소비
CONTENTS OVER NAVIGATION
41
* 미디어 다음
Dive Deeper
Pivot Contents
다음앱
콘텐츠 소비를 유지시켜줄 수 있도록 Depth를 타고 들어 갈 수 있고 (Dive Deeper) 또 다른 카테고리로 쉽게 이동(Povot Contents) 할 수 있어야 함.
CONTENTS OVER NAVIGATION
42
4. FOCUS ON PRIMARY TASK 주요 과업에 집중하기
STEP BY STEP 작은 화면을 지닌 모바일에서는 한번에 하나의 Task를 보여줄 수 있도록 함.
멀티태스킹은 백그라운드 앱의 트랜지션을 통해 활용.
FOCUS ON PRIMARY TASK
PC
Multi -Task
Mobile
Single -Task
Compact Screen
Single-Window
Primary Information
Big Screen
Multi-Window
Various Information
FOCUS ON PRIMARY TASK
45
FOCUS ON PRIMARY TASK
46
FOCUS ON PRIMARY TASK
47
FOCUS ON PRIMARY TASK
48
FOCUS ON PRIMARY TASK
49
FOCUS ON PRIMARY TASK
50
FOCUS ON PRIMARY TASK
51
FOCUS ON PRIMARY TASK
52
5. ECONOMIZE LABOR 번거로운 입력 줄이기
REAL NATURE 인간은 본성적으로 귀찮은 것을 싫어하는 존재,
작은 화면에서 줄 수 있는 입력의 오류를 최소화 하는 방법에 대한
고민이 필요함. 모바일에서는 입력하는 Context에 대한 인지,
그리고 모바일 기기의 특성을 이용하는 것을 항상 고려해야 함.
54 ECONOMIZE LABOR
* Southwest Airlines website
Difficult Input
Mobile Device
Short input
Using Smart Sensors
Easy to Write
Static Location
Fast Input
Extra Peripherals
ECONOMIZE LABOR
PC
Easy Input-
Method
Mobile
Difficult Input-
Method
55
ECONOMIZE LABOR
56
http://www.uxbooth.com/articles/considerations-for-mobile-design-part-3-behavior/ ECONOMIZE LABOR
57
ECONOMIZE LABOR
58
ECONOMIZE LABOR
59
ECONOMIZE LABOR
60
6. KEEP CONTENTS SEAMLESSLY 콘텐츠의 연속성을 유지하기
SEAMLESS 어떤 형태의 모드에서라도 소비하는 콘텐츠에 끊김 없이 집
중할 수 있어야 함. 디바이스가 변경되어도 스크린 사이즈가
변경되더라도 콘텐츠 소비의 연속성을 유지하고 화면구성의
변화를 통해 상황에 맞는 이점(Benefit)을 만들어 내야 함.
62 KEEP CONTENTS SEAMLESSLY
PC
Mass Contents
Mobile
Light Contents
Short Contents
Broken Consumtion
Long Contents
In-Depth Contents
KEEP CONTENTS SEAMLESSLY
63
Keep Contents Experience
KEEP CONTENTS SEAMLESSLY
64
KEEP CONTENTS SEAMLESSLY
65
KEEP CONTENTS SEAMLESSLY
66
KEEP CONTENTS SEAMLESSLY
67
KEEP CONTENTS SEAMLESSLY
68
7. DESIGN FOR INPUT METHOD 입력방식에 맞추어 화면 디자인하기
FITT'S LAW 목표까지 움직이는데 필요한 시간은 목표크기와
목표거리까지의 함수이다.
70 DESIGN FOR INPUT METHOD
Natural Input
Finger based
Bigger Target
Detail Input
Keyboard / Mouse based
Small Target
PC
Mouse Keyboard
Mobile
Finger
DESIGN FOR INPUT METHOD
71
* Microsoft Windows8 Interface Guideline DESIGN FOR INPUT METHOD
72
* Microsoft Windows8 Interface Guideline DESIGN FOR INPUT METHOD
73
* Microsoft Windows8 Interface Guideline DESIGN FOR INPUT METHOD
74
DESIGN FOR INPUT METHOD
75
DESIGN FOR INPUT METHOD
76
* Mobile Frontier DESIGN FOR INPUT METHOD
77
REACH
OK
Disruptive Action
(Cancel/Delete)
Left to Right Arrangement
* Mobile First
EASY
Primary Action/ Navigation
DESIGN FOR INPUT METHOD
78
OK
EASY
REACH
DESIGN FOR INPUT METHOD
79
http://mobile.smashingmagazine.com/2013/03/25/c-swipe-navigation-on-android/ DESIGN FOR INPUT METHOD
80
DESIGN FOR INPUT METHOD
82
DESIGN FOR INPUT METHOD
83
8. SELECT OPTIMAL USER INTERFACE 올바른 사용자 인터페이스 선택하기
MENTAL MODEL 사람들은 경험을 통해 축적한 개념화를
토대로 시스템이나 환경을 이해하고
이들과 상호작용을 한다.
SELECT OPTIMAL USER INTERFACE
PC
GUI
Mobile
NUI
Touch Interaction
Touch
- Tap / Double Tap
- Pinch In/Out
- Flick / Swipe
Click Interaction
Pointer
- Click / Hover
- Selecting / Dragging
- etc.
SELECT OPTIMAL USER INTERFACE
86
PC Action (Mouse) Mobile Action (Touch)
Pointing X
Hovering X
Clicking Tap
Double Clicking Double Tap
Triple Clicking Triple Tap
Selecting Tap
Pressing Press
Wheeling Flick
Drag Press and Drag
X Rotate
X Pinch
X Multi-finger Gesture …
SELECT OPTIMAL USER INTERFACE
87
Desk-top
Mobile
SELECT OPTIMAL USER INTERFACE
88
Desk-top Mobile
SELECT OPTIMAL USER INTERFACE
89
SELECT OPTIMAL USER INTERFACE
90
9. CHOOSE NATURAL TRANSITION 자연스러운 변화(Transition) 선택하기
92
Mapping 제어장치와 효과 간의 관계.
핸들을 돌리거나 스위치를 올리거나 버튼을 누를 때
기대하는 효과가 사람들의 기대와
비슷할 때 매핑이 잘되었다고 하며 효과가
기대와 다를 때 매핑이 나쁘다고 한다.
배치, 움직임, 의미의 유사성을 통해 좋은 대응관계를
만드는 것이 중요하다.
CHOOSE NATURAL TRANSITION
PC
Pointer
Mobile
Gesture
Real Gesture-mapping
Tap / Pinch In / Out
Rotate, Throw, Blow, etc.
Pointer-mapping
Move, Click, Double Click,
Hover, Drag, etc.
CHOOSE NATURAL TRANSITION
93
94
Gesture Transition Description Gesture Usage
Press
Quick Change
애니메이션 없이 View변경 2개의 다른 타입의 툴이나 콘텐츠가
변환될 때 이용
Expand
스크린 상의 아이템이 콘텐츠를
밀어내며 확장
스크린 내 콘텐츠의 리스가 확장될
때 이용
Flip
마치 뒷면에 다른 View가 있는
것처럼 돌아가는 인터랙션
추가적인 설정, 정보를 보여주는 경
우 이용
CHOOSE NATURAL TRANSITION
95
Gesture Transition Description Gesture Usage
Press
Open to full screen
스크린상 아이템이 열려 전체 화
면으로 확장
아이템을 열거나 보고 있을 때 이용,
이 Transition은 아이템을 닫을 때
반대로 이용
Swipe
Horizontal slide along
스크린 상 이전 뷰를 밀어내고 새
로운 뷰가 좌 혹은 우로 슬라이드
새롭거나 관련된 콘텐츠를 보기위해
목록을 선택한 경우, 혹은 이전 스크
린에서 돌아가는 경우 이용
Horizontal slide over
새로운 뷰가 좌/우로 슬라이드 추가적인 콘텐츠를 보는 경우 이용
CHOOSE NATURAL TRANSITION
96
* Daum App Page Transition – Horizontal Slide along CHOOSE NATURAL TRANSITION
97
* Daum App Setting – Modal View CHOOSE NATURAL TRANSITION
98
* Daum App Today Widget – Flip CHOOSE NATURAL TRANSITION
99
10. SHOW EMOTIONAL ANIMATION 감성적인 애니메이션 보여주기
MIMICRY 자연세계에서 일어나는 다양한 환경, 행동
들로 부터 사용성을 향상시키기 위해 일부
특징들을 따라 하는 행위
SHOW EMOTIONAL ANIMATION
PC
Static
Mobile
Rich
Personal Context
Natural Context
Life on Device
Browser / App Type
Public Area
Static / Fixed Context
Browser Dependency
SHOW EMOTIONAL ANIMATION
102
SLOW IN AND OUT
SHOW EMOTIONAL ANIMATION
103
SHOW EMOTIONAL ANIMATION
104
ANTICIPATE
SHOW EMOTIONAL ANIMATION
105
SHOW EMOTIONAL ANIMATION
106
SECONDARY ACTION
SHOW EMOTIONAL ANIMATION
107
SHOW EMOTIONAL ANIMATION
108
SUMMARY
1. DIET INFORMATION | 정보 다이어트 하기
2. REDUCE DRILL DOWN | 정보의 단계 줄이기
3. CONTENTS OVER NAVIGATION | 내비게이션 보다는 콘텐츠에 집중하기
4. FOCUS ON PRIMARY TASK | 주요 과업에 집중하기
5. ECONOMIZE LABOR | 번거로운 입력 줄이기
6. KEEP CONTENS SEAMLESSLY | 콘텐츠의 연속성을 유지하기
7. DESIGN FOR INPUT METHOD | 입력방식에 맞추어 화면 디자인하기
8. SELECT OPTIMAL USER INTERFACE | 올바른 사용자 인터페이스 선택하기
9. CHOOSE NATURAL TRANSITION | 자연스러운 변화(Transition) 선택하기
10. SHOW EMOTIONAL ANIMATION | 감성적인 애니메이션 보여주기
Mobile은 PC의 축소판?
111
Mobile에 대한
명확한 이해를 통해
1. 정보구조는 콘텐츠에 집중할 수 있도록 간결화 하고
2. 인터페이스는 콘텐츠 소비에 순차적으로 끊김이 없어야 하며
3. 인터랙션은 자연스런 동작을 통해 콘텐츠 이동에 도움을 주어야 함
112
“New Rule is
Mobile First” Eric Schmidt, Google CEO
113
감사합니다. heisk@daumcorp.com
@pentaxzs