3 common web usability mistakes

Embed Size (px)

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 Comparison

Text of 3 common web usability mistakes

  • 1. 3 Common Web Usability Mistakes1 Registration Form2 Shopping Cart3 Product Comparison

2. 1 Registration forms Small text field length for middle nameNecessary to teach users how to enter address?Instructions look cluttered 3. 1 Registration formsSeparate pop-up windows to explain guidelinesor 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 usersError message does not appear beside the textfield that require rectificationError message longer than the passwordinstructions? 6. 1 Registration formsIs clicking on the banner more importantthan the [Join Flixster] button? 7. 1 Registration formsDisplaying one error message at atime 8. Good Example of Registration forms Simple, clean registration form without anyother forms of distractionClear instructions on the criteria for eachinput field 9. Good Example of Registration formsImmediate text field verification and displaythe error message 10. Good Example of Registration forms Alert users when password dont 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 Mistakes1 Registration Form2 Shopping Cart3 Product Comparison 14. 2 Shopping Cart Find the offer attractive and proceed to purchase 15. 2 Shopping CartThere 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 CartIt 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 CartAgain, 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 CartSmall page real estate for the checkout info and steps 20. 2 Shopping CartClear 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 CartUsers 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 CartOnly one call-to-action in this page 26. Good Example of Shopping CartProduct options are arranged in anorder for easy comparison(incremental prices) 27. Good Example of Shopping CartOnly one call-to-action in this pageAccessories add-ons are presented in a neat andtidy format for easy scanning despite the longscrolling page 28. Good Example of Shopping CartProvide useful recommendationswithout distracting the users fromthe 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 CartSubtle use of visual cues toindicate exclusive deals 31. Good Example of Shopping CartProvide clear pricing information 32. Good Example of Shopping CartProvide users with step-by-stepguidance throughout theshopping journey Subtle use of visual cues to reflectthe status of the shopping cart 33. Good Example of Shopping CartPrice plans are arranged in a neat tabularformat for easy comparison 34. Good Example of Shopping CartSubtle use of visual cues to reflectthe 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 Dont 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 Mistakes1 Registration Form2 Shopping Cart3 Product Comparison 38. 3 Price ComparisonProduct model names did notstand out Difficult to consume productinformation effective - No pricing Info- No [Add to Cart] button- Difficult to compare products 39. 3 Price ComparisonOverwhelmed by visual noise (redhyperlinks everywhere) The price did not stand out (samefont size as the listed price)Should indicate the availability ofitem upfront without users action 40. 3 Price ComparisonHyperlinks that look like body text Difficult to compare products Product model names did notstand out No [Add to Cart] button 41. 3 Price Comparison No [Add to Cart] buttonOverwhelmed by visual noise (textheavy)Difficult to compare productsLong scrolling page, difficult tocompare products at a glance 42. Good Example of Price Plan pageUse 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 pageUse 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 formatClear 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 contentsummarised 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