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, 137 070 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).
이사용성평가기법들은, 당시에는전세계의 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. 31 st, 2011).
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.
문서의구조를결정하는 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 의터치스크린화면에서다양한모양, 크
기, 대비그리고안에글자를지닌도형들을얼마나빠르고정확하게누르는지를측정하는 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" httpequiv="content-type" content="user-scalable=no, width=device-width, height=device-height > 요소를추가
하였다. - 실험전준비사항에휴대폰의이동통신망접속을끄고 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) 4. Conclusion and Discussions 본연구에서는스마트폰에특화된인터페이스평가실험을위한어플리케이션이지녀야할특징들을살펴보았으며, 이를실제로모바일어플리케이션으로구현하였다. 특히, 모든스마트폰기기에탑재된웹어플리케이션과이메일어플리케이션만을사용하여인터페이스평가실험어플리케이션을구현하였으되, 인터페이스요소들을실험자가의도한대로설계하고표현하였으며, 피실험자인사용자가조작한모든정보를정확하게기록하고안전하게실험자에게전송할수있었다. 전송된데이터를한곳에수집하고, 좌표정보와시간정보를재현및시각화하며, 통계분석을위해정제하기쉬운형태로데이터를제공해줌으로써사례연구를적절하게지원할수있었다. 그러나실험자의부재로인해피실험자의엄격한통제가불가능하며, 결국실험진행을피실험자에게맡길수밖에없다. 피실험자를관찰하는실험자가없기때문에사용자의행동에대한관찰이제한적이고, 실험도중에사용자가갑자기실험을중단해버리거나쉬고자하는경우이를통제하기어렵다. 피실험자한명이자극반복횟수 80회인실험을 1 회실행할경우생성되는데이터개수는 160개 ( 화면전환 + 화면조작 ) 였으며, 한명당실험을 16회반복하여총 1280개의데이터가생성되었다. 11명이실험에참가하였으므로, 최종데이터는 14080개가생성되었다. 생성된실험데이터중좌표데이터는 (x, y) 좌표평면에재현하여이상치 (outlier) 를제거할수있었다. 반응시간은화면전환시각과화면조작시각의시간차이를계산함으로써구할수있었으며, 시계열그래프를작성하여이상치를제거할수있었다 (Figure 5). 좌표데이터와반응시간데이터는본사례연구의통계분석을위한종속변수로사용되었다. Figure 6. Example of HTML source code view in iphone (Innoveghtive Inc., 2010) Figure 5. Example of reproduced coordinates and confidence region for the triangle stimulus; centered on the cross-hair. 마지막으로, 실험의모든내용을웹브라우저가다운로드해야실행시킬수있게했기때문에, 실험소스코드가공개될수있으므로보안에취약점이존재할수있다 (Figure 6). 단말기에서다운로드받은웹페이지파일들을각종소스코드조회용어플리케이션들을통해보거나다운로드받을수있기때문이다.
References Areas of interest: Usability Engineering, Statistical Data Analysis 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. Junyoung Choi: liana83@snu.ac.kr 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: limjh@hongik.ac.kr 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 Author Listings Youngsu Kim: davidkim83@handysoft.co.kr Highest degree: M.S.E., Industrial Engineering, SNU Position title: Research Engineer, BPM/Mobile Development Team, HandySoft Korea Inc.