The Resonant Interface
ICONS
Yohan
Sachith
Nayanajith
Kavindu
What is an icon?
Human Issues Concerning Icons
Icons are based on the system.
It doesn’t care if you are a novice user or not.
You have to ...
Contd.
Icons can’t be isolated.
 Every icon should achieves a particular task. there can’t be
a icon without doing any th...
Using Icons in InteractionDesign
How icons help us in our daily activities
 Lets think that we’re installing a new softwa...
Using Icons in InteractionDesign
 Normally people react to the physical attributes of an
icon and then move to the descri...
Using Icons in InteractionDesign
How icons help us in our daily activities
Icons should have distinctive attributes such a...
Icon can save the space and well arrange the screen.
Microsoft word 2003 insert menu Microsoft word 2007 insert menu
Ribbo...
UsingIconsinInteractionDesign
Conventions
Using Icons in Interaction Design
Context
Icons are in relation between all the other screen elements
Icons have no meani...
Icons should be used wherever they are
appropriate.
Globalization–Localization
Sri Lankan road signs
Images are often considered to be “language agnostic”
Globalization–Localization
Signs can also be localized and reflect very specific
conditions that do not exist in other loc...
Icon Terminology
Phonogram: A sign or symbol representing a word,
syllable, or speech sound.
– Pictogram: A picture that r...
Icon Grammar
Icon principles and attributes may form an icon
grammar. In other words with regular and proper use
of icons ...
Deconstructing Icons
An icon can be broken down to;
A basic shape
Indicators
Styles
Canonical view
Aggregate symbols
Deconstructing Icons
Basic lines and points
Basic shapes
Real life symbols
That’s all
Source file
http://www.it.hiof.no/interaction-design/slides/chapter11.pdf
for listening
Upcoming SlideShare
Loading in …5
×

Icons

374 views

Published on

Icons - under Human Computer Interaction (HCI)

Published in: Technology, Spiritual
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
374
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Icons

  1. 1. The Resonant Interface ICONS Yohan Sachith Nayanajith Kavindu
  2. 2. What is an icon?
  3. 3. Human Issues Concerning Icons Icons are based on the system. It doesn’t care if you are a novice user or not. You have to study about the operation only by clicking on the icon. People identify the icons using its representing object. Commonly we can see symbols and metaphors as icons.
  4. 4. Contd. Icons can’t be isolated.  Every icon should achieves a particular task. there can’t be a icon without doing any thing, Recognition  For example close, maximize, minimize buttons are universally accepted icons which will recall a persons memory of its operation once seen.
  5. 5. Using Icons in InteractionDesign How icons help us in our daily activities  Lets think that we’re installing a new software. Once we’re doing it we begin searching for the next best option to click on.
  6. 6. Using Icons in InteractionDesign  Normally people react to the physical attributes of an icon and then move to the descriptive context of the icon. Physical attributes • Detail • Color • Size • Shape • Location
  7. 7. Using Icons in InteractionDesign How icons help us in our daily activities Icons should have distinctive attributes such as size, shape and colour. Icons would be easier to be searched for if they have a proper location.
  8. 8. Icon can save the space and well arrange the screen. Microsoft word 2003 insert menu Microsoft word 2007 insert menu Ribbon view UsingIconsinInteractionDesign
  9. 9. UsingIconsinInteractionDesign Conventions
  10. 10. Using Icons in Interaction Design Context Icons are in relation between all the other screen elements Icons have no meaning without context • Icon + context + viewer= meaning Horton (1994) Icons have different contexts Physical – Location, Contrast, Juxtaposition, Density Cognitive Metaphorical Temporal
  11. 11. Icons should be used wherever they are appropriate.
  12. 12. Globalization–Localization Sri Lankan road signs Images are often considered to be “language agnostic”
  13. 13. Globalization–Localization Signs can also be localized and reflect very specific conditions that do not exist in other locations
  14. 14. Icon Terminology Phonogram: A sign or symbol representing a word, syllable, or speech sound. – Pictogram: A picture that resembles what it signifies. – Abstract Shapes. – Ideogram: A symbol that stands for an idea or Concept. – Logogram (Logograph): a symbol that represents a Word.
  15. 15. Icon Grammar Icon principles and attributes may form an icon grammar. In other words with regular and proper use of icons it creates a universally accepted and recognized standardized graphical representations. Zoom-in icon Battery icon
  16. 16. Deconstructing Icons An icon can be broken down to; A basic shape Indicators Styles Canonical view Aggregate symbols
  17. 17. Deconstructing Icons Basic lines and points Basic shapes Real life symbols
  18. 18. That’s all Source file http://www.it.hiof.no/interaction-design/slides/chapter11.pdf for listening

×