How and why can icons improve a website?

Icons support content

We usually have no trouble telling a good site from a bad one.

However, we find it difficult to say why one better and the other worse. It often happens that the devil is in the details.

When we look at the content of a website, it all comes down to its readability.

Readability is simply a quick understanding of the main subsections and the ease with which any user can process further information.

How can you easily achieve readability and improve your site?

With the right icons, which can help us in several ways:

1. They will gather all the content into one easy-to-read tablet.
2. They will grab the attention of users.
3. They will increase the overall readability of your content.

Let's now let's take a closer look at each point.

1. Icons collect all the text into a single thought

Using pictograms, you can quickly summarize what all the text is about.

Sometimes even a few icons and small graphics can convey most of the information contained in the content faster, eliminating the need for the user to read extra and unnecessary text.

Remember to treat icons the same way as metaphors.

In my opinion, one of the most important things about icons is that we humans , we learn visually, and sometimes one image is enough to convey "a thousand words".

For example:

• - everyone will understand that this icon stands for a shopping cart in an online store
• - we know that after clicking on this icon we will be able to see the calendar or select a date
• - Most of us know that an icon stands for some form of contact, usually email

If you feel that a small icon does not convey enough information, you can additionally use small images or screenshots.

A good example is the description of the features of the Brand24 platform:

2. Icons capture the attention of users

As I said earlier, one picture can be worth "a thousand words". The same applies to icons.

No icons or graphics can seem boring to us these days. and ugly.

Imagine a simple newspaper with only text - no pictures or banners. Boring.

In addition to catchy headlines, colorful pictures, graphics or icons attract our attention.

This is why you always look first at an article that stands out with beautiful graphics, even if the content is not interesting to you (because you still don't know).

Remember that it is very important to match and integrate the chosen icons and graphics with the given graphic design and overall design so that everything fits together and forms a unity.

It is not enough to choose a few free icons and just place them on your website.

Icons will not only grab the attention of users, but at the same time help create the structure of the site and section pour different functions or services.

Each icon has its own function, in addition, they create a neat page structure, which can streamline the site.

Sometimes online stores use the same or similar icons in different places.

For example, we can use two different shopping cart icons for an online store in different locations in the store. Both icons are associated with the purchase of certain products, but may have different functions.

Their functions are made clear by their appropriate location or adding text next to or below the icon.

Here we are already entering the world of UX /UI and I am not I may not mention the Proximity Principle.

The Proximity Principle states that related elements should be grouped close to each other, so that they form an organized layout. Unrelated elements should be placed further apart to emphasize the lack of connection between them.

So if the cart icon located next to the prices or the product image, then we know that these elements form a single whole and interact with each other, so, for example, by clicking on the cart next to a certain product, we add this particular product, and not another.

If the cart icon is in the menu away from any products, we know it is a preview entire cart.

If you ever use proximity in your online store, make sure icons have the same size and margins.

Remember not to place them carelessly , because customers will think your store is sloppy and won't want to buy.

Later in this In this article, I will talk in detail about the rules for combining text and icons.

3. Icons increase the overall readability of your content

Listing important content can increase the readability of your articles. However, the standard "dots" can already be quite boring for us.

Instead of a standard listing, use eye-catching icons to draw attention to a specific paragraph or block of content.

The listed sub-paragraphs not only look "clean", but also create we have associations of correctness.

There are very few icons that can stand on their own

It can be very difficult for inexperienced web users to understand and distinguish between different icons.

I know from experience that older people can't show me the differences between the icons and even have a hard time understanding what they represent.

What should have been so simple and intuitive is actually not so easy to understand, and for some it is a nightmare.

For me, as a web developer, all the icons are obvious, but if you have an online store, as you will see, many of your customers won't understand why the Google map tag is shaped like this, plus it's placed where you are w physical address.

A simple solution to this problem can be a combination of icon and text.

So users can read the text and remember what the icon means.

If you are developing, for example, a web application, you can implement a feature for advanced users to only show icons without text.

It's worth remembering that the aforementioned proximity principle works equally with icons and text.

How and why icons can improve a website - summary

Icons play an important role in website design. While they may be very small and not very noticeable, they are essential to us today and can greatly enhance a website.

Icons can be a great way to highlight and make the body of text visible.

Also, they are great "attention grabber" in the era of so-called content scanning.

When using icons in your own design, make sure they are express relevant metaphors that users will easily understand. Be sure to describe each icon, however, to avoid misunderstandings.