GUI Prototype Generation by Merging Use Cases Junko Shirogane
Yoshiaki Fukazawa
Department of Information and Computer Science, Waseda University 3-4-1 Okubo, Shinjuku-ku, Tokyo 169-8555, Japan
[email protected]
Department of Information and Computer Science, Waseda University 3-4-1 Okubo, Shinjuku-ku, Tokyo 169-8555, Japan
[email protected]
The control structures of GUIs (GUI control structures) are extracted from use case diagrams and scenarios, and they are included in the generated GUI prototypes.
Abstract
In developing an application software, it is important to pay attention to end-users’ viewpoints. In particular, in designing Graphical User Interfaces (GUIs), it is effective to develop a prototype and to show it to end-users in order to reflect endusers’ viewpoints, because the design of the GUI strongly affects the usability of the application. Use case diagrams and scenarios are described from end-users’ viewpoints, so it is considered that GUIs reflecting end-users’ viewpoints can be developed using use case diagrams. In this paper, we propose a method for generating GUI prototypes from given use case diagrams and scenarios. GUI prototypes can be generated based on the extracted control structure with appended simple widget information.
UML and use cases
Categories & Subject Descriptors
D.2.2 [Software Engineering]: Design Tools and Techniques– User Interfaces General Terms
An example of use case diagrams is shown in Figure 1. This example is the application part for a rental video business. Use case diagrams consist of actors and use cases. An actor interacts with use cases and represents the role that a human, a hardware device, or even another system plays. In Figure 1, “Clerk” is an actor. A use case represents a set of flow of actions in a function. In Figure 1, “Rent video”, “Take statistics” and “Search video” are use cases. Interactions between actors and use cases are described by use case diagrams. A scenario is used to represent a path of possible behavior through a use case. We assume that scenarios are described by itemized natural language. Each action of a scenario is called an event.
Design Keywords
Graphical User Interface, Prototype, Use case, Scenario Introduction
In recent years, various kinds of software have become widely used in various fields. Consequently, end-users do not have sufficient knowledge of software, so the importance of usability is widely acknowledged. GUIs (Graphical User Interfaces) strongly influence the usability. In designing GUIs, it is important to develop prototypes of GUIs (GUI prototype) in the early steps of application development and to show them to end-users in order to reflect their viewpoints.
Figure 1: A use case diagram The events in all given scenarios do not always mean different actions in an application. That is, some events have the same meaning as other events (same-meaning events), even if their expressions are different. If events have same-meaning events but have different expressions, this correspondence should be indicated. Same-meaning events can be found in different scenarios or use cases.
Use case description[1][2] is suitable for the above. Use cases have come to be widely used in the object-oriented requirement analysis phase. In use case diagrams, interaction between an end-user and the application system is described.
GUI prototype generation
GUI prototypes are generated by the five steps (Figure 2). In order to support these steps, a system, GUPPY (GUi Prototype Program generation sYstem), has been developed. Step 1: Describe use case diagrams and scenarios Use case diagrams and scenarios are described. Same-meaning events are indicated in this step. Step 2: Generate scenario merged graph In order to extract the application-level event flow for GUI prototype generation, all described scenarios are merged into
In this paper, we propose a method for generating GUI prototypes of an application from use case diagrams and scenarios. Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. IUI’02, January 13-16, 2002, San Francisco, California, USA. Copyright 2002 ACM 1-58113-459-2/02/0001. . . $5.00
222
one and directed graph in which each node represents an event and each arrow (arc) the order of occurrence is generated. We call this a Scenario Merged Graph (SMG). In order to generate a SMG, same-meaning events are merged into one event. GUPPY regards not only events which designers indicate in Step 1, but also those which have the same character strings, as same-meaning events. An example of a SMG is shown in Figure 3.
Evaluation
GUI prototypes for three applications, a rental video business application which includes the example described in Section , a mail-order company’s system which is described in [1], and the GUPPY system itself, have been generated using GUPPY. The results are presented Table 1. It shows the result of generating SMG. “Total” indicates the total number of events in each application, “Determined” indicates the number of same-meaning events specified by designers, “Character-string” indicates the number of events regarded to be same-meaning events by GUPPY, “Different-meaning” indicates the number of events which do not have same-meaning events as specified by both designers and GUPPY. Events which are specified as the same by both designers and GUPPY are included not in “Character-string”, but in “Determined”. Table 1: The number of same-meaning events
Designers
GUPPY Step1: Describe use case diagrams and scenarios
Step3: Modify the Scenario merged graph
Description Subsystem
Use case diagrams
Step2: Generate Scenario merged graph Translation Subsystem
Scenario merged graph (Temporary)
Step4: Generate GUI prototypes Step5: Specify Interaction items and their clustering
Generation Subsystem
Scenario merged graph (Final)
Total Determined Character-string Different-meaning
GUI prototypes
Figure 2: System architecture
Rental video 309 149 82 78
Mail-order 348 130 76 142
GUPPY 328 90 106 132
Table 1 shows that the sum of “Determined” and “Characterstring” is 74% of Total events in a rental video business application, 59% in a mail-order company’s system and 60% in GUPPY. Thus, events have same-meaning events more than those which do not have same-meaning events in an application, so the application-level event flow can be extracted by merging same-meaning events and generating the SMG. Related works
For the development of GUIs, SUIP[3] and GENIUS[4] have been proposed. In SUIP, prototypes of GUI are generated from scenarios described using collaboration diagrams in use cases. In GENIUS, to generate GUIs, it is assumed that the attributes of each datum and the relation between data are expressed in E-R models, and the control structures of GUI, such as window switches, are described using the Petri net. For these, it is necessary to describe extra information or prepare special description for GUI program generation.
Figure 3: An example of scenario merged graph Step 3: Modify scenario merged graph In Step 1, same-meaning events can be identified, however, not all of them may be correctly specified. Different-meaning events may be mistakenly specified as same-meaning events. In addition, GUPPY may regard different-meaning events as same-meaning events because they have the same character strings. In this step, GUPPY shows the generated SMG to designers so that designers can specify same-meaning events which are not specified in Step 1, and separate differentmeaning events from merged events. As a result of this modification, GUPPY can obtain the final SMG. Step 4: Specify interaction items and item clustering From use case diagrams and scenarios, GUPPY cannot extract input items, output items and items which receive user events (we call these items interaction items) or item clustering, i.e., which interaction items are included in one window. Therefore, they are specified after SMG modification. Step 5: Generating GUI prototypes GUI prototypes are generated from the final SMG and the information on interaction items and item clustering.
Conclusions
In this paper, we have proposed a method for generating GUI prototypes from use case diagrams and scenarios, for the purpose of developing GUIs that reflect end-users’ viewpoints. REFERENCES 1. G. Schneider and J. P. Winters. Applying Use Cases. A Practical Guide. Addison-Wesley Pub. Co., 1998. 2. G. Booch, J. Rumbaugh and I. Jacobson. The Unified Modeling Language User Guide. Addison-Wesley Pub. Co., 1999. 3. M. Elkoutbi, I. Khriss and R. K. Keller. Generating User Interface Prototypes from Scenarios. Proc. of IEEE International Symposium on Requirements Engineering (RE’99), 1999. 4. C. Janssen, A. Weisbecker and J. Ziegler. Generating User Interfaces from Data Models and Dialogue Net Specifications. Proc. of the Conference on Human Factors in Computing Systems (CHI’93), 1993.
223
