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

▶

Dec 29, 2022 244 likes •433 views

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

S. Ludi/R. Kuehl
p. 1

R I T

Software Engineering

R.I.T

Icons

A small image representing an object

SLIDE 2

S. Ludi/R. Kuehl
p. 2

R I T

Software Engineering

R.I.T

Android Material Design

SLIDE 3

S. Ludi/R. Kuehl
p. 3

R I T

Software Engineering

R.I.T

Android Material Design

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

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

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

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

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

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

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

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

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

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

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

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

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

S. Ludi/R. Kuehl
p. 17

R I T

Software Engineering

R.I.T

Icons

A small image representing an object

R.I.T

Android Material Design

R.I.T

Android Material Design

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

Human Issues Concerning Icons

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

R.I.T

Using Icons in Interaction Design:

Follow Conventions

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

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 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

R.I.T

Using Icons in Interaction Design:

Context

Global meaning Local Conditions

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

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

?

R.I.T

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

 Transparency and background

 Icon on application background (icon background is transparent)

backgrounds  Icon with background mask to contrast application background

Physical Characteristics

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.

R.I.T

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

Deconstructing Icons

R.I.T

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

Deconstructing Icons

R.I.T

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

Deconstructing Icons

R.I.T

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

Deconstructing Icons

Box is 3D

R.I.T

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

Deconstructing Icons