What are the factors that easily affect the usability of icons?

Today to the students to ramble on the icon, in many cases, the icon in fact, the interface of the clear ease of use has a negative impact. As a designer, be sure to pay attention to the way we used to use icons, and test as much as possible, case study here >>>

Icons are one of the basic components of the interface, but in many cases the icons themselves are destroying the clarity of the interface.

Pictograms appear in the early days of human beings, and we can see them as the original forms of words. Nowadays, in some civilized groups, pictograms are still the main medium for people to communicate.

In many public cities, graphics are often used for navigation, especially in a multicultural environment such as the airport, which is clearly not enough to convey information.

And in computing devices, icons with the development of the GUI era quickly popular. Looking at the earliest desktop computer gui (Xerox Star), designer David Smith used the idea of icons and desktop metaphors:

Of course, we all know why icons can pop up quickly and become an important part of the UI, even more so today – icons give the UI a graphical pleasure, and when designed correctly, they can not only convey information clearly, but also bring personality and temperament to the interface.

Often, a simple icon can replace a long descriptive text-a feature that is certainly useful for small screen devices such as mobile phones and even watches. But there are also pitfalls of design-we also know that many of these icons are difficult to articulate and accurate in the sense that they need to be thought about, and that they will increase the cognitive load in the experience process. What's the use if you can't quickly and accurately convey information, especially for mobile devices – the interface is beautiful, and the action is cool?

In fact, the principle is simple: only when the icon can be 100% accurate and clear expression of meaning, to use. Don't compromise.

Speaking of vague icons, I think of a picture I saw on Twitter recently. Look at the author's god-Spit on these icons:

We always hear (or say) this: "People use our software every day, and they quickly understand and remember the meaning of these icons." I can't say it doesn't make sense, but I sometimes doubt the accuracy of that view. I use my Mac apps more than once every day, but every time I write an email I still have a moment of hesitation about the two icons:

There's also the bad news: users tend to subconsciously avoid the interface elements they don't immediately understand-the distrust of the unknown, which is our nature. I guess after Google decided to hide other apps behind a vaguely-ambiguous icon, customer service received a lot of similar questions: "Where's my Google Calendar?"

After the redesign of Twitter, many new users can't quickly understand what they should do in the interface – it should be a push, but where do they start? Is that blue icon? What does it mean, the feather represents a pen?

Once again, the revamped Twitter added the top edit box to make things more clear:

Also, do you know that you can send picture messages directly to your friends in Instagram? This feature is hidden in the icon in the upper-right corner:

As a Instagram user, have you ever used this icon for the portal? Does this icon make you anticipate this feature? For me, I can't.

The context of the interface is also an important factor to consider when designing icons, and many of the icons that appear to have clear meanings may be ambiguous in some interface environments. Open Gmail at the end of the page and you'll see an example of that--see those two very similar icons? They appear in the same interface but have very different meanings:

The two icons are appropriate for the functions they represent, one is the return, the other is the reply, but the interface environment makes them potentially conflicting; Although a particular layout can play a role in some way, the problem persists.

To take a positive example, the icons in the Tweetbot are not clear enough for some people, but in the "Twitter apps" context, most target users –twitter users are understandable because the usage of these icons is consistent with Twitter, That's OK:

The Tumblr on iOS are similar, you can't say that these icons are clear in all cases, but in the context of Tumblr app, they can be more accurately expressed:

Many icons can only express the exact meaning of the particular product type of the music app:

However, the Mac version of the Rdio, the same interface in two places using the same microphone icon, one to indicate the volume adjustment function, a song that represents the current play.

So here's what I'm going to repeat: don't use it unless you're sure that the icon form is 100% accurate in the current interface. If you're a designer, you'll have a moment's hesitation, so kill it-use the simplest text to replace it, which is the clearest way to express it.

Of course, the graphical representation of the advantages of the same can not be ignored, so we might as space allows the combination of the icon and text, while taking advantage of the advantages of both.

The default tab bar for iOS, and many of Apple's other products are using such a pattern, such as the App Store navigation bar on the Mac. These icons alone may not be able to accurately express the meaning, but with the text after a lot clearer:

Another example is the Web page Twitter navigation:

Another well-known example is that Facebook killed the classic burger menu in a certain round of revisions, returning to the most traditional iOS tab bar mode:

　　Summary

I hope this article will let you know that, as the most basic and most widely used design elements, icons--In many cases, the interface will have a negative impact on the clarity of ease of use. As a designer, be sure to pay attention to the way we use icons and test them as much as possible. Finally, repeat: don't use icons that are difficult to articulate, try using more accurate text labels, or use them in combination.