Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Echelon Indonesia 2016 - Mobile UX: Using Icons to Improve Product Usability

1,201 views

Published on

Icons are standard elements that you will find in any mobile design today. They are visually pleasing and space saving. Therefore, many product teams are trying to use icon as a technique to fit more information into the small screen.

However, UX testing & research has shown that many users are confused with the icons used in mobile site/apps today. So how do we effectively use icons to improve the overall mobile UX, product usability and not to further annoy your users?

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Echelon Indonesia 2016 - Mobile UX: Using Icons to Improve Product Usability

  1. 1. Mike Wong | UX Consultant mike@netizentesting.com Mobile UX: Using Icons to Improve Product Usability
  2. 2. What are icons?
  3. 3. Benefits of Using Icons
  4. 4. Benefits of Using Icons 1. Visually Pleasing 2. Sized large enough to be touched 3. Save Space 4. Fast to recognized 5. No need to translate for International Users
  5. 5. Universal Icons
  6. 6. Universal Icons
  7. 7. Universal Icons
  8. 8. Disadvantages of Using Icons
  9. 9. Disadvantages of Using Icons 1. Difficult to remember 2. Confused users instead of helping users 3. Decrease Overall Usability of Product
  10. 10. Disadvantages of Using Icons
  11. 11. Disadvantages of Using Icons
  12. 12. Disadvantages of Using Icons
  13. 13. Disadvantages of Using Icons
  14. 14. Test Your Icons
  15. 15. How to Test 1. Usability Testing 2. A/B Testing
  16. 16. Usability Testing
  17. 17. ©2013 NetizenTesting.com
  18. 18. What went wrong?
  19. 19. What to Test?
  20. 20. 5 Key Elements to Test 1. Easy to Find 2. Identifiable 3. Easy to Comprehend 4. Necessary 5. Visually Appealing
  21. 21. 1. Easy to Find 1. Is it where it’s expected to be? 2. Does the icon blend with other icons? 3. Is it being overshadowed by other page elements
  22. 22. 1. Easy to Find Study by User Interface Engineering: Source: https://www.uie.com/brainsparks/2006/02/20/orbitz-cant-get-a-date/
  23. 23. 1. Easy to Find Study by User Interface Engineering: Location is more important than the icon image itself Source: https://www.uie.com/brainsparks/2006/02/20/orbitz-cant-get-a-date/
  24. 24. 2. Identifiable 1. Can people identify the symbol? 2. How quickly?
  25. 25. 2. Identifiable
  26. 26. 3. Easy to Comprehend 1. Do users know what will happen when they click? 2. Do they associate the icon with any other action?
  27. 27. 3. Easy to Comprehend
  28. 28. 3. Easy to Comprehend Like an item? Or save to wish list?
  29. 29. 4. Necessary 1. Is it the right time to use an icon? 2. Can you use text instead? 3. Is the icon actually helping your visitors?
  30. 30. 4. Necessary Case study by James Foster Variation 1: Variation 2: Source: http://exisweb.net/menu-eats-hamburger
  31. 31. 5. Visually Pleasing 1. Does it look good? 2. Does it look good with the other icons on the site?
  32. 32. 5 Key Elements to Test 1. Easy to Find 2. Identifiable 3. Easy to Comprehend 4. Necessary 5. Visually Appealing
  33. 33. Ask Me Anything
  34. 34. Thank You
  35. 35. Mike | UX Consultant mike@netizentesting.com Mobile UX: Using Icons to Improve Product Usability

×