.svg)
The user interface is one of the most important components of your data visualization projects. The UI is where you tell your story, giving users a visual element to go with what's being represented.
When it comes to infographics, the user interface is often supported by iconography in order to cut down on words and make the infographic as visually appealing as possible. But does using iconography really help to enhance visual appeal?
And are there certain principles that should be adhered to? Take a look at this post for some interesting facts about iconography in general, as well as whether or not employing this strategy actually gives you more bang for your buck when it comes to increasing visibility and viewer engagement.
What is iconography in UI design?
Iconography is a visual language that uses symbols to represent ideas.
Icons are used in user interfaces (UI) to represent actions, functions and objects. They can be static images or animated.
The term iconography was first introduced by John Locke in his book "An Essay Concerning Human Understanding" published in 1690. It refers to the use of symbols to convey meaning.
Icons are used in user interfaces (UI) to represent actions, functions and objects. They can be static images or animated.
How do you use iconography?
I think that using iconography is really important in design. It can be used to convey a message or elicit an emotional response from the viewer. I've always been drawn to the idea of iconography because of its ability to communicate a lot with very little.
Iconography can be a powerful tool for designers because it helps them communicate ideas, concepts and emotions through symbols that are universally understood by all people.
The ability for icons to transcend language barriers and cultural differences makes them an incredibly useful tool for designers who want to appeal to both local audiences as well as those from other countries or cultures.
When it comes down to it, icons are just images — no different from any other image on your website or application. They're used in such a way that they become part of their own language system that people understand intuitively without having to learn how each icon represents something specific.
What are the types of iconography?
There are many types of iconography. The most common ones include:
1. Realistic Iconography: This type of iconography depicts a real or imaginary subject in its original form. For example, an icon made to represent Saint Nicholas could be a picture of him or even a drawing of him when he was alive.
2. Symbolic Iconography: This type of iconography represents something that represents something else and not the thing itself. For example, an icon that shows a man holding a book represents wisdom and knowledge.
3. Emblematic Iconography: This type of iconography uses symbols to represent ideas or concepts rather than people or things themselves. For example, if you see an icon with two snakes intertwined together it would represent good versus evil or light versus darkness.
What are the 10 rules of good Iconography in UI design?
1. Visualize a user flow.
Visualizing how a user interacts with your product can help you make decisions about the design, especially if you're going to be using icons in your UI. Thinking through what screens a user will go through and what they'll do on each screen is important for planning out your iconography. For example, if you're designing an app for buying tickets to concerts, you may want to consider whether the user will be able to purchase tickets directly from their phone or whether they will need to use another platform, like Ticketmaster's website or mobile app.
2. Be consistent.
Consistency is key when it comes to iconography in UI design — consistency across all apps and across all platforms. This means that you should choose one set of icons and stick with them throughout your app or website. Consistency also means that your icons should have the same look and feel (color scheme, line weight, etc.) as other apps or websites that use that same set of icons (or at least similar ones). This is because consistency helps users get comfortable with using your interface and makes it easier for them to navigate around it without having to think about what each icon does or where it might lead them next.
3. Provide clear yet concise labels.
The second thing that's important is knowing what type of icon will communicate your message most effectively. If your user interface is complex with many features and options, then simple line drawings might work best for you; but if your product is relatively simple with just a few main features then perhaps vector art would be the way to go.
4. Use only one icon to represent a single feature.
Don't use more than four different styles of icons (flat, 3D, etc.) in any one interface — otherwise it becomes difficult for users to recognize what each icon means at a glance and forces them to waste time trying to figure out what each type is supposed to represent before they can understand the interface's functionality well enough to use it efficiently and effectively on their own without help from an instructional manual or other form of documentation or training materials).
5. Design icons for the actual size it will be viewed by the user.
Make sure your icons are recognizable at different sizes and resolutions. Icons should be designed at their actual size so that they're recognizable when viewed on different devices with varying screen sizes and resolutions (like smartphones or tablets). This means that if you have an icon that's displayed as a 16x16 pixel image on a website using a desktop browser window, then it should also be viewed as such when displayed on smartphones and tablets where the screen size is much smaller than desktops.
6. Use color only when necessary.
When designing icons, it's important to consider how they'll be used and how much color they need. Icons can represent objects or actions, so they don't always need color to convey meaning. For example, a blue button may look like it's linked to something on a website where blue represents the color of links. However, if that's not intended in your design, then don't use blue for the button because it won't make sense to users.
7. Leverage shapes and lines to create visual hierarchy.
Icons are the most common way to represent actions, objects, and ideas in user interfaces. They're a very effective way to encode meaning by using familiar visual cues that have been learned over time. But there's more to it than just choosing an appropriate shape for an icon — you also need to use shapes and lines to create visual hierarchy so that your icons can be easily understood at first glance.
8. Apply your brand's style guide to the icons you design.
Your company's brand should be reflected in every aspect of your product, including the icons used in its interface. Make sure that the style guide you follow is consistent with your own branding guidelines, or else it will make the user experience feel disjointed and out of place.
9. Consider device limitations (like screen resolution, font size, etc).
The most important rule of icon design is to make sure the icons fit in with their environment. This means that they should be designed with consideration for screen resolution and font size. It’s easy to overlook these things when you’re working on your desktop computer, but it’s important to remember that your icons will also be viewed on mobile devices like smartphones and tablets.
10. Use Shadows To Give Depth To Your Designs
Shadows give depth to designs and make them look more realistic than flat images which appear flat on screen when viewed from different angles or at different distances from the user’s eyesight distance point of view (near/far). Shadowing helps create depth by adding shadow effects behind objects which makes them look like 3-Dimensional objects on screen rather than just flat 2-Dimensional.
What is an example of iconography?
Icons are a great tool for adding a little visual interest to your site. They can be used as navigation elements and in many other ways.
Icons can be used to enhance the design of your site and make it more attractive. In fact, they can be used in almost every aspect of your website or app. Some examples include:
- Navigation – Icons can replace text links in navigation menus or replace dropdown menus. They can also be used in your footer menu or even within content itself.
- Calls-to-action (CTAs) – Icons can be used to draw attention to CTAs and help them stand out from the rest of your design. For example, use icons next to form fields that require action from the visitor such as "Send" or "Order" buttons on eCommerce sites.
- Social media sharing buttons – Social media icons help visitors share content on their favorite networks like Facebook, Twitter, Google+, etc. These icons are usually placed near the content itself but can also be placed elsewhere on the page depending on how much room you have available for them.
- Custom error messages – Error messages are typically displayed when something goes wrong with an action attempted by a visitor such as submitting a form.
Conclusion
Keep things simple! You want your icons to communicate quickly and clearly without cluttering up or distracting from what they represent.
