Projects/Usability/HIG/IconDesign: Difference between revisions
(Created page with "{{Under_Construction}} * Apply metaphors only once (e.g. do not use a brush twice for different options). * Rethink conventionally used metaphors (e.g. the clipboard icon of ...") |
No edit summary |
||
| Line 1: | Line 1: | ||
__NOTOC__ | |||
==Purpose== | |||
Icons are pictorial representations of functions and objects, important not only for aesthetic reasons as part of the visual identity of a program, but also for utilitarian reasons as shorthand for conveying meaning that users perceive almost instantaneously. Well-designed icons improve the visual communication and strongly impact users' overall impression of visual design. Last but not least, icons are space-saving and improve usability by making programs, objects, and actions easier to identify, learn. | |||
* Apply metaphors only once (e.g. do not use a brush twice for different options). | == Guidelines == | ||
* Rethink conventionally used metaphors (e.g. the clipboard icon of paste). | * Create icons with varying sizes in respect to the level of design. Simply scaling down (or up) does not work. | ||
* Antiquated metaphors might work well (e.g. a floppy is not necessarily outdated to represent save). | * Design icons with a small number of metaphors [1]. | ||
* Adjust the degree of abstractness according to familiarity of the metaphor. | ** Apply metaphors only once (e.g. do not use a brush twice for different options). | ||
* Avoid using arrows, they are unspecific. | ** Rethink conventionally used metaphors (e.g. the clipboard icon of paste). | ||
* Define metaphors independent from language and culture. | ** Antiquated metaphors might work well (e.g. a floppy is not necessarily outdated to represent save). | ||
* Make icons simple. | ** Adjust the degree of abstractness according to familiarity of the metaphor. | ||
** Avoid using arrows, they are unspecific. | |||
** Define metaphors independent from language and culture. | |||
** Make icons simple. | |||
* Colorize icons according to the meaning but in respect to application’s colors. | |||
* Don’t use animated icons. | |||
* Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility. | |||
==Implementation== | |||
http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/ | ==References== | ||
[1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/ | |||
Revision as of 15:01, 30 December 2013
Purpose
Icons are pictorial representations of functions and objects, important not only for aesthetic reasons as part of the visual identity of a program, but also for utilitarian reasons as shorthand for conveying meaning that users perceive almost instantaneously. Well-designed icons improve the visual communication and strongly impact users' overall impression of visual design. Last but not least, icons are space-saving and improve usability by making programs, objects, and actions easier to identify, learn.
Guidelines
- Create icons with varying sizes in respect to the level of design. Simply scaling down (or up) does not work.
- Design icons with a small number of metaphors [1].
- Apply metaphors only once (e.g. do not use a brush twice for different options).
- Rethink conventionally used metaphors (e.g. the clipboard icon of paste).
- Antiquated metaphors might work well (e.g. a floppy is not necessarily outdated to represent save).
- Adjust the degree of abstractness according to familiarity of the metaphor.
- Avoid using arrows, they are unspecific.
- Define metaphors independent from language and culture.
- Make icons simple.
- Colorize icons according to the meaning but in respect to application’s colors.
- Don’t use animated icons.
- Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.
Implementation
References
[1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/