User Interface Documentation
HelloWorld123
UserInterfaceDesignTemplate.docx
<Project 1>
User Interface Design
<Version>
<Date>
<Your Name>
Table of Contents
1. Introduction 1
1.1 Purpose 1
1.2 Scope 1
1.3 Reference Document 1
1.4 Terms, Abbreviations and acronyms 1
2. Graphical Interface Design 1
2.1 <Module 1> 1
2.1.1 <Screen 1> 1
2.1.2 <Screen 2> 1
2.2 <Module 2> 2
2.2.1 <Screen 3> 2
2.2.2 <Screen 4> 2
<Project 1>
User Interface Design Document Page 2
Please note : All areas of this template that include words between < > must be replaced with the appropriate specific terms. For example, replace <Project 1> with the name of your project. Text in italics is guidance and must be removed in the final document.
1. Introduction
1.1 Purpose
Give a brief description of the purpose of this document.
1.2 Scope
Define the scope of the interface design. This could include the application or modules within the application.
1.3 Reference Document
If there are any document references, including requirements documents, list them there.
1.4 Terms, Abbreviations and Acronyms
If this domain has any special terms, abbreviations or acronyms, list them here with their definitions.
2. Graphical Interface Design
Decompose your application’s UI into logical units. For large applications, this might be modules of the application. For very small programs this might simply be screens. This will be organized on the 2.x level/sections of the document. You may copy and paste as many 2.x subsections of the template as you need.
2.1 <Module 1>
Rename <Module 1> to be the logical name of this module. For each screen create a 2.x.y level of the document. You may copy and paste as many 2.x.y subsections of the template as you need.
2.1.1 <Screen 1>
Screen Name: Give a logical name for the screen.
Image: Put an image of the screen.
Internal UI functionality: Explain all relevant internal UI functionality. Include images with parts of screens if needed. For example, if the user clicks a specific button a drop-box gets populated. This example is functionality internal to the screen that is relevant to UI.
External UI functionality: Explain all relevant external UI functionality. This includes UI features that interact with application functionality outside for the screen. For example, when the user clicks a specific button another window opens.
2.1.2 <Screen 2>
Screen Name:
Image:
Internal UI functionality:
External UI functionality:
2.2 <Module 2>
2.2.1 <Screen 3>
Screen Name:
Image:
Internal UI functionality:
External UI functionality:
2.2.2 <Screen 4>
Screen Name:
Image:
Internal UI functionality:
External UI functionality:
… add here as many sections and subsections of the template as you need. Update the Table of Contents to reflect the entire content of the document.
