Transcript
Page 1: 3 common web usability mistakes

3 Common Web Usability Mistakes

1 Registration Form

2 Shopping Cart

3 Product Comparison

Page 2: 3 common web usability mistakes

Registration forms1

Small text field length for middle name

Instructions look cluttered

Necessary to teach users how to enter address?

Page 3: 3 common web usability mistakes

Registration forms1

Separate pop-up windows to explain guidelines or tips

Page 4: 3 common web usability mistakes

Registration forms1

Did not enter [Last Name]

Enter only 6 digits as password

Page 5: 3 common web usability mistakes

Registration forms1

It seems like a software error caused by the users

Error message does not appear beside the text field that require rectification

Error message longer than the password instructions?

Page 6: 3 common web usability mistakes

Registration forms1

Is clicking on the banner more important than the [Join Flixster] button?

Page 7: 3 common web usability mistakes

Registration forms1

Displaying one error message at a time

Page 8: 3 common web usability mistakes

Good Example of Registration forms

Simple, clean registration form without any other forms of distraction

Clear instructions on the criteria for each input field

Page 9: 3 common web usability mistakes

Good Example of Registration forms

Immediate text field verification and display the error message

Page 10: 3 common web usability mistakes

Good Example of Registration forms

Alert users when password don’t match

Page 11: 3 common web usability mistakes

Good Example of Registration forms

Confirmation message when the account is created successfully

Page 12: 3 common web usability mistakes

Best Practices on Registration forms

• Clearly communicate an error has occurred by visual contrast

• Provide feedback in context of data submitted

• Provide actionable remedies to correct error

• Clearly communicate a data submission has been successful

Page 13: 3 common web usability mistakes

3 Common Web Usability Mistakes

1 Registration Form

3 Product Comparison

2 Shopping Cart

Page 14: 3 common web usability mistakes

Shopping Cart2

Find the offer attractive and proceed to purchase

Page 15: 3 common web usability mistakes

Shopping Cart2

There is no call-to-action beside the price information

Which one should the users click?

There seems to be many hyperlinks within the same page, getting confused on the focus of the page

Page 16: 3 common web usability mistakes

Shopping Cart2

It is not clear to users that step 1 has been completed

It seems like there are many small steps in between and will take a long time just to complete step 2

Page 17: 3 common web usability mistakes

Shopping Cart2

Again, it seems like step 3 is tedious too

Page 18: 3 common web usability mistakes

Shopping Cart2

Should there be only one “Add to cart” button to reduce confusion?

Page 19: 3 common web usability mistakes

Shopping Cart2

Small page real estate for the checkout info and steps

Page 20: 3 common web usability mistakes

Shopping Cart2

Clear call-to-action

Page 21: 3 common web usability mistakes

Shopping Cart2

Could have use a visual cue to indicate sold out items than just using text that are difficult to scan

Cluttered page, call-to-action of this page is not obvious

Page 22: 3 common web usability mistakes

Shopping Cart2

Unexpected behaviour with a pop-up window when selecting the radio button

Page 23: 3 common web usability mistakes

Shopping Cart2

Difficult to compare price plans in a long scrolling page

Page 24: 3 common web usability mistakes

Shopping Cart2

Users do not seems to have the option to omit certain phone services and unsure if these services have any additional charges

Page 25: 3 common web usability mistakes

Good Example of Shopping Cart

Only one call-to-action in this page

Page 26: 3 common web usability mistakes

Good Example of Shopping Cart

Product options are arranged in an order for easy comparison (incremental prices)

Page 27: 3 common web usability mistakes

Good Example of Shopping Cart

Accessories add-ons are presented in a neat and tidy format for easy scanning despite the long scrolling page

Only one call-to-action in this page

Page 28: 3 common web usability mistakes

Good Example of Shopping Cart

Provide useful recommendations without distracting the users from the main call-to-action of this page

Page 29: 3 common web usability mistakes

Good Example of Shopping Cart

Easy to navigate and narrow down users’ selection with relevant product categories

Page 30: 3 common web usability mistakes

Good Example of Shopping Cart

Subtle use of visual cues to indicate exclusive deals

Page 31: 3 common web usability mistakes

Good Example of Shopping Cart

Provide clear pricing information

Page 32: 3 common web usability mistakes

Good Example of Shopping Cart

Provide users with step-by-step guidance throughout the shopping journey

Subtle use of visual cues to reflect the status of the shopping cart

Page 33: 3 common web usability mistakes

Good Example of Shopping Cart

Price plans are arranged in a neat tabular format for easy comparison

Page 34: 3 common web usability mistakes

Good Example of Shopping Cart

Subtle use of visual cues to reflect the status of the shopping cart

Page 35: 3 common web usability mistakes

Good Example of Shopping Cart

Provide clear pricing information, indicating the one-time and monthly subscription charges in different columns

Page 36: 3 common web usability mistakes

Best Practices on Shopping Cart Design

• Draw user attention with size and contrasting colour

• Keep the checkout interface simple

• Use whitespace to detach call to actions from other elements

• Don’t take the user out of the checkout process

• Provide step-by-step guidance with progress indicators

• Provide customers with the information of what is inside the shopping cart

Page 37: 3 common web usability mistakes

3 Common Web Usability Mistakes

Shopping Cart2

3 Product Comparison

1 Registration Form

Page 38: 3 common web usability mistakes

Price Comparison3

Product model names did not stand out

Difficult to consume product information effective

- No pricing Info- No [Add to Cart] button- Difficult to compare products

Page 39: 3 common web usability mistakes

Price Comparison3

Overwhelmed by visual noise (red hyperlinks everywhere)

The price did not stand out (same font size as the listed price)

Should indicate the availability of item upfront without users’ action

Page 40: 3 common web usability mistakes

Price Comparison3

Hyperlinks that look like body text

Product model names did not stand out

No [Add to Cart] button

Difficult to compare products

Page 41: 3 common web usability mistakes

Price Comparison3

Overwhelmed by visual noise (text heavy)

No [Add to Cart] button

Long scrolling page, difficult to compare products at a glance

Difficult to compare products

Page 42: 3 common web usability mistakes

Good Example of Price Plan page

Use of visual to communicate the key differences (screen size)

Pricing info stands out from the content

Clear call-to-action (“Buy Now” button)

Page 43: 3 common web usability mistakes

Good Example of Price Plan page

Use of visual to communicate the key differences (screen size)

Product model names stands out from the content

Clear call-to-action (“Buy Now” button)

Page 44: 3 common web usability mistakes

Good Example of Price Plan page

Use of visual to communicate the key differences (colour)

Key features presented in summarised format

Clear call-to-action (“Buy Now” button)

Page 45: 3 common web usability mistakes

Good Example of Price Plan page

Pricing info stands out from the content

Key features presented in summarised format

Use of visual to communicate the key differences

Clear call-to-action (“Activate” button)

Page 46: 3 common web usability mistakes

Best Practices on Price Plan page

• Allow users to compare

• Communicate differences, not similarities

• Communicate not too much and not too little

• Make the price stand out

• Make sure you provide an “Add to Cart” button

• Use visuals sparingly

Page 47: 3 common web usability mistakes

Usability Evaluation conducted by

Raven ChaiFounding Principal Consultant

http://www.uxconsulting.com.sg