Improvement of user experience through the visualization of invisible information

Nock Hwan, Kim

The Graduate School

Sungkyunkwan University Department of Human ICT Convergence

Improvement of user experience through the visualization of invisible information

Nock Hwan, Kim

The Graduate School Sungkyunkwan University

Department of Human ICT Convergence

Improvement of user experience through the visualization of invisible information

Nock Hwan, Kim

A Masters Thesis Submitted to the Department of Human ICT convergence

and the Graduate School of Sungkyunkwan University

in partial fulfillment of the requirements

for the degree of Master of Science in Human ICT Convergence

October, 2015

Approved by Jun Dong, Cho Major Advisor

- i-

TABLE OF CONTENTS

ABSTRACT .............................................................................................................................. 1

I. Introduction ..................................................................................................................... 3

1. Background and necessity of research ................................................................................. 3

2. Thesis structure and method of research............................................................................. 4

II. Literature Review ........................................................................................................... 6

1. Invisible information ............................................................................................................. 6

2. Visualization of information ................................................................................................. 8

3. User experience on visualization process. .......................................................................... 11

4. Framework design for analysis of cas study. ..................................................................... 12

III. Case study ...................................................................................................................... 13

1. Research background and objectives ................................................................................. 13

2. Analysis about information flow ........................................................................................ 14

3. Analysis of used parts .......................................................................................................... 16

4. Analysis of visualization process ........................................................................................ 17

IV. Guideline suggestion ..................................................................................................... 18

1. 1st guideline ........................................................................................................................... 18

2. Case study for verification of guideline ............................................................................. 20

- ii-

3. Final guideline ...................................................................................................................... 21

V. Conclusion ..................................................................................................................... 23

REFERENCE ......................................................................................................................... 24

국문초록 .................................................................................................................................. 31

- iii-

LISTS OF FIGURE AND TABLE

Figure 1. Flow of this paper ......................................................................................................... 5

Figure 2. Major characteristic according to the scale (Seong, 2006, Research Methodology,

p.121) .............................................................................................................................................. 6

Figure 3. Classification of sensors according to detecting target (Kim, 2000, Let’s using of

the sensor, p.21-22) ........................................................................................................................ 7

Figure 4. The main advantages and considerations of information visualization (Oh, 2009,

Information design textbook) ....................................................................................................... 8

Figure 5. Interactions between the seven stages (Fry, 2007, Visualizing Data: Exploring and

Explaining Data with the Processing Environment) .................................................................. 9

Figure 6. Visualization of information & Perception procedure (Spence, 2007, Information

Visualization: Design for Interaction) ......................................................................................... 9

Figure 7. Visualization of information methods (Korea Database Agency, 2014, The Guide

for Advanced Data Analytics Professional) ............................................................................... 10

Figure 8. USA Elections Map (Interactive World maps, 2015,

http://cmoreira.net/interactive-world-maps-demo/usa-custom-election-map) ...................... 10

Figure 9. Three frameworks for analysis of case ...................................................................... 12

Figure 10. Four chart about case study ..................................................................................... 13

Figure 11. Analysis of information flow ............................................................................... 14-15

- iv-

Figure 12. Analysis of used parts ............................................................................................... 16

Figure 13. Collage of used parts................................................................................................. 17

Figure 14. Analysis of visualization process .............................................................................. 17

Figure 15. 1st guideline ............................................................................................................... 19

Figure 16. Applied guideline case: Color block ........................................................................ 20

Figure 17. Developed color block ............................................................................................... 21

Figure 18. Final guideline ........................................................................................................... 22

- 1-

ABSTRACT

Improvements of user experience through the visualization of invisible information

Hardware prototyping has been used as a useful approach for development in study of the

HCI field. In particular, the emerging of spotlighted research areas like healthcare, wearable device

and VR makes the offering of positive user experience has become an important part of research.

Accordingly, the need of hardware prototyping method is increasing in order to predict and verify

the effects of the materialized idea. In order to meet this demand, the various forms and types of

hardware prototyping tools; Arduino, Raspberry Pi, Little Bits, and so on appeared on the market.

As a result, the difficulty of making the device is lowered and the reliability of the prototype results

is raised compared to the investment of time and materials. Device reliability is increased with the

emergence of various tools, while it is difficult to find knowledge and experience information about

what is efficient to select any part and to implement any way in order to promote user experience.

In this paper, I collected and organized the knowledge and experience information in order to

making reference data that researcher and developer can consult to promote the usability of

hardware prototypes. In particular, I suggest guideline oriented to visualization of invisible

information for improvements of user experience.

In this paper, based on the literature review, I collected and organized meaning, types, and

methods of three items; invisible information, information visualization, and improving the user

experience in visualization. Based on previous results, I extract major attributes during

visualization process. In addition, based on the case study of research and development examples;

department of Human ICT Convergence in Sungkyunkwan University, I analyzed about ratio of

- 2-

hardware prototyping and visualization, types of input and output information, utilizing parts, and

visualization process by graphs and tables. Based on literature review and case study results, I

suggest the primary hardware prototyping guideline. Then, I do color block project refer to primary

guideline and reinforce the guideline on the basis of project output. In this paper, I suggest

organized materials that can be referred by researcher to expand usability of hardware prototype

and guideline that can be referred by novice developer to reduce mistakes and errors.

KEYWORDS : HCI, Visualization of information, hardware prototyping, guideline

- 3-

I. Introduction

1. Background and necessity of research

HCI(Human Computer Interaction) research field connote meaning that ‘There are

user(human)’. Existence of user makes HCI researcher using hardware prototyping method

frequently. Hardware prototyping also has been used as a useful approach by developer. That

method helps analysis and experiment about usefulness, usability, and affect roughly through pilot

test.

In addition, spotlighted research areas like healthcare, wearable device, VR, and so on are

appeared and studied actively by researcher. The offering of positive user experience is significant

factor in these areas. For example, developer of smart maternity clothes will test about response

and feeling of expected user; pregnant woman and husband when materialize healthcare idea (Jeon,

2015). Accordingly, the demand of using hardware prototyping method is increasing in order to

predict and verify the idea.

High demand makes change of market. The various forms and types of hardware

prototyping tools appeared on device transactional website and kickstarter project. Arduino,

Raspberry Pi, and Little Bits are representative product that developer mostly using. Emerging of

these tools bring two advantage to HCI research field. First, the difficulty of making the prototype

device is lowered. Beginner can enter to making easily because learning time is decrease and

operating tool is simple. Second, reliability of the prototype results is raised. On the same condition;

investment of time and materials are equal, accuracy are increase and finding error is simple

compare to before using tools.

However, it is difficult to going from idea to prototype yet. There are many device parts and

novice developers do not know what to select. In addition, knowledge and experience information

isn’t easily found. These data is tacit knowledge that internalized commonly. First purpose of this

- 4-

thesis is to collect and analyze the precedence case of SKKU. I expect to externalized reference

data can help many researchers. Second purpose of this thesis is to make guideline from data. I

expect to guideline can help many developers.

In particular, I suggest guideline about visualization of invisible information. Visual

information comprises a large proportion of user experience during using device. For this reason, I

concentrate visualization and make title of this paper; ‘Improvement of user experience through the

visualization of invisible information’.

2. Thesis structure and method of research

The body of this paper is composed 3parts; Literature review, Case study and Guideline

suggestion. Guideline suggestion part is diveded to 1st guideline, case study for verification, and

final guideline. Figure 1 show each steps purpose rough. Literature review makes frame for

analysis. Case study collects and organizes examples matching to frame. 1st guideline is made

based on identified types of case. Then, verification is attended. Lastly, consolidated final guideline

is suggested.

In literature review part, I research and make form for case study. Research aims to do

analysis of visualization process. Analysis themes are invisible information, visualization of

information, and improving the user experience in visualization. Based on previous works, I extract

major attributes and make three frameworks for case analysis.

In case study part, I collect and arrange the data refer to frameworks. Data comes from 2

groups. 1st case is 58 submitted papers from department of Human ICT Convergence on

Sungkyunkwan University.

In guideline suggestion part, I suggest preliminary guideline. Then, I proceed project refer

to guideline and verify applicability of 1st guideline. Project object is making block that showing

magnitude of external force by visualization method. Finally, I reinforce the guideline on the basis

- 5-

of project output.

Figure 1. Flow of this paper

- 6-

II. Literature Review

1. Invisible Information

Information that is appeared in hardware prototyping process is classified into two

categories. There are input information and output information. Input information is principally

measured values by the various sensors. Output information come out in the form of sense to user.

Used types of sense are mainly visual, auditory and tactile feeling except for the smell and taste. In

this paper, I define the invisible information as any information that is not externalized by

visualization on the implemented device.

Input information can be separated by expression form. First, input information is

qualitative or quantitative. Qualitative information is described as a language, character, etc. For

example, ‘The handle was uncomfortable with use’. Quantitative information is shown as a value,

symbol, and figure such as ‘27cm’, and ’64.3kg’. Also, information is divided into further detail by

type of scale. There are 5 scales like nominal, ordinal, interval, ratio, and absolute scale. Figure 2

shows major feature according to the scale. Input information is mainly measured by interval scale,

ratio scale, and absolute scale on sensors of prototypes. That is qualitative information.

Figure 2. Major characteristic according to the scale (Seong, 2006, Research Methodology, p.121)

- 7-

Input information is usually measured using the various sensors. Direct entering data of user

is usually rejected because of the inconvenience. Classifications of sensors are mechanical, electro-

magnetic, optical, radiation, acoustic, thermal, chemical, and biological according to detecting

target. Figure 3 contains information about detail classification of sensors.

Figure 3. Classification of sensors according to detecting target (Kim, 2000, Let’s using of the sensor, p.21-22)

- 8-

Output information can be separated by the human senses can perceive. Mostly, the output

information is communicated with user in the order of sight, hearing, and tactile feeling. For

example, we take data from smartphone by display, speaker, and vibration signal. Visual output is

conveyed to user through the way like blink, color change, graphic, and so on. Auditory

information is processed by level of sound, tone, frequency, phase, etc. Tactile signal is appeared in

various forms; thermal changes, vibration, movement, pressure, etc.

2. Visualization of Information

Visual information has a high weight in which cognitive processes. Visual areas of the brain

take up half of the brain information processing capability. A significant amount of brain be

dedicated to processing visual images.(Weinschenk, 2009) So visualization of information is

studied in many research field; HCI, computer engineering, graphic, visual design, big data, etc.

Also, it is important to develop prototype. Information visualization helps to interaction with user

through expansion of recognition. Figure4 shows the merits and demerits of visualization.

Figure 4. The main advantages and considerations of information visualization

(Oh, 2009, Information design textbook)

- 9-

Visualization of information has procedures. Ben Fry(2007) arrange the visualization

process like figure 5. Fry explain stages focused on the interaction between each step. Information

is structurally categorized on the parse step after acquiring the information. Then, filtering the

information to remove unwanted information and make information extraction algorithms from

mining. Find the effective expression methods on represent steps and transfer the feedback to

acquire and filter steps. And refine the information representation. Finally, refined data is interacted

with user and user’s response is feedback to mine and refine steps. Robert Spence(2007) show the

information visualization and perception procedure like figure 6. Spence explain procedure by 3

steps; representation, presentation, and interaction.

Figure 5. Interactions between the seven stages

(Fry, 2007, Visualizing Data: Exploring and Explaining Data with the Processing Environment)

Figure 6. Visualization of information & Perception procedure

(Spence, 2007, Information Visualization: Design for Interaction)

- 10-

These steps are observed similarly in hardware prototyping. Input value obtained by the

sensor is processed on the MCU and shown as the output value like blink of red light. Output value

is communicated with user and evaluation is reflected in prototype improvement. Also, Ben Fry and

Robert Spence have represent step in common. That implies purpose and method of visual

expression is important issue.

There are many developed visualization method. Figure 7 shows classified table by purpose

of visualization. Time visualization represents change and is used for track the tendency.

Distribution visualization can show occupied degree of all. Relation visualization helps to predict

changes in the future. Comparison visualization can strengthen the interesting part to highlight the

differences from another. Spatial visualization is used to show enhanced information to represent

the location data like figure 8. Each method has different advantages and disadvantages, so use

properly method for the purpose.

Figure 7. Visualization of information methods

(Korea Database Agency, 2014, The Guide for Advanced Data Analytics Professional)

Figure 8. USA Elections Map

(Interactive World maps, 2015, http://cmoreira.net/interactive-world-maps-demo/usa-custom-election-map)

- 11-

3. User Experience on Visualization Process

User experience is occurred when someone interact with prototype device. Occurred time is

interact stage of Ben Fry model and interaction stage of Robert Spence model. Usability and

emotional experience of results can be improved as considering user experience during

visualization process.

Bahn(2013) speak four kinds of factors to consider when design an interaction process in

the book. First, we need to think about the affordances. Affordance is perceived characteristics of

an object or environment to induce the behavior of actors. Product that has high level of behavior

affordance can be used natural as intended manner without additional description. It is necessary to

add an appropriate signifier in order to induce action.

Second, the prototype must provide the appropriate feedback. If the reaction of

device(output information) is not fit to behavior of user(input information), usability will be

reduced extremely although the reliability of the equipment is high. Visual feedback is to convey

information by using the characteristics such as color, shape, size, movement, etc. For example of

commonly used visual feedback in digital media, there are warning window, a progress bar, flicker

effect for notifying a new information arrives.

Third, proper response relationship is important. Developer should design carefully

considering arrangement of components, behavior of user, and meaning of components when

creating product. If the stove are arranged up and down and the turn-on buttons are arranged left

and right, that have inappropriate correspondence. If developer use the green light that is

recognized departure as a means of stop, it can cause a major accident. Improper relation can bring

the chaos to user.

Last, suitable constraints and limitations are need. Various options and excessive

information can make complicate interaction. Developer can induce defined action by the

constraints during input process and transfer the information concisely by the limitations about

- 12-

amounts of information during output process.

Besides, visualization on display is need to consider PSE(Picture superiority effect) and

Gestalt laws. If information is presented as pictures memories are last for long rather than as words

according to PSE. That means to use figure and symbol is good for user experience. Gestalt laws

include several laws; law of grouping, law of pragnanz, and so on. These laws can be used for

making concise visual information.

4. Framework design for analysis of case study

In this thesis, I suggest three frameworks for analysis of case study based on the literature

review. Each framework has purpose; analysis of information flow, analysis of used parts, and

analysis of visualization process of hardware prototypes. (A) framework is aimed at hardware

prototype idea, (B) framework is aimed at materialized hardware prototypes and (C) framework is

aimed at hardware prototypes that using visual expression.

(A)

(B)

(C)

Figure 9. Three frameworks for analysis of case

- 13-

III. Case study

1. Research background and objectives

Case study aimed at presented paper by department of Human ICT Convergence on

Sungkyunkwan University. Researched cases satisfy four conditions. First, lead author of the thesis

belong to department of Human ICT Convergence. Second, professor of this department is coauthor

of the thesis. Third, the paper is published on 2014 and 2015. Last, developed paper is considered

to one case. According to these conditions, 55 cases were researched. Each case is analyzed by

previously suggested frameworks.

Figure 10. Four chart about case study

- 14-

Figure 10 shows four chart about 55 cases. Subject of 29 cases(52.7%) require hardware

prototyping for study. Among 29 papers that need hardware prototype, 23 cases(79.3%) use visual

expression to interact with user. Among 29 papers that need hardware prototype, 16 cases(55.2%)

develop hardware prototype. Among 16 materialized prototypes, 13 cases(81.3%) use visual

method for interaction.

2. Analysis of information flow

29 cases that require hardware prototyping are analyzed by information flow framework.

This framework has seven items; title, purpose, input information, type of input information, output

information, type of output information, and lead author. This analysis shows selected input

information is mostly quantitative data(18 cases, 62%) that can processes easily and selected output

information is mostly visual information(23 cases, 79.3%) when planning hardware prototype.

Figure 11(a). Analysis of information flow

- 15-

Figure 11(b). Analysis of information flow

- 16-

3. Analysis of used parts

16 cases that develop hardware prototype are analyzed by used parts framework. This

framework has six items; title, input parts, MCU, output parts, hard case, and lead author. Figure 12

shows the analysis results and Figure 13 shows organized data. This analysis shows selected mainly

used parts to develop hardware prototype.

Figure 12. Analysis of used parts

- 17-

Figure 13. Collage of used parts

4. Analysis of visualization process

13 cases that using visual methods for interaction with user are analyzed by visualization

process framework. This framework has five items; title, output information, purpose of

visualization, visualization method, and lead author. Figure 14 shows analysis.

Figure 14. Analysis of visualization process

- 18-

IV. Guideline suggestion

1. 1st guideline

1st guideline is structured refer to literature review and case study. Figure 15 shows 1st

guideline. Guideline is composed of four parts; system flow setup, parts selection, visualization,

and qualitative check. System flow setup means to establish the foundation of project. Developer

decides purpose of project, input information that come in device, and output information that is

transferred to user. Parts selection suggests the selection guideline for making hardware prototype.

That step suggests proper components like input parts, MCU, output parts, and hard case depending

on restriction of developer. For example, difficulty of data processing is low and small size

prototype is required, guideline recommend use Arduino Pro Mini for MCU. Visualization step

shows recommendation chart for visualization process when output information is visual. That step

recommends proper choice about output parts and visualization method during visualization

process. For example, small size and inexpensive budget is given and expression of simple figure is

required, that suggest dot matrix for output parts. In addition, visualization methods are classified

into four methods; warning(notification), value representation, status change expression, and

analysis of values and recommended selectable methods for each situation. For example, ratio

analysis of values is required and values in hierarchy structure, that chart recommends to use tree

map for expression. Lastly, qualitative check show 7 factors; affordance, feedback, inclusivity,

economic efficiency, complexity, visibility, and compatibility for verify the hardware prototype.

- 19-

Figure 15. 1st guideline

- 20-

2. Case study for verification of guideline

Case study is progressed for purpose of showing applied guideline case and verifying the

guideline. Project runs on the guideline steps and is used for search the problem and reinforces the

1st guideline. Verification method is qualitative evaluation. Interview was done about opinion of

developer using guideline during project and response of user during pilot test.

Project case is color block project. Figure 16 shows applied guideline case. Purpose of color

block is visualizing the degree of load distribution on the structure. Input information is the load

applied from the outside and output information is change of color. Parts selection and visualization

method is choose by guideline. Input part is pressure sensor, MCU is Arduino Pro Mini, Hard case

is Lego, output parts is multicolor LED, and visualization method is color status change.

Figure 16. Applied guideline case: Color block

Figure 17 show hardware prototype that is developed based on guideline. Prototype is

composed of 21 blocks. LED color is change from blue(0, 0, 255) through green(0, 255, 0) to

red(255, 0, 0) depending on degree of pressure value. Structured block show distribution of load.

- 21-

Figure 17. Developed color block

The production result is consistent with apparently given guidelines check list. But there are

several negative opinions of user. First, it is difficult to identify the standard of color interval and

grasp a change interval. That show proper status change interval is important to feel the meaning

intuitionally. Second, color change rule is hard to understand. Color block use the B-G-R change

rule that is used in some computer analytical program. Users prefer studied color rules like rainbow

color and traffic lights color. That show learnability is major factor to develop hardware prototype

that have high usability. Based on these results, the final guideline is added interval and learnability

to qualitative check.

3. Final guideline

Based on case study for verification of guideline, I add an two qualitative check factors;

interval and learnability.

- 22-

Figure 18. Final guideline

- 23-

V. Conclusion

This thesis contributes two things of HCI field research. First, this study suggests organized

materials about hardware prototyping case study on department of Human ICT Convergence. That

shows several charts and tables. First, ratio of hardware prototyping and development in research

subject chart and ratio of visualization method in hardware prototyping chart is presented. Second,

purpose, input information, and output information of hardware prototype table is presented. Third,

used parts for developing prototype tables is presented. Fourth, purpose of visualization and

visualization methods of output information table is presented. That charts and tables can be

referred by researcher to reduce errors and mistakes when developing. Also, this paper suggests

guideline for improvement of user experience through the visualization of invisible information

when developing the hardware prototype. This guideline can be referred by novice developer to

make first prototype.

This paper has two critical points. First, number of case is little and case is limited in

department of Human ICT Convergence case. Thus, there is weakness that distinct of several cases

is judged general characteristic. The other is verification of guideline is not precise. On this paper,

author does only qualitative check of guideline for reason of limited resources. Thus, there are

possibility that guideline have critical mistakes.

Future works can grow to two directions. First, it is expanding of guideline. Current

guideline is focusing on visualization only. Therefore, expanded guideline can help every case of

prototyping. The other is reinforcement of guideline. Guideline is expected that can be enhanced

practically by close experiments.

- 24-

REFERENCE

Domestic Literature

구본창, 김준호, 박준영, 박중신, & 조준동. (2014). 디지털 사이니지 정보 수용에 적합한 모바일 UI 디

자인 제안. 한국디자인학회 2014 봄 국제학술대회, 244-245.

구본창, 김준호, & 조준동. (2014). Leap Motion 을 활용한 학습 환경에서의 제스처 인식 인터페이스. HCI

2015, 209-214.

김녹환, 유지환, 노우리, 이태양, & 조준동. (2015). 안전거리의 시각화를 통한 보행자 신호체계 개선 방

안. 한국디자인학회 학술발표대회 논문집, 84-85.

김녹환, 유지환, 박민재, 금정호, 유준우, 이지훈, & 조준동. (2014). 항암치료에 의해 탈모를 겪고 있는

환자들을 위한 스마트 가발. HCI 2015, 246-252.

김보연. (2000). 센서를 활용하자. 한진, 21-22.

김예지, 이나현, 이태양, 장도영, & 조준동. (2015). 헬스케어와 게이미피케이션의 접목을 통한 스마트와

치 어플의 지속적 사용 증대 제안. 한국디자인학회 2015 가을 국제학술대회, 730-731.

김주희, & 조준동. (2015). 고령 운전자를 위한 차량 HUD 인터페이스 제안. 한국디자인학회 학술발표대

회 논문집, 70-71.

김준호, 엄정훈, 구본창, 박준영, & 조준동. (2014). 웨어러블 형태의 스마트 의료 밴드 서비스 디자인

제안. 한국디자인학회 2014 가을 국제학술대회, 40-41.

노우리, 김녹환, 이태양, 천혜림, 유준우, & 조준동. (2015). 하차 정보의 직관적 전달을 위한 하차 벨 서

비스디자인. 한국디자인학회 학술발표대회 논문집, 88-89.

문유정, 홍주연, 신주영, & 조준동. (2015). IoT 기반 제품 개발을 위한 사용자 기반 시나리오 평가 방법

- 25-

에 관한 연구. 한국디자인학회 학술발표대회 논문집, 82-83.

박기혁, 반소량, & 조준동. (2015). 가족 간의 소통을 위한 I. O. T. 기반 패치형 음성디바이스 시스템. 한

국디자인학회 2015 가을 국제학술대회, 728-729.

박기혁, 이나현, & 조준동. (2015). 에스컬레이터 안전사고 방지를 위한 시각적 마킹 디자인 연구. 한국

디자인학회 학술발표대회 논문집, 90-91.

박중신, & 조준동. (2014). Flip gesture 를 활용한 실시간 상호적 수업참여 시스템 개발. HCI 2015, 118-119.

박상선, 정동녘, 노지영, & 조준동. (2014). 심박과 언어를 활용한 특정 장소에 대한 인간의 감정 유추

연구. HCI 2015, 253-260.

박상현, 방하영, & 조준동. (2014). 차량용 클러스터의 커스터마이징에 관한 연구. HCI 2015, 185-187.

박상현, 이지훈, 박민재, 오정균, 조준동. (2015). 복약순응도 향상을 위한 텀블러 디자인 연구. 한국디자

인학회 학술발표대회 논문집,56-57.

박상후, 신주영, & 조준동. (2014). 사물인터넷 (IoT) 환경을 고려한 무선 충전 기술이 산업디자인 환경

에 미치는 영향. 한국디자인학회 2014 봄 국제학술대회, 110-111.

박상후, 전빈, 조재원, 신주영, 조준동, & 배병철. (2014). 휴대 가능한 접이식 핸드폰 케이스 형태의 머

리에 쓰는 가상현실 기기 (HMD). 한국디자인학회 2014 가을 국제학술대회, 52-53.

박준영, 구본창, 김준호, & 조준동. (2014). 사물통신 기반 영아용 인터랙티브 스마트 케어를 위한 디바

이스 및 시나리오 제안. 한국디자인학회 2014 가을 국제학술대회, 188-189.

박준영, 이지훈, 김준호, 노지영, 송승현, 구본창, & 조준동. (2015). 분노조절장애 완화를 위한 웨어러블

디바이스 시나리오 디자인. 한국디자인학회 학술발표대회 논문집, 58-59.

반소량, 홍정기, 송승현, & 조준동. (2015). 사물 통신 기반 촉감 전달 웨어러블 디바이스. 한국디자인학

회 학술발표대회 논문집, 54-55.

- 26-

반준철. (2013). 오래가는 UX 디자인: 모바일시대의 제품 디자인 기본 원칙. 한빛미디어㈜

성태제, & 시기자. (2006). 연구방법론. 서울: 학지사, p.121.

송승현, 이지훈, 박민재, 오정균, & 조준동. (2014). 한 손을 사용한 스마트폰 카메라 인터페이스의 사용

성에 관한 연구. HCI 2014, 89-92.

신주영, 이혜연, 김성연, 배병철, & 조준동. (2014). 걸음걸이 관리를 위한 시각적 피드백 시스템 디자

인. HCI 2015, 286-291.

신희숙, 임정묵, 박준석. (2014). 정보 시각화 기술과 시각장애인을 위한 정보 표현 기술. [ETRI]전자통신

동향분석

오병근, & 강성중. (2008). 정보디자인 교과서. 아그라픽스, pp09-10.

유지환, 김녹환, 박민재, 금정호, 유준우, & 조준동. (2014). 진동 신호의 청각적 유효성에 대한 연

구. HCI 2015, 419-424.

유지환, 유준우, 박민재, 이지훈, 김녹환, 금정호, & 조준동. (2015). 돋보기 형태의 스마트폰 줌 앱세서

리 제안. 한국디자인학회 학술발표대회 논문집, 52-53.

이나현, 김예지, 장도영, 조준동, & 박수이. (2015). 가족 간의 소통을 증진시키는 디지털액자 플랫폼의

어플리케이션 제안. 한국디자인학회 학술발표대회 논문집, 74-75.

이나현, 조준동, & 김태양. (2015). 스마트 금융서비스를 위한 사용자 중심의 핀테크(fintech) 어플리케이

션 사례연구를 통한 핀테크 어플리케이션 UI 지향점 제안. 한국디자인학회 2015 가을 국제학술

대회, 230-233.

이지훈, 송승현, 박민재, 이종선, & 조준동. (2014). 사무실 환경에서 에너지 절약을 유도하기 위한 EED

(Energy Efficiency Display) UI 분석 및 개선방안. 한국디자인학회 2014 봄 국제학술대회, 206-207.

이태양, 김녹환, 노우리, 유준우, & 조준동. (2015). 사용자와 상호작용하는 엘리베이터 모델 디자인 제

- 27-

안. 한국디자인학회 학술발표대회 논문집, 86-87.

이혜연, 노지영, 신주영, 이종선, & 조준동. (2014). 친환경 소재를 이용한 지속가능한 컵홀더 디자인-녹

색소비자를 대상으로.

이혜연, 박민재, 송승현, & 조준동. (2014). 눈 깜빡임 측정 프로그램과 가습기와의 M2M 서비스. HCI

2014, 679-681.

장도영, 김예지, 이나현, & 조준동. (2015). 주방용 스마트 TV 의 인터랙션 디자인-립모션 (Leap Motion)

을 이용하여. 한국디자인학회 학술발표대회 논문집, 68-69.

전빈, 박상후, 조재원, 배병철, & 조준동. (2014). 스마트 임산부복 (Lily Kickee): 태아의 태동을 감지하여

시각적으로 보여주는 웨어러블 장치. HCI 2015, 412-418.

전빈, 박상후, 조재원, & 조준동. (2014). NFC 기능이 탑재된 스마트 주문 솔루션을 위한 모바일 애플리케

이션 디자인 제안. 한국디자인학회 2014 가을 국제학술대회, 32-33.

정범택, & 조준동. (2015). 시각 장애인 접근성 강화 스마트 TV 리모컨 및 UX 디자인. 한국디자인학회

학술발표대회 논문집, 72-73.

정희석, 김영윤, 임재영, 이용준, 이효건, & 조준동. (2014). 염도계 사용자를 고려한 스마트 헬스케어 염

도계 디자인. 한국디자인학회 2014 가을 국제학술대회, 60-61.

정희석, & 조준동. (2014). 사회연결망 (SNA) 을 이용한 사용자 경험 분석. HCI 2015, 327-333.

조영래, & 조준동. (2015). 대소변을 이용한 건강 자가검진 IOT 서비스 디자인.2015 한국디자인학회 봄

국제학술대회, 270-271.

한국데이터베이스진흥원. (2014). 데이터 분석 전문가 가이드(ADP)(ADsP). 한국데이터베이스진흥원

한세형, 배병철, & 조준동. (2014). Funnel News App: 메타포 인터페이스와 게이미피케이션을 적용한 실

시간 인터랙티브 뉴스서비스 App 디자인 제안. 한국디자인학회 2014 가을 국제학술대회, 140-141.

- 28-

한세형, & 조준동. (2015). 감염병 예방에 효과적인 올바른 손씻기 유도를 위해 넛지 이론을 적용한 스

마트 거울과 세면대 디자인 모델 제안. 한국디자인학회 2015 가을 국제학술대회, 696-697.

홍정기, 김성연, 김태현, 엄정훈, 남춘성, & 조광수. (2014). 착용형 전자 점자 기기의 점자 출력 인터페

이스. HCI 2014, 17-20.

Foreign Literature

Cho, J., Park, S., Jeon, B., Bae, B. C., & Cho, J. D. (2015, January). People's Emotional Responses to a Plant's

Emotional Expression. In Proceedings of the Ninth International Conference on Tangible, Embedded, and

Embodied Interaction (pp. 545-550). ACM.

Fry, B. (2007). Visualizing data: exploring and explaining data with the Processing environment. " O'Reilly Media,

Inc.".

Hong, J. K., Koo, B. C., Ban, S. R., Cho, J. D., & Bianchi, A. (2015, September). BeuPo: a digital plant that you can

raise and customize with your current posture. In Proceedings of the 2015 ACM International Joint

Conference on Pervasive and Ubiquitous Computing and Proceedings of the 2015 ACM International

Symposium on Wearable Computers (pp. 1015-1020). ACM.

Hong, J. K., Song, S., Cho, J., & Bianchi, A. (2015, January). Better Posture Awareness through Flower-Shaped

Ambient Avatar. In Proceedings of the Ninth International Conference on Tangible, Embedded, and

Embodied Interaction (pp. 337-340). ACM.

Interactive World Maps. (2015). ‘Your own custom Interactive USA Election Map’. http://cmoreira.net/interactive-

world-maps-demo/usa-custom-election-map)

Jeon, B., Ryu, J. H., Cho, J., Bae, B. C., & Cho, J. D. (2015, September). Smart maternity clothes for visualizing

fetal movement data. In Proceedings of the 2015 ACM International Joint Conference on Pervasive and

Ubiquitous Computing and Proceedings of the 2015 ACM International Symposium on Wearable

- 29-

Computers (pp. 189-192). ACM.

Joi, Y. R., Jeong, B. T., Kim, J. H., Park, K. H., Lee, T., & Cho, J. D. (2015, October). WearLove: Affective

Communication via Wearable Device with Gamification. In Proceedings of the 2015 Annual Symposium on

Computer-Human Interaction in Play (pp. 559-564). ACM.

Keum, J., Ryu, J. H., Moon, Y. J., Cheon, H., Lee, N., Bae, B. C., & Cho, J. D. (2015, October). Exergame

Development Using Body Composition Data for Obesity Care. In Proceedings of the 2015 Annual

Symposium on Computer-Human Interaction in Play (pp. 577-582). ACM.

Lee, M., & Cho, J. D. (2014, September). Logmusic: context-based social music recommendation service on mobile

device. In Proceedings of the 2014 ACM International Joint Conference on Pervasive and Ubiquitous

Computing: Adjunct Publication (pp. 95-98). ACM.

Lee, M., Koo, B. C., Jeong, H. S., Park, J., Cho, J., & Cho, J. (2015, May). Designing mHealth intervention for

women in menopausal period. InProceedings of the 9th International Conference on Pervasive Computing

Technologies for Healthcare (pp. 257-260). ICST (Institute for Computer Sciences, Social-Informatics and

Telecommunications Engineering).

Lee, M., Koo, B. C., Jeong, H. S., Park, J., Cho, J., & Cho, J. D. (2015, June). Understanding Women's Needs in

Menopause for Development of mHealth. InProceedings of the 2015 Workshop on Pervasive Wireless

Healthcare (pp. 51-56). ACM.

Noh, J., Jeong, D., Park, S., & Cho, J. (2015) Design Guideline on Location Based User Emotion Sharing Map

Service . In HCI International 2015-Posters’ Extended Abstracts (pp. 514-518). Springer International

Publishing.

Noh, G., Shin, J., Cho, J., & Bianchi, A. (2014, December). Guidelines for a baby's nutrition monitoring system.

In Proceedings of HCI Korea (pp. 92-97). Hanbit Media, Inc..

Park, J., Jeong, B., Jeon, S., Han, S., Cho, J. D., & Ko, J. (2015, April). Understanding Interactive Interface Design

Requirements for the Visually Impaired. In Proceedings of the 33rd Annual ACM Conference Extended

Abstracts on Human Factors in Computing Systems (pp. 881-886). ACM.

- 30-

Park, J., Koo, B. C., Cho, J., & Bae, B. C. (2015, October). SnackBreaker: A Game Promoting Healthy Choice of

Snack Foods. In Proceedings of the 2015 Annual Symposium on Computer-Human Interaction in Play (pp.

673-678). ACM.

Park, S., Jeon, B., Cho, J., Bae, B. C., & Cho, J. D. (2015, February). Experiment on Emotional Exchange Method

through Phone Stack Game. InProceedings of the 18th ACM Conference Companion on Computer

Supported Cooperative Work & Social Computing (pp. 25-28). ACM.

Sanghoo, P., Geeyoung, N., & Jun-Dong, C. (2015, June). Design and evaluation of socially assistive robotics

providing assistance for children through machine learning of languages. In Proceedings of the 14th

International Conference on Interaction Design and Children (pp. 243-246). ACM.

Song, S., Hong, J. K., Oakley, I., Cho, J. D., & Bianchi, A. (2015, April). Automatically Adjusting the Speed of E-

Learning Videos. In Proceedings of the 33rd Annual ACM Conference Extended Abstracts on Human

Factors in Computing Systems (pp. 1451-1456). ACM.

Song, S., Noh, G., Yoo, J., Oakley, I., Cho, J., & Bianchi, A. (2015, September). Hot & tight: exploring thermo and

squeeze cues recognition on wrist wearables. In Proceedings of the 2015 ACM International Symposium on

Wearable Computers (pp. 39-42). ACM.

Spense, R. (2007). Information Visualization: Design for Interaction.

Weinschenk, S. M. (2009). Neuro Web Design: What Makes Them Click?. New Riders Publishing.

Yoo, J., Kim, N., Keum, J., Ryu, J. H., Park, M., Lee, J., ... & Cho, J. (2015). Preliminary Guidelines to Build a

Wearable Health Monitoring System for Patients: Focusing on a Wearable Device with a Wig. In HCI

International 2015-Posters’ Extended Abstracts (pp. 361-365). Springer International Publishing.

- 31 -

국문초록

비시각 정보의 시각화를 통한 사용자 경험 개선

김 녹 환

성균관대학교 성균융합원

휴먼ICT융합학과

HCI 분야의 연구에는 개발접근법의 하나로서 하드웨어 프로토타이핑이 유용하

게 활용되고 있다. 특히 헬스케어, 웨어러블 디바이스, VR과 같은 긍정적인 사용자 경

험의 선사가 중요한 분야들의 연구가 활발해짐에 따라 아이디어를 구체화하였을 때의

효과를 예측하고 검증하기 위하여 하드웨어 프로토타이핑 방법에 대한 수요가 높아지

고 있다. 이러한 수요를 충족시키기 위하여 아두이노, 라즈베리 파이, 리틀 비츠와 같

은 다양한 형태와 종류의 하드웨어 프로토타이핑 도구가 시중에 등장하여 기기 제작의

난이도는 낮아지고 투자한 시간과 물자에 비한 결과물의 신뢰도가 보다 높아졌다. 그

러나 제작을 위해 선택할 수 있는 도구가 다양하게 등장하여 장치 신뢰성이 높아진 것

에 반하여 사용자 경험 증진을 위하여 어떤 부품을 택하고 어떠한 방식으로 구현하는

것이 효율적인지에 대하여 참고할 수 있는 지식과 경험 정보는 분산되어 간헐적으로

등장하기에 찾는데 어려움이 있다. 이에 본 논문은 하드웨어 프로토타입의 사용성 증

진을 위하여 연구 개발자들이 참고할 수 있는 지식과 경험 정보를 정리하고자 하며,

특히 정보를 시각적으로 표현하는 방법에 중점을 두어 비시각 정보의 시각화를 통하여

사용자 경험을 개선하는데 참고할 수 있는 가이드라인을 제시하고자 한다.

본 논문에서는 문헌 연구를 바탕으로 비시각 정보, 정보의 시각화, 사용자 경험

개선의 세 가지 항목에 대하여 그 의미와 종류 및 방법을 정리한다. 그리고 이를 바탕

- 32 -

으로 비시각 정보의 시각화 과정에 주요한 요소를 추출한다. 또한, 성균관대학교 휴먼

ICT융합학과에서 진행된 사례들을 분석하여 하드웨어 프로토타이핑과 시각화 비율,

입출력 정보의 종류, 활용 부품, 시각화 과정의 네 가지 부분에 대하여 표와 그래프로

정리한다. 그리고 문헌 연구와 사례 연구를 바탕으로 1차 하드웨어 프로토타이핑 가이

드라인을 제시한다. 그 후, 1차 가이드라인을 참고하여 진행한 컬러블록 프로젝트 결과

물을 바탕으로 1차 가이드라인을 강화한 최종 가이드라인을 제시한다. 이와 같은 연구

를 통하여 연구자들이 프로토타이핑을 진행하는데 참고할 수 있는 정리된 자료와 초보

개발자들이 제작에 참고할 수 있는 가이드라인을 제시하고 있다.

주제어 : HCI, 정보의 시각화, 사용자 경험, 하드웨어 프로토타이핑, 가이드라인