A Method of Interface Display Design for Smartphone Applications Based on Task-Information Analysis Hee Eun Lee 1, Suyeon Jung 1, Jimin Han 2, Hyuck Tae Kwon 1, Wan Chul Yoon 1 1 Department of Industrial and System, Daejeon, 305-701 2 Department of Knowledge and Service, Daejeon, 305-701 ABSTRACT Background: As various mobile devices are becoming more popular, the uses of smartphone app-like software programs are increasing in more serious tasks. Accordingly, the user s requirements are becoming more demanding on each application. However, because of the relatively small display size of mobile devices, the information representation is severely limited. It is thus required a methodological design process for effective design of display and interaction on compact informational interface, which is not covered by general design guidelines. Objective: The goal of this paper is to propose a methodological design process to assist smartphone application designers. The proposed design method is based on task analysis that elicits information requirements for specific tasks. Method: The method can be divided into two parts: task-information analysis and an interface design process using the results of the analysis. The task-information analysis process can be carried out by using the tools such as hierarchical task analysis (HTA), scenario-based task analysis (SBTA), and data-flow diagram (DFD). Then, the interface design process, employing task-function matrix that helps organize displays fitting the task flow, is conducted in an iterative manner refining DFD drawn in the previous phase. Results: We applied the proposed method to design a prototype of a smartphone application that enables consulting tasks between teenagers and counselors. Conclusion: The proposed method showed the capability to help the designer to build high-quality and satisfying applications, especially by reflecting the flow of user s task procedures and required information in the design process. Keywords: Task-information analysis, Task-centered design, Information display, Data-flow diagram, Smartphone application design 1. Introduction 최근모바일기기의보급과다양한스마트폰어플리케이션의개발로, 사용자들은스마트폰앱을통해, 다양하고복잡한태스크를수행할수있게되었다. 그러나, 상대적으로화면크기가작은모바일기기의특성에따라, 복잡한태스크및정보요소를위한스마트폰앱은개발, 관리되기가어렵다. 따라서사용자가원하는태스크의복잡한프로세스를고려하고필요한정보요소들을효과적으로배치해야하는스마트폰앱화면설계는앱서비스의성공여부를결정하는중요한요인중하나이다. 이러한경향에따라최근 HCI분야에서는스마트폰앱을통한서비스의태스크와서비스의정보흐름을분석하여 스마트폰앱화면설계를하려는많은시도들이있었으나, 기존의대부분연구는정보요소분석또는태스크분석을 기반으로하는단방향성의설계방법론을제시하고있다. 그러나효과적인설계를위해서는태스크차원의지식, 인 터페이스요소 (Functional component), 시스템기능 (Data component) 의세가지수준에대한기회요소를체계적이 고직관적으로모두함께고려하여야한다 (Kang et al., 2004). 또한태스크및정보의분석과인터페이스디자인을 함께병행하여설계하는양방향성의실질적인방법론이요 구된다 (Yoon, 2003). 정보시스템에서의정보 ( 데이터 ) 는시스템을구성하는핵 심요소로, 태스크, 인터페이스, 시스템기능의분석을통해 직접적으로얻어질수있는요소이다. 따라서정보요소는 앞서설명한세가지수준 ( 태스크, 인터페이스디자인, 시
스템기능 ) 의기회요소를통합하는중심요소로적합하다 (Kang et al., 2004). 이때의세가지수준에서태스크는사용자의태스크차원요소를, 인터페이스디자인은태스크를위한기능 (Function) 요소를, 마지막으로시스템기능은정보흐름차원의정보요소를말한다. 본논문은상대적으로크기가작은스마트폰앱화면의설계를위한방법론으로, 태스크의복잡한흐름과필요한정보요소를모두고려하여화면내에각요소를효과적으로배치하는방법을제안하였다. 제안된태스크 -정보분석에기반한스마트폰앱화면설계방법론은태스크 -정보분석을통해태스크차원과기능차원, 정보흐름차원의세가지차원에대하여인터페이스요소와정보요소를추출하고, 더불어분석과정과화면설계과정을함께고려할수있는스마트앱화면설계방법론이다. 또한, 본연구에서는추가로제안된방법론을적용하여 스마트폰앱을통한청소년상담어플리케이션 의화면설계사례를통해, 태스크와정보요소가복잡한앱화면설계에대하여제시한방법론의적용과정및결과를보였다. 2. Design Framework 본논문에서제안하는설계체계는크게태스크 -정보분석단계와화면설계단계로이루어진다. 우선, 태스크 -정보분석단계는세가지차원- 태스크차원분석, 기능차원분석, 정보흐름차원분석 을통해 인터페이스디자인요소 와 정보요소 를추출하는단계이다. 다음으로, 화면설계단계는태스크 -정보분석단계로부터얻어진인터페이스디자인요소로부터구성된화면설계시안과정보요소로부터구성된정보흐름단락을상호비교하여연결하여맞춰가는실질적인화면설계과정이다 (Figure 1). 3. Design Method Case Study 본연구는태스크 -정보분석에기반한스마트폰앱화면설계방법론을제안하고, 제안한방법론을토대로사례연구를진행하였다. 사례연구로는복잡한태스크흐름과많은정보요소들을필요로하는사례로써, 스마트폰앱을통해청소년과전문상담가의상담태스크를지원하는스마트폰앱화면을체계적이고효과적으로설계하는것을목적으로한다. 태스크 -정보분석에기반한스마트폰앱화면설계의설계체계에따라사례연구절차는다음과같이진행되었다. 이때, 사례연구의스마트앱프로토타입 (prototype) 화면설계는라이브코드 (LiveCode, v. 5.5.3, RunRev) 를사용하여이루어졌다. 3.1 Task-Information analysis phases 태스크 -정보분석단계는스마트폰앱을통해사용자들이수행할태스크를분석하고, 태스크에따른정보요소를분석하는단계이다. 태스크 -정보분석단계는다시 태스크차원분석, 기능 (function) 차원분석, 정보흐름차원의분석 으로분류된다. 먼저, 태스크차원분석 에서는 Hierarchical task analysis (HTA) (Annett, 2004) 와 Scenario-based task analysis (SBTA) (Go and Carroll, 2004) 기법을사용하여사용자의태스크구조및절차를수립하며 (Figure 2) 태스크구조를통해주요태스크를선정한다 (Diaper, 2002). 이때, HTA는 SBTA와동시에병행하며진행하여, 과업분석에서놓치는요소를최소화한다. 또한부가적으로향후정보흐름차원의분석과정을위해각태스크단계에서필요한데이터를대략적으로추출해놓는다. Figure 2. HTA for students consulting Figure 1. A Method of Interface Display Design for Smartphone Applications Based on Task-Information Analysis 다음으로 기능차원분석 에서는앞서분석된태스크를시스템에서수행하기위한기능을파악하는과정이다. 이과정에서는해당태스크와파악된시스템적기능요소를서로연결하고 (Table 1), 그결과를 Task-function
matrix (TF Matrix) 로표현한다 (Figure 3). 이때 TF Matrix 상에나타나는태스크는앞서태스크차원분석에 서발견된주요태스크를중심으로작성되며, 주요태스크 와연결되는기능요소는인터페이스디자인요소를어느 정도포함한다. Table 1. Main tasks and its matched function requirements for Main tasks 스스로고민정리하기 해결방법찾아보기 상담전문가선택하기 상담받기 심리검사받기 students consulting task Function requirements 고민담기 고민엿보기 상담하기 상담받기 검사하기 Figure 3. TF Matrix for students consulting 마지막으로 정보흐름차원분석 은앞서태스크차원 분석을통해추출된각태스크의대략적으로파악된데이 터를 data-flow diagram (DFD) 로표현하는과정을통해 이루어진다 (Figure 4). 이과정을통해각태스크에필요 한데이터를상위의미를지니는정보의형태로분류할수 있으며, 각각의정보는정보요소로써의의미를갖게된다. 분석은완료된다. 이때, 주요태스크에따른정보요소구 성은화면설계단계에서정보요소를고려한설계를위한 준비과정이다. 태스크 - 정보분석단계의결과로는 HTA, SBTA 를거 쳐기능과연결시킨 TF Matrix 내의인터페이스디자인 요소와, DFD 를주요태스크에따라나누어구성한 PDFD 라고볼수있다. 태스크 - 정보분석단계는화면설계단 계를위한기초단계라고할수있다. 3.2 Interface display design phases 화면설계단계는태스크 - 정보분석단계를통해추출 한인터페이스디자인요소와정보요소를통해실질적인 화면설계를하는단계이다. 화면설계단계는다시화면 설계시안구성단계와정보흐름상세화단계, 최종통합 단계의세단계로분류된다. 먼저, 화면설계시안구성단계는스토리보드구성과 유사한과정으로, 앞서태스크 - 정보분석단계에서추출한 TF Matrix 를활용하여비슷한인터페이스디자인요소는 최대한일관성 (consistency) 를유지하는방향으로화면을 설계하는과정이다. 이때, 화면설계시안은인터페이스디 자인요소끼리의관계와작업순서, 디스플레이등의내용 을모두포함한다. 그러나화면설계시안은태스크의프로 세스및인터페이스요소만을포함하였을뿐, 정보요소와 는아직연결하지못한상태이므로완전하지않다. 태스크 의복잡한프로세스뿐만아니라필요한정보요소들을효 과적으로배치한스마트폰앱화면설계를위해서는정보 요소와의연결이매우중요하다. 다음으로, 정보흐름상세화단계는태스크 - 정보분석 단계의정보흐름차원분석에서의 PDFD 를화면설계시 안구성단계가지닌정보요소와유사한수준까지구체화 시켜상세화된 PDFD 를구성하는과정이다 (Figure 5). PDFD 를화면설계시안이지닌인터페이스요소까지상 세화시키는과정을통해다음단계인, 최종통합단계에서 화면설계시안과상세화된 PDFD 의상호비교를통한일 대일연결이가능해진다. Figure 4. DFD for case study system 추가적으로구성된전체 DFD 를태스크차원분석에서추 출한주요태스크별로 DFD 를분류, 구분하여 partial data-flow diagram (PDFD) 를구성하면정보흐름차원 Figure 5. PDFD (PDFD in the right upper rectangle) and refining PDFD for case study system
마지막단계는최종통합단계로태스크차원과기능차원분석으로부터얻어진화면설계시안과정보흐름상세화단계를통해얻어진상세화된 PDFD를반복적인상호비교과정을통해일대일로연결시키는과정이다 (Figure 6). 최종통합단계는화면설계시안과상세화된 PDFD 가일대일로연결되지않는경우, 다시화면설계시안구성단계혹은정보흐름상세화단계로돌아가게된다. 예를들어, 화면설계시안보다상세화된 PDFD가더많은내용을담고있다면, 정보요소를인터페이스요소가모두보여주지못하고있음을말해주므로화면설계시안을수정하며, 반대로화면설계시안이상세화된 PDFD보다더많은내용을담고있다면상세화된 PDFD를수정하는과정을반복한다. 이최종통합단계는태스크및기능차원분석과정보흐름차원요소를함께비교하는과정으로, 이반복과정을통해태스크의흐름과정보요소의흐름을모두고려한화면설계가가능해진다. 5. Conclusion 최근모바일기기의보급과다양한스마트폰어플리케이션의개발로, 사용자들은스마트폰앱을통해, 다양하고복잡한태스크를수행할수있게되었다. 이에따라, 사용자가원하는태스크의복잡한프로세스를고려하고필요한정보요소들을효과적으로배치해야하는스마트폰앱화면설계는앱서비스의품질을결정하는데큰영향을준다. 본논문에서는태스크흐름과정보요소를동시에효과적으로고려하는설계방법론으로태스크 -정보분석에기반한스마트폰앱화면구성을위한설계체계를제시하였으며, 사례연구를통해설계체계에따른각단계의설계방법론을설명하였다. 사례연구로는스마트폰앱을통한청소년상담어플리케이션개발로, 상담이라는복잡한태 스크와청소년과상담전문가사이의많은정보요소를지 니고있는주제를선정하여진행하였다. 그결과, 화면크 기가상대적으로작은스마트폰에서도복잡한주제의태스 크의흐름과복잡한정보요소를효율적으로설계하는것 이가능함을확인할수있었다. 부가적으로본연구에서는, 제안된방법론을적용한사 례연구를통해설계된 스마트폰을통한청소년상담어 플리케이션 을평가하고자, 개발된앱의프로토타입에대하 여 32 명의사용자 ( 청소년 15 명, 전문상담가 17 명 ) 에게 앱의유용성, 지속성, 차별성, 기능성, 심미성등, 총 5 가지 측면을 5 점리커트척도 (Likert scale) 로물어보았다. 그 결과, 모든척도에대하여 3 점이상의높은점수를확인할 수있었다. 태스크의흐름과정보요소의배치가앱서비스 에미치는영향이크다고할때, 제안된방법론이태스크와 정보요소의배치에도움이된다고볼수있다. 사례연구의평가를떠나, 상담이라는복잡한태스크와 많은정보요소를본연구에서제안된방법론을따라효과 적으로적용할수있었다는개발사례는앞으로본연구에 서제시된방법론이실제복잡한스마트폰앱화면설계에 도움이될것이라는가능성을시사한다고볼수있다. 향후 연구로제안된태스크 - 정보분석을기반으로한스마트폰 앱화면설계방법론을조금더다양한사례에적용해볼 필요가있다. 제안된설계방법론은특히태스크와정보요 소를동시에고려하여화면설계에적용한다는점에서의 의가있다. Acknowledgements 이논문은제 3 회국민편익증진 (QoLT) HCI 공모전에 참여하여수행된연구임. Figure 6. Reputational comparing design between refining PDFD(left-side) and draft display(right-side)
References Kang, N. E., Seong, K. A., and Yoon, W.C., User Interface Design of News Retrieval System based on Information Structure and Relations, HCI Korea 2004, pp. 698-703, 2004. Yoon, W.C., Task-Interface Matching: How we may design user interface, IEA2003, August, 2003. Annett, John, Hierarchical Task Analysis, The Handbook of Task Analysis for Human-Computer Interaction, ed. Diaper, Dan and Stanton, Neville A., IEA2004, 67-82, 2004. Go, Kentaro and Carroll, John M., Scenario-Based Task Analysis, The Handbook of Task Analysis for Human-Computer Interaction, ed. Diaper, Dan and Stanton, Neville A., IEA2004, 117-134, 2004 Diaper, Dan, Scenario and task analysis, Interacting with Computers, 14(1), 379-395, 2002 Highest degree: Ph.D., Department of Industrial and Systems Engineering, Georgia Inst. of Technology Position title: Professor, Department of Industrial and System Engineering, KAIST and Dean, Department of Knowledge and Service Engineering Areas of interest: HCI, HRI, UI/UX, AI, Cognitive System Engineering, Knowledge Science Author listings Hee Eun Lee: lhe1008@kaist.ac.kr Highest degree: BS, Department of Mechanical Engineering, SKKU Position title: MS Candidate, Department of Industrial and System Areas of interest: HCI, Cognitive system engineering, UI/UX Suyeon Jung: suyeon_jung@kaist.ac.kr Highest degree: BS, Department of Computer Science, ~ Position title: MS Candidate, Department of Industrial and System Areas of interest: HCI, Cognitive system engineering, UI/UX Jimin Han: hjm828@kaist.ac.kr Highest degree: BS, Department of Electronic and Electrical engineering, SKKU Position title: MS Candidate, Department of Knowledge and Service Areas of interest: HCI Cognitive system engineering, UI/UX Hyuck Tae Kwon: htkwon@kaist.ac.kr Highest degree: BS, Department of Industrial and System Engineering, KAIST Position title: PhD Candidate, Department of Industrial and System Areas of interest: HCI, HRI, Cognitive Engineering Wan Chul Yoon: wcyoon@kaist.ac.kr