The main components of the desktop are the icons on the desktop and the panel at the bottom of the screen. An Example KDE Desktop. Desktop icons represent files, directories, applications, functions, and removable media, like CDs or DVDs. The desktop has the following icons. The first basic function a computer can accomplish is storing information, typically in binary form (as either a one or a zero). Next, a computer can retrieve that information for processing.
- Find Icons On Your Computer
- List Of Computer Icons And Their Functions Except
- List Of Computer Icons And Their Functions Examples
The article considers the role of icons in user interfaces and different aspects of their classification: check different types of interface icons for web and mobile.
Both designers and users of graphical user interfaces know the power of details. Among them, icons are the ones that 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 the visual hierarchy of applications and websites. And most users don’t even imagine how much creative power, time and research is invested into interface 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.
Terminology
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, they lend a helping hand to the success of human-computer interaction.
Benefits
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 the 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 image 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.
History
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 images 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 of all the themes and styles possible. There are already many ready-made packs, still, this 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.
Typology
Functions
Explanatory (clarifying) icons
The name says for itself: the main purpose of these images is an 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
Interactive icons
These are the icons directly included in the 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. One of the typical examples are icons in the tab bars.
App icons
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 ones 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
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 a fast visual connection with the brand in the process of browsing. Favicons are useful for website promotion and make their visual identity memorable.
Decorative icons
As well as any visual, icons are not only about doing a job but also about setting aesthetic appeal. This aspect is 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 (like Christmas or Valentine’s Day) or special offers more noticeable.
Visual performance
Skeuomorphic icons
Skeuomorphism is the design approach opposite to flat: its basic idea lies in 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 the GUI of different types. Later flat replaced them as a more simplified approach 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 that 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. The flat style allows for more flexibility in using the expressive power of colors and shapes without the loss in the legibility of the delivered visuals.
Glyph icons
Find Icons On Your Computer
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 that 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 different from a letter or number. A popular example is 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
List Of Computer Icons And Their Functions Except
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. So, they have to be responsive to provide a positive user experience.
Image metaphor
List Of Computer Icons And Their Functions Examples
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, design researcher and writer for Tubik Studio
Recommended reading
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.