SlideShare a Scribd company logo
1 of 38
Download to read offline
AND562 :: Advanced Interface Design
Term Project
Stretching guidance UI design on smart watch
1
Cho SungIk, Lee SinJae
Departmentof ComputerScienceand Engineering
MediaLab
AND562 :: Advanced Interface Design
Contents
2
 Motivation & Suggestion
 Current design analysis
 Design new
• Task analysis
• UI Flow
• Detail design for GUI & Feedback
 Integration
• Design prototyping
• Implementation
• User test
• Packaging & Service
AND562 :: Advanced Interface Design
Motivation - We Need Exercise
3
 Sitting is killing you [TIME, 2014]
• “Sitting is the new smoking”
• Sedentary behavior to poor health, including heart disease diabetes, obesity and hyper tension
AND562 :: Advanced Interface Design
Stretching?
4
 Benefits
• If done properly, stretching can prevent injury, relax the muscles, increase range of motion and flexibility, and better one's performance
• Stretching increases blood flow which prevents hardening of the arteries and it also produces synovial fluid, which lubricates the joints that are surrounded by the
muscles
• Stretching stabilizes the body's natural balance and posture, and aligns the joints leading to better coordination
• Most of all, easy to do
 Variety of stretching
• Static stretching / Dynamic stretching / PNF stretching / Ballistic or bouncing stretching
AND562 :: Advanced Interface Design
Healthcare features on Smart Watch
5
 Key features of smart watch(Samsung Gear S2, Apple watch, etc.)
• Active monitoring of health state
• Check the motion of user to determine idle or alert (exercise)
 Usually manufactures focused on exercise, not stretching
AND562 :: Advanced Interface Design
Suggestion
6
 Project : Let people stretch them with smart watch
• 생리학적 approach : 제자리에서 쉽게 따라 할 수 있는 stretching 방법 및 올바른 동작 모델을 제공
• 기술적 approach : 사용자의 동작을 인식, 올바른 stretching 가이드를 따랐는지 비교/가이드 (machine learning)
• 디자인 approach : 손목 위 작은 해상도를 가지는 device 의 공간적 제약을 극복한 GUI 제작, Haptic 을 이용한 효율적 feedback
 Design Strategy
• 현재 Smart watch 가 제공하는 exercise 를 위한 UI 분석, 이론을 토대로 한 문제점 도출
• 새로운 기능 정의 및 task 분석
• Task 별 UI flow 작성
• 디자인 이론에 입각한 GUI 디자인
• Memory, Training 시스템을 고려한 feedback 설계
AND562 :: Advanced Interface Design
Current Design & UI Flow
 신규 Activity 입력
7
새로운
입력 시작
tap
tap
tap
tap
wheel
wheel
wheel
AND562 :: Advanced Interface Design
Current Design & UI Flow
8
 Activity 결과 확인 및 보상 화면
※ 보상 화면
: 활동 목표 달성한 요일
에 badge 표시
wheel
tap
wheel
tap
tap
AND562 :: Advanced Interface Design
Current Design & UI Flow
9
 Idle 상태를 알려주고, 사용자의 활동을 소극적으로 유도
Haptic
feedback
30분 단위 재 알림
1시간 동안
움직임이 없으면
사용자
움직임
감지
※ 보상 화면
:칭찬 메시지
AND562 :: Advanced Interface Design
Design analysis
10
• 정보 인지를 위해 필요한 attention case 및 SEEV model
• Attention cases
• Selective attention : 필요한 정보를 선택적으로 attention
• Focused attention : 중요한 정보에 focus attention 이 쉽게 발생
• Divided attention : 주변부의 테두리를 이용해 목표대비 현재 위치를 쉽게 인지
• SEEV model
• Salience : 가장 중요한 정보인 지속 시간을 크게 배치
• Effort : H/W 특성 상 AOI 를 이동하는 cost 는 크지 않음 (eye filed 內)
• Expectancy : 시계가 업데이트 되므로 자연스럽게 필요한 정보에 시선이 고정
됨
• Value : 화면상에 나타나는 모든 정보는 사용자에게 가치 있는 정보
• Spatial proximity
• 현재 수행 중인 시간을 확인하면, 목표 까지 남은 시간도 알고 싶기 때문에, 목표치
를 같은 화면, 지속시간 하단에 공간적으로 가깝게 배치
• Display compatibility
• Pictorial realism 에 부합하는 아이콘 제공
• Graph perception
• 목표치 달성률은 % 로 표시하지 않고, analog 형태인 그래프로 표시, 원형 테두리가
어느 정도 채워졌는지 직관적으로 인식
• 정확한 시간 정보는 digital 수치로 표시
• Peripheral cues
• 지속 시간을 체크하면서, 주변시로도 대략적인 달성 정도 판별 가능
AND562 :: Advanced Interface Design
Design analysis
11
• 정보 인지를 위해 필요한 attention case 및 SEEV model
• 눌러서 실행이 가능하다는 것을 알려줄 salience / expectancy 가 부족
• 사용자가 선택을 하도록 유도하는 affordance 부재
• 너무 작은 icon 으로 인해, 충분한 Salience 부족
• 과도한 focused attention 필요
AND562 :: Advanced Interface Design
Design analysis
12
• Display compatibility
• Compatibility of display movement
• Moving pointer display : 24시간 scale 이 고정되어 있고, wheel 의
회전에 따라서 pointer 가 움직이며 해당 시간에 대한 정보를 표시
• Continuous 시스템
• 시간이 연속적이기 때문에, 한 방향으로 계속 이동하면, 날짜 이동도
가능함. Mental model 과 부합
• Display integration
• 24시간 시계 형태가 의미하는 mental model 과 부합하는 pie chart
graph 로 시간대별 activity 유형 정보 제공
• Display compatibility
• Compatibility of display movement
• Moving pointer display : Wheel 의 회전에 따라서 pointer 가 같이 움
직임
• 1 눈금 당 10분씩 증가
• Pictorial realism 에 부합
• Ecological compatibility 에 부합
AND562 :: Advanced Interface Design
Design analysis
13
• Absolute judgement & Information theory
• 다양한 차원의 자극을 제공
: 5가지 색상, 운동 정보, 날짜, 24시간 scale 등
• 다수의 차원에 해당하는 자극이 공존함에 performance 저하
• Mental workload
• 뇌의 한정된 정보처리 한계 때문에 정보처리에 필요한 resource가 증가 할수록
performance 저하
• Mental operations 수를 최소화 해야 하는 graph guideline에 위배
AND562 :: Advanced Interface Design
Design analysis
14
• Visual search
• SSTS (Serial Self-Terminating Search)
: item 의 개수에 따라 검색 시간 증가
• Clutter
• Numerosity : item 개수 증가로 selective attention 방해
• Proximity or readout : 시각의 1도 내에 있는 다른 자극은 방해요소
• Disorganizational : 해당 없음
• Heterogeneous : 파이 차트의 크기가 제각각이라서 visual search 효율 저하
• Bottom up factors : 검색 성능에 영향을 주는 특성
• 모든 대상을 확인할 필요는 없으므로 exhaustive search 경우는 아님
• 색상 구분에 의한 parallel search 가능
• Pointer, scale 눈금에 의한 conjunction search 가능
• Digital 정보는 digital 정보끼리 homogeneous 하고, analog 정보는 analog
정보끼리 homogeneous 하므로, 서로간의 간섭이 적어 search 시간 감소
• Top down factors : 검색 효율성에 영향을 주는 특성
• 걸어 다닌 시간대를 노란색으로 분리하면 1차 narrow search 가능
• 현재 보고 있는 시간대를 쉽게 인지하도록 pointer 제공
• 수량 정보는 가운데에서, 시간에 종속되는 정보는 시계와 관련된 외곽에서
검색
AND562 :: Advanced Interface Design
Design analysis
15
• Graph guide line 기반 분석
• 편향 없이 판단 가능한 물리적 차원을 사용하라 : 실제 대상 물리량이 다른 두 그래
프를 함께 표시하고 있어 변화 추이에 대한 편향을 야기
• 자료 잉크 비율을 높게 유지하라 : 스크롤 중 그래프와 상관이 없는 정보(날씨, 기온)
가 함께 표기되어 불필요한 시각 검색을 야기
• 여러 그래프들을 일관성 있게 부호화하라 : 범례에 대한 강조가 약하며 변인의 부호
화 과정에서 일관된 기준을 제시하지 않은 상태로 혼용
• Frame of reference
• Frame of reference의 정렬은 인간 수행을 뒷받침하며 Mental rotation 능력은 잠
재적인 개인차가 존재하므로 시스템 레벨에서 지도에 대한 올바른 방향을 제시해
야 할 필요성이 있음
• Stages of Navigational Knowledge
• 지리적 영역에 대한 정신적 표상은 다음의 세가지 유형의 지식에 기초함
• Landmark knowledge, Route knowledge, Survey knowledge
• 현재 위치 확인을 목적으로 map을 사용할 경우 현출한 이정표들의 외형에 대한 시
각적 표상을 강조
• 길 안내를 위한 목적으로 map을 사용할 경우 현재 위치로부터 다음 목적지까지의
절차화된 언어적 표현을 강조
• 운동 경로 등의 정보 표현을 목적으로 map을 사용할 경우 survey knowledge의 확
장을 도모할 수 있는 수치적 거리 표기 등의 방법을 고려 가능
• 수치적 거리 표기가 지도 내에 없고, 공간적으로 멀리 떨어져서 배치 됨
AND562 :: Advanced Interface Design
Review of the current display design
16
 Pros
• Icon 의 pictorial realism
• 사용자의 mental model 과 일치하는 circular wheel interaction : ecological compatibility, display compatibility 만족
• Spatial proximity 를 고려한 화면 배치
• 운동 강도에 따른 color coding 및 24시 scale 에 맞춘 graph 로 visual search 시간 단축
 Cons
• 일부 아이콘의 작은 크기로 과도한 focus attention 요구
• 일부 기능 진입을 위한 entry point 의 affordance 부재
• 일부 화면의 복잡도가 매우 높아, training 되지 않은 사람에게 과도한 work load 요구, stress요인 제공
AND562 :: Advanced Interface Design
Task scenario 1
17
 Smart watch 기반 stretching guide
• Dobi는 아침에 출근하면서 smart watch를 착용한다.
• 업무의 대부분이 컴퓨터를 활용하기 때문에 출근하자마자 책상 앞에 앉았다.
• 한동안 업무로 인해 움직임이 없자 smart watch가 idle alert을 울린다.
• 통상적인 idle alert을 확인하자 stretching guide로의 이행 여부를 묻는다.
• Dobi는 stretching guide를 실행하고 smart watch에는 추천 stretching과 선택 가능한 다른 stretching motion들이 표시된다.
• 추천 stretching을 선택하면 smart watch에 guide를 위한 사람 모양의 픽토그램이 등장하고 요구되는 동작이 애니메이션으로 표시된다.
• Dobi는 가볍게 손목을 털어 stretching mode로 진입하고 smart watch가 일정한 주기로 진동하기 시작한다.
• 조금 전 화면에 표시되었던 동작대로 stretching을 수행하자 일정한 주기로 진동하던 smart watch는 stretching 최고점에 가까이 갈수록 진동
주기가 짧아지고, 최고점에 도달하자 진동을 멈춘다.
• 한동안 같은 자세를 유지하고 있으면 수행 완료를 알리는 벨 소리가 울리고 smart watch가 다시 일정한 주기로 진동하기 시작한다.
• Dobi가 이전 동작의 역순으로 stretching 동작을 마무리하고 가볍게 손목을 털자 stretching mode가 종료되고 stretching의 feedback이 표시된다.
AND562 :: Advanced Interface Design
Task scenario 2
18
 운동 관리 application 연동 stretching guide
• Dobi는 간만에 운동을 하기로 결심하고 헬스장을 찾았다.
• 본격적인 운동 시장에 앞서 stretching을 하기로 하고 smart phone app 목록에서 smart stretching을 선택한다.
• Smart watch의 wheel을 돌려 ‘운동 전후‘를 선택하고 화면을 탭 한다.
• Smart watch에 guide를 위한 사람 모양의 픽토그램이 등장하고 요구되는 동작이 애니메이션으로 표시된다.
• Dobi는 가볍게 손목을 털어 stretching mode로 진입하고 smart watch가 일정한 주기로 진동하기 시작한다.
• 조금 전 화면에 표시되었던 동작대로 stretching을 수행하자 일정한 주기로 진동하던 smart watch는 stretching 최고점에 가까이 갈
수록 진동 주기가 짧아지고, 최고점에 도달하자 진동을 멈춘다.
• 한동안 같은 자세를 유지하고 있으면 수행 완료를 알리는 벨 소리가 울리고 smart watch가 다시 일정한 주기로 진동하기 시작
한다.
• Dobi가 이전 동작의 역순으로 stretching 동작을 마무리하고 가볍게 손목을 털자 stretching mode가 종료되고 S헬스 등의 운동 관리
앱이 실행된다.
AND562 :: Advanced Interface Design
Task scenario 3
19
 Smart phone 기반 stretching management
• Dobi는 그간 수행한 stretching 정보를 확인하기 위해 smart phone에서 Smart watch stretching management app을 구동한다.
• 초기 화면으로 일간 stretching 수행 빈도 및 수행률이 표시되고 각종 메뉴가 나타난다.
• Stretching tracking 메뉴로 이동한 후 주간, 월간을 선택해가며 idle alert대비 stretching 수행 횟수 빈도와 각 stretching type별 수행 상황
을 확인한다.
• Stretching type icon을 선택하자 해당 stretching의 guide 애니메이션과 해당 stretching을 통해 얻을 수 있는 효과들이 표시된다.
• Smart watch의 wheel을 이용하여 해당 stretching의 선호도를 조절한 후 application을 종료한다.
AND562 :: Advanced Interface Design
Hierarchical Task Analysis
20
Idle alert
1
Stretching selection
2
Do stretching
3
Evaluation
4
Device 진동
1.1
디스플레이 확인
1.2
Idle alert 해제
1.3
추천
stretching 확인
2.1
Stretching 선택
2.2
애니메이션
가이드 확인
2.3
Evaluation
모드 진입
4.1
Reference 모션
일치도 확인
4.2
일일
수행 현황 확인
4.3
Inducing
Stretching
0
Stretching
모드 진입
3.1
Folding 과정
진동 feedback
3.2
최고점
도달에 대한 알람
3.3
Stretching
자세 유지
3.4
자세 유지
종료 알람
3.5
Unfolding 과정
진동 feedback
3.6
Stretching
모드 종료
3.7
휠을 이용한
후보 stretching 선택
2.2.1
확대된 해당
stretching 정보 확인
2.2.2
화면 tab을
통해 stretching선택
2.2.3
Stretching
선택 상태 확인
3.1.1
손목 흔들기
3.1.2
Stretching
시작 화면 확인
3.1.3
Stretching
모션 완료 확인
3.7.1
손목 흔들기
3.7.2
Stretching
모드 종료 확인
3.7.3
Digit 표기
모션 일치도 확인
4.2.1
휠을 이용한
표시 항목 변경
4.2.2
구간별
모션 일치도 확인
4.2.3
화면 tab을
통한 모션 확인모드
종료
4.2.4
통상
idle alert 화면 확인
1.3.1
휠을 이용한
화면 전환
1.3.2
Idle alert
해제 및
stretching 항목 선택
2.2.3
AND562 :: Advanced Interface Design
UI Flow for Main Task
21
팔을 뻗어서
스트레칭 해보세요 팔을 위로 뻗어서
스트레칭 해보세요
activity
Task 1 Task 2 Task 4
Haptic / Sound
feedback
Task 3
스트레칭 성공!
기존
제안
AND562 :: Advanced Interface Design
팔을 뻗어서
스트레칭 해보세요
1
팔을 위로 뻗어서
스트레칭 해보세요
시작
2-1
팔을 위로 뻗어서
스트레칭 해보세요
시작
두 손을 깍지 끼고
머리 위로 끝까지 뻗은 후
진동이 울리면
천천히 내리세요
2-2
Detail UI Flow : Task 1/2 (Stretching guide)
22
1초 후
이동
Character Animation 반복
: attention, training
간단하지만 명확한
설명 text
시작 버튼
: affordance
wheel scroll
자세한 동작
설명 text
 스트레칭 종류는 random 하게 제공
마지막 스트레칭
: 2시간 전
마지막 스트레칭 시간 제공
: Situation Awareness
AND562 :: Advanced Interface Design
팔을 위로 뻗어서
스트레칭 해보세요
시작
2 3-2
5초 동안 버텨보세요
5
3-3
두 팔을 천천히
내리세요
3-1
두 손을 깍지 끼고
머리 위로 뻗으세요
Detail UI Flow : Task 3 (Stretching feedback)
23
시작
버튼
Count down
펼쳐지는 animation
: cue, attention, ecological
compatibility
움츠러드는 animation
: cue, attention, ecological
compatibility
Haptic
feedback (Type1)
 너무 많은 haptic 제공은 혼란을 줄 수 있으므로, 꼭 필요할 때만 제공 (stress, working memory load)
Haptic
feedback (Type1)
반짝이는 animation
: cue, attention, ecological
compatibility
AND562 :: Advanced Interface Design
Detail UI Flow : Task 4 (Stretching evaluation)
24
두 팔을 천천히
내리세요
3
성공
실패
잘했어요 !
한 번 더하기
다시 시도
스트레칭 실패...
2초
4-1
4-2
종료
TBD : 결과 화면
또는 일/주간 성취
graph
4-3
2
Haptic
feedback (Type2)
종료
TBD : 보상 화면
종료
4-4
wheel
scroll
Haptic
feedback (Type3)
AND562 :: Advanced Interface Design
Design prototype (1)
25
 앱 아이콘
• 원하는 앱을 쉽게 찾을 수 있도록 높은 salience 및 simplicity 유지
• Pictorial realism 에 입각한 아이콘 및 건강을 상징할 수 있는 초록색 배경을 사용해 직관성 향상
AND562 :: Advanced Interface Design
Design prototype (2)
26
 스트레칭 시간 알림
• 스트레칭 시간을 haptic 으로 feedback
• Long term memory 를 recall 하지 않아도 스트레칭 하지 않은 시간을 쉽게 알 수 있도록 (situation awareness)
마지막 스트레칭 시간 표시
• 스트레칭 하지 않은 시간 간격에 따라 다른 color 의 테두리를 이용해 경각심을 불러일으켜 (적당한 stress 제공) 참여를 유도
AND562 :: Advanced Interface Design
Design prototype (3)
27
 스트레칭 동작 가이드
• 스트레칭 동작을 설명하는 이미지와 text 를 동시에 제공
• Pictorial realism 을 가지는 character animation 을 이용해, 동작 가이드
• 간단한 text 로 명확한 동작 지시, 방향 및 특징을 강조
• Wheel scroll 을 이용한 자세한 설명 text 제공
• UI framework 의 scroller 에서 scroll bar affordance 기본 제공
• 전체적인 UI depth 를 줄이고, 자세하고 긴 내용을 숨겨서 배치함으로써 사용자의 work load 를 낮춤
• 시작하기 버튼
• 버튼과 text 가 사용자에게 충분한 affordance 를 제공
• Scroll 과 상관없이 항상 동작함으로써, training 된 사용자는 자세한 설명을 보지 않고도 바로 빠른 수
행 가능(shortcut)
AND562 :: Advanced Interface Design
Design prototype (4)
28
 스트레칭 동작 수행 중 feedback
• 퍼져 나가는 animation 과 움츠러드는 animation 으로 팔을 뻗는 동작과 되돌아오는 동작을 가이드
• 화면의 simplicity 를 유지하기 위해 디스플레이 표상의 회화적 실재성은 포기하고, 동적 부합성은 유지
• 최고점에 도달했을 때 count down 으로 자세 유지 가이드
• 최고점에 도달했을 때와, count down 이 끝났을 때 각각 haptic feedback 을 제공
• Training된 사용자는 화면을 보지 않아도, haptic 만으로 시간에 맞추어 수행 가능
• 수행 중 발생하는 concurrent feedback 이지만 기본적인 UI 의 복잡도가 높지 않으므로, 추가적인 cognitive load 는 발생하지 않고, 오히려 자세 유지
시간 체크를 위한 work load 를 낮출 것으로 기대
AND562 :: Advanced Interface Design
Design prototype (5)
29
 스트레칭 결과
• 테두리의 color 및 icon 으로 성공/실패 여부를 전달
• 성공 화면에서는 wheel scroll 로 성공으로 인한 보상의 진척도를 체크할
수 있음
• 연속으로 수행 시 더 큰 보상을 제공함으로써, 더 큰 스트레칭 효과 유도
• 문맥에 맞는 text
• 성공 시 “한 번 더 하기”, 실패 시 “다시 시도”
AND562 :: Advanced Interface Design
Experiment design
30
 연령, 성별 및 wearable device 경험 여부가 각기 다른 피 실험군 선정
 해당 기능이 탑재된 Gear S2 device 를 착용하고 1주일 간 실험에 참가
• 사전에 스트레칭 가이드에 무조건 따를 필요는 없으나, 가급적 따라줄 것을 요청
 실험 목표
• Stretching 동기 부여 및 동작 유도를 위한 UI 설계의 적합 여부 확인 (디자인)
• Stretching 동작 인식 정확도에 대한 만족도 확인 (기술)
• Stretching 주요 기능에 대한 사용자의 평가가 카노 모델 상 어떤 범주에 속하는지 확인 (마케팅)
• 주요 기능
• 참여자는 스트레칭 동작을 요청 받을 수 있다.
• 참여자는 다양한 스트레칭 동작을 수행 할 수 있다.
• 참여자는 동작을 평가 받고 보상을 수령할 수 있다.
AND562 :: Advanced Interface Design
Questionnaire
31
 설문 방법
• 1차 설문 : 1주일 시험 사전 미팅 시 3~4 회 테스트 수행 후 작성
• 답안 : 1. 만족, 2 조금 만족, 3. 보통, 4. 조금 불만족, 5. 불만족
1. 스트레칭 가이드가 어떤 동작을 의미하는지 이해가 쉬웠다.
2. 스트레칭 동작 수행 중 화면 및 진동 피드백이 적절했다.
3. 스트레칭 동작 수행 후 성공하는 것이 어렵지 않았다.
4. 스트레칭 동작 성공 시 실제 근육 이완 효과를 느꼈다.
5. 스트레칭 동작 후 더 하고 싶은 생각이 들었다.
• 2차 설문 : 1주일 실험 완료 후 1차 설문 재 작성 및 2차 설문 작성
• 답안 : 1. 만족한다. 2. 그럴 거라고 예상한다. 3. 중립, 4. 그렇더라도 쓸 수는 있다. 5. 불만이다.)
1. 스마트 와치 착용 중에 스트레칭 동작을 요청 받을 수 있다면 어떻겠는가? (기능)
2. 스마트 와치 착용 중에 스트레칭 동작을 요청 받을 수 없다면 어떻겠는가? (비기능)
3. 다양한 스트레칭 동작을 수행 할 수 있다면 어떻겠는가? (기능)
4. 다양한 스트레칭 동작을 수행 할 수 없다면 어떻겠는가? (비기능)
5. 스트레칭 동작을 평가 받고 결과에 따라 보상을 받을 수 있다면 어떻겠는가? (기능)
6. 스트레칭 동작에 대한 평가/보상이 없다면 어떻겠는가? (비기능)
AND562 :: Advanced Interface Design
Simple result
32
 랩 내 무작위 3명 실험
 1차 설문 결과
 2차 설문 결과
피실험자 스트레칭 요청 다양한 동작 평가/보상
A I I E
B E I E
C E E E
결과(카테고리) 감동요인 무관심 감동요인
피실험자 동작 이해 피드백 적절 성공난이도 실제 효과 재시도의사
A 2 1 4 2 1
B 2 1 1 3 3
C 1 1 2 3 2
결과(AVG) 조금 만족(1.7) 만족 (1) 조금 만족(2.3) 보통 (2.7) 조금 만족(2)
AND562 :: Advanced Interface Design
Future work
33
 체계적인 보상 시스템 마련
 Stretching 동작 인식 구현 정확도 향상
 Stretching 지원 동작 추가
 Experiment design 에 맞추어 실험 진행 및 결과 분석
 Kano model 분석 결과에 따른 기능 수정
AND562 :: Advanced Interface Design
Appendix
34
 Interface design issue for Gear S2 device
 State transition model for stretching activity
 Prospect theory, Framing
 Kano model
AND562 :: Advanced Interface Design
Interface design issues
35
 Round display and wheel based input system
• Target device ‘Gear S2’ adopted round display and wheel based input system
• User’s mental model could not clearly established, because round ‘digital’ display is unfamiliar one
• Cause the wheel based input system which surround the display is used, ecological interface design principles should be highly considered
 Limitation on display resolution
• 1.2 inch circular AMOLED which resolution is 360x360 will be used – very restricted amount of the information can be displayed
• The contents should be composed intensively, based on theory of display compatibility, color coding, and perception
AND562 :: Advanced Interface Design
State transition model
36
 Stage 1 : Checking
• idle alert 및 stretching guide 확인
 Stage 2 : Unfolding
• 가이드에 맞추어 팔을 펼치는 동작 수행
 Stage 3 : Stretching
• 최대 동작 지점에서 대기
 Stage 4 : Folding
• 다시 팔을 접는 동작 수행
 Stage 5 : Evaluation
Stage 1 :
Checking
Stage 2 :
Unfolding
Stage 3 :
Stretching
Stage 4 :
Folding
Stage 5 :
Evaluation
GUI guide
AND562 :: Advanced Interface Design
Prospect theory, Framing
37
 Framing
• 위험이 있는 인지된 이득과 위험이 있는 인지된 손해를 다르게 생각하는 일반적인 경향 - 다니엘 카너먼
• 성과급 지급과 관련한 토론토 대학 탄짐 호세인 교수의 실험
• 중국의 ‘완리다’라는 전자제품 제조 기업의 직원을 두 그룹으로 나누고 다음과 같이 성과급 지급 방법을 제시
• A: 향후 4주간, 팀의 생산량이 일정량 이상인 주에 한하여, 주당 80위안의 성과급을 지급 (획득 프레임)
• B: 향후 4주에 대하여 성과급 320위안을 일괄 지급 예정. 단, 팀의 생산량이 일정량 이하인 주에 한하여 성과급을 80위안씩 차감 (손실 프레임)
• 실험 결과 ‘손실 프레임’의 직원들이 대조군보다 생산성 증가 → 그 후에도 계속 상대적으로 높은 생산성을 보임
 Prospect theory 기반 보상
• ‘손실 프레임’을 활용한 높은 참여율 유도
• ‘스트레칭 점수’등의 유인책 도입 → 주초 일정량의 스트레칭 점수를 부여 후 연속적인 스트레칭 비 수행 감지 시 차감
• ‘스트레칭 점수’가 낮을 수록 idle alarm시 haptic, sound feedback의 반복 횟수 증가 (stress 증가)
• 최종적으로 확보된 ‘스트레칭 점수’를 다른 application에서 활용할 수 있도록 연계 (게임 application의 아이템이나 gear용 watch face 구매용 포인트 등)
AND562 :: Advanced Interface Design
Kano model
38
 일본 도쿄 리카 대학 교수 카노 노리아키에 의해 1980년대에 연구된 제품 개발에 관련된 상품기획 이론
 상품을 기획할 때 각각의 구성요소에 대해 소비자가 기대하는 것과 충족시키는 것 사이의 주관적 관계 그리고 요구되는 사항의
만족, 불만족에 의한 객관적 관계를 설정하여 설명
1. 매력적 품질요소(Attractive Quality Element):충족되는 경우 만족을 주지만 충족이 안 되더라도 크게 불
만족 없는 품질요소를 말한다. 고객이 미처 기대하지 못했던 것 혹은 기대를 초과하는 만족을
주는 품질요소가 될 수 있다. 이는 단순한 만족에서 고객감동(Customer Delight)의 수준을 달성할 수
있게 한다. 한편 이러한 요소의 존재는 고객들은 모르거나 기대하지 않았기 때문에, 충족이 되
지 않더라도 불만을 느끼지 않는다.
2. 일차원적 품질요소(One-Dimensional Quality Element):충족이 되면 만족하고 충족되지 않으면 고객들의
불만을 일으키는 품질요소이다. 가장 일반적인 품질인식요소이다.
3. 당연한 품질요소(Must-Be Quality Element): 반드시 있어야만 만족하는 품질요소이다.
4. 무차별 품질요소(Indifferent Quality Element): 만족하는 것과 만족하지 못하는 것 사이에 품질의 차이
가 느껴지지 않는 요소이다.
5. 역 품질요소(Reverse Quality Element): 충족되면 불만족을 일으키고 충족되지 못하면 만족되는 꺼꾸
로 된 요소이다.

More Related Content

Similar to Stretching Guidance UI Design for Smart Watch

사용자 관점의 SW개발-UX적용확산: 7가지 방법 제언
사용자 관점의 SW개발-UX적용확산: 7가지 방법 제언사용자 관점의 SW개발-UX적용확산: 7가지 방법 제언
사용자 관점의 SW개발-UX적용확산: 7가지 방법 제언Billy Choi
 
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유Nts Nuli
 
CEO & UX Designers' R&R
CEO & UX Designers' R&RCEO & UX Designers' R&R
CEO & UX Designers' R&RBilly Choi
 
퍼지 전문가 시스템을 이용한 상품 추천 알고리즘
퍼지 전문가 시스템을 이용한 상품 추천 알고리즘퍼지 전문가 시스템을 이용한 상품 추천 알고리즘
퍼지 전문가 시스템을 이용한 상품 추천 알고리즘Jong MIn Yu
 
1012 UXlab labmeeting material_Ajuan
1012 UXlab labmeeting material_Ajuan1012 UXlab labmeeting material_Ajuan
1012 UXlab labmeeting material_AjuanA-juAn
 
퍼소나로 완성하는 인터랙션 디자인
퍼소나로 완성하는 인터랙션 디자인퍼소나로 완성하는 인터랙션 디자인
퍼소나로 완성하는 인터랙션 디자인정인 주
 
박물관 증강현실 도슨트 제스처 사용성 평가_2017
박물관 증강현실 도슨트 제스처 사용성 평가_2017박물관 증강현실 도슨트 제스처 사용성 평가_2017
박물관 증강현실 도슨트 제스처 사용성 평가_2017M&M Networks
 
인터랙션 디자인 1310585 최하늘
인터랙션 디자인  1310585 최하늘인터랙션 디자인  1310585 최하늘
인터랙션 디자인 1310585 최하늘하늘 최
 
Rightbrain u 1기 1조 workie talkie
Rightbrain u 1기 1조 workie talkieRightbrain u 1기 1조 workie talkie
Rightbrain u 1기 1조 workie talkieRightBrain
 
2012 UX 트렌드
2012 UX 트렌드2012 UX 트렌드
2012 UX 트렌드Billy Choi
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
 
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망RightBrain inc.
 
2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General Guidelines2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General GuidelinesDonghoo Kim
 
박물관 증강현실 도슨트 GUI 사용성 평가_2017
박물관 증강현실 도슨트 GUI 사용성 평가_2017박물관 증강현실 도슨트 GUI 사용성 평가_2017
박물관 증강현실 도슨트 GUI 사용성 평가_2017M&M Networks
 
Getting User's Attention in Web Apps in Likable, Minimally Annoying Ways
Getting User's Attention in Web Apps in Likable, Minimally Annoying WaysGetting User's Attention in Web Apps in Likable, Minimally Annoying Ways
Getting User's Attention in Web Apps in Likable, Minimally Annoying WaysHyesoo Yoo
 
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overviewGeonu Choi
 
Eyetracking을 통한 광고효과분석
Eyetracking을 통한 광고효과분석Eyetracking을 통한 광고효과분석
Eyetracking을 통한 광고효과분석Dong-Yeop Kim
 
광주 국민디자인단
광주 국민디자인단광주 국민디자인단
광주 국민디자인단Young Choi
 
git + Pull Request + Code Review and Project Management with Agile
git + Pull Request + Code Review and Project Management with Agilegit + Pull Request + Code Review and Project Management with Agile
git + Pull Request + Code Review and Project Management with AgileWooseong Kim
 

Similar to Stretching Guidance UI Design for Smart Watch (20)

사용자 관점의 SW개발-UX적용확산: 7가지 방법 제언
사용자 관점의 SW개발-UX적용확산: 7가지 방법 제언사용자 관점의 SW개발-UX적용확산: 7가지 방법 제언
사용자 관점의 SW개발-UX적용확산: 7가지 방법 제언
 
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
 
CEO & UX Designers' R&R
CEO & UX Designers' R&RCEO & UX Designers' R&R
CEO & UX Designers' R&R
 
퍼지 전문가 시스템을 이용한 상품 추천 알고리즘
퍼지 전문가 시스템을 이용한 상품 추천 알고리즘퍼지 전문가 시스템을 이용한 상품 추천 알고리즘
퍼지 전문가 시스템을 이용한 상품 추천 알고리즘
 
1012 UXlab labmeeting material_Ajuan
1012 UXlab labmeeting material_Ajuan1012 UXlab labmeeting material_Ajuan
1012 UXlab labmeeting material_Ajuan
 
퍼소나로 완성하는 인터랙션 디자인
퍼소나로 완성하는 인터랙션 디자인퍼소나로 완성하는 인터랙션 디자인
퍼소나로 완성하는 인터랙션 디자인
 
UX Case Study
UX Case StudyUX Case Study
UX Case Study
 
박물관 증강현실 도슨트 제스처 사용성 평가_2017
박물관 증강현실 도슨트 제스처 사용성 평가_2017박물관 증강현실 도슨트 제스처 사용성 평가_2017
박물관 증강현실 도슨트 제스처 사용성 평가_2017
 
인터랙션 디자인 1310585 최하늘
인터랙션 디자인  1310585 최하늘인터랙션 디자인  1310585 최하늘
인터랙션 디자인 1310585 최하늘
 
Rightbrain u 1기 1조 workie talkie
Rightbrain u 1기 1조 workie talkieRightbrain u 1기 1조 workie talkie
Rightbrain u 1기 1조 workie talkie
 
2012 UX 트렌드
2012 UX 트렌드2012 UX 트렌드
2012 UX 트렌드
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
 
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
 
2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General Guidelines2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General Guidelines
 
박물관 증강현실 도슨트 GUI 사용성 평가_2017
박물관 증강현실 도슨트 GUI 사용성 평가_2017박물관 증강현실 도슨트 GUI 사용성 평가_2017
박물관 증강현실 도슨트 GUI 사용성 평가_2017
 
Getting User's Attention in Web Apps in Likable, Minimally Annoying Ways
Getting User's Attention in Web Apps in Likable, Minimally Annoying WaysGetting User's Attention in Web Apps in Likable, Minimally Annoying Ways
Getting User's Attention in Web Apps in Likable, Minimally Annoying Ways
 
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overview
 
Eyetracking을 통한 광고효과분석
Eyetracking을 통한 광고효과분석Eyetracking을 통한 광고효과분석
Eyetracking을 통한 광고효과분석
 
광주 국민디자인단
광주 국민디자인단광주 국민디자인단
광주 국민디자인단
 
git + Pull Request + Code Review and Project Management with Agile
git + Pull Request + Code Review and Project Management with Agilegit + Pull Request + Code Review and Project Management with Agile
git + Pull Request + Code Review and Project Management with Agile
 

More from Seunghun Yoo

UI Renovation for Web Commerce Site I.A
UI Renovation for Web Commerce Site I.A UI Renovation for Web Commerce Site I.A
UI Renovation for Web Commerce Site I.A Seunghun Yoo
 
Wearable FINtech :Banking App. UI Design for Smart Watches
Wearable FINtech :Banking App. UI Design for Smart WatchesWearable FINtech :Banking App. UI Design for Smart Watches
Wearable FINtech :Banking App. UI Design for Smart WatchesSeunghun Yoo
 
New Remote Control UI with Transparent Display
New Remote Control UI with Transparent Display New Remote Control UI with Transparent Display
New Remote Control UI with Transparent Display Seunghun Yoo
 
Smart Phone + Smart Watch : Coloring App UI Design
Smart Phone + Smart Watch : Coloring App UI Design Smart Phone + Smart Watch : Coloring App UI Design
Smart Phone + Smart Watch : Coloring App UI Design Seunghun Yoo
 
New Map Application UI based on Cognitive Aid
New Map Application UI based on Cognitive Aid New Map Application UI based on Cognitive Aid
New Map Application UI based on Cognitive Aid Seunghun Yoo
 
Korea University Medical Design Report 2015 (1/8)
Korea University Medical Design Report 2015 (1/8)Korea University Medical Design Report 2015 (1/8)
Korea University Medical Design Report 2015 (1/8)Seunghun Yoo
 
Snap chat Interface Analysis Report
Snap chat Interface Analysis Report Snap chat Interface Analysis Report
Snap chat Interface Analysis Report Seunghun Yoo
 
The Baker's Table App. UX Design Report
The Baker's Table App. UX Design ReportThe Baker's Table App. UX Design Report
The Baker's Table App. UX Design ReportSeunghun Yoo
 
kiid DM Class Final : Foreign Students Housing Service Design
kiid DM Class Final : Foreign Students Housing Service Designkiid DM Class Final : Foreign Students Housing Service Design
kiid DM Class Final : Foreign Students Housing Service DesignSeunghun Yoo
 
kiid DM Class Final : B's Choice
kiid DM Class Final : B's Choice kiid DM Class Final : B's Choice
kiid DM Class Final : B's Choice Seunghun Yoo
 

More from Seunghun Yoo (10)

UI Renovation for Web Commerce Site I.A
UI Renovation for Web Commerce Site I.A UI Renovation for Web Commerce Site I.A
UI Renovation for Web Commerce Site I.A
 
Wearable FINtech :Banking App. UI Design for Smart Watches
Wearable FINtech :Banking App. UI Design for Smart WatchesWearable FINtech :Banking App. UI Design for Smart Watches
Wearable FINtech :Banking App. UI Design for Smart Watches
 
New Remote Control UI with Transparent Display
New Remote Control UI with Transparent Display New Remote Control UI with Transparent Display
New Remote Control UI with Transparent Display
 
Smart Phone + Smart Watch : Coloring App UI Design
Smart Phone + Smart Watch : Coloring App UI Design Smart Phone + Smart Watch : Coloring App UI Design
Smart Phone + Smart Watch : Coloring App UI Design
 
New Map Application UI based on Cognitive Aid
New Map Application UI based on Cognitive Aid New Map Application UI based on Cognitive Aid
New Map Application UI based on Cognitive Aid
 
Korea University Medical Design Report 2015 (1/8)
Korea University Medical Design Report 2015 (1/8)Korea University Medical Design Report 2015 (1/8)
Korea University Medical Design Report 2015 (1/8)
 
Snap chat Interface Analysis Report
Snap chat Interface Analysis Report Snap chat Interface Analysis Report
Snap chat Interface Analysis Report
 
The Baker's Table App. UX Design Report
The Baker's Table App. UX Design ReportThe Baker's Table App. UX Design Report
The Baker's Table App. UX Design Report
 
kiid DM Class Final : Foreign Students Housing Service Design
kiid DM Class Final : Foreign Students Housing Service Designkiid DM Class Final : Foreign Students Housing Service Design
kiid DM Class Final : Foreign Students Housing Service Design
 
kiid DM Class Final : B's Choice
kiid DM Class Final : B's Choice kiid DM Class Final : B's Choice
kiid DM Class Final : B's Choice
 

Stretching Guidance UI Design for Smart Watch

  • 1. AND562 :: Advanced Interface Design Term Project Stretching guidance UI design on smart watch 1 Cho SungIk, Lee SinJae Departmentof ComputerScienceand Engineering MediaLab
  • 2. AND562 :: Advanced Interface Design Contents 2  Motivation & Suggestion  Current design analysis  Design new • Task analysis • UI Flow • Detail design for GUI & Feedback  Integration • Design prototyping • Implementation • User test • Packaging & Service
  • 3. AND562 :: Advanced Interface Design Motivation - We Need Exercise 3  Sitting is killing you [TIME, 2014] • “Sitting is the new smoking” • Sedentary behavior to poor health, including heart disease diabetes, obesity and hyper tension
  • 4. AND562 :: Advanced Interface Design Stretching? 4  Benefits • If done properly, stretching can prevent injury, relax the muscles, increase range of motion and flexibility, and better one's performance • Stretching increases blood flow which prevents hardening of the arteries and it also produces synovial fluid, which lubricates the joints that are surrounded by the muscles • Stretching stabilizes the body's natural balance and posture, and aligns the joints leading to better coordination • Most of all, easy to do  Variety of stretching • Static stretching / Dynamic stretching / PNF stretching / Ballistic or bouncing stretching
  • 5. AND562 :: Advanced Interface Design Healthcare features on Smart Watch 5  Key features of smart watch(Samsung Gear S2, Apple watch, etc.) • Active monitoring of health state • Check the motion of user to determine idle or alert (exercise)  Usually manufactures focused on exercise, not stretching
  • 6. AND562 :: Advanced Interface Design Suggestion 6  Project : Let people stretch them with smart watch • 생리학적 approach : 제자리에서 쉽게 따라 할 수 있는 stretching 방법 및 올바른 동작 모델을 제공 • 기술적 approach : 사용자의 동작을 인식, 올바른 stretching 가이드를 따랐는지 비교/가이드 (machine learning) • 디자인 approach : 손목 위 작은 해상도를 가지는 device 의 공간적 제약을 극복한 GUI 제작, Haptic 을 이용한 효율적 feedback  Design Strategy • 현재 Smart watch 가 제공하는 exercise 를 위한 UI 분석, 이론을 토대로 한 문제점 도출 • 새로운 기능 정의 및 task 분석 • Task 별 UI flow 작성 • 디자인 이론에 입각한 GUI 디자인 • Memory, Training 시스템을 고려한 feedback 설계
  • 7. AND562 :: Advanced Interface Design Current Design & UI Flow  신규 Activity 입력 7 새로운 입력 시작 tap tap tap tap wheel wheel wheel
  • 8. AND562 :: Advanced Interface Design Current Design & UI Flow 8  Activity 결과 확인 및 보상 화면 ※ 보상 화면 : 활동 목표 달성한 요일 에 badge 표시 wheel tap wheel tap tap
  • 9. AND562 :: Advanced Interface Design Current Design & UI Flow 9  Idle 상태를 알려주고, 사용자의 활동을 소극적으로 유도 Haptic feedback 30분 단위 재 알림 1시간 동안 움직임이 없으면 사용자 움직임 감지 ※ 보상 화면 :칭찬 메시지
  • 10. AND562 :: Advanced Interface Design Design analysis 10 • 정보 인지를 위해 필요한 attention case 및 SEEV model • Attention cases • Selective attention : 필요한 정보를 선택적으로 attention • Focused attention : 중요한 정보에 focus attention 이 쉽게 발생 • Divided attention : 주변부의 테두리를 이용해 목표대비 현재 위치를 쉽게 인지 • SEEV model • Salience : 가장 중요한 정보인 지속 시간을 크게 배치 • Effort : H/W 특성 상 AOI 를 이동하는 cost 는 크지 않음 (eye filed 內) • Expectancy : 시계가 업데이트 되므로 자연스럽게 필요한 정보에 시선이 고정 됨 • Value : 화면상에 나타나는 모든 정보는 사용자에게 가치 있는 정보 • Spatial proximity • 현재 수행 중인 시간을 확인하면, 목표 까지 남은 시간도 알고 싶기 때문에, 목표치 를 같은 화면, 지속시간 하단에 공간적으로 가깝게 배치 • Display compatibility • Pictorial realism 에 부합하는 아이콘 제공 • Graph perception • 목표치 달성률은 % 로 표시하지 않고, analog 형태인 그래프로 표시, 원형 테두리가 어느 정도 채워졌는지 직관적으로 인식 • 정확한 시간 정보는 digital 수치로 표시 • Peripheral cues • 지속 시간을 체크하면서, 주변시로도 대략적인 달성 정도 판별 가능
  • 11. AND562 :: Advanced Interface Design Design analysis 11 • 정보 인지를 위해 필요한 attention case 및 SEEV model • 눌러서 실행이 가능하다는 것을 알려줄 salience / expectancy 가 부족 • 사용자가 선택을 하도록 유도하는 affordance 부재 • 너무 작은 icon 으로 인해, 충분한 Salience 부족 • 과도한 focused attention 필요
  • 12. AND562 :: Advanced Interface Design Design analysis 12 • Display compatibility • Compatibility of display movement • Moving pointer display : 24시간 scale 이 고정되어 있고, wheel 의 회전에 따라서 pointer 가 움직이며 해당 시간에 대한 정보를 표시 • Continuous 시스템 • 시간이 연속적이기 때문에, 한 방향으로 계속 이동하면, 날짜 이동도 가능함. Mental model 과 부합 • Display integration • 24시간 시계 형태가 의미하는 mental model 과 부합하는 pie chart graph 로 시간대별 activity 유형 정보 제공 • Display compatibility • Compatibility of display movement • Moving pointer display : Wheel 의 회전에 따라서 pointer 가 같이 움 직임 • 1 눈금 당 10분씩 증가 • Pictorial realism 에 부합 • Ecological compatibility 에 부합
  • 13. AND562 :: Advanced Interface Design Design analysis 13 • Absolute judgement & Information theory • 다양한 차원의 자극을 제공 : 5가지 색상, 운동 정보, 날짜, 24시간 scale 등 • 다수의 차원에 해당하는 자극이 공존함에 performance 저하 • Mental workload • 뇌의 한정된 정보처리 한계 때문에 정보처리에 필요한 resource가 증가 할수록 performance 저하 • Mental operations 수를 최소화 해야 하는 graph guideline에 위배
  • 14. AND562 :: Advanced Interface Design Design analysis 14 • Visual search • SSTS (Serial Self-Terminating Search) : item 의 개수에 따라 검색 시간 증가 • Clutter • Numerosity : item 개수 증가로 selective attention 방해 • Proximity or readout : 시각의 1도 내에 있는 다른 자극은 방해요소 • Disorganizational : 해당 없음 • Heterogeneous : 파이 차트의 크기가 제각각이라서 visual search 효율 저하 • Bottom up factors : 검색 성능에 영향을 주는 특성 • 모든 대상을 확인할 필요는 없으므로 exhaustive search 경우는 아님 • 색상 구분에 의한 parallel search 가능 • Pointer, scale 눈금에 의한 conjunction search 가능 • Digital 정보는 digital 정보끼리 homogeneous 하고, analog 정보는 analog 정보끼리 homogeneous 하므로, 서로간의 간섭이 적어 search 시간 감소 • Top down factors : 검색 효율성에 영향을 주는 특성 • 걸어 다닌 시간대를 노란색으로 분리하면 1차 narrow search 가능 • 현재 보고 있는 시간대를 쉽게 인지하도록 pointer 제공 • 수량 정보는 가운데에서, 시간에 종속되는 정보는 시계와 관련된 외곽에서 검색
  • 15. AND562 :: Advanced Interface Design Design analysis 15 • Graph guide line 기반 분석 • 편향 없이 판단 가능한 물리적 차원을 사용하라 : 실제 대상 물리량이 다른 두 그래 프를 함께 표시하고 있어 변화 추이에 대한 편향을 야기 • 자료 잉크 비율을 높게 유지하라 : 스크롤 중 그래프와 상관이 없는 정보(날씨, 기온) 가 함께 표기되어 불필요한 시각 검색을 야기 • 여러 그래프들을 일관성 있게 부호화하라 : 범례에 대한 강조가 약하며 변인의 부호 화 과정에서 일관된 기준을 제시하지 않은 상태로 혼용 • Frame of reference • Frame of reference의 정렬은 인간 수행을 뒷받침하며 Mental rotation 능력은 잠 재적인 개인차가 존재하므로 시스템 레벨에서 지도에 대한 올바른 방향을 제시해 야 할 필요성이 있음 • Stages of Navigational Knowledge • 지리적 영역에 대한 정신적 표상은 다음의 세가지 유형의 지식에 기초함 • Landmark knowledge, Route knowledge, Survey knowledge • 현재 위치 확인을 목적으로 map을 사용할 경우 현출한 이정표들의 외형에 대한 시 각적 표상을 강조 • 길 안내를 위한 목적으로 map을 사용할 경우 현재 위치로부터 다음 목적지까지의 절차화된 언어적 표현을 강조 • 운동 경로 등의 정보 표현을 목적으로 map을 사용할 경우 survey knowledge의 확 장을 도모할 수 있는 수치적 거리 표기 등의 방법을 고려 가능 • 수치적 거리 표기가 지도 내에 없고, 공간적으로 멀리 떨어져서 배치 됨
  • 16. AND562 :: Advanced Interface Design Review of the current display design 16  Pros • Icon 의 pictorial realism • 사용자의 mental model 과 일치하는 circular wheel interaction : ecological compatibility, display compatibility 만족 • Spatial proximity 를 고려한 화면 배치 • 운동 강도에 따른 color coding 및 24시 scale 에 맞춘 graph 로 visual search 시간 단축  Cons • 일부 아이콘의 작은 크기로 과도한 focus attention 요구 • 일부 기능 진입을 위한 entry point 의 affordance 부재 • 일부 화면의 복잡도가 매우 높아, training 되지 않은 사람에게 과도한 work load 요구, stress요인 제공
  • 17. AND562 :: Advanced Interface Design Task scenario 1 17  Smart watch 기반 stretching guide • Dobi는 아침에 출근하면서 smart watch를 착용한다. • 업무의 대부분이 컴퓨터를 활용하기 때문에 출근하자마자 책상 앞에 앉았다. • 한동안 업무로 인해 움직임이 없자 smart watch가 idle alert을 울린다. • 통상적인 idle alert을 확인하자 stretching guide로의 이행 여부를 묻는다. • Dobi는 stretching guide를 실행하고 smart watch에는 추천 stretching과 선택 가능한 다른 stretching motion들이 표시된다. • 추천 stretching을 선택하면 smart watch에 guide를 위한 사람 모양의 픽토그램이 등장하고 요구되는 동작이 애니메이션으로 표시된다. • Dobi는 가볍게 손목을 털어 stretching mode로 진입하고 smart watch가 일정한 주기로 진동하기 시작한다. • 조금 전 화면에 표시되었던 동작대로 stretching을 수행하자 일정한 주기로 진동하던 smart watch는 stretching 최고점에 가까이 갈수록 진동 주기가 짧아지고, 최고점에 도달하자 진동을 멈춘다. • 한동안 같은 자세를 유지하고 있으면 수행 완료를 알리는 벨 소리가 울리고 smart watch가 다시 일정한 주기로 진동하기 시작한다. • Dobi가 이전 동작의 역순으로 stretching 동작을 마무리하고 가볍게 손목을 털자 stretching mode가 종료되고 stretching의 feedback이 표시된다.
  • 18. AND562 :: Advanced Interface Design Task scenario 2 18  운동 관리 application 연동 stretching guide • Dobi는 간만에 운동을 하기로 결심하고 헬스장을 찾았다. • 본격적인 운동 시장에 앞서 stretching을 하기로 하고 smart phone app 목록에서 smart stretching을 선택한다. • Smart watch의 wheel을 돌려 ‘운동 전후‘를 선택하고 화면을 탭 한다. • Smart watch에 guide를 위한 사람 모양의 픽토그램이 등장하고 요구되는 동작이 애니메이션으로 표시된다. • Dobi는 가볍게 손목을 털어 stretching mode로 진입하고 smart watch가 일정한 주기로 진동하기 시작한다. • 조금 전 화면에 표시되었던 동작대로 stretching을 수행하자 일정한 주기로 진동하던 smart watch는 stretching 최고점에 가까이 갈 수록 진동 주기가 짧아지고, 최고점에 도달하자 진동을 멈춘다. • 한동안 같은 자세를 유지하고 있으면 수행 완료를 알리는 벨 소리가 울리고 smart watch가 다시 일정한 주기로 진동하기 시작 한다. • Dobi가 이전 동작의 역순으로 stretching 동작을 마무리하고 가볍게 손목을 털자 stretching mode가 종료되고 S헬스 등의 운동 관리 앱이 실행된다.
  • 19. AND562 :: Advanced Interface Design Task scenario 3 19  Smart phone 기반 stretching management • Dobi는 그간 수행한 stretching 정보를 확인하기 위해 smart phone에서 Smart watch stretching management app을 구동한다. • 초기 화면으로 일간 stretching 수행 빈도 및 수행률이 표시되고 각종 메뉴가 나타난다. • Stretching tracking 메뉴로 이동한 후 주간, 월간을 선택해가며 idle alert대비 stretching 수행 횟수 빈도와 각 stretching type별 수행 상황 을 확인한다. • Stretching type icon을 선택하자 해당 stretching의 guide 애니메이션과 해당 stretching을 통해 얻을 수 있는 효과들이 표시된다. • Smart watch의 wheel을 이용하여 해당 stretching의 선호도를 조절한 후 application을 종료한다.
  • 20. AND562 :: Advanced Interface Design Hierarchical Task Analysis 20 Idle alert 1 Stretching selection 2 Do stretching 3 Evaluation 4 Device 진동 1.1 디스플레이 확인 1.2 Idle alert 해제 1.3 추천 stretching 확인 2.1 Stretching 선택 2.2 애니메이션 가이드 확인 2.3 Evaluation 모드 진입 4.1 Reference 모션 일치도 확인 4.2 일일 수행 현황 확인 4.3 Inducing Stretching 0 Stretching 모드 진입 3.1 Folding 과정 진동 feedback 3.2 최고점 도달에 대한 알람 3.3 Stretching 자세 유지 3.4 자세 유지 종료 알람 3.5 Unfolding 과정 진동 feedback 3.6 Stretching 모드 종료 3.7 휠을 이용한 후보 stretching 선택 2.2.1 확대된 해당 stretching 정보 확인 2.2.2 화면 tab을 통해 stretching선택 2.2.3 Stretching 선택 상태 확인 3.1.1 손목 흔들기 3.1.2 Stretching 시작 화면 확인 3.1.3 Stretching 모션 완료 확인 3.7.1 손목 흔들기 3.7.2 Stretching 모드 종료 확인 3.7.3 Digit 표기 모션 일치도 확인 4.2.1 휠을 이용한 표시 항목 변경 4.2.2 구간별 모션 일치도 확인 4.2.3 화면 tab을 통한 모션 확인모드 종료 4.2.4 통상 idle alert 화면 확인 1.3.1 휠을 이용한 화면 전환 1.3.2 Idle alert 해제 및 stretching 항목 선택 2.2.3
  • 21. AND562 :: Advanced Interface Design UI Flow for Main Task 21 팔을 뻗어서 스트레칭 해보세요 팔을 위로 뻗어서 스트레칭 해보세요 activity Task 1 Task 2 Task 4 Haptic / Sound feedback Task 3 스트레칭 성공! 기존 제안
  • 22. AND562 :: Advanced Interface Design 팔을 뻗어서 스트레칭 해보세요 1 팔을 위로 뻗어서 스트레칭 해보세요 시작 2-1 팔을 위로 뻗어서 스트레칭 해보세요 시작 두 손을 깍지 끼고 머리 위로 끝까지 뻗은 후 진동이 울리면 천천히 내리세요 2-2 Detail UI Flow : Task 1/2 (Stretching guide) 22 1초 후 이동 Character Animation 반복 : attention, training 간단하지만 명확한 설명 text 시작 버튼 : affordance wheel scroll 자세한 동작 설명 text  스트레칭 종류는 random 하게 제공 마지막 스트레칭 : 2시간 전 마지막 스트레칭 시간 제공 : Situation Awareness
  • 23. AND562 :: Advanced Interface Design 팔을 위로 뻗어서 스트레칭 해보세요 시작 2 3-2 5초 동안 버텨보세요 5 3-3 두 팔을 천천히 내리세요 3-1 두 손을 깍지 끼고 머리 위로 뻗으세요 Detail UI Flow : Task 3 (Stretching feedback) 23 시작 버튼 Count down 펼쳐지는 animation : cue, attention, ecological compatibility 움츠러드는 animation : cue, attention, ecological compatibility Haptic feedback (Type1)  너무 많은 haptic 제공은 혼란을 줄 수 있으므로, 꼭 필요할 때만 제공 (stress, working memory load) Haptic feedback (Type1) 반짝이는 animation : cue, attention, ecological compatibility
  • 24. AND562 :: Advanced Interface Design Detail UI Flow : Task 4 (Stretching evaluation) 24 두 팔을 천천히 내리세요 3 성공 실패 잘했어요 ! 한 번 더하기 다시 시도 스트레칭 실패... 2초 4-1 4-2 종료 TBD : 결과 화면 또는 일/주간 성취 graph 4-3 2 Haptic feedback (Type2) 종료 TBD : 보상 화면 종료 4-4 wheel scroll Haptic feedback (Type3)
  • 25. AND562 :: Advanced Interface Design Design prototype (1) 25  앱 아이콘 • 원하는 앱을 쉽게 찾을 수 있도록 높은 salience 및 simplicity 유지 • Pictorial realism 에 입각한 아이콘 및 건강을 상징할 수 있는 초록색 배경을 사용해 직관성 향상
  • 26. AND562 :: Advanced Interface Design Design prototype (2) 26  스트레칭 시간 알림 • 스트레칭 시간을 haptic 으로 feedback • Long term memory 를 recall 하지 않아도 스트레칭 하지 않은 시간을 쉽게 알 수 있도록 (situation awareness) 마지막 스트레칭 시간 표시 • 스트레칭 하지 않은 시간 간격에 따라 다른 color 의 테두리를 이용해 경각심을 불러일으켜 (적당한 stress 제공) 참여를 유도
  • 27. AND562 :: Advanced Interface Design Design prototype (3) 27  스트레칭 동작 가이드 • 스트레칭 동작을 설명하는 이미지와 text 를 동시에 제공 • Pictorial realism 을 가지는 character animation 을 이용해, 동작 가이드 • 간단한 text 로 명확한 동작 지시, 방향 및 특징을 강조 • Wheel scroll 을 이용한 자세한 설명 text 제공 • UI framework 의 scroller 에서 scroll bar affordance 기본 제공 • 전체적인 UI depth 를 줄이고, 자세하고 긴 내용을 숨겨서 배치함으로써 사용자의 work load 를 낮춤 • 시작하기 버튼 • 버튼과 text 가 사용자에게 충분한 affordance 를 제공 • Scroll 과 상관없이 항상 동작함으로써, training 된 사용자는 자세한 설명을 보지 않고도 바로 빠른 수 행 가능(shortcut)
  • 28. AND562 :: Advanced Interface Design Design prototype (4) 28  스트레칭 동작 수행 중 feedback • 퍼져 나가는 animation 과 움츠러드는 animation 으로 팔을 뻗는 동작과 되돌아오는 동작을 가이드 • 화면의 simplicity 를 유지하기 위해 디스플레이 표상의 회화적 실재성은 포기하고, 동적 부합성은 유지 • 최고점에 도달했을 때 count down 으로 자세 유지 가이드 • 최고점에 도달했을 때와, count down 이 끝났을 때 각각 haptic feedback 을 제공 • Training된 사용자는 화면을 보지 않아도, haptic 만으로 시간에 맞추어 수행 가능 • 수행 중 발생하는 concurrent feedback 이지만 기본적인 UI 의 복잡도가 높지 않으므로, 추가적인 cognitive load 는 발생하지 않고, 오히려 자세 유지 시간 체크를 위한 work load 를 낮출 것으로 기대
  • 29. AND562 :: Advanced Interface Design Design prototype (5) 29  스트레칭 결과 • 테두리의 color 및 icon 으로 성공/실패 여부를 전달 • 성공 화면에서는 wheel scroll 로 성공으로 인한 보상의 진척도를 체크할 수 있음 • 연속으로 수행 시 더 큰 보상을 제공함으로써, 더 큰 스트레칭 효과 유도 • 문맥에 맞는 text • 성공 시 “한 번 더 하기”, 실패 시 “다시 시도”
  • 30. AND562 :: Advanced Interface Design Experiment design 30  연령, 성별 및 wearable device 경험 여부가 각기 다른 피 실험군 선정  해당 기능이 탑재된 Gear S2 device 를 착용하고 1주일 간 실험에 참가 • 사전에 스트레칭 가이드에 무조건 따를 필요는 없으나, 가급적 따라줄 것을 요청  실험 목표 • Stretching 동기 부여 및 동작 유도를 위한 UI 설계의 적합 여부 확인 (디자인) • Stretching 동작 인식 정확도에 대한 만족도 확인 (기술) • Stretching 주요 기능에 대한 사용자의 평가가 카노 모델 상 어떤 범주에 속하는지 확인 (마케팅) • 주요 기능 • 참여자는 스트레칭 동작을 요청 받을 수 있다. • 참여자는 다양한 스트레칭 동작을 수행 할 수 있다. • 참여자는 동작을 평가 받고 보상을 수령할 수 있다.
  • 31. AND562 :: Advanced Interface Design Questionnaire 31  설문 방법 • 1차 설문 : 1주일 시험 사전 미팅 시 3~4 회 테스트 수행 후 작성 • 답안 : 1. 만족, 2 조금 만족, 3. 보통, 4. 조금 불만족, 5. 불만족 1. 스트레칭 가이드가 어떤 동작을 의미하는지 이해가 쉬웠다. 2. 스트레칭 동작 수행 중 화면 및 진동 피드백이 적절했다. 3. 스트레칭 동작 수행 후 성공하는 것이 어렵지 않았다. 4. 스트레칭 동작 성공 시 실제 근육 이완 효과를 느꼈다. 5. 스트레칭 동작 후 더 하고 싶은 생각이 들었다. • 2차 설문 : 1주일 실험 완료 후 1차 설문 재 작성 및 2차 설문 작성 • 답안 : 1. 만족한다. 2. 그럴 거라고 예상한다. 3. 중립, 4. 그렇더라도 쓸 수는 있다. 5. 불만이다.) 1. 스마트 와치 착용 중에 스트레칭 동작을 요청 받을 수 있다면 어떻겠는가? (기능) 2. 스마트 와치 착용 중에 스트레칭 동작을 요청 받을 수 없다면 어떻겠는가? (비기능) 3. 다양한 스트레칭 동작을 수행 할 수 있다면 어떻겠는가? (기능) 4. 다양한 스트레칭 동작을 수행 할 수 없다면 어떻겠는가? (비기능) 5. 스트레칭 동작을 평가 받고 결과에 따라 보상을 받을 수 있다면 어떻겠는가? (기능) 6. 스트레칭 동작에 대한 평가/보상이 없다면 어떻겠는가? (비기능)
  • 32. AND562 :: Advanced Interface Design Simple result 32  랩 내 무작위 3명 실험  1차 설문 결과  2차 설문 결과 피실험자 스트레칭 요청 다양한 동작 평가/보상 A I I E B E I E C E E E 결과(카테고리) 감동요인 무관심 감동요인 피실험자 동작 이해 피드백 적절 성공난이도 실제 효과 재시도의사 A 2 1 4 2 1 B 2 1 1 3 3 C 1 1 2 3 2 결과(AVG) 조금 만족(1.7) 만족 (1) 조금 만족(2.3) 보통 (2.7) 조금 만족(2)
  • 33. AND562 :: Advanced Interface Design Future work 33  체계적인 보상 시스템 마련  Stretching 동작 인식 구현 정확도 향상  Stretching 지원 동작 추가  Experiment design 에 맞추어 실험 진행 및 결과 분석  Kano model 분석 결과에 따른 기능 수정
  • 34. AND562 :: Advanced Interface Design Appendix 34  Interface design issue for Gear S2 device  State transition model for stretching activity  Prospect theory, Framing  Kano model
  • 35. AND562 :: Advanced Interface Design Interface design issues 35  Round display and wheel based input system • Target device ‘Gear S2’ adopted round display and wheel based input system • User’s mental model could not clearly established, because round ‘digital’ display is unfamiliar one • Cause the wheel based input system which surround the display is used, ecological interface design principles should be highly considered  Limitation on display resolution • 1.2 inch circular AMOLED which resolution is 360x360 will be used – very restricted amount of the information can be displayed • The contents should be composed intensively, based on theory of display compatibility, color coding, and perception
  • 36. AND562 :: Advanced Interface Design State transition model 36  Stage 1 : Checking • idle alert 및 stretching guide 확인  Stage 2 : Unfolding • 가이드에 맞추어 팔을 펼치는 동작 수행  Stage 3 : Stretching • 최대 동작 지점에서 대기  Stage 4 : Folding • 다시 팔을 접는 동작 수행  Stage 5 : Evaluation Stage 1 : Checking Stage 2 : Unfolding Stage 3 : Stretching Stage 4 : Folding Stage 5 : Evaluation GUI guide
  • 37. AND562 :: Advanced Interface Design Prospect theory, Framing 37  Framing • 위험이 있는 인지된 이득과 위험이 있는 인지된 손해를 다르게 생각하는 일반적인 경향 - 다니엘 카너먼 • 성과급 지급과 관련한 토론토 대학 탄짐 호세인 교수의 실험 • 중국의 ‘완리다’라는 전자제품 제조 기업의 직원을 두 그룹으로 나누고 다음과 같이 성과급 지급 방법을 제시 • A: 향후 4주간, 팀의 생산량이 일정량 이상인 주에 한하여, 주당 80위안의 성과급을 지급 (획득 프레임) • B: 향후 4주에 대하여 성과급 320위안을 일괄 지급 예정. 단, 팀의 생산량이 일정량 이하인 주에 한하여 성과급을 80위안씩 차감 (손실 프레임) • 실험 결과 ‘손실 프레임’의 직원들이 대조군보다 생산성 증가 → 그 후에도 계속 상대적으로 높은 생산성을 보임  Prospect theory 기반 보상 • ‘손실 프레임’을 활용한 높은 참여율 유도 • ‘스트레칭 점수’등의 유인책 도입 → 주초 일정량의 스트레칭 점수를 부여 후 연속적인 스트레칭 비 수행 감지 시 차감 • ‘스트레칭 점수’가 낮을 수록 idle alarm시 haptic, sound feedback의 반복 횟수 증가 (stress 증가) • 최종적으로 확보된 ‘스트레칭 점수’를 다른 application에서 활용할 수 있도록 연계 (게임 application의 아이템이나 gear용 watch face 구매용 포인트 등)
  • 38. AND562 :: Advanced Interface Design Kano model 38  일본 도쿄 리카 대학 교수 카노 노리아키에 의해 1980년대에 연구된 제품 개발에 관련된 상품기획 이론  상품을 기획할 때 각각의 구성요소에 대해 소비자가 기대하는 것과 충족시키는 것 사이의 주관적 관계 그리고 요구되는 사항의 만족, 불만족에 의한 객관적 관계를 설정하여 설명 1. 매력적 품질요소(Attractive Quality Element):충족되는 경우 만족을 주지만 충족이 안 되더라도 크게 불 만족 없는 품질요소를 말한다. 고객이 미처 기대하지 못했던 것 혹은 기대를 초과하는 만족을 주는 품질요소가 될 수 있다. 이는 단순한 만족에서 고객감동(Customer Delight)의 수준을 달성할 수 있게 한다. 한편 이러한 요소의 존재는 고객들은 모르거나 기대하지 않았기 때문에, 충족이 되 지 않더라도 불만을 느끼지 않는다. 2. 일차원적 품질요소(One-Dimensional Quality Element):충족이 되면 만족하고 충족되지 않으면 고객들의 불만을 일으키는 품질요소이다. 가장 일반적인 품질인식요소이다. 3. 당연한 품질요소(Must-Be Quality Element): 반드시 있어야만 만족하는 품질요소이다. 4. 무차별 품질요소(Indifferent Quality Element): 만족하는 것과 만족하지 못하는 것 사이에 품질의 차이 가 느껴지지 않는 요소이다. 5. 역 품질요소(Reverse Quality Element): 충족되면 불만족을 일으키고 충족되지 못하면 만족되는 꺼꾸 로 된 요소이다.