Method of GUI Layout Arrangement along with User Interface Guidelines
Junko Shirogane†, Takeaki Fukumoto‡, Hajime Iwata* and Yoshiaki Fukazawa‡
† Tokyo Woman’s Christian University‡ Waseda University
* Kanagawa Institute of Technology
JCKBSE2010 in Kaunas, Lithuania 1
BackgroundSoftware usability: consistency of GUIs is one
of important elements– Consistency of widget arrangement– Consistency of operation feelings, etc.
Software packages are run in several platforms– Windows– Macintosh, etc.
JCKBSE2010 in Kaunas, Lithuania 2
To realize, user interface guidelines are used
Consistency among software packages in the platform is required
JCKBSE2010 in Kaunas, Lithuania 3
User interface guidelines(1)User interface guidelines to create consistent
layouts and operations of user interfaces– Windows Vista User Experience Guidelines
(Windows guidelines)– Apple Human Interface Guidelines(Mac guidelines)– GNOME Human Interface Guidelines, etc.
Many detailed elements for GUI designs– Usage patterns of size and arrangement of widgets– Usage patterns of text fonts– Usage patterns and design strategies of menus
User interface guidelines(2)
JCKBSE2010 in Kaunas, Lithuania
Arranged based on Windows guidelines
Arranged based on Mac guidelines
Label alignment: left Label alignment: right
Number of choices:Under seven - radio button
Number of choices:Over six - drop down list
4
Even if contents are the same, GUIs become quite different according to applying types of guidelines
An application for Windows
An applicationfor Macintosh
Arrange GUI layouts along with guidelines
Windows guidelines
Mac guidelines
Problems of guidelines
JCKBSE2010 in Kaunas, Lithuania 5
Problems:Many detailed elementsProblem:Many detailed elements
Problem:Many parts to be modified
Merits• Realization of consistency• A certain level of usability
Merits Realization of consistency A certain level of usability
Automatically arrange GUI layouts based on target UI guidelines
Strategies of our method
JCKBSE2010 in Kaunas, Lithuania 6
Source programs of GUIs are generated Generated GUI layouts are arranged based on
user interface guidelines
Purpose
Prepare guideline descriptions of the target platform Analyze source programs
Without arranged layouts With arranged layouts based on guidelines for another
platforms Generate source programs of GUIs with arranged layouts
for target platforms
Strategies
Features
JCKBSE2010 in Kaunas, Lithuania 7
Reduce costs of GUI development– Automatically apply user interface guidelines to
GUIsMake easy to develop GUIs for several
platforms– Possible to newly develop GUIs for several
platforms– Possible to modify GUI layouts arranged based on
different guidelines
Realized only by changing guideline descriptions
Source programs GUI databefore transformation
Source program generation
GUIs applying guidelines
GUI data transformation
GUI dataafter transformation
Source program analysis
Static analysis
Dynamic analysis
Our system
System architectureCurrent target GUIs: Java SWT packages
JCKBSE2010 in Kaunas, Lithuania 8
User interface guidelines
Arrangement guidelines
Conditional guidelines
User interface guidelines
Arrangement guidelines
Conditional guidelines
Guideline descriptions(1)Guidelines are described as two types
– Conditional guidelines– Arrangement guidelines
Conditional guidelines– Elements applied to satisfy certain conditions– Examples
Widget size (e.g. height of button widgets should be 20)Text font (e.g. regular system font should be 13 points)Widget font (e.g. font of button widgets should be the
same as the system font), etc.
JCKBSE2010 in Kaunas, Lithuania 9
Guideline descriptions(2)Arrangement guidelines
– Elements for widget arrangement in a window– Examples
Label widgets (e.g. label widgets should be aligned on the right)
Control widgets (e.g. control widgets should be aligned on the left)
Label distances (e.g. distances between a label and control widget should be 8)
JCKBSE2010 in Kaunas, Lithuania 10
Source program generation
GUIs applying guidelines
GUI data transformation
GUI dataafter transformation
Source programs GUI databefore transformation
Source program analysis
Static analysis
Dynamic analysis
Our system
System architecture
JCKBSE2010 in Kaunas, Lithuania 11
User interface guidelines
Arrangement guidelines
Conditional guidelines
User interface guidelines
Arrangement guidelines
Conditional guidelines
Source programs GUI databefore transformation
Source program analysis
Static analysis
Dynamic analysis
Initial GUI analysisTo generate arranged GUIs, existing source
programs of GUIs (initial GUIs) are used– GUIs without layout arrangement– GUIs with layout arrangement based on other
guidelinesAnalyzing initial GUIs, data related to GUI
layouts are extracted and saved– Static GUI data: extracted by source program
analysis– Dynamic GUI data: extracted by partially running
initial GUIs
JCKBSE2010 in Kaunas, Lithuania 12GUI data
JCKBSE2010 in Kaunas, Lithuania 13
Source program analysisSource programs of initial GUIs are statically
analyzed– Extract static GUI data
1. Widget types2. Variable names of widgets3. Layout managers for windows and panels4. Text displayed in widgets5. Widgets arranged by each layout manager6. Initial selections and groups of radio button widgets7. Locations of each item in source programs
Static GUI data
Example of static GUI data
JCKBSE2010 in Kaunas, Lithuania 14
Type and variable name of widget: (Radio) Button companyRadio, univRadio, etc.
Text displayed on widgets:Company worker, University/Graduate student, etc.
Initial selection and group of radio button widgets:companyRadio (initial), univRadio, highRadio, vocRadio, govRadio, otherRadio
Type and variable name of widget: Label topLabel Text displayed on widget: User registration
Types and variable names of widgets: (Push) Button okBut Text displayed on widgets: OK
JCKBSE2010 in Kaunas, Lithuania 15
Partially running initial GUIs Initial GUIs are partially run
– Generate functions of partially running GUIs using static GUI data
– Add the functions to the initial GUIs– Extract dynamic GUI data
1. Size of widgets2. Coordinates of widgets3. Widget alignment, such as left or right4. Roles of label widgets, e.g. descriptions for another widgets,
descriptions for operations in a window
Dynamic GUI data
*3. and 4. are extracted by analyzing 1. and 2.
Example of dynamic GUI data
JCKBSE2010 in Kaunas, Lithuania 16
Size: Width - 200, Height - 25 Coordinates of widgets: (115, 105)
Size: Width - 200, Height - 25 Coordinates of widgets: (10, 5) Role of label widgets: window description
Widget alignment (Label): left
Widget alignment (Control): left
Source programs GUI databefore transformation
Source program analysis
Static analysis
Dynamic analysis
Source programs GUI databefore transformation
Source program analysis
Static analysis
Dynamic analysis
Source program generation
GUIs applying guidelines
Our system
System architecture
JCKBSE2010 in Kaunas, Lithuania 17
GUI data transformation
GUI dataafter transformation
User interface guidelines
Arrangement guidelines
Conditional guidelines
GUI databefore transformation
GUI data transformation
GUI dataafter transformation
User interface guidelines
Arrangement guidelines
Conditional guidelines
GUI data transformationTransform GUI data of initial GUIs based on
target guidelines
JCKBSE2010 in Kaunas, Lithuania 18
Font Before: blue color and 12 points After: black color, bold and 13 points
Alignment Before: left After: right
Example: applying Mac guideline
Widget type Before: a group of radio button widgets After: a combo box widget
Location Before: OK button is on the left of
Cancel button After: OK button is on the right of
Cancel button
Source programs GUI databefore transformation
Source program analysis
Static analysis
Dynamic analysis
Source program generation
GUIs applying guidelines
Our system
System architecture
JCKBSE2010 in Kaunas, Lithuania 19
GUI data transformation
GUI dataafter transformation
User interface guidelines
Arrangement guidelines
Conditional guidelines
GUI databefore transformation
GUI data transformation
GUI dataafter transformation
User interface guidelines
Arrangement guidelines
Conditional guidelines
GUI dataafter transformation
Source programs
Source program generation
GUIs applying guidelines
JCKBSE2010 in Kaunas, Lithuania 20
Strategies of applying guidelinesTwo types of modification:
program modification and comment addition
Applied when modification strategies are clear e.g. adjustments to font size, color and label and
control widget alignments
Program modification
Applied when modification strategies are not clear e.g. appropriate name or title should be provided to
the windows
Comment addition
Source programs of initial GUIs are modified
Suggested modifications are inserted into the source programs of the initial GUIs
Change to black color,bold and 13 points
Change toa combo box widget
Change to right alignment
Switch the location
Example of GUI generation
JCKBSE2010 in Kaunas, Lithuania 21
Evaluation (Sufficiency)(1)
JCKBSE2010 in Kaunas, Lithuania 22
Evaluate which elements of Mac guidelines are applicable in our method
Elements Modifiable Identifiable UnsatisfiedControls 47 2 50Texts 7 0 5Icons 0 2 14Pointers 0 0 3Menus 39 10 17Windows 15 15 37Layout 14 2 1
*Elements: the element classification in the guidelines Modifiable: the number of elements of "program modification" Identifiable: the number of elements of "comment addition" Unsatisfied: the number of elements that are not satisfied in our method
Evaluation (Sufficiency)(2)Two types of "Unsatisfied" elements
– Not recognizable whether the elements can be applicablee.g. Text descriptions should be easily understandable
<- Validity of meanings of text cannot be automatically confirmed
– Not applicable due to limitation of SWT packages
JCKBSE2010 in Kaunas, Lithuania 23
Elements that cannot be satisfied in current technique
All of elements that can be applied in currenttechnique were satisfied
Satisfied elements were 55%
But...
Evaluation (Applicability)Evaluate applicability of our method
– Apply Mac guidelines to 3 open source software packages (Sample 1, Sample 2 and Sample 3)
JCKBSE2010 in Kaunas, Lithuania 24
Modified IdentifiedSample 1 53 1Sample 2 46 3Sample 3 70 5
*Modified: the number of elements that source programs could be modified Identified: the number of elements that comments could be inserted to source programs
All modifications and identifications were appropriate
According to two types of evaluations, our method areconsidered as effective for arranging GUI layouts
Conclusion
JCKBSE2010 in Kaunas, Lithuania 25
Our method: automatically GUI layout arrangement based on UI guidelines
Future works– Satisfy elements that are currently unsatisfied– Arrange GUI layouts to include structures of each
window and window switching– Realize an analysis of user defined classes