Interface Design Theory Class Term Project kiid Interface Design Theory 2015 Graduate Course Class Final School of Art & Design, Korea University. 고려대학교 디자인조형학부 UX 디자인 과제결과물 2015 인터페이스 디자인론 수업 (석사과정) ------------------------------­---------­-­-------------------­------------------­---­----- Course Title : Interface Design Course Grade : Junior Grade -­----- http://coux.korea.ac.kr https://www.youtube.com/playlist?list=PLao_uRZmxCuHpCK43z5Ag0x7WQA3tKrfN

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

2. 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. 참고 문헌

3. 1-1. Topic
모바일 드로잉 인터랙션에서 다중기기를 활용한 컬러링 Task 개선
(Smartphone + Smartwatch, Companion application)
3
1. Introduction
2015-12-17

4. 1-2. Drawing Interaction
• 사람과 사물의 드로잉 인터랙션(아날로그)
4
1. Introduction
2015-12-17
• 사용자와 시스템의 드로잉 인터랙션(디지털)
사람 캔버스도구
팔레트
붓/색연필
사용자 모바일 App
터치 펜

5. 툴바 영역
스케치 영역
1-3. Problem
모바일 드로잉 인터랙션의 문제점
5
1. Introduction
2015-12-17
팔레트 영역
문제점
Mobile
Drawing
Interaction
사용성
- 그리기 도구 팔레트가 활성화 될 때 스케치 영역의 절반 이상을
가리게 되어 작업 중인 그림을 확인하기가 어렵다.
- 또한 작업 중인 그림과 관련하여 색상이나 펜을 선택하는데
있어 효율성이 떨어진다.
감성
- 팔레트에서 색을 섞고, 붓으로 캔버스에 그림을 그리는 실제
드로잉에 대한 아날로그 감성이 부족하다.

6. 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로 각 인터페이스를 나누어 인터랙션

7. 1-5. Coloring Task
• 도안에 색을 채우는 컬러링 북: 비밀의 정원
컬러링 북이란 페이지마다 전문가들의 정교한 밑그림이 그려져 있어 독자가 색칠을 할
수 있도록 만든 그림책을 말한다. 집중해서 색을 칠하다 보면 스트레스가 해소된다는
책이다. 대표적으로 꼽히는 것은 영국 일러스트레이터 조해너 배스포드의 '비밀의 정원
'인데, 정원에서 볼 수 있는 나무, 꽃, 나비 등이 정교하게 그려져 있다.
7
1. Introduction
2015-12-17
• 명화 컬러링 키트: 피포페인팅
명화 색칠 키트란 캔버스에 표시된 대로 물감을 칠하면 명화와 똑같은 그림을 그릴 수
있도록 만든 키트이다. 캔버스와 물감, 붓 등이 들어있어 따로 재료를 준비하지 않아도
된다. 도안에는 물감의 번호가 빼곡히 적혀있는데, 해당 공간을 같은 번호의 물감으로
색칠만 하면 그림이 완성된다.

8. 나이 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

9. 2-2. Task Flow
Main Task: 컬러링
컬러링 Task Goal
: 밑그림이 주어지고 내가 원하는 색으로 다 채워 완성
9
2. User Research
2015-12-17
도안을 고른다. 색(색연필)을 고른다. 색칠한다.
Task 1: Coloring Book
도안을 고른다. 팔레트 활성화
색칠한다.
Task 2: Drawing App
팔레트 비활성화
색을 고른다.
두께를 조정한다.
지우개를 선택한다.

10. 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
Desk
Sketch
kit
Sketch
BoxX
Paper
Line
Brush
iOS
Memo
Sketches Sketch
펜
(펜의 질감, 굵
기 변화)
타입 선택 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
굵기 조절 ○ ○ ○ ○ ○ ○
불투명도 조절 ○ ○
색상
색상 팔레트 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
Hue 테이블 ○ ○ ○ ○ ○ ○ ○
명도 변화 ○ ○ ○ ○
지우개
(지우개 모양,
크기 변화)
사이즈 선택 ○ ○ ○ ○ ○ ○
투명도 조절 ○
Android
① S메모
② 톡톡스케치
③ Drawing Desk
④ Sketch kit
⑤ SketchBookX
iOS
① Paper
② Line Brush
③ iOS Memo
④ Sketches
⑤ Sketch

11. 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. 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 Case
1) ios메모(8번): 선택되지 않은 색상은 회색으로 선택된 색은 Salience가 비교적 높
은 주황색으로 표현 되어 어떤 도구가 선택되었는지 구분이 쉽다.
2) Sketches(9번): 위와 마찬가지로 선택된 도구만 현재 선택된 색으로 표기된다.
Salience도 높을 뿐만 아니라 사용자의 Attention이 필요한 영역을 줄여주는 효과가
있어 low task에서 높은 performance가 예상된다.
- Bad Case: Drawing Desk(3번): 선택된 색상이 도구마다 다르고 하단의 미니 색상
영역 때문에 Salience가 낮아 색상 범주화 측면에서는 적절하지 않다고 생각된다.
▲ ios 메모(8번) ▲ Sketches(9번)

13. 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 proximity
High (close)
Display proximity
Low (distant)
▲ Line Brush(7번)
▲ Paper(6번)
▲ S메모(8번)
▲ Drawing Desk(3번)

14. 3-3. Palette Analysis
색상 도구
14
3. System Analysis
2015-12-17
World
Action
Sequence
Goals
Intention
Execution
Interpretation
Evaluation
Perception
변환단계
(Performance)
평가단계(Evaluation)
표현단계 (Presentation)
표명단계 (Articulation)
1. Information Processing
평가단계 (Evaluation) >> 표명단계 (Articulation)
색 팔레트가 자극이 되어 지각되고, Working Memory에서 색과
펜 도구를 읽는 작업을 하게 된다. 이때, 축적된 색 정보를 Long-
Term Memory에서 가져와 지각한 색에 대한 정보를 해석한다.
내가 칠하고 싶은 색이 이 색이 맞는지 또는 이전에 칠하던 색과 잘
어울릴 것인지 평가를 한 뒤 컬러링(goal)을 실행하게 된다.
7 stage of User’s Activity (Donald Norman) ex) S메모 그리기 도구 팔레트

15. 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. 16
3. System Analysis
2015-12-17
3-3. Palette Analysis
지우개 도구
High
Display proximity
Low
Display proximity
▲ 톡톡스케치(2번) ▲ S메모(1번)
▲ Sketch kit(4번)
▲ Line Brush(7번)
Display Proximity
지우개 도구는 Low Task proximity로 Focused attention을 하
게 된다.
지우개 인터페이스가 High display proximity로 디자인 되어있는
팔레트는 퍼포먼스를 저하시킬 수 있다. 반면에 Low display
proximity 로 디자인 되어 있는 인터페이스에서는 퍼포먼스를 향
상시키게 된다.

17. 2015-12-17 17
3. System Analysis
3-3. Palette Analysis
모바일 팔레트 >> 스마트워치 팔레트
종류
문제점 도출
(기존 Smarphone 팔레트)
개선점 제안
(Smartwatch 팔레트)
공통
팔레트의 그리기 도구 들이 밀접하게 위치해 있어 Display Proximity가 높다.
이는 사용자가 진행하는 작업의 성격에 따라 Trade-off가 발생시킨다.
캔버스 영역과 팔레트 영역을 분리하여 팔레트 내의 그림 도구들간의 Display
Proximity는 유지하되 캔버스와 팔레트영역은 떨어뜨려 Low task proximity
task에서의 performance 향상을 돕는다.
색상
앱에서 제공되는 색상이 실제 컬러링에서 사용되는 색상과 불일치할 때, 사용자가
원하는 색상을 탐색하기까지 필요한 단계가 증가하고 이는 시스템의 복잡도를 증
가시킨다.
오프라인 컬러링에 사용하는 파버카스텔 24색을 도입한다. 실제 빈번하게 사용되
는 컬러 제공을 통해 사용자의 색 선택 작업을 간소화한다.
펜
드로잉 작업에서 필요한 도구들을 모두 포함하는 것에 중심을 두어 High task
proximity를 고려한 배치가 고려되었으나 컬러링 작업에서 도구 선택은 비교적
Low task proximity의 성격을 갖고 있다.
펜 선택 작업을 단순화한다. 컬러링 작업의 Goal에 적합한 텍스쳐(색연필)로 제공
한다(색연필의 두께는 1~30px).
지우개
펜의 경우와 마찬가지로 Low task proximity가 고려된 UI가 도출되어야 할 것으
로 생각된다.
펜, 색상 선택과 동일한 레벨에서 적절한 거리를 두고 위치시켜 Spatial proximity
에 의한 지각적 경합이 일어나는 것을 막는다.

18. 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

19. 192015-12-17
4-2. App Design Guide
삼성 기어S2 디자인 Guideline
• Rotary Action
4. UI Design
• Control for App-specific Features

20. 4-3. Interaction Design
1) App Flow
2) Wireframe
3) Interaction
202015-12-17
Loading
Page
Tutorial
Page
App Flow
Main
Page
Color
Select
Main
Page
Stroke
Select
Eraser
Select
4. UI Design

21. 4-3. Interaction Design
1) App Flow
2) Wireframe
3) Interaction
212015-12-17
Main
Page
Color
Select
Stroke
Select
Eraser
Select
4. UI Design
Touch

22. 4-3. Interaction Design
1) App Flow
2) Wireframe
3) Interaction
222015-12-17
color picker 이동
가운데 color 변화
px 수치 정보 변화
테두리의 굵기 visual 변화
Wheel
Interaction
4. UI Design

23. 5-1. Smartwatch App
23
5. GUI Design
2015-12-17

24. 5-2. Smartphone App
24
5. GUI Design
2015-12-17

25. 6-1. Prototype
Smartphone + Smartwatch (Companion application)
25
6. UT
2015-12-17

26. 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메모) 스마트워치 팔레트

27. • 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. 참고문헌

28. Term Project
감사합니다
2015-12-17 28
휴먼ICT융합학과 천혜림 I 노우리