Category: UX and Design

When are They Used and Who Needs Them?

Icons have conquered the world. Mobile applications, web design, prints, motions and sometimes a host of icons, make you feel like you are in an Egyptian pyramid once you enter a site. The only difference is that instead of hieroglyphs, you find yourself surrounded by icons.

When providing an address or a phone number, a location pin and phone icons are given for the only reason “why not”. Sometimes it feels like if we let it run its course, an icon will precede every word.

More and more icons…

Mobile applications naturally borrowed the principles of interface design from desktop applications. Design-related fields then started borrowing these elements and solutions. Sometimes they were completely out of place but were just following the influence of trends.

As a result, mobile applications use icons not only for decorative purposes but also because of the shortage of space. Websites, especially landing pages, openly overuse icons (perhaps to compensate for uninteresting content).

It is important to try to figure out where and why the icon is needed, where it would be inappropriate, how transparent it should be, and why modern interfaces and icons look the way they look.

Is your icon understandable?

Rule number one for an icon: it has to be transparent and obvious for speakers of different languages. However, how is it possible to determine the understandability? This question always causes many arguments.

In general, this type of a dispute is a fairly useless activity. It is partly a repetition of the historical competition of cultures in the creation of a written language. It is a battle of hieroglyphs vs. alphabets. Given a relatively small vocabulary, the representation of words that are described with these things was obvious.

However, with the concepts becoming increasingly complex, it was getting increasingly difficult to come up with a clear graphical image. As a result, it was understood that the meaning is not always obvious. However, there is a logic of understanding and some rules for reading. The ancient Egyptians and Chinese began to use hieroglyphs for the phonetic recording of words, using them not only as nouns, adjectives, and verbs but also as syllables and individual parts of words.

How do one create an understandable icon?

It is difficult to create a completely understandable icon (even though it is often required from a designer). However, even easy understanding requires a minimal effort either by an individual (his/her logic, knowledge, outlook, culture) or by the society, which provides that individual with knowledge about the meaning of the image.

It is better to create signs that are based on some information which is already available for the target user of these signs. The icon should, therefore, be clear for a minimally prepared target audience. The wider the audience – the more common and accessible the sign that is required.

Pictograms and target audience

Articles on Wikipedia mark dead military commanders with a cross. For the Christian culture, this sign is clear. However, for readers from other cultures, it is not understandable. Therefore, this sign is not used for them in Wikipedia. Moreover, different language versions provide different versions of this cross. For example, refer to the article on the Battle of Marathon in different languages. The target audience is too broad to create a common sign. Therefore, it was necessary to apply localization.

The true purpose of the use of icons is not for ignorant people to understand the meaning, but for knowledgeable people to notice them faster. A sign is recognized faster than a word, although words are clearer.

Looking at Figure 3, how clear is this sign for a person that does not know how to drive a car and does not understand traffic regulations? However, for a driver or an informed person, the meaning is clear – no overtaking.

You start driving with the goal of not guessing the meaning of the signs but to quickly identify them. Many prohibitory signs with arrows, used in India (Fig. 3 – on the right), illustrate the meaning better. You will notice black and red cars faster. Let’s say you do not know the meaning of the sign with two cars and cannot guess what it is. I will tell it to you. The image is associative in general: there are two cars. Red means prohibition. A mnemonic chain is formed. You now think that everything is clear, and the sign is understandable to you.

Icons are often used for the labeling of various products. The purpose is to make everything clear after a cursory glance for conditional sorting by an important parameter without reading the text, which is listing these parameters. In these cases, the icons often do not speak for themselves. For example, on any network adapter of any of your devices, you can find several icons that are not quite understandable for a layman.

Though the icons on the clothing tags, describing the rules of clothes washing and ironing, still require specific understanding and are addressed to those who will perform these actions. It is important for these individuals to understand the properties of the clothes. Given that the image of an iron tells us that the product can be ironed, a crossed out triangle, most likely, says nothing (Fig. 4). For a housewife who cares about the look of the garment, this sign says that bleaching is not recommended for this piece of clothing. Therefore, since she knows the meaning, she pays attention to it.

The icon “non-toxic material” uses the association with food, because the material is often used for food packaging. Military insignias are another kind of icons for quick identification.

Interface icons: the story of one button

The use of icons in computer interfaces is very similar. One of their main tasks is the fast transfer of information. A user should be able to quickly find the desired item, without grasping it in words. Even in a text-based interface (for example, Adobe products have several menus with drop-down lists), we do not grasp the meaning of options each time. We recognize them by the first letter, general outlines, the order, etc.

In addition to the rapid transmission of information, icons have a role in the interface by saving space. Standard menu (“hamburgers”) and option (dots) icons caused a lively debate just a few years ago. “Hamburger” had a reputation of a button “hated by designers and difficult for users to understand”. Nevertheless, soon there appeared a lot of articles “about the most popular button”. Although it preserves its original view, it attracts the attention of new less sophisticated users, with no problems in understanding it!

The situation mentioned above occurred. People were not born with knowledge about this button. Its meaning was explained to them by society or quickly recognized through their own experience. Nothing terrible happened when the user tried to push it, not knowing what it was. However, he immediately understood the meaning. There is no need to invent a more obvious image. Since this icon is used in products with millions of users, it has become something of a standard. It is unlikely that every user knows that the appearance of this button abstractly depicts three menu bars. However, once they have tasted it or seen others doing this, they memorize the meaning of this “hamburger”.

The interfaces tend to clarify things. There is a saying that if the interface is to be explained, then it is bad. However, though today a person does not have to procure his/her food (including brain food), it is still necessary to chew and digest it. The user should be trained. For serious problems, such as cloud-based industrial facilities management systems, there are special instructions, describing the characters. They suggest various clues such as “click the icon”, unobtrusive animation offering to try the tool in operation and pop-up tooltips on mouse hover. All of these clues help the beginner to quickly learn the ropes.

History repeats itself

Many commonly understandable and familiar icons have lost the associations that they initially had a long time ago. A classic example is a floppy disk icon that is used for saving. For more than 20 years, floppy disks were used for file storage. A modern user who is under 20 years of age may not recognize this symbol. However, he/she can quickly learn its function without delving into the details of its meaning.

In Photoshop, icons depict the actual tools of designers, photographers, and retouch artists of the pre-computer era. Most of the today’s professionals have never used these tools and may not even know that they have ever existed. They also did not know that designers managed to create layouts without computers and modern digital technologies.

Even the telephone handset icon is actually outdated. However, these symbols have been well-established and entrenched in the memory of society. Technical development progresses exponentially, and we just do not have time to get used to the image of new things.

The fact is that cassette recorders, television sets with cathode ray tubes, and rotary dial telephones have been in use for decades. Though their design varied, the overall shape was very similar. These images are forever etched in the memories of several generations. These icons have a certain charisma and they embrace the entire epoch.

There is something interesting to pay attention to while watching a detective or spy movie: if there is a scene showing someone conducting wiretapping, we would see a reel tape recorder with respectable rotating reels. However, at the time referred to in the film, there were already far more advanced devices. In films, they also use old devices because they create a strong artistic image.

A sound wave image on the monitor has recently become the only alternative. Designers have tried to modernize phone icons. As soon as they used the image of a smartphone with buttons, the image ceased to have a prototype and the associative array. Therefore, there is no point in trying to portray a modern view of a device in icon plots. This is because everything is changing too fast. No gadget will have the time to impress three generations of people with its views, like a floppy disk did.

Even though Youtube has successfully modernized its identity and icon plots, at the core there is still a warm pot-bellied cathode ray tube. The resemblance is also seen in the use of the word “tube” itself. To be more precise, almost all the icons are ideograms. They represent some meaning associated with an object or a concept, but not the object itself.

Cryptograms: to caption or not to caption?

Icons can be captioned. In web interfaces, captions were recommended in order to have greater visibility of the active area to click (Figure 6). This is true, but not critical. It is always more convenient to press a clearly defined area than just an icon.

However, there is also the aesthetic factor. The interface consisting of buttons is not always pleasing to the eye. The balance between beautiful and convenient always requires effort. It is true that at times, something has to be sacrificed. For example, older versions of iOS offer users clearly defined buttons. The latest versions offer icons without visual boundaries, which means only a sense-bearing sign.

The following is the meaning of captions: a captioned icon is like two in one. On the one hand, the text clearly conveys the meaning and teaches the user. On the other hand, the icon helps the eye to quickly identify the option in the list (without it, an eye would screen the list by the initial letter, word length, and sometimes the user would have to read it carefully). It can actually tell the meaning of the option captioned in a foreign language.

In addition, in this case, it is not required to look for a very precise image for the icon. The icons on the Sony Playstation gamepad are just visually different and easily distinguishable.

History of cryptograms: how it all began

It is necessary to address the subject of a fancy icon in the interface. It is now usually a conventional image without volume and with thin lines. Although some people would say that it is just a fashion trend, this type of icon is developed primarily because of technical possibilities. It is now used because it has been made possible, and not because an artist-discoverer happened to gain an insight. It is a demonstration of the saying “old is the new new”.

The appearance of icons in the interfaces marked the advent of the graphical interface itself. The graphics drawn pixel by pixel used to have a coarse pixel structure. Screen resolution did not allow for making detailed images with smooth contours. The pixel size was large relative to the icon. Images designed to resemble the graphics of that era are called pixel-art, or anything with the prefix “eight-bit”.

The fact that the old Mac interface was black and white, even played into the hands of designers. The closer the framework, the easier it is to find the optimal solution compared to the boundless opportunities. With the growth of computer power, which used to be consumed mainly by graphic performance, icon design has been developing and becoming more complex.

In Fig. 11, we can see the painted icons from Windows 3. However, there is still a screaming pixel structure. We now mostly do not see the pixel structure, since even desktop monitors can have a point density of more than 72 per inch. The modern pixel is 1.5-4 times smaller and almost unseen with the unaided eye. The pixel image in the 1980s was not really so acute. It turned out that another drawback – the blurring of pixels due to the glow of luminophore in cathode ray tubes, slightly offset this sharpness. Therefore, the icons were not as painful to look at as they seem to be now.

The pixel density per inch has not changed for a very long time. This is true up to the present day since monitors served as the output device – first CRT, then LCD. Over time, the number of displayed colors has increased significantly. This has affected the form of the icons. Artistic techniques and tools have also developed.

Fig. 12 shows the Windows 98 and MacOs9 icons. They still have a rugged pixel structure. However, they are able to use more colors. They have also obtained gradient fill, although with visible steps. For colors mixing, there is the use of diffusion (in the yellow folder, there is a shading effect to the bottom that is made pixel by pixel).

The antialiasing technique has become a revolution. It has allowed the seamless mixing of colors and the smoothing of the pixel edges. The mathematical processing of the image has opened the discussion of concepts such as the fractional parts of a pixel. This seems like a smooth transition from one color to another for a few pixels. It visually seems to be one pixel but with smoothed edges. The process of smoothing pixels is visualized in Fig. 13. It is interesting that there was no efficient font smoothing for a long time, while image smoothing has been used since the 1990s. This is because CRTs, due to the blurring of pixels, has smoothed the pixels of letters. Only after the final transition to LCD monitors, did the problem become acute again and was finally solved. As a result, smoothed fonts are now commonly used.

How has antialiasing affected icons? Its effect is almost the same as the effect of the iPhone and iPad release on application development. The design of MacOS 10, Windows XP, Windows 7 icons is not based on pixel-drawn icons anymore. The icons are created with photographic accuracy or modeled in 3D and scaled using antialiasing. It was the start of the skeuomorph era in design that has lasted for almost a decade.

Due to the smooth transition of colors and shades, there was an opportunity to represent glares, reflections, and imitate the surfaces of real materials. The icons used to compete with each other in complexity. They were different: three-dimensional and shining, “made” of glass and aluminum. Many people still remember the glass bubbles of SMS-chat on the first iPhones. Icons were limited due to the use of pixels and designers were quick to embrace the unlimited graphics capabilities. Since this design coincided with the beginning of the creation of sites with user-generated content, which were called Web 2.0 (in the future, social networks and blogs), the design was initially called “Web 2.0 design”.

Over time, the term “Web 2.0” fell out of favor. As a result, the design that simulates physical properties grew into a widely used skeuomorphism. However, these effects were overused. As a result, both designers and users flocked to contrast simplicity of flat and concise signs. It was not a random decision but one supported by the relevant technology.

Modern simple icons of mobile interfaces have become possible due to the high pixel density per inch of mobile devices (as well as thin and trendy fonts). The antialiasing mechanism uses two to four neighboring pixels to simulate a “single-pixel” image. When displaying icons with a line thickness of one pixel, a mathematical error occurs, and the lines may look a little broken and uneven. This is evident if the device has a traditional 72 or 96 dpi when each pixel can be seen by an unaided eye. In mobile devices, this is four times smaller, and the errors are completely indistinguishable. The designers are confident in having a beautiful display of icons in thin lines, which conceptually resemble icons on the first Macintosh computers.

The reasons not to be too enthusiastic about icons

Don’t mess with success.

Icons are often used for attention attraction. This is the right decision, but only within reason.

Prior to the era of skeuomorphism and during the first period of its predominance, there were a limited number of icons in stocks and public domains. Some 3D designers and vector illustrators used to specialize exclusively in creating icons for a specific project. This process was very time-consuming and unique.

When mankind satisfied its desire to digitize the world and had enough glass and metal buttons, highlights and reflections, icons returned to their traditional minimalist look, popularized by flat and material design. It has become technically easier to create such icons. The search query in the subject provides many options. As a result, icons are dominated by modern designs. It is a trend and there is a temptation to follow this trend effortlessly.

All trends usually have their explanations and a rational foundation. In mobile applications, icons performed in thin lines in vector format look the best. If your project is a desktop/laptop web interface of an industrial cloud service and you follow the recommendations of the mobile developers to make the icons in thin lines in vector format the end user will see these icons as being ineffective, even if you theoretically did everything right. Conventional rasterized icons are preferable because at least you can definitely capture their view.

In terms of artistic imagery and stylistic performance, icon plots are usually monochromatic and minimalistic. However, the typical image of the object will always look good. You can find these images throughout the era of the active use of icon plots in graphic design.

When viewing pictograms, icons, and signs that were done 30, 50 or even 100 years ago, you can always find some kind of repetition of what has already happened. In our culture, there is always a cyclical nature of decades. Decades later, we see the return of music or fashion preferences from the past but based on new technologies.

The influence of time and mood is inevitable but we will not see pixel art or buttons made of mahogany in mass production anymore. In the future, there may be a renaissance of skeuomorphism. It has partially returned in the form of long shadows with a hint of volume elements in a flat design.

When creating an image of an icon, one should think twice about the target audience and its level of training. Who can be trusted for user training: society, advertising, the interface or is it better for the user to gain experience independently? By trying to create the icons which will tell the users everything about the system you will face a problem – one of the famous Murphy’s laws:

“Build a system that even a fool can use, and only a fool will want to use it”.

Even an encyclopedic description of the concept of icon uses the word “specialized”. To eliminate confusion, you can always caption an icon.

When using icons, you need to remember what we want to convey to the user: a very precise meaning with all the nuances or quick information. If it is necessary to explain all the nuances and avoid misunderstanding, we use words supported by graphics rather than icons. In chatter, meaning can be conveyed by Emoji, stickers, and smiles.

If an icon does not improve the perception, it is not needed there. If you place an icon only for beauty, you should think twice whether it is really necessary. If this design looks like junk jewelry anyway, it might only cheapen your design. It is clear that it is not the author’s work, but stock images that are worth no more than a penny or even received for free.

If an icon is not functional, it is unnecessary. Functionality means assistance in a rapid search of the necessary material, attention attraction, formatting and structuring of information. Mobile interfaces, due to the shortage of space from the physical point of view (screen diagonals are from 5-10 inches), make designers use icons. However, the Web and other areas of graphic design are not burdened by this necessity. Therefore, the excessive use of icons is undesirable.

Remember:

• Icons should be understandable for your target audience.
• The wider the audience – the more common and accessible the sign that is required.
• For mobile applications, it is recommended to use icons with thin lines and in vector format. For desktop/laptop versions, classic rasterized icons are preferable.
• If the icon does not improve the perception and does not carry any function, it is better to remove it.
• If you need the icon to quickly find the information, it should be accompanied with a caption.
• Given any terms and objectives – do not make too many icons! Less is always better.

Firstly, we would like to tell you a little bit about our team. We specialize in mobile projects, which consist of many modern features, including augmented reality, which we discovered and started to learn about some time ago.

And here’s our story about the greatest discovery we made within two days. No chance you will ever guess it! It’s all about creating an augmented reality on our own!

We are sure everyone knows about the latest achievements in such fields as computer graphics, virtual and augmented realities in video games, promo, demo versions of applications and so on. No doubt, today such things look very impressive, considering the fact that five years ago all of it seemed far away in the future. Sometimes it seems like a fantasy world has already come knocking on our door.

Nevertheless, we have to tell you that not all of these things are as simple as they seem.

In practice, all of these features are extremely difficult. Trust us, when you try to deliver them to our world, you are going to be faced with all kinds of insuperable problems. Eventually, it may just seem like too much of a hassle!

First steps on our way to success

As usually happens, we spent one evening in an attempt to solve all kinds of problems connected with studying and comprehending augmented reality. We didn’t know what to do, but we had to do something, since we needed to complete our task. Time went by…

We experienced only feelings of fatigue and hopelessness, wishing we were somewhere else. We remembered about Oculus Rift, Google Cardboard and other similar things. Once more, we were surprised about such a thing as Cardboard, which literally gives everyone the chance to see and feel another reality, and it costs so little.

At some point someone slipped in the thought: our real world looks different if we look at it by means of virtual reality. Then, as usually happens, there was lots of giggling and hours of discussion and counter-argument. Then we finally decided to check it out in practice.

What a pity – we did not have a Cardboard but …. we had two iPhones instead! Two eyes, two cameras and two iPhones – what else did we need?

We decided to observe the world using an iPhone camera and to check if we were right. Then we remembered that we did need something, in the place between our eyes and the screen. In half an hour of frenzied discussion about virtual reality glasses, we concluded that Google Cardboard was the right choice, if we compare its price and quality. We did not want to reinvent the wheel and embarked upon the usual collection of lenses and a magnifying glass. Previously we had agreed that this would be more suitable for a prototype.

Sometimes we wonder how it happens that we badly need something but it is just not there. So, we went to the nearest shop and bought magnifying lenses. There were several options, which differed in size and optical power. You would not believe it, but we had a confab near the counter to decide what type of lenses would suit us best of all! As a result, we also bought some plasticine, which would be of great help as a fixing material.

It took us no more than five minutes to rush back to our office. Then we all in turn scrutinized our prototype, estimating nuances of perception. The world through iPhone cameras looked surprisingly complete, even a little cartoonish. The feeling was similar to what you get at a 3D movie theater; the only difference being that all actions happen in the immediate vicinity.

This could have been where the story ends…

Unusual thinking – the core of the success

However, we were really inspired by the results. We wanted to continue our search for what we wanted to achieve. Firstly, it became clear to all of us that we needed to create a more reliable construction since plasticine does not hold an iPhone really well, it is difficult to wipe off and the adjustments get constantly changed.

Also, some technical aspects of the future design had to be resolved, for example, the optimal distance between the eyepieces, the distance between the two iPhones, the required optical power of lenses, and the need to correct distortions.

All that we needed was at hand: an AutoCAD application and the drawing. We did have some experience with these. The very next day we had a plywood model of a Cardboard, but only for two iPhones! The effect was even better. We began thinking more about what to do next. While it was still only a project, it was very cool to look at our own legs through this device!

It did not take much time for the next idea to hit us. In fact, we were fully engaged in augmented reality, and, for example, were able to impose any pieces we liked on markers, pictures, video or three-dimensional models. After some time spent on the pros and cons of programming, we decided, for a start, to try to impose a three-dimensional model. Then, just like little kids, we watched the world through this invention and estimated the progress of humanity in the field of augmented reality.

All our assumptions, which we were afraid to voice out loud – have come true. Despite all the difficulties of imposing three-dimensional models over markers and never-ending problems with bad accuracy and stability, the world through two iPhones has turned out to be really complete.

Accuracy of definition of points and the plane of a marker have become sufficient to place any model on two iPhones in the correct position. The fact is that not only the actual model seems solid, but you can also walk around it, and get closer and examine all its details. It has become just like a part of the real world!

The greatest fruits of our labor!

We were blown away by the results. It was just like a revelation! On the one hand, it is a very obvious and simple piece of technology, which is literally available to everyone and is no more expensive than a Cardboard (of course, you need to have a second iPhone). On the other hand, the effect is much better than the usual augmented reality everyone can get via one camera.

Later it became clear that there is practically nothing comparable in real life to our creation!

Nevertheless, the most amazing thing in this story is that you do not need anything out of the ordinary in order to create a similar device. If you wish to make it, then you need just to have two identical mobile devices, for example, two iPhones.

We have an excellent device, but how do we use it?

If we use our imagination, we can think of a number of situations for which this device would be useful. Let us look, for example, at the idea which came to IKEA Store management. This company has developed an application, which, thanks to augmented reality, makes it possible for you to place a 3D model of their furniture in your interior. Such a method helps you to understand the possibilities of buying particular items of furniture: by seeing them on a scale of 1:1 you can see whether their size will suit your interior.

The device we created is similar to this application, but it has already moved into the stereo. If we consider that the stereo effect provides the possibility of estimating the depth of space, then the potential of such device becomes even greater. In addition, in the long term, such an approach would be able to improve the quality of recognition of markers and the imposition of models.

We have also decided to make a demo version of this project for all visitors who come into our office. We are planning to prepare a set of markers and we will make a new design in our office so that everyone can see an alternative world through a similar device which delivers augmented reality.

Our plans for the future

We decided to make a plan for the immediate future and set the following tasks:

• Synchronize applications on two iPhones so that animation and transformation of three-dimensional models will be synchronous;
• Make a record and process a video stream on two different devices (iPhones) simultaneously in order to receive video in stereo;
• Increase the frame rate of each layer. (It turns out that smooth display for a flat image lags while watching a video in stereo);
• Design glasses from materials which are more available on the market and overcome the current deficiency.

In our view, our device should:

• be smaller in size;
• be more convenient for hands-free use;
• allow the installation of various mobile devices.

It is important to add the possibility of adjustment for differences in people’s eyesight. In order to achieve that, we have to choose the most suitable lenses from those which are currently available on the market.

Now you can see that the model we have created can be compared to Oculus Rift and Cardboard technologies. However, if we try to look further, then we will understand that our creation can be much better than any technology on today’s market. But we need time…

Maybe you have something to share with us about your own views of this project?