7
Developing a Usability Testing System Using Web Standards Youngsu Kim 1 , Junyoung Choi 1 , Ji Hyoun Lim 2 1 BPM/Mobile Development Team, R&D Unit, HandySoft Korea Inc., Seoul, 137070 2 Department of Industrial Engineering, Hongik University, Seoul, 121-791 ABSTRACT Objective: The aim of this study is to design and develop a UI evaluation system for smart phones using web standards. Background: The variety of past usability evaluations are based on WIMP user interfaces. However, the emergence of smart phones brought forth numerous types of operating systems and mobile browsers to the users. To evaluate interfaces on this wide array of devices, a new approach is needed in designing and developing UI evaluation systems. Method: Using web standards consisting of HTML 5, CSS 3 and ECMA Script (JavaScript), a 2-tier architecture consisting of a web/e-mail server and the application was designed to ensure interoperability between devices. To minimize data transaction and acquire safety in terms of data integrity, the application requires a single download of all required resources. The application runs on the client-side only, writes the output data into an e-mail and uses the phone’s e-mail application to send the data to the server – again requiring only one upload transaction. Case Study: A smart phone user interface evaluation experiment was developed. A single URL was given to subjects to access, download and execute the web application. Experiment data were successfully collected via e-mail. Conclusion: Web standards have proved to be capable of implementing usability evaluation systems tailored for smart phones, providing to a certain limit the qualities required for valid academic experiments in the field of Usability Engineering. Application: The design and development of the proposed system will help Usability experts perform UI evaluations with flexibility and help subject recruiting by improved interoperability and availability. Keywords: Smart Phone, Web Application, User Interface, Usability Evaluation, Web Standards, Interoperability, Data Collection, User Context 1. Introduction HCI에서 바라보는 사용자 인터페이스(user interface, 이하 UI)사용자와 기기 사이의 상호작용을 결정짓 시스템의 요소로서, 사용자가 해당 기기를 사용하 과업을 수행하는 데에 있어서 발생하는 모든 경험 결과를 결정지으며, 제품의 일부로서 차별화 요소 이자 핵심 경쟁력이 된다(Andre, 2007). 이처럼 중요한 역할을 하는 UI사용자의 특성과 의도, 그리고 시스 템의 목적에 맞게 평가하는 것은 시스템이 제공할 있는 가치를 검증하는 활동이라고 있다. UI사용성, 주어진 맥락 하에 특정 목표를 성하기 위해 설계된 시스템을 사용자가 효과적이고, 효율적이며, 만족스럽게 사용할 있는 정도를 측정 하는 것을 사용성 공학이라고 한다(ISO, 1988). 사용성 공학은 제품 개발 단계에서 UI사용성을 극대화하기 위한 체계적인 방법들을 다루는 학문의 분야이며, 러한 방법들 가장 활발히 연구되고 있는 분야는 사용성 평가이다 (Scholtz, 2004). 사용성 평가는 Figure 1정리된 바와 같이 초기에 문서화 설문조사 등에서 시작하여, 점차 성능 측정, GOMS 모델, SUMI 정량적 기법으로 발전하였고, 1990년대부터 경험적 평가 인지적 walkthrough 사용자 행태를 직접 관찰하는 실험까지 발전하였으며, 인터넷과 World-Wide Web발전함에 따라 원격 사용 평가 등의 방법론들이 대두되었다. (Scholtz, 2004; Hartson et al., 2001).

Developing a Usability Testing System Using Web Standards · 2020-04-09 · Developing a Usability Testing System Using Web Standards Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2 1BPM/Mobile

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Developing a Usability Testing System Using Web Standards · 2020-04-09 · Developing a Usability Testing System Using Web Standards Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2 1BPM/Mobile

Developing a Usability Testing System Using Web Standards

Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2

1BPM/Mobile Development Team, R&D Unit, HandySoft Korea Inc., Seoul, 137‐070 2Department of Industrial Engineering, Hongik University, Seoul, 121-791

ABSTRACT

Objective: The aim of this study is to design and develop a UI evaluation system for smart phones using web

standards. Background: The variety of past usability evaluations are based on WIMP user interfaces. However, the

emergence of smart phones brought forth numerous types of operating systems and mobile browsers to the users. To

evaluate interfaces on this wide array of devices, a new approach is needed in designing and developing UI evaluation

systems. Method: Using web standards consisting of HTML 5, CSS 3 and ECMA Script (JavaScript), a 2-tier

architecture consisting of a web/e-mail server and the application was designed to ensure interoperability between

devices. To minimize data transaction and acquire safety in terms of data integrity, the application requires a single

download of all required resources. The application runs on the client-side only, writes the output data into an e-mail

and uses the phone’s e-mail application to send the data to the server – again requiring only one upload transaction.

Case Study: A smart phone user interface evaluation experiment was developed. A single URL was given to subjects

to access, download and execute the web application. Experiment data were successfully collected via e-mail.

Conclusion: Web standards have proved to be capable of implementing usability evaluation systems tailored for

smart phones, providing to a certain limit the qualities required for valid academic experiments in the field of

Usability Engineering. Application: The design and development of the proposed system will help Usability experts

perform UI evaluations with flexibility and help subject recruiting by improved interoperability and availability.

Keywords: Smart Phone, Web Application, User Interface, Usability Evaluation, Web Standards, Interoperability, Data Collection, User Context

1. Introduction

HCI에서 바라보는 사용자 인터페이스(user interface,

이하 UI)는 사용자와 기기 사이의 상호작용을 결정짓

는 시스템의 요소로서, 사용자가 해당 기기를 사용하

여 과업을 수행하는 데에 있어서 발생하는 모든 경험

과 결과를 결정지으며, 제품의 일부로서 차별화 요소

이자 핵심 경쟁력이 된다(Andre, 2007). 이처럼 중요한

역할을 하는 UI를 사용자의 특성과 의도, 그리고 시스

템의 목적에 맞게 평가하는 것은 시스템이 제공할 수

있는 가치를 검증하는 활동이라고 볼 수 있다.

UI의 사용성, 즉 주어진 맥락 하에 특정 목표를 달

성하기 위해 설계된 시스템을 사용자가 효과적이고,

효율적이며, 만족스럽게 사용할 수 있는 정도를 측정

하는 것을 사용성 공학이라고 한다(ISO, 1988). 사용성

공학은 제품 개발 단계에서 UI의 사용성을 극대화하기

위한 체계적인 방법들을 다루는 학문의 분야이며, 이

러한 방법들 중 가장 활발히 연구되고 있는 분야는 바

로 사용성 평가이다 (Scholtz, 2004).

사용성 평가는 Figure 1에 정리된 바와 같이 초기에

문서화 및 설문조사 등에서 시작하여, 점차 성능 측정,

GOMS 모델, SUMI 등 정량적 기법으로 발전하였고,

1990년대부터 경험적 평가 및 인지적 walkthrough 등

사용자 행태를 직접 관찰하는 실험까지 발전하였으며,

인터넷과 World-Wide Web이 발전함에 따라 원격 사용

성 평가 등의 방법론들이 대두되었다. (Scholtz, 2004;

Hartson et al., 2001).

Page 2: Developing a Usability Testing System Using Web Standards · 2020-04-09 · Developing a Usability Testing System Using Web Standards Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2 1BPM/Mobile

이 사용성 평가 기법들은, 당시에는 전세계의 80%

이상의 PC들이 윈도우 운영체제를 사용하고 있었다는

점을 고려하면(Polson, 2006),그 초점이 윈도우 운영체

제의 WIMP(window, icon, menu, pointing device) 인터페

이스에 집중하였을 것이라는 점을 짐작할 수 있다.

그러나 최근에 들어 모바일 디바이스 시장에서 급격

한 성장을 보이고 있는 스마트폰은 고사양 하드웨어와

운영체제를 갖추면서 컴퓨터의 기능을 지속적으로 보

완, 심지어 대체하고 있으며, 이 스마트폰은 기존의

PC와는 확연히 다른 맥락에서 사용된다. 이러한 스마

트폰 중에서도 터치스크린이 각광을 받고 있으며 특히

정전식 터치스크린이 시장의 주류를 잇고 있다.

Figure 2에서 보여지는 바와 같이, MS Windows가 지

배하던 PC 시장과 다르게, 스마트폰 시장에서는 여러

운영체제가 각축을 벌이고 있다. 이처럼 여러 개의 운

영체제가 우월을 가리지 못하고 공존하는 상황에서는

사용자 인터페이스 또한 다양한 운영체제를 고려해야

한다. 또한, 주요 단말기 회사별로 다른 웹브라우저를

주요 어플리케이션으로 스마트폰에 탑재하고 있는데,

각 브라우저별로 지원하는 HTML 마크업, 스타일 및

스크립트 언어는 반드시 일치하지 않는다.

이러한 환경에 맞추어 World Wide Web Consortium

(W3C)은 새로운 웹 표준을 제시하고자 노력해왔다.

HTML 5, CSS 3 그리고 JavaScript로 이뤄진 웹 표준은

모든 웹 문서에서 기본적으로 동작해야 할 기능과 요

소들의 특성을 정의하며 권장하는 표준이며, 이를 준

수함으로써 서로 다른 운영체제 웹브라우저에서도 ‘상

호운용성’을 보장하는 것이 목표이다(Lee, 2011). W3C의

웹 표준 제정으로 인해 PC용 웹에선 웹 접근성과 상

호운용성을 제공하는 것이 점차 당연시되는 추세이며,

나아가 스마트폰, PDA, 스마트 TV, 음성 인식 시스템,

내비게이션 등에서도 인터넷을 활용한 다양한 시스템

들도 웹 표준을 활용하여 다양하고 풍부한 기능들을

제공하고 있다(W3C, 2009).

본 연구에서는 웹 표준을 활용하여 모바일 기기 UI

의 사용성 평가를 하기 위한 시스템을 구축하여, 여러

운영체제에서 모두 동작할 수 있는 스마트폰 UI 평가

시스템을 구축하였다. 언제나 인터넷에 접속할 수 있

는 스마트폰의 특성을 이용하여 시간과 장소의 제약

없이 UI 평가를 하기 위한 웹 어플리케이션 형태의 시

스템을 제안한다.

Figure 1. A history of usability evaluation methods (Scholtz, 2004).

Figure 2. World-wide browser and mobile O/S market share (StatCounter Global Stats, accessed Mar. 31st, 2011).

Page 3: Developing a Usability Testing System Using Web Standards · 2020-04-09 · Developing a Usability Testing System Using Web Standards Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2 1BPM/Mobile

2. Architecting and Designing Smart Phone UI Evaluation Systems

본 연구에서 제안하는 시스템의 일반적인 아키텍처

는 Figure 3에 도식화되어 있다. 이 시스템의 개발과 실

제 UI평가에 활용하기 위해서는, 스마트폰 UI 평가 시

스템을 2-tier 아키텍처로 구성하고 웹 표준을 사용하

여 구현하는 데에 있어서 등장하는 언어 독립성, 비동

기적 상호작용, 그리고 어플리케이션 UI의 표준화의

이슈들을 고려해야 한다.

본 연구가 제안하는 아키텍처에서 사용자와 시스템

의 상호작용은, 클라이언트에서 웹 브라우저의 주소

입력창에 웹 어플리케이션의 주소(URL)를 입력함으로

써 시작된다. 웹 브라우저는 HTTP (Hypertext Transfer

Protocol)을 사용하여 이 주소에 있는 서버에게 어플리

케이션과 관련된 자원들(resources)을 요청하며, 서버는

이 요청을 해독한 후에 다시 클라이언트에게 웹 문서

를 전송해준다. 웹 문서를 받은 클라이언트는 서버와

더 이상 네트워크 연결을 유지할 필요가 없기 때문에

서버와의 연결을 종료한다 (Figure 3).

웹 브라우저는 브라우저 엔진을 통해 어플리케이션

의 구조, 외관 그리고 기능을 구성하는데, 먼저 HTML

문서를 통해 <head> 부분을 읽어 들여 페이지 인코딩,

캐릭터셋, 마크업 언어, 그리고 외부 리소스들을 불러

들인다. 본 어플리케이션에서는 두 가지 외부 리소스

를 사용하였는데, 첫째는 스마트폰에서 웹 페이지에

모바일 어플리케이션의 룩-앤-필을 부여하기 위한 모

바일 웹 어플리케이션 라이브러리들이며, 둘째는 UI

평가와 관련된 기능들을 어플리케이션로부터 분리하여

모아놓은 스크립트들이다. 웹 문서는 이들을 불러들여

어플리케이션의 기능과 외관을 구성하기 위한 법칙들

을 지정한다.

다음, 어플리케이션 자체와 관련된 기능들을 정의한

다. 이 기능들은 사용자와 시스템 간의 상호작용과 관

련된 요소들로, 어떠한 인터페이스가 주어지든 사용자

가 이를 조작하는 데에서 발생하는 모든 데이터들을

측정하고 기록한다. 그렇기 때문에 외부 스크립트로

분리하지 않고 웹 문서에 그대로 포함시킨다.

어플리케이션의 기능들을 정의한 후에는 구조를 정

한다. 앞서 설명한 모바일 웹 어플리케이션 라이브러

리들을 활용하여 개별 화면의 레이아웃과 흐름, 메뉴,

UI 요소들을 어플리케이션의 용도에 맞게 배치한다.

라이브러리의 함수 및 스타일 정의를 웹 문서 요소들

의 속성과 연결시켜줌으로써 애니메이션 효과를 부여

할 수도 있고 메뉴와 버튼의 모양을 새롭게 꾸며줄 수

있다. 구성된 구조는 어플리케이션의 사용자들이 주어

진 실험을 효과적이고 정확하게 수행하고, 사용자가

조작 실수를 저지르거나 어플리케이션 자체의 예기치

못한 오작동을 대비할 수 있도록 타이머나 화면 조작

및 기록 기능들을 적절히 연결시켜주어야 한다(예: 더

블 클릭 방지, 상태표시줄, 화면 활성화 영역 설정 등).

Figure 3. Proposed architecture of UI evaluation system using web standards.

Page 4: Developing a Usability Testing System Using Web Standards · 2020-04-09 · Developing a Usability Testing System Using Web Standards Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2 1BPM/Mobile

문서의 구조를 결정하는 HTML 요소들 중 각별한

주의를 요하는 부분은 바로 <form>과 <canvas>이다.

<form> 태그는 사용자로부터 각종 정보를 입력 받아

저장해두고, 지정된 URL로 이 정보를 전송해주는 역

할을 하기 때문에 사용자에게 보여지는 UI와 그 배경

에서 작동하는 어플리케이션 고유 기능들과 연결되어

야 한다. 반면에 <canvas>태그는 UI 요소들을 표현해

주는 공간이며, 사용자의 조작을 받아들이고 이를 어

플리케이션 고유 변수들에 저장하기 때문에, UI 평가

기능들과 어플리케이션 고유 기능들 모두에 연결되어

야 한다.

<canvas>를 통해 UI 평가를 수행하고 <form>을 통해

정보를 입력하고 저장하여 실행하면, 스마트폰의 기본

이메일 어플리케이션이 호출된다. <form>에 입력된 모

든 정보들은 이메일 본문에 자동적으로 입력되며, 이

이메일을 이메일 서버로 전송함으로써 어플리케이션과

의 상호작용이 종료된다. 이때, 사용자가 이메일을 전

송하다가 실패할 경우를 대비하여 이메일을 다시 한

번 전송할 수 있는 기능을 제공해줌으로써 사용성을

증진시켜야 할 것이다.

본 연구에서는 스마트폰 UI 평가 시스템을 위한 아키텍

처를 구성하는 데에 있어서, O/S independence, asynchronous

interaction, 그리고 standardized application UI 를 중요하게 고

려하였다.

O/S Independence: 클라이언트-서버 아키텍처의 웹 어

플리케이션을 사용하는 경우, 모든 운영체제/기기 플랫폼에

서 사용할 수 있도록 하였다. 즉 실험자는 단말기 제조회

사로부터 라이선스를 구매하지 않고도 어플리케이션을 배

포할 수 있게 하였고 (Apple Inc., 2010; Google Inc., 2010), 피

실험자는 스마트폰을 통해 2G/3G/Wi-Fi 네트워크 접속이

되는 곳에서 얼마든지 실험에 참가할 수 있게 하였다.

웹 어플리케이션은 HTML (HyperText Markup

Language), CSS (Cascading Style Sheet), 그리고

ECMAScript (속칭 JavaScript)로 구성된 웹 표준을 사용

하여 구현하였으며, 스마트폰 사용자에게 웹 페이지

주소만 알려주면 평가 실험을 진행할 수 있게 하였다.

실험 결과를 특정 O/S나 단말기가 아닌 스마트폰 전체

로 일반화하는 것을 목표로 하였기 때문에 단말기의

운영체제에 종속되지 않는 시스템을 구현하였다.

Asynchronous Interaction: 사용성 평가는 기본적으로

사용자 행동을 정확하게 측정해야 한다. 만일 특정 행동의

반응 시간을 측정할 때 한 동작마다 페이지를 호출하거나

갱신하는 설계를 채택하면 반응 시간에 네트워크 통신 시

간이 그 안에 포함되어, 둘을 구분하기가 불가능해진다. 그

렇기 때문에 프로그램의 모든 동작은 단말기에서만 이뤄지

도록 설계해야 한다. 그렇기 때문에 어플리케이션의 동작

을 (서버가 아닌) 클라이언트 단에서만 사용하는 언어(예:

JavaScript)로 구현하는 것이 바람직하다.

많은 웹 어플리케이션들은 설계에 따라 사용자가 인

터페이스를 조작할 때마다 서버에 요청을 수행하기도

한다. 클라이언트나 서버 단에서 데이터가 발생하거나

바뀔 때마다 서로 통신을 해야 할 경우, 스마트폰 사

용 맥락에 따라 접속이 끊어질 수도 있으며, 이는 데

이터를 손실하거나 잘못된 데이터를 유발할 여지가 있

다. 따라서 웹 어플리케이션을 한 번에 전송할 수 있

도록 하나의 HTML 문서에 모든 시스템 요소들을 포

함시키며, 평가 데이터도 한 번에 작성해서 전송하고

실패할 경우 데이터를 따로 저장할 수 있도록 스마트

폰의 이메일 어플리케이션을 활용하였다.

Standardized Application UI: HTML 문서의 head 부분

에서 단말기 및 화면 크기 정보를 브라우저로부터 받아,

단말기에서 웹 문서를 화면에 표시할 때 최적화된 페이지

를 보여줄 수 있도록 하였다. HTML <meta> 태그의

viewport 속성을 “width=device-width”로 설정하면 페이지의

영역을 단말기 종류와 상관 없이 화면 가장자리로 제한할

수 있다(Stark, 2010).

실제 평가 대상이 되는 인터페이스는 Scalable Vector

Graphics(SVG) 혹은 <canvas> 태그를 사용하여 구현할

수 있다. SVG의 경우 벡터 형태의 이미지를 그려주기

때문에 해상도와 무관한 GUI(Graphic User Interface)를

구현할 수 있으나, 현재 스마트폰 웹 브라우저별 SVG

지원 여부가 제각기 다르기 때문에 본 연구에는 적합

하지 않다. 반면에 <canvas> 태그는 대부분의 스마트폰

웹 브라우저에서 지원하고 있고, 태그 내의 이미지를

JavaScript로 조작할 수 있으며, 필요한 경우 결과물을

이미지 형태로 저장할 수 있게 해주기 때문에, 스마트

폰 인터페이스 평가 시스템에 더 적합하다(Vukićević,

2006). 따라서 본 시스템에서는 <canvas>태그를 사용하

여 이미지를 표현하였으며, JavaScript를 통해 이미지

조작 및 사용자 이벤트 탐지를 다루었다.

3. Case Study: Developing a Web Application for Experimenting User

Interaction on Smart Phones

본 사례에서는 스마트폰을 사용한 터치 인터페이스

실험을 위한 웹 어플리케이션을 구현하였다(Lim et al.,

2011). 이 어플리케이션은 Apple Inc의 iPhone 3G™ 및

iPhone 3GS™의 터치스크린 화면에서 다양한 모양, 크

Page 5: Developing a Usability Testing System Using Web Standards · 2020-04-09 · Developing a Usability Testing System Using Web Standards Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2 1BPM/Mobile

기, 대비 그리고 안에 글자를 지닌 도형들을 얼마나

빠르고 정확하게 누르는 지를 측정하는 UI 실험용 어

플리케이션이었다. 실험 대상은 20대 초·중반의 대학생

들이었으며, 실험자가 피실험자들에게 어플리케이션

사용 방법, 실험 순서 및 반복 횟수, 그리고 접속 URL

을 알려주고, 사용법에 대해 설명하였으며, 참여자들은

기간 내에 주어진 실험을 수행하여 데이터를 실험자에

게 전송하였다.

이 모바일 웹 어플리케이션의 요구사항 명세는 다음

과 같다:

- 웹 어플리케이션을 인터넷이 되는 곳이면 아무 데서

나 접속할 수 있어야 한다.

- 메인 화면에 실험 전 준비 사항, 실험 방법에 대한

소개, 그리고 실제 실험을 시작할 수 있도록 메뉴를

제공한다.

- 실험 전 준비사항과 실험 방법 소개 메뉴에는 ‘뒤로

가기’ 버튼이 있어야 한다.

- 화면 전환 시 스마트폰 어플리케이션들에서 흔히 볼

수 있는 슬라이드 애니메이션을 사용해야 한다.

- 화면 전환 시 사용자가 현재 어느 화면에 있으며, 어

떤 동작을 수행하는 지를 알려주어야 한다.

- 실험 시작 전에 피실험자의 이름을 입력 받아야 한

다.

- 실험 자극(도형의 위치, 모양, 대비, 글자 유무)은 무

작위로 제시되어야 한다.

- 실험 자극이 바뀌더라도 화면이 전환되어서는 안 된

다.

- 사용자의 화면 조작과 관련된 모든 시간 및 좌표 정

보를 보관하고 있어야 한다.

- 입력 받은 이름, 시간 그리고 좌표 정보를 이메일로

전송하기 전까지 실험을 종료하지 말아야 된다.

- 저장된 시간/좌표 데이터를 통해 사용자가 어디를 언

제 찍었는지를 재현할 수 있어야 한다.

- 하나의 URL에만 접속하도록 구현하며, 다른 URL로

의 링크는 없어야 한다.

- 화면의 너비와 길이는 iPhone 3G™ 및 iPhone 3GS™

해상도와 크기에 최적화되어야 한다.

- 단말기가 전화/문자를 수신하는 것 때문에 실험이 방

해를 받아서는 안 된다.

위의 요구사항 명세에 따라 어플리케이션을 Figure 4

과 같이 구현하였다.

- 서버는 Apache HTTPServer를 사용한 웹 호스팅 업체

에서 받은 계정에 웹 페이지를 게재하였다.

- jQuery 기반의 모바일 웹 어플리케이션용 라이브러리

(CSS+JavaScript)인 jQTouch를 사용하여 iPhone™의

고유 어플리케이션의 look-and-feel과 애니메이션 효

과를 구현하였다.

- 메인 화면의 각 화면들과 뒤로 가기 버튼, 페이지 부

제목 등은 <div> 요소에 jQTouch에서 제공하는 CSS

class 속성을 부여하여, 각각 별개의 화면으로 처리되

도록 하였다. (예: <div class="toolbar">)

- 이름 입력은 <form>을 하나 만들어 이름을 입력 받

고, <input>에 ID를 부여하여 추후에 이를 호출하였다.

- 실험 자극을 무작위로 제시하기 위해, 모든 가능한

조합을 만든 뒤에 각 조합마다 난수를 부여하고, 실

험 1회 당 지정한 반복 횟수만큼 배열을 줄였다. 반

복 횟수 또한 별도의 상수로 고정시킬 수 있으며, 실

험자가 원하는 만큼 자극을 제시할 수 있다.

- 실험 화면 또한 <form>을 추가하여 <canvas> 요소를

넣고, 외부 JavaScript를 통해 화면을 누를 때마다

<canvas>의 화면만 바뀌도록 하였다. 이때 세 가지

기능이 실행된다: 현재의 반복 횟수를 확인하여 실

험을 종료할 지 검사하고, 반복 횟수를 아직 충족시

키지 못했을 경우 화면을 주어진 실험 조합에 의해

새로 생성하며, 실험 중간에 발생하는 모든 사용자

조작의 시간과 (x, y)좌표를 별도의 배열에 저장한다.

이 모든 기능은 JavaScript로 구현했기 때문에 서버와

통신을 하지는 않으며, 어플리케이션의 실행 속도는

브라우저와 단말기의 CPU속도에만 의존하게 된다.

- 두 번째 <form>의 submit action을 “mailto:이메일ID@

이메일도메인”로 지정함으로써 웹 브라우저에서 이

메일 어플리케이션을 호출하게 하였으며, 이메일 전

송이 실패했을 경우를 대비하여, 화면을 누를 때마다

이메일 어플리케이션을 호출하도록 하였다. 이 기능

은 또한 어플리케이션을 종료하기 위해 웹 브라우저

자체를 종료하도록 유도하는 역할을 한다.

- 데이터는 화면이 전환될 때, 그리고 사용자가 화면을

조작할 때마다 생성되며, 다음과 같은 형태의 배열이

다:

[번호, 이름, 날짜(년월일), 시간(1/1000초까지), 독립

변수1, 독립변수2,···, 독립변수 n, x좌표, y좌표]

- 타 URL 접속 없이 화면간 전환을 위해, 메인 메뉴의

<a> 요소의 주소(href) 속성에 “#(각 div의 ID)”를 입

력하였으며, 사용한 jQTouch 라이브러리에 의해 화면

이 전환되는 애니메이션을 거쳐 화면이 마치 이동하

는 효과를 구현다.

- 화면을 iPhone™의 해상도에 맞추기 위해 웹 문서의

속성 정의 부분에 <meta name="viewport" http-

equiv="Content-Type" content="user-scalable=no,

width=device-width, height=device-height”> 요소를 추가

Page 6: Developing a Usability Testing System Using Web Standards · 2020-04-09 · Developing a Usability Testing System Using Web Standards Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2 1BPM/Mobile

하였다.

- 실험 전 준비 사항에 휴대폰의 이동통신망 접속을

끄고 Wi-Fi만 사용하도록 피실험자에게 요구하였다.

브라우저 자체에서는 휴대폰의 세부적인 기능을 보

안 문제 때문에 제어할 수 없게 하기 때문에 기능적

으로 전화/문자를 차단하는 것은 불가능하다

Figure 4. Captured screen images of the case study

application. (from left to right, top to bottom: main menu /

name input / waiting screen / stimulus presentation / end

screen / e-mailing data)

피실험자 한 명이 자극 반복 횟수 80회인 실험을 1

회 실행할 경우 생성되는 데이터 개수는 160개 (화면

전환 + 화면 조작)였으며, 한 명 당 실험을 16회 반복

하여 총 1280개의 데이터가 생성되었다. 11명이 실험에

참가하였으므로, 최종 데이터는 14080개가 생성되었다.

생성된 실험 데이터 중 좌표 데이터는 (x, y) 좌표 평

면에 재현하여 이상치(outlier)를 제거할 수 있었다. 반

응 시간은 화면 전환 시각과 화면 조작 시각의 시간

차이를 계산함으로써 구할 수 있었으며, 시계열 그래

프를 작성하여 이상치를 제거할 수 있었다 (Figure 5).

좌표 데이터와 반응 시간 데이터는 본 사례 연구의 통

계 분석을 위한 종속 변수로 사용되었다.

Figure 5. Example of reproduced coordinates and confidence

region for the triangle stimulus; centered on the cross-hair.

4. Conclusion and Discussions

본 연구에서는 스마트폰에 특화된 인터페이스 평가

실험을 위한 어플리케이션이 지녀야 할 특징들을 살펴

보았으며, 이를 실제로 모바일 어플리케이션으로 구현

하였다. 특히, 모든 스마트폰 기기에 탑재된 웹 어플리

케이션과 이메일 어플리케이션만을 사용하여 인터페이

스 평가 실험 어플리케이션을 구현하였으되, 인터페이

스 요소들을 실험자가 의도한 대로 설계하고 표현하였

으며, 피실험자인 사용자가 조작한 모든 정보를 정확

하게 기록하고 안전하게 실험자에게 전송할 수 있었다.

전송된 데이터를 한 곳에 수집하고, 좌표 정보와 시간

정보를 재현 및 시각화하며, 통계분석을 위해 정제하

기 쉬운 형태로 데이터를 제공해줌으로써 사례 연구를

적절하게 지원할 수 있었다.

그러나 실험자의 부재로 인해 피실험자의 엄격한 통

제가 불가능하며, 결국 실험 진행을 피실험자에게 맡

길 수 밖에 없다. 피실험자를 관찰하는 실험자가 없기

때문에 사용자의 행동에 대한 관찰이 제한적이고, 실

험 도중에 사용자가 갑자기 실험을 중단해버리거나 쉬

고자 하는 경우 이를 통제하기 어렵다.

Figure 6. Example of HTML source code view in iPhone™

(Innoveghtive Inc., 2010)

마지막으로, 실험의 모든 내용을 웹 브라우저가 다운

로드 해야 실행시킬 수 있게 했기 때문에, 실험 소스

코드가 공개될 수 있으므로 보안에 취약점이 존재할

수 있다 (Figure 6). 단말기에서 다운로드 받은 웹 페이

지 파일들을 각종 소스코드 조회용 어플리케이션들을

통해 보거나 다운로드 받을 수 있기 때문이다.

Page 7: Developing a Usability Testing System Using Web Standards · 2020-04-09 · Developing a Usability Testing System Using Web Standards Youngsu Kim1, Junyoung Choi1, Ji Hyoun Lim2 1BPM/Mobile

References

Andre, T. S., “Advanced Usability Evaluation Methods”, IITA Technical

Report, Institute for Information Technology Applications - United

States Air Force Academy, Colorado, 2007.

Apple Inc., “Apple Developer Programs”, accessed Apr. 17, 2011 from

http://developer.apple.com/programs

Google Inc., “Android Market Developer Signup” accessed Apr. 17, 2011

from https://market.android.com/publish/signup.

Hartson, H. R., Andre, T. S., and Williges, R. C., "Criteria For Evaluating

Usability Evaluation Methods", International Journal of Human-

Computer Interaction, 15(1), 145–181, 2003

Innoveghtive Inc., “Code - Source Code Viewer”, 2010, accessed Apr. 2,

2011 from http://codeapp.ca.

International Organization for Standardization, accessed Sept. 12, 2003

from http://www.iso.ch/iso/en/ISOOnline.openerpage.

Lim, J. H., Choi, J. Y. and Kim, Y. S., “A Study on the Cognitive Model of

Users Engaged in Simple Reactions on Control-on-Display

Interfaces”, Proceedings of the 2011 Spring Conference on

Accessibility and Standards, Ergonomics Society of Korea, 2011 (to

be published).

Lee, H. W., “Making a Web-Standards Compliant Mobile Web

Application”, 2011, accessed Mar. 31, 2011 from

http://www.bloter.net/archives/55264.

Polson, K., “Chronology of Microsoft Windows Operating Systems”,

2006, accessed Mar. 30, 2011 from

http://pctimeline.info/windows/win1997.htm.

Scholtz, J., “Usability Evaluation”, National Institute of Standards and

Technology, 2004.

Stark, J., “Building iPhone Apps with HTML, CSS, and JavaScript”,

O’Reilly Media Inc., Sebastopol, CA, 2010.

StatCounter Global Stats, accessed Mar. 31, 2011 from

http://gs.statcounter.com.

Vukićević, V., “SVG and Canvas: Graphics for Web Apps” 2006, accessed

Apr. 2, 2011 from http://people.mozilla.com/~vladimir/xtech2006/.

World-Wide Web Consortium, “W3C Mission”, 2009, accessed Apr. 2,

2011 from http://www.w3.org/Consortium/mission.html.

Author Listings

Youngsu Kim: [email protected]

Highest degree: M.S.E., Industrial Engineering, SNU

Position title: Research Engineer, BPM/Mobile Development Team,

HandySoft Korea Inc.

Areas of interest: Usability Engineering, Statistical Data Analysis

Junyoung Choi: [email protected]

Highest degree: M.S.E., Industrial Engineering, SNU

Position title: Researcher Engineer, BPM/Mobile Development Team,

HandySoft Korea Inc.

Areas of interest: User Interface, Usability Engineering

Ji Hyoun Lim: [email protected]

Highest degree: Ph.D., Industrial and Operations Engineering, University

of Michigan

Position title: Assistant Professor, Department of Industrial Engineering,

Hongik University

Areas of interest: Computational Cognitive Modeling, User-Driven NPD