ECommerce CMM503 Lecture 10

1
E-CommerceCMM503 Lecture 10

• Stuart Watt
• S.N.K.Watt_at_rgu.ac.uk
• Room C2

2
Summary 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

3
Part 1

• Basic interface design for e-Commerce sites

4
1. 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

5
1.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

6
1.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

7
1.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!

8
1.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!

9
1.5 Storyboarding an interface design
10
1.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

11
1.7 Form-filling manipulation of pizzas
12
2. 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.

13
2.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

14
Example a grid layout
15
2.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

16
2.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

17
Complicated and simpler designs
18
2.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

19
2.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

20
3. 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

21
3.1 Graphic design colour

• Using sparingly in interfaces
• Beware red and green buttons

22
3.1.1 Red, green, and blue (RGB)
23
3.1.2 Hue, saturation, and luminance
24
3.1.3 The colour wheel
25
3.1.4 An achromatic web design
26
3.1.5 A monochromatic web design
27
3.1.6 A colour web design
28
3.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

29
3.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

30
3.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

31
3.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

32
3.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!

33
3.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")

34
Part 2

• Evaluation

35
4. 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?

36
4.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

37
4.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

38
4.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?

39
4.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

40
4.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

41
4.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

42
4.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.

43
4.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.

44
5. 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

45
5.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

46
6. 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.

47
6.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

48
6.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

49
6.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

50
7. 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