620 likes | 695 Views
Usability in Practice: The Tao of Screen Design. Jason Beres jasonb@infragistics.com @ jasonberes. About Me. Manage the product feature sets at Infragistics in the .NET, Reporting, UX, Testing, Icon products INETA Speakers Bureau, MVP for 8 years
E N D
Usability in Practice:The Tao of Screen Design Jason Beres jasonb@infragistics.com @jasonberes
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
Agenda • Yin and Yang of Development • Case Study – Office Ribbon • Path to Effective Screens • Patterns + Style Guides Tool
Ying and Yang • Complimentary Opposites that Interact • In Screen Design • Implementation Model • Mental Model
Create Visual Framework Create Wireframes Create Style Guide Steps to Effective Screen Design
Create a Visual Framework • High Level to Detailed Design • 2 Key Aspects • Navigational Scheme • Persistent Elements
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
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
And then we’re done? Not so fast …
Screen Design Process = Art + Science Getting Concrete
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
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
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
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
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
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?
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
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.)?
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
Feeling of First Love or Boring Day Job? UX – The Path to the way
The UI is More Than Skin Deep Interaction Design Visual Design
Cognitive Model • User has a ‘Major Goal’ • Log in • Search • Do Not Depend on User’s Memory • Effective Use of Gestalt Principles
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
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
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
#0 – Refer to Known Patterns • http://www.quince.infragistics.com • http://www.welie.com • http://developer.yahoo.com/ypatterns/
#1 - Layout • Find SuccessfulPatterns • Outlook style for business apps? • Emphasize an Orderly, Clutter Free Design • Create Groups or Grids – Visual Units
#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