smart phone + smart watch : coloring app ui design

28
Term Project 인터페이스디자인론 Final-Term: Interaction Design 휴먼ICT융합학과 천혜림 I 노우리 2015-12-17 1

Upload: seunghun-yoo

Post on 26-Jan-2017

415 views

Category:

Design


4 download

TRANSCRIPT

Term Project

인터페이스디자인론

Final-Term: Interaction Design

휴먼ICT융합학과 천혜림 I 노우리

2015-12-17 1

2015-12-17 2

Contents

1. Introduction

1-1. Topic

1-2. Drawing Interaction

1-3. Problem

1-4. Drawing Interaction

1-5. Coloring

2. User Research

1-1. Persona

1-2. Task Flow

3. System Analysis

3-1. Persona

3-2. Function Type

3-3. Palette Analysis

4. UI Design

4-1. IA

4-2. App Design Guide

4-3. Interaction Design

5. GUI Design

5-1. Smartwatch App

5-2. Smartphone App

6. UT

6-1. Prototype

6-2. UI 사용성 평가

7. 참고문헌

1-1. Topic

모바일 드로잉 인터랙션에서 다중기기를 활용한 컬러링 Task 개선(Smartphone + Smartwatch, Companion application)

3

1. Introduction

2015-12-17

1-2. Drawing Interaction

• 사람과 사물의 드로잉 인터랙션(아날로그)

4

1. Introduction

2015-12-17

• 사용자와 시스템의 드로잉 인터랙션(디지털)

사람 캔버스도구

팔레트

붓/색연필

사용자 모바일 App

터치 펜

툴바영역

스케치영역

1-3. Problem

모바일 드로잉 인터랙션의 문제점

5

1. Introduction

2015-12-17

팔레트영역

문제점

MobileDrawing

Interaction

사용성

- 그리기 도구 팔레트가 활성화 될 때 스케치 영역의 절반 이상을가리게 되어 작업 중인 그림을 확인하기가 어렵다.

- 또한 작업 중인 그림과 관련하여 색상이나 펜을 선택하는데있어 효율성이 떨어진다.

감성- 팔레트에서 색을 섞고, 붓으로 캔버스에 그림을 그리는 실제

드로잉에 대한 아날로그 감성이 부족하다.

1-4. Solution

모바일 드로잉 인터랙션의 솔루션

6

1. Introduction

2015-12-17

캔버스

Dual Screen: 그리기도구를스마트워치에 옮겨작업영역을분할

1) 모바일app에서 스케치영역을 가리던 그리기 도구(팔레트)를 스마트워치 화면으로 옮겨스케치 작업 영역을 확보할 수 있다.

2) 스케치영역과 팔레트가 분리되어 아날로그적 드로잉 인터랙션 감성을 느낄 수 있다.3) 기어S2의 휠 인터랙션을 활용하여 사용 시 즐거움을 더할 수 있다.

팔레트

참고1. 멘탈모델: 드로잉 인터랙션팔레트와 캔버스가 분리되어 팔레트에서 색을 선택해 캔버스에 색칠하는 드로잉 인터랙션

참고2. 논문: Duet: Exploring Joint Interactions on a Smart Phone and a Smart Watch= 스마트폰을 canvas, 워치를 tool palette로 각 인터페이스를 나누어 인터랙션

1-5. Coloring Task

• 도안에 색을 채우는 컬러링 북: 비밀의 정원

컬러링 북이란 페이지마다 전문가들의 정교한 밑그림이 그려져 있어 독자가 색칠을 할

수 있도록 만든 그림책을 말한다. 집중해서 색을 칠하다 보면 스트레스가 해소된다는

책이다. 대표적으로 꼽히는 것은 영국 일러스트레이터 조해너 배스포드의 '비밀의 정원

'인데, 정원에서 볼 수 있는 나무, 꽃, 나비 등이 정교하게 그려져 있다.

7

1. Introduction

2015-12-17

• 명화 컬러링 키트: 피포페인팅

명화 색칠 키트란 캔버스에 표시된 대로 물감을 칠하면 명화와 똑같은 그림을 그릴 수

있도록 만든 키트이다. 캔버스와 물감, 붓 등이 들어있어 따로 재료를 준비하지 않아도

된다. 도안에는 물감의 번호가 빼곡히 적혀있는데, 해당 공간을 같은 번호의 물감으로

색칠만 하면 그림이 완성된다.

나이 33

결혼 여부 미혼

직업 프리랜서 개발자

지역 서울 역삼동

계획 추구, 성실함, 책임감

2-1. Persona

8

2. User Research

2015-12-17

Demographics Motivation Goals / Needs Frustrations Personality

컬러링을 예쁘게 완성하고 싶다.

컬러링을 심심할 때 언제든지 하고

싶다.

스마트폰으로 컬러링을 할 경우 실제

드로잉처럼 몰입할 수 있도록 아날로

그적 감성이 있었으면 좋겠다.

완성된 컬러링이 생각보다 안 예쁘다.

색연필과 컬러링 북을 휴대하기가 어렵

다.

컬러링북에 칠하면 지울 수 없기 때문에

칠하기 전에 색을 확인해보고 싶다.“스트레스가 많은 날에는

집에서 혼자 색칠놀이

(컬러링)에 집중해요.

어떤 색을 입힐지

상상한대로 완성했을 때

가장 뿌듯해요.”

Bio Technology Adoption

지영은 프리랜서 개발자로 불규칙한 생활패턴 때문에 스트레스가 많은 편이다. 컬러링 북을 펼쳐놓고 색칠하는 것이 그녀의 요새

가장 큰 낙이라고 할 수 있다. 일에서도 꼼꼼한 성격으로 완벽주의를 추구하는 그녀답게 컬러링 작업 역시 상상한대로 완성되었을

때 가장 큰 기쁨을 느낀다. 완성된 그림은 SNS에 공유한다. 그러나 반대로 완성된 그림의 색이 조화롭지 못하거나 색감이 맘에 들

지 않을 때는 스트레스를 받게 된다. IT 환경에 익숙하기 때문에 드로잉 앱을 통해 컬러링을 진행해보기도 했다. 무거운 스케치북

을 휴대하지 않아도 어디서든지 틈틈히 컬러링 연습을 할 수도 있고 미리 선택한 색이 어떤 느낌인지 알 수 있기 때문인데, 실제 스

케치북에서 하는 느낌과는 괴리감이 있고 또 색깔 선택 등에 어려움을 겪어 재미를 붙이지 못했다.

Extrovert Introvert

Sensing Intuition

Thinking Feeling

Judging Perceiving

Amusement

Fear

Achievement

Social

Growth

IT and Internet

Software

Mobile Apps

Social Network

2-2. Task Flow

Main Task: 컬러링

컬러링 Task Goal

: 밑그림이 주어지고 내가 원하는 색으로 다 채워 완성

9

2. User Research

2015-12-17

도안을 고른다. 색(색연필)을 고른다. 색칠한다.

Task 1: Coloring Book

도안을 고른다. 팔레트 활성화

색칠한다.

Task 2: Drawing App

팔레트 비활성화

색을 고른다.

두께를 조정한다.

지우개를 선택한다.

3. System Analysis

2015-12-17

3-1. Drawing App

분석 대상: Drawing App 10개

14

종류 상세

android iOS

1 2 3 4 5 6 7 8 9 10

S메모톡톡

스케치Drawing

DeskSketch

kitSketchBoxX

PaperLine

BrushiOS

MemoSketches Sketch

펜(펜의 질감, 굵

기 변화)

타입 선택 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

굵기 조절 ○ ○ ○ ○ ○ ○

불투명도 조절 ○ ○

색상

색상 팔레트 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

Hue 테이블 ○ ○ ○ ○ ○ ○ ○

명도 변화 ○ ○ ○ ○

지우개(지우개 모양,

크기 변화)

사이즈 선택 ○ ○ ○ ○ ○ ○

투명도 조절 ○

Android① S메모

② 톡톡스케치

③ Drawing Desk

④ Sketch kit

⑤ SketchBookX

iOS① Paper

② Line Brush

③ iOS Memo

④ Sketches

⑤ Sketch

112015-12-17

3-3. Palette Analysis

그리기 도구 팔레트(공통)

▲ S메모(1번)

▲ Paper(6번)

2. Salience팔레트의 도구들 간에 선택된 도구들이 현저하게 눈에 띄는 지 여부를 살펴본다.

- Good Case(S메모): 선택된 도구의 크기 및 Highlight 효과를 통해 높은 Salience를갖게 된다.

- Bad Case(Paper): dim 처리를 통해 선택 여부의 차이를 주고자 하였으나 차이가 미비하여 Salience가 낮아 처음 사용자의 경우 눈에 쉽게 띄지 않는다.

1. Attention팔레트의 그리기 도구 들이 밀접하게 위치해 있어 Display Proximity가 높다.

- Divided Attention이 필요할 때(전체 팔레트 element 인식, 색상 변경 및 두께 조절등)는 Task proximity 높은 상황이기 때문에 Performance가 향상된다.

- Focused Attention이 필요할 때(하나의 task에 집중해야 할 때)는 Task proximity가 낮은 상황이기 때문에 Performance가 저하된다.

▲ Drawing Desk(3번)

3. System Analysis

12

3. System Analysis

2015-12-17

3-3. Palette Analysis

그리기 도구 팔레트(공통)

◀ Drawing Desk(3번)

4. SDT 이론

앞서 분석했던 Salience와 색 범주화가 적절하게 표현되었을 경우 Signal과 Noise의 구분이 명확하기 때문에 사용자가 Drawing 및 Coloring Task를 진행하는 데의Performance의 향상이 기대되지만 반대의 경우 performance가 저하될 것으로 예상된다.

3. 색범주화팔레트의 그리기 도구의 상태(선택 여부, 현)를 색상으로 범주화한 것이 적절한지 살펴본다.

- Good Case1) ios메모(8번): 선택되지 않은 색상은 회색으로 선택된 색은 Salience가 비교적 높은 주황색으로 표현 되어 어떤 도구가 선택되었는지 구분이 쉽다.2) Sketches(9번): 위와 마찬가지로 선택된 도구만 현재 선택된 색으로 표기된다. Salience도 높을 뿐만 아니라 사용자의 Attention이 필요한 영역을 줄여주는 효과가있어 low task에서 높은 performance가 예상된다.

- Bad Case: Drawing Desk(3번): 선택된 색상이 도구마다 다르고 하단의 미니 색상영역 때문에 Salience가 낮아 색상 범주화 측면에서는 적절하지 않다고 생각된다.

▲ ios 메모(8번) ▲ Sketches(9번)

13

3. System Analysis

2015-12-17

3-3. Palette Analysis

펜 도구

1. Attention여러 종류의 펜과 지우개가 밀접하게 위치해 있어 Display Proximity가 높다.

Spatial proximity로 결합되어 지각됨으로써, 지각적 경합이 일어나 특정 펜 또는 지우개에 대한 Focused attention을 방해할 가능성이 높다. 따라서 펜을 고르는 Low task proximity에서 펜을 focused attention할 때 Performance를 저하시킬 것으로 예상된다.

Display proximityHigh (close)

Display proximityLow (distant)

▲ Line Brush(7번)

▲ Paper(6번)

▲ S메모(8번)

▲ Drawing Desk(3번)

3-3. Palette Analysis

색상 도구

14

3. System Analysis

2015-12-17

World

ActionSequence

Goals

Intention

Execution

Interpretation

Evaluation

Perception

변환

단계

(Perform

ance)

평가

단계

(Eva

luat

ion

)

표현단계 (Presentation)

표명단계 (Articulation)1. Information Processing평가단계 (Evaluation) >> 표명단계 (Articulation)

색 팔레트가 자극이 되어 지각되고, Working Memory에서 색과펜 도구를 읽는 작업을 하게 된다. 이때, 축적된 색 정보를 Long-Term Memory에서 가져와 지각한 색에 대한 정보를 해석한다.내가 칠하고 싶은 색이 이 색이 맞는지 또는 이전에 칠하던 색과 잘어울릴 것인지 평가를 한 뒤 컬러링(goal)을 실행하게 된다.

7 stage of User’s Activity (Donald Norman) ex) S메모 그리기 도구 팔레트

15

3. System Analysis

2015-12-17

3-3. Palette Analysis

색상 도구

▲ 톡톡스케치(2번)

1. Visual Search전체 색상 개수가 한 페이지를 넘어가기 때문에 한 눈에 파악하기 어렵다.

Target이 방해 자극distractor와 변별하기 어렵기 때문에 Serial Search가 발생할 가능성이 높다.

2. Mental Workload사용자가 원하는 색상이 존재하지 않을 경우 HUE 테이블을 사용하는 방식이 지나치게 복잡하다.

Task(Hue 테이블에서의 색상 선택)가 사용자의 정보처리의 한계를 넘는 resource를 요구할 경우 mental workload가 overload되고 이는 task의 포기까지 이어질 수 있다.사용자의 목적(goal)과 부합된 색상 리스트가 제공된다면 perception level에서의resource가 비교적 효율적으로 사용될 것으로 생각된다.

16

3. System Analysis

2015-12-17

3-3. Palette Analysis

지우개 도구

HighDisplay proximity

LowDisplay proximity

▲ 톡톡스케치(2번) ▲ S메모(1번)

▲ Sketch kit(4번)

▲ Line Brush(7번)

Display Proximity지우개 도구는 Low Task proximity로 Focused attention을 하게 된다.

지우개 인터페이스가 High display proximity로 디자인 되어있는팔레트는 퍼포먼스를 저하시킬 수 있다. 반면에 Low display proximity 로 디자인 되어 있는 인터페이스에서는 퍼포먼스를 향상시키게 된다.

2015-12-17 17

3. System Analysis3-3. Palette Analysis

모바일 팔레트 >> 스마트워치 팔레트

종류문제점 도출

(기존 Smarphone 팔레트)개선점 제안

(Smartwatch 팔레트)

공통팔레트의 그리기 도구 들이 밀접하게 위치해 있어 Display Proximity가 높다.이는 사용자가 진행하는 작업의 성격에 따라 Trade-off가 발생시킨다.

캔버스 영역과 팔레트 영역을 분리하여 팔레트 내의 그림 도구들간의 DisplayProximity는 유지하되 캔버스와 팔레트영역은 떨어뜨려 Low task proximity task에서의 performance 향상을 돕는다.

색상앱에서 제공되는 색상이 실제 컬러링에서 사용되는 색상과 불일치할 때, 사용자가원하는 색상을 탐색하기까지 필요한 단계가 증가하고 이는 시스템의 복잡도를 증가시킨다.

오프라인 컬러링에 사용하는 파버카스텔 24색을 도입한다. 실제 빈번하게 사용되는 컬러 제공을 통해 사용자의 색 선택 작업을 간소화한다.

펜드로잉 작업에서 필요한 도구들을 모두 포함하는 것에 중심을 두어 High task proximity를 고려한 배치가 고려되었으나 컬러링 작업에서 도구 선택은 비교적Low task proximity의 성격을 갖고 있다.

펜 선택 작업을 단순화한다. 컬러링 작업의 Goal에 적합한 텍스쳐(색연필)로 제공한다(색연필의 두께는 1~30px).

지우개펜의 경우와 마찬가지로 Low task proximity가 고려된 UI가 도출되어야 할 것으로 생각된다.

펜, 색상 선택과 동일한 레벨에서 적절한 거리를 두고 위치시켜 Spatial proximity에 의한 지각적 경합이 일어나는 것을 막는다.

4-1. IA

Palette Contents

1) 색상

- 파버카스텔 24색 색연필의 컬러

2) 두께

- 펜 종류는 색연필만 제공

- 굵기 조절 (1~30px 까지의 범위)

3) 지우개

- 굵기 조절 X

- 메인에서 on/off로 Fage depth없이 제시

18

4. UI Design

2015-12-17

Palette

ColorStroke

Eraser

24 color1-30px

192015-12-17

4-2. App Design Guide

삼성 기어S2 디자인 Guideline

• Rotary Action

4. UI Design

• Control for App-specific Features

4-3. Interaction Design

1) App Flow

2) Wireframe

3) Interaction

202015-12-17

Loading Page

Tutorial Page

App FlowMain Page

Color Select

Main Page

Stroke Select

EraserSelect

4. UI Design

4-3. Interaction Design

1) App Flow

2) Wireframe

3) Interaction

212015-12-17

Main Page

Color Select

Stroke Select

EraserSelect

4. UI Design

Touch

4-3. Interaction Design

1) App Flow

2) Wireframe

3) Interaction

222015-12-17

color picker 이동

가운데 color 변화

px 수치 정보 변화

테두리의 굵기 visual 변화

WheelInteraction

4. UI Design

5-1. Smartwatch App

23

5. GUI Design

2015-12-17

5-2. Smartphone App

24

5. GUI Design

2015-12-17

6-1. Prototype

Smartphone + Smartwatch (Companion application)

25

6. UT

2015-12-17

6-2. UI 사용성 평가

제이콥 닐슨의 UI 사용성 척도 5가지 (5점 척도로 평가)

26

6. UT

2015-12-17

척도스마트폰 팔레트(S메모) 스마트워치 팔레트

측정 1 측정 2 평균 측정 1 측정 2 평균

학습성 2 2 2 4 3 3.5

기억 용이성 4 3 3.5 5 4 4.5

효율성 4 3 3.5 5 5 5

에러율 4 5 4.5 3 3 3

만족도 3 3 3 5 4 4.5

0

2

4

6

학습성

기억용이성

효율성에러율

만족도

<UI 사용성 평가 결과>

스마트폰 팔레트(S메모) 스마트워치 팔레트

• Wickens–Engineering Psychology and Human Performance

• Wickens–공학심리학 [번역본 제3판]

• 김진우 – HCI 개론

• Xiang ‘Anthony’ Chen - Duet: Exploring Joint Interactions on a Smart Phone and a Smart Watch, CHI2014

• Steven Houben - WATCHCONNECT: A Toolkit for Prototyping Smartwatch-Centric Cross-Device Applications, CHI2015

2015-12-17 27

7. 참고문헌

Term Project

감사합니다

2015-12-17 28

휴먼ICT융합학과 천혜림 I 노우리