Icons - Balancing Functionality and Design

Page 1

Icons: Balancing Functionality and Design By Tory Darling, ​Codal Inc

______________________________________________________ Incorporating icons in design has become a standard in the way ux design agencies create websites and apps. Done correctly, icons can visually express objects, actions and ideas in a way that is both screen saving and aesthetically appealing. Although, icons done incorrectly can lead to usability problems when designers mask the functionality which results in the icons being difficult to recognize. Thus, in order for an icon to be effective, ux services need to focus on whether the user adequately recognizes and performs the desired tasks of the icons. Types of Icons Universal Icons Universal icons are the most recognizable icons among users. They are commonly known in both the way the icon looks as well as the functionality of the icon. Some examples of these icons are the magnifying glass signally search, the shopping cart signally the area of products for intent purchase, and the house signally a direct to the home page. Utilizing universal icons is a good way in making sure your user knows how to nativage your website efficiently and effectively. But because these icons are generic, ​ux designers​ tend to incorporate other icons in effort to create a unique design.

Icons with Conflicting Meaning Since ux designers are creating their own custom icons, conflicting meaning icons have emerged. What is meant by ​conflicting meaning is that the functionality associated with icons vary from different interfaces. The most common example of this issue is the functionality of “favorite” is sometimes represented as a star and sometimes as a heart.


This results in icons being difficult to interpret and can result in user experience design issues. It is critical to realize that an icon might make sense when you are knowledgeable of the functionality, but as a user you only have the icon to guide your actions or lack of actions.

Conclusion Ultimately, if you want your website and app to be used in the most effective manner, using universal icons is the way to go. It is important that these icons are minimalist in design and clearly depict what the object is portraying. Although, this isn’t to say that ux designers shouldn’t incorporate unique icons into their website or mobile app; there is just steps to take in order to make sure the functionality of the icon is known the the user. An easy way to do this is add an action word that describes clearly what the icon performs.

Looking for more insight on UX design services? Visit ​Codal’s blog​, or come talk to us here​! We’d love to hear from you.

Codal Inc App Development & UX Design Agency www.codal.com


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.