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?

1. Mike Wong | UX Consultant
mike@netizentesting.com
Mobile UX:
Using Icons to Improve Product Usability

2. What are icons?

3. Benefits of Using Icons

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. Universal Icons

6. Universal Icons

7. Universal Icons

8. Disadvantages of Using Icons

9. Disadvantages of Using Icons
1. Difficult to remember
2. Confused users instead of helping users
3. Decrease Overall Usability of Product

10. Disadvantages of Using Icons

11. Disadvantages of Using Icons

12. Disadvantages of Using Icons

13. Disadvantages of Using Icons

14. Test Your Icons

15. How to Test
1. Usability Testing
2. A/B Testing

16. Usability Testing

17. ©2013 NetizenTesting.com

18. What went wrong?

19. What to Test?

20. 5 Key Elements to Test
1. Easy to Find
2. Identifiable
3. Easy to Comprehend
4. Necessary
5. Visually Appealing

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. 1. Easy to Find
Study by User Interface Engineering:
Source:
https://www.uie.com/brainsparks/2006/02/20/orbitz-cant-get-a-date/

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. 2. Identifiable
1. Can people identify the symbol?
2. How quickly?

25. 2. Identifiable

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. 3. Easy to Comprehend

28. 3. Easy to Comprehend
Like an item?
Or save to wish list?

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. 4. Necessary
Case study by James Foster
Variation 1:
Variation 2:
Source:
http://exisweb.net/menu-eats-hamburger

31. 5. Visually Pleasing
1. Does it look good?
2. Does it look good with the other icons
on the site?

32. 5 Key Elements to Test
1. Easy to Find
2. Identifiable
3. Easy to Comprehend
4. Necessary
5. Visually Appealing

33. Ask Me Anything

34. Thank You

35. Mike | UX Consultant
mike@netizentesting.com
Mobile UX:
Using Icons to Improve Product Usability