User interface specification
A User interface specification (UI specification) is a document that captures the details of the software user interface into a written document. The specification covers all possible actions that an end user may perform and all visual, auditory and other interaction elements.[1]
Purpose
The UI specification is the main source of implementation information for how the software should work. Beyond implementation, a UI specification should consider usability, localization, and demo limits. A UI spec may also be incorporated by those within the organization responsible for marketing, graphic design, and software testing. As future designers might continue or build on top of existing work, a UI specification should consider forward compatibility constraints in order to assist the implementation team.
The UI specification can be regarded as the document that bridges the gap between the product management functions and implementation. One of the main purposes of a UI specification is to process the product requirements into a more detailed format. The level of detail and document type varies depending the needs and design practices of the organizations. The small scale prototypes might require only modest documentation with high-level details.
In general, the goal of requirement specifications are to describe what a product is capable of, whereas the UI specification details how these requirements are implemented in practice.
The process
Before UI specification is created, a lot of work is done already for defining the application and desired functionality. Usually there are requirements for the software which are basis for the use case creation and use case prioritizing. UI specification is only as good as the process by which it has been created, so lets consider the steps in the process[2]:
Use case definition
Use cases are then used as basis for drafting the UI concept (which can contain for example main views of the software, some textual explanations about the views and logical flows), there are short stories that explain how the end user starts and completes a specific task, but not about how to perform it.
The purpose of writing use cases is to enhance the UI designer understanding of the features that the product must have and of the actions that take place when the user interacts with the product.
Design draft creation
The UI design draft is done on the basis of the use case analysis. The purpose of the UI design draft is to show the design proposed, and to explain how the user interface enables the user to complete the main use cases, without going into details.
It should be as visual as possible and all the material created must be in such a format that it can be used in the final UI specification. (This is good time to conduct usability testing or expert evaluations and make changes.)
Writing the user interface specification
The UI specification is then done based on UI concept. With lightweight UI specification, the concept could be extended to contain all needed details. Usually UI concept and specifications are reviewed by the stakeholders so that all necessary details are in place.
The UI specification can be seen as an extension on the design draft, so it is a complete description that contains all details, exceptions, error cases, notifications, and so forth.
Documentation tools
The document formats and the tools may vary from PowerPoint documents, text documents, Visio files, wiki's to dedicated design tools. For using wiki's to document UI, see [3].
Structure
Having a formal structure is important - while several UI specifications are created, the readers can predict where they can find the needed information and can interpret the specifications correctly. Example structure of the UI specification may contain, but not limited to, following items:
- Change history
- Open issues
- Logical flow
- Display descriptions
- Error and exception cases
Change history
Having an informative change history helps the reader to see what, when and why something was changed. A User interface specification quite often changes while the implementation proceeds.
Open issues
Possible open issues. While there are unclear or open issues, those can be visible.
Logical flow
The logical flow can be used to give high-level view to user interface. Flow can reveal for example number of required steps to perform certain task.
Display descriptions
The display description contains the screen contents and information about available functions. The screen contents may be for example wire-frames or emulator screen-shots.
A picture about the user interface state is good for getting an overview about the state fast. The downside is that details might change and it is laborious to redraw pictures. Having wire-frames is more recommendable than high resolution graphics since readers might become tempted to comment colors and small details even those might not reflect the final product.
Error and exception cases
There might be for example network created cases or other events which might result error indications to user.