Usable websites offer great user experiences, and great user experiences lead to happy customers. My first featured article focus on the topic - 3 Common Web Usability Mistakes, and some good examples & best practices for each of them. - Registration Form - Shopping Cart - Product Comparison

1. 3 Common Web Usability Mistakes
1 Registration Form
2 Shopping Cart
3 Product Comparison

2. 1 Registration forms
Small text field length for middle name
Necessary to teach users how to enter address?
Instructions look cluttered

3. 1 Registration forms
Separate pop-up windows to explain guidelines
or tips

4. 1 Registration forms
Did not enter [Last Name]
Enter only 6 digits as password

5. 1 Registration forms
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?

6. 1 Registration forms
Is clicking on the banner more important
than the [Join Flixster] button?

7. 1 Registration forms
Displaying one error message at a
time

8. Good Example of Registration forms
Simple, clean registration form without any
other forms of distraction
Clear instructions on the criteria for each
input field

9. Good Example of Registration forms
Immediate text field verification and display
the error message

10. Good Example of Registration forms
Alert users when password don’t match

11. Good Example of Registration forms
Confirmation message when the
account is created successfully

12. Best Practices on Registration forms
• Clearly communicate an error has occurred by visual contrast
• Provide actionable remedies to correct error
• Provide feedback in context of data submitted
• Clearly communicate a data submission has been successful

13. 3 Common Web Usability Mistakes
1 Registration Form
2 Shopping Cart
3 Product Comparison

14. 2 Shopping Cart
Find the offer attractive and
proceed to purchase

15. 2 Shopping Cart
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

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

17. 2 Shopping Cart
Again, it seems like step 3 is tedious
too

18. 2 Shopping Cart
Should there be only one “Add to
cart” button to reduce confusion?

19. 2 Shopping Cart
Small page real estate for the checkout
info and steps

20. 2 Shopping Cart
Clear call-to-action

21. 2 Shopping Cart
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

22. 2 Shopping Cart
Unexpected behaviour with a pop-
up window when selecting the radio
button

23. 2 Shopping Cart
Difficult to compare price plans in a
long scrolling page

24. 2 Shopping Cart
Users do not seems to have the
option to omit certain phone
services and unsure if these services
have any additional charges

25. Good Example of Shopping Cart
Only one call-to-action in this page

26. Good Example of Shopping Cart
Product options are arranged in an
order for easy comparison
(incremental prices)

27. Good Example of Shopping Cart
Only one call-to-action in this page
Accessories add-ons are presented in a neat and
tidy format for easy scanning despite the long
scrolling page

28. Good Example of Shopping Cart
Provide useful recommendations
without distracting the users from
the main call-to-action of this page

29. Good Example of Shopping Cart
Easy to navigate and narrow down users’
selection with relevant product categories

30. Good Example of Shopping Cart
Subtle use of visual cues to
indicate exclusive deals

31. Good Example of Shopping Cart
Provide clear pricing
information

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

33. Good Example of Shopping Cart
Price plans are arranged in a neat tabular
format for easy comparison

34. Good Example of Shopping Cart
Subtle use of visual cues to reflect
the status of the shopping cart

35. Good Example of Shopping Cart
Provide clear pricing information, indicating the
one-time and monthly subscription charges in
different columns

36. Best Practices on Shopping Cart Design
• Draw user attention with size and contrasting colour
• Use whitespace to detach call to actions from other elements
• Keep the checkout interface simple
• 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

37. 3 Common Web Usability Mistakes
1 Registration Form
2 Shopping Cart
3 Product Comparison

38. 3 Price Comparison
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

39. 3 Price Comparison
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

40. 3 Price Comparison
Hyperlinks that look like body text
Difficult to compare products
Product model names did not
stand out
No [Add to Cart] button

41. 3 Price Comparison
No [Add to Cart] button
Overwhelmed by visual noise (text
heavy)
Difficult to compare products
Long scrolling page, difficult to
compare products at a glance

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

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

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

45. Good Example of Price Plan page
Pricing info stands out from Key features presented in Use of visual to communicate
the content summarised format the key differences
Clear call-to-action
(“Activate” button)

46. Best Practices on Price Plan page
• Allow users to compare
• Communicate not too much and not too little
• Communicate differences, not similarities
• Make the price stand out
• Make sure you provide an “Add to Cart” button
• Use visuals sparingly

47. Usability Evaluation conducted by
Raven Chai
Founding Principal Consultant
http://www.uxconsulting.com.sg