Icons A small image representing an object R.I.T S. Ludi/R. Kuehl - - PowerPoint PPT Presentation

icons
SMART_READER_LITE
LIVE PREVIEW

Icons A small image representing an object R.I.T S. Ludi/R. Kuehl - - PowerPoint PPT Presentation

Icons A small image representing an object R.I.T S. Ludi/R. Kuehl p. 1 R I T Software Engineering Android Material Design R.I.T S. Ludi/R. Kuehl p. 2 R I T Software Engineering Android Material Design R.I.T S. Ludi/R. Kuehl p. 3 R I


slide-1
SLIDE 1
  • S. Ludi/R. Kuehl
  • p. 1

R I T

Software Engineering

R.I.T

Icons

A small image representing an object

slide-2
SLIDE 2
  • S. Ludi/R. Kuehl
  • p. 2

R I T

Software Engineering

R.I.T

Android Material Design

slide-3
SLIDE 3
  • S. Ludi/R. Kuehl
  • p. 3

R I T

Software Engineering

R.I.T

Android Material Design

slide-4
SLIDE 4
  • S. Ludi/R. Kuehl
  • p. 4

R I T

Software Engineering

R.I.T

 Recall of images is superior to that of text  Images are more easily distinguished than text  People perform better with icon targets than with text targets  However, icons are not automatically self-explanatory  Potential ambiguous perception of icons

 Representations of objects in the interface  Objects themselves  E.g., MS Office save icon

 Icon design should reflect metaphors of real world

  • bjects

Human Issues Concerning Icons

slide-5
SLIDE 5
  • S. Ludi/R. Kuehl
  • p. 5

R I T

Software Engineering

R.I.T

 Humans respond first to the icon’s physical properties and then semantic associations  The intensity of an icon’s physical characteristics can affect the way we find and comprehend icons

 Color  Size  Shape  Location  (Research results – it depends on context)

Using Icons in Interaction Design:

Distinguish Icons

slide-6
SLIDE 6
  • S. Ludi/R. Kuehl
  • p. 6

R I T

Software Engineering

R.I.T

Using Icons in Interaction Design:

Follow Conventions

Amazon.com shopping cart Audio icon—notes Home icon Secure Connection icon Firebox browser

http://glyphicons.com/ Android Material Design Icons

slide-7
SLIDE 7
  • S. Ludi/R. Kuehl
  • p. 7

R I T

Software Engineering

R.I.T

 Context supplies a frame of reference

 B I U vs B I U in Office applications

 Icons can be seen in many different contexts:

 Physical

  • Screen location, contrast, juxtaposition to each other,

screen density  Cognitive – user knowledge and experience, culture  Metaphorical – real world meaning  Temporal – viewing context changes via screen navigation; e.g., icons may be grayed out or disappear

Using Icons in Interaction Design:

Context

slide-8
SLIDE 8
  • S. Ludi/R. Kuehl
  • p. 8

R I T

Software Engineering

R.I.T

Using Icons in Interaction Design:

Context

Cow warning sign Deer warning sign People warning sign European Road Signs

Global meaning Local Conditions

slide-9
SLIDE 9
  • S. Ludi/R. Kuehl
  • p. 9

R I T

Software Engineering

R.I.T

 Simplicity/complexity – research is inconclusive on what is best; want high information signal to noise ratio  Cohesiveness –families of related icons

 Conceptual – perform related functions  Visual – share visual characteristics

 Distinctiveness of individual icons (within a group / family)  Familiarity to user

 Real world metaphors  Abstractions based on universally understood conventions  Domain context – application and locale

Principles for Icon Creation

slide-10
SLIDE 10
  • S. Ludi/R. Kuehl
  • p. 10

R I T

Software Engineering

R.I.T

 Pictogram: a picture that resembles what it signifies

 Email envelope

 Abstract Shapes

 Arithmetic symbols, question mark

 Ideogram: a symbol that stands for an idea or concept

 Floppy disk to save a file to a folder

 Logogram (Logograph): a symbol that represents a word

 Letter “U” to represent “you” or heart graphic for “love”

Icon Types

?

slide-11
SLIDE 11
  • S. Ludi/R. Kuehl
  • p. 11

R I T

Software Engineering

R.I.T

 Icon size and shape  Typically square  Size standards exist for the different platforms

  • Application icons should be in 16-color and 256-color versions and in three

sizes: 16x16 pixels, 32x32 pixels, and 48x48 pixels (Microsoft Co., 2006)

  • Finder icons are a 128 x 128 image. App icons should be 32 x 32, and 16 x

16 (Apple, 2007)

 Transparency and background

 Icon on application background (icon background is transparent)

  • May need dark borders to contrast application

backgrounds  Icon with background mask to contrast application background

Physical Characteristics

slide-12
SLIDE 12
  • S. Ludi/R. Kuehl
  • p. 12

R I T

Software Engineering

R.I.T

 Principles that govern the internal structure and meaning of icon families  This “grammar" is constructed on rules and procedures  The grammatical rules must be observable, logical, predictable, and consistent; i.e., the user gets it

Icon Grammar

Zoom icons. Pen icons. Lasso selection icons.

slide-13
SLIDE 13
  • S. Ludi/R. Kuehl
  • p. 13

R I T

Software Engineering

R.I.T

 Basic shapes  Indicators  Styles  Canonical view  Aggregate symbols

Deconstructing Icons

slide-14
SLIDE 14
  • S. Ludi/R. Kuehl
  • p. 14

R I T

Software Engineering

R.I.T

 Basic shapes  Indicators show action, state, direction  Styles  Canonical view  Aggregate symbols

Deconstructing Icons

slide-15
SLIDE 15
  • S. Ludi/R. Kuehl
  • p. 15

R I T

Software Engineering

R.I.T

 Basic shapes  Indicators  Styles  Canonical view  Aggregate symbols

Deconstructing Icons

Photo, drawing, caricature, outline, silhouette

slide-16
SLIDE 16
  • S. Ludi/R. Kuehl
  • p. 16

R I T

Software Engineering

R.I.T

 Basic shapes  Indicators  Styles  Canonical view is most common, easily recognized, typlifies the object  Aggregate symbols

Deconstructing Icons

Box is 3D

slide-17
SLIDE 17
  • S. Ludi/R. Kuehl
  • p. 17

R I T

Software Engineering

R.I.T

 Basic shapes  Indicators  Styles  Canonical view  Aggregate symbols: symbol combos for complexity

Deconstructing Icons