GUI generation based on user interface guidelines

Abstract

Although designing graphical user interfaces (GUIs) is a costly task in software development, GUIs realize highly usable software. User interface (UI) guidelines are published documents that describe how to design GUIs within a specific platform, and applying UI guidelines when developing GUIs provides consistency. To reduce the costs of designing and porting GUIs, we propose a method to automatically apply UI guidelines to GUIs. Our method analyzes GUI source programs that have been or are being developed.

Full text

GUI GENERATION BASED ON USER INTERFACE
GUIDELINES
Kazuya Sugiuchi1, Junko Shirogane2, Hajime Iwata3 and Yoshiaki Fukazawa1
1Waseda University
2Tokyo Woman’s Christian University
3Kanagawa Institute of Technology
ABSTRACT
Although designing graphical user interfaces (GUIs) is a costly task in software development, GUIs realize highly usable
software. User interface (UI) guidelines are published documents that describe how to design GUIs within a specific
platform, and applying UI guidelines when developing GUIs provides consistency. To reduce the costs of designing and
porting GUIs, we propose a method to automatically apply UI guidelines to GUIs. Our method analyzes GUI source
programs that have been or are being developed.
KEYWORDS
Graphical user interface, usability, user interface guidelines
1. INTRODUCTION
Typically, software products are designed to run on multiple platforms. For example, Google Chrome works
on Microsoft Windows and Mac OS X. However, the platforms have design and control differences in their
graphical user interface (GUI). By porting software products between platforms, their usability can be
improved.
Usability is important in software development because it improves the ease of operating a software
product. However, it is difficult to make GUIs usable for all users. Regardless of the software’s functionality,
a low usability will reduce its effectiveness. Although there are several definitions for usability, the two most
common are the ISO 9241-11 and the definition by Jakob Nielsen. As demonstrated above, defining usability
is difficult, but developing software with a high usability is even more difficult.
Each platform has published its own user interface (UI) guidelines. These documents describe the design
rules for software GUIs. When these rules are applied, software with consistent operations and usability can
be realized. However when developing and porting software, developers must manually implement and
modify source programs. Because UI guidelines contain numerous rules, it is difficult for developers to
recognize where and how to apply the rules, resulting in mistakes and missing implementation.
Our research focuses on developing a method to generate GUIs based on UI guidelines by analyzing the
GUI source programs that have been or are being developed. Our method is an approach to generate GUIs
adapted to a specific platform. For GUIs already developed, our method aids in porting, but for GUIs under
development, our method helps realize GUIs that apply the UI guidelines. With our method, it is unnecessary
to verify whether the GUIs adhere to the numerous rules within the UI guidelines.
2. USER INTERFACE GUIDELINES
UI guidelines are documents describing the rules for software GUI designs and operations. Applying these
guidelines allows software developers and UI designers to realize software consistency within a platform.
Many UI guidelines have been published, e.g., Microsoft Windows User Experience Interaction Guidelines,
Mac OS X Human Interface Guidelines, and GNOME Human Interface Guidelines.
International Conference Information Systems 2013
297

There are several benefits of adapting UI guidelines to GUIs. Applying UI guidelines allows consistent
operations and designs of GUIs to be realized, which improves operational consistency between software
products within a platform. A user can apply his or her experience of one software product to other software
products without learning new operations, which increases operating efficiency. Additionally, software
manuals in simple terms benefit both users and developers. Users can use the software products without
reading the manual, while developers can decrease costs and burdens of preparing manuals because the
operations are similar to other software products. Hence, using UI guidelines to make layout decisions
simultaneously improves usability and reduces development costs.
3. FEATURES OF OUR METHOD
In our research, we aim to reduce costs when applying UI guidelines by automatically generating GUIs based
on UI guidelines. The features of our method are described below.
In software development, time and cost are necessary to design GUIs. In particular, usability testing
requires iterative modifications. In these tests, users actually use the GUIs to provide feedback to developers.
Through feedback, the developers modify the GUIs. This iterative process improves the usability of GUIs.
Because UI guidelines contain many items, it is difficult to apply all items manually. Our method aims to
generate GUI source programs by applying UI guidelines. Our method analyzes GUI source programs and
extracts GUI data, which makes it easier to develop GUIs with a high usability and reduces the burdens of
developing and modifying GUIs. Reducing the costs of the GUI development process decreases the overall
cost of software development.
Currently, many software products are designed for multiple platforms. Applying UI guidelines provides
consistency to GUIs. However, the design strategies of GUIs often differ between platforms. For a software
product to operate on different platforms, developers must modify the GUI source programs.
Our approach generates GUI source programs by analyzing the GUI source programs that have been or
are being developed. In this manner, the software program can be ported to other platforms.
4. PROPOSED APPROACH
Our approach generates GUI source programs by analyzing the implemented GUIs and applying UI
guidelines. In our method, the developers initially select the GUI source programs and UI guidelines of a
specific platform. Then our system analyzes the selected GUI source program and identifies which items in
the UI guidelines can be applied to each widget and window in the GUIs. Finally our system applies the rules
of the identified items in the UI guidelines to generate source programs of GUIs. Currently, our method is
limited to GUIs written using Java. Figure 1 shows structural drawings of our system.
4.1 Selecting Source Programs and UI Guidelines
The first step in our approach is for the developers to select the source programs and the UI guidelines of the
target platforms, such as the Windows User Experience Interaction Guidelines or the Mac OS X Human
Interface Guidelines.
4.2 Analyzing GUI Data
To analyze the selected GUI source programs in 4.1, our approach uses a parser made by JavaCC (Java
Compiler Compiler). This parser extracts the following GUI data: types of widgets, variable names of
widgets, methods used by widgets, arguments of the methods, and code locations of the widgets. Figure 2
and Table 1 show examples of the analysis.
ISBN: 978-972-8939-83-0 © 2013 IADIS
298

Figure 1. Structural drawings of our system
4.3 Identifying items in UI Guidelines to be applied to GUI Elements
There are numerous items in UI guidelines, and each item has its own rules. Although the items and rules that
can be applied to the extracted widgets in 4.2 must be identified, not all the items and rules can be applied
automatically. Thus, our method classifies items and rules into three categories: automatic modification,
additional input requirements, and confirmation. “Automatic modification” describes items that our system
can automatically apply to the target GUIs. “Additional input requirements” refers to items that developers
must input additional information, such as a widget description, before our system can apply them to the
target GUIs. “Confirmation” indicates that our system only generated instruction for an item, and
confirmation by the developers is necessary.
4.3.1 Automatic Modification
For items and rules identified as automatic modification, our system generates source programs of GUIs by
applying these items and rules. An example of such an item is the menu shortcut keys. When analyzing GUIs,
there are two ways of applying the items. Frequently, the assigned label names for menu items with shortcut
keys are used. Shortcut keys are determined based on their correspondences between label names and
specific keys (Table 2). If label names are frequently used, then the key codes are specified based on the key
code of the assigned shortcut keys to the menu items from Table 2. Typically for Windows, a shortcut key is
a combination of the CTRL key and another key, whereas for Mac OS X, the shortcut key is a combination of
the command key and another key. When the corresponding key codes are identified from Table 2, they are
applied automatically. If the corresponding key codes are not found, the CTRL key code in Windows is
replaced with the command key code in Mac and vice versa.
4.3.2 Additional Input Requirements
When our system identifies items and rules as those requiring additional input, our system requires
developers to input more information before the source program is generated. An example is the window title.
According to the UI guidelines, each window should have a title. In the case where a window lacks a title,
our system cannot automatically assign one. Thus, our system flags the item to indicate that additional input
from the developer is necessary.
4.3.3 Confirmation
When our system identifies items and rules as confirmations, developers must confirm or modify source
programs because our program cannot automatically apply the UI guidelines. An example is a check box.
According to UI guidelines, the maximum number of check boxes is ten for a selection group. Our system
can detect how many check boxes are in a group, but it cannot modify the number automatically if it exceeds
the maximum. Hence, our system generates a confirmation message to the developers to reduce the number
of check boxes.
International Conference Information Systems 2013
299

Figure 2. Example of GUI - Figure 3. Example of Generated GUI
Table 1. Example of analyzed GUI data Table 2. Examples of shortcut keys
Variable name Type Arguments Location
of code
fileMenu Menu Edit 20
fileMenu Access key E 21
undoMenuIte
m
Menu item Undo 24
undoMenuIte
m
Access key U 25
undoMenuIte
m
Shortcut key Ctrl + Z 26
4.4 Generating Source Programs
After identifying the items in the UI guidelines to be applied to the GUI elements as in 4.3, source programs
of GUIs that apply the UI guidelines are generated. The applicable parts of the UI guidelines inputted in 4.1
are identified, and the generated codes are inserted. Figure 3 shows the result of Figure 2 that applied Mac
OS X guidelines.
5. EVALUATION
To evaluate our method, we ported some Windows software products (A, B, C, D) into Mac OS X software
products. In this evaluation, we implemented GUIs similar to the software products, and our system analyzed
the implemented GUIs. For Software E, we applied Windows UI guidelines to a software product that we
have made for this evaluation. Table 3 shows the results.
Table 3. Results of the proposed approach
Software Type of the software Type of window Widgets Automatically
modified Additional
input Confirmation
A Web browser Main window 115 30 0 1
B Text editor Main window 122 48 0 0
C Web browser Option window 10 2 0 0
D Text editor Option window 20 2 0 0
E Text editor Main window 18 30 1 0
“Widgets” indicates how many widgets were detected in the GUIs. “Automatically modified” indicates
the number of UI guideline items that were automatically modified to the GUIs. “Additional input” indicates
how many additional items were required, and “Confirmation” indicates the number of items that could not
be modified automatically.
For Software A, only shortcut keys were automatically modified. A confirmation occurred due to the
submenus. Mac OS X UI guidelines indicate that only one level of submenus should be used, but Software
A’s GUI contained two levels of submenus.
The results for Software B are similar to software A; only shortcut keys were automatically applied.
For Software C and D, Windows and Mac OS X have opposite UI guidelines for the “OK” and “Cancel”
buttons. These UI guidelines items were automatically applied.
Additional input items were not required for these software products, most likely because the GUIs of
these products are well designed. Additional inputs are generally required when a design lacks information.
Label nam
e
Windows Mac OS X
Save Ctrl + S command + S
Undo Ctrl + Z command + Z
Redo Ctrl + Y command + shift + Z
Help F1 command + ?
ISBN: 978-972-8939-83-0 © 2013 IADIS
300

For Software E, shortcut keys and access keys were automatically modified. And an additional input was
required due to the lack of window title.
In this evaluation, we implemented GUIs similar to those in the existing software product. Our evaluation
results indicate that our method appropriately applies UI guidelines to GUIs. However, many manners can be
used to GUI source programs. Hence, our system must be able to analyze source programs with various
writing manners.
6. RELATED WORK
Sajedi et al. discussed how UI guideline items improve usability, and suggested changes to improve the UI
guidelines. Their research concluded that the effect of UI guidelines on important UI factors varies. For
example, color is a powerful tool but should be used carefully because some people have a form of color
blindness. Unlike our research, their work focused on UI guidelines items and not on the application of UI
guidelines.
Janeiro et al. investigated the enhancement of UI design patterns with design rationale structures. UI
design patterns are well-documented patterns that include solutions for common problems, and following
these patterns can improve usability. However, patterns are documented in natural languages, which makes a
systematic approach difficult. Janeiro et al.’s approach combined natural languages with rationale structures,
helping developers search and reuse design patterns. Compared to our research, they focused on design
patterns and UI guidelines with more design descriptions.
7. CONCLUSION
We proposed an approach to apply UI guidelines to GUIs automatically by analyzing the GUI source
programs that have been or are being developed. Our method may reduce the costs of developing GUIs with
a high usability. The evaluation demonstrated that our method could appropriately apply UI guidelines.
However, not all UI guidelines are applied automatically; some items must be manually revised after
generating the source programs.
Currently, our approach includes only a few UI guideline items. In the future, we intend to increase the
number of UI guidelines items, improve our software, and increase the application platforms to portable
terminals such as smartphones and tablet PCs.
REFERENCES
Book
Jakob Nielsen, 1993. Usability Engineering. Morgan Kaufmann Publishers, San Francisco, USA.
Conference paper or contributed volume
Janeiro, J. et al, 2009. Enhancing User Interface Design Patterns with Design Rationale Structures. Special Interest
Group on Design of Communication. Bloomington, USA, pp. 9-15.
Sajedi, A. et al, 2008. Fundamental Usability Guidelines for User Interface Design. International Conference on
Computational Sciences and Its Applications. Perugia, Italy, pp. 106-113.
World Wide Web page
Apple, 2012. OS X Human Interface Guidelines, viewed 23 October 2012,
<https://developer.apple.com/library/mac/documentation/userexperience/Conceptual/AppleHIGuidelines/>
IID, Inc. 2011. U-Site, viewed 23 October 2012, <http://www.usability.gr.jp>
JavaCC, 2006. JavaCC Home, viewed 23 October 2012, <http://javacc.java.net/>
Microsoft, 2010. Windows User Experience Interaction Guidelines, viewed 23 October 2012,
<http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx>
The GNOME Usability Project, 2011. GNOME Human Interface Guidelines 2.2.2, viewed 23 October 2012,
< http://developer.gnome.org/hig-book/3.5/>
International Conference Information Systems 2013
301