HCI Principles

LECTURE 2
FALL 2023
 HCI design Principles
 Visibility

 Feedback

 Affordance

 Simplicity

 Structure

 Consistency

 Tolerance
 Visibility
GOOD LABELING AND PROPER POSITIONING AID VISIBILITY.
 Visibility - Can I see it?
1. Visibility: All necessary options and materials should be readily visible to users. Hidden features can lead
to confusion and frustration.

2. Visibility in the context of UI design means making it clear what a UI element is used for.

3. Design principle: All UI elements should have good visibility.

4. Guidelines: To achieve visibility, think about the goal that will be achieved by using that
element:-
1. Are there any icons that could be used to draw the user’s attention?
2. Is there a ‘standard’ symbol for the goal?
3. Is there a single word that describes it?
 Visibility Examples
• In a UI for a software DVD player,
there is a ‘standard’ recognizable
symbol for a play button; it looks like
an arrow head pointing to the right.

• In the UI for a mobile phone, an

envelope icon shows that a message
has been received.
Examples
 Feedback
FEEDBACK LETS USERS KNOW THAT THEIR INPUT HAS BEEN RECEIVED AND
PROCESSED. THIS COULD BE A VISUAL CUE, SUCH AS A BUT TON CHANGING
COLOR WHEN PRESSED, OR AN AUDITORY CUE, SUCH AS A BEEP.
 Feedback - What it is doing now?
1. Feedback in the context of UI design means making it clear what action has
been achieved through the use of the UI element.

2. Feedback is used to say that one part of an action has finished and another
can begin.

3. Design principle: All UI elements should provide adequate feedback in

response to the user’s actions.
 Feedback - What it is doing now?
Guidelines:

Think about what information should be sent back to the user about
their interaction with the UI element.

◦ Can you give visual feedback, such as a message or an icon?

◦ Is there a single word that says that the action has been completed?

◦ Is there a ‘standard’ symbol to give the feedback?

 Feedback - What it is doing now?
◦ Can a simple sound be used to say that something has
happened? Or tactile feedback? Or a combination of
these?

◦ Various kinds of feedback are available for UI design –

audio, tactile, visual, as well as any combination of these.
Feedback Examples
 Feedback Examples
1. When I set an alarm on my mobile phone, a small picture of a bell
appears next to the time display, indicating that an alarm has been
set. (visual feedback)

2. When I press any key on the keypad of my mobile phone, a beep is

heard indicating that a key has been pressed, and I can also feel
the key being pressed. (audible and tactile feedback)

3. – When I press the Record button (labeled ‘REC’) on my video

player, the words ‘REC’ in red color appear on the display panel of
the player to indicate that the recording has started. (visual
feedback)
 Affordance
AFFORDANCE REFERS TO AN AT TRIBUTE OF AN OBJECT THAT ALLOWS PEOP LE
TO KNOW HOW TO USE IT. FOR EXAMPLE, A BUT TON ON A SCREEN AFFORDS
PUSHING, AND THEREFORE USERS KNOW THEY CAN TAP ON IT.
 Affordance - How do I use it?
Affordance in the context of UI design means making it clear how a
UI element should be used.

At a very simple level, to afford means ‘to give a clue’. The clue is of
how to interact.
 Affordance - How do i use it?
Design principle: All UI elements should have good affordance.

Guidelines: Think about how the element looks and behaves.

◦ Just as a door handle affords pulling and a mouse button affords pushing, the
element’s appearance should make it obvious how a user should interact
with it.

◦ Buttons, links, icons, and scroll bars should be designed so that it is obvious
how they should be used.
 Affordance Examples
1. In Windows OS, buttons are given a shadow which affords
pushing.
2. The underlining of links on web pages affords clicking.
 Simplicity
A SIMPLE DESIGN IS OFTEN A GOOD DESIGN. THE INTERFACE SHOULD BE
EASY TO UNDERSTAND AND USE, WITHOUT UNNECESSARY COMPLEXITY
THAT COULD CONFUSE OR FRUSTRATE THE USER.
 Simplicity - Are it simple as possible?
1. Simplicity in the context of UI design means keeping things as
simple as possible.

2. Design principle: Make simple, common tasks simple to do.

 Simplicity - Are it simple as possible?
Guidelines: To achieve simplicity, employ actions, icons, words and user interface controls that are
natural for the user.

◦ Use the user’s own language.

◦ Break complex tasks into simpler subtasks.

◦ Find out what tasks are most common for your users and make these as short and simple as
possible for the user to achieve.

Keeping things simple means spending time getting to know the user and what they find natural,
and that is sometimes in conflict with the tight schedules of modern UI design.
 Simplicity Examples
1. Since opening or saving a file in a word-
processor application are some of the
most common tasks that a user performs,
menu items (with associated buttons or
keystrokes) for ‘Open file’ and ‘Save file’
are provided in many word-processor
applications.
 Structure
THE INTERFACE SHOULD BE ORGANIZED IN A LOGICAL AND PREDICTABLE
WAY. RELATED ITEMS SHOULD BE GROUPED TOGETHER, AND DIFFERENT
SECTIONS OF THE APP SHOULD BE CLEARLY DELINEATED.
 Structure - Where am I and where can I go?
1. A UI will be more usable if it is structured in way that is meaningful and useful to
user.

2. Design principle: Structure the UI in a way that will be meaningful for the user.

3. Guidelines: Things that the user will think of as related should be clearly and
closely related and appear together in the UI, or at least they should be clearly and
closely associated.

4. The structure of the UI should reflect the user’s understanding of how the
application will help them achieve their goals.
Structure Examples
1. In the Word’s “Print” dialogue box, the
layout shows how related information is
grouped together, e.g. Printer, Page range,
Zoom and Copies.
 Consistency
CONSISTENCY IN DESIGN HELPS USERS KNOW WHAT TO EXPECT. THIS COUL D
MEAN USING THE SAME ICONS OR COLOR SCHEMES THROUGHOUT THE APP, O R
ENSURING THAT SIMILAR ACTIONS ARE PERFORMED IN THE SAME WAY.
Consistency - I think I have seen this before?

Consistency in appearance, positioning and behavior within the UI

makes a system easy to learn and remember.

Design principle: The presentation of the UI should be consistent.

Guidelines: If two UI elements are to serve the same or similar

purpose they should be made as consistent as possible.
 Consistency Examples
1. Buttons that say ‘OK’ and ‘Cancel’ on most interfaces have
the same appearance, perhaps even the same size. They
serve similar purposes in ending a user interaction, and so
should be consistent. The difference is the label ‘OK’ and
‘Cancel’, and that reflects the difference in the goal they will
achieve.

2. The menu items in the top bar of different Microsoft Office

applications are the same and function in a similar way. This
consistency across the applications helps in learnability.
 Tolerance
THE DESIGN SHOULD BE FLEXIBLE AND TOLERANT OF USER MISTAKES. FOR
EXAMPLE, IF A USER ACCIDENTALLY DELETES AN ITEM, THEY SHOULD BE ABLE
TO EASILY RECOVER IT.
 Tolerance - Error!
Tolerance refers to the ability of a UI to prevent errors if
possible, or to make them easy to recover from, if not.
 Tolerance - Error!
Design principle: The UI should be designed to reduce the number of user errors and
facilitate recovery from them.

Guidelines: For an interface to be tolerant of errors, you should think not only of the correct
ways that a user will perform a task, but also of the ways in which the user can make errors.

◦ Are there choices available to the user at a certain point in an interaction that could cause
errors? In this case make these wrong choices unavailable.

◦ Is there a message that would help a user confirm a possible wrong choice?

◦ Are there examples of good choices that you can provide?

 Tolerance - Tolerance Examples
1. To prevent the wrong choice of menu item, some items might be grayed
out. Displaying a help message if a user attempts to choose a grayed item
can solve this.

2. Some user interfaces provide examples to show the type of information

that is required. For instance, the user could be offered an example of the
format of a date that is to be entered.
 Tolerance - Tolerance Examples
Recoverability of a UI refers to how easy it is for users to recover from their
mistakes. There are two types of error recovery:

◦ Backwards error recovery: The user will be allowed to ‘undo’ the effects of the
action that caused the error so it appears as if the error had never occurred, and
the user can try again to achieve their goal.

◦ Forwards error recovery: The system accepts the error – there is no undo – but still
helps the user to accomplish their goal. The system will, typically, offer an
alternative route to the goal.
 an example of a mobile app that
follows HCI principles is WhatsApp.
 an example of a mobile app that follows HCI
principles is WhatsApp.
 Simplicity: The design of WhatsApp is simple and clean, with a focus on functionality. It’s easy
to start a chat, make a call, or send a photo.

 Consistency: WhatsApp maintains consistency in its design. The same icons are used
throughout the app, and similar tasks are performed in the same way.

 Feedback: WhatsApp provides clear feedback to user actions. For example, users can see
when their messages have been sent, delivered, and read.

 Visibility: All necessary options and materials in WhatsApp are visible and readily accessible
to users.
 an example of a mobile app that follows HCI
principles is WhatsApp.
 Tolerance: WhatsApp is flexible and tolerant of user mistakes. For example, if you delete a
chat by mistake, you can restore it from your backup.

 Affordance: In WhatsApp, every element of the interface suggests its function. For example,
the microphone icon clearly indicates the voice message function.

 Structure: WhatsApp’s interface is organized logically and predictably, with related items
grouped together.