method of gui layout arrangement along with user interface guidelines junko shirogane †, takeaki...

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.


To realize, user interface guidelines are used

Consistency among software packages in the platform is required


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


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


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


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


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.


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)








Static analysis

Dynamic analysis

Our system

System architecture










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


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


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


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


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



Static analysis

Dynamic analysis



Static analysis

Dynamic analysis



Our system

System architecture







GUI databefore transformation






GUI data transformationTransform GUI data of initial GUIs based on

target guidelines


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



Static analysis

Dynamic analysis



Our system

System architecture







GUI databefore transformation







Source programs




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


Evaluation (Sufficiency)(1)


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


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)


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


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

method of gui layout arrangement along with user interface guidelines junko shirogane †, takeaki...

Documents

consistency of guis

software packages

requiredfor software

mac guidelineslabel

detailed elements

widget selection

consistent layouts

leftlabel alignment