Projects/Usability/HIG/IconDesign: Difference between revisions

    From KDE TechBase
    < Projects‎ | Usability‎ | HIG
    (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 ...")
     
    (8 intermediate revisions by 2 users not shown)
    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. Icon use should be consistent throughout the interface.


    * 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).
    * Design icons with a small number of metaphors [1].
    * Antiquated metaphors might work well (e.g. a floppy is not necessarily outdated to represent save).
    ** Apply metaphors only once (e.g. do not use a brush twice for different options).
    * Adjust the degree of abstractness according to familiarity of the metaphor.
    ** Rethink conventionally used metaphors (e.g. the clipboard icon of paste).
    * Avoid using arrows, they are unspecific.
    ** Antiquated metaphors might work well (e.g. a floppy is not necessarily outdated to represent save).
    * Define metaphors independent from language and culture.
    ** Adjust the degree of abstractness according to familiarity of the metaphor.
    * Make icons simple.
    ** Use arrows only if they can easily be related to spatial features such as ''Previous/Next'' in a sequence or ''Up/Down'' in a hierarchy. Avoid using arrows metaphorically (such as for ''Reply/Forward'' or ''Undo/Redo'').
    ** Attempt to use metaphors that are independent of language and culture.
    ** Make icons simple.
    * If an icon has important details at larger sizes, rather than simply scaling it down, create unique versions of the icon at smaller sizes. Critical details may become unrecognizable when scaled down.
    * Avoid using text in icon designs; it may not scale well to smaller sizes.
    * Icons of a similar type share a consistent visual language (mimetypes, folders, devices, etc.).
    * Follow the guidelines for presenting [[Projects/Usability/HIG/IconsAndText|icons with text]]
    * Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.
    === Monochrome Icons ===
    [[File:HIGMonoIcons.png]]
    * Used for application toolbar and button actions, menus, and status and notifications. Also may be used for small (16x16) devices and places icons (folders, usb drives, etc.).
    * Rely on a distinct shapes instead of fine details to distinguish between them.
    * Color can be used for distinction (change of state, destructive actions, etc.).


    http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/
    === Application icons ===
    [[File:HIGAppIcons.png]]
    * Unique and easily recognizable.
    * Have the widest variation of color and visual style to represent the visual identity of the application.
    * When creating an system icon theme, respect trademarks by avoiding significant alterations to application icons.
     
    ==Implementation==
    * For standard actions (back forward, open, save, refresh, etc.) use an icon from the platform-provided set. The KDE Platform 4.x uses the [http://websvn.kde.org/trunk/kdesupport/oxygen-icons/ Oxygen icon set]. Ask at the [https://mail.kde.org/mailman/listinfo/kde-artists kde-artists mailing list] to request addition of a specific item.
    * http://websvn.kde.org/trunk/kdesupport/oxygen-icons/
    * https://mail.kde.org/mailman/listinfo/kde-artists
    * If you would like to request help designing icons unique to your application, you can ask for help on the [http://forum.kde.org/viewforum.php?f=285 KDE Visual Design Group Forum].
     
    ==References==
    [1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/
     
    [[Category:Usability]][[Category: Presentation]][[Category:Layout]]

    Revision as of 07:11, 29 March 2014

    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. Icon use should be consistent throughout the interface.

    Guidelines

    • 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.
      • Use arrows only if they can easily be related to spatial features such as Previous/Next in a sequence or Up/Down in a hierarchy. Avoid using arrows metaphorically (such as for Reply/Forward or Undo/Redo).
      • Attempt to use metaphors that are independent of language and culture.
      • Make icons simple.
    • If an icon has important details at larger sizes, rather than simply scaling it down, create unique versions of the icon at smaller sizes. Critical details may become unrecognizable when scaled down.
    • Avoid using text in icon designs; it may not scale well to smaller sizes.
    • Icons of a similar type share a consistent visual language (mimetypes, folders, devices, etc.).
    • Follow the guidelines for presenting icons with text
    • Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.

    Monochrome Icons

    • Used for application toolbar and button actions, menus, and status and notifications. Also may be used for small (16x16) devices and places icons (folders, usb drives, etc.).
    • Rely on a distinct shapes instead of fine details to distinguish between them.
    • Color can be used for distinction (change of state, destructive actions, etc.).

    Application icons

    • Unique and easily recognizable.
    • Have the widest variation of color and visual style to represent the visual identity of the application.
    • When creating an system icon theme, respect trademarks by avoiding significant alterations to application icons.

    Implementation

    References

    [1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/