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
This document contains information about Shawn Camp from November 15, 2015. However, no other details are provided in the document beyond the name Shawn Camp and the date November 15, 2015. The document does not contain enough contextual information to provide a more detailed summary.
Ownership of fitness tracker devices in the U.S. grew from about four million users at the beginning of 2013 to an estimated to an estimated 15 million in 2014, according to research from Parks Associates. The sales of fitness tracker devices will reach 15.6 million units in 2015, according to Consumer Technology Association, formerly Consumer Electronics Association (CEA).
As the connected fitness tracker market grows, expect competition to mount not only from within but especially outside the market from other devices including smartwatches and smartphones/apps. In this study, you can learn more about the technology and market trends.
Fitbit started as a fitness tracker to encourage personal health but has expanded into a platform that tracks various health and activity metrics through wristbands and apps. It motivates users through social features, challenges, and weekly progress reports. However, Fitbit faces threats from competitors like Jawbone and Apple expanding into the wearables space through potential smartwatch devices.
The document summarizes the history and features of smartwatches. It notes that the idea originated from Dick Tracy's communicating watch in comics in the 1940s. Early smartwatches were introduced in 2004 but discontinued by 2008. Modern smartwatches allow users to access news, weather, sports and messages from their wrist and receive phone calls and text messages without their phone. They also track health and fitness metrics like calories burned and heart rate. While useful, smartwatches must be synced with a user's cell phone to function.
Smartwatches have evolved from simple devices that displayed limited information like calendars and phone connectivity to full-fledged computers on the wrist. Early smartwatches in the 2000s had basic features while models in the 2010s could make calls, send texts, access the internet, and track health data. Modern smartwatches often use touchscreens, pair with smartphones for full functionality, and focus on fitness tracking and health monitoring. Top brands today include Android Wear watches and upcoming models like the Apple Watch, with pricing ranging from $100 to $400. However, smartwatches have yet to achieve mass popularity due to issues with size, battery life, and being perceived more as tech devices than fashion accessories.
This document contains information about Shawn Camp from November 15, 2015. However, no other details are provided in the document beyond the name Shawn Camp and the date November 15, 2015. The document does not contain enough contextual information to provide a more detailed summary.
Ownership of fitness tracker devices in the U.S. grew from about four million users at the beginning of 2013 to an estimated to an estimated 15 million in 2014, according to research from Parks Associates. The sales of fitness tracker devices will reach 15.6 million units in 2015, according to Consumer Technology Association, formerly Consumer Electronics Association (CEA).
As the connected fitness tracker market grows, expect competition to mount not only from within but especially outside the market from other devices including smartwatches and smartphones/apps. In this study, you can learn more about the technology and market trends.
Fitbit started as a fitness tracker to encourage personal health but has expanded into a platform that tracks various health and activity metrics through wristbands and apps. It motivates users through social features, challenges, and weekly progress reports. However, Fitbit faces threats from competitors like Jawbone and Apple expanding into the wearables space through potential smartwatch devices.
The document summarizes the history and features of smartwatches. It notes that the idea originated from Dick Tracy's communicating watch in comics in the 1940s. Early smartwatches were introduced in 2004 but discontinued by 2008. Modern smartwatches allow users to access news, weather, sports and messages from their wrist and receive phone calls and text messages without their phone. They also track health and fitness metrics like calories burned and heart rate. While useful, smartwatches must be synced with a user's cell phone to function.
Smartwatches have evolved from simple devices that displayed limited information like calendars and phone connectivity to full-fledged computers on the wrist. Early smartwatches in the 2000s had basic features while models in the 2010s could make calls, send texts, access the internet, and track health data. Modern smartwatches often use touchscreens, pair with smartphones for full functionality, and focus on fitness tracking and health monitoring. Top brands today include Android Wear watches and upcoming models like the Apple Watch, with pricing ranging from $100 to $400. However, smartwatches have yet to achieve mass popularity due to issues with size, battery life, and being perceived more as tech devices than fashion accessories.
TA가 뭐예요? (What is a Technical Artist? 블루홀스튜디오)valhashi
게임 개발 프로젝트에서 TA(테크니컬 아티스트)의 역할, 업무, TA가 되기 위해 필요한 역량과 커리어패쓰에 대해 가볍게 설명한 문서입니다. 주로 블루홀스튜디오의 TA, TERA의 TA를 기준으로 설명되어 있습니다.
국내에서도 여러 게임 프로젝트에서 TA들이 중요한 역할을 하고 있지만, TA직군의 짧은 역사(약 10년)와, 업무의 다양성 때문에 아직도 업계 전반에 TA에 대한 이해는 부족하다고 보여집니다. 때문에, 프로젝트에서 TA의 역량을 충분히 활용하지 못하거나, TA로서 훌륭한 재능을 갖춘 인재들이 자신의 역량을 펼치지 못하는 일들이 있습니다. 그런 상황의 해소에 조금이라도 도움이 되기 위해, 그리고, 블루홀스튜디오 TA 채용에 도움이 되기 위해, 이 문서를 작성하였습니다.
게임 개발 업계에 계신 분들, 게임 개발자를 지망하시는 분들께서 TA에 대해 이해를 하시는데, 조금이라도 도움이 되었으면 좋겠습니다.
블루홀스튜디오 채용 페이지: http://www.bluehole.net/recruit/information.html
언플러그드 활동의 이론과 실제(Unplugged Activity / Computing)Sangsu Song
[메일 주소 변경되었습니다.]
송상수 sssong@swedunet.org / https://www.facebook.com/gi.sik.in / swedunet.org
교육부에서 연구학교 교원 전체를 대상으로한
언플러그드 활동의 이론과 실제(Unplugged Activity / Computing) 강의내용입니다.
언플러그드 컴퓨팅의 개론과 활동 사례가 제시되어 있습니다.
UI Renovation for Web Commerce Site I.A Seunghun Yoo
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
Stretching Guidance UI Design for Smart WatchSeunghun Yoo
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
Wearable FINtech :Banking App. UI Design for Smart WatchesSeunghun Yoo
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
New Remote Control UI with Transparent Display Seunghun Yoo
The document discusses the results of a study on the impact of COVID-19 lockdowns on air pollution. The study found that lockdowns led to short-term reductions in nitrogen dioxide and fine particulate matter pollution globally as human activity declined. However, the improvements were temporary and air quality returned to pre-pandemic levels as restrictions eased and activity increased again.
New Map Application UI based on Cognitive Aid Seunghun Yoo
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
Korea University Medical Design Report 2015 (1/8)Seunghun Yoo
Medical Design Report Example (OR Case)
Class : Product Development Course 2014
Senior Grade Course
School of Art & Design
Korea University
Jan. 2015.
http://coux.korea.ac.kr
Interface Evaluation and Design Report Example
Class : Interface Design Course 2014
Junior Grade Course
School of Art & Design
Korea University
Jan. 2015.
http://coux.korea.ac.kr
The Baker's Table App. UX Design ReportSeunghun Yoo
Design Methodology Report Example
Class : Design Methodology Course 2014
Junior Grade Course
School of Art & Design
Korea University
Jan. 2015.
http://coux.korea.ac.kr
kiid DM Class Final : Foreign Students Housing Service DesignSeunghun Yoo
The document discusses housing options for foreign students attending university in Korea, including small studio apartments and boarding houses. It provides statistics on the living situations of Japanese, Chinese, American, and German/Polish students. The document also lists potential information sources for foreign students seeking housing like real estate agencies and the internet.
More Related Content
Similar to Smart Phone + Smart Watch : Coloring App UI Design
TA가 뭐예요? (What is a Technical Artist? 블루홀스튜디오)valhashi
게임 개발 프로젝트에서 TA(테크니컬 아티스트)의 역할, 업무, TA가 되기 위해 필요한 역량과 커리어패쓰에 대해 가볍게 설명한 문서입니다. 주로 블루홀스튜디오의 TA, TERA의 TA를 기준으로 설명되어 있습니다.
국내에서도 여러 게임 프로젝트에서 TA들이 중요한 역할을 하고 있지만, TA직군의 짧은 역사(약 10년)와, 업무의 다양성 때문에 아직도 업계 전반에 TA에 대한 이해는 부족하다고 보여집니다. 때문에, 프로젝트에서 TA의 역량을 충분히 활용하지 못하거나, TA로서 훌륭한 재능을 갖춘 인재들이 자신의 역량을 펼치지 못하는 일들이 있습니다. 그런 상황의 해소에 조금이라도 도움이 되기 위해, 그리고, 블루홀스튜디오 TA 채용에 도움이 되기 위해, 이 문서를 작성하였습니다.
게임 개발 업계에 계신 분들, 게임 개발자를 지망하시는 분들께서 TA에 대해 이해를 하시는데, 조금이라도 도움이 되었으면 좋겠습니다.
블루홀스튜디오 채용 페이지: http://www.bluehole.net/recruit/information.html
언플러그드 활동의 이론과 실제(Unplugged Activity / Computing)Sangsu Song
[메일 주소 변경되었습니다.]
송상수 sssong@swedunet.org / https://www.facebook.com/gi.sik.in / swedunet.org
교육부에서 연구학교 교원 전체를 대상으로한
언플러그드 활동의 이론과 실제(Unplugged Activity / Computing) 강의내용입니다.
언플러그드 컴퓨팅의 개론과 활동 사례가 제시되어 있습니다.
UI Renovation for Web Commerce Site I.A Seunghun Yoo
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
Stretching Guidance UI Design for Smart WatchSeunghun Yoo
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
Wearable FINtech :Banking App. UI Design for Smart WatchesSeunghun Yoo
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
New Remote Control UI with Transparent Display Seunghun Yoo
The document discusses the results of a study on the impact of COVID-19 lockdowns on air pollution. The study found that lockdowns led to short-term reductions in nitrogen dioxide and fine particulate matter pollution globally as human activity declined. However, the improvements were temporary and air quality returned to pre-pandemic levels as restrictions eased and activity increased again.
New Map Application UI based on Cognitive Aid Seunghun Yoo
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
Korea University Medical Design Report 2015 (1/8)Seunghun Yoo
Medical Design Report Example (OR Case)
Class : Product Development Course 2014
Senior Grade Course
School of Art & Design
Korea University
Jan. 2015.
http://coux.korea.ac.kr
Interface Evaluation and Design Report Example
Class : Interface Design Course 2014
Junior Grade Course
School of Art & Design
Korea University
Jan. 2015.
http://coux.korea.ac.kr
The Baker's Table App. UX Design ReportSeunghun Yoo
Design Methodology Report Example
Class : Design Methodology Course 2014
Junior Grade Course
School of Art & Design
Korea University
Jan. 2015.
http://coux.korea.ac.kr
kiid DM Class Final : Foreign Students Housing Service DesignSeunghun Yoo
The document discusses housing options for foreign students attending university in Korea, including small studio apartments and boarding houses. It provides statistics on the living situations of Japanese, Chinese, American, and German/Polish students. The document also lists potential information sources for foreign students seeking housing like real estate agencies and the internet.
kiid DM 2013
Design Methodology Class Final
School of Art & Design, Korea University.
고려대학교 디자인조형학부 UX 디자인 과제결과물
2013 디자인 방법론 수업 (3학년)
-------------------------------------------------------------------------------------
Course Title : Design Methodologies
Course Grade : Junior Grade
-------------------------------------------------------------------------------------
Design Topic : B's choice - Fruits Branding Service for Farmers
Designers : Yeojin Park (Korea), Minjae Lee (Korea), Kyoungmin Kim (Korea)
Year : 2013
-------------------------------------------------------------------------------------
Description :
Korean fruits market and farmers are small sized, yet the competition is tough in highly globalized free market circumstances . It is reported that fruits price in big marts is not regarded reasonable by neither customers nor farmers. Thus, the service connecting two parts direct is a big key for a win-win situation.
B's choice is a design project which suggests a virtual fruits brand that is actively adopting mobile application and smart vending machine installed in crowed area especially subway stations. The secret of cheap price is coming from reducing the overhead costs, using information tech., and revitalizing flawed fruits by birds which have been abandoned just because of the shape so far in spite of their perfect flavor and nutrition. (the whole amount of the abandoned takes near 20% of total harvest.)
With the new trend of organic food seeking and pesticide-free movement, B's Choice is saving flawed fruits by BIRDs (that's why this brand design is B's Choice) and providing sweet and clean fruits to urban area and helping both of customers and farmers.
-----------------------------------------------------------------------
Directed by :
Prof. : Seung Hun Yoo
URL: http://coux.korea.ac.kr
School of Art & Design, Korea University
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
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