Toolbar icons for GIS applications

Graphical user interface is an important element of today software. Discussion on design aspects of toolbar icons is presented. Three concepts related to GIS applications are proposed. Preliminary icon set gis-0.1 oriented to usability and simplicity is outlined.


Introduction
Graphical user interfaces (GUI) become standard element of desktop applications.Toolbar icons are probably the most frequently used elements of GUI.Some of them are universal (fig.1), some are commonly used in certain domain (fig.2) and some are application specific (fig.3).If you feel familiar with GIS applications try a short quiz1 by Karsten Berlin at [1].As will be shown later, even simply icons like import and export can be misunderstood.My proposal is towards icons lerning curve shifting from application specific group to domain one (fig.4).This is more matter of symbology, not final visual implementation, so every GIS application can keep its identity untouched.I don't intend to present "the only right" solution, rather present my voice in discussion.

Fig.4 Icon learning curve
Behind the scene -meaning of words and symbols Lets start from very beginning.Analyzing different application I found that simple operations like add, new and create are treated as synonyms and often mixed in any combination.Is it correct?According to definitions in table 1 not exactly.
We can treat new and create as synonyms, but create is an action, while new isn't.They are both related to object that didn't exist, while add is used for operation on existing objects.So there are two basic actions.Create when we bring into existence.For example create layer in the sense of creation of new layer.Add when we put existing object into some group.For example add layer to composition/group of layers.Looking at object's death (tab.2) we find more serious existential problems.
The first problem is that we have cross-definition.Erase is defined by delete and remove, while delete by erase and remove (underlined).Delete and remove seems to be simpler cases.Removed objects after this operation still exist.We only change their properties.So it can be treated as reverse operation to adding.Delete operation results in annihilation of object.Erasing can be used in both context, so should be avoided or used only in sense of The most unambiguous sings are corresponding to add action, and corresponding to delete.Both are very universal and have no connotation with any specific object.For creation action I would recommend sign because is less neutral.Remove action is identified with sign but at the same time this sign is better known as delete action, so we take second the most frequent, sign.For erase action we have sign, which is not neutral.Unfortunately not better sign was found yet.
Finally, we get the following set of signs: create delete add remove erase (hopefully to be replaced in the future by more neutral sign)

Toolbar icons from GIS application perspective
Icons in toolbars are used as comfortable shortcuts to commands.Good icon should be unambiguous and easy to remember [3].Apart of artistic and visual aspects, there are also some technical issues in icon design.

Size
Due to limited area for toolbars and number of potential icons in application, one of critical elements is icon size.Icon size determines its recognizability, so we can't make it too small.But available workspace is also limited and depends on standard display resolution, which changes constantly.So icon size is compromise between screen resolutions, our perception capabilities and available space within application.Usually set of icons with different sizes is prepared.Depending on icon size different levels of detail are visualized.Suggested for Windows toolbar icon sizes are 16x16, 24x24 and 32x32 pixels [2][7].In Microsoft's recommendations we can read that for this size of icon simplification is recommended.So we forget about photorealistic pictures.GIS and CAD applications run usually on big monitors, so 16x16 pixels icons are really small ones.Two following two sizes are thus to be considered as basic.

Perspective, lights and shadows
Toolbar icons should be always flat, not 3D, even at the 32x32 size [7].In some cases this is difficult to achieve.One of such symbols is layer, which will be discussed later.According Microsoft suggestions, for flat icon lighting comes from the upper-left at 130 degrees and parallel light rays produce shadows that all have the same length and density.However use of shadows in icons at 24x24 or smaller size is not recommended [5][7].

Colors
In interface design, color is often overused.One of the most important points is that color table must be consistent, so aggressive colors close to pastel ones doesn't look good.Color Geinformatics FCE CTU 2008 is often used to communicate status.The interpretation of red, yellow, and green for status is consistent globally [7].However, color should not be used as primary medium of message.There are different methods to utilize saturation or hue to reinforce icons message.Are also other methods to play with visual effect, like gradients making picture more realistic.Toolbar icons should not use colors and design similar to other elements of interface, e.g.warning alerts [3].

File format and naming conventions
Icon for toolbar can be saved in many different formats.The most popular is still raster, but vector format seems to take this place in near future.
When drawing icon usually transparency is needed.Transparency can have 256 levels in 8bit alpha channel file formats (PNG, TIFF) or 2 levels in 1-bit case (GIF, PNG) when one color is selected as transparent.This transparent color should be chosen carefully.The most popular and safe color is magenta (#FF00FF).From raster formats PNG seems to be the most suitable, and from vector formats SVG.Presently, the complete procedure of icon design is the following: paper and pencil -initial concept, sketch vector program -primary, scalable digital version raster program -final raster version Some designers skip first or even first two steps.To make raster icons from vector file is not so straightforward, and for smaller icons picture have to be generalized.Also simply downscaling from big raster icons to smaller size doesn't work [7].
Simple and consistent naming convention of icon files can be advantageous.Good example of such consistency can be Quantum GIS (QGIS):

Icon as message
What makes an icon -shape, content, color?All mentioned elements are important but their role is different.
Icon shape changed recent years from rough 2D pictures to photo realistic visualization.Windows aero (Vista) icons set compared to previous version (XP-style) is more realistic than illustrative, toolbar icons have less detail and no perspective to optimize for smaller sizes and visual distinctiveness [7].Visualization technologies fascination will end, when we understood that effective pictogram recognition is not the matter of realism level but rather association.
Content is the most conservative element and once spread out, becomes standard de facto.Good example of such standard is icon for save operation.Everyone recognizes icon with 3,5" diskette instantly, but who in 5 years will know what is shown on that icon?Sometimes content is not directly related with function and when used in domain specific icon group can be difficult to recognize by new user.There are many discussions on that problem -should we be conservative preserving old symbols, which are part of our history or try to find better ones.
Understanding of color's role and its usage changed when accessibility started to be an important issue.Any message, including graphics, should be accessible to everyone, so color cannot be used as primary or unique method of communication.In time of globalization this is a big challenge but color related problems are even more complicated.Colors and symbols have cultural context and sometimes even religious connotations.In some places white color is related to wedding while in others with funeral.The same problem is with black.But not only the color is very sensitive element of message.Drawing forefinger we do not know often what connotation it has in other cultures.
The last important element of icon communication is context in which it exists.Left arrow can represent direction of movement, speed of movement or some conventional operation like undo, import or export.It depends on neighboring icons.Context can simplify of complicate message, so icons final location should be considered already at design stage.

Snapshot of selected GIS toolbar icons
Just to give an idea of diversity and different approaches in design on following figures (5-14) selected GIS applications toolbar are presented.

Implementation of gis-0.1 icon set for GRASS and QGIS
When designing GIS domain icons, several assumptions were taken into account.Some of them are obvious, but hard to implement like recognizability and transferability.Others are controversial, but in my opinion worth to test.GRASS (with wxPython) and QGIS were chosen for tests implementation.Both applications are ready for easy themes implementation, so everyone is able to customize icon sets.New, wxPythons-based GUI of GRASS [6] uses as standard silk icon set [8] which is nice and well designed, but not always able to address GIS needs.There are also other interesting projects related to icons development, like Tango [10], but all of them are of general purpose.

Geinformatics FCE CTU 2008
There are two approaches to icon design within toolbar.First one is declarative.Icon is selfexplaining without any additional information.Making icon for "add layer" we need object (layer) and action (add) picture.Second one is simplified (contextual).In this approach we divide toolbar to caption with object (inactive) and icons with only actions.So "add layer" can be represented just by action (add) and the object will be known from context -layer toolbar.
Concept 1a: Where possible, decompose object from action and create icons consisting of both elements.This concept is based on methodology described be Y.Gilyov [4].Icon can be solid or contain two elements -object part and action.Where possible, object-action approach should be used.If action primitives are well defined, they become reusable.It simplifies regonizability.Good example in this direction is 'add' action, which is used in wide range of icons.Action part should be placed probably in lower right part of the icon, framed by semi-transparent background (fig.15).Transparency enables partial use of action area by object part, while not disturbing too much action part.There is only one limitation.As space for action part is very limited, action primitive must be really simple.The second (contextual) design is probably more scalable and easier to implement especially for small size icons.We need just one set of action icons for any object -add, remove, etc.In many applications it is difficult to figure toolbar context.Usually we know it just because we use application, but for beginner this is a big challenge.
Sometimes simplified design leads to misunderstanding.The most popular and most frequently used icons (new, open, save) are first in toolbar.But they are without any additional information.We know that they correspond to the root object in object's tree.But sometimes it is difficult to guess what is the root object.In GIS application it can be composition (IDRISI), mapset (GRASS), project (QGIS) or maybe something else.Why not to show it explicitly.
Here we come to conclusion -every simplified toolbar should have at the beginning graphical caption (icon) representing object (fig.16).Of course the visual representation should be different from action icons.

Content
Icon should be simple and easy to guess.Let's analyze GIS related symbols from table 4.  Pan operation is represented by or fingers, but we must remember about cultural connotations, so this sort of signs should be avoided.So for pan we choose .Layer object is represented by three parallel rectangles with supremacy of 2D view.Show operation is assigned human eye sign .

Explicit or not
Last concept is based on observation that for fast and easy perception not whole object is needed.
Concept 3: Not whole object or symbol must be shown, to be recognized properly.
This can be seen in favicons design and in some modern interfaces.One of good implementation examples can be VirtualBox 2 interface.If properly designed, this could solve problem with very limited size of icon.At this stage of research implementation of this concept was not tested yet.

Final note
Presented concept and practical implementations of gis-0.1 icons set are still under development.Recent version is available under http://www.szczepanek.pl/icons.grass.

Fig. 15
Fig.15 Object-action method of icon design

Table 1 -
Meaning of words: add, new and create.

Table 3 -
Basic action icons representation based on first 100 hits in Google picture search.