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.

1. Images / Graphics in GUI Design
John Wu
Qiongzhi

2. Agenda
 Intro
 Guidelines
 Recommendation
 Examples
 Conclusion
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion

3. A picture is worth a thousand words.

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