ECommerce CMM503 Lecture 10 - PowerPoint PPT Presentation

1 / 50
About This Presentation
Title:

ECommerce CMM503 Lecture 10

Description:

An overview of graphic design and how it applies web site design ... To be delivered to 52, Festive Road, Summerhill. Next, decide who is the user: ... – PowerPoint PPT presentation

Number of Views:35
Avg rating:3.0/5.0
Slides: 51
Provided by: stuar3
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com