Title: ECommerce CMM503 Lecture 10
1E-CommerceCMM503 Lecture 10
- Stuart Watt
- S.N.K.Watt_at_rgu.ac.uk
- Room C2
2Summary of this week
- Learning outcomes
- An overview of graphic design and how it applies
web site design - A basic understanding of evaluation and its
advantages for web design - An understanding of some of the main principles
of human-computer interaction that apply to web
site design
3Part 1
- Basic interface design for e-Commerce sites
41. Usability and the web
- Web sites need to be
- Appealing to their customers, and likely to
encourage repeat business - Effective at meeting their customers needs
- Safe and easy to use
- To achieve these, youll need to use
- Graphic design
- Interaction design
- Evaluation
51.1 Task-centred design
- Assumptions
- Good interface design depends on knowing who is
going to use the system, and what for - Tasks implicitly define who the users are
- There are other approaches to design
- User-centred design
- Participatory design
- Formal methods
61.2 The process of task-centred design
- Work out who is going to use the system, and what
for - Choose representative tasks
- Look at other systems and solutions
- Represent the tasks using scenarios
- Produce storyboards for the scenarios
- Evaluate the prototype iteratively
- Build the design
- Track it
- Refine the design iteratively
71.3 Starting with a scenario
- Sally wants to order a pizza. The pizza
companys phone line is always busy so she
decides to try their web site. Because she
hasnt used the company before, she first needs
to register so they know her address and phone
number. When shes told them that, she goes to
the pizza web page, chooses the kind of pizza
base she wants, and then selects her toppings.
Finally, she presses the Order button and waits
for her pizza to be delivered!
81.4 What is a storyboard?
- Originally from the cartoon industry
- Like a comic strip
- A sequence of key frames, showing important
stages in the behaviour of a system - Key difference from cartoons computer systems
are interactive!
91.5 Storyboarding an interface design
101.6 Tools you might use for storyboarding
- Paper and pencil
- A drawing package (e.g., the one in Word)
- Microsoft PowerPoint
- Internet Explorer, Dreamweaver, etc.
- Multimedia systems (e.g., Flash, Director)
- Demonstration Storyboarding in PowerPoint
111.7 Form-filling manipulation of pizzas
122. Graphic design principles
- The Clustering Principle
- The Visibility Reflects Usefulness Principle
- The Intelligent Consistency Principle
- The Colour as a Supplement Principle
- The Reduced Clutter Principle
- These are all drawn from Chapter 3 of Lewis and
Riemans book, where they are covered in more
detail.
132.1 The Clustering Principle
- Organize the screen into visually separate
blocks of similar controls, preferably with a
title for each block. - Controls include
- Menus, dialog boxes, toolbar buttons, and
anything else the user might interact with - Examples
- The Windows desktop, PowerPoint
- Principles
- Consistency
14Example a grid layout
152.2 The Visibility Reflects Usefulness Principle
- Make frequently used controls obvious, visible,
and easy to access conversely, hide or shrink
controls that are used less often. - Examples
- Adaptive menus in Windows, hidden commands in
Word - Principles
- Visibility
162.3 The Intelligent Consistency Principle
- Use similar screens for similar functions.
- Examples
- The tabbed Options dialog in Office
applications and control panels. - The flip-side use different screens for
different functions - Examples
- Make serious error messages visually very
distinct - Principles
- Consistency
17Complicated and simpler designs
182.4 The Colour as a Supplement Principle
- Don't rely on color to carry information use it
sparingly to emphasize information provided
through other means. - Examples
- Colour button rollovers in Internet Explorer
- Principles
- Visibility
192.5 The Reduced Clutter Principle
- Dont put too much on the screen.
- Examples web forms
- Several small pages?
- One large page?
- Examples Amazon?
- Is it too complicated?
- Trade off between making things visible and
making them too cluttered - Principles
- Visibility
203. Graphic design typography
- Fonts (type faces)
- Names like Garamond, Bookman, Courier, Abadi
- Font families
- Groups of related fonts, e.g., bold, italic, etc.
- Separate from a program itself (stored in
Windows) - Non-Roman scripts and localisation are important
213.1 Graphic design colour
- Using sparingly in interfaces
- Beware red and green buttons
223.1.1 Red, green, and blue (RGB)
233.1.2 Hue, saturation, and luminance
243.1.3 The colour wheel
253.1.4 An achromatic web design
263.1.5 A monochromatic web design
273.1.6 A colour web design
283.2 Representing user objects icon design
- Icons can be illustrative or symbolic
- Resemblance icons
- These look like the object or action
- Examples
- Exemplar icons
- These look like a typical example of the object
- Examples
293.2.1 Icon design
- Symbolic icons
- These use a higher level abstraction to show
the meaning of the icon - Arbitrary icons
- These have no clear connection to the object, and
need to be learned
303.2.2 How to design an icon
- Talk to the users, and involve them throughout
- Start in black-and-white
- Start by drawing the outline in black
- Shapes guide the user more than colour
- Avoid too much detail
- Remember, icons may be drawn at different scales
- Remember, an icon isnt a picture
- Dont make them too detailed, keep them to the
spirit of what they represent
313.2.3 A visual vocabulary
- Concepts reinforced by recurring icons
- Consistency gives the user guidance on behaviour
- Icons that appear together should have a similar
style - Combining icons
- Design process
- Brainstorming
- Develop many ideas
323.3 The Lamb Model
- Use the visual vocabulary of the clients
- This promotes acceptance
- The example
- The client British Aerospace
- The system a team appraisal workbench
- The problem not particularly liked by the client
- The solution cover the interface with pictures
of aeroplanes!
333.4 Demonstration combining design components
- The JavaScript style tool
- Demonstration
-
- var theCookie document.cookie
- var theIndex theCookie.indexOf('stylesheet')
- theIndex 11
- if (theIndex ! -1)
- var theEnd theCookie.indexOf(theIndex)
- if (theEnd -1)
- theEnd theCookie.length
-
- var theStyle theCookie.substring(theIndex,
theEnd) - document.write("ltlink rel\"stylesheet\"
type\"text/css\" href\""theStyle"\"gt") -
34Part 2
354. Evaluation
- Formative
- For the designer of the system
- Summative
- For the customer of the system
- Integrative
- For neither directly intended to help embed a
system - The question why are you evaluating?
- To help improve the system?
- To demonstrate its usability?
364.1 Evaluation cognitive walkthroughs
- See Chapter 4 of Lewis and Riemans book for a
fuller description - Actually a technique for developing an interface,
not validating it - What do you need?
- A prototype of the interface
- A representative task description
- A complete list of the actions needed to complete
this task - A good understanding of the users background
374.1.1 Cognitive walkthroughs the process
- Identify the task
- Identify the actions needed to complete the task
- For each action
- Try to tell a story about why the user would
select each action in the list of correct actions - Easy way to do this ask yourself the key
questions
384.1.2 Cognitive walkthroughs the key four
questions
- Will users be trying to produce whatever effect
the action has? - Will users see the control (button, menu, switch,
etc.) for the action? - Once users find the control, will they recognize
that it produces the effect they want? - After the action is taken, will users understand
the feedback they get, so they can go on to the
next action with confidence?
394.1.3 Cognitive walkthroughsPizza With Pzazz!
- First of all, define the task
- Order a pizza (thin crust, with all the
vegetarian options) - To be delivered to 52, Festive Road, Summerhill
- Next, decide who is the user
- Very hungry, web-aware, cant get through on the
phone
404.1.4 Cognitive walkthroughs actions
- Next, work out the list of actions needed to
complete the task - Choose Register here
- Enter personal details
- Enter credit card details
- Enter login details
- Choose Order pizza
- Choose thin crust
- Choose sweetcorn, pineapple, and peppers
- Enter delivery address
- Choose Order
414.1.5 Cognitive walkthroughs an example
- Will users be trying to produce whatever effect
the action has? - A good question. Probably not. Theyd rather
have an Order pizza button - Will users see the control (button, menu, switch,
etc.) for the action? - Yes, they will. Its clear
424.1.6 Cognitive walkthroughs an example
- Once users find the control, will they recognize
that it produces the effect they want? - Again, this is a concern. The user may not know
they need to register to order a pizza.
434.1.7 Cognitive walkthroughs an example
- After the action is taken, will users understand
the feedback they get, so they can go on to the
next action with confidence? - Yes, they will. The following page will appear
immediately.
445. Some guidelines on information presentation.
- Use both lower and upper case to aid legibility
- Use normal conventions from the users domain
e.g., accountants easily recognize negative
values which are displayed in red or in brackets - Caption names should be as brief as possible but
strive for meaningful abbreviations - Position captions in a natural and consistent
relationship to their corresponding data fields
455.1 Positioning information
- Positioning text
- Avoid overcrowding allow 40 extra for
localisation - Dont split into logical groupings, use
self-contained windows - Start text consistently, usually at the top left
- Presenting text
- Use upper and lower case for readability
- USE UPPER CASE TO SHOUT!!
- Avoid right-justifying text
- Put a bit of space between lines
- Choose colour and font appropriately
466. Dealing with errors in interaction
- e.g., from Norman (1988)
- USER Remove file My-most-important-work.
- COMPUTER Are you certain you wish to remove the
file My-most-important-work? - USER Yes.
- COMPUTER Are you certain?
- USER Yes, of course.
- COMPUTER The file My-most-important-work has
been removed - USER Oops, damn.
476.1 Designing for error
- How to handle error in interfaces that you are
designing - Know the causes of error, and try to design your
interface to reduce those causes - Design your interface so the user can undo
actions, or make it harder to do actions that
cannot be reversed - Help your user find errors that they have made,
and help them to correct those errors - Dont think of a user as making errors. Think of
them as trying to do a task. Think of the errors
as approximations to the correct actions
486.2 Warnings
- These rarely work, surprisingly
- They often sound the same (e.g., RGUs fire alarm
and door alarm) - Often, they can be overridden one way or another
- When they really matter, they often all go off at
once
496.3 Forcing functions
- Physical constraints, so that failing at one
stage prevents the user from moving to the next
step - e.g., car ignition keys and door keys
- Three kinds
- Lock-ins
- Lock-outs
- Interlocks
507. Summary
- Good design makes an important contribution to
successful e-commerce - Good graphic design
- Makes the site appealing to new visitors
- Good interface design
- Makes the site effective, and likely to retain
customers - The secret?
- Get to know the customer