john wu qiongzhi graphics
DESCRIPTION
TRANSCRIPT
Images / Graphics in GUI Design
John Wu Qiongzhi
Agenda
Intro Guidelines Recommendation Examples Conclusion
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
A picture is worth a thousand words.
Intro
Graphical User Interface Graphics are integral part of software and increases
usability
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Guidelines
Use icons for a purpose Application Icons
Click to launch
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
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
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
Guidelines of use
Shortcuts
Quick illustration Photoshop icons
International Recognition
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
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
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
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
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
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
Designing and Choosing Graphics
Create a cohesive set Similar colours
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Designing and Choosing Graphics
Create a cohesive set Similar colours
Include only enough details Sufficient Too much details
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
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
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
Toolbars
Most frequently used Text drop down menu
Fairly frequent and across several screens Toolbar
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Toolbars
Active items available
Limit button images to 15
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Conclusion
Show feedback and/or system state Use only when it is better alternative to text Be consistent
Intro | Guidelines | Designing / Choosing | Toolbars | Conclusion
Thank YouReferences
Enterprise – Wide GUI Design Susan WeinschenkSarah C. Yeo
CHI Journal 31st MarchPersonal Digital Historian: User interface Design
AMXUser interface design style guide