Presentation Transcript

1. Icons

   Dewan Tanvir Ahmed, PhD University of Ottawa dahmed@site.uottawa.ca
2. Chapter 11 - Icons Human Issues Concerning Icons Using Icons in Interaction Design Technical Issues Concerning Icons Dewan Tanvir Ahmed
3. Icon Icons are small images used to represent Objects such as Files and folders or Functionality such as printing or copy paste Convey critical system warnings and errors Dewan Tanvir Ahmed
4. Icon Icons can be used to represent Objects Classes of objects Actions on class of objects Properties (attributes) Relations Dewan Tanvir Ahmed
5. Icon Icons can provide Flexibility in layout Potential for faster recognition Potential for faster selection Opportunity for multiple/double coding No constraint - Language-independent representation Also potential risk for confusion Interpretation Dewan Tanvir Ahmed
6. 11.1 Human Issues Concerning Icons Novice User Icon-based systems do not necessarily afford novice users a self-explanatory interface even if they have labels or tool tips Nothing to prompt the user about What to do or how to do Example: copy/paste – need to understand clip board An icon’s functionality must be learned and understood Icons belongs to a language – understood by Interface designer People who have learned the use of application Dewan Tanvir Ahmed
7. Human Issues Concerning Icons The Dual Nature of Icons People relate to icons as the representations of objects They also perceive icons as the objects themselves The symbols and metaphors we create should not prevent people from moving between these two perspectives Example: File Icon Move to a folder – like a actual document Change the name or image – like a picture representing the document Dewan Tanvir Ahmed
8. Human Issues Concerning Icons Icons should not be created in isolation Consider the entire interface as a global entity, a visual ecosystem They must fit in with the other components and metaphors Dewan Tanvir Ahmed
9. Human Issues Concerning Icons Real-World Expectations The associations that people have create expectations that affect their perception of an icon’s physical properties Be aware of expectations Interface mistake by Macintosh trash icon Used to delete files Also used to eject floppy disk New users get panic - Dragging files into trash icon??? Dewan Tanvir Ahmed
10. Human Issues Concerning Icons Recall/Recognition Icons have an advantage over text in terms of recognition and recall Recall of images is superior to that of text Images are more easily distinguished than text People have almost perfect image recall Cut through Black Wipe down Dissolve Increase speed and accuracy by choosing images that foster this process Dewan Tanvir Ahmed
11. Articulatory Distance We first respond to our physical impressions then association until we arrive at the object it represents – Articulatory distance Articulatory Distance (RECALL) The distance between the physical appearance of an interface element and what it actually means. The difference between a picture and its meaning Easily applied to icons. A person discarding trash =>a small Articulatory distance High Articulatory distance of Power button and its meaning because the picture is somewhat abstract Dewan Tanvir Ahmed
12. Human Issues Concerning Icons Icon Analysis Chart The simpler the relationship between the image and its function, the less processing is involved – smaller articulatory distance Dewan Tanvir Ahmed
13. 11.2 Using Icons in Interaction Design - Search Search – do icons aid search activities? Humans respond first to the physical qualities of icons and then to their semantic associations The intensity of an icon’s physical characteristics is an important factor in search activities People perform better with icon targets than with text targets As text are not variable in appearance. Rule: The icons must be sufficiently differentiated Dewan Tanvir Ahmed
14. Using Icons in Interaction Design - Search Physical attributes that can affect the way we perceive icons Detail Color Size Shape Location Dewan Tanvir Ahmed
15. Using Icons in Interaction Design - Search There is A range of acceptable detail that will benefit icon search Biederman, 1987: Greater detail helps people to recognize As it provides more information Dewan Tanvir Ahmed
16. Using Icons in Interaction Design - Search There is a range of acceptable detail that will benefit icon search Byrne, 1993: Users recognize simple cartoon-like images more quickly Remark: there is a range of acceptable detail that will help icon search provided that there is no interference with other information aspects of the icon Extraneous detail should be avoided – called leveling. Dewan Tanvir Ahmed
17. Using Icons in Interaction Design - Search Varying the color, size, or shape of an icon will make it easier to locate When applying color, start with fewer colors; additional ones can be added later – reverse is difficult Color helps people distinguish between icons You must use discretion Dewan Tanvir Ahmed
18. Using Icons in Interaction Design - Search Varying the color, size, or shape of an icon will make it easier to locate Murch (987): best to use aprox. SIX easily discriminated colors Murcus (1995): a maximum of 5 +/- 2 colors Gialitz (2002): a maximum of FOUR colors at a time on any screen Dewan Tanvir Ahmed
19. Using Icons in Interaction Design - Search Size: Systems use standardized icon sizes Use square area for an icon Image contained in its is re-proportionedand uses less of the allotted canvas Galitz’s recommendation: Image size: 24 by 24 or 26 by 26 Canvas: 32 by 32 Good or Bad? This small size is adequate for details while leaving room for border between icons Dewan Tanvir Ahmed
20. Using Icons in Interaction Design - Search Src: http://static.meizu.com/m9sdk/guide/practices/ui_guidelines/icon_design.html Dewan Tanvir Ahmed
21. Using Icons in Interaction Design - Search Standard launcher icons Src: http://static.meizu.com/m9sdk/guide/practices/ui_guidelines/icon_design.html Dewan Tanvir Ahmed
22. Using Icons in Interaction Design - Search Standard menu icons Src: http://static.meizu.com/m9sdk/guide/practices/ui_guidelines/icon_design.html Dewan Tanvir Ahmed
23. Using Icons in Interaction Design - Search Standard status bar icons Src: http://static.meizu.com/m9sdk/guide/practices/ui_guidelines/icon_design.html Dewan Tanvir Ahmed
24. Using Icons in Interaction Design - Search Icon images should have distinctive shapes Icon shapes are standardized - Square The image is smaller than icon Image shape should differ from icon to icon Varying image shape increases distinctiveness Dewan Tanvir Ahmed
25. Using Icons in Interaction Design - Search Icons may facilitate search if their location is properly designed Moyes (1994) :Familiar shapes mean more to peoplethan location People use location if the shapes are not familiar Dewan Tanvir Ahmed
26. Using Icons in Interaction Design - Screen Real Estate Screen Real Estate Icons can save screen real estate Good for mobile apps Use tool tips to ease learning Example: “rectangle” – to draw a rectangle on a canvas Take up less space Dewan Tanvir Ahmed
27. Using Icons in Interaction Design -Conventions Conventions Icon conventions should be used whenever they are appropriate People can predict the behavior and meaning of this icon Dewan Tanvir Ahmed
28. Using Icons in Interaction Design -Conventions Conventions - tabs Indicate site structure or areas of related activities Amazon.com tabs Apple.com tabs Dewan Tanvir Ahmed
29. Home icon Audio icon—notes Audio icon—speaker Web Search icon Secure Connection icon Using Icons in Interaction Design -Conventions Conventions Dewan Tanvir Ahmed
30. Using Icons in Interaction Design - Context Context supplies a frame of reference We perceive icons in relation to all the other screen elements Icons have no meaning without context Iconi+ contextj+ viewerk= meaningijk Horton (1994) Dewan Tanvir Ahmed
31. Using Icons in Interaction Design - Context Icons can be seen in many different contexts: Physical Location Consistence placement aids users in their searches Contrast Differences in color, size, and shape affect user’s perception Juxtaposition Placement of icons next to each other may imply related functionality Example: Text formatting … Certain icons should not be placed near each other to avoid critical user errors SAVE and DELETE Density Only a small number of icons should be present on one screen to increase their effectiveness Dewan Tanvir Ahmed
32. Using Icons in Interaction Design - Context Icons can be seen in many different contexts: Cognitive Depends on personal knowledge Emotional state Expectations Metaphorical The Desktop – the real-world office model File and folder Trash bin Temporal Context Example: Icon are grayed out - when associated functions are not available Entire toolbar with new set of icons to facilitate particular task goal Example: Office … Dewan Tanvir Ahmed
33. Using Icons in Interaction Design - Context Globalization–Localization Images are often considered to be “language agnostic” – superior to labels An elementary school A Medical facility An office of justice of the peace Italian street signs Dewan Tanvir Ahmed
34. European Union traffic signs Using Icons in Interaction Design - Context Globalization–Localization Images are often considered to be “language agnostic” – superior to labels No vehicles No entry No stopping No Parking Many of the signs are different … other parts of the world Risk involved ticketing Dewan Tanvir Ahmed
35. Using Icons in Interaction Design - Context Globalization–Localization Signs can also be localized and reflect very specific conditions that do not exist in other locations Cow warning sign Deer warning sign Dewan Tanvir Ahmed
36. 11.3 Technical Issues Concerning Icons - Terminology Icon Terminology Phonogram: An alphabetic character represents a speech sound .. A sign or symbol representing a word, syllable, or speech sound Based on the physical shapes of their member For example H for hospital, in Europe I for information, in a word processor for italic. Dewan Tanvir Ahmed
37. 11.3 Technical Issues Concerning Icons - Terminology Icon Terminology Pictogram: a picture that resembles what it signifies A pictogram or pictograph is a symbol representing a concept, object, activity, place or event by illustration. (source: http://www.tiresias.org/research/guidelines/pictograms.htm) Dewan Tanvir Ahmed
38. 11.3 Technical Issues Concerning Icons - Terminology Icon Terminology Abstract Shapes Can also be used as symbols Example: Math, logic, science, music have sophisticated notational symbols Query ? Emphasis ! Dewan Tanvir Ahmed
39. 11.3 Technical Issues Concerning Icons - Terminology Icon Terminology Ideogram: a symbol that stands for an idea or concept For example what does the floppy disk icon in a application mean. It does not stand for the floppy disk, it represents the concept of ‘saving.’ Dewan Tanvir Ahmed
40. 11.3 Technical Issues Concerning Icons - Terminology Icon Terminology Logogram(Logograph): a symbol that represents a word A company logo is a substitution for the companies name. Examples are an Eye for the word ‘I’, a heart for representing ‘love’ and the ‘U’ for representing the word ‘you.’ Dewan Tanvir Ahmed
41. Technical Issues Concerning Icons - Terminology Icon Terminology Icons are often difficult to characterize as purely logographic, ideographic, phonographic, or pictographic Icons function on many levels of meaning simultaneously Dewan Tanvir Ahmed
42. 11.3 Technical Issues Concerning Icons - Terminology A) resemblance depict the underlying concept through analogous image (rocks falling) B) exemplar - a typical example (silverware -> restaurant) C) symbolic conveys underlying meaning more abstract than image (cracked wine glass -> fragile) D) arbitrary bear no relation to underlying concept
43. Technical Issues Concerning Icons - Terminology Semiotic Terms – is the study of sign Iconic: represent objects through resemblance Indexical: have a direct causal relationship with the object to which they refer. An indication of causation is the essence of classification. Symbolic: the meaning of a symbolic sign is derived through convention Visually resemblance to a physical folder Dewan Tanvir Ahmed
44. Technical Issues Concerning Icons - Terminology Symbolic … Dreyfuss(1972): Abstract symbols provide insight into the process of abstraction through which they evolved. The symbols for Aries and Leo Representational symbols are equivalent to pictographic symbols Arbitrary symbols are those that are invented Dewan Tanvir Ahmed
45. Technical Issues Concerning Icons – Principles for Icon Creation Principles for Icon Creation (internal syntax) Simplicity/complexity Signal to Noise Ratio Information/interference Leveling – drop excessive detail Cohesiveness Icons that perform related functions should be created as a family and should share some visual characteristics Distinctiveness The icons within each family must communicate their unique identity Familiarity Icons should be familiar to the user For example Apple has four different icons for mailbox depending on the nationality of the user. Dewan Tanvir Ahmed
46. Zoom icons. Pen icons. Technical Issues Concerning Icons – Icon Grammar Icon Grammar The principles that govern the internal structure of icons form a grammar This grammar is constructed on rules and procedures The grammatical rules must be observable, logical, predictable, and consistent Zooming in/out Place a new point, add/subtract a point Dewan Tanvir Ahmed
47. Technical Issues Concerning Icons – Icon Grammar Horton (1994) suggests that a graphical grammar should specify the following: Which elements are required and which are optional How elements can be graphically combined How elements are arranged left to right, top to bottom, and front to back How each element is represented Which elements are the same for all icons in the series and which vary from icon to icon within the series How many elements can be combined before the resulting symbol is too complex Dewan Tanvir Ahmed
48. Technical Issues Concerning Icons – Universal Systems Semantography Charles K. Bliss created what he considered a “simple system of pictorial symbols” called Semantography(Bliss, 1965) Semantography is based on symbols called Blissymbols that incorporated a symbolic logic and semantics Dewan Tanvir Ahmed
49. Technical Issues Concerning Icons – Universal Systems Blisssymbols point touch Clasp Namaste Clap Applaud Blissymbols with grammar Blissymbolscombined Dewan Tanvir Ahmed
50. Technical Issues Concerning Icons – Universal Systems ISOTYPE Otto Neurath created the International System Of TYpographicPicture Education (ISOTYPE) in an attempt to make information accessible to a universal audience (Neurath, 1972) It has also laid the foundation for modern traffic signs and public utility symbols Dewan Tanvir Ahmed
51. Technical Issues Concerning Icons – Universal Systems ISOTYPE (a) Male and female population 65 years and older. (b) Modes of transportation in millions. (c) Retail appliances in percentage per capita. Dewan Tanvir Ahmed
52. Technical Issues Concerning Icons - Deconstructing Icons Deconstructing Icons Basic shapes Indicators Styles Canonical view Aggregate symbols Dewan Tanvir Ahmed
53. Technical Issues Concerning Icons - Deconstructing Icons Basic shapes Complex shapes can be created from a few basic elements Horton (1994), all graphics can be decomposed into points, lines, and areas Dewan Tanvir Ahmed
54. Technical Issues Concerning Icons - Deconstructing Icons Basic lines and points Basic shapes Basic combinations Real-life symbols Enter/Exit Blissymbols Dewan Tanvir Ahmed
55. Technical Issues Concerning Icons - Deconstructing Icons Basic shapes Indicators can be used to convey action, state, and direction Light rays Sound waves Speed lines Shake lines Ghost images Save to folder Look Listen Blissymbols: Dewan Tanvir Ahmed
56. Technical Issues Concerning Icons - Deconstructing Icons Styles – Choose one style, Stick with it. Mixing styles can give the interface haphazard and cluttered appearance. Photograph Drawing Caricature Outline Silhouette Dewan Tanvir Ahmed
57. Technical Issues Concerning Icons - Deconstructing Icons Canonical view The most common view of an object The view that typifies the object That is most easily recognized A box is more recognizable in a 3D rendering than in a 2D one Dewan Tanvir Ahmed
58. Technical Issues Concerning Icons - Deconstructing Icons Aggregate symbols Symbols can be combined to communicate complex information Search symbol “No Smoking” sign Information symbol Dewan Tanvir Ahmed
59. Technical Issues Concerning Icons - Deconstructing Icons Aggregate symbols Overlap Addition Antithesis Specification Tools search Inverse image Volume, contrast, brightness control Dewan Tanvir Ahmed
60. Technical Issues Concerning Icons - Deconstructing Icons Icon Size Icons are always square and standardized at fixed dimensions Supply icons for your application in 16-color and 256-color versions and in three sizes: 16 16 pixels, 32 32 pixels, and 48 48 pixels (Microsoft Co., 2006) You need to provide at least the following files: * A 128 x 128 image (for Finder icons) … For the best-looking icons at all sizes, you should also provide custom image files (“hints”) at two other sizes: 32 x 32, and 16 x 16 (Apple, 2007) Dewan Tanvir Ahmed
61. Technical Issues Concerning Icons - Deconstructing Icons Transparency and Background To make areas of an icon transparent, include a mask A mask may be applied to application icons that appear on the desktop There is no way to predetermine what the background color will be Dewan Tanvir Ahmed
62. Technical Issues Concerning Icons – Current Practices Current Practices – Photorealist icons Higher graphic quality does not always imply greater intelligibility It is possible for a user to confuse these rich graphics with other images that do not represent functionality Dewan Tanvir Ahmed
63. Icons – Apple and Microsoft There are guidelines for these OSs Apple: Design and composition should indicate the purpose Perspective should agree with the real-life interactions Must differentiate them from other UI elements Microsoft: Colors that complement the XP design Perspective is either at a certain angle, or straight-on Should look modern – everyday object Apple is more concerned with composition than having everyone imitate their “photo-illustrative” style Microsoft is more interested in having 3D part icons which is appropriate to it style
64. Apple Icon Composition Icon “genres” Application: media (paper) and tool (pen) Utility: straight perspective, subdued colors
65. Shadows Shadows help add dimension to the image The shadow can do as much as the object itself in defining its shape Risk Careless use can flatten the object
66. Resource Microsoft XP http://msdn.microsoft.com/en-us/library/ms997636.aspx Following Slides are created using the resource provided by MSDN Follow the link above Dewan Tanvir Ahmed
67. Icon Style Characteristics Color is rich and complementary to the Windows XP look. Angle and perspective provide a dynamic energy to the images. Edges and corners of elements are soft and slightly rounded. Light source is coming from the upper left-hand corner with additional ambient light illuminating other parts of the icon. The use of gradients provides dimension and gives the icon a richer look. A drop shadow provides contrast and dimension. Outlines provide definition. Everyday objects, such as computers and devices, have a more modern consumer look. Dewan Tanvir Ahmed
68. Icon Sizes There are four sizes of Windows icons—48 × 48, 32 × 32, 24 × 24, and 16 × 16 pixels. We recommend that your icon contains these three sizes: 48 × 48 pixels 32 × 32 pixels 16 × 16 pixels General icon sizes Dewan Tanvir Ahmed
69. Icon Sizes Icons on the right side of the Start menu are displayed at the 24 × 24 pixels size. This is not a size that you need to provide. Dewan Tanvir Ahmed
70. Icon Sizes If you are creating icons for a toolbar, the Windows standard sizes are 24 × 24 and 16 × 16 pixels. Dewan Tanvir Ahmed
71. Icon Color Depth Support Windows XP supports 32-bit icons, which are 24-bit images with an 8-bit alpha channel. This allows icons to display with smooth edges that appear to blend into any background. Each Windows XP icon should contain these three color depths to support different monitor display settings: 24-bit with 8-bit alpha (32-bit) 8-bit (256 colors) with 1-bit transparency 4-bit (16 colors) with 1-bit transparency Dewan Tanvir Ahmed
72. Color Palette Dewan Tanvir Ahmed
73. Angle and Grouping of Objects This is the perspective grid that Windows XP style icons use: Dewan Tanvir Ahmed
74. Angle and Grouping of Objects Not all objects work well at 16 × 16 at an angle. The following objects are usually shown in a straight-on manner: Document icons Icons that are symbols (such as warning or information icons) Icons that are single objects (such as the magnifying glass) Dewan Tanvir Ahmed
75. Angle and Grouping of Objects Create overlapping secondary objects at an angle unless it makes more sense, due to readability and integrity, that they are rendered straight on. Consider also how your icons may be viewed as a set to help determine how to group objects. Overlapping examples (Add or Remove Programs, Print Pictures, Recent Documents) Dewan Tanvir Ahmed
76. Drop Shadow Windows XP icons use a drop shadow to provide definition and added dimension. This effect is added in Photoshop Dewan Tanvir Ahmed
77. Thanks! Dewan Tanvir Ahmed