Pres:Basics of Ecommerce - Usability & Testing

From EcommerceWiki

Basics of Ecommerce - Usability & Testing

Basics of Ecommerce - Usability & Testing

Title Basics of Ecommerce - Usability & Testing
Target group Students, Beginners
Topics User Experience, ECommerce Basics
Go to slideshow Go to print version

Public summary

Goal of this course lesson is to learn students how a website is designed and of which phases a design process consists. The student learns different methods to reach a good website design an how to improve the design using usability testing.

The lesson is divided into 4 parts:

  • What is usability and how can it in general be improved (10 minutes)?
  • How are websites designed? The design process is briefly discussed including the development of:
    • Persona's including optional class assignment (20 - 50 minutes).
    • User stories are discussed and how they can help determine the desired functionality (5 - 15 minutes).
    • Wireframes including the standard pages of a webshop and an optional class assigment (15 - 40 minutes)
    • Web design including a few web site design trends (10 - 15 minutes).
  • The last part focusses on the different ways in which designs and websites can be tested (15 minutes).

The teacher can also chose to give a class assignment at the end where students are asked to wireframe a simple website using


  • What is conversion?
  • What is a sales funnel?
  • What is Conversion Optimization?
  • Tips & Tricks to improve conversion
  • How to increase receipt value?
Question Mark.jpg
Logo Ecommerce Foundation1.png 2

  • What is usability
  • How can usability be improved
  • How are websites designed? :
    • Persona's .
    • Wireframes
    • Web design
  • A/B & Multivariant Testing
Logo Ecommerce Foundation1.png 4

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
  • Efficiency: Once users have learned the design, how quickly can they perform tasks?
  • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  • Satisfaction: How pleasant is it to use the design?
Logo Ecommerce Foundation1.png 7


Usability is a quality attribute that assesses how easy user interfaces are to use. Usability is defined by 5 quality components:

Which website has a better usability? Google or Yahoo!

Question Mark.jpg
Logo Ecommerce Foundation1.png 9


Even when you don’t recognise the brand name, you are able to use it.


There are many other ways to create a visual design. The process above only highlights the steps discussed in this presentation.

Buyer personas are fictional representations of your ideal customers. They are based on real data about customer demographics and online behavior, along with educated speculation about their personal histories, motivations, and concerns.

Logo Ecommerce Foundation1.png Source: Source: Hubspot, A Marketer’s Template for Creating Buyer Personas 16

To better understand the (potential) buyer

  • To get new business ideas
  • To create better products
  • To create better designs
  • To create better marketing campaigns
  • To determine which features to add to a website
  • Etcetera…
Logo Ecommerce Foundation1.png 17

  • Desk research
    • CRM databases (age, gender, zip code)
    • Public databases (what do they read/drive)
  • Interviews
  • Surveys
  • Observation
  • Etcetera
Logo Ecommerce Foundation1.png 18


Buyer personas are created through research, surveys, and interviews of your target audience. That includes a mix of customers – both “good” and “bad” -- prospects, and those outside of your contact database who might align with your target audience. You’ll collect data that is both qualitative and quantitative to paint a picture of who your ideal customer is, what they value, and how your solution fits into their daily lives.

  • Select a webshop of your choice
  • Develop 2 or 3 personas
  • Present the personas in class
Class assignment2.png
Logo Ecommerce Foundation1.png 24

What can go wrong with personas?

Question Mark.jpg
Logo Ecommerce Foundation1.png 25

  • The process:
    • Interview the different personas
    • Look at competing websites
    • Look at best practices from other industries
  • The result
    • A huge pile of documentation (nobody reads)
    • User stories!
Logo Ecommerce Foundation1.png Source: 27


Epics can be detailed into users stories and prioritized into when they should be developed.

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

Example wireframe.jpg
Logo Ecommerce Foundation1.png Source: Source: 34

  • They allow focus on functionality of a web page and prevent discussion on not (yet) relevant aspects.
  • Wireframes focus on:
    • The range of functions available
    • The relative priorities of the information and functions
    • The rules for displaying certain kinds of information
    • The effect of different scenarios on the display
    • Wireframes do not focus on colors and visuals
Logo Ecommerce Foundation1.png Source: Source: 35

  • Information design is the presentation—placement and prioritization of information in a way that facilitates understanding.
  • The navigation design should communicate the relationship between the links it contains so that users understand the options they have for navigating the site.
  • User interface design includes selecting and arranging interface elements to enable users to interact with the functionality of the system. Common elements found in interface design are action buttons, text fields, check boxes, radio buttons and drop-down menus.
Logo Ecommerce Foundation1.png Source: Source: 36


Often first a low fidelity wireframe is made after which it is more detailed in a high fidelity design.

  • Visit a web shop of your choice
  • Determine up front the product you want to buy
  • Use only the navigation options (not the search option)
  • Make a screenshot of every page type and name it
  • Per page, what could be improved from a:
    • Learnability perspective
    • Efficiency perspective
    • Memorability perspective
    • Errors perspective
    • Satisfaction perspective
Class Assignment.jpg
Logo Ecommerce Foundation1.png 48

75% of web users admit making judgements about the credibility of the organization based on the design of its website.

Impact of design.jpg
Logo Ecommerce Foundation1.png Source: Source: Fogg, B.J. Standford Guidelines for Web Credibility, Persuasive Technology Lab, Stanford University 2002 50


Transforming wireframes to a webdesign is partly an art but also here rules apply. Colors for example call upon different emotions.

What are some design trends at the moment?

Logo Ecommerce Foundation1.png 56

Logo Ecommerce Foundation1.png 63

Usability testing generally involves setting a series of tasks for people to complete and noting any problems they encounter.

Logo Ecommerce Foundation1.png Source: Slideshare: Guerilla Usability Testing 64

  • Completion Rates: Are users able to complete the task?
  • Time on Task: How long does it take users to complete?
  • Page Views: How many pages does it take to complete?
  • Errors: The number and severity of errors per task?
  • Satisfaction: How does the user rate the system?
Logo Ecommerce Foundation1.png Source: Slideshare: Guerilla Usability Testing 65

  • Especially suited for the design phase:
    • Thinking aloud: Ask a user to complete a task and observe how he is doing it.
    • Eye tracking: Tracking eye movement to determine what users see.
  • Especially suited for the live phase:
    • Data analysis: Finding patterns (bottlenecks) with analytic data.
    • A/B testing: Testing to alternatives and measure which alternative has the best results.
    • Multi-variant testing: Testing multiple alternatives at the same time.
Logo Ecommerce Foundation1.png 66

A b testing.png
Logo Ecommerce Foundation1.png Source: Slideshare, Website design for ROI 67

Multivariant testing.png
Logo Ecommerce Foundation1.png Source: Slideshare, Website design for ROI 69

Multivariant testing results.png
Logo Ecommerce Foundation1.png Source: Slideshare, Website design for ROI 70

  • Develop a webshop for three products
  • Use for wireframing
  • Select a navigation structure
  • What are the call-to-actions?
Class assignment.png
Logo Ecommerce Foundation1.png 74

The End.jpg
Logo Ecommerce Foundation1.png 75