USER INTERFACE DESIGN FOR NEWS-RETRIEVAL SYSTEM REFLECTING INFORMATION STRUCTURE Neung Eun Kang and Wan Chul Yoon Department of Industrial Engineering, KAIST, Gusong-dong, Yuseong-gu, Daejon 305-701, South Korea ABSTRACT This paper presents a process of user interface design for information systems that helps to achieve optimal usability reflecting the information structure in a systematical manner. The design problem is recognized to be formed by design constraints from three major sources, which are task, interface, and system functions. In systems with intensive information retrieval tasks, the three sets of design constraints interact with each other through the information structure. This viewpoint leads to a new design process that has three stages. Firstly, information requirements are gathered through task analysis and system function analysis. Secondly, analysis of the information requirements along different levels of abstraction reveals the information structure, which is built of hierarchical or network relations. The relations include part-whole relations, goal-means relations, similarity or counterpart relations, and temporal relations. Thirdly, the informational interface is designed on the basis of the task procedures and the information structure. The information components required on the user interface are identified according to the task procedures and their spatial and temporal locations are determined to reflect the information structure. This design approach can deliver information-heavy interfaces with robust usability since the interfaces are based on the inherent information structure, not only on the task needs. As a result, the designed interfaces can support or reinforce users mental models. In this paper, the method was applied to the design of a web-based news-retrieval and monitoring system to illustrate the detailed process and the outcome of the suggested method. KEY WORDS User interface design; al Interface; structure; News retrieval system 1. Introduction UI design process is typically based on a top-down approach which starts from the analysis of users tasks to derive the interface requirements. Alternatively, some researchers (Guindon 1992; Yoon, 2001; Yoon, 2003) suggest that a bi-directional approach based on both task knowledge and interface knowledge may be more practical. It is based on that the design constraints usually come from both socially formed conventions at the task-level and technical availability or presentation standards at the interface level.
In addition to the above two sources of constraints, this paper contents that the set of given system functions should also be considered another important source of design constraints since the physical function elements are usually conceived or technically determined before the UI design. These constraints do not necessarily hinder the usability of resulting interfaces. Properly observed constraints may actually play the role of the ground of communication between the designer and the users by fulfilling the common expectation of the users based on their common knowledge. This paper presents a new UI design method that helps to achieve optimal usability in a systematical manner reflecting design constraints from the three major sources, which are task, interface, and system functions. The proposed method identifies the required information structure integrating the task constraints and system function constraints and put it in the center of UI design. This approach is reasonable since, in the information system, information is in the center of tasks and functions. The proposed method was applied to the UI design for a web-based news retrieval system. 2. Overview of the Design Process Task Analysis - Main task - Typical task flow System Function Analysis -System Functionalities - Data Requirements Requirements Structure Analysis - relations User Interface Analysis - Spatial location-information structure relations (Web-based) User Interface Design - Spatial location -Temporal location Figure 1. UI Design Process requirements are first obtained through task analysis and, in more detail, system function analysis. requirements obtained through task analysis are general and systemindependent. The requirements include both the contents of information and the required processes. System function analysis determines the availability of these contents and processes on the basis of the functions and data provided by the system. Also in this stage, more detailed identification and definition of the information requirements become possible. Some marginally required information and processes may or may not be included in the design depending on whether they are easily made available in the target system. A comparative analysis of the information requirements reveals the relations within the required information and leads to the information structure which consists of multiple levels of abstraction. The spatial and temporal organization of the information elements being represented on the interface is determined based on the identified information structure. This match between the commonly
understood and expected information structure and the presented interface enables users utilize their mental models and also strengthen the models through the use. Each stage of the overviewed design procedure is explained in the rest of this paper using the examples that appeared during a practical design of the news-retrieval system. 3. Requirements Gathering Through Task Analysis and System Function Analysis Through task analysis, typical tasks of news-retrieval behavior were identified and the task flow was analyzed as shown in Figure 2. requirements of each task step are shown in the second column in Table 1. Because information requirements obtained from the task analysis were general and system-independent, more detailed information was obtained from system function analysis as shown in the last column in Table 1. [Browsing] Filtering page Keyword index Sorting [Query] (Problem identification) Search type selection Query term input Query (re)formation Resluts evaluation Category selection Main window page Advanced Search page Optioanl procedure Search scope selection News contents page Result selection Personal collector page Copy Save Contents scanning/reading Related finding Location selection editing Category selection Classification /Integration Related scanning/reading Category creation Figure 2. Typical Task Flow of News-Retrieval Behavior Table 1. Requirements Analysis through Task Analysis and System Function Analysis Task requirements through task analysis requirements through system function analysis Search scope selection Search scope News type (event/news), Date, Category (topic section, event category) Query term input Query term Keyword, Thesaurus Category selection Classification Category Event category (event list), Topic section category Results evaluation News Headline, Contents, Keyword, Date Sorting Sorting item Date, Degree of match with query keyword Result selection News News Contents scanning/reading News contents Headline, Contents, Keyword, Date Related finding News Event, News In the system function analysis, information provided by the system functionality and the specified data types of NewsML, which is an XML-based standard format to represent and manage news, was
analyzed. The major functions of the system were text partition, news indexing, topic detection, and topic tracking. The text partition and news indexing technologies were used to index keywords, news terminology, and a thesaurus. The topic detection and tracking functions analyzed the temporal and geographical information in the news content and automatically associated the related news with each other as time passed. By these functions, a news item, when first occurred, is marked new event. The chief news editor selected main events among them and the subsequent news which were related to the main events were classified accordingly. Similarly, each reporter or viewer could establish personal events and accumulate the news items related to the events. News documents are classified into not only the event classes but also topic section categories. Topic section categories were determined by the company and defined in TopicSets class in NewsML format. The topic section included 10 main sections (i.e. politics, economy, industry, national, international, culture, science, accident, speech/publication, sports) and 62 sub-sections. News headline, sub-headline, contents and metadata such as keyword, date, and copyright were stored in NewsLines class. 4. Structure Analysis The gathered information requirements were analyzed to reveal the information structure, which consisted of the relations among information elements and classes. The relations included both vertical relations that associated higher and lower level information constructs and horizontal relations that connected the information elements at a same abstraction level. The vertical relations were either partwhole relations or goal-means relations. The horizontal relations were temporal relations and similarity/counterpart relations. The relations defined and used in the system were shown in Table 2. Table 2. Relations in Structure - Query keyword-events/news Main topic section-sub topic section Topic section-event list Topic section-news Main event-new event Main event-personalized event New event-personalized event Topic section/event-news News-keyword Event-event, News-news News-news (related news) News-metadata/contents relations 1 Cross-levels: goal-means relation 2 Cross-levels: part-whole relation 3 Within-level: equivalent, independent (own lower level news jointly) 4 Cross-levels: part-whole relation 5 Within-level: equivalent, independent (do not own lower level news jointly) 6 Within-level: equivalent, independent (own lower level news jointly) 7 Within-level: equivalent, independent (own lower level news jointly) 8 Cross-levels: part-whole relation 9 Cross-levels: part-whole relation 10 Within-level: equivalent 11 Within-level: equivalent, similar and counterpart relation 12 Cross-levels: part-whole relation, whole-component 5. Interface Design The allocation of functions and information on each web page were performed based on the task flow shown in Figure 2. On the main page, users could search news by querying or browsing through topic section or event lists and evaluate retrieved news results. On the news-contents page, users accessed the contents and related information for specific news item which was selected in the main
page. Users tended to expect particular information to be presented in a specific location according to their mental models and previous experiences. The relative locations on the web pages - top, bottom, right, left and center - were associated with representative information characteristics. The association used in this research was summarized in Table 3. Table 3. Characteristics on Spatial Location of Web Page Location on web page characteristics and relations Top a of the highest level of abstraction b Higher level of information for contents bottom c Metadata d Additional information Left e Higher level of information for contents Right f Higher level of information for contents g Metadata center h Main information, contents Top-bottom i Equivalent, dependent Left-right j Equivalent, independent Top-center(left-center) k Cross-levels, dependent, part-whole relation, goal-means relation Right-center l Cross-levels, dependent, part-whole relation, goal-means relation m Related information Center-bottom n Main information-additional information o Contents-metadata The information elements to be provided on each page were selected from Table 1 and their spatial locations were determined by comparing the information relations and characteristics that appeared in Table 2 and Table 3. The mapping and locating results are shown in Table 4 and the prototype web pages are shown in Figure 3. Table 4. Spatial Location of on Web Page Main page News-contents page Characteristics Spatial location characteristics Spatial location mapping mapping Query field 1+k Top-bottom Query field 1+k+a Top -event/news Query field 1+k+a Top Topic section 3+j+4+k+e Left Topic section 3+j Left-right News-classification 8+l Center-right -event list (section/event) Topic section 4+k Left-center News-keyword 9+l Center-right -news list Topic section 3+j+4+k+e Left News-related news 11+m Center-right Event list-news 8+l Right-center News (contents) h Center Event list 8+l+f Right Classification 8+l+f right (section/event) Event/news h Center Keyword 9+l+g Right News 10+n Centerbottom Related news 11+m+g Right -current input news Current input news 10+n+d bottom Current input news 10+n+d bottom
[ 국제 ] 힐러리, 미국대통령꿈꾸나 [ 새사건 5] Query field: the highest level information -top location Topic section-event lists : the same level, equivalent, independent -left-right location Query field: the highest level information -top location Topic section Classification/keyword - right location 검색 상세검색 검색 상세검색 전체검색 전체검색 정치내검색 전체기사 전체기사전체정치기사경제산업사회사건 / 사고문화예술언론 / 출판 / 방송과학정체기사스포츠국제 Topic section 전체기사전체기사 30,157 건 Sorting 최근순오랜순조건별기사보기 [ 경제 ] 조흥은행예금 20 일에 8 천억원이탈 2003.06.19 개인사건 : 조흥은행파업사태키워드 : 조흥은행, 금융파업기사크기 :20kb 기사유형 : 텍스트 금융감독원은 21 일조흥은행의원화예수금, 외화예수금, 은행. 신탁. 종금계정등에서전날 8 천억원정도가빠져나간것으로잠정집계됐다고발표했다. 이에따라조흥은행노조가파업을선언한지난 11 일이후총 5 조 8 천 736 억원정도가인출된것으로... [ 정치 ] 현대비자금 150 억원 네뭉치 로나눠돈세탁 2003.06.19 주요사건 : 대북송금특검수사키워드 : 대북송금, 박지원기사크기 : 30kb 기사유형 : 텍스트 / 동영상 대북송금의혹사건 을수사중인송두환특별검사팀은 19 일현대비자금 150 억원이재미사업가김영완 (50. 미국체류 ) 씨주도로네뭉치로나뉘어증권사와보험사, 은행등을거치며를통해돈세탁이되었음을밝혀내었다.. [ 사회 ] 한국노총, 금융노조, 30 일시한부파업 2003.06.19 키워드 : 금융파업, 노조기사크기 : 기사유형 : << < 1 2 3 4 5 6 7 8 9 10 > >> 선택된기사저장인쇄 주요사건조흥은행파업사태 (20) 대북송금특검수사 (50) 주요사건명 ( 포함기사수 ) 주요사건명 ( 포함기사수 ) 새사건새사건 5(3): 미국, 힐러리 New 새사건 4(10): 검찰, 이익치새사건 3(15): 대구, 폭발사고새사건 2( 포함기사수 ): 키워드개인사건개인사건만들기개인사건 1: 방화 - 폭발사고 (10) 개인사건 2: 공직자비리수사 (30) 개인사건 3: 금융파업 (0) 저장목록보기 정치정치전체기사정치일반대통령국회선거정당행정지방행정사법외교국방 정치 > 정치일반이전페이지현대비자금 150 억원 네뭉치 로나누어돈세탁 2003.06.18 대북송금의혹사건 을수사중인송두환특별검사팀은 19 일현대비자금 150 억원이재미사업가김영완 (50. 미국체류 ) 씨주도로네뭉치로나뉘어증권사와보험사, 은행등을거치며돈세탁된사실을밝혀내고이돈이정치권으로최종유입됐는지여부를집중추적중이다. 특검팀은특히 150 억원가운데김씨가직접사채시장을통해돈세탁한 10 억원중 2 억원이수표로코리아텐더유신종 (41) 사장에게건네진단서를포착, 이날밤유사장을소환, 수표출처, 배서경위, 사용처등을조사한뒤귀가시켰다. 유사장은 나는중간다리역할에불과하다 고진술한것으로전해졌다. 특검팀은또비자금 100 억원이김씨의부하직원임모 ( 미국체류 ) 씨를통해명동사채업자장모씨에게전달된뒤각각 50 억원으로쪼개져돈세탁된사실을확인, 장씨를불러자금출처및행방을조사했다. 이전페이지기사저장인쇄 기사분류사건 : [ 정치 ] 대북송금특검수사키워드 : 대북송금, 현대관련기사 [ 정치 ] 특검수사기간연장공식요청 [ 정치 ] 정치권특검수사긴한막판공방 [ 사건 / 사고 ] 특검수사기밀유출로곤란 [ 정치 ]150 억계좌추적 박지원씨는이익치씨고발 [ 주요사건 : 대북송금특검수사 ] [ 국제 ] 힐러리, 미국대통령꿈꾸나 [ 새사건 5] [ 정치 ]150 억계좌추적 박지원씨는이익치씨고발 [ 주요사건 : 대북송금특검수사 ] [ 국제 ] 힐러리, 미국대통령꿈꾸나 [ 새사건 5] Event/list : contents -center location Current input news: temporal information -bottom location (a) Event lists News contents - center location Current input news: temporal information -bottom location (b) Related news -right location Figure 3. Prototype Screen Shots; (a) Main Page (b) News-Contents Page 6. Conclusions In this paper, a design process for informational UI which enables integrating and reflecting the constraints from tasks, interface means, and system functions is suggested. Using the suggested method, designers can systematically determine the optimal spatial and temporal locations of the information items on the UI according to the information structure which corresponds to users mental models. In such an information system, information to be retrieved is in the center of the tasks so that it should be explicitly used for the integration of design decisions. The proposed information design process aims to provide a comprehensive and generalized design process, although the strongest emphasis was put on practical usefulness. Acknowledgement This research was funded by the Korea Culture & Content Agency for Development of multidimensional visualization techniques for news retrieval project. References Guindon, R. (1992). Requirements and design of design vision, an object-oriented graphical interface to an intelligent software design assistant. In: Proceedings of the 1992 CHI (pp. 499-506). New York: ACM Press. Yoon, W.C. (2001). Identifying, organizing and exploring problem space for interaction design. In: Proceedings of the 8 th IFAC/IFIP/IFORS/IEA Symposium on Analysis, Design, and Evaluation of Human-Machine Systems (pp.81-86). Yoon, W.C. (2003). Task-interface matching: How we may design user interface. In: Proceedings of the 2003 IEA.