usability in practice: the tao of screen design
DESCRIPTION
Usability in Practice: The Tao of Screen Design. Jason Beres [email protected] @ 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/2.jpg)
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
![Page 3: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/3.jpg)
Agenda• Yin and Yang of Development• Case Study – Office Ribbon• Path to Effective Screens• Patterns + Style Guides Tool
![Page 4: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/4.jpg)
Ying and Yang• Complimentary
Opposites that Interact• In Screen Design– Implementation Model–Mental Model
![Page 5: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/5.jpg)
STEPS TO EFFECTIVE SCREEN DESIGN
Create Visual FrameworkCreate WireframesCreate Style Guide
![Page 6: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/6.jpg)
• High Level to Detailed Design• 2 Key Aspects– Navigational Scheme– Persistent Elements
Create a Visual Framework
![Page 7: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/7.jpg)
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
![Page 8: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/8.jpg)
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
![Page 9: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/9.jpg)
NOT SO FAST …And then we’re done?
![Page 10: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/10.jpg)
GETTING CONCRETEScreen Design Process = Art + Science
![Page 11: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/11.jpg)
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
![Page 12: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/12.jpg)
They’re all on theWord 2003 Tools menu!
![Page 13: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/13.jpg)
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
![Page 14: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/14.jpg)
![Page 15: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/15.jpg)
![Page 16: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/16.jpg)
![Page 17: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/17.jpg)
![Page 18: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/18.jpg)
![Page 19: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/19.jpg)
![Page 20: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/20.jpg)
![Page 21: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/21.jpg)
![Page 22: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/22.jpg)
![Page 23: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/23.jpg)
![Page 24: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/24.jpg)
![Page 25: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/25.jpg)
![Page 26: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/26.jpg)
![Page 27: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/27.jpg)
![Page 28: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/28.jpg)
http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx
![Page 29: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/29.jpg)
http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx
![Page 30: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/30.jpg)
SO WE ENDED UP WITH …
![Page 31: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/31.jpg)
http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx
![Page 32: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/32.jpg)
HOW DO WE FIX THAT?
![Page 33: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/33.jpg)
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?
![Page 34: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/34.jpg)
Prototypes!
![Page 35: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/35.jpg)
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
![Page 36: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/36.jpg)
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.)?
![Page 37: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/37.jpg)
![Page 38: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/38.jpg)
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
![Page 39: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/39.jpg)
UX – THE PATH TO THE WAY
Feeling of First Love or Boring Day Job?
![Page 40: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/40.jpg)
The UI is More Than Skin Deep
Look• Colors• Fonts• Styles• Branding• Graphics
Feel• Interactions• Information Architecture• Metaphors• Friendly, Casual,
Vibrant, AggressiveVisual Design
InteractionDesign
![Page 41: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/41.jpg)
Which Would You Buy?
![Page 42: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/42.jpg)
Cognitive Model
• User has a ‘Major Goal’– Log in– Search
• Do Not Depend on User’s Memory
• Effective Use of Gestalt Principles
![Page 43: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/43.jpg)
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
![Page 44: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/44.jpg)
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
![Page 45: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/45.jpg)
HOW CAN YOU GET IT RIGHT?
![Page 46: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/46.jpg)
Elicit the WHAT, WHO,
WHY, WHERE, and WHEN
DESIGN
VALIDATEUNDERSTAND
Build
Build
Build
Build
Build Build
Development
Build
Use an Iterative, Agile Interaction Design Process
![Page 47: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/47.jpg)
11 KEYS TO BETTER SCREENS
![Page 48: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/48.jpg)
#0 – Refer to Known Patterns
• http://www.quince.infragistics.com
• http://www.welie.com
• http://developer.yahoo.com/ypatterns/
![Page 49: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/49.jpg)
#1 - Layout• Find Successful Patterns– Outlook style for business apps?– Emphasize an Orderly, Clutter Free Design– Create Groups or Grids – Visual Units
![Page 50: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/50.jpg)
#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
![Page 51: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/51.jpg)
#3 - Content Flow• Maintain Locale Consistency
![Page 52: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/52.jpg)
#4 – Good Dialog• Create a Good Conversational Dialog • Be Informative and Forgiving
![Page 53: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/53.jpg)
#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?
![Page 54: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/54.jpg)
#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
![Page 55: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/55.jpg)
#8 – Be Direct
“Straightforward is better than clever.”
http://blogs.msdn.com/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx
![Page 56: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/56.jpg)
#9 – Stick to the Mental Model
• A Button Should Click• A Checkbox Should Check• A Scrollbar Should Scroll
![Page 57: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/57.jpg)
#10 – Visual Design Should Support Information Architecture
![Page 58: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/58.jpg)
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
![Page 59: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/59.jpg)
WRAP UP
![Page 60: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/60.jpg)
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)
![Page 61: Usability in Practice: The Tao of Screen Design](https://reader035.vdocument.in/reader035/viewer/2022081604/56816968550346895de12f7e/html5/thumbnails/61.jpg)
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