3 common web usability mistakes
DESCRIPTION
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 ComparisonTRANSCRIPT
3 Common Web Usability Mistakes
1 Registration Form
2 Shopping Cart
3 Product Comparison
Registration forms1
Small text field length for middle name
Instructions look cluttered
Necessary to teach users how to enter address?
Registration forms1
Separate pop-up windows to explain guidelines or tips
Registration forms1
Did not enter [Last Name]
Enter only 6 digits as password
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?
Registration forms1
Is clicking on the banner more important than the [Join Flixster] button?
Registration forms1
Displaying one error message at a time
Good Example of Registration forms
Simple, clean registration form without any other forms of distraction
Clear instructions on the criteria for each input field
Good Example of Registration forms
Immediate text field verification and display the error message
Good Example of Registration forms
Alert users when password don’t match
Good Example of Registration forms
Confirmation message when the account is created successfully
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
3 Common Web Usability Mistakes
1 Registration Form
3 Product Comparison
2 Shopping Cart
Shopping Cart2
Find the offer attractive and proceed to purchase
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
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
Shopping Cart2
Again, it seems like step 3 is tedious too
Shopping Cart2
Should there be only one “Add to cart” button to reduce confusion?
Shopping Cart2
Small page real estate for the checkout info and steps
Shopping Cart2
Clear call-to-action
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
Shopping Cart2
Unexpected behaviour with a pop-up window when selecting the radio button
Shopping Cart2
Difficult to compare price plans in a long scrolling page
Shopping Cart2
Users do not seems to have the option to omit certain phone services and unsure if these services have any additional charges
Good Example of Shopping Cart
Only one call-to-action in this page
Good Example of Shopping Cart
Product options are arranged in an order for easy comparison (incremental prices)
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
Good Example of Shopping Cart
Provide useful recommendations without distracting the users from the main call-to-action of this page
Good Example of Shopping Cart
Easy to navigate and narrow down users’ selection with relevant product categories
Good Example of Shopping Cart
Subtle use of visual cues to indicate exclusive deals
Good Example of Shopping Cart
Provide clear pricing information
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
Good Example of Shopping Cart
Price plans are arranged in a neat tabular format for easy comparison
Good Example of Shopping Cart
Subtle use of visual cues to reflect the status of the shopping cart
Good Example of Shopping Cart
Provide clear pricing information, indicating the one-time and monthly subscription charges in different columns
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
3 Common Web Usability Mistakes
Shopping Cart2
3 Product Comparison
1 Registration Form
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
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
Price Comparison3
Hyperlinks that look like body text
Product model names did not stand out
No [Add to Cart] button
Difficult to compare products
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
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)
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)
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)
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)
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
Usability Evaluation conducted by
Raven ChaiFounding Principal Consultant
http://www.uxconsulting.com.sg