[C LICK HERE AND TYPE P ROJECT N AME ]

GUI D ESIGN G UIDELINES

Version <current version>

Page 1 of 6
 GUI Design Guidelines

Revision History

Date Version Summary of Change Author

<dd/Mmm/ <x.y> <Section> - <Change> <First Name +
yyyy> Last Name>
12 Apr 2014 0.1 Initial version Thuy Tran
15 May 2014 0.2 Update upon review with internal team: Thuy Tran
Section 3 – Updated flow diagram #
Section 4 - Removed flow #
Section 1 – Add new rule XYZ
1 Jun 2014 0.3 Update upon review with customer: Thuy Tran
Section 2 – Change field label from A to B
Section 4 - Update flow # - step #

Distribution for Review/Approval

Name Title & Company Issue Issue Review Approval

Version Date Date Date
<First Name + <Title> - <Company> <x.y> <dd/ <dd/ <dd/
Last Name> Mmm/ Mmm/ Mmm/
yyyy> yyyy> yyyy>

Page 2 of 6
 GUI Design Guidelines

Contents
1 Introduction.....................................................................................................4
1.1 Purpose..........................................................................................................4
1.2 Scope............................................................................................................. 4
1.3 References.....................................................................................................4
2 Screen Structure............................................................................................4
2.1 Screen Structure............................................................................................4
2.2 Header........................................................................................................... 4
2.3 Footer............................................................................................................. 4
2.4 Main Menu......................................................................................................4
2.5 Working Area..................................................................................................5
3 Themes..........................................................................................................5
4 Naming Conventions......................................................................................5
5 User Assistance.............................................................................................5
6 Keyboard Access...........................................................................................5
7 Screen-Based GUI Elements..........................................................................5
7.1 Navigational Controls.....................................................................................5
7.2 Operable Controls..........................................................................................5
7.3 Text Display/Read-Only Controls...................................................................5
7.4 Selection Controls..........................................................................................6
7.5 Entry/Selection Combination Controls............................................................6
7.6 Grid................................................................................................................ 6
7.7 Scrolling Controls...........................................................................................6
7.8 Progress Controls...........................................................................................6
7.9 Warnings and Errors.......................................................................................6
7.10 Other Controls................................................................................................6

Page 3 of 6
 GUI Design Guidelines

1 Introduction
1.1 Purpose
<State the purpose of this GUI Design Guidelines:
- Define the standards and conventions that must to be conformed to when designing
the Graphical User Interface for project.
- GUI Designers, Developers and QCs will follow the guidelines during the product
development to ensure consistency of user interface also to improve the product
usability.
>

1.2 Scope
<A brief description of the scope of this document>

1.3 References
<Provide a complete list of all documents referenced somewhere in this document.
Each document should be identified by ID, Name, Published Version (optional),
Author, and Storage Location (optional)>

2 Screen Structure
2.1 Screen Structure
<Define the screen structure, e.g. header, footer, main menu, working folder, etc.>

2.2 Header
<Define the main content and its layout in the screen header. A snapshot is included for
illustration.>

2.3 Footer
<Define the main content and its layout in the screen footer. A snapshot is included for
illustration.>

2.4 Main Menu

<Define the main content and its layout in the screen main menu. A snapshot is included
for illustration.>

Page 4 of 6
 GUI Design Guidelines

2.5 Working Area

<Define the main content and its layout in the screen working area. A snapshot is included
for illustration.>

3 Themes
<Specify the themes of project user interface. In case the product runs on different kinds
of devices, each device has a separate theme>

4 Naming Conventions
<Design conventions to name GUI related files>

5 User Assistance
<This section specifies methods to assist users when using system (e.g. tool tips, context-
sensitive help, status bar message, etc.)>

6 Keyboard Access
<This section defines all the basic accessory keystrokes in the system (e.g. Tab order,
Shortcut key, Access Key, etc.>

7 Screen-Based GUI Elements

<This section describes all the appearance characteristics of a screen-based control
including Text format, Background format, Dimension, Decoration, Status, Label, Location,
etc. Each control should has an illustrative snapshot.>
7.1 Navigational Controls
<A navigation control (e.g. menu, tab, hyperlink, etc.> allows users to navigate throughout
functions of a system.>

7.2 Operable Controls

<An operable control (e.g. button, hyperlink, etc.) causes a command to be performed.>

7.3 Text Display/Read-Only Controls

<A text entry/read-only control (e.g. text box, text area, label, tooltip, balloon tips, etc.)
contains text that is exclusively entered or modified through the keyboard. It may also
contain entered text being presented for reading or display purposes only.>

Page 5 of 6
 GUI Design Guidelines

7.4 Selection Controls

<A selection control (e.g. radio button, check box, list box, checked list box, list view
control, drop-down/pop-up list box, combo box and palette, etc.) presents on the screen
all the possible alternatives, conditions, or choices that may exist for an entity, property, or
value.>

7.5 Entry/Selection Combination Controls

<An entry/selection combination control (e.g. spin box, attached combination box, and
drop-down/pop-up combination box, date picker, etc.) allows value to be keyed into or
selected from a predefined list.>

7.6 Grid
<Grid is a very important control in a Window-based or Web-based application. This
section to describe all appearance specifications as well as common functionalities of a
grid control
- Appearance: background, border, header format, text format, alignment, row height,
data display sorting, etc.
- Functionality: click to sort on header, filter on header, select row, move row, etc.>

7.7 Scrolling Controls

<A visibility control (e.g. slider, track bar, and scroll bar, etc.) allow users to select hidden
part of information and present on screen.>
7.8 Progress Controls
<A progress control (e.g. progress bar, countdown timer, etc.) to show users a process is
in progress and how many percentages have been completed, how long it remains.

7.9 Warnings and Errors

<This section specifies appearance of a warning or error message such as display mode
as in-line text or pop-up, message title format, message content format, icons, command
buttons, etc.>

7.10 Other Controls

<Encrypted inputs, etc.>

Page 6 of 6