COMP3511

Human Computer Interaction

INFORMATION SYSTEMS TECHNOLOGY AND MANAGEMENT

WEEK 2 - TUTORIAL 01

Title: Heuristic Evaluation, User Experience, Usability Goals and Design Principles
Outline: In this tutorial, we will spend some time introducing each other and understanding our
reasons behind choosing COMP3511. We will then be comparing well-designed and poorly-
designed interfaces based on the frameworks from Lecture 1.
 Usability Goals
The outcome/aims for designing a user interface to be as intuitive as possible
 Effective
How well does a product do what it is supposed to do and
does it help people achieve their goals

Example: Google is a search engine – its interface is minimalistic with a clear function to help
people achieve the goal of searching
 Efficiency
• Can people carry out tasks in minimal steps
• Remove unnecessary, system related tasks

Example: Beem allows you to quickly pay anyone, using a phone number (rather than bank details)
– fill in amount and description, slide to confirm and it’s done!
 Safety
• Doesn’t kill/injure
• Avoid mistakes and undo provided

Example: Facebook displays a warning to confirm whether you want to leave a page, if you have a
half-written status
 Utility
• Functions available to achieve goals
• Not too many features though and not too few

Example: Again, Beem allows 3 key functions – pay, request and split – nothing more, nothing less
 Learnability
• Easy to use and intuitive
• Doesn’t take long to become productive
• Similar tasks have similar interactions
Example: AirBnb’s layout, terminology and navigation is clear and consistent across homes,
restaurants and experiences, allowing the user to quickly become productive on the platform
 Memorability
Once you use it once, can user recall how to use it again
or do they have to relearn

Example: Can you think of one?

 Design Principles
Generalisable abstractions for thinking about different aspects of design.
These are the dos and don’ts of interaction design.
 Visibility
• Help the user understand what to do with the system
• Provide clues about how to interact (affordances)

Example: Buttons that have shadowing and are slightly raised to indicate they can be pressed on
 Feedback
How the system reacts to user input – sending
a signal back

Example: Loading signal when performing an action in the background

 Constraints
• How many different ways could an operation be
carried out
• Limit the possibilities
• Physical constraints
• Semantic constraints
• Semantic: the meaning of things
• What makes sense
• Example: natural mappings
• Cultural constraints
• Socially acceptable behaviour in one culture could differ in another culture
• People learn rules of their culture as they grow up – how to react to certain events
• Logical constraints
• Exploits people’s everyday common sense reasoning about how the world works
• Example: car seat faces forward
 Heuristics
Referred to as heuristics or general rules of thumb. They are more prescriptive than
design principles and used mainly as the basis for evaluating systems
 Visibility of the system
status
Keep the user informed and make feedback obvious and
appropriate
Keep it informative
< .1 sec – no special feedback needed
> 1 sec – provide feedback like an hourglass
> 10 sec – allow multitasking
 Match between system
and the real world
• Include familiar concepts/metaphors to audience
• Avoid system oriented jargon

Example: Icons like bins on the desktop, files reflect traditional filing etc.
 User control and freedom
Actions are not happening automatically and
exits/undo’s are obvious

Example: Random pop up ads are a very distracting and poor implementation of user control and
freedom
 Consistency and standards
• Helps user understand what they could do – building on knowledge they
have elsewhere
• Terminology/actions are consistent

Example: Most login/sign up processes are the same across different websites
 Help and Documentation
• Information is easily searched
• Provides help in series of concrete steps, easy to follow

Example: Having the little question mark boxes when filling out forms to provide more information
on what needs to be done
 Recognise, diagnose and
recover from errors
• Error messages have plain language
• They know what to do in case of error
• Error is described

Example: 404 – Not Found is not informative to the user on how they can recover
 Error Prevention
• Stop errors occurring
• Provide clear labelling/meaningful words
• Examples given

Example: Confirmation boxes and warnings are a good example of this, as well as spaced apart
actions and colour labels
 Recognition not recall
• Provide range of options rather than ask them to recall
• Make things visible so user can decide

Example: Google Maps autocompletes your search and surfaces valid results as a list
 Flexibility and efficiency
of use
• Experienced users have shortcuts or alternative paths
• Accelerators not visible to novice but available for expert

Example: Office products have lots of shortcuts to help experts perform actions quicker
 Aesthetic and minimalist
design
• Clean and clear interface

Example: Many start-up websites now have very clean interfaces, by using popular design patterns
e.g. uberEATS
 User Experience
How the system feels to the user and the emotional connection
 User Experience
Positive User Experience Goals are: Negative User Experience Goals:

● Satisfying ● Boring
● Enjoyable ● Frustrating
● Engaging ● Annoying
● Fun ● Making one feel guilty
● Provocative ● Unpleasant
● Helpful ● Patronising
● Motivating ● Offensive
● Surprising ● Gimmicky
● Pleasurable ● Childish or cutesy
● Exciting
● Entertaining
● Challenging
● Stimulating
 Determining Stakeholders
What are stakeholders?

A person with an interest or concern in something, especially a business

Primary Secondary Tertiary

Someone who
is separate
Someone who Someone who
from the
is directly is indirectly
project, but may
affected affected
experience
impacts