Transcript MBA9009: Lecture 2

MBA9009
Human-computer interaction
content
Website issues
1
The Importance of Customers
• The major pressures are labeled the 3Cs
– Competition
• “fighting” on customers
• to succeed : control the 3Cs
– Customers
• customers becomes a King/Queen
• to succeed : finding and retaining customers
– Change
• EC is a new distribution channel
• to succeed : convince customers to go online and then
to choose your company over the online competitors 2
A Model of EC Consumer Behavior
• Purchasing
decision
begins
with
customer’s
reaction to
stimuli
Individual
Characteristics
Age, gender, ethnicity,
education, lift style,
psychological, knowledge,
values, personality
Environment
Characteristics
Social, family,
communities
Buyers’ Decisions
Stimuli
Marketing
Others
Price
Economical
Promotion Technology
Product
Political
Quality
Cultural
Buy or not
What to buy
Where (vendor)
When
How much to spend
Repeat purchases
Decision
Making
Process
Vendors’ controlled System
Logistic
Technical
Customer
service
Support
Payments,
Delivery
Support
Web design,
Intelligentagents
FAQ,
e-mail,
Call centers,
One-to-one
3
A Model of EC Consumer Behavior (cont.)
• Consumer Types
– Individual consumers: get much of the media attention
– Organizational buyers: do most of the shopping in cyberspace
• Purchasing Types
– Impulsive buyers: purchase products quickly
– Patient buyers: purchase products after making some comparisons
– Analytical buyers: do substantial research before making the
decision to purchase products or services
• Purchasing Experiences
– Utilitarian: shopping “to achieve a goal” or “complete a task”
4
– Hedonic: shopping because “it is fun and I love it”
Consumer Purchasing Decision-Making
(cont.)
• The Purchasing Decision-Making Model
Need identification
(Recognition)
Information search
(What? From whom?)
Alternative evaluation,
negotiation and selection
Purchase and delivery
After purchase service
and evaluation
5
Model of Internet Consumer Satisfaction
3rd Party
Seal of Approval
Logistics Support
Vendor
Reputation
Trust in
Web-shopping
Customer Service
Pricing Attractiveness
Customer
Satisfaction
Web-site Store Front
Repeat Web Purchase
(Brand Loyalty)
Security
Privacy
Transaction
Safety
System
Reliability
Speed of
Operation
Ease of
Use
Content,
Quality
Format
Timeliness
Authentication
Integrity
Non-repudiation
Reliability
Completeness 6
Keys to successful online business
• Reliability - must convince consumers
business can and will deliver
• Security - must convince consumers
transactions are secure
• Understanding the audience - will they buy
online? Does the audience have access?
• Image of the business - trust,
advertising of site, building image.
• Service and value add of trade.
7
Keys to success cont..
• Supporting technical infrastructure
• Customer fulfilment, how, when, where
will goods be delivered
• Capacity to fill orders and fill in a timely
manner.
• Customer service and after sales service
• Quality of web site and ability of
consumer to transact business.
8
Building a successful commercial
website.
Easy to use
and
Rich functionality
and
Reliable
and
Integrated
Equals
Customer
satisfaction
9
Promoting web sites
• Dozens of millions of web sites and
hundreds of millions of pages indexed.
How will users find a businesses web site?
• Range of marketing strategies:
– online
– offline
10
Online marketing strategies
Most users use search engines to find specific
sites or products, business must ensure
their site gets ‘hits’.
Search engines:
• Some search engines will automatically list
the site if the URL is sent to them.
• Other search engines rely on people to enter
information sent to them.
11
Improving search engine results
• Ensure pages are named - ie have a page
title tag.
• Customise page title for each page using
keywords that describe site/business.
• Business needs to watch and monitor hits to
the site and check listings with search
engines.
12
Links to other sites
• Related businesses can charge users of their
site for referrals that result in a sale.
Eg A site selling travel might have links to
a luggage retailer, insurance agency etc.
• Joining malls and portals also advertises
businesses.
13
Other strategies
•
•
•
•
•
Customer loyalty programs
Incentive programs
E-newsletters
Finding out who wants to link to your site
Advertising web address electronically
14
Offline strategies
•
•
•
•
Similar to other businesses
Advertising TV, print, radio
Brochures
Incentives for users shopping online eg
lower costs, discounts etc
• Press releases
15
Why good design is important
• Reasons include:
 Users likely to revisit site again if first experience
good
 Users more likely to make a transaction
 More successful transactions completed
 Users’ reactions to a site has direct impact on whether
users purchase goods from that site.
 Users make more use of site and more information
distributed if site easily navigated
 Users are more satisfied,
16
 one study found that
“Web sites which are developed using human
factors input do actually produce higher user
satisfaction levels than sites which, however
well crafted technically, have not benefited
from this kind of input.”
17
Usability
• Usability applies to all aspects of a system with
which a human might interact
• Includes installation and maintenance procedures
• Usability is not a single, one-dimensional property
of a user interface
• Usability has multiple components and is
traditionally associated with five usability
attributes.
18
Usability Attributes
1.
2.
3.
4.
5.
Learnability
Efficiency
Memorability
Errors
Satisfaction
19
Learnability:
The system should be easy to learn so that user can rapidly
start getting some work done with the system.
Efficiency:
The system should be efficient to use, so that once the user
has learned the system, a high level of productivity is
possible.
Memorability:
The system should be easy to remember, so that even the
casual user is able to return to the system after some period
of time not having used it, without having to re-learn
everything all over again.
20
Errors:
The system should have a low error rate, so that
users make few errors during the use of the system,
and so that if they do make errors they can easily
recover from them.
Satisfaction:
The system should be pleasant to use, so that users
are subjectively satisfied when using it.
21
WEB Design
• WEB based interfaces offer:
–
–
–
–
–
Familiarity, popularity is growing quickly
Portable and low maintenance interfaces
Access to a large audience
Effective use of existing infrastructure
Ease of development
• They are seen as strategic for commercial success!
22
WEB Design
• Three basic criteria:
–
Effectiveness
• Well organised, complete and accurate.
–
Affectiveness
• Captures the viewers attention by being
interesting, stimulating, and enjoyable.
–
Navigational Efficiency
• Easy to find desired information.
Material in this lecture adapted from Dave Deal from:
Conger, S.A. and Mason, R.O. Planning and Designing Effective Web Sites. Course
Technology.
23
WEB Design
Viewers:
– Surfers
• People who access and view pages.
– Users
• People with a defined interest and will act on or
make use of information found.
24
WEB Design
Three basic purposes:
– To inform
• Viewer obtains facts, learn, or understand.
• Emphasis on completeness, clarity, simplicity.
– To entertain
• Viewer wants to have fun.
• Emphasis on whimsy, surprise, action and variety.
– To enable exchange
• Viewer wants to perform a useful action.
• Emphasis on advertising, persuasion, fast access.
• Search facilities are used to assist the viewer.
25
Issues
• For effectiveness, Text must be:
• Complete or comprehensive
–
–
–
–
–
Accurate (or labelled with an accuracy level)
Easy to read
Clear
Useful to a defined audience
Concise
• Tone determines a site’s affectiveness.
26
Issues cont
Variables
– Layout
• consider placement of text and other media
• proximity, alignment, contrast and repetition
– Typography
• typefaces (fonts) and type style (italics, bold)
– Type size
– Colour
– Grouping
• location, alphabetic, time, quantity
• presenter designed categories
27
Issues cont
– Page formatting
• menus
maps
Table of Contents
Businesses
Dallas
Overview
Accommodation
Restaurants
Day Trips
Shopping
Events
Day Trips
Hotels
Dallas
Shopping
Restaurants
Events
…
• frames
Great cities
Dallas
Overview
Accommodation
Restaurants
Day Trips
Shopping
Events
Greens Tourist Guide
Dallas Texas
A city of sustained activity. Located in
the plains area of Texas, Dallas has inv
ested heavily in the development of an
enjoyable lifesstyle for its citizens….
28
An Example of a Complex Scene
29
Organization of Screen Elements
•
•
•
•
•
•
•
•
•
•
Balance
Symmetry
Regularity
Predictability
Sequentiality
Economy
Unity
Proportion
Simplicity
Groupings
Source: Dr. Xia Lin, Principles of Good Screen Design, INSYS 110 HCI -- Week 4,
College of Information Science and Technology, Drexel University
30
Balance
• Equal weight of screen elements
– Left to right, top to bottom
31
Balance
Unstable
32
Symmetry
• Replicate elements left and right of the
centre line
33
Symmetric
Asymmetric
34
Regularity
• Create standard and consistent spacing on
horizontal and vertical alignment points
35
Regular
Irregular
36
Predictability
• Put things in predictable locations on the
screen
37
Icon
File
Search for Movies
Edit
View
Insert
Enter Keywords:
Kung Foo
Window
Grasshopper
OK
Help
Old blind guy
Cancel
Predictable
OK
Icon
Kung Foo
File
Edit
Enter Keywords:
Grasshopper
View
Insert
Search for Movies
Spontaneous
Old blind guy
Window Help
Cancel
38
Predictability
• User expects title &
menu bar on top of
screen
Icon
Search for Movies
File Edit View Insert Window
Enter Keywords
Kung Foo
:
Grasshopper
OK
• Visual scene needs to
be completely
processed - objects not
in expected places
Help
Old blind guy
Cancel
OK
Icon
Kung Foo
File
Enter Keywords
Grasshopper
Edit View
Insert
Search for Movies
: Old blind guy
Window
Help
Cancel
39
Sequentiality
• Guide the eye through the task in an
obvious way
– The Eye is attracted to:
•
•
•
•
•
•
•
•
bright elements over less bright
Isolated elements over grouped
graphics before text
colour before monochrome
saturated vs. less saturated colours
dark areas before light
big vs. small elements
unusual shapes over usual ones
40
Membership Form
Name:
Address:
City:
State:
Zip:
Dues:
Pubs:
Total:
OK
Cancel
Sequential
Membership Form Cancel Name:
Address:
Dues:
Zip:
OK
Pubs:
State:
City:
Total:
Random
41
Economy
• Use as few styles, fonts, colours, display
techniques, dialog styles, etc., as possible
42
Name:
Address:
City:
State:
Zip:
Membership Form
Dues:
Pubs:
Total:
OK Cancel
Economical
Name:
Address:
City:
State:
Zip:
Membership Form
Dues:
Pubs:
Total:
OK Cancel
Busy
43
Colour Clashes
What colour combinations
should be avoided?
44
45
It is very difficult to read red on blue, as
the colours are at opposite ends of the
spectrum and it makes hard work for the
eye and leads to eye strain.
It is also very difficult to read blue on red,
as the colours are at opposite ends of the
spectrum and it makes hard work for the
eye and leads to eye strain.
46
Difficult to read
Easy to read
Easy to read
47
Blue and green should never
be seen
Blue and green should never
be seen
48
Compare the boxes
The yellow on turquoise looks slightly muddied.
The yellow leaps off the black box, clean and bright.
These two yellows are exactly the same colour value.
Source: Jim Duncan http://www.avalon.net/~librarian/bones/mapdir.html
49
Blind me! Drive me crazy!
On a Web site, colour can be used for destructive
purposes: it can obliterate the message you want to convey
to your users; it can drive them blind and half-insane; and
worse yet, it can cause them to promptly click that Back
Button, never to return to your site.
Source: Jim Duncan http://www.avalon.net/~librarian/bones/mapdir.html
50
Blind me! Drive me crazy!
On a Web site, colour can be used for destructive
purposes: it can obliterate the message you want to convey
to your users; it can drive them blind and half-insane; and
worse yet, it can cause them to promptly click that Back
Button, never to return to your site.
Source: Jim Duncan http://www.avalon.net/~librarian/bones/mapdir.html
51
By putting bright colours next
to each other, you can create
some really nasty effects.
Mix them and you
eliminate what
potential value they
might have had to
enliven or brighten
your topic.
Source: Jim Duncan http://www.avalon.net/~librarian/bones/mapdir.html
52
Unity
• Make items appear as a unified whole (for
visual coherence)
– Use similar shapes, sizes, or colours
– Leave less space between screen elements than
at the margin of the screen
53
Unity
Fragmentation
54
Proportion
• Create groupings of data or text by using
aesthetically pleasing proportions
55
Pleasing Proportions
Square - 1:1
Square Root of 2 - 1:1.414 Golden Triangle - 1:1.618
Square Root of 3 - 1:1.732
Double Square - 1:2
56
Name:
Address:
City:
State:
Zip:
Membership Form
Dues:
Pubs:
Total:
OK Cancel
Simple
Name:
Address:
City:
State:
Zip:
Membership Form
Dues:
Pubs:
Total:
OK
Cancel
Complex
57