Icons As Part Of A Great User Experience

by

Sponsored ArticleIcons As Part Of A Great User Experience

Icons are an essential part of many user interfaces, visually expressing objects, actions and ideas. When done correctly, they communicate the core idea and intent of a product or action, and they bring a lot of nice benefits to user interfaces, such as saving screen real estate and enhancing aesthetic appeal. Last but not least, most apps and websites have icons. It’s a design pattern that is familiar to users.

Despite these advantages, icons can cause usability problems when designers hide functionality behind icons that are hard to recognize. An icon’s first job is to guide users to where they need to go, and in this article we’ll see what it takes to make that possible. If you want to take a go at creating your own icons, you can download and test Adobe’s Experience Design CC1 for free and get started right away.

Further Reading on SmashingMag: Link

5
Icons can be compact enough to allow for more controls to be displayed in a relatively small space. (Image: Adobe6) (View large version7)
8
Every app needs a beautiful, memorable icon that attracts people in the app stores and stands out on the home screen. (Image: Apple9) (View large version10)

Types Of Icons Link

As mentioned, an icon is a visual representation of an object, action or idea. If that object, action or idea is not immediately clear to users, the icon will be reduced to visual noise, which will hinder users from completing their task.

There are three types of icons: “universal,” “conflicting” and unique icons. Let’s focus on each type and its impact on the user experience.

Universal Icons Link

A few icons enjoy nearly universal recognition among users. The symbols for home, printing, searching and the shopping cart are such icons.

11
Easily recognizable icons (Image: Icons812)

There is only one problem: Universal icons are rare. Beyond the examples cited above, most icons are ambiguous. They can have different meanings depending on the interface.

Icons With Conflicting Meaning Link

Trouble comes when you implement a commonly used pictogram that has contradictory meanings. The heart and the star are excellent examples. Not only does the functionality associated with these icons vary from app to app, but these two icons compete with each other.

13
(Image: UserTesting14) (View large version15)

As a result, these icons are hard to interpret precisely. Even in the context of an individual app, these symbols can be very confusing when the user expects one outcome and gets another. This impedes the user’s understanding of these icons and discourages them from relying on them in future experiences.

Consider other popular icons that have multiple meanings:

16
(Image: UserTesting17) (View large version18)

Unique Icons Link

Icons are especially bad for anything abstract because they generally are not strong visual representations. How do you describe a unique object or action? Apple’s icon for its Game Center app, for example, is a group of colorful circles. What does the Game Center icon mean? How does it relate to gaming?

19
The Game Center icon fails to convey the concept of games.

As another example, when Google decided to simplify its Gmail interface and move everything behind an abstract icon, it apparently20 got a stream of support requests like, “Where is my Google Calendar?”

21
Gmail user interface for the desktop (View large version22)

An icon might make complete sense once you know what it’s supposed to represent, but it can take some time for first-time users to figure things out. Another problem is that first-time users tend to avoid interface elements that they don’t understand. It’s human nature to distrust the unknown.

Practical Recommendations For Designing With Icons Link

Let’s take a look at some simple techniques and strategies for choosing a proper icon for a given context. Obviously, picking an icon often is a long story, and whatever the choice is, testing icons in interfaces with real users is crucial.

Use Labels to Clarify Abstract or Unfamiliar Icons Link

Icons can save space by reducing text, but at the price of recognition. An icon can represent a thousand different words, and that is exactly the problem. It would be a serious misconception to assume that users either would be familiar with your abstract pictograms or would be willing to spend the extra time discovering what each means.

23
The bottom tab bar icons might confuse first-time Android users. (Image: Google24) (View large version25)

Users are often intimidated by unfamiliar interfaces. What they really want is a clear idea of what will happen before they perform an action in an unfamiliar app. That’s why your icons need to set clear expectations for users before they click or tap on them.

A good user experience can be measured in many ways, one of which is how much it frees the user from having to think. Clarity is the most important characteristic of a great interface. To avoid the ambiguity that plague most icons, we can include a text label26 to clarify an icon’s meaning in a particular context, especially for complex actions and abstract functions.

UserTesting conducted27 a series of tests, comparing labelled icons to unlabelled icons. It found that:

  • users were able to correctly predict what would happen when they tapped a labelled icon 88% of the time;
  • that number dropped to 60% for unlabelled icons. For unlabeled icons that were unique to the app, users correctly predicted what would happen when they tapped an icon only 34% of the time.

Even for universal icons, including a label is usually safer.

28
Labelled icons are much more likely to be used. (Image: Google29) (View large version30)

When Icons Alone Are Adequate Link

So, not all users are familiar with conventional icons, which makes an icon-only interface potentially harder for them to use. On the other hand, experienced users might regard an interface with text labels everywhere to be cluttered. How do we make everyone happy? As Michael Zuschlag mentions31, icons alone will suffice when at least two of the following three conditions are met:

  • space is very limited (i.e. too small for text alone);
  • the icons are standardized (e.g. they are universal);
  • the icons represent objects with strong physical analogs or visual attributes (e.g. a red rectangle to set the page’s background as red).

Beware of Tooltips and Popovers for Icons Link

Some designers believe labels defeat the purpose of icons and clutter the interface. To avoid using labels, they use tooltips. However, tooltips are a poor substitute for text labels. The fact that text labels never need graphic tooltips is a pretty good clue that text is better than icons. Another major disadvantage is that tooltips fail to translate well to touchscreens.

Another common technique is to use tutorials or coach marks or popover hints. However, users might simply rush through the tutorial or forget everything they’ve learned when they next launch your app. Like tooltips, tutorials are no substitute for intuitive design; rather, the opposite. As Matthew at CocoaLove32 says, “Your app’s tutorial screen is just a list of ways you’ve failed.”

33
The Swarm app uses popover hint to educate users. (Image: Mobile Patterns34) (View large version35)

Icons and Button Labels Link

Icons accompanied by labels make information easier to find and scan, as long as they’re placed in the right spot. Place icons according to the natural reading order. As argued by UX Movement36, there are two important factors in an icon’s location:

  • In order for icons to serve as a visual scanning aid, users need to see them before they see the accompanying label. Place icons to the left of their labels so that users see them first.
  • Align the icon with the label’s heading, instead of centering it with the heading and body. Seeing the icon first will help users to scan the page more easily.
37
(Image: UX Movement38) (View large version39)

Icons in Data Tables Link

Let’s imagine that you have a table with numbers in rows, and you need icons as supporting elements to indicate whether a value is good, mediocre or bad. What is the proper placement for icons next to numbers — to the right or left? As Don Nickel explains40, icons to the left of a number usually indicate the intent of the data, whereas icons to the right usually indicate the quality of the data. As with icons with button labels, the placement of icons should follow the natural reading order. There are two possibilities for icon placement:

  • Status icons would appear at the end of the line. As seen in the example below, the user will see the subject first, then the value associated with the subject and, finally, the status of the value.

    41
    (Image: Stack Exchange4442)
  • If the icons themselves are the subject, then they would appear at the start of the line, and everything else would follow thereafter.

    43
    (Image: Stack Exchange4442)

Icons For Accordion Menu Link

The accordion menu is a UI pattern that collapses long lists into manageable groups. It is useful for navigation menus and particularly for search filters.

45
(Image: Viget5046) (View large version47)

Beyond the decision of whether to use an accordion menu, designers often wrestle with the specifics of designing one. The most common questions are:

  • What icon should I use? In terms of usability, is an icon really necessary at all?
  • Should the icon go on the left or right of the menu item?

Lance Gutin conducted an experiment48 with different type of icons (chevrons, plus and minus signs, and triangles) and locations (to the left and right). With three icon choices in two locations and a control group with no icon at all, he identified seven total designs to investigate.

49
Heat map summary of click locations per test (Image: Viget5046) (View large version51)

Analyzing the results, he mentioned two important findings:

  • The most convincing data involved icon location. Presented with an icon to the right of the menu item, many users preferred to click the icon rather than the text label. It’s quite possible that some users believed the icon and the label functioned differently; the icon’s small size and distance from the label increased the recorded task times, resulting in slower task times for accordions with icons to the right.
  • In terms of icon choice, the accordion menu with a plus placed on the left measured the fastest, with 90% of participants predicting that the menu would change. However, most of the task times did not differ statistically, and none of them differed practically.

Please notice that the study doesn’t mean that we all should use the icon with a “plus” icon placed on the left in accordion menus. However, if we put the icon on the right side, it’s safer to make sure that this icon is of a big enough size (at least 44×44px), so it’s easy to hit with a finger or a mouse.

Be Careful With Hamburger Icon Link

Three horizontal lines (i.e. the “hamburger” icon) has become a convention for the main menu button, especially on mobile websites:

52
Google’s Material Design website (View large version53)

However, take into account two important factors when deciding whether to use a hamburger icon:

Designing Icons For Maximum Affordance Link

When designing user interface elements, consider the principles of usability (consistency, affordance, etc.). Affordance, an important concept, essentially means that elements such as icons should be intuitive:

  • Keep icons simple and schematic.

    In most cases, icons aren’t the place to be creative. If you design a new icon, minimize visual detail and avoid a highly realistic image by focusing on the basic characteristics of the object. Fewer graphic details66 aid recognition.

    67
    If you have two options for an icon, choose the simpler one. (View large version68)
  • Choose familiar icons.

    A user’s understanding of an icon is based on previous experience. If you decide to include icons in your interface, research first. Familiarize yourself with icons used by your competitors and with icons commonly used on the platforms you’re targeting (i.e. system icons), because those will be most recognizable to your users.
  • Don’t port platform-specific icons.

    As you build your app for Android or iOS, don’t carry over themed UI69 elements from other platforms. Platforms typically provide sets of icons for common functionality, such as sharing, creating a document and deleting. When you migrate your app to another platform, swap out the old platform-specific icons with the target platform’s counterparts.

    70
    Icons for common functionality in Android (top) and iOS (bottom)

Make Icons Good Touch Targets for Mobile Apps Link

People interact with touch-based interfaces using their fingers. UI controls have to be big enough to capture fingertip actions without frustrating users with unintended actions and tiny targets. The image below shows that the width of the average adult finger is about 11 millimeters (mm) wide, while a baby’s is 8 mm; some basketball players have fingers wider than 19 mm!

A diagram showing the finger width of people in different ages and from Baby to Basketball player71
People often blame themselves for having “fat fingers.” But even baby fingers are wider than most touch targets. (Image: Microsoft72) (View large version73)

The recommended target size for touchscreen objects is 7 to 10 mm. Below are Apple and Google’ recommendations for their platforms (see “iOS Human Interface Guidelines74” and Material Design75):

  • Apple recommends a minimum target size of 44 × 44 pixels. Because physical pixel size varies by screen density, Apple’s pixel specifications apply best to the iPhone’s 320 × 480-pixel 3.5-inch display.
  • Google recommends that touch targets be at least 48 × 48 density-independent pixels (DP). A touch target of 48 × 48 DP results in a physical size of about 9 mm, regardless of screen size. In most cases, icons should be separated by 8 DP or more of space to ensure balanced information-density and usability.
76
Touch targets include the area that responds to user input. (Image: Material Design7977)
78
For this touch area, the icon is 24 DP, and the touch target is 48 DP. The values apply to Android apps. (Image: Material Design7977)

But not only is target size important; sufficient space between touch targets matters, too. The main reason to maintain a minimum distance between touch targets is to prevent users from touching the wrong icon and invoking the wrong action. This becomes extremely important when icons such as “Save” and “Cancel” are right next to each other. At least 2 mm of padding80 between targets is extremely important in such cases.

81

Test Your Icons Link

Icons need to be handled with care. Always test them for usability. Watch how a real first-time user interacts with your UI, which will help you to determine whether the icons are clear enough:

  • Test the icons for recognizability.

    Ask people what they think the icons represent. They shouldn’t have to wonder what they do, because they won’t bother trying to find out.
  • Test the icons for memorability.

    Icons that are hard to remember are usually inefficient. Bring back a set of test users and ask whether they remember an icon’s meaning after having been told a couple weeks earlier.

Conclusion Link

Iconography lies at the heart of UI design. It can make or break the usability of an interface. Every icon should serve a purpose. It should help the user do what they need to do without requiring additional effort. When designed correctly, icons guide users intuitively through a workflow, without relying much on copy. Don’t make your users think. Make clarity in the app a priority!

Recommended Reading Link

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app84 is made for a fast and fluid UX design process, as it lets you sketch out ideas, create interactive prototypes, test and share them all in one place.

You can check out more inspiring projects created with Adobe XD on Behance85, and also visit the Adobe XD blog86 to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free87.

(ms, yk, al, il)

Footnotes Link

  1. 1 http://adobe.ly/2dHvV8T
  2. 2 https://www.smashingmagazine.com/2016/07/how-to-create-icons-adobe-xd/
  3. 3 https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
  4. 4 https://www.smashingmagazine.com/2009/03/how-to-use-icons-to-support-content-in-web-design/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/08/icons-preview-opt.png
  6. 6 http://www.adobe.com/products/photoshop.html
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/08/icons-preview-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/08/aesthetic-appeal-preview-opt.png
  9. 9 https://apple.com
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/08/aesthetic-appeal-preview-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/08/universal-icons-preview-opt.png
  12. 12 https://icons8.com/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Icons-With-Conflicting-Meaning-large-opt.png
  14. 14 https://www.usertesting.com/blog/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Icons-With-Conflicting-Meaning-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/08/icons-with-multiple-meanings-large-opt.png
  17. 17 https://www.usertesting.com/blog/2015/08/04/user-friendly-ui-icons/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/08/icons-with-multiple-meanings-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/08/game-center-icon-preview-opt.jpg
  20. 20 https://productforums.google.com/forum/#!topic/calendar/HqiLewsXVmU%5B1-25%5D
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Gmail-user-interface-for-desktop-large-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Gmail-user-interface-for-desktop-large-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Bottom-tab-bar-icons-large-opt.png
  24. 24 https://www.android.com/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Bottom-tab-bar-icons-large-opt.png
  26. 26 https://www.nngroup.com/articles/icon-usability/
  27. 27 https://www.usertesting.com/blog/2015/08/04/user-friendly-ui-icons/
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/08/labeled-icons-large-opt.png
  29. 29 https://www.thinkwithgoogle.com/articles/chapter-6-usability-and-comprehension.html
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/08/labeled-icons-large-opt.png
  31. 31 http://ux.stackexchange.com/questions/1795/when-to-use-icons-vs-icons-with-text-vs-just-text-links
  32. 32 https://twitter.com/mb
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Swarm-app-large-opt.jpg
  34. 34 http://images.mobile-patterns.com/1400178879546-2014-05-15%2014.29.24.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Swarm-app-large-opt.jpg
  36. 36 http://uxmovement.com/buttons/where-to-place-icons-next-to-button-labels/
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/08/icons-order-preview-opt.png
  38. 38 http://uxmovement.com/buttons/where-to-place-icons-next-to-button-labels/
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/08/icons-order-preview-opt.png
  40. 40 http://ux.stackexchange.com/questions/42988/placing-icons-next-to-numbers-to-the-right-or-left
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/08/status-icons-preview-opt.png
  42. 42 http://ux.stackexchange.com/questions/42988/placing-icons-next-to-numbers-to-the-right-or-left
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/08/subject-icons-preview-opt.png
  44. 44 http://ux.stackexchange.com/questions/42988/placing-icons-next-to-numbers-to-the-right-or-left
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Accordion-Menu-large.gif
  46. 46 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Accordion-Menu-large.gif
  48. 48 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Heatmap-summary-large-opt.png
  50. 50 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Heatmap-summary-large-opt.png
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Google-Material-Design-site-large-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Google-Material-Design-site-large-opt.png
  54. 54 https://www.smashingmagazine.com/2013/09/responsive-navigation-on-complex-websites/
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/08/hamburger-icon-preview-opt.png
  56. 56 http://ux.stackexchange.com/users/13689/edgarator
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/08/hamburger-icon-preview-opt.png
  58. 58 https://www.nngroup.com/articles/magnifying-glass-icon/
  59. 59 http://sitesforprofit.com/mobile-menu-abtest
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/08/menu-large-opt.jpg
  61. 61 http://sitesforprofit.com/mobile-menu-abtest
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2016/08/menu-large-opt.jpg
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/08/menu-variations-large-opt.jpg
  64. 64 http://sitesforprofit.com/mobile-menu-abtest
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/08/menu-variations-large-opt.jpg
  66. 66 https://www.nngroup.com/articles/magnifying-glass-icon/
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2016/08/two-options-for-the-same-icon-large-opt.jpg
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/08/two-options-for-the-same-icon-large-opt.jpg
  69. 69 https://developer.android.com/design/patterns/pure-android.html
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Icons-for-common-functionality-preview-opt.jpg
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/10/touch-width.png
  72. 72 https://developer.microsoft.com/en-us/windows/design
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/10/touchtarget-opt.png
  74. 74 https://developer.apple.com/ios/human-interface-guidelines/
  75. 75 https://material.google.com/
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2016/08/user-input-preview-opt.png
  77. 77 https://material.google.com
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2016/08/touch-area-preview-opt.png
  79. 79 https://material.google.com
  80. 80 http://www.lukew.com/ff/entry.asp?1085
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2016/08/target-size-preview-opt.jpg
  82. 82 https://ia.net/know-how/on-icons
  83. 83 http://uxmyths.com/post/715009009/myth-icons-enhance-usability
  84. 84 http://adobe.ly/2dHuTKc
  85. 85 http://adobe.ly/1U9LS0E
  86. 86 http://adobe.ly/1sGB17z
  87. 87 http://adobe.ly/2dHvV8T

↑ Back to topTweet itShare on Facebook

Advertisement

Leave a Reply

Your email address will not be published. Required fields are marked *