GUI SPECIFICATIONS

Version <current version>

Page 1 of 7
 GUI Specifications

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>

Contents
1 Introduction 4
1.1 Purpose 4
1.2 Scope 4
1.3 References 4
2 Screen List 4

Page 2 of 7
 GUI Specifications

3 Screen Flow 4
4 Screen Details 4
4.1 Screen <Screen ID – Name> 5
4.1.1 Layout 5
4.1.2 GUI Elements 5

Page 3 of 7
 GUI Specifications

1 Introduction

1.1 Purpose

<State the purpose of this GUI specification: Normally to define Graphical User Interface
(GUI) requirements of a system including screen flow, screen layout and details, etc.>

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 List
Below is the list of screens and their associated use cases.

No Screen ID Screen Associated UCs Notes

Description
SC001 Login UC01
1.
SC001 Main menu All UCs except UC01
2.

3 Screen Flow
<Note: Draw a screen flow if the number of screens is big or there is a complex flow
between screens.>

4 Screen Details

Page 4 of 7
4.1 Screen <Screen ID – Name>

<Repeat this section for each screen>

4.1.1 Layout

<Image of screen wireframe or snapshot>

4.1.2 GUI Elements

Note: If there are any discrepancies between screenshot and GUI Elements table, follow the GUI Elements table as the correct one.
Field Name Description Control Data Default Required Rules
Type Type Value
(Y/N)
<Caption of <Include: <See <See <Include:
the element guidelines guidelines
- Meaning of the field - What function/field will be
on the below> below>
impacted if this field is enabled
screenshot - Where does the data of
or selected a value?
> this field come from?
- Validation rules: see
>
guidelines below
>

Page 5 of 7
 GUI Specifications

<Guidelines for GUI Elements table above:

Control Type:
Use one of the following control type:
- Text field: single line
- Text area: multiple lines
- Drop down: cannot type in the text box
- Combo box: allow to type in the text box
- List box
- Date Time
- Date
- Time
- Button
- Radio button
- Check box
- Hyperlink’
- Label
Note: Grid control is not listed here because each Grid Column will be presented as a single Field Name.

Data Type:
Use one of the following data type:
- String (length)
- Integer
- Decimal

Page 6 of 7
 GUI Specifications

- Date Time
- Date
- Time
- Boolean
- Enum {v1, v2, v3}

Validation Rules:
Tell all rules to validate data when leaving fields, or before saving to database, normally including the following constraints:
- Wrong data type
- Wrong data range
- Wrong data format
- Required field
- Relation between two fields (ex: Value of field A < Value of field B)
>

Page 7 of 7