모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

모바일 스크린 디자인하기

10 Principles

for Mobile Design

다음커뮤니케이션 UX2팀 | 김기성

1

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


39

다음카페

퀵 & 슬라이드 기능으로 가고 싶은 게시판으로의 빠른 이동 제공


40

위드 WITH

화보처럼 보여지는 나의 일상 플릭 한번으로 이어지는 콘텐츠 소비


41

* 미디어 다음

Dive Deeper

Pivot Contents

다음앱

콘텐츠 소비를 유지시켜줄 수 있도록 Depth를 타고 들어 갈 수 있고 (Dive Deeper) 또 다른 카테고리로 쉽게 이동(Povot Contents) 할 수 있어야 함.


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


45


46


47


48


49


50


51


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

http://www.uxbooth.com/articles/considerations-for-mobile-design-part-3-behavior/













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


64


65


66


67


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


73


74


75


76

* Mobile Frontier DESIGN FOR INPUT METHOD

77

REACH

OK

Disruptive Action

(Cancel/Delete)

Left to Right Arrangement

* Mobile First

EASY

Primary Action/ Navigation


78

OK

EASY

REACH


79

http://mobile.smashingmagazine.com/2013/03/25/c-swipe-navigation-on-android/ DESIGN FOR INPUT METHOD

80

http://mobile.smashingmagazine.com/2013/03/25/c-swipe-navigation-on-android/










81

http://www.viddler.com/v/a2f0f1be

http://www.viddler.com/v/a2f0f1be


82


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.


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 …


87

Desk-top

Mobile


88

Desk-top Mobile


89


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.


93

Gesture Transition Description Gesture Usage

Press

Quick Change

애니메이션 없이 View변경 2개의 다른 타입의 툴이나 콘텐츠가

변환될 때 이용

Expand

스크린 상의 아이템이 콘텐츠를

밀어내며 확장

스크린 내 콘텐츠의 리스가 확장될

때 이용

Flip

마치 뒷면에 다른 View가 있는

것처럼 돌아가는 인터랙션

추가적인 설정, 정보를 보여주는 경

우 이용


95

Gesture Transition Description Gesture Usage

Press

Open to full screen

스크린상 아이템이 열려 전체 화

면으로 확장

아이템을 열거나 보고 있을 때 이용,

이 Transition은 아이템을 닫을 때

반대로 이용

Swipe

Horizontal slide along

스크린 상 이전 뷰를 밀어내고 새

로운 뷰가 좌 혹은 우로 슬라이드

새롭거나 관련된 콘텐츠를 보기위해

목록을 선택한 경우, 혹은 이전 스크

린에서 돌아가는 경우 이용

Horizontal slide over

새로운 뷰가 좌/우로 슬라이드 추가적인 콘텐츠를 보는 경우 이용


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


102

SLOW IN AND OUT


103


104

ANTICIPATE


105


106

SECONDARY ACTION


107


108

SUMMARY

Mobile은 PC의 축소판?

111

Mobile에 대한

명확한 이해를 통해

1. 정보구조는 콘텐츠에 집중할 수 있도록 간결화 하고

2. 인터페이스는 콘텐츠 소비에 순차적으로 끊김이 없어야 하며

3. 인터랙션은 자연스런 동작을 통해 콘텐츠 이동에 도움을 주어야 함

112

“New Rule is

Mobile First” Eric Schmidt, Google CEO

113

감사합니다. [email protected]

@pentaxzs

모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Design

Transcript of 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)