1. Usability in Practice: The Tao of Screen Design Jason Beres jasonb@infragistics.com @jasonberes

2. About Me Manage the product feature sets at Infragistics in the.NET, Reporting, UX, Testing, Icon products INETA Speakers Bureau, MVP for 8 years Founder of Florida.NET & New Jersey.NET User Groups Author/co-Author of 8 books, latest is Silverlight 4 Professional, Wrox Press

3. Agenda Yin and Yang of Development Case Study – Office Ribbon Path to Effective Screens Patterns + Style Guides Tool

4. Ying and Yang Complimentary Opposites that Interact In Screen Design –Implementation Model –Mental Model

5. STEPS TO EFFECTIVE SCREEN DESIGN Create Visual Framework Create Wireframes Create Style Guide

6. High Level to Detailed Design 2 Key Aspects –Navigational Scheme –Persistent Elements Create a Visual Framework

7. Create Wireframes Create a Consistent, Seamless Design –Elements from screen to screen should be consistent –Screen should be divided by function Overall Design is Easy for the User to Organize Perceptually

8. Create Style Guides Document the Framework in a Style Guide Formalize the Language and Terms Should be Specific Enough for Others to Understand the Goals –Fonts, Font Size, Colors, Color Hue, Gradients, Object Offsets

9. NOT SO FAST … And then we’re done?

10. GETTING CONCRETE Screen Design Process = Art + Science

11. What Do These Have In Common? Find out the current number of words Turn on speech command and control Create a SharePoint Document Workspace Print Envelopes Open the Visual Basic Editor Turn on hyphenation Merge the contents of multiple documents Start a web conference Tweak AutoCorrect settings http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx

12. They’re all on the Word 2003 Tools menu!

13. Case Study - Microsoft Re-Designing the Office UI Assumptions that customers are using 5% of the office features For the COMPLETE story, check out Jensen Harris’ blog (along with videos, podcast, etc) –http://blogs.msdn.com/jensenh/archive/2008/03/1 2/the-story-of-the-ribbon.aspx

28. http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx

30. SO WE ENDED UP WITH …

31. http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx

32. HOW DO WE FIX THAT?

33. Art: User Research Understanding the Human-Computer Impedance Mismatch –Interviews –Surveys –Workshops –Observations Overall – how do people feel when using the software? What workflows and tasks do they expect? What are the existing patterns (if they exist) that you can use?

34. Prototypes!

35. Science: The Role of Data Over 3 billion data sessions collected from Office users ~2 million sessions per day In a 90 day period, 352 million command bar clicks in Word were tracked 6000 individual data points were tracked It couldn’t have been done this without data! http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx

36. Science: Using Data Which commands do people use most? How are commands commonly sequenced together? Which commands are accessed via toolbar, mouse, keyboard? Where do people fail to find functionality they’re asking for (in newsgroups, support calls, etc.)?

38. Case Study Summary Like it or not, Microsoft did an enormous about of research on the Ribbon UI Change is not easy – but you need to look at the long term view of your products Case Study #2 – Aqua - http://healthcare.codeplex.com

39. UX – THE PATH TO THE WAY Feeling of First Love or Boring Day Job?

40. The UI is More Than Skin Deep Look Colors Fonts Styles Branding Graphics Feel Interactions Information Architecture Metaphors Friendly, Casual, Vibrant, Aggressive Visual Design Interaction Design Interaction Design

41. Which Would You Buy?

42. Cognitive Model User has a ‘Major Goal’ –Log in –Search Do Not Depend on User’s Memory Effective Use of Gestalt Principles

43. SAP Design Guild Focus on 4 Areas of the Cognitive Model –Sequence – takes care of flow control –Nesting – takes care of dependencies –Spacing – takes care of readability –Grouping – takes care of togetherness

44. Effect of Cognitive Process Recent study on following effective screen display rules University of Alberta, Effects of Violating Screen Design Principles of Balance, Unity & Focus on Recall Learning, Study Time & Completion Rates 74% Had a higher completion rate 21% Completed in less time Visuals got in the way of the cognitive process

45. HOW CAN YOU GET IT RIGHT?

46. Elicit the WHAT, WHO, WHY, WHERE, and WHEN DESIGN VALIDATE UNDERSTAND Build Development Build Use an Iterative, Agile Interaction Design Process

47. 11 KEYS TO BETTER SCREENS

48. #0 – Refer to Known Patterns http://www.quince.infragistics.com http://www.welie.com http://developer.yahoo.com/ypatterns/

49. #1 - Layout Find Successful Patterns –Outlook style for business apps? –Emphasize an Orderly, Clutter Free Design –Create Groups or Grids – Visual Units

50. #2 - Screen Consistency Screens Must Maintain Familiarity –Look to Master Page concepts –Use Same Terminology on Screens –Organize Tasks Consistently –Present Results Consistently –Use Controls / User Controls

51. #3 - Content Flow Maintain Locale Consistency

52. #4 – Good Dialog Create a Good Conversational Dialog Be Informative and Forgiving

53. #5 – Logical Navigation Give Waypoints so users know where to go or go back to Where am I? Where have I come from? What’s next?

54. #6 – Proper Use of Controls Menu – look to Office Ribbon for Menu obfuscation issues Treeview – Do not go more than 3 levels deep, too difficult to search Tabstrips – Nesting can obfuscate important items Tables/Grids – Easy to Read and Scroll, but can become cumbersome – look to Charts to make display more meaningful

55. #8 – Be Direct “Straightforward is better than clever.” http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx

56. #9 – Stick to the Mental Model A Button Should Click A Checkbox Should Check A Scrollbar Should Scroll

57. #10 – Visual Design Should Support Information Architecture

58. Review #0 – Refer to Known Patterns #1 - Layout #2 - Screen Consistency #3 - Content Flow #4 – Good Dialog #5 – Logical Navigation #6 – Proper Use of Controls #8 – Be Direct #9 – Stick to the Mental Model #10 – Visual Design Should Support Information Architecture

59. WRAP UP

60. Summary Follow a process to get to the right answer - UX process to determine visual framework, wireframes, style guides Look to successful case studies on UX (Office Ribbon, Aqua) Interaction Design should guide the Visual Design –It’s not about the Art, it’s about the Usability (plus some beauty) Look to Patterns for answers Refer to the 11 Tips on Screen Design while searching for patterns (http://quince.infragistics.com)http://quince.infragistics.com

61. Resources Tao of Screen Design - http://msdn.microsoft.com/en- us/magazine/ee413547.aspx http://www.quince.infragistics.com http://community.infragistics.com/ux http://blogs.msdn.com/jensenh/default.aspx http://www.sapdesignguild.org/index1.asp http://lukew.com/ff/ http://healthcare.codeplex.com http://www.demystifyingusability.com/2004/12/eyetracking_stu.html?cid=25652258#comment- 6a00d8345a66bf69e200d83500d1da69e2

62. QUESTIONS? jasonb@infragistics.com @jasonberes http://www.infragistics.com