Effective Screen Design: The Art and Science of Usability in Practice

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, WroxPress

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. Create Visual Framework Create Wireframes Create Style Guide Steps to Effective Screen Design

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

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. And then we’re done? Not so fast …

10. Screen Design Process = Art + Science Getting Concrete

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 theWord 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/12/the-story-of-the-ribbon.aspx

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

29. http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspxhttp://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.aspxhttp://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 peopleuse most? • How are commands commonlysequenced together? • Which commands are accessedvia toolbar, mouse, keyboard? • Where do people fail to findfunctionality 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. Feeling of First Love or Boring Day Job? UX – The Path to the way

40. The UI is More Than Skin Deep Interaction Design Visual 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 Visuals got in the way of the cognitive process 74% 21% Completed in less time Had a higher completion rate University of Alberta, Effects of Violating Screen Design Principles of Balance, Unity & Focus on Recall Learning, Study Time & Completion Rates

45. How can you get it right?

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

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 SuccessfulPatterns • 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