Toolbar icons for GIS applications Robert Szczepanek Institute of Water Engineering and Water Management, Cracow University of Technology robert.szczepanek iigw.pl Keywords: icon, GIS, usability, GUI Abstract 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). Fig.1 Universal icons Fig.2 Domain specific icons – GIS Fig.3 Application specific icons – QGIS GIS applications are different and have different interfaces. This is good, because we like di- versity. The philosophy and implementation of GIS functions is different among applications. But do they really should use different symbols for the same objects and actions? Why traffic signs are (almost) the same among different countries? Shouldn’t we try the same in our domain? Geinformatics FCE CTU 2008 79 Toolbar icons for GIS applications 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 1 http://www.karsten-berlin.net/gisusability.php?top=games Geinformatics FCE CTU 2008 80 http://www.karsten-berlin.net/gisusability.php?top=games Toolbar icons for GIS applications http://www.merriam- webster.com http://www.thefreedictionary.com add verb 1: to join or unite so as to bring about an increase or improve- ment 4: to include as a member of a group to join or unite so as to increase in size, quantity, quality, or scope new adjective having recently come into exis- tence having been made or come into being only a short time ago; recent create verb to bring into existence to cause to come into existence Table 1 – Meaning of words: add, new and create. http://www.merriam- webster.com http://www.thefreedictionary.com erase verb 1 a: to rub or scrape out (as writ- ten, painted, or engraved letters) d: to delete from a computer storage device to remove (recorded material) from a mag- netic tape or other storage medium delete verb to eliminate especially by blot- ting out, cutting out, or erasing to remove by striking out or canceling remove verb to change the location, position to move from a place Table 2 – Meaning of words: erase, delete and remove. object cleaning without annihilation. Finally we get the following antonyms: create – delete, add – remove. How this is related to visual representation we can check in table 3. Results are based on Google picture search mechanism. First 100 hits of search were generalized. This method is neither representative nor objective, but gives a rough picture on how different actions are visualized. add 54 1 - new 4 4 9 create 7 3 4 erase – 2 14 3 delete 4 58 - 19 remove 15 31 1 4 Table 3 – Basic action icons representation based on first 100 hits in Google picture search. 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 Geinformatics FCE CTU 2008 81 http://www.merriam-webster.com http://www.merriam-webster.com http://www.thefreedictionary.com http://www.merriam-webster.com http://www.merriam-webster.com http://www.thefreedictionary.com Toolbar icons for GIS applications 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 recom- mendations 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 82 Toolbar icons for GIS applications 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 8- bit 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): � mActionAddRasterLayer.png – for adding action on raster layer � grass add vertex.png – for GRASS modules 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 Geinformatics FCE CTU 2008 83 Toolbar icons for GIS applications 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 im- portant 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. Fig.5 GRASS 6.3 toolbar. Fig.6 QGIS 1.0 toolbar. Fig.7 ArcMap toolbar. Fig.8 GeoMedia Viewer 5.2 toolbar. Geinformatics FCE CTU 2008 84 Toolbar icons for GIS applications Fig.9 gvSIG toolbar. Fig.10 IDRISI32 toolbar. Fig.11 MapInfo 8 toolbar. Fig.12 OpenJUMP toolbar. Fig.13 Thurban toolbar. Fig.14 uDig toolbar. 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. Toolbar block context Geinformatics FCE CTU 2008 85 Toolbar icons for GIS applications There are two approaches to icon design within toolbar. First one is declarative. Icon is self- explaining 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. Fig.15 Object-action method of icon design Concept 1b: Group icons by object. 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 fre- quently 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 some- times 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. Geinformatics FCE CTU 2008 86 Toolbar icons for GIS applications Fig.16 Contextual method of icon design close 84 refresh 65 10 save 60 10 edit 53 5 display 33 9 open 20 12 4 map 15 14 9 export 15 7 import 12 5 exit 11 11 9 pan 11 4 layer 6 5 show 5 1 Table 4 – Common GIS icons representation based on first 100 hits in Google picture search. The most unambiguous sign is corresponding to close action. But we decided to use it for delete action already. One of possible solutions can be use of synonym which in this case is exit action represented by . Save icon have two main symbols with predominance of . But technology changes very fast. What to do with historical object in our icons? Is it better to use physical objects or some metaphors? Concept 2: New, more neutral objects or metaphors can replace some old-technology icons. There’s a push to get rid of the file-folder metaphor and floppy disk 3,5” for saving. Icon should not rely on current technology visualisation. Those symbols are used because everyone is familiar with them. Second sign is far more neutral and universal. Similar situation is with open action, which is related to folder picture and arrows. Map icon is very difficult case. Regular connotation with globe is proper one, but not the best from GIS point of view. Second the most frequent is 3D view of paper map . On import/export example we can see problems of interpretation. In this case majority is probably right and when we export, arrow must go ”from” object. Synthesis of this action Geinformatics FCE CTU 2008 87 Toolbar icons for GIS applications with proposal of more neutral icons for open and save actions is presented on fig.17. Fig.17 Basic actions – export, import, open, save. Pan operation is represented by or fingers, but we must remember about cultural con- notations, 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 implemen- tation examples can be VirtualBox2 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 develop- ment. Recent version is available under http://www.szczepanek.pl/icons.grass. References 1. Berlin K. (2007), GIS usability games online3 2. Creating Windows XP Icons, Windows XP Technical Articles, 2001 online4 3. Designing toolbar icons, Apple Human Interface Guidelines online5 4. Gilyov Y. (2007): Designing an iconic language online 6 5. Kortunov D. (2008): 10 Mistakes in Icon Design online7 2 http://www.virtualbox.org/wiki/Screenshots 3 http://www.karsten-berlin.net/gisusability.php?top=games 4 http://msdn.microsoft.com/en-us/library/ms997636.aspx 5 http://developer.apple.com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XH \ IGIcons/chapter 15 section 9.html 6 http://turbomilk.com/blog/cookbook/usability/designing an iconic language/ 7 http://turbomilk.com/blog/cookbook/criticism/10 mistakes in icon design/ Geinformatics FCE CTU 2008 88 http://www.virtualbox.org/wiki/Screenshots http://www.szczepanek.pl/icons.grass http://www.karsten-berlin.net/gisusability.php?top=games http://msdn.microsoft.com/en-us/library/ms997636.aspx http://developer.apple.com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIcons/chapter_15_section_9.html http://turbomilk.com/blog/cookbook/usability/designing_an_iconic_language/ http://turbomilk.com/blog/cookbook/criticism/10_mistakes_in_icon_design/ Toolbar icons for GIS applications 6. Landa, M. (2007): GUI development for GRASS GIS. Geoinformatics FCE CTU 2007, Workshop Proceedings Vol. 2, Prague online8 7. Microsoft Windows Vista Development Center online9 8. Silk icons online10 9. Szczepanek R. (2008): Custom icons for GRASS online11 10. Tango Desktop Project online12 8 http://geoinformatics.fsv.cvut.cz/wiki/index.php/GUI development for GRASS GIS 9 http://msdn.microsoft.com/en-us/library/aa511280.aspx 10 http://www.famfamfam.com/lab/icons/silk/ 11 http://www.szczepanek.pl/icons.grass/ 12 http://tango.freedesktop.org/Tango Desktop Project Geinformatics FCE CTU 2008 89 http://geoinformatics.fsv.cvut.cz/wiki/index.php/GUI_development_for_GRASS_GIS http://msdn.microsoft.com/en-us/library/aa511280.aspx http://www.famfamfam.com/lab/icons/silk/ http://www.szczepanek.pl/icons.grass/ http://tango.freedesktop.org/Tango_Desktop_Project Geinformatics FCE CTU 2008 90