Icons: Balancing Functionality and Design

Incorporating icons in design has become a standard in the way ux design agencies create websites and apps. Most of the ecommerce webmaster are using services of shopify development company. 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

1Universal 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

2Since 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.

3This 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.


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 & UI design services? Visit Codal’s blog, or come talk to us here! We’d love to hear from you.

Codal Blog LogoApp Development & UX Design Agency
Codal Inc
Icons: Balancing Functionality and Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s