Icon Design. Overview zWhat icons are zHow icons are used in interface design zMeaning and icons zIcons in Applications zDeveloping Icons zIcon Tools.

Icon Design

Overview

What icons areHow icons are used in interface

designMeaning and iconsIcons in ApplicationsDeveloping IconsIcon Tools and Resources

Definition

An icon is

“a small picture which provides a pictorial representation of a

selectable object”

Icons

Used in graphical user interfaces principal item within WIMPs and direct

manipulation interfaces complementary interface design style

Should not be confused with graphical symbols used to enhance the appeal of the interface

How icons are used

Active part of the interfaceSelection results in a specific action

or event. Used for aesthetic appeal in already

partially designed interfaces.If used appropriately and effectively,

icons can greatly enhance the comprehensibility of an interface.

“Pictorial Menu” of currently available items

Representation of various aspects of an interface metaphor desktop metaphor

objects: files, folderstools: calculator, notepad

editing environmentfunctions: cut, pastetools: spellcheck, help

How icons are used

Meaning and Icons

Pictorial representation needs to convey meaning

Need to be unambiguousMeaning aided by use of contextProblem of understanding:

“relates to pictorial communication, which whilst having the potential to be universally understood, does not have the semantic and syntactic rules which are inherent in written communication.”

Examples of Icon Use

State information Minimized window Closed or dormant application

Objects within applications including: Tools available in applications Actions related to Data

System functionality wastebasket different drives

Advantages of Icon Use

Reduce complexity of the applicationImpression of ease of useServe as permanent reminder whilst

only occupying a small spaceEffective classification of system objects

which utilises human visual memoryForm of visual shorthandFlexible interface widget

Disadvantages of Icon Use

Related to design poverty if user cannot understand what the icons represent

then it is likely that another interface technique should be used

Difficult to use for some concepts highly abstract

freedom

too much similarity between different conceptsdifferent types of similar peripherals

Can be time consuming (very!!!)

Including Icons in a Design

Determine functionalities to be represented as Icons

Determine Icon Location

Determine Icon Size

Validate the Screen Design

Types of Icons

Objects

Actions

Conceptual Items

Icons in PowerPoint

Context: Objects:

Actions:

Conceptual Items:

Developing conceptual icons

Application: Project Information for Management

Concepts to be represented: actions taken in relation to a project

cost of a project

progress of a project

Developing conceptual icons

actions taken in relation to a projectIcon: Clacker boardUnderlying Design Ideas:- concept of action,

as on a film set.

cost of a projectIcon: MoneyUnderlying Design Ideas:- money as a

tangible way of paying costs.

Developing conceptual icons 2

Progress of a projectIcon: Overtaking carUnderlying Design Ideas:- concept of

movement, of something progressing, idea of cars used as they progress, arrow helps to suggest the movement is forwards.

Navigation / Acceptance / Exit see next slide

Icon Selection

Which icon is preferable and why?

Validating the Concept

Does it elicit the correct response?

USER TESTING (what else????)

Ask users to relate functions to icons place user in context provide names of functions and pictures of

icons ask user to map functions to icons

Icon Development

Use shortcuts in icon design If an icon already exists, use itIf you need a new icon, use a frame and

template to determine sizeDesign on-screen not on paper (doesn’t

look the same)Keep colours to a minimum.If doing many icons make design decisions

relating to colour use first.

Icon Development 2

Adding Movement to Icons use arrows / lines

Lines and shapes within Icons square is easier use anti-aliasing careful with curves and angular lines

Adding 3D and highlights vital to make icons look professional

If user not sure what icons mean, add labels

Developing Icons 3

Working at the icon level is confusing (see next slide)

Placing a pixel of colour in a certain place can make a significant difference (notably the yellow on the following slide)

Can be difficult to produce convincing and / or understandable icons if complex concepts are being represented.

Icon Editing Tools

General http://www.cnet.com/Resources/Swcentral/

PC/Result/TitleList/0,159,0-d-167-b-1,00.html

NT / ‘95 AX Icons: http://www.axialis.com/axicons/

Win 3.x (also ‘95) IconForge:

http://www.cursorarts.com/ca_if.html

Icons on the Web

General Icon Downloads http://www.softseek.com/

Desktop_Enhancements/Icons/Miscellaneous_Collections/dindex.html

Icons - many sites http://www-personal.monash.edu.au/~steve/icolib.html http://www.cli.di.unipi.it/iconbrowser/ http://www.yahoo.com/Computers_and_Internet/Internet/

World_Wide_Web/Programming/Icons/ http://www.webcrawler.com/Computers/comput.icon.html http://www.yoink.com/iconcity/

SummaryIcons key part of WIMPs interfaceUseful if used in correct contextIf your user doesn’t understand what the

icon means, there is something wrong. Lots of shortcuts in icon design, notably

already existing icons...Use appropriate editors and where

possible “borrow” other people’s designs