Role of pictograms in online communication

Nikolina Begovi, Katarina Blaevi and Ivana Jaki

nbegovic@ffos.hr, kblazevic@ffos.hr, ijakic1@ffos.hr
Josip Juraj Strossmayer University of Osijek, Information Sciences at Faculty of Humanities and Social
Sciences, L. Jgera 9 31000 Osijek

Keywords: pictograms, icons, online communication, digital age

Abstract
According to English encyclopedia, pictogram is a symbol, or a picture that represents an
object or a concept; for example, a picture of an envelope represents an e-mail message.
When talking about pictograms on computer interfaces, they are commonly known as 'icons'.
Nowadays, icons and symbols are all around us and we do not even pay attention to them
anymore, but without them our life would surely be more difficult. The best examples are
traffic signs that enable us functional road traffic.
In the world of online communication pictograms have a special place. According to Aurora
Bedford, user experience specialist at Nielsen Norman Group in California, icons must first
and foremost communicate meaning in a graphical user interface. Icons allow faster
information flow in case users speak other language, or have limited language abilities. They
have unique graphical meaning which, with time, has become recognizable and allows us
easier informing regarding to textual information.

Nowadays, they come in different packages that can be useful while choosing icons for
websites. For example, the most popular icon providers are Microsoft with 625, and Google
with 404 available icons. Also, they come in different formats like .svg, .png, .jpg, .gif, .psd
etc. and they are going to be explained through this research. Seven packages within 2,653
accessible packages are going to be analysed and compared. In addition, the most used icons
that come from those packages will be visually compared. The expected results will show the
difference between various manifestations of icons, how much space they occupy in online
communication, the most used formats, their purpose in online communication, and how
many of them can be purchased freely. Furthermore, it will be discussed whether so many
different icons with the same meaning which differ from each other only in small proportions
should be used, or should they be universal. Today, most of the icons are widely recognizable
and they represent same thing in every operating system, on every web page or at some other
places where they appear, same as traffic signs do in every country because they have
identical shape and appearance.

Introduction
With the Web content use increase, there has also been an increase in needs for symbols that
would replace the words. Because of the industrial revolution and globalisation, people
worldwide have been establishing themselves in foreign countries, where language and
culture diverse from theirs, but at the same time using the same technologies to work and
communicate. This is what is called a universal lifestyle. In order for this to work we need to
communicate in an universal language that everyone can understand, no matter what ones
language or culture is1. That language is based on pictograms which role is to connect people
on the global range with universal images that allow easier managing in online space.
According to English encyclopedia, pictogram is a symbol, or a picture that represents an
object or a concept; for example, a picture of an envelope represents an e-mail message 2.
Pictograms must be clear, understandable, and must represent warnings, prohibitions, and
rules and allow users to quickly access the information. When talking about pictograms on
computer interfaces, they are commonly known as 'icons'. According to Aurora Bedford, user
1

Saffron Interactive. A brief history of pictograms and ideograms. Retrieved December 10, 2014 from:
http://saffroninteractive.com/a-brief-history-of-pictograms-and-ideograms/
2
English encyclopedia.Pictogram. Retrieved November 15, 2014 from http://www.encyclo.co.uk/meaning-ofPictogram

experience specialist at Nielsen Norman Group in California, icons must first and foremost
communicate meaning in a graphical user interface 3. Designers and developers have been
detecting new situations and functionalities where this style of communication is applied. This
basically means that we have gone from a few universally understood and recognized
pictograms to hundreds of thousands of icons employing the same simple visual vocabulary4.
From the beginnings of using icons on the Web until now, the number of icon packages has
constantly been increasing. Is it possible that there is a need for so many of them? That
question leads us to the hypothesis of this research, which is the questionable existence of too
many icon packages with the icons of the same meaning.

Research
While browsing the Internet, the information tells us that there are 2,653 different icon
packages, and among them the most popular are Microsoft with 625, and Google with 404
available icons. Specimen was defined by in advance determined population from which
seven different but interrelated packages were chosen. Specimen was selected by browsing
and viewing various websites with different icon packages. Research was carried out by
content analysis. Content analysis is defined as "Analysis of the manifest and latent content of
a body of communicated material (as a book or film) through a classification, tabulation, and
evaluation of its key symbols and themes in order to ascertain its meaning and probable
effect."5 With further research, packages were compared by seven different categories:

the name of the package

the source
the number of icons
the format
the size
the model
the purpose

Aurora Bedford.(2014). Icon Usability. Retrieved November 10, 2014 from:

http://www.nngroup.com/articles/icon-usability/
4
Pixel resort designed by Michael Flarup. How and when to use pictograms?. Retrieved December 5, 2014
from: http://www.pixelresort.com/blog/how-and-when-to-use-pictograms/
5

Powell, Ronald R.; Connaway, Lynn Silipigni. (2004). Basic Research Methods for Librarians. Library and
Information Science Text Series. Westport, Connecticut and London: Libraries Unlimited.

The name of the package and the source define which package it is about. Number of icons in
package tells us how many different icons there are in the observed package. The format
category are lists with formats of icons such as .svg, .png etc. The size category describes the
size of each icon in the package. The model defines the manner in which icons are available;
whether they can be downloaded freely or only be purchased. The last category is purpose
which states for what devices the observed icons are intended. During the research, all of the
free packages were downloaded so we could define value of previously listed categories.

Table 1. Research of icon packages

It is visible from the Table 1 that packages mainly differ in number of icons. The smallest of
the observed packages is Iconic which consists of 233 different icons, and the largest is
Freepik with 38893 different icons. Most of the icons are saved in .png and .svg formats. But
some of them are also downloadable in other formats such as .psd, .eps, .ai, .pdf and .xmal.
The size of each icon is ranged from 1 to 3 kilobytes, depending on the package. Material
design icons, Iconmonstr and Freepik allow choosing the size of icons before you start
downloading, so users can save the version which is the most suitable for their website. Every
package allows at least one part of the icons to be freely downloaded. Windows 8 and
Minicons allow downloading several icons of their choice for free, but if you want the whole
package you have to pay some price. Windows 8 allows free downloading only of .png format
and other formats are to be purchased. The price range of the expanded package is $149 to
$249, and Minicons offers expanding the package by the price of $59. It is clear that more
popular icon packages put a bigger price on their product. We can also see in the table that the
purpose of every package is to display icons on various operating systems. That is very useful

because nowadays the number of operating systems has been increasing. Some of the icons
are intended for Windows, Android and iOS, and the other ones are intended for web design
and frameworks. Iconmonstr is the only one of observed packages that is intended for all
platforms. Packages which are intended for web design and frameworks can be downloaded
in the form of a code which can be implemented in html and css files.

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

For the second part of the research, seven recognizable icons from every package have been
chosen for comparison, so we could determine their differences and similarities. Icons were
chosen by criterion of representation in online environment, i.e. their popularity. While
visiting different web pages with different packages of icons, the observation was made that
there are icons of the same purpose included in the same package. Icons that we chose for
further comparison are: home, facebook, wifi, download, lock, search and email. Pictograms that can be purchased free are represented on attached pictures. The first
detected similarity between chosen icons is their colour - all of them are coloured black and
white. Icons in packages contain different spectrum of black colour, so some of them are pale
black and the other ones are black. Furthermore, all icons contain common form, which is
necessary, in order to know that they communicate the same information. One of the
differences that was detected is their design. Some of the observed icons from different
packages have form of the circle, others are shaped as square with rounded or sharped edges.
Even though, at first, it seemed that all icons are of the same quality; because on the web page
they are shown in the same resolution, they are actually not, and that can be seen if their
default size downsizes or magnifies.
Discussion
The picture superiority effect says that pictures are remembered better than words, especially
when people are casually exposed to the information and the exposure is for a very limited

time.6 As a result, icons have generally become common in communication. Icons are
pictorial symbols that are designed more freely and in greater details than pictograms, and
have to follow less formal criteria. Their objective is to visually communicate certain
company-specific issues and objects in an accessible way.7 It is also important that each
symbol has a fixed meaning; otherwise, there is a risk of too many interpretations, sometimes
not correct ones.8 Some of the previous researches discussed about roles of pictograms in
everyday communication and about their recognisability for different types of people and
cultures. One of them is research named The design, understanding and usage of
pictograms which explains the usage of pictograms in everyday life. It was also concluded in
that research that compared to just textual information pictograms are better and easier for
recognition. Besides that, they can be used in numerous situations where verbal message is
not possible or appropriate. Mostly, their effectiveness should be measured by ability of
people to understand them. Good pictogram should consist of little details and be easy to
understand.9 Since there are so many different packages of icons, every icon in that package
should have specific design that would not be repeated on other icons. This raises the question
whether so many packages of icons are necessary. There can be found icons for the same or at
least similar purpose inside of every package. Every icon has specific appearance and they
differ one from another. They can be found in different shapes, line thickness, formats and
sizes. Besides that, there are simpler and more complex icons. More complex icons are the
ones that with their basic black and white colour have some other colours, too. Because of
that it is necessary to have so many different packages of icons.

Conclusion
6

Presentation zen. Picture superiority effect, pictograms & culture. Retrieved December 9, 2014 from:
http://www.presentationzen.com/presentationzen/2007/04/
7

RWE Corporate Identity. Pictograms, icons and key visuals guidelines. Retrieved December 10, 2014 from:
http://www.rwe.pl/web/cms/mediablob/pl/2364052/data/1028718/1/start/dla-dostawcow/przetargi/RWEguideline-pictograms-r1-21.pdf
8

Falck, Kerstin. The Practical Application of Pictogram. Retrieved December 9, 2014 from:
http://static.pictosys.se/pictogram/practicalapp_pictogram.pdf
9

Tijus, Charles...[et al.]. (n.d). The design, understanding and usage of pictograms, pp. 1-22. Retrieved
December 11, 2014 from http://www.cognition-usages.org/chart/dmdocuments/inrets22.pdf

Pictograms have become part of everyday communication. It is impossible to imagine the

world without them. Their usage is global and their meaning tries to adjust so it can
communicate the same information in countries all around the world. More and more people
use pictograms in order to exchange information. Also, they are used as resources for
communicating information on airports or in traffic and in all other places where it is
necessary to warn people or point out something, where words would not be appropriate or
they would be redundant in those situations. Therefore, the transfer of information from one
side of the world to another has become faster. Since pictures are considered to be the easiest
way of communication that can transfer lots of information, they have also been chosen for
communication in online world. Pictograms are more informative than words and that means
that they are faster in attracting the attention of users. As a result, the time needed for
receiving information out of online environment has been decreased.
Two researches were conducted in this paper. The first one, where the different packages were
compared based on categories, it was concluded that most packages are available freely, but
there are also the ones that can be purchased. Also, packages can contain icons in various
formats so users have wider choice to satisfy their needs. It was compared on which operative
systems different packages of icons can be used and it was concluded that most of the
packages nowadays try to adjust to the most common operative systems. The second research;
where various icons were compared, showed that they are mostly very similar. However, there
are small differences that justify existence of numerous icon packages. Mentioned differences
are important for designers because they offer them more choice in choosing icons that suit
their design the best.
Assumed hypothesis of this paper has been proved correct. It would be much easier for users
to choose wanted icon package if there were less packages. As it has been said before, all of
the observed packages contain icons with the same meaning with a slight of differences in
their appearance. It would be quite enough if there were several packages with different
purpose, i.e. for different operating systems.

Literature:

1. An open source icon set. (n.d). Open icon: An open source icon set with 233 marks in
SVG, webfont and raster formats. Retrieved November 13, 2014 from
https://useiconic.com/open/
2. Aurora Bedford.(2014). Icon Usability. Retrieved November 10, 2014 from:
http://www.nngroup.com/articles/icon-usability/
3. Austin Andrews. (n.d). Material design icons. Retrieved November 10, 2014 from:
http://materialdesignicons.com/
4. Austin Andrews . (n.d). Modern UI icons. Retrieved November 10, 2014 from:
http://modernuiicons.com/
5. English encyclopedia.Pictogram. Retrieved November 15, 2014 from
http://www.encyclo.co.uk/meaning-of-Pictogram
6. Falck, Kerstin. The Practical Application of Pictogram. Retrieved December 9, 2014
from: http://static.pictosys.se/pictogram/practicalapp_pictogram.pdf
7. Freepik . (2010). All categories icons. Retrieved November 10, 2014 from:
http://www.freepik.com/free-icons
8. Iconmonstr . (2014). Flip Chart 2 Icon. Retrieved November 10, 2014 from:
http://iconmonstr.com/flip-chart-2-icon/
9. Pixel resort designed by Michael Flarup. How and when to use pictograms?. Retrieved
December 5, 2014 from: http://www.pixelresort.com/blog/how-and-when-to-usepictograms/
10. Powell, Ronald R.; Connaway, Lynn Silipigni. (2004). Basic Research Methods for
Librarians. Library and Information Science Text Series. Westport, Connecticut and
London: Libraries Unlimited.
11. Presentation zen. Picture superiority effect, pictograms & culture. Retrieved December
9, 2014 from: http://www.presentationzen.com/presentationzen/2007/04/
12. RWE Corporate Identity. Pictograms, icons and key visuals guidelines. Retrieved
December 10, 2014 from:
http://www.rwe.pl/web/cms/mediablob/pl/2364052/data/1028718/1/start/dladostawcow/przetargi/RWE-guideline-pictograms-r1-21.pdf
13. Saffron Interactive. A brief history of pictograms and ideograms. Retrieved December
10, 2014 from: http://saffroninteractive.com/a-brief-history-of-pictograms-andideograms/
14. Tijus, Charles...[et al.]. (n.d). The design, understanding and usage of pictograms, pp.
1-22. Retrieved December 11, 2014 from http://www.cognitionusages.org/chart/dmdocuments/inrets22.pdf
15. Vicente Le Moiqon. (2013). Minicons: 210 free vector icons FOR WEB DESIGN &
WIREFRAMES. . Retrieved November 10, 2014 from:
http://www.webalys.com/minicons/icons-free-pack.php
16. Visual Pharm LLC . (2014). Icon packs for windows 8, ios 7 and android. Retrieved
November 10, 2014 from: http://icons8.com/