User interface design
The purpose and functional requirements generated during the analysis phase are also considered when designing a user interface.
A user interface is the part of software that the user sees and interacts with. The user interface often includes features that allow the user to input data and includes areas where the user will see on-screen output.
When designing user interfaces, it is common practice to create wireframes.
Wireframes
A wireframe is designed to provide a visual draft of how the interface could look.
A wireframe could be anything from a rough paper-based sketch to a full and detailed image. There are several online wireframe generators that make the process of creating wireframes easier.
Depending on the scale of the project, wireframes can be designed and then implemented by a programmer or by a specialist graphic designer.
Sometimes wireframes also contain notes or symbols to indicate that more information is needed or has to be considered prior to final implementation.
The purpose and functional requirements for a basic program are shown below to provide a context for the wireframe that follows.
Analysis used to inform design
Purpose
The owners of a theme park have asked that a program be developed to record the average number of visitors in a week. A user will enter the total number of visitors for each day of the week. The program should then output the average number of visitors across the week.
Functional requirements
| Inputs | Processes | Outputs |
| Daily total | Calculate average | Average |
| Inputs | Daily total |
|---|---|
| Processes | Calculate average |
| Outputs | Average |
User interface design using a wireframe
The wireframe shown above identifies the elements of the user interface that relate to the functional requirements. It is not necessary to include this information but it can make implementation clearer for the programmer.
If adding an indication of where the inputs, processes and outputs are evident, it is important to ensure that the programmer and/or graphic designer understands that the terms input, process and output and their associated arrows do not need to be implemented as part of the interface.
It is also common for a company to develop a way of indicating that there are notes that need to be considered after design and prior to implementation. An agreed legend/key for identifying areas of the wireframe where this is relevant should also be established with the programmer and/or graphic designer.
