Projects/Usability/HIG/IconDesign: Difference between revisions

    From KDE TechBase
    < Projects‎ | Usability‎ | HIG
    No edit summary
    Line 18: Line 18:
    * Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.
    * Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.
    ==Implementation==
    ==Implementation==
    http://websvn.kde.org/trunk/kdesupport/oxygen-icons/
    * http://websvn.kde.org/trunk/kdesupport/oxygen-icons/
    https://mail.kde.org/mailman/listinfo/kde-artists
    * https://mail.kde.org/mailman/listinfo/kde-artists
     
    ==References==
    ==References==
    [1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/
    [1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/


    [[Category:Usability]][[Category: Presentation]][[Category:Layout]]
    [[Category:Usability]][[Category: Presentation]][[Category:Layout]]

    Revision as of 15:14, 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

    • As a developer use an icon from the predefined set. KDE uses the Oxygen icon set. Ask at the kde-artists mailing list if the set lacks on a specific item.
    • As a designer 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/