Editing Icon (computing) (section)

== Design ==
[[File:icons example.png|frame|right|An example of computer icon set design: [[Nuvola]] icons come in six different sizes]]
In order to maintain consistency in the look of a device, OS manufacturers offer detailed guidelines for the development and use of icons on their systems.<ref>{{cite web|url=https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/|title=Icons and Images, Human Interface Guidelines for iOS|website=developer.apple.com|language=en|access-date=2018-10-12}}</ref><ref>{{Cite news|url=https://material.io/design/iconography/system-icons.html#design-principles|title=Icon Design Principles|work=Material Design|access-date=2018-10-12|language=en}}</ref><ref>{{cite web|url=https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos|title=App icons and logos for UWP apps|website=docs.microsoft.com|language=en-us|access-date=2018-10-12}}</ref> This is true for both standard system icons and third party application icons to be included in the system. The system icons currently in use have typically gone through widespread international acceptance and understandability testing. Icon design factors have also been the topic for extensive usability studies. The design itself involves a high level of skill in combining an attractive graphic design with the required usability features.<ref name="ICT Pictograms, Icons and Symbols "/><ref>Shih-Miao Huang, Kong-King Shieh, Chai-Fen Chi (2002). "Factors affecting the design of computer icons". ''International Journal of Industrial Ergonomics'', Elsevier April 2002.</ref>

=== Shape ===
The icon needs to be clear and easily recognizable, able to display on monitors of widely varying size and resolutions. Its shape should be simple with clean lines, without too much detailing in the design. Together with the other design details, the shape also needs to make it unique on the display and clearly distinguishable from other icons.

=== Color ===
The icon needs to be colorful enough to easily pick out on the display screen, and contrast well with any background. With the increasing ability to customize the desktop, it is important for the icon itself to display in a standard color which cannot be modified, retaining its characteristic appearance for immediate recognition by the user. Through color it should also provide some visual indicator as to the icon state; activated, available or currently not accessible ("greyed out").

=== Size and scalability ===

The standard icon is generally  the size of an adult thumb, enabling both easy visual recognition and use in a [[touchscreen]] device. For individual devices the display size correlates directly to the size of the screen real estate and the resolution of the display. Because they are used in multiple locations on the screen, the design must remain recognizable at the smallest size, for use in a directory tree or title bar, while retaining an attractive shape in the larger sizes. In addition to scaling, it may be necessary to remove visual details or simplify the subject between discrete sizes. Larger icons serve also as part of the accessibility features for the visually impaired on many computer systems. The width and height of the icon are the same (1:1 [[Aspect ratio (image)|aspect ratio]]) in almost all areas of traditional use.

=== Motion ===

Icons can also be augmented with iconographic motion - geometric manipulations applied to a graphical element over time, for example, a scale, rotation, or other deformation. One example is when application icons "wobble" in iOS to convey to the user they are able to be repositioned by being dragged. This is different from an icon with animated graphics, such as a [[Throbber]]. In contrast to static icons and icons with animated graphics, kinetic behaviors do not alter the visual content of an element (whereas fades, blurs, tints, and addition of new graphics, such as badges, exclusively alter an icon's pixels). Stated differently, pixels in an icon can be moved, rotated, stretched, and so on - but not altered or added to. Research has shown iconographic motion can act as a powerful and reliable visual cue, a critical property for icons to embody.<ref>[http://chrisharrison.net/projects/kineticons/kineticons.pdf Harrison, C., Hsieh, G., Willis, K. D. D., Forlizzi, J. and Hudson, S. E. "Kineticons: Using Iconographic Motion in Graphical User Interface Design. "]. In Proceedings of the 29th Annual SIGCHI Conference on Human Factors in Computing Systems. CHI '11. ACM, New York, NY. 1999-2008.</ref>

=== Localization ===

In its primary function as a symbolic image, the icon design should ideally be divorced from any single language. For products which are targeting the international marketplace, the primary design consideration is that the icon is non-verbal; localizing text in icons is costly and time-consuming.

=== Cultural context ===

Beyond text, there are other design elements which can be dependent upon the cultural context for interpretation. These include color, numbers, symbols, body parts and hand gestures. Each of these elements needs to be evaluated for their meaning and relevance across all markets targeted by the product.<ref>Roland Barthes, (1969).  "Rhetoric of the Image" pg 134 ff. in Handa, ''Visual Rhetoric in a Digital World''. Bedford / St. Martins, Boston.</ref>