Scribd
Upload
276 views15 pages

Unit 5: Create Meaningful Graphics, Icons and Images

Screen graphics and icons can effectively convey information and engage users' attention if designed properly. There are different types of icons based on their visual representation and meaning. Key characteristics for effective icon design include making them familiar, clear, simple, consistent, direct, and discriminable. Proper use of color, images, and animation can also enhance usability but should not be overused or distracting. The design process involves defining the icon's purpose, generating ideas, testing versions with users, and refining for legibility.

Uploaded by

Sai Venkat Gudla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
276 views15 pages

Unit 5: Create Meaningful Graphics, Icons and Images

Screen graphics and icons can effectively convey information and engage users' attention if designed properly. There are different types of icons based on their visual representation and meaning. Key characteristics for effective icon design include making them familiar, clear, simple, consistent, direct, and discriminable. Proper use of color, images, and animation can also enhance usability but should not be overused or distracting. The design process involves defining the icon's purpose, generating ideas, testing versions with users, and refining for legibility.

Uploaded by

Sai Venkat Gudla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

UNIT 5

Create Meaningful Graphics, Icons and Images


 Screen graphics, if used properly, can be a powerful
communication and attention getting technique. They can hold the
user’s attention, add interest to a screen, and quickly convey
information.

Icons : Icons are most often used to represent objects and actions
with which users can interact with or that they can manipulate.

Marcus (1984) suggests icons fall into these categories:


Icon. Something that looks like what it means.
Index. A sign that was caused by the thing to which it refers.
Symbol. A sign that may be completely arbitrary in appearance.
Rogers (1989) provided an expanded definition for icon kinds:

Resemblance (పోలిక) An image that looks like what it means.

SymbolicAn abstract image representing something.

Exemplar (ఉదాహరణము) An image illustrating an example or


characteristic of something.

ArbitraryAn image completely arbitrary in appearance whose


meaning must be learned.

AnalogyAn image physically or semantically associated with


something.
Characteristics of Icons:

An icon possesses the technical qualities of syntactic, semantics,


and pragmatics.
Syntactic refers to an icon’s physical structure.
Semantics is the icon’s meaning.
Pragmatics is how the icons are physically produced and depicted.

These three are used to determine an icon’s effectiveness and


usability.
Influences on Icon Usability
Provide icons that are:
 Familiar.
 Clear and Legible.
 Simple.
 Consistent.
 Direct.
 Efficient.
 Discriminable.

Also consider the following:


The Context in which the icon is used.
The Expectancies of users.
The Complexity of task.
Choosing Icons

 Icon design is an important process. Meaningful and recognizable


icons will speed learning and recall and yield a much more effective
system. Poor design will lead to errors, delays, and confusion.

 A Successful Icon
 Looks different from all other icons.
 Is obvious what it does or represents.
 Is recognizable when no larger than 16 pixels square.
 Looks as good in black and white as in color.
Size
Supply in all standard sizes.
16 × 16 pixels.
• 16- and 256-color versions.
32 × 32 pixels
• 16- and 256-color versions.
• Effective: 24 × 24 or 26 × 26 in 32 × 32 icon.
48 × 48 pixels
• 16- and 256-color versions.
■ Use colors from the system palette.
■ Use an odd number of pixels along each side.
Provides center pixel around which to focus design.
■ Minimum sizes for easy selection:
With stylus or pen: 15 pixels square.
With mouse: 20 pixels square.
With finger: 40 pixels square.
Choosing Images
Use existing icons when available.
Use images for nouns, not verbs.
Use traditional images.
Consider user cultural and social norms.

Creating Images
Create familiar and concrete shapes.
Create visually and conceptually distinct shapes.
 Incorporate unique features of an object.
 Do not display within a border.
Clearly reflect objects represented.
Simply reflect objects represented, avoiding excessive detail.
Create as a set, communicating relationships to one another through
common shapes.
Provide consistency in icon type.
Create shapes of the proper emotional tone.
Drawing Images

Provide consistency in shape over varying sizes.

Do not use triangular arrows in design to avoid confusion with


other system symbols.

When icons are used to reflect varying attributes, express these


attributes as meaningfully as possible.

Provide proper scale and orientation.

Use perspective and dimension whenever possible.

Accompany icon with a label to assure intended meaning.


Icon Animation and Audition

Animation:
 Use:
• To provide feedback.
• For visual interest.
 Make it interruptible or independent of user’s primary interaction.
 Do not use it for decoration.
 Permit it to be turned off by the user.
 For fluid animation, present images at 16 or more frames per
second.

Audition:
Consider auditory icons.
The Design Process

 Define the icon’s purpose and use.


 Collect, evaluate, and sketch ideas.
 Draw in black and white.
 Draw using an icon-editing utility or drawing package.
 Test for user:
— Expectations.
— Recognition.
— Learning.
 Test for legibility.
 Register new icons in the system’s registry.
Graphics

Use graphics to:


— Supplement the textual content, not as a substitute for it.
— Convey information that can’t be effectively accomplished
using text.
— Enhance navigation through:
• Presenting a site overview
• Identifying site pages.
• Identifying content areas.
Limit the use of graphics that take a long time to load.
Coordinate the graphics with all other page elements.
Color

Color adds dimension, or realism, to screen usability.


Color draws attention because it attracts a person’s eye.
Color Uses

■ Use color to assist in formatting a screen:


— Relating or tying elements into groupings.
— Breaking apart separate groupings of information.
— Associating information that is widely separated on the screen.
— Highlighting or calling attention to important information by setting it
off from
the other information.
■ Use color as a visual code to identify:
— Screen components.
— The logical structure of ideas, processes, or sequences.
— Sources of information.
— Status of information.
■ Use color to:
— Realistically portray natural objects.
— Increase screen appeal.

You might also like