This document provides guidelines for using images and graphics in graphical user interface (GUI) design. It recommends using icons for specific purposes like application icons, buttons, and messages. Guidelines suggest icons should illustrate concepts quickly, be internationally recognizable, and create a cohesive set with similar colors and sufficient but not too many details. Examples are given for representing objects, actions, tools, and system states. Toolbars should contain the most frequently used icons limited to 15 items. Consistency and text labels are important. The conclusion restates to only use images when better than text and maintain consistency.
4. Intro
Graphical User Interface
Graphics are integral part of software and increases
usability
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
5. Guidelines
Use icons for a purpose
Application Icons
Click to launch
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
6. Guidelines
Use icons for a purpose
Application Icons
Button images
Pictures used on buttons, clicking it does an action on the
application
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
7. Guidelines
Use icons for a purpose
Application Icons
Button images
Message Icons
Symbols used in messages to get user’s attention
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
8. Guidelines of use
Shortcuts
Quick illustration
Photoshop icons
International Recognition
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
9. Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of approach Example icon
Object A picture of a disk to represent
disk
10. Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of approach Example icon
Object A picture of a disk to represent
disk
Action A picture of someone running to
indicate speed
11. Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of approach Example icon
Object A picture of a disk to represent
disk
Action A picture of someone running to
indicate speed
Tool that represent action Ruler to indicate measuring
12. Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of approach Example icon
Object A picture of a disk to represent
disk
Action A picture of someone running to
indicate speed
Tool that represent action Ruler to indicate measuring
Physical Analogy Magnifying glass to show
enlargement
13. Designing and Choosing Graphics
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Approach Example of approach Example icon
Object A picture of a disk to represent
disk
Action A picture of someone running to
indicate speed
Tool that represent action Ruler to indicate measuring
Physical Analogy Magnifying glass to show
enlargement
Commonly used symbol International don’t do symbols
14. Designing and Choosing Graphics
Create a cohesive set
Similar colours
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
15. Designing and Choosing Graphics
Create a cohesive set
Similar colours
Include only enough details
Sufficient
Too much details
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
16. Designing and Choosing Graphics
Create a cohesive set
Similar colours
Include only enough details
Sufficient
Too much details
Try using standard icons:
The Icon Book and Disk: Visual Symbols for Computer Systems and Documentation by
William Horton, (John Wiley &Sons, 1994)
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
17. Designing and Choosing Graphics
Try to illustrate system state
Be consistent
Do not use a same icon for different tasks
Do not use words
Use text labels when mouse hovers above the icon
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
18. Toolbars
Most frequently used
Text drop down menu
Fairly frequent and across several screens
Toolbar
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
19. Toolbars
Active items available
Limit button images to 15
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
20. Conclusion
Show feedback and/or system state
Use only when it is better alternative to text
Be consistent
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
21. Thank YouReferences
Enterprise – Wide GUI Design
Susan Weinschenk
Sarah C. Yeo
CHI Journal 31st March
Personal Digital Historian: User interface Design
AMX
User interface design style guide