Difference between revisions of "Projects/Usability/HIG/IconDesign"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(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 ...")
 
Line 1: Line 1:
{{Under_Construction}}
+
__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/


KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal