'I don’t care if you like the design! I want to know if you understand the meaning!'
That's a phase I often use. It's a modification of a quote by Antoine de Saint-Exupery: 'I don’t care if you like it! I want to know if you understand it!' (The Little Prince)
I use it again and again because in the first step what we have to keep in mind is that design is no art - art asks questions, while design answers them.
Design has an objective, a task, a purpose ... Design is there to fill a need.
OK in the second step after I saw that my user understood the design and the tiny elements 'icons' - for sure I love it if s/he likes the design. :-)
In my opinion the perception of UPLOADING is to shift something one level higher e.g. to shift a content from a personal source to a more global source (e.g. cloud). The perception of DOWNLOADING is to shift something one down. And finally the perception of SHARING is to shift something on one level to one or more receptions.
That’s why I came up with these icons …
… but they are for sure not the best practice - because it’s my perception - The problem with icons is that the person who is watching at the particular icon is associating different meanings with each icon based on the unique past experience, learnings and knowledge. For example experience with share icons - with the general open share icon, the one of Google Android, the version of Microsoft and Apple.
The first and main characteristic of icons is that icons have to be simple. Regardless of whether they are flat two-dimensional drawing or a black silhouette, or complex, presenting a combination of graphic design elements such as one or more linear and radial color gradients, projected shadows, contour shades, and three-dimensional perspective effects.
An Icon represents always a meaning e.g. a function or material entity. And I firmly believe that it’s important having an idea of semiotics. Semiotics is the study of meaning-making, the theoretical knowledge and learnings osigns, indices (indexes), icons, and symbols.f This includes the study of signs and sign processes (semiosis), analogies, indication, labeling, metaphor, symbolism, signification, and last but not least communication – because finally a icon has to carry an information. Semiotics is closely connected to the field of linguistics (language form, language meaning, and language in context), which, for its part, studies the structure and meaning of language more specifically. As different from linguistics, however, semiotics also studies non-linguistic sign systems.
In the physical world Icons and symbols are all round us at home, in the city etc.. These signs are always telling us what to do or better stop doing something. - E.g. Adjusting the speed - Stopping at an intersection - etc.
Don't get me wrong I really really love good symbols and icons, but what I learned out of various projects in the real world as architect and town planner and especially in the virtual world of web and software projects it's very hard and difficult getting icon design right and that testing is a must-have. The more abstract the meaning is the more likely it will be that the icon work well.
Three aspects to consider ...
UX
You will have different considerations - regardless whether we are designing for a small manageable group of people or rather than for a application that may be used internationally. When creating icons, experience, preferences, cultural considerations and and and are important. Symbols may differ for common elements you may use for your designs.
Simple and Iconic
While a level of realism can add interest to an icon design, it should not replace its ability to function simply and effectively. You should always keep in mind what we know and learned about iconicity.
Icons should be simple. Regardless of whether they are flat two-dimensional drawing or a black silhouette, or complex, presenting a combination of graphic design elements such as one or more linear and radial color gradients, projected shadows, contour shades, and three-dimensional perspective effects.
As I wrote before icons represent always meanings and icons are like letters of an alphabet and behave like a language - it has to follow always the same visual and grammatical rules.
You should always ask yourself is my design clear and easy and not too complicated, crammed, woolly, etc..
Be wary of placing too much details and items into an icon or overly illustrating an icon. Icons should show unique characteristics of an action, feature or the product or group.
Design for the dimension
In a world of Responsive Design and highly diverse screen resolution and screen sizes - smart watches, smartphones, phablets, tablets, laptops, desktop, interactive windows and boards - it’s tempting to design with a vector software like Adobe Illustrator, Concept Draw, sketch up or Microsoft Visio . But that will go bad and will backfire - because what looks great at a big size and zoom will appear fuzzy and faint at a small size as we use it for thumbnails.
Ultimately and at the final appearance you need a optimized design for each resolution. Using a vector software in order to develop the initial design is an appropriate starting point. When you have you initial icon you have to clean it up in a raster graphics editing software like Adobe Photoshop, Gimp or e.g. Corel Photo paint.
There is another way to do it like SAP does it with Fiori. Fiori is using an Icon Font. The SAP icon font consists of scalable pictograms. The icons are essentially vector graphics. Thus, they can easily be resized without compromising their appearance. ( https://experience.sap.com/fiori/ )
As I wrote before 'I love icon' - but as much as I love icons and their opportunities, power and force - as much I know the dark side of the force.
A number of researches and well known 'bad' examples, like Microsoft's toolbar and ribbon, clarified that icons are hard to remember, learn, link to meanings and that's why they are often not useful and all too often inefficient . The past Microsoft toolbar which showed only icons had poor usability and changing the icons and location didn't help much - Microsoft had to introduce labelings next to the icons. And gave the user the option to disable the labelings later when they learned the icons. On the spot these labels solved the usability issues and the users started to use the toolbar options.
Again and again during testings we face issues with icons when they symbolize anything abstract or actions like save, share ... It's a difficult task showing a interaction, feature or product with a image no matter whether we talk about a icon, symbol or index. It's true - icons are used by toolbars for interactions. But as I just mentioned even a well-known software like the one of Microsoft has usability issues. But we should never forget toolbars are intended for experienced users and nonetheless users are frequently confused by a rag-bag of symbols. The averaged Microsoft user knows only 6 toolbar elements after regularly using the software for 2 years.
In general icons save space but simultaneously all too often at the price of recognition. Power users often do not know the icons they often just know or remember the physical position of controls. The position of a control is learned so much quicker than the icon itself. Researchs and testings revealed that you can substitute an icon but as long as you leave location unchanged your user will not be confused because the user didn't noticed the substitute. However if you shift the location and keep the icon the same users will become confused. Sometimes I think the time the average user will take to identify an icon's meaning is reciprocal to the time the design team needed to agree on the icon.
For instance if we peer at 16x16 pixel icons - a very common icon dimension - 256 pixels corresponds roughly to 0.03% or less of a common browser dimension. And 256 pixels provide very limited space and options to show significance and meaningfulness. If we peer now at one dimension bigger e.g. at 32x32 pixel it can help recognition and understanding - but 32 pixels in one line is often a good number to use a labeling especially if you use a well recognizable pixel font. 32 pixels at width and height take much space and you should consider using the space for a clear text label. If space is limited it's often better of using abbreviated labels than icons.
A mouseover text or another kind of tooltip might be a solution for a few applications but you will meet huge challenges when you have to transfer this approach on touch interfaces.But finally it's just a workaround and is not a real solution.
At the beginning of this article I mentioned that thinking about Sharing Icon was one motivation to write this article.
Sharing something with a certain person, with friends or colleagues and to a social network or via email is a ubiquitous action nowadays but we still haven't been able to reach a consensus on what symbol to use to represent it. And as long as we can’t reach a consensus on a homogeneous symbol our users can’t get familiar with the symbol.
Not only does each major platform use a different icon, but each has witnessed changes over the years.
Take a look at this screenshot - it’s the result if you are looking for share icons on Google:
… I am sure you saw most of them and if you are a power user I am also sure that you are familiar with these..
Two simple rules for better icon design
1st rule: Rely on recognition
I know we all love to be creative and innovative - but ask yourself: Is it necessary to reinvent the wheel - unless it’s absolutely necessary. Use familiar icons that became an industry standard. We all know that a little floppy disc icon is “save”; you can’t make that any easier or clearer. This remains true even when the last floppy disc to be used is gone. And just a few of us, including myself, started to work with data cassettes, floppy disks, and other stone-age storage media :-)
And you should avoid overlap or similarity between items - Make things obvious.Finally even if it’s hard, we should accept if once there’s a cultural agreement on what an icon means; the thing that inspired the icon doesn’t have to be around anymore - unless it’s absolutely necessary.
2nd rule: Keep it simple
You need to be clear, simple and easy. That means your icon should ‘say’ what it means and mean what it ‘says’. If you’re uncertain as to whether your text is clear – test it with some users or anyone who is not part of your design team. If they don’t get it; go back to the drawing board.
I became motivated to write this article during the last few months and projects and thinking about sharing, downloading and uploading. And by doing this I had to go the way I mentioned before - I had to think about these actions again - to think new about something I thought I knew well ...
I started my article with a quote and I will close it with a quote. Albert Einstein is purported to have said, “Make things as simple as possible, but not simpler”.
That's a phase I often use. It's a modification of a quote by Antoine de Saint-Exupery: 'I don’t care if you like it! I want to know if you understand it!' (The Little Prince)
I use it again and again because in the first step what we have to keep in mind is that design is no art - art asks questions, while design answers them.
Design has an objective, a task, a purpose ... Design is there to fill a need.
OK in the second step after I saw that my user understood the design and the tiny elements 'icons' - for sure I love it if s/he likes the design. :-)
In my opinion the perception of UPLOADING is to shift something one level higher e.g. to shift a content from a personal source to a more global source (e.g. cloud). The perception of DOWNLOADING is to shift something one down. And finally the perception of SHARING is to shift something on one level to one or more receptions.
That’s why I came up with these icons …
… but they are for sure not the best practice - because it’s my perception - The problem with icons is that the person who is watching at the particular icon is associating different meanings with each icon based on the unique past experience, learnings and knowledge. For example experience with share icons - with the general open share icon, the one of Google Android, the version of Microsoft and Apple.
The first and main characteristic of icons is that icons have to be simple. Regardless of whether they are flat two-dimensional drawing or a black silhouette, or complex, presenting a combination of graphic design elements such as one or more linear and radial color gradients, projected shadows, contour shades, and three-dimensional perspective effects.
An Icon represents always a meaning e.g. a function or material entity. And I firmly believe that it’s important having an idea of semiotics. Semiotics is the study of meaning-making, the theoretical knowledge and learnings osigns, indices (indexes), icons, and symbols.f This includes the study of signs and sign processes (semiosis), analogies, indication, labeling, metaphor, symbolism, signification, and last but not least communication – because finally a icon has to carry an information. Semiotics is closely connected to the field of linguistics (language form, language meaning, and language in context), which, for its part, studies the structure and meaning of language more specifically. As different from linguistics, however, semiotics also studies non-linguistic sign systems.
In the physical world Icons and symbols are all round us at home, in the city etc.. These signs are always telling us what to do or better stop doing something. - E.g. Adjusting the speed - Stopping at an intersection - etc.
Don't get me wrong I really really love good symbols and icons, but what I learned out of various projects in the real world as architect and town planner and especially in the virtual world of web and software projects it's very hard and difficult getting icon design right and that testing is a must-have. The more abstract the meaning is the more likely it will be that the icon work well.
Three aspects to consider ...
- Users’ experience
- Simple and iconic Design
- Design for the final dimension
UX
You will have different considerations - regardless whether we are designing for a small manageable group of people or rather than for a application that may be used internationally. When creating icons, experience, preferences, cultural considerations and and and are important. Symbols may differ for common elements you may use for your designs.
Simple and Iconic
While a level of realism can add interest to an icon design, it should not replace its ability to function simply and effectively. You should always keep in mind what we know and learned about iconicity.
Icons should be simple. Regardless of whether they are flat two-dimensional drawing or a black silhouette, or complex, presenting a combination of graphic design elements such as one or more linear and radial color gradients, projected shadows, contour shades, and three-dimensional perspective effects.
As I wrote before icons represent always meanings and icons are like letters of an alphabet and behave like a language - it has to follow always the same visual and grammatical rules.
You should always ask yourself is my design clear and easy and not too complicated, crammed, woolly, etc..
Be wary of placing too much details and items into an icon or overly illustrating an icon. Icons should show unique characteristics of an action, feature or the product or group.
Design for the dimension
In a world of Responsive Design and highly diverse screen resolution and screen sizes - smart watches, smartphones, phablets, tablets, laptops, desktop, interactive windows and boards - it’s tempting to design with a vector software like Adobe Illustrator, Concept Draw, sketch up or Microsoft Visio . But that will go bad and will backfire - because what looks great at a big size and zoom will appear fuzzy and faint at a small size as we use it for thumbnails.
Ultimately and at the final appearance you need a optimized design for each resolution. Using a vector software in order to develop the initial design is an appropriate starting point. When you have you initial icon you have to clean it up in a raster graphics editing software like Adobe Photoshop, Gimp or e.g. Corel Photo paint.
There is another way to do it like SAP does it with Fiori. Fiori is using an Icon Font. The SAP icon font consists of scalable pictograms. The icons are essentially vector graphics. Thus, they can easily be resized without compromising their appearance. ( https://experience.sap.com/fiori/ )
As I wrote before 'I love icon' - but as much as I love icons and their opportunities, power and force - as much I know the dark side of the force.
A number of researches and well known 'bad' examples, like Microsoft's toolbar and ribbon, clarified that icons are hard to remember, learn, link to meanings and that's why they are often not useful and all too often inefficient . The past Microsoft toolbar which showed only icons had poor usability and changing the icons and location didn't help much - Microsoft had to introduce labelings next to the icons. And gave the user the option to disable the labelings later when they learned the icons. On the spot these labels solved the usability issues and the users started to use the toolbar options.
Again and again during testings we face issues with icons when they symbolize anything abstract or actions like save, share ... It's a difficult task showing a interaction, feature or product with a image no matter whether we talk about a icon, symbol or index. It's true - icons are used by toolbars for interactions. But as I just mentioned even a well-known software like the one of Microsoft has usability issues. But we should never forget toolbars are intended for experienced users and nonetheless users are frequently confused by a rag-bag of symbols. The averaged Microsoft user knows only 6 toolbar elements after regularly using the software for 2 years.
In general icons save space but simultaneously all too often at the price of recognition. Power users often do not know the icons they often just know or remember the physical position of controls. The position of a control is learned so much quicker than the icon itself. Researchs and testings revealed that you can substitute an icon but as long as you leave location unchanged your user will not be confused because the user didn't noticed the substitute. However if you shift the location and keep the icon the same users will become confused. Sometimes I think the time the average user will take to identify an icon's meaning is reciprocal to the time the design team needed to agree on the icon.
For instance if we peer at 16x16 pixel icons - a very common icon dimension - 256 pixels corresponds roughly to 0.03% or less of a common browser dimension. And 256 pixels provide very limited space and options to show significance and meaningfulness. If we peer now at one dimension bigger e.g. at 32x32 pixel it can help recognition and understanding - but 32 pixels in one line is often a good number to use a labeling especially if you use a well recognizable pixel font. 32 pixels at width and height take much space and you should consider using the space for a clear text label. If space is limited it's often better of using abbreviated labels than icons.
A mouseover text or another kind of tooltip might be a solution for a few applications but you will meet huge challenges when you have to transfer this approach on touch interfaces.But finally it's just a workaround and is not a real solution.
At the beginning of this article I mentioned that thinking about Sharing Icon was one motivation to write this article.
Sharing something with a certain person, with friends or colleagues and to a social network or via email is a ubiquitous action nowadays but we still haven't been able to reach a consensus on what symbol to use to represent it. And as long as we can’t reach a consensus on a homogeneous symbol our users can’t get familiar with the symbol.
Not only does each major platform use a different icon, but each has witnessed changes over the years.
Take a look at this screenshot - it’s the result if you are looking for share icons on Google:
… I am sure you saw most of them and if you are a power user I am also sure that you are familiar with these..
Two simple rules for better icon design
1st rule: Rely on recognition
I know we all love to be creative and innovative - but ask yourself: Is it necessary to reinvent the wheel - unless it’s absolutely necessary. Use familiar icons that became an industry standard. We all know that a little floppy disc icon is “save”; you can’t make that any easier or clearer. This remains true even when the last floppy disc to be used is gone. And just a few of us, including myself, started to work with data cassettes, floppy disks, and other stone-age storage media :-)
And you should avoid overlap or similarity between items - Make things obvious.Finally even if it’s hard, we should accept if once there’s a cultural agreement on what an icon means; the thing that inspired the icon doesn’t have to be around anymore - unless it’s absolutely necessary.
2nd rule: Keep it simple
You need to be clear, simple and easy. That means your icon should ‘say’ what it means and mean what it ‘says’. If you’re uncertain as to whether your text is clear – test it with some users or anyone who is not part of your design team. If they don’t get it; go back to the drawing board.
I became motivated to write this article during the last few months and projects and thinking about sharing, downloading and uploading. And by doing this I had to go the way I mentioned before - I had to think about these actions again - to think new about something I thought I knew well ...
- Understanding the action or the product
- Abstracting the action or unique attributes
I started my article with a quote and I will close it with a quote. Albert Einstein is purported to have said, “Make things as simple as possible, but not simpler”.
Comments
Post a Comment