improvement of user experience through the visualization of...

22
1 Improvement of User Experience through the Visualization of Invisible Information Nockhwan Kim SungKyunKwan Univ. Department of Human ICT Convergence

Upload: others

Post on 28-May-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

1

Improvement of User Experience through the Visualization of Invisible Information

Nockhwan Kim

SungKyunKwan Univ.

Department of Human ICT Convergence

Page 2: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

OUTLINE

1. Introduction

2. Literature Review

3. Case Study

4. Preliminary Guideline

5. System Design

6. Experiment and Evaluation

7. Conclusion

2

Page 3: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Introduction (1)

3

Page 4: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Introduction (2)

4

In this paper,

• Based on Literature review, I identified the meaning, types, and method of

‘Visualization of Invisible Information’

• Based on Case study, I investigated the attributes of ‘Visualization of Invisible

Information’ and made preliminary guideline

• Based on Experiment and Evaluation, I get insight and reinforce ‘Visualization

of Invisible Information’

Page 5: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Literature Review (1)

• Invisible Information: all information before visualization on prototype

5

Page 6: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Literature Review (2)

• Visualization of Information

6

Page 7: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Literature Review (3)

• Visualization of Information

7

Page 8: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Literature Review (4)

• Visualization of Information

8

Page 9: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Literature Review (5)

• Improvement of User eXperience

9

AffordancePES

Page 10: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Case Study (1)

10

• Invisible Information: Temperature, Heart rate, Fall detection emergency

• Visualization of Information: Value on smartphone display, LED light in wig

• Improvement of User Experience: Enhanced emergency notification

Page 11: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Case Study (2)

11

• Invisible Information: Pedestrian safety distance

• Visualization of Information: LED light on crosswalk

• Improvement of User Experience: Visual affordance

Page 12: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Case Study (3)

12

• Invisible Information: Foodstuff information(retention period, freshness,

position)

• Visualization of Information: Spatial visualization on smartphone display,

Warning by LED matrix in refrigerator

• Improvement of User Experience: Visual affordance,

Enhanced emergency notification

Page 13: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Preliminary Guideline

13

Page 14: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

System Design (1)

14

• System Goal

- Input: Continuous value (Pressure value)

- Output: Light changing on LED

Page 15: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

System Design (2)

15

Page 16: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Experiment and Evaluation (1)

16

• Experiment Condition

- Material: Color Block

- Condition

• 12 participants (6 males and 6 females, between 24 and 32 years old)

• 4 modes

• 10 steps(R:0, G:0, B: chroma change)

• 10 steps(CAD color, B-G-R)

• 5 steps(R:0, G:0, B: chroma change)

• 5 steps(CAD color, B-G-R)

Page 17: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Experiment and Evaluation (2)

17

• Experiment data

- Questionnaire

- In-depth Interview

• Questionnaire

1. How many light steps?

2. Do you think force interval is equal between light steps?

3. Can you understand the light patterns?

4. Which pattern do you like?

5. It was convenient to use Color block (5 point Likert scale)

6. It was interesting to use Color block (5 point Likert scale)

Page 18: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Experiment and Evaluation (3)

18

• Evaluation

- It was convenient to use Color block

• u=3.67, σ=0.89

- It was interesting to use Color block

• u=3.92, σ=0.67

Page 19: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Experiment and Evaluation (4)

19

• Interview result

- It can be a toy for kids

- It is confused due to many light steps compared with force steps

- So cute

- It may be better to use rainbow color

- I like this item because that can show the force

- I don’t know why that color change like that

Page 20: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Conclusion

20

Page 21: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

21

Thank you!

Nockhwan Kim

Page 22: Improvement of User Experience through the Visualization of …humanict.skku.edu/data/paper_present/... · 2016-01-07 · Introduction (2) 4 In this paper, •Based on Literature

Reference

22

1. Information Visualization and Information Presentation for Visually Impaired People, ETRI, 2013 Electronics and

Telecommunications Trends

2. The Effect of Hue of Lighting on Affective and Cognitive Response Focused on Relaxation and Attention, KAIST Department of

Industrial Design Lee Eun Sol, 2012 KAIST Master’s Thesis

3. Understanding Sustainable Interaction Design – Identification of Product Attributes Influencing User’s Behavior Changes,

KAIST Department of Industrial Design Sohn Min-Jung; Nam Tek-Jin, 2011 Journal of Korean Society of Design Science

4. 윤자정, and 조택연. "비주의적 (非注意的) 시각정보 처리를 고려한 미디어 공간 연구." 한국공간디자인학회 논문집 29.단일호

(2014): 123-132.

5. 엄기준. "정보디자인 관점에서 본 대학교 모바일 웹 UX 가이드라인 연구." 디지털디자인학연구 14.2 (2014): 161-170.

6. 조명디자인, 차인호, 성균관대학교 출판부

7. 색의 유혹, 에바헬러, 예담출판사

8. 색채의 이해와 활용, 문은배, 안그라픽스

9. 색채지각론과 체계론, 윤혜림, 도서출판 국제

10. 색채심리마케팅과 배색이론, 윤혜림, 도서출판 국제

11. 시각심리학의 기초, Rober Snowden; Peter Thomson; Tom Troscianko, 학지사

12. 정보디자인 교과서, 오병근; 강성중, 안그라픽스

13. 오래가는 UX디자인 – 모바일 시대의 제품 디자인 기본 원칙, 반준철, 한빛미디어

14. UX 디자인 프로젝트 가이드, 러스 옹거; 캐롤린 챈들러, 위키북스

15. 디지털 미디어 디자인, 진경아, 커뮤니케이션북스