Topic 3 Human Computer Interaction

DR AZITA BINTI ALI
FAKULTI PENDIDIKAN TEKNIKAL DAN VOKASIONAL

“Human-computer interaction is a
discipline concerned with the design,
evaluation and implementation of
interactive computing systems for human
use and with the study of major
phenomena surrounding them”
[ ACM SIGCHI Curricula for Human-
Computer Interaction [Hewett et al.,
2002, page 5] ]

 To employ people more productively
and effectively
 People costs now far outweigh
hardware and software costs
 People now expect “easy to use”
systems
 Generally they are not tolerant of
poorly designed systems
 If a product is hard to use, they will
seek other products
Business view:

Human factors view:
 Human have limitations
 Errors are costly in terms of
 Loss of time and money

 Software developers are forced to “do it all”
 Often based on intuition and experience than
on theory-based models
 Tendency to let the art of interface design
beats its usability
 Inconsistent features that do not fit into a
good user interface design criteria

 Scenario: A web site that is
 Aesthetically beautiful- tasteful, in good taste
 Technically perfect
 Wonderful content
 But users can’t find information!

 Users can only find information 42% of the
time
– Jared Spool

 62% of web shoppers give up looking for the
item they want to buy online
– Zona Research

 50% of the potential sales from a site are lost
because people cannot find the item they
are looking for
– Forrester Research

 40% of the users who do not return to a site
do so because their first visit resulted in a
negative experience
– Forrester Research

Scenario A Scenario B
Revenue Potential $100m $100m
User Experience Good Bad
Sales Lost 0% 50%
Revenue Lost $0m $50m
Actual Revenue $100m $50m
m - millions

Products with a bad
user experience
deserve to
DIE !

The goals of HCI are to develop
or improve the safety, utility
and effectiveness of systems
that include computers, often
through improving usability

Usability can simply be thought of as the
practical implementation of good HCI, but,
more formally :
Usability means easy to learn, effective to use
and providing an enjoyable experience.

 Know your users:
 Physical and cognitive abilities and special needs
 Personality and culture
 Knowledge and skills
 motivation

 Users should be involved throughout the
development of the project
 Specific usability and user experience goals
need to be identified, clearly documented
and agreed at the beginning of the project.

 Assume all users are alike
 Assume all users are like the
designer

 Interaction can be seen as a dialogue
between the computer and the user.

 Designing interactive products to support
people in their everyday and working lives
 Sharp, Rogers and Preece (2002)
 The design of spaces for human
communication and interaction
 Winograd (1997)

 Dialog: process of interaction between
agents whereby agents cooperate to resolve
conflicts and complete some task
 Human-human dialog (conversation, highly
unstructured)
 Human-computer dialog (HCI, much more
structures)
 Computer-computer dialog (topic of computer
architectures, highly structured)

 Donald Norman’s model of interaction
 Execution-Evaluation Cycle
 Norman divides interaction into:
 Execution
 User activities aimed at making the system do
something
 Evaluation
 Evaluating whether the system did actually do what
the user wanted.

 If user cannot make system do what they
want
 Eg: cannot understand how to do it, unclear
icons, unclear indication.

 If user cannot see what happened to the
system
 Eg: if system has done what they want but no
feedback is given to the users.

 Some common interaction styles:
1) Command line interface
2) Menus
3) Form
4) WIMP- windows, icons, menus, pointer
5) Query interface
6) Natural language

Command Line Interface
 user issues commands directly to the
computer
 Many different options customize
commands (expressive)
 Requires user to learn large numbers of
commands and options (not intuitive)
 Better for expert users than novices
 Command names/abbreviations should be
meaningful
 Example: the UNIX system

Menu interface:
commands organized into
logical groups (more
intuitive than command
entry)
A submenu can be used
to present further
related list of sub-
functions or options
Menu structure limits
range of options (less
expressive than command
entry)

 Form interface: presents
specific questions to which
a user must respond in
order to perform some
task
 Intuitive, since users are
led step by step through
interaction
 Not expressive, since form
allows access to only a few
specialized commands
 Requires good design and
obvious correction
facilities

WIMP interfaces are familiar as they are
the basis of most desktop-computer
operating systems
WIMP: stands for windows, icons, menus,
pointers

Windows: independent
containers for particular
processes and applications
Icons: small pictures that
provide a metaphor for
particular idea or process
Menus: defined previously

Pointers: mechanism for pointing at
a feature of interest and accessing
some function related to that
feature
Groups of windows in the WIMP
interface are often organized
according to the desktop metaphor
 Suggesting a likeness between
objects in the user interface and in
an office desktop (more intuitive

 Metaphor: In human language, a word or
phrase denoting on idea or object in place of
another, in order to make figurative
comparison (“a sea of troubles”)
 More generally “a pervasive mode of
understanding by which we project patterns
from one domain of experience in order to
structure another domain of a different
kind” (Johnson 1987)
 A metaphor is therefore like a model

 Example:
I. Rollercoaster of emotions - A rollercoaster of
emotions doesn't exist anywhere, so when
people are on a rollercoaster of emotions,
they are simply experiencing lots of ups and
downs.
II. Broken heart - Your heart is not literally
broken into pieces; you just feel hurt and sad.

 Question/answer
interfaces
 user led through
interaction via
series of questions
 suitable for novice
users but
restricted
functionality
 often used in
information
systems

 Query languages (e.g. SQL)
 used to retrieve information from database
 requires understanding of database structure
and language syntax, hence requires some
expertise

 Most humans use natural language to
communicate with one another.
 Problems
 external noise
 ungrammatical constructions
 uniqueness of speaker voice
 Different accents, dialects, slang etc

 Buttons are individual and
isolated regions within a
display that can be selected
to invoke an action
 Special kinds
 radio buttons
– set of mutually
exclusive choices
 check boxes
– set of non-exclusive
 stand alone-on/off

UI development process:
 User profiling
 Usability goals
 Task analysis and understanding the process
 Prototyping
 Evaluation
 programming

 User interface: the structures and
mechanisms that mediate the dialog between
a computer and a human user
 Computer-computer dialogs may have interfaces
(e.g. object-oriented interfaces)
 A balance of two key features is needed for
an effective user interface
 Expressive: ability to achieve specific tasks
efficiently
 Intuitive: ease of use, degree of effort required
to learn

 Don Norman (1988) The Design of Everyday
Things is a classic text on what intuitive
actually means
 Visibility: extent to which features of an
interface a prominent and easy to interpret
 Affordances: properties of an object that
facilitate some action: “button is for pressing”
 Good Mappings: similar to metaphors, where
properties and affordances conform to “natural”
 Feedback: sending information back to a user
about the results of their actions and the state of
the system.

Some of the buttons on a
this remote control are
easy to understand, but
others are
unfathomable without the
instruction manual.

The colors of this design are a little overwhelming. The viewers eye doesn’t
really know where to go. The large block of bright orange in the
background actually pulls the viewers eye away from the page content.

The bright colors of the menu and background seem to clash. They’re far
too saturated, giving a cheap feel to the website. The overwhelming colors
pull the viewers eye away from the content. The eye should be on the
website’s offers and products, not on the useless background!

This website shows that bright colors can be done tastefully. The background,
whilst bright is subdued enough to enhance the content, rather than distract
from it. The brightest colors are in the top-center of the design, drawing in
the users eye. The bright colors are relevant to the site’s purpose, and give
life to the website’s design.

Whilst not an overly colorful website, blocks of color are used to promote the
most vital content of the website. Key text and product areas are highlighted
with color, and different (but complimentary) colors are used to differentiate
between the various products.

Neil Gaiman’s blog uses a hard to read menu font. The image menu tabs, close
kerning, close proximity between menu links, and integrate into the header
actually make the menu look like part of the header design, rather than a menu
at all. The result – a hard to navigate website!

Web-App.net takes a similarly shocking approach, bombarding you with endless
columns of text. There is very sporadic white space on this website, and
because of this content areas are not clearly defined.

KyanMedia contains a very selective amount of information, and for this
reason it’s visual elements feel nicely spaced out and focused. There is no
confusion when viewing this design, your eye knows just where to go.

MediaTemple Ventures is a very minimal design, yet it doesn’t feel
underdone. Rather, the design is elegant, and the content feels
professionally integrated. The design utilizes plenty of white space.

The background not only clashes, but overwhelms everything else going on.
The second background in the small box makes the text illegible

Much Better- note that the background doesn't clash with the
foreground, but especially look at the little box and it's
background.

Why is the top green? Why use italics for the navigation? If you
can't answer questions about the design elements on your page,
take them out and simplify them.

Keeping a complicated site
simple

Keeping a complicated site simple

Good simple
navigation
scheme,
nothing you
can't do.

 Whilst color is a great attribute to web design,
it must be used correctly.
 Colors should go together well, and be easy on
the eyes.
 Color should be used to draw attention, not just
for the sake of it
Hue: some islands… …some lakes

 A good website design should have clear,
legible typography.
 Fonts should be kept to a minimum (2-3 tops)
so as not to overwhelm your visitors.

Sans serif font
Serif font
Serif font
with serifs
highlighted
in red

 Don't use a lot of different fonts. See how
annoying this line is and how it doesn't fit in with
the rest of this page ???!?!?!?!

 Simplicity is key to great design.
 The best designs only have the content that
is vital, no useless content at all.
 Additionally white space is required for great
design, leaving a good amount of space
between the visual elements of the page in
order to give it a padded feeling.

 Relationship between controls and their
movements and the results in the world
 Why is this a poor mapping of control buttons?

Why is this a better mapping?
The control buttons are mapped
better onto the sequence of actions
of fast rewind, rewind, play and fast
forward

 Which controls go with which rings (burners)?
A B C D

 Design interfaces to have similar
operations and use similar elements for
similar tasks
 For example:
 always use ctrl key plus first initial of the
command for an operation – ctrl+C, ctrl+S,
ctrl+O
 Main benefit is consistent interfaces are
easier to learn and use

 Internal consistency refers to designing
operations to behave the same within an
application
 Difficult to achieve with complex interfaces
 External consistency refers to designing
operations, interfaces, etc., to be the
same across applications and devices
 Very rarely the case, based on different
designer’s preference

1 2 3
4 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a) phones, remote controls (b) calculators,
computer keypads

 Refers to an attribute of an object that
allows people to know how to use it
e.g. a mouse button invites pushing, a
door handle affords pulling
 Norman (1988) used the term to discuss
the design of everyday objects
 Since has been much popularised in
interaction design to discuss how to
design interface objects
e.g. scrollbars to afford moving up and
down, icons to afford clicking on

 Interfaces are virtual and do not have
affordances like physical objects
 Norman argues it does not make sense to talk
about interfaces in terms of ‘real’
affordances
 Instead interfaces are better conceptualised
as ‘perceived’ affordances
 Learned conventions of arbitrary mappings
between action and effect at the interface
 Some mappings are better than others

 Physical affordances:
How do the following physical objects afford? Are they
obvious?

 Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?

Work in group
Take a picture / print screen of one
badly designed system you can find
here in UTHM or around you
Prepare a PowerPoint slide to
explain why do you think the object
is badly designed
To be presented in the next class

Topic 3 Human Computer Interaction

More Related Content

What's hot (20)

Similar to Topic 3 Human Computer Interaction (20)

Recently uploaded (20)

Topic 3 Human Computer Interaction