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