User Interface
Design
Welcome to the world of User Interface Design.
SR
by Saqib Riaz
Lesson Objectives
1 Learn UI Design
Discover the principles of user interface design.
2 Understand User Needs
Learn how to design interfaces that meet user needs.
3 Solve Design Issues
Identify and fix common problems in interface design.
Fun Facts about UI
First GUI
Inspired modern operating systems.
Floppy Disk Icon
A relic from the past.
Xerox Alto
Pioneered the GUI in the 1970s.
What is a User Interfac
The way a user interacts with a computer or software.
• When we design an interface we need to think about the needs of the user.
• Look at the following screen:
Is it user friendly? Would this system be easy to
use?
There are at least 10 problems with this
interface. How many can you find?
Can you think of another issue with this
interface? Don’t worry if you can’t; your teacher
will explain:
Example
Activity 1: Interface
Critique
Example
Instructions
Objectives: 1.Look at the provided interface
Identify problems in a 2.Identify at least 10 problems
3.Discuss the issues with the class
given interface.
Tips and Practise
One of the main mistakes that new programmers make is not giving the user
sufficient guidance about what is expected when inputs are required.
For example - “Please input height:” with no specification about the unit of
measure.
One solution to this problem is to have an options menu for users to select
from.
Select:
A To input height in centimetres
B To input height in metres
C To input height in feet and inches
Choose now:
The alternative is to make the instruction very clear as part of the user prompt:
“Please input your height in centimetres, e.g. 160:
Common Mistakes in UI
Issue Example Solution
Unclear Input "Enter Height:" Specify units: "Enter Height (cm)"
Confusing Navigation Hidden menus Clear menu structure with labels
Overcrowded Layout Too many buttons Space between elements for
readability
Activity 1:
Continued
Here are some inputs that a user could enter in different formats. Complete
the
table, writing in all the possible variations in format. The first one is done for
you.
Data Item Variations
Height e.g. Centimetres, Metres, Feet and inches
Weight
Date of Birth
Price or Cost
Name
Post Code
Boolean Formats
Number
Address
Can you think of anything else?
Terminology
• Lower case - small letters, no capitalisation, abc…
• Upper case - capital letters, ABC…
• Sentence case - capital letter at the beginning of the input and the rest in lowe
Lesson Summary-
Understand the
User Interface and the Needs of User
• Common errors on user interfaces:
• Spelling and grammar errors
• Images not fully visible
• Font types and sizes
• Incorrectly sized objects (such as text boxes)
• Poorly laid out headings
• Unnecessary abbreviations
• Incorrect dates in sequences
• Number columns not properly visible
• Inconsistency with numbers
• Users should be given an idea of the type of input that is expected
either through a menu to choose the preferred input format,
or by providing an e.g. in the user prompt
