2D Multimedia Authoring

1
2D Multimedia Authoring

• Icons
• Direct Manipulation

2
Lecture Overview

• Definition
• Advantages and disadvantages
• Factors affecting meaningfulness
• Form and function
• Design guidance
• Classification

3
Icons Definition

• Pictographic symbols - focus on essential
  features
• Represent underlying
• objects
• data structures
• processes
• in a form which corresponds to the real world
• Can be entertaining, clever and visually appealing

4
Advantages of Icons

• Recognition
• Users remember meaning more easily than for
  command names
• Searched and selected faster than text
• Compactness
• Can often convey meaning more rapidly than
  symbolic language
• Use less space than text
• More features can be presented on one screen

5
Advantages of Icons (Contd)

• Comprehensibility
• Can convey objects, data and actions
• Universality
• Relatively language- and culture-independent
• Facilitates porting to international markets
• Plenty available for re-use
• Micons (moving icons or animated icons)
• Can represent dynamic aspects
• (No clear evidence better than static)

6
Disadvantages of Icons

• Ambiguity
• Dependent on user, task and context
• Cannot completely replace words in some complex
  situations
• Costly / difficult to design good new icons
• Micons - if too many on screen, can be
  distracting and jerky in movement

7
Factors Affecting Meaningfulness of Icons

• Context
• Specific vs General
• Easy --------- Difficult to deduce meaning
• Tasks
• Visual vs Verbal
• Easy ----------Difficult to design

8
Factors Affecting Meaningfulness of Icons

• Text
• Addition increases understanding - especially if
  abstract, vague, large icon set

9
Icons Addition of Text
10
(No Transcript)
11
Psion 3a Icons
More icon
More icon
12
Factors Affecting Meaningfulness of Icons

• Concept
• Concrete vs Abstract
• Easy ---------- Difficult to design
• Discriminable
• From other icons

13
Range of Icon Functions (Rogers, 1989)

• Function Example
• Labeling Menu item
• Indicating System state
• Warning Error message
• Identifying File storage
• Manipulating Tool for zooming and shrinking
• Container Object for placing discarded
  objects
• Gestalt pattern Structure in programming
  language

14
Design of Icons

• Poorly understood by computer professionals
• Everyday icons are the subject of much research
  e.g. flight arrivals /departures
• Trend towards higher quality graphics

15
Design Guidance

• General HCI guidelines apply
• Re-use / re-work existing designs
• Test representation with users
• Avoid symbols unless meaning already known
• Use icon design tools to experiment

16
Visual Reflection of Interaction States
17
ISO Standards Classification

• Interactive icons
• Mediate user interaction with software
  application
• Non-interactive icons
• Status indicators

18
Icons Classification(ISO/IEC Based)
Icons
Interactive
Non-interactive
Status indicator
Object
Pointer
Control
Tool
Selection Text Graphics
Cut/copy Spellcheck Up/down arrows
Fill Eraser Pencil
Hourglass LEDs
Device
Data
Container
Folder In-basket
Document Chart Ssheet
Printer Telephone
Examples
19
IBM Common User Access Workplace Environment
(1988)3 Categories of Icons

• Container
• Data
• Device

20
(No Transcript)
21
Lecture Review

• Definition
• Advantages and disadvantages
• Factors affecting meaningfulness
• Form and function
• Design guidance
• Classification