Tag Archives: icon design

UI icons in interface design tubik blog

Small Elements, Big Impact: Types and Functions of UI Icons.

Icons in user interfaces are the elements that cannot be overestimated. Small and meaningful, they solve numerous problems. They become little keys to usability and intuitive navigation. And only designers know how much time and effort is needed to make them simple, helpful and expressive.

 

Guru of user experience design Steve  Jobs said: «Details matter, it’s worth waiting to get it right.» Obviously, icons are on the top of details making interface usable and navigable. So, today let’s discuss what are their types and how they can be used in interfaces.

 

Definition

 

In general terms, an icon can be defined as an image which has a high symbolic value and is used for the purpose of communication. Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

 

Diving into the benefits of icons, one of the most important among them is the ability to replace the text. In one of our earlier articles, we gave details about the relations of copy and icons and their influence on usability. The process of the research showed that usage of recognizable and clear icons had a great potential in strengthening navigation as most people perceive images faster than words. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience.

 

weather app design UI

 

History

 

Obviously, icons weren’t invented by interface designers. As an object of communication, they have a long and diverse history rooting in ancient times. They are found in maps, signs, schemes, manuals and many other sources of information. However, with the advent of new technologies and graphical user interfaces, icons experienced the new twist of progress. Historically, Xerox is mentioned in credits for creating the first icons for a graphical UI in the early 1970s: the icons were implemented in a machine called Xerox Alto which was very expensive and didn’t really go to the wide masses. Still, that was a beginning of a long story: in 1981, Xerox Star was released and it’s referred to as the first consumer computer which used icons as a part of its interface. In particular, it applied the icons of folders and trash bins which have been used so far.

 

icons xerox star

Source

 

Another milestone easily remembered on this way is presented with the color icons Apple revealed first in 1991 and then later with their further updates for Macintosh. They featured another approach to the style when icons combined functionality and informative capacity with attractive and harmonic appearance.

 

icons apple machintosh

Source

 

These days icons are presented in digital design with numerous packs and sets in all the themes and styles possible. Although there are many ready-made packs, the database of icons is growing all the time in search of new solutions appealing to users.

 

Talking about the classification of icons, we can mark out several aspects of grouping them on types.

 

Types based on functions

 

Clarifying icons

These are the icons aimed at explanation. They are visual markers explaining particular features or marking out categories of content. In some cases, they are not the layout elements of direct interaction; also, you can often find them in combination with copy supporting their meaning. This trick activates multiple elements of perception in one interaction providing better recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay big attention to the copy. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

 

Homey app smart home UI

Homey App

 

saily app UI design

Category icons for Saily app

 

Interactive icons

The icons of this type are directly involved into interaction process and are the core supporters of navigation. They are clickable or tappable and respond to the users request doing the action symbolized by them. Their main goal is to inform users about the functions or features behind the buttons, controls and any other elements of interaction.

 

tubik studio tapbar ui

Tab Bar interactions

 

ui concept animation tubik studio

Menu interaction concept

 

Decorative and entertaining icons

 

The icons of this type give more about aesthetic appeal than functionality. However, this aspect is also significant and needs to be considered as the style and appearance corresponding to the target audience preferences and expectations set the solid ground for high desirability. Applied wisely, it is one of the features that can not only attract but also retain users and add much to the positive user experience. Decorative icons are often used to present seasonal features and special offers.

easter icons tubik studio

Easter and spring themed icons 

 

App icons

 

App icons are the interactive brand signs that present the application on different platforms supporting the original identity of the digital product. In most cases, it features the logo of the app designed according to the requirements set for this kind of icons. However, it also can apply something else, for example, a mascot or an abstract combination of corporate colors. The effective solution is usually based on thorough market and competition research with the aim of creating an original icon which won’t get lost on the screen full of other app icons.

 

logo design by Tubik studio

Elephun App Icon

 

Favicon

 

Favicon, also known as URL icon or bookmark icon, is a special type of symbol which represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. This interface element proved itself effective for productive website promotion and good recognizability of its visual identity.

 

Types based on visual performance

 

Glyph icons

 
The term “glyph”[glif] has come to design from the field of typography. The word takes its roots from the Greek word which means “carving”. Originally, the term presents an elements symbols or pictogram which is included in the set of symbols agreed upon many users (readers, writers etc.): it presents a readable character enabling people to write it.

 

In the sphere of typography, it is a certain graphic representation of an element of written language within a particular system of writing or particular typeface: it can be a grapheme, or part of a grapheme, or sometimes several graphemes in combination (a composed glyph). Here’s the set of ancient Celtic glyphs, for example.

 

pictish_rune_meanings

Source

 
In modern digital design, the word “glyph” reinvented its meaning but not into a sort of revolution. It is used to define a graphic symbol that provides the appearance or form for a character: it can be an alphabetic or numeric font as well as a symbol picturing an encoded character. Talking about icons, glyph icons are first of all described as a typographic symbol that represents something else, not letter or number. Among popular examples, you will also find the «@» symbol representing the preposition «at». For example, here is the set of icons for material design from Google.

 

material icons

Material icons

 

Glyph icons use simplified and universal shapes and images to be recognizable and flexible in terms of responsive design. They play the big role in the issues of navigation for a digital product.

 

weather_icons tubik studio

Weather icons

 

Flat and semi-flat icons

 

Flat icons are usually a bit more complex than glyph: they can apply color combinations, filling of the elements and present a bit more complicated images. Nevertheless, they are also focused on simple and recognizable visual metaphors quickly transferring the required meaning. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat style allows designers to be more flexible in applying the expressive power of colors and shapes not losing in legibility of the presented items.

 

tubik studio blog app

Blog App

 

Skeuomorphic icons

 

Skeuomorphism is the design direction somehow opposite to flat. It is based on the idea of reflecting images in 3D look very close to the original natural look of the physical objects. It was popular for GUI of different types and functionality several years ago. But then it was gradually replaced with flat design in UI which is simpler and therefore more flexible and practical for the needs of digital interfaces. Nevertheless, the skeuomorphic icons are still widely used in game design and app icons in game sector.

 

SVG icons

 

SVG icons, decoded as Scalable Vector Graphics, are responsive icons built on XML-based 2D vector images. They are designed 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 growing their popularity as today websites are used on the diversity of platforms and devices and need to be responsive to provide positive UX.

 

Types based on applied image metaphor

 

This direction of icons typology is based on the research provided by the famous expert in usability Jackob Nielsen and revealed in his article for Nielsen Norman Group. In this perspective, icons can be divided into three core types according to the type of the metaphor they reflect.

 

Resemblance icons are the symbols directly depicting a physical object the icon represents. These are, for example, the magnifier for search, the shopping cart, the envelope for mail etc.

 

Reference icons are the symbols depicting an object on the basis of analogy. For instance, a picture of a clamp representing a file-compression utility (because it squeezes) goes to this group.

 

Arbitrary icons are the symbols which currently do not set direct connections with the objects and their recognizability is based on convention and power of habit. This is when we should remember about floppy disc representing «Save» function: although initially it was a reference icon, for many users now it doesn’t work like that — they just know the meaning solidly connected to this image for many years.

 

multimedia icons tubik studio

Multimedia Icon Set

 

Key features of effective icons

 

In one of our previous articles devoted to the role of icons in user interfaces, we have already described all the essential features making the icons efficient, so today let’s just quickly recall them.

  • clear — the meaning of the icon is understandable and accessible to the target audience
  • meaningful — the icon transfers the informative value
  • recognizable — the visual symbol applied in the icon is presented in the form which can be recognized and decoded correctly by users
  • simple — the icon isn’t overloaded with non-essential graphic elements which allows it to be quickly perceived and understood without too much effort
  • original and noticeable — the icon stands out among other similar elements of the interface which is especially actual for the app icons
  • scalable and flexible — the icon saves its unity, integrity, and legibility in different sizes and resolutions
  • attractive — the icon satisfies aesthetic expectations and sets harmonic visual appeal
  • non-offensive — the icon doesn’t have 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.

 

Icons in UI tubikstudio

 

Recommended reading

 

Here is a bunch of articles for further exploration of the topic:

 

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


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Tubik Studio icon design

Iconic Simplicity. The Vital Role of Icons.

They are small but vital for the efficiency rate of any application or website. They look simple but take loads of time and effort to feel that way. They follow you on any step of interaction with a product although users rarely – say never – think how important they are for the success and speed of this interaction. They have the power to do anything with a user: help, support, engage, encourage, clarify, simplify or vice versa confuse, annoy, disorient and so on and so forth. They are iconic in the effective user interface. They are icons.

 

The vital role of icons is not a secret for web and app designers now, it is mentioned in numerous articles and books on design, presented in workshops and webinars, shown in numerous case studies. We decided to add our two cents to this bulk of knowledge about icons, as this theme seems constantly on demand.

 

The essence of an icon

 

Basically, app or desktop icon is an image which, having a kind of symbolic and metaphoric potential, becomes the element of navigation in the process of interaction. In deeper explanation, an icon is a visual symbol representing some action, thing, person, real or virtual.

 

In many cases, icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or web page, therefore, making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.

 

Being so multifunctional and comprehensive, icons of the apps and websites can be:

    • interactive, i.e. directly representing buttons, controls and any other elements of interaction
    • clarifying, i.e. visually explaining some functions, categories, actions, not being the direct element of interaction themselves
    • decorating and entertaining, i.e. having lower functionality and higher aesthetic potential, providing a decorative addition to general style, for example featuring some seasonal celebrations etc.

tubik studio ui concept

The example of interactive icons: Veggie App Concept 

 

tubik studio product design

The example of clarifying icons: Passfold project 

easter icons tubik studio

The example of decorative icons: Easter and spring-themed icons 

 

The Features of Icons

 

Some basic features of efficient icons include being:

  • meaningful

As it has been mentioned above, an icon is a graphic element which has high symbolic potential. It means that creating the icon, first of all, a designer should define what is its role and meaning as the separate element and as the part of the general layout. Talking about more earthy things for a kind of metaphor, the best chefs always say that everything that is put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with the unnecessary elements.

 

  • clear

Behind the clarity here we mean making the icon understandable. That is one more feature supporting icon’s being meaningful. In fact, what it the point of being meaningful if nobody except the creator understands this meaning? For the icon, lack of clarity is the death knell. Instead of speeding up and easing the process of interaction, such icon will confuse the user and bring out poor user experience.

 

  • simple

The simplicity of icons is still a kind of debatable issue. Actually, designers agree that icons should be simple but still argue about where is the level of simplicity needed. Anyway, here in the studio we support the idea that any icon should be as simple as it is required for its particular aim and function and the designer working on it should stand on the foundation of following the existing guides for icons design and omitting any unnecessary details that can overload the image. However, at the same time, it’s important to remember about the general style and other elements of the visual representation of the whole app or website concept. Successful consideration and combination of these factors will result in efficient icons.

 

 

tubik studio st valentine icons

Valentine’s Day icon set 

 

  • recognizable and unique

To make the icon recognizable, the designer needs to become a researcher before starting with the task. Taking the time for exploration and analysis of the existing icons and thorough investigation of the competition can create the significant basis of making the icon easily remembered and catchy. If a designer finds the way to make the icon recognizable not losing its main meaning, it will become the first step in attracting the user in conditions of active competition as well as will provide positive feature for user experience as the user won’t be annoyed losing the time on looking for the necessary icons which aren’t recognizable at once.
The feature of uniqueness mentioned here doesn’t mean the creation of absolutely unique stuff every time you need the icon, but thinking on some even slight flavor of uniqueness via small changes or details can make the icon more recognizable both in the AppStore or PlayMarket and on the screen of user’s device.

 

  • aesthetic and attractive

For sure, remembering that icon is a visual representation of the meaning, it’s important to take the graphic and aesthetic side of the issues into account. Visual appeal is the first step to encourage the user get into the meaning you represent behind the icon and at the same time, it is the important element making the product regarded as attractive, beautiful and stylish. Following the principles of coloristics, proportions and other features making the result of graphic design successful is always very helpful in creation of great appearance for the icon meaning.

 

icon logo tubik studio

Saily ghost icon version 

 

  • flexible

As nowadays more and more various sizes and resolutions get into the game, flexibility and scalability are included into the list of key features making icons efficient. A good icon should be seen, readable and recognizable in different sizes and environments, therefore, it is one more process that should be thoroughly considered while creating icons.

 

  • consistent

Icons, as well as the other elements of layout, have to feel consistent as they often become the most powerful conventions and signifiers. For instance, if there are several icons in the app – as it usually happens – they should follow the same style, concept and correspond to the general design solution for the app, supporting the harmony of visual representation and interaction instead of breaking it with non-consistent elements.

 

media icons tubik studio

IT Office Icons Set 

 

Creating icons for various design projects in Tubik Studio, we try to keep the principles mentioned above carefully combining them with every piece of unique design we work on. Except creating handcrafted icons for projects, we have also presented several packs of icons on Dribbble, Behance, Creative Market and Envato.

 

tubik studio animation icons

Multimedia Icons Presentation

 

In our next posts we are going to tell you about the process of designing icons in more detail, from the rough sketching to polishing digitized version.


Welcome to see the designs by Tubik Studio on Dribbble and Behance