icon design. overview zwhat icons are zhow icons are used in interface design zmeaning and icons...
TRANSCRIPT
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