- USER INTERFACE
-
To the user, the interface is the product
Registration
PROCEDURE FOR REGISTRATION
Mark the attendance register once it is
posted to the classroom.
You are recorded as LATE 5 minutes
after the scheduled start time for
classes.
3
OUR OBJECTIVES OF THE LESSON
- define the term ‘user interface
design’
- explain at least four principles of
user interface design
- differentiate between the five
primary styles of user interaction.
- list at least four design factors for
message wording in a user interface.
- design a test case for user interface
design based on the interaction with
a software prototype
4
0 DEFINITION OF THE
TERM ‘USER INTERFACE’
1
6
what is user interface?
7
What is User Interface ?
User Interface Design is describe as the
process designers use to build interfaces
in software or computerized devices,
focusing on looks or style.
It is the aim of designers of software to
create interfaces which users find easy to
use and pleasurable.
Examples of UI design includes graphical
user interfaces as well as other forms.
Why is user interface design so important?
8
Importance of User Interface
Design
A well-executed user interface facilitates effective
interaction between the user and the program by
integrating contrasting visuals, clean design and
responsiveness.
Users feel more comfortable and are able to get things
done more quickly when the designer avoids unnecessary
elements, use clear in the language on labels and in
messaging as well as creating consistency between
different areas of the program.
It helps companies reach their goals by creating
software solutions that either promotes businesses or
attract end users/customers, thereby contributing to a
product’s success.
WHAT ARE SOME DESIGN FACTORS TO CONSIDER IN ORDER TO
CREATE A SUCCESSFUL SOFTWARE PRODUCT?
9
0 USER INTERFACE
DESIGN PRINCIPLES
2
10
User Interface Design Principles
The user interface (UI) is a critical
part of any software product. When it’s
done well, users don’t even notice it.
When it’s done poorly, users can’t get
past it to efficiently use a product. To
increase the chances of success when
creating user interfaces, most designers
follow interface design principles.
Interface design principles represent
high-level concepts that are used to
guide software [Link] of the
principles are applicable to any
interactive systems — traditional GUI
environments (such as desktop and mobile
apps, websites) and non-GUI interfaces
(such as voice-based interaction
systems).
12
User interface design principles
Define these four principles as it
relates to user interface design:
➔ User Familiarity
➔ Consistency
➔ User Guidance
➔ User Diversity
13
USER
FAMILIARITY
The interface should use terms and
concepts drawn from the
experience of the people utilizing
the software product as they will
make most use of the system.
E.g. The ‘Txt Ur Grndkiz’
Application utilizes familiar object
such as a house to indicate the
homepage.
CONSISTENCY
The interface should be consistent
in that, whenever possible,
comparable operations should be
activated in the same way.
E.g. The ‘Txt Ur Grndkiz’
Application should ensure that
every page uses the same
sequence of options to go back to
USER
The interface should provide
GUIDANCE
meaningful feedback when errors
occur and provide context-
sensitive user help facilities.
E.g. The ‘Txt Ur Grndkiz’
Application has a help feature
explaining how to use some
functionalities.
USER DIVERSITY
The interface should provide
appropriate interaction facilities
for different types of system
users.
E.g. The ‘Txt Ur Grndkiz’
Application can be used by
grandparents who may have poor
vision so they need larger text
OTHER DESIGN
Minimal Surprise - Users
PRINCIPLES
should never be surprised by
the behaviour of the system
Recoverability - The interface
should include mechanisms to
allow users to recover from
errors.
0 THE PRIMARY STYLES
OF USER INTERACTION
3
19
Exploring user interface
elements
Click the link below which will take you to
the [Link] lesson activity - exploring
user interface elements.
You will follow the on screen instructions
and interact with the app to your left by
selecting run.
You will complete levels 1 to 6 and make
note of your observations based on your
interactions.
20
user interface interaction style
Describe the following user interface
interaction styles stating one
advantage and one disadvantage of
their use in the design of a user
interface:
➔ Command Language.
➔ Menu Selection.
➔ Form-Fill.
➔ Direct Manipulation.
➔ Natural Language 21
COMMAND LANGUAGE
The user issues special command in
natural language and associated
parameters to instruct the system
what to do. E.g. To delete a file, you
would type a delete command with
the filename as a parameter.
It is powerful and flexible, however,
this will only be beneficial to
experienced users as it is hard to learn
and provides poor error management.
It is applicable in command and
control systems and
working with operating systems.
FORM FILL-IN
The user fills in the fields of a form. Some
fields may have associated menus and
the form have action buttons, that when
pressed, causes some action to be
initiated. E.g. in the ‘Txt Ur Grnkdz’ App,
there is an option to fill in the grandchild
data.
It provides simple data entry, easy to
learn and is checkable. It will, however,
take up alot of screen space and causes
problems where user options do not
match the form fields.
It is applicable in stock control systems.
MENU SELECTION
The user selects commands from a list of
possibilities (a menu). The user may also
select another screen object to be
manipulated and the command operates
on that object. E.g. To delete a file you
may select the file icon that takes you to
another option to select the delete
command.
It avoids user error and little typing is
required. This style though can be too
slow for experienced users and can
become complex if there are too many
options.
It is applicable in most general purpose
DIRECT MANIPULATION
The user interacts directly with objects
on a screen. It usually involves a
pointing device that indicates the
object to be manipulated and the
action which specifies what should be
done with that object.
It provides fast and intuitive
interaction and it is easy to learn.
However it can be hard to implement
in terms of design and is only suitable
for certain tasks.
It is most applicable for Video games
and CAD systems
NATURAL LANGUAGE
The user issues a command in natural
language whether as text or speech
input, which is the front end to a
command language. The natural
language is parsed and translated to
system commands.
It is accessible to casual users and it is
easily extendable. However, it can be
very unreliable in terms of
understanding speech patterns or
requires more typing in terms of text.
It is applicable in information retrieval
systems.
0 Design Factors for
Message Wording
4
28
MESSAGE WORDING
Mistakes are unavoidable and when a user is
working on a product. This can prove to be
a frustrating experience for users if not
handled properly within the product.
Don’t blame the user, but instead, inform
them about what happened, explain why it
happened, and suggest a way forward.
“A product should be usable enough to handle
the user’s erroneous actions gracefully.”
System messages can be one of the following
types: notification, confirmation, warning,
and error. The following sections contain
guidelines that are specific to each of
these types.
30
message wording when creating
error messages
Explain the following design factors
when creating system messages in a
user interface design:
➔ Context
➔ Experience
➔ Skill level
➔ Style
➔ Culture
32
DESIGN FACTORS IN MESSAGE
WORDING
CONTEXT
Wherever possible, the messages
generated by the system should
reflect the current user context.
As far as possible, the system
should be aware of what the user
is doing and should generate
messages that are relevant to
their current activity.
DESIGN FACTORS IN MESSAGE
WORDING
EXPERIENCE
As users become familiar with the
system, they become irritated by
long “meaningful messages”.
Messages must have fewer than
120 characters.
Provision should be made for
message for new and experienced
users and allow the user to control
the message conciseness
DESIGN FACTORS IN MESSAGE
WORDING
SKILL LEVEL
Messages should be tailored to the
user’s skills as well as their
experience.
Messages for different classes of
users may be expressed in
different ways depending on
terminologies or jargons that are
familiar to the reader.
DESIGN FACTORS IN MESSAGE
WORDING
STYLE
Messages should be positive rather
than negative.
They should use the active rather
than passive mode of address.
They should never be insulting or
try to be funny.
DESIGN FACTORS IN MESSAGE
WORDING
CULTURE
Wherever possible, the designer of
the message should be familiar
with the culture where the system
is being sold for use.
A suitable message for one culture
might be unacceptable in another
culture.
0 Design a Test Case for a
User Interface Design
5 based on a Prototype
38
Testing User Interface Design
Prototypes
Students will be placed into pairs to
complete the following activity.
In each pair, one student will act as the
‘computer’ and the other as the ‘user’.
The Computers will use a copy of User
Testing (Computer) - Activity Guide
along with the User Interface Screens
and the Users will work with a copy of
User Testing (User) - Activity Guide.
First, watch and complete the questions
from the Edpuzzle, then proceed to the
next slide for the written instructions to
complete the prototype testing activity
testing user interface design
prototypes
The basic process for working in your pairs for the
activity is as follows:
❏The Computer places the home screen (the one titled
"Txt Ur Grndkds") in front of the User.
❏The User selects a task from from the table on their
activity guide.
❏The User attempts to complete the tasking by
"clicking" on the paper prototype screen in front of
them.
❏Every time the User clicks on the screen, the Computer
consults the Navigation Diagram on their activity
guide.
❏If the Navigation Diagram shows a line connected to
the element that was clicked, find the screen at the
other end of the line and place it in front of the user.
❏If the Navigation Diagram doesn't show a line
connected to the element that was clicked, do nothing.
❏When the User completes a task (or decides it is
impossible in the current prototype), they fill out the 40
"What I Tried" and "My Reaction" columns
ELABORATIO
N ACTIVITY
41
EVALUATION ACTIVITIES
From the previous activity, you will understand that User Interface Design is important
within the design phase as this is where you ensure that effective communication
medium between the user and the computer is created. Following a set of interface
design principles, will allow the identification of interface object and actions which will
lead to the creation of a screen layout that forms the basis for a user interface
prototype.
1. Explain two (2) important factors to consider when making user interface decisions.
2. Based on the previous activity, the prototype of the "Txt Ur Grndkdz" Application
utilized which user interaction style?
3. Command Line interfaces are another primary style of user interaction which
provides the means of directly instructing the system using commands or abbreviations.
Provide reasons why this may not be appropriate for the "Txt UR Grndkdz" App.
4. Blending Interaction Style is an approach that many designers use with a reliance on
their experience and intuition in an effort to choose the right combination which is
essential to providing a well designed software. Explain you think this is a better
approach using examples to aid your responses?
RECAP
ACTIVITY ✅
Let’s apply what you’ve learnt
43