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

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

Post on 24-Jan-2018

564 views

Category:

Mobile

0 download

Embed Size (px)

TRANSCRIPT

  • Mike Wong | UX Consultant mike@netizentesting.com

    Mobile UX:

    Using Icons to Improve Product Usability

  • What are icons?

  • Benefits of Using Icons

  • 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

  • Universal Icons

  • Universal Icons

  • Universal Icons

  • Disadvantages of Using Icons

  • Disadvantages of Using Icons

    1. Difficult to remember

    2. Confused users instead of helping users

    3. Decrease Overall Usability of Product

  • Disadvantages of Using Icons

  • Disadvantages of Using Icons

  • Disadvantages of Using Icons

  • Disadvantages of Using Icons

  • Test Your Icons

  • How to Test

    1. Usability Testing

    2. A/B Testing

  • Usability Testing

  • 2013 NetizenTesting.com

  • What went wrong?

  • What to Test?

  • 5 Key Elements to Test

    1. Easy to Find

    2. Identifiable

    3. Easy to Comprehend

    4. Necessary

    5. Visually Appealing

  • 1. Easy to Find

    1. Is it where its expected to be?

    2. Does the icon blend with other icons?

    3. Is it being overshadowed by other page elements

  • 1. Easy to Find

    Study by User Interface Engineering:

    Source:https://www.uie.com/brainsparks/2006/02/20/orbitz-cant-get-a-date/

    https://www.uie.com/brainsparks/2006/02/20/orbitz-cant-get-a-date/

  • 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/

    https://www.uie.com/brainsparks/2006/02/20/orbitz-cant-get-a-date/

  • 2. Identifiable

    1. Can people identify the symbol?

    2. How quickly?

  • 2. Identifiable

  • 3. Easy to Comprehend

    1. Do users know what will happen when they click?

    2. Do they associate the icon with any other action?

  • 3. Easy to Comprehend

  • 3. Easy to Comprehend

    Like an item?

    Or save to wish list?

  • 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?

  • 4. Necessary

    Case study by James Foster

    Variation 1:

    Variation 2:

    Source:http://exisweb.net/menu-eats-hamburger

    http://exisweb.net/menu-eats-hamburger

  • 5. Visually Pleasing

    1. Does it look good?

    2. Does it look good with the other icons on the site?

  • 5 Key Elements to Test

    1. Easy to Find

    2. Identifiable

    3. Easy to Comprehend

    4. Necessary

    5. Visually Appealing

  • Ask Me Anything

  • Thank You

  • Mike | UX Consultantmike@netizentesting.com

    Mobile UX:

    Using Icons to Improve Product Usability