TME3423/TMI3053/TMS3843/

TMT3683Human Computer Interaction

Semester 1, 2020/21
Unit 4: Standards & Cognitive Modellings
Part 1: Design Guidance
Topics
 Design guidance
 Design principles
 Design guidelines
 User interface standards

HCI-Sem1-2020/21 2
Design guidance
 When carrying out user interface design, specific and specialized knowledge are required
 This knowledge comes in the form of design guidance

 Design guidance is used to provide direction, help and information during the design
process
 AKA “to inform design”

 There are a few types of design guidance:

 Design principles
 Design guidelines
 User interface standards

 Design guidance are obtained from theory-based knowledge, experience and common
sense, and are contributed by researchers and practitioners

HCI-Sem1-2020/21 3
Design principles
 Design principles are abstract, high-level guides for design

 Design principles are general and can be applied across different

systems and technologies
 “An interface should be easy to navigate”

 The most common design principles are discussed in this unit

 Visibility, Feedback, Affordance, Consistency, Constraints

 There are also principles from experts:

 Schneiderman’s 8 Golden Rules
 Norman’s 7 Principles
 Nielsen’s 10 Heuristics
HCI-Sem1-2020/21 4
Design principles
 Design principle: Visibility
 Visibility is the principle of the more visible functions are, the more likely
it is that users will know about them and what to do next
 When something is out of sight (hidden/cannot be seen), it’s difficult to
know about it and use it
 It should be obvious what the function is for
 Prioritize what functions are important for the UX and their visibility
 Limited screen space
 Reduce clutter

HCI-Sem1-2020/21 5
Design principles
 Design principle: Visibility
 E.g. controls of a car
 Controls for different
operations are clearly visible
(indicators, headlights, horn,
hazard warning lights)
 What can be done by the
controls is indicated
 The relationship between the
way the controls are positioned
in the car and what they do
makes it easy for the driver to
find the appropriate control for
the task at hand

HCI-Sem1-2020/21 6
Design principles
 Design principle: Visibility
 E.g. user wants to browse a shopping site
 Can the user see how to do it?
 Are the controls for browsing the site obvious?

HCI-Sem1-2020/21 7
Design principles
 Design principle: Feedback
 The principle of making it clear to the user what action has been taken
and what has been accomplished upon the use of a control
 Providing feedback allows the user to continue with the activity
 It should be obvious when a control has been used
 Types of feedback: audio, tactile, verbal, visual, combinations of these
 Never leave the user guessing about what action they have taken and the
consequence of doing so

HCI-Sem1-2020/21 8
Design principles
 Design principle: Feedback
 E.g. watching TV
 Press the on button -> button is pressed down & bounced back, indicator light
turned from red to green, TV is then switched on to show the channel

HCI-Sem1-2020/21 9
Design principles
 Design principle: Feedback
 E.g.

Password strength indicator Spinning wheel while loading Upload progress indicator

HCI-Sem1-2020/21 10
Design principles
 Design principle: Affordance
 Affordance refers to an attribute of an object that allows users to know
how to use it
 Affordance helps to give clues on how to use it
 When objects have strong affordances, it is very clear how to use
it/interact with it
 It should be obvious how they should be used

HCI-Sem1-2020/21 11
Design principles
 Design principle: Affordance
 E.g. door handle
 Push? Pull? Turn the knob?

HCI-Sem1-2020/21 12
Design principles
 Design principle: Affordance
 E.g.

Hyperlinks
 Colour changes (not clicked
vs clicked)
 www.unimas.my Slider – move left/right

Scroll bar – move up & down

Mouse – button can be clicked

Scroll wheel can be turned
HCI-Sem1-2020/21 13
Design principles
 Design principle: Consistency
 Design interfaces to have similar operations and similar elements for
achieving similar tasks
 Uniform in appearance, placement and behaviour within the interface
 Consistent interfaces are easier to learn and use – users will have fewer
things to learn and remember, and avoid making mistakes
 Important to be consistent so that users don’t have to handle unexpected
things

HCI-Sem1-2020/21 14
Design principles
 Design principle: Consistency
 E.g. Microsoft Office Suite has the same consistent appearance for its
products – Word, Excel, PowerPoint, etc.

HCI-Sem1-2020/21 15
Design principles
 Design principle: Consistency
 E.g.

Minimize,
Mouse button functions maximize/restore down,
close buttons for Windows
& Mac OS

HCI-Sem1-2020/21 16
Design principles
 Design principle: Constraints
 Constraints are limits on the interface or interaction
 Involves restricting the kinds of user interaction at that can take place at
a given moment
 Constraints are placed to prevent user from selecting incorrect options,
reduce the chances of making mistakes, or waste user’s time in doing a
task

HCI-Sem1-2020/21 17
Design principles
 Design principle: Constraints
 E.g. menu option or buttons that are shaded gray to show unavailable or
deactivated options

HCI-Sem1-2020/21 18
Design principles
 Design principle: Constraints
 E.g. required fields in forms – prevent users from submitting incomplete
forms

HCI-Sem1-2020/21 19
Design principles
 Design principles from experts:

Schneiderman’s 8 Golden Nielsen’s 10 Heuristics Norman’s 7 Principles

Rules
• Strive for Consistency • Visibility of system status • Use both knowledge in
• Cater to Universal Usability • Match between system and world & knowledge in the
• Offer Informative feedback real world head
• Design Dialogs to yield • User control and freedom • Simplify task structures
closure • Consistency and standards • Make things visible
• Prevent Errors • Error prevention • Get the mapping right (User
• Permit easy reversal of • Recognition rather than mental model = Conceptual
actions Recall model = Designed model)
• Support internal locus of • Flexibility and efficiency of • Convert constrains into
control use advantages (Physical
• Reduce short term memory • Aesthetic and minimalist constraints, Cultural
load design constraints, Technological
• Help, diagnosis and constraints)
recovery from errors • Design for Error
• Documentation and Help • When all else fails −
Standardize

Activity: can you spot the similarities between the 3 sets of principles?
HCI-Sem1-2020/21 20
Design principles
 Example: Adobe Photoshop (a
graphics editor software) has a well-
designed UI with Nielsen’s 10
Heuristics incorporated in it
 Refer here https://
www.interaction-design.org/literatu
re/article/user-interface-design-gui
delines-10-rules-of-thumb

 Note: the article refers Nielsen’s

Heuristics as guidelines, but in this
course, Nielsen’s Heuristics are
considered principles as it is high-
level (general)

HCI-Sem1-2020/21 21
Design guidelines
 Design guidelines are recommendations on how to apply design principles
 Low-level and more specific than design principles

 Design guidelines tend to be more specific to a system, technology or

device

 Design guidelines inform how a particular principle should be

implemented in the product being designed
 “Use colour to highlight links”

 A set of guidelines is needed in order to design a cohesive and consistent

experience for the product

HCI-Sem1-2020/21 22
Design guidelines
 Two design guidelines will be discussed in this unit:
 Mobile
 Wearables

 There are also guidelines from the industry by major players

 Apple
 Google
 Microsoft

HCI-Sem1-2020/21 23
 Design guidelines
 Design guidelines for mobile
 Prioritize features
 Reduce clutter
 Make the navigation simple Further reading:
 Finger-friendly tap-targets A Comprehensive Guide To Mobile
App Design
 Consider thumb-friendly zones https://www.smashingmagazine.com
/2018/02/comprehensive-guide-to-m
 Design for interruption obile-app-design/
 Break tasks into bite-sized chunks
 Avoid using jargons
 Make the app fast and responsive
 Provide feedback on interactions

Source: https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6 HCI-Sem1-2020/21 24

Design guidelines
 Design guidelines for mobile: prioritize features
 Focus on what’s important – what is the core purpose of your app?
 Don’t have too many features
 Analyze which feature(s) are used the most and put efforts into making the
experience better

Example: Lyft
Users can see
drivers that are
nearby and the
cost up front
makes it easier
for users to order
a ride

HCI-Sem1-2020/21 25
Design guidelines
 Design guidelines for mobile: reduce clutter
 Don’t overload user with too much information – there is limited screen space
 Every added button, image, icon makes the screen complicated
 Keep content to a minimum – present only what the user need to know
 Keep interface elements to a minimum

HCI-Sem1-2020/21 26
Design guidelines
 Design guidelines for mobile: make the navigation simple
 Help users navigate and explore the app intuitively
 Use standard navigation patterns
 Basic navigation patterns:
 Hamburger menu
 Tab bar
 Floating action button
 Priority+ Pattern
 Full screen navigation
 Tips for using Navigation Patterns:
https://www.smashingmagazine.com/2017/05/basic-patterns-mobile-navigation/

HCI-Sem1-2020/21 27
Design guidelines
 Design guidelines for mobile: make the navigation simple
 Hamburger menu (also known as side drawer/navigation drawer)

HCI-Sem1-2020/21 28
Design guidelines
 Design guidelines for mobile: make the navigation simple
 Tab bar – usually contains a few destinations that are of similar
importance and require direct access from anywhere in the app

HCI-Sem1-2020/21 29
Design guidelines
 Design guidelines for mobile: make the navigation simple
 Floating action button – a circle icon “floating” above the UI

HCI-Sem1-2020/21 30
Design guidelines
 Design guidelines for mobile: make the navigation simple
 Priority+ Pattern – expose only what’s most important & hide away less important using a “more” button

HCI-Sem1-2020/21 31
Design guidelines
 Design guidelines for mobile: make the navigation simple
 Full screen navigation – users incrementally tap/swipe to reveal additional
menu options as they scroll up and down

HCI-Sem1-2020/21 32
Design guidelines
 Design guidelines for mobile: finger-friendly tap-targets
 Provide controls that measure at least 7-11mm so they can be accurately
tapped with a finger
 Make sure there is enough amount of spacing between tap targets (not too
close to each other)

HCI-Sem1-2020/21 33
Design guidelines
 Design guidelines for mobile: consider
thumb-friendly zone
 Consider the way users hold the mobile
device
 The natural thumb zone (the most
comfortable area for touch with one-
handed use) varies based on the dominant
hand and whether both hands are used
 The green zone is the best place for
navigation options and frequent interactive
actions (e.g. call-to-action buttons)
 The red zone is the best place for potential
danger options (e.g. Delete, Cancel)
 Larger devices will be more difficult for
users – they cannot easily reach the top of
the screen

Further reading: Does Your Mobile Site Pass the Thumb Zone Test?
https://www.practicalecommerce.com/mobile-site-pass-thumb-zone-test HCI-Sem1-2020/21 34
Design guidelines
 Design guidelines for mobile: design for
interruption
 Users live in a world of interruption, so it is
critical to make it easy for users to re-engage
with an app when they return to it after the
interruption
 When the interruption happens, save the current
state (context) and allow users to continue
where they left off
 Users can be frustrated when an app forgets
their current progress as soon as they close it
 Example: Twitter’s “in case you missed it”, “X
new tweets”, filled forms

HCI-Sem1-2020/21 35
Design guidelines
 Design guidelines for mobile: break tasks into bite-sized chunks
 Divide tasks that have a lot of steps and actions into a number of subtasks
 Show what is the next step
 E.g. checkout task in ecommerce app

HCI-Sem1-2020/21 36
Design guidelines
 Design guidelines for mobile: avoid using
jargons
 Use familiar words and phrases for clear
communication
 Use what you know about your users to
determine whether the words or phrases are
appropriate
 Unknown words/phrases will increase
cognitive load

HCI-Sem1-2020/21 37
Design guidelines
 Design guidelines for mobile: make the app fast and
responsive
 Loading and response time is extremely important
 Majority of users expect a page to load in 2 seconds or less
 The faster the app, the better the experience will be
 Speed is a priority when building a mobile app
 However, there will be something that takes time to process
 If it is not possible to shorten the waiting time, make the
wait pleasant
 Use progress indicators (e.g. loading spinners, percent-done
indicators)
 Offer a distraction e.g. an animated waiting indicator (something
fun or cute)

HCI-Sem1-2020/21 38
Design guidelines
 Design guidelines for mobile: provide feedback on interactions
 Feedback acknowledges users’ actions and helps users understand
the result of what they did – helps people to know what the app is
doing now
 Lack of feedback can make users question whether the app has
processed the action – eliminate this guesswork by providing
feedback
 A blank/static screen after a user does an action can make it
seem like the app is frozen (which can confuse/frustrate user)
 Feedback can be visual or tactile
 Examples:
 Progress indicators (refer previous slides)
 Highlight interactive element briefly when tapped
 Device vibration
 Messages (e.g. errors, complete, unsuccessful etc.)

HCI-Sem1-2020/21 39
Design guidelines
 Designing for wearables (computing
devices that can be worn on the body) has
a different set of challenges

 These challenges are due to:

 Smaller screen space
 Less information density
 Limited battery life
 Users who are regularly moving around

 The number of people owning wearables

will continue to increase

HCI-Sem1-2020/21 40
Design guidelines
 Design guidelines for wearables
 Design for glanceability
 Design for context
 Design lightweight interaction
 Keep it simple
 Design a clear minimalistic interface
 Minimize interruption
 Opt for more privacy
 Leverage non-visual UI
 Interaction with other devices
 Design for offline usage

HCI-Sem1-2020/21 41
Design guidelines
 Design guidelines for wearables: design for glanceability
 Display only the most critical content that the user can consume in less
than 5 seconds
 Users must be able to consume the content in a glance

HCI-Sem1-2020/21 42
Design guidelines
 Design guidelines for wearables: design for context
 Use the context to provide specific content at a glance
 Wearables are smart devices with built-in sensors that can determine the
user’s current context
 e.g. fall detection, summary of user’s movement in a day

HCI-Sem1-2020/21 43
Design guidelines
 Design guidelines for wearables: design lightweight interaction
 User interaction session should be less than 10 seconds
 Show only what is essential for a user to complete a task
 E.g. offer pre-defined responses for users to reply a text, not a text input
form (like in mobile phones)

HCI-Sem1-2020/21 44
Design guidelines
 Design guidelines for wearables: keep it simple
 Design the task in a way that user should be able to do and see just one
task at a time

Using Shazam to search for song title

While running
HCI-Sem1-2020/21 45
Design guidelines
 Design guidelines for wearables: design a clear minimalistic interface
 Everything on the screen must be simple and straightforward so that user
can see and interact while moving
 Sharp contrast to make elements easy to see and read at a glance
 Use simple Sans Serif font to make text readable
 Enough space between elements

HCI-Sem1-2020/21 46
Design guidelines
 Design guidelines for wearables: minimize interruption
 Reduce number of notifications – only the most important ones
 Make sure information in the notification is valuable – push relevant
information at the right point of time
 Allow user to customize the timing and type of notifications they want to
receive
 Notifications can be in the form of vibration or screen glow

HCI-Sem1-2020/21 47
Design guidelines
 Design guidelines for wearables: opt for more privacy
 Always opt for more privacy – wearables can display extremely personal
information (e.g. private conversations, health data)
 Display contents according to which way the device is facing
 Inward: allow more personal content to be displayed
 Outward: default to a blank screen
 For notifications: vibrate first, display second

HCI-Sem1-2020/21 48
Design guidelines
 Design guidelines for wearables: leverage non-
visual UI
 Utilize touch, sound and vibrational
communication
 Consider voice input as alternative to using text or
buttons
 Notify users with sounds and vibrations

HCI-Sem1-2020/21 49
Design guidelines
 Design guidelines for wearables: interaction
with other devices
 Integrate the wearable with existing devices
(smartphone/PC) in the user’s digital
ecosystem
 Users can sync the wearable and other devices
 E.g. smartwatch is used to collect data, then
review and analysis of the data collected is
done on a smartphone
 Apple Watch and Health data on iPhone

HCI-Sem1-2020/21 50
Design guidelines
 Design guidelines for wearables:
design for offline usage
 Wearables may and will
experience connectivity
problems
 Provide core functionalities in
offline mode
 If it is not possible, then explain
to user what is happening
 E.g. Apple Watch can’t load the
map because no Internet
connection and it informs the
user what is happening

HCI-Sem1-2020/21 51
Design guidelines
 Design guidelines from industry leaders:

Apple Human Interface Guidelines

https://developer.apple.com/design/human-interface-guidelines/

Desktop design guidelines:

https://docs.microsoft.com/en-us/windows/apps/desktop/
Universal Windows Platform Apps design guidelines:
https://docs.microsoft.com/en-us/windows/uwp/

Google Design: https://design.google/resources/

Material Design: https://material.io/design
Android design guide: https://developer.android.com/design

HCI-Sem1-2020/21 52
Design guidelines
 Design guidelines for iOS (deployed on iPhone and iPad)
 https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

HCI-Sem1-2020/21 53
User interface standards
 Standards are specific design rules set by organizations/bodies to ensure compliance
 Sometimes also called design rules

 Standards documents are official, publicly available documents that define

standards for user interface design

 Organizations/bodies that set standards:

 International
 National
 Government agencies & military
 Commerce & industry
 Project-based groups
 Independent groups

HCI-Sem1-2020/21 54
User interface standards
 Standards by international organizations/bodies are developed to reflect agreements among
national member organizations/member countries

 Standards by national organizations/bodies are developed to reflect agreements among

organizations/bodies (companies, groups, other entities) within a single country

 Standards by government agencies and military are developed for use on systems used by the
government agencies and military

 Standards by commerce and industry are style guides for products to run on specific platforms

 Standards by project-based groups are for specific projects

 Standards by independent groups are guidelines developed by groups/companies or an

independent person

HCI-Sem1-2020/21 55
User interface standards
 ISO standards for HCI
 ISO stands for International Organisation for Standardization, the organization
responsible to develop and publish international standards in many fields
 Standards for computing systems
 ISO 9241: Ergonomics of human-system interaction*
 ISO 14915: Software ergonomics for multimedia user interfaces
 ISO 20282: Ease of operations of everyday products
 There are more – refer https://www.iso.org/home.html
 ISO 9241 is the most elaborate and have multiple parts; each parts has its own
number
 E.g. ISO 9241-110:2020 Ergonomics of human-system interaction — Part 110:
Interaction principles, ISO/TR 9241-810:2020 Ergonomics of human-system
interaction — Part 810: Robotic, intelligent and autonomous systems

HCI-Sem1-2020/21 56
Design guidelines vs. principles vs. standards
 The differences:

Design principles Design guidelines UI standards

An interface should be Use colour to highlight The link colour to be

easy to navigate links used is RGB #1010D0 Web-safe fonts are fonts
that can adapt to any
Provide plain language Write large-lettered, Use 20-pt, black browser on any device.
error messages to These fonts will always be
jargon-free text in Verdana on lavender displayed properly on a
pinpoint problems and web-safe font. Use background (#e6e6fa web page, even if the
likely solutions
short sentences and Hex). Put instructions fonts are not installed on
draw users’ attention in bold. the user’s computer.
to causes and
remedies. Activity: find out
2-3 examples of
web-safe fonts
HCI-Sem1-2020/21 57
Summary

Design
Design
principles
guidance

User
Design
interface
guidelines
standards

HCI-Sem1-2020/21 58