Successfully reported this slideshow.

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

1

Share

Upcoming SlideShare
User Testing by Alvin Chai
User Testing by Alvin Chai
Loading in …3
×
1 of 35
1 of 35

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

1

Share

Download to read offline

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?

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?

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

Editor's Notes

  • Representation of something in image format
    In our everyday lives – play music, edit picture, send email
    mobile phones are littered with them
  • -When used correctly
  • Home button
    Search button
    Left arrow
    Toilet
  • Home button
    Search button
    Left arrow
    Toilet
  • Home button
    Search button
    Left arrow
    Toilet
  • -When incorrectly implemented
  • -Try to guess these icons
    Edit
    Filters
    Rotate and Crop
  • -Try to guess these icons
    Edit
    Filters
    Rotate and Crop
  • -Try to guess these icons
    -most will understand
    -what is the one in top right
  • -have to hover over to find out
  • -UT important before production
    -AB need traffic
    -won’t talk much about AB
  • -property App
    -looking to save a property
  • -most can’t find it
    -failed on a few elements for a good icon
  • -Should be test in context
  • -flight booking
  • -2 experiment
    -change image but not location
    -change location but not the image
  • -Should be test out of context
  • -Floppy Disc is still identifiable but not for teens
  • -should test out of context
  • -rewind 15 seconds
    -forward 15 seconds
  • -hamburger icon
    -text only has 20% increase in conversion
  • -should test out of context
  • Final summary
  • ×