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 A design notation used to plan the visual layout of an interface. Placeholders will be created for elements such as text areas, image areas, video areas and hyperlinks/navigation..
Wireframes
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.
Wireframes may be designed and then implemented by a programmer or by a specialist graphic designer. This will depend on the scale of the project.
Some wireframes contain notes or symbols to show 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. This information is not required but it can make implementation clearer for the programmer.
If indicating 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 common for a company to develop a way of indicating that notes 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 be established with the programmer and/or graphic designer.