Download - Icons
![Page 1: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/1.jpg)
The Resonant Interface
ICONS
YohanSachithNayanajithKavindu
![Page 2: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/2.jpg)
What is an icon?
An icon is a graphical representative symbol of something.
![Page 3: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/3.jpg)
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.
![Page 4: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/4.jpg)
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.
![Page 5: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/5.jpg)
Using Icons in Interaction DesignHow 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.
![Page 6: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/6.jpg)
Using Icons in Interaction Design 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
![Page 7: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/7.jpg)
Using Icons in Interaction DesignHow 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.
![Page 8: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/8.jpg)
Icon can save the space and well arrange the screen.
Microsoft word 2003 insert menu Microsoft word 2007 insert menu
Ribbon view
Using Icons in Interaction Design
![Page 9: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/9.jpg)
Using Icons in Interaction Design
Conventions
![Page 10: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/10.jpg)
Using Icons in Interaction DesignContext
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 contextsPhysical – Location, Contrast, Juxtaposition, DensityCognitiveMetaphoricalTemporal
![Page 11: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/11.jpg)
Icons should be used wherever they are appropriate.
![Page 12: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/12.jpg)
Globalization–Localization
Sri Lankan road signs
Images are often considered to be “language agnostic”
![Page 13: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/13.jpg)
Globalization–Localization
Signs can also be localized and reflect very specificconditions that do not exist in other locations
![Page 14: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/14.jpg)
Icon TerminologyPhonogram: 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 orConcept.– Logogram (Logograph): a symbol that represents aWord.
![Page 15: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/15.jpg)
Icon GrammarIcon 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
![Page 16: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/16.jpg)
Deconstructing Icons
An icon can be broken down to;A basic shapeIndicatorsStylesCanonical viewAggregate symbols
![Page 17: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/17.jpg)
Deconstructing Icons
Basic lines and points
Basic shapes
Real life symbols
![Page 18: Icons](https://reader036.vdocument.in/reader036/viewer/2022062418/556195e5d8b42a71658b56d5/html5/thumbnails/18.jpg)
That’s all
Source file http://www.it.hiof.no/interaction-design/slides/chapter11.pdf
for listening