Both designers and users of graphical user interfaces know the power of details. Among them, icons are the ones which shouldn’t be underestimated. Being small and sometimes passing unnoticed, they are the loyal holders of meaning. They lie in the foundation of intuitive navigation making products close to their users. Icons are always there to help us scan the interface, find the necessary options, enhance visual hierarchy of applications and websites. And most users don’t even imagine how much creative power, time and research is invested into icons which are really helpful, clear and attractive.
Famous coach John Wooden said: “It’s the little details that are vital. Little things make big things happen.” In UI design it works the same way: the tiniest details can make a great impact on conversion, usability and visual harmony. And icons are definitely on top of that issue. Let’s get dip into some insights into their history, classification and functions.
The term “icon” has a broad meaning. Merriam-Webster dictionary offers two explanations which somehow reflect its movement from physical world to digital design: “a : a sign (such as a word or graphic symbol) whose form suggests its meaning; b : a graphic symbol on a computer display screen that represents an object (such as a file) or function (such as the command to delete). Based on that, icons can be described as symbolic images satisfying particular needs of communication.
Together with copy, these graphics present the pieces of information and help people exchange or obtain necessary data. Copy communicates with words, icons do it via images and pictograms featuring resemblance with recognizable physical objects. This way for a couple of decades, icons lend a helping hand to the success of human-computer interaction.
There are some core benefits that make icons influential in user interfaces of any kind, and the ability to replace or support text is perhaps the most essential. In many cases, icons crafted with good knowledge of the audience successfully replace the words in the interface, adding to all the benefits below:
- the potential of multilingual perception – images featuring the recognizable physical objects can be understood clearly by people speaking different languages, so icons can make the interface more flexible
- increase in speed of interactions – physically, the vast majority of users perceives images faster than words
- a higher level of UI memorability – not only do visuals come to the brain faster than copy but also they have more chances to reach and be kept in long-term memory which may have a crucial effect on remembering interactions patterns
- space-saving in layout – in case an icon is well-recognized and doesn’t provoke double meaning, it may replace copy and save precious space for other layout elements; it is particularly beneficial for mobile interfaces limited to space of the screen.
- support to the design solutions – being pictorial elements, icons can harmonically add their two cents to the general style chosen for the interface.
Nevertheless, applying the power of the mentioned benefits to the interface, make sure it’s tested properly: even the slightest misperception can become the reason for poor user experience or cause interaction troubles.
No doubts, icons appeared much earlier than interface design got itself as a job: through the flow of history, symbolic and informative pictograms can be found in signs, maps, manuals, schemes and the like. Still, the leap of progress broadened the horizons for interactive visuals as well, pushing the limits of their functionality and impact. Xerox could be mentioned among the pioneers as it is given the credits for making the first icons for a graphical user interface in the early 1970s. The icons were applied for Xerox Alto, a machine which was extremely expensive so didn’t go to the wide market. Yet, it was the starting chapter of a long story: Xerox Star was released in 1981 and it’s mentioned as the first consumer computer using icons as a part of the interface. The icons of folders and trash bins which we still use on a daily basis come from those times.
Next milestone to remember occurred when Apple revealed the first color icons in 1991 and then later with their further updates for Macintosh. These visuals featured different style and became a prominent combination of functionality and informative capacity with pleasant looks.
Today icons are broadly presented in user interface design with numerous packs and sets on all the themes and styles possible. There are already many ready-made packs, still these global database is growing in a non-stop mode in search of new appealing and useful solutions.
When it comes to the classification of icons, several aspects can be applied to group them on types.
Explanatory (clarifying) icons
The name says for itself: the main purpose of these icons is explanation. They serve as visual markers presenting diverse interface features or help to sort and classify different categories of content. Sometimes, they may be not interactive directly but support copy content with visuals to speed up the navigation and make the interface more flexible. This approach involves multiple levels of perception and provides higher recognizability to call-to-action elements: users catching the symbol instantly or having problems with reading, won’t be bothered with the copy, while those, who aren’t so sure about the symbol in the icon, will get the textual support to check the meaning. In that case, the risk of misunderstanding gets lower and users have the choice of information carrier which is more convenient for them.
Category icons for Saily app
These are the icons directly included in interaction process. They can be defined as the core helpers of navigation. Such graphics are clickable or tappable, they respond to the users’ request with the action they symbolize. Their major purpose is informing users about the functionality of buttons, controls and other interactive layout elements.
App icons present the interactive brand symbol marking out the application on diverse platforms: they are interactive elements which support the identity of the app and this way enhance brand awareness. Mostly, the icons of this type feature an app logo customized according to the platform requirements. Yet, not only a logo can be used for this aim: app icons may also feature a game character, a mascot or even an abstract combination of corporate colors. The effective design choice here has to be grounded on market and competition research so that the app icon could look original and wouldn’t get lost in the competition.
Favicon, aka bookmark icon or URL icon, is a special symbol representing the website or landing page in the URL-line of the browser as well as in the bookmark tab. It lets a user set the fast visual connection with the brand in the process browsing. Favicons are useful for website promotion and make its visual identity memorable.
As well as any visual, icons are not only about doing job but also about setting aesthetic appeal. This aspect is also important being among the pillars of desirability based on the style responding to the preferences and expectations of the target audience. Applied reasonably, decorative icons can add much to the positive user experience. In addition, they are applied to make seasonal features or special offers more noticeable.
Skeuomorphism is the design approach opposite to flat and based on the idea of showing images in 3D look really close to the original natural look of the physical objects. In terms of design, they feature the most complex task among all the icons. For some time, it was popular for GUI of different types. Later it was replaced with flat as more simplified design which makes it more flexible for the needs of UI design. However, skeuomorphic icons are applied broadly in game design.
Flat and semi-flat icons
Flat icons are focused on visual metaphors which are clear and easily caught, instantly expressing the necessary meaning. They can apply various combinations of colors, the elements of an image may be filled. The name of this design direction is based on its core feature – flat 2-dimensional details in contrast to extremely realistic and detailed skeuomorphic images. Flat style allows for more flexibility in using the expressive power of colors and shapes without the loss in legibility of the delivered visuals.
The term “glyph” comes from the Greek word “carving”. Glyphs are elements, symbols or pictograms included in the set of symbols spread among many users (for example, readers or writers etc.). In typography, it is a graphic representation of an item of the written language within a certain system of writing or typeface. So, it can be a grapheme, or part of a grapheme, or a combination of graphemes which form a composed glyph.
In today’s digital design, the word “glyph” evolved its meaning but not too far: now it defines a graphic symbol with the appearance or form of a character. It can be an alphabetic or numeric font as well as a symbol picturing an encoded character. In the perspective of icons, glyphs are primarily described as a typographic symbol representing something different from a letter or number. Popular example features the “@” symbol replacing the preposition “at”.
Glyph icons have simplified and universal shapes and images that makes them recognizable and flexible, especially in responsive design. They add much to the navigation in modern mobile and web user interfaces.
SVG icons (Scalable Vector Graphics) are responsive images built on XML-based 2D vector images. They are created and integrated according to an open standard developed by the World Wide Web Consortium (W3C) since 1999 and supported by all major browsers. SVG icons are getting more and more popular because now websites are used on the diversity of platforms and devices and have to be responsive to provide positive user experience.
Another perspective of classification is grounded on the research by the famous expert in usability Jackob Nielsen and covered in his article for Nielsen Norman Group. This approach to typology divides icons into three key types according to the metaphor they hide.
Resemblance icons are the symbols directly showing a physical object the visual item represents: for instance, the envelope for mail, the magnifier glass for search, the shopping cart for a page or screen collecting items to buy etc.
Reference icons are the symbols depicting an object based on analogy. For example, a picture of a clamp represents a file-compression utility (as it squeezes) goes to this group.
Arbitrary icons are the symbols which currently do not set direct associations with the objects. They are recognized on the ground of conventions and habits. Here it’s time to remember a floppy disc representing “Save” function: although initially, it was a reference icon, for a new generation of users now it doesn’t work that way, they just know the meaning solidly stuck to this image for many years.
Features of effective icons
To sum up, let’s quickly review the checklist of characteristics for effective icons. They should be:
- clear (the meaning is clear to the target audience)
- meaningful (the informative value is transferred)
- recognizable (the visual symbol can be decoded correctly by users)
- simple (the visual isn’t overloaded with non-essential graphic elements to be quickly perceived)
- original and noticeable (it can be distinguished from other similar elements of the interface)
- scalable and flexible (it saves its legibility, unity and integrity in a variety of sizes and resolutions)
- attractive (it sets harmonic visual appeal and satisfies aesthetic expectations)
- non-offensive – (it has no hidden meanings or misperceptions which could feel offensive or rude for any part of the target audience)
- consistent (the icon corresponds to the general stylistic concept of the layout it is applied for).
Based on the article: Small Item, Big Impact: Types of UI Icons.
Author: Marina Yalanska is content manager and writer for Tubik Studio, tech/design blogger and researcher
For those who want to continue reading on the theme, here is a set of articles for further exploration:
Icon Classification: Resemblance, Reference, and Arbitrary Icons
A Brief History of the Origin of the Computer Icon
Iconic Simplicity. The Vital Role of Icons.
Visual Perception: Icons VS Copy in UI.
How to Combine Icons from Different Sets in Your UI.