1. User Interface + Graphic Design INTRODUCTION Presented by Sonia Williamson User Interface Graphic Designer sonia.williamson@rightnow.com 937.681.7961 User Interface + Graphic Design

2. OVERVIEW Different aspects of the user experience and the importance of aesthetics Basic design guidelines Dos, don’ts, and current trends Brief Blend tutorial : the design view

3. User Interface + Graphic Design INTRODUCTION UtilityUsabilityLikeability Considerations : Functionality Performance Appropriate features Developers’ arena Considerations : Microsoft Principles of Usability Discovery Learning Efficiency Jakob Nielsen Principles of Usability Learnability Efficiency Memorability Errors (low amount) Satisfaction Developers + Designers Considerations : User’s enjoyment Aesthetic appeal Willingness to return Minimization of frustrations Designers’ arena

4. User Interface + Graphic Design DRILLDOWN Microsoft’s usability stages Discovery Looking for and finding the feature you need. An effective discovery period would have minimal wrong choices/errors in feature location. Learning Process of figuring out how to use the feature. Length of process and number of errors are an indication or success or failure at this stage. Efficiency Mastery of the process in terms of memorability and speed of execution Jakob Nielsen’s are basically these 3 broken down in different ways. D

5. User Interface + Graphic Design PURPOSE Aesthetics in UI design create customer trust and product likeability which contribute to a satisfying user experience. Humans are more readily able to solve problems when they are able to think outside the box. Tense, anxious people lose the ability to creatively solve problems. Attractive items and appealing interfaces put users in a more relaxed state of mind, making it easier try different solutions. They are also more likely to overlook minor irritations than tense/anxious users. Emotional Design by Donald Norman

6. #1 WEB GURU!!!! Free Consultation Your site can look this good too Call us at 937-406-2009

7. User Interface + Graphic Design ILLUSTRATION 1

8. User Interface + Graphic Design ILLUSTRATION 2

9. User Interface + Graphic Design ILLUSTRATION 3

10. User Interface + Graphic Design ILLUSTRATION 4

11. User Interface + Graphic Design ILLUSTRATION 5

12. User Interface + Graphic Design EYE TRACKING The Login screen is NOT what the user is looking for or what they should notice first. Scoring as the number one thing the user looks at = this is an ineffective design for its intended purpose.

13. User Interface + Graphic Design EYE TRACKING Example of very little hierarchy: there is no emphasized element.

14. User Interface + Graphic Design RULE OF THIRDS

15. User Interface + Graphic Design BALANCE If you are going to center anything vertically, cheat it up.

16. User Interface + Graphic Design COLOR THEORY Color plays a large role in the style and feel of any design.

17. User Interface + Graphic Design DESIGN DOs DO Follow the golden rule of design : intent of design DO Use whitespace : objects need to breathe DO Be consistent DO Use the Gestalt principles DO Stick to sans serif fonts for UI design (typically) DO Create a clear hierarchy DO Use color theory to focus attention DO Create balance DO Remember to be aware of visual flow DO Use the Rule of Thirds (this is not design doctrine but it can be a helpful tool)

18. User Interface + Graphic Design DONT Create clever but unclear navigation schemes DONT Overload the information DONT Use all-caps carelessly to create emphasis DONT Have “near misses” DONT Mix fonts DONT Create visual strain with competing colors & tints DONT Over-do the flashy items DONT Add elements “just because” DONT Forget that the purpose of the design is paramount And don’t be afraid to break the rules once you know how to use them! DESIGN DONTs

19. User Interface + Graphic Design CURRENT TRENDS 1 Embossing 2 Rich user interfaces 3 PNG transparency 4 Big typography 5 Font replacement (sIRF) 6 Modal boxes 7 Media blocks 8 The magazine look 9 Carousels 10 Vintage / retro styles 11 Handwritten notes 12 Grungy 13 PNG transparency 14 Splatter print 15 Watercolor 16 Collage 17 Wood pattern 18 Zigzag pattern 19 Sketches / handwritten fonts www.webdesignerwall.com www.smashingmagazine.com

20. User Interface + Graphic Design CURRENT TRENDS OUT Shiny logos OUT Unnecessary reflections below objects OUT Blinking images OUT Busy backgrounds behind text (MySpace!!!!!) OUT Flash homepages OUT Aqua style icons and buttons OUT Rounded corners www.hostway.com

21. User Interface + Graphic Design GOOD RESOURCES http://ui-patterns.com http://quince.infragistics.com http://windowsclient.net/learn/ http://www.msdn.microsoft.com http://www.smashingmagazine.com

22. User Interface + Graphic Design BLEND TUTORIAL Add object Drop shadow effect Gradient tool & gradient transform arrow Combining objects Masking objects & video Simple timeline