2 Overview What is HCI design Good vs bad design Interaction design Interaction design process Goals of interaction design Design and usability practices 3 By the end of this chapter you will ID: 813597
Download The PPT/PDF document "1 Chapter 1 Introduction to Human-Comput..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
1
Chapter 1Introduction to Human-Computer Interaction
Slide22
Overview What is HCI design?
Good vs. bad design
Interaction design
Interaction design process Goals of interaction design
Design and usability practices
Slide33
By the end of this chapter, you will..Understand the difference between good and poor interaction
design.
Be able to describe what interaction design is and how it relates to human-computer interaction and other fields.
Understand what is meant by the user experience and
usability.Understand what is involved in
the process of interaction design
.
Outline the different forms of
guidance
used in interaction design.
Slide44
The design of everyday things!!
Slide55
Design Matters..Salt & Pepper Shakers
Which do you think should have the most holes?
Does it matter what the designers think?
Image from http://www.jnd.org/books.html#608 :
Slide66
Bad Design (1)Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button
People do not make same mistake for the labels and buttons on the top row. Why not?
From: www.baddesigns.com
Slide77
Bad Design (2)What is wrong with this oven ?
Slide88
Bad Design (3)What is wrong with this vending machine?
Need to
push button first to activate reader
Normally insert bill first before making selection
Contravenes well known convention
From: www.baddesigns.com
Slide99
Good and Bad DesignWhat is wrong with the Apex remote?
Why is the TiVo remote so much better designed?
Peanut shaped to fit in hand
Logical layout and color-coded, distinctive buttons
Easy to locate buttons
Tivo
Remote
Apex Remote
Slide1010
Good DesignMarble answering machine (Bishop, 1995)
Based on how everyday objects behave
Easy, intuitive and a pleasure to use
Only requires one-step actions to perform core tasks
Slide1111
What to DesignNeed to take into account:
Slide1212
Understanding users’ needsNeed to take into account what people are good and bad at
Consider
what might help people in the way they
currently do things
Think through what might provide quality user experiences
Listen to what people want
and get them
involved
Use tried and tested
user-
centered
methods
Slide1313
Activity
Consider the kinds of user, type of activity and context of use
How does navigation and finding your way from point A to point B differ?
Slide14Steve Jobs legacy : HCI Human-computer interaction (HCI) has always been at the heart of Apple design.
Jobs recognized the central role of the user as well as human-computer interaction and design in products.Steve Jobs and Apple computers, by investing in products that are enjoyable easy to use by anyone, have changed the way that user experience is perceived in both technology and computer companies. People working in the field of HCI often make a prime example of Apple products as a standard for a device that has good user experience, while also being commercially successful.Steve quotes about Design : "the design that works". "Most people make the mistake of thinking design is what it looks like. People think it's this veneer - that the designers are handed this box and told, 'Make it look good!' That's not what we think design is. It's not just what it looks like and feels like. Design is how it works," (New York Times, November 30, 2003).
14
Slide1515
What is Interaction Design?
Slide1616
Interaction DesignDesigning interactive products to support the way people
communicate and interact in their everyday and working lives
Sharp, Rogers and Preece (2007)
The design of spaces for
human communication and interaction Winograd
(1997
)
What is Interaction Design
Slide1717
Slide1818
Goals of Interaction DesignDevelop
usable products
Usability means
easy to learn,
effective to use and
provide an
enjoyable
experience
Involve
users
in the design process
Slide1919
Which kind of Interaction Design
Number of other terms used emphasizing what is being designed, e.g.,
user interface design, software design, user-centered
design, product design, web design, experience design (UX)Interaction design
is the umbrella term covering all of these aspects
fundamental to all disciplines, fields, and approaches concerned with researching and designing computer-based systems for people
Slide2020
HCI and Interaction DesignInteraction Design
Psychology/
Cognitive Science
Computer Science/ Software Engineering
Ergonomics
Engineering
Informatics
Social Sciences
Academic Disciplines
Graphic Design
Design Practices
Product Design
Artist Design
Industrial Design
Film Industry
Computer-Supported Cooperative Work (CSCW)
Human Factors Engineering (HF)
Human Computer Interaction (
HCI
)
Information Systems (IS)
Cognitive Engineering /
Cognitive Ergonomics
Interdisciplinary Fields
Slide2121
What is HCI?Human-Computer Interaction draws on the fields of computer science, psychology, cognitive science, and organizational and social sciences in order to understand how people use and experience interactive technology.
Human
/Behavioural Sciences
Interactive Systems
Computer Science
Engineering
Design
Psychology
Social Sciences
Cognitive Science
Slide2222
HCI DesignView design as a form of communication between
designers
and the users
.
Slide2323
Working in multidisciplinary teams
Different people/ ~ backgrounds
More ideas
Different perspectives
Challenge in communication and progressing forward
Slide2424
Interaction Design in BusinessIncreasing number of ID consultancies
Neilsen Norman Group:
nn
group
.com
IDEO Design &Consulting Firm
Ideo.com (Founder D. Kelley)
www.ideo.com/thinking/voice/david-kelley/
Swim Studio (
Gitta
Salomon)
www.swimstudio.com
Cooper
Cooper.com
Slide2525
What do professionals do in the ID business?interaction designers - people involved in the design of all the interactive aspects of a product
usability engineers
- people who focus on evaluating products, using usability methods and principlesweb designers
- people who develop and create the visual design of websites, such as layoutsinformation architects
- people who come up with ideas of how to plan and structure interactive productsuser experience designers (UX)
- people who do all the above but who may also carry out field studies to inform the design of products
Slide2626
What is involved in the process of ID?Discover
Identifying
needs and establishing requirements for the user experience
Design
Developing alternative designs to meet these
Building interactive
prototypes
that can be communicated and assessed
Evaluate
Evaluating what is being built throughout the process and the user experience it offers
Slide2727
Core Characteristics of Interaction DesignUsers should be involved through 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
Iteration is needed through the core activities
Slide2828
Why go to this length?Help designers:
Understand
how to design interactive products that fit with what people want, need and may desire
Appreciate that one size does not fit all
e.g., teenagers are very different to grown-upsIdentify any
incorrect assumptions
they may have about particular user groups
e.g., not all old people want or need big fonts
be aware of both
people’s
sensitivities and their
capabilities
Slide2929
Are Cultural Differences Important?5/21/1960 versus 21/5/1960?
Which should be used for international services and online forms?
Examples of websites that are reacted differently by people from different cultures?
Slide3030
Virtual Agents, Avatars, ..
Slide3131
Virtual Agents, Avatars, ..Anna IKEA Agent:
Designed to be
different for UK and US customers
What are the differences and which is which?
What should Anna’s appearance be like
for other countries,
like India, South Africa,
or China?
Slide3232
The User ExperienceHow a product behaves and is used by people in the real world
the way people feel about it
and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it“every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2003)
Cannot design a user experience, only design for a user experience
Interactive digital museum design
Slide3333
Why was the iPod user experience such a success?
Slide3434
Elements of the User Experience (UX)
Jese James Garrett jjg.net
http://uxdesign.com/assets/Elements-of-User-Experience.pdf
Slide3535
Usability GoalsEffective to use
Efficient to use
Safe to useHave good utility
Easy to learn
Easy to remember how to use
Slide3636
Effectiveness: refers to how good a product is at doing what it is supposed to do. (the expected result)Q: Is the product capable of allowing people to learn, carry out their work effectively, access the info they need, or buy the goods they want?
Efficiency
: refers to the way a product support users in carrying their common tasks with the least waste of
time and effort. (ex: online shopping, one-click option)
Q: Once users have learned how to use a product to carry out their tasks, can they sustain a high level of productivity?
Being
effective
is about doing the right things, while being
efficient
is about doing the things in the right manner
..
Example
Slide3737
Safety: involves protecting the user from dangerous conditions and undesirable situations.Q: what is the range of errors
that are possible using the product and what measures are there to permit users to recover easily from them?
Utility
: refers to the extent to which the product provides the right kind of functionality so that users can do what they need or want to do. (ex: drawing tools)
Q: Does the product provide an appropriate set of functions that will enable users to carry out all their tasks in the way they want to do them?
Slide3838
Learnability: refers to how easy a system is to learn to use.Q: is it possible for the user to work out how to use the product by exploring the interface and trying out certain actions? How hard will it be to learn the whole set of functions in this way?
Memorability
: refers to how easy a product is to remember how to use, once learned.
Q: what kinds of interface support have been provided to help users remember how to carry out tasks, especially for products and operations they use infrequently?
Slide3939
User Experience (UX) Goals satisfying
aesthetically pleasing
enjoyable
supportive of creativity engaging
challenging
pleasurable
rewarding
exciting
fun
entertaining
provocative
helpful
surprising
motivating
enhancing sociability
emotionally fulfilling
boring
annoying
frustrating
cutsey
Slide4040
Usability & UX GoalsSelecting terms to convey a person’s feelings
,
emotions, etc., can help designers understand the multifaceted nature of the user experience
How do usability goals differ from
user experience goals?Are there
trade-offs
between the two kinds of goals?
e.g. can a product be both fun and safe?
How easy is it to measure usability versus user experience goals?
Slide4141
Ex: when considering how engaging an interactive virtual agent is for an online store, one can ask:Q: How long do users interact with the virtual sales agent? Do they suspend their disbelief when typing in questions?
Ex: to consider the effect of its
appeal one can ask:
Q: What is the user’s immediate response to the agent’s appearance? Is it one of mockery, dismay, or enjoyment? Do they smile, laugh, or scoff?
Slide4242
Activity on usabilityHow long should it take and how long does it actually take to:
Using a DVD
player to play a movie?Use a DVD
recorder to pre-record two programs?Using a web browser tool to create a website?
Slide4343
Slide4444
From: http://uxfix.com
Slide4545
Slide4646
Slide4747
Slide4848
Design PrinciplesGeneralizable abstractions for thinking about different aspects of design
The do’s and don’ts of interaction design
What to provide and what not to provide at the interface
Derived from a mix of theory-based knowledge, experience and common-sense
Slide4949
Design PrinciplesVisibility: can I see it?
Affordance
: how do I use it?
Consistency: I think I have seen this before!
Feedback: what is it doing now?
Constraints
:
why can’t I do that?
Slide5050
One of the most important design principles is visibility.Is achieved by placing the controls in a highly visible location.
Designing for visibility means that just by looking, users can see the possibilities for action.
Design Principles
Visibility
Slide5151
Design Principles
Visibility
Slide5252
Design Principles
Visibility
Visibility is often violated in order to make things "look good"
Slide5353
Design Principles
Visibility
Here, more
visibility but more complexity!!
Slide5454
Design PrinciplesVisibility
How does it work?
Push a button for the floor you want? Nothing happens. Push any other button? Still nothing. What do you need to do?
Not visible!
A control panel for an elevator.
How would you make this action more visible?
…you need to insert your room card in the slot by the buttons to get the elevator to work!
make relevant parts visible
make what has to be done obvious
Slide5555
Slide5656
Design PrinciplesFeedback
Sending information back to the user about what has been done
Includes sound, highlighting, animation and combinations of these
Hover
Visual Feedback
Visual feedback when cursor hovers over a selection (light highlighting and tooltip text)
Click
Auditory and Visual Feedback
Highlighting the border and ‘click’ sound
Slide5757
Design PrinciplesFeedback
Hover
Visual Feedback
Visual feedback when cursor hovers over a selection (inverse coloring)
Click Auditory and Visual Feedback
Highlighting the border and ‘click’ sound
Slide5858
The properties of an object that limit the ways in which it can be used
Slide5959
Slide6060
Design PrinciplesConstraints
Restricting the possible actions that can be performed
Helps prevent user from selecting incorrect optionsPhysical objects can be designed to constrain things
e.g. only one way you can insert a key into a lock
Disabled field
Slide6161
Design PrinciplesConstraints
Restricting the possible actions that can be performed
Disabled options
Slide6262
Design PrinciplesNatural Mapping: Logical design elements
Where do you plug the mouse and keyboard? Top or bottom connector?
Do the color-coded icons help?
Design Problem
provides direct adjacent mapping between icon and connector
provides
color
coding to associate the connectors with the label
Proposed solutions to the problem
From: baddesigns.com
Slide6363
Design PrinciplesNatural Mapping: Logical design elements
Which control operates which burner?
Directional navigation on websites and cars.
Design Problem
Slide6464
Design PrinciplesConsistency
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
Slide6565
Design PrinciplesConsistency (When consistency breaks down)
What happens if there is more than one command starting with the same letter?
e.g. save, spelling, select, styleHave to find other initials or combinations of keys, thereby
breaking the consistency rulee.g.
ctrl+S, ctrl+Sp, ctrl+shift+L
Increases
learning burden
on user, making them more prone to
errors
Slide6666
Design PrinciplesConsistency (Internal Vs External)
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
Slide6767
Slide6868
Design PrinciplesAffordances: To give a clue
Refers to an attribute
of an object that allows people to know how to use ite.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
Slide6969
Design PrinciplesAffordances: To give a clue
Slide7070
Design PrinciplesAffordances: What does affordance have to offer ID?
Interfaces are virtual
and do not have affordances like physical objectsNorman argues it does not make sense to talk about interfaces in terms of ‘real’ affordances
Instead interfaces are better conceptualized as ‘perceived’ affordances
Learned conventions of arbitrary mappings between action and effect at the interface
Some mappings are better than others
Slide7171
Design PrinciplesAffordances: What does affordance have to offer ID?
Slide7272
Design PrinciplesAffordances: What does affordance have to offer ID?
Slide7373
Activity
Physical affordance
How do the following physical objects afford? Are they obvious?
1
2
3
4
Car Door
Slide7474
Activity
Virtual affordance
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?
1
2
4
3
Keypad on touch-screen
Slide7575
Usability PrinciplesSimilar to design principles, except more prescriptive
Used mainly as the basis
for evaluating systemsProvide a framework for
heuristic evaluation
Nielsen 2001
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Help users recognize, diagnose and recover from errors
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help and documentation
Slide7676
Key PointsInteraction design is concerned with designing interactive products to support the way people communicate and interact in their everyday and working lives
It is concerned with how to create quality user experiences
It requires taking into account a number of interdependent factors, including context of use, type of activities, cultural differences, and user groups
It is multidisciplinary, involving many inputs from wide-reaching disciplines and fields