User-Interface Design (SQA National 5 Computing Science): Revision Note
Exam code: X816 75
User-interface design
What is a user interface?
The user interface is the part of a program that the user sees
It shows what inputs the user must enter and what outputs the program will display
A user interface can be a simple command line or a graphical, event-driven design
The purpose of UI design is to make the program clear and easy to use
Designing user interfaces
User interfaces are designed using a wireframe
A wireframe is a simple sketch showing the layout of input and output areas
Wireframes are normally drawn by hand rather than typed
Wireframes do not include code, only the structure of the screen
Inputs in a user interface
Inputs are areas where the user enters data
These must be clearly labelled so the programmer knows what the program expects
Examples of inputs include:
A text box for “hours worked”
A text box for “number of rooms”
A text box for “number of tickets”
Instructions or prompts should be included to guide the user
Outputs in a user interface
Outputs show the results the program will calculate
Outputs must match the requirements from the analysis stage
Examples of outputs include:
A label showing “your pay this week is”
A result area for “total cost”
A message recommending an option or decision
Outputs should be clearly labelled so the user understands them
Interactive elements
Some interfaces are event-driven, meaning the user clicks something to make the program run
These interactive elements must be shown in the wireframe
Examples include:
A “run” or “submit” button
A “next” or “continue” button
Buttons that trigger calculations
Evaluation of a user interface
A user interface is fit for purpose when it meets all the requirements from the analysis stage
This means:
All required inputs are present
All required outputs are present
The layout allows the user to complete the task clearly and easily
Any needed buttons or controls are included
If any input or output is missing, the UI is not fit for purpose
A good UI supports the user and makes the program easy to understand
Worked Example
A company, "QuickPrint," is developing a new application to calculate the estimated cost of custom-printed T-shirts.
Analysis requirements for the program:
Input 1: The number of T-shirts required (e.g., 50)
Input 2: The number of colours in the design (e.g., 3)
Output: The final Estimated Total Cost must be displayed
Using a design technique of your choice (such as a sketch or wireframe), design the user interface for the QuickPrint program.
The design must clearly show all necessary labels for input and the final calculated output
[3]
Answer
Input of T-shirts: A label/prompt identifying the input [1 mark]
Input of Colours: A label/prompt identifying the second input [1 mark]
Output Display: A label clearly indicating the calculated result [1 mark]
Unlock more, it's free!
Did this page help you?
