Interface Usability - Adding Schweppervescence


Published on

Interface design is not something that belongs solely in the world of Apple. Your website and applications can all benefit greatly from an understanding of how your users might navigate your product.

Presented At the Sydney NETUG on August 18th by Adam Cogan

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Interface Usability - Adding Schweppervescence

  1. 1. Interface UsabilityAdding SchweppervescenceAdam CoganChief Architect at SSWMicrosoft Regional Director@AdamCogan Future Thinking. Immediate Results.
  2. 2. Agenda General Usability Practices Windows Apps Popups and Message Boxes Controls and Forms (Windows and Web) Reports Web UI Mobile interfaces Controversy! Future Thinking. Immediate Results.
  3. 3. Comfort of LearningTechnology is intimidating. People are afraid to break the system orlose the data. Encourage experimentation, increase comfort Have reversible actions (Undo) Previewed actions Avoid dialogs unless there‟s a system error (not user error) Track user preferences and defaults, *remember recent*
  4. 4. What is good UI??
  5. 5. About AdamChief Architect at SSW  Developing custom solutions for businesses across a range of industries such as Government, banking, insuranceMicrosoft Gold PartnerMicrosoft Regional DirectorVSTS MVP@AdamCogan Future Thinking. Immediate Results.
  6. 6. A good UI just works the way you expect There are no surprises There is no need to use help RTFM Future Thinking. Immediate Results.
  7. 7. A good UI is... Intuitive Feels fast  Eg. No white screens, threading code Consistent No clutter – not busy…
  8. 8. A good UI is... Minimal “modal” popups Good error handling Easy to customize + apps (aka a platform) Gamification eg. Badges
  9. 9. MSDN
  10. 10. Stack Overflow
  11. 11. Visual Studio Achievements
  12. 12.  Good UI:
  13. 13. Future Thinking. Immediate Results.
  14. 14. 1. General Usability Practices Future Thinking. Immediate Results.
  15. 15. Do you intuitively know how to usesomething?
  16. 16. A thermostat
  17. 17. VS
  18. 18. Do you realize that when it comes tointerface design less is more? Less is more The importance of Defaults - Aim for Next, Next, Next„ Hide advanced options, but make them easy to find!
  19. 19. Future Thinking. Immediate Results.
  20. 20. Do you realise people scan, not read? You‟re late for a flight and you need to check in …
  21. 21. Do you know to use storyboards? Google: SSW storyboarding
  22. 22. Is your data easy to search?
  23. 23. What is more important than search? TOUCH
  24. 24. Windows 8 live tiles - metro Eg. 01corporatenews.aspx
  25. 25. Do you consider optical alignment?
  26. 26. Bad
  27. 27. Good…
  28. 28. And now…
  29. 29.  iSlate
  30. 30.  iSlate
  31. 31.  iSlate…. IsLate?
  32. 32. Do you make matrix columns assimple as possible?
  33. 33. Do you make matrix columns assimple as possible?
  34. 34. What about Columns or Text? ?
  35. 35. What about Columns or Text? Columns are easier to scan  Use when comparing data, or need ordering Text is aesthetically pleasing
  36. 36. Do you make the homepage a portal? Make it more than just navigation Put useful current information on the homepageE.g. Top billing customers for the month and a button under it for adding an invoiceE.g. See the number of bugs counted by the most common Future Thinking. Immediate Results.
  37. 37.  Do you think this rule is limited to web UI?
  38. 38. Do you log usage? Can see what functions are being used more often (e.g. reports, menu items) To work out what fields to show on search pages (standard and advanced tabs) Know which parameters are being used
  39. 39. Include extra information if it gives youcontext Put all options in even if some aren‟t selectableLet‟s look at two examples: Checkbox Image…
  40. 40. A good app should… Encourage experimentation to increase comfort:  Undo  Remember your last state  Live preview
  41. 41. Live previews
  42. 42. Do you use the concept of drafts? Auto save records Prompt to save the record when the user leaves a page that has been modified When the user logs back on prompt them that they have drafts E.g.
  43. 43. I have a dream
  44. 44. Help - Do you have a wiki for eachpage or form?
  45. 45. Help - Do you help users when they geterrors by directing them to a wiki or KB?
  46. 46. Lots more:
  47. 47. 2. Windows Applications
  48. 48. Menu - Do you know the 8 itemsevery "Help" menu needs? Training Videos Online User Guide Knowledge Base Make a Suggestion Report a Bug Check for Updates Run Unit Tests... About [Product Name]...
  49. 49. Menu - Do you have a "Help | TrainingVideos" item?
  50. 50. Menu - Do you have your "Help | UserGuide" online? Easier to keep up-to-date and maintain Stats on usage Allows community commenting
  51. 51. Menu - Do you include a "Tools |Validate Data"?
  52. 52. Give Instructional Help Don‟t give descriptive information about the page Give the user instructions on how to use the page Bad example - This page allows you to define a search Good example – To start a search choose an option to the left
  53. 53. Lots more: erfaces-Windows-Application.aspx
  54. 54. 3. Popups and Message Boxes
  55. 55. When good sites go bad…
  56. 56. Not even Apple could makethe popup less annoying
  57. 57. Do you avoid message boxes?
  58. 58. Do you avoid message boxes? Only use them in the following scenarios:  Confirming the deletion of a record  Kicking off a long running process
  59. 59. Do you use messages that areconcise and informative? Is it ok to cancel?
  60. 60. Do you use messages that areconcise and informative? Microsoft uses this one
  61. 61. Vote – What about popup forms? Some people like popup forms. Some do not. ?
  62. 62. Popup modal forms are no good You can‟t read or edit content behind Long loading times – ask CRM4 users!
  63. 63. Popup modal forms are good Obvious you have an action to take Simplify a form Doesn‟t get lost behind another window Can dim the background for focus
  64. 64. Should this be a popup?
  65. 65. Re-vote....Who likes popup forms? ?
  66. 66. Lots more: erfaces-Popups-and-Messages.aspx
  67. 67. 4. Controls and Forms(Windows and Web)
  68. 68. Do you know how to label dropdownlists? Less is more! Select all should be “-All-” Note: if you want to select nothing then add an entry to the dropdown for (null)
  69. 69. Rule #9 x#AllDimensionsTag
  70. 70. Do you include the number ofresults in drop down list? When you use a combo box, its very helpful to be able to see at a glance how many results can be expected
  71. 71. What if user wants to sort by either alphabeticalor numerical?
  72. 72. What‟s a better way to do this???
  73. 73. Radio buttons…
  74. 74. Do you use Text Boxes for displayingdata? users know it is data, not a label of the application users can copy and paste from the field
  75. 75. Which is better? A: Neither, use a checkbox!
  76. 76. Good
  77. 77. What‟s wrong with this?
  78. 78.  Better Example Also applicable for the rule “Less is More - Do you always try to reduce complexity?”
  79. 79. Guidelines – when to use what? Checkboxes  1 option – eg. yes/no, on/off  Multiple simultaneous options – e.g. Eggs and Bacon and Tomato Radio buttons  2-3 exclusive options – e.g. Coke or Pepsi Drop down list  3+ exclusive options e.g. Favourite SSW employee
  80. 80. Do you disable buttons that areunavailable?
  81. 81.  What‟s wrong with this?
  82. 82. Do you know when to use rich textboxes? A plain textbox limits the detail of the users notes  For multi-line textboxes (e.g. Descriptions, Memos, Notes) Allows you to use:  Links  formatting (bold, underline, etc.)  bullet points and numbering
  83. 83. Telerik rich textbox (Telerik)
  84. 84. Do you use ellipses buttons? Helps the user enter more data related to that field Should call a popup form
  85. 85. Do you use ellipses buttons?
  86. 86. Lots more: erfaces-Controls.aspx
  87. 87. 6. Reports
  88. 88. Do you make graphs easy to digest? A display containing more than four perceptual units of information cannot be understood at a glance
  89. 89. Do you make graphs easy to digest?
  90. 90. Lots more: erfaces-Reports.aspx
  91. 91. 7. Web UI
  92. 92. Do you follow the “Banana Rule”? How do you get a monkey pay attention to something? A:/ You could lure him by tempting him with a banana. The principle is.... Once we have the monkeys attention focused on the banana, he will try to get his hands on it!
  93. 93. Treat your users like monkeys!
  94. 94.  Bad banana!
  95. 95. How do I know where I am??
  96. 96. Do you know to use Breadcrumbs? Note the links.... What is the exception? ....
  97. 97. But don‟t link to yourself! If you‟re on the homepage, there‟s no point having a link to the homepage If you have a breadcrumb, don‟t link to the current page
  98. 98.  SharePoint
  99. 99. Do you know the correct way todisplay a hyperlink? Underlines are only used for links! This does NOT mean all links should be underlined Always have a *rollover* effect You should indicate *visited* links.
  100. 100.  Via CSS ...Do you know the correct way todisplay a hyperlink? Normal links Must be in Visited links this order! Rollover effect
  101. 101. Hyperlinks - external If a link is to an external site, a visual indication should be provided to the user like this: This should be done via CSS or jQuery ...
  102. 102. Via CSS:
  103. 103. Via jQuery Custom for SSW Filters image links and other parameters ...
  104. 104. Via jQuery „CSS is manual‟ „JQuery is automatic‟ Content heavy websites with large archives – are you really going to go back and add a class to each link??
  105. 105. Via jQuery Warning: Corneliu the god of performance warns against this recommendation because  CSS is fast  jQuery is slow TODO: The next step is to verify this via a VS 2012 Ultimate Coded UI test!
  106. 106. Should external links open in a NewWindow? Warning: Not mainstream HTML 5 does not have the TARGET On the purchase page add “terms and conditions (opens in a new window)” WebsitesNavigation.aspx#ManageExternalLinks
  107. 107. Do you save clicking through?
  108. 108. Do you save clicking through?
  109. 109. Do you indicate which fields are required? Prevents a wasted trip to the server Should get the required fields right the first time around toBetterInterfaces- Controls.aspx#CorrectValidationFocus
  110. 110. Do you use icons in web pages to indicate status directly?
  111. 111. Do you use icons in web pages to indicate status directly?
  112. 112. Do you use SetFocusOnError oncontrols that fail validation For Validation Errors, don‟t assume they have to read a messagebox Automatically focus on the controlNote: Balloons also direct the eye…
  113. 113. Do you have a consistent search results screen? What‟s important ?
  114. 114. Do you have a consistent search results screen? A statement that explains the criteria Pages navigation Number of results found Filters at the top ...
  115. 115. Do you always give more informationunder “Did not match anything”? Websites are continually saying „404 – page not found‟ or „your search did not match anything This should be avoided …
  116. 116. Broken Links are inexcusable! ? Use SSW Link Auditor
  117. 117. Do you know the two things to createa consistent look and feel? Master pages CSS
  118. 118. Do you give the 6options to share?
  119. 119. Do you make the logged in stateobvious?
  120. 120. Lots more: esNavigation.aspx
  121. 121. 6. Mobile Interfaces
  122. 122. First impressions:You only get one shot
  123. 123. First impressions Better to have a Porsche UI and a VW engine than a VW UI and a Porsche engine. Of course you want a Porsche UI and a Porsche engine, but...
  124. 124. When do you build a iPhone app vsiPhone web app??
  125. 125. iPhone app vs iPhone Web app Depending on  budget  usage of native API • Camera, Contacts, Photos e.t.c.  existing web app and just add CSS Offline: An iphone (or WP8 ) web app without a network connection, will not load the web page you were on previously. Well, it can…
  126. 126. When do you build a WP8 app vs an iPhoneapp??
  127. 127. WP8 app vs iPhone app A: If your app is build on Silverlight today.  Time to market  Lower $  Reuse MVVM  Reuse Silverlight controls  Reuse the Business and Data layer
  128. 128. WP8 app vs iPhone appThe biggest thing going for Windows Phone 8 is:  .NET dev shops  environment more productive than xcode “VS2012 kicks the sh*t out of any other IDE” - Damian Brady
  129. 129. WP8 app vs iPhone app Note: WP7 is built on Silverlight 3 Note: WP7.5 is built on Silverlight 4 Note: WP7.5 was built by a "web team" not "Rich client app team", so some issues exist:  Avoid using System.Windows.Browser.dll in your Silverlight App (as it works only OOB on desktop) and you will have to use a different control on Windows Phone 8
  130. 130. WP8 app vs iPhone app WP8 has resolved those problems and is perfect in every way <3
  131. 131. WP8 app vs iPhone appOthers reasons are: You can deploy your app without going through the appstore/market place. E.g. my SSW business app Appstore: No Market place: Yes (hidden)
  132. 132. WP8 app vs iPhone app Turn around through the appstore is quicker: Appstore: 1-3 weeks (unmanaged code) Market place: 2 days (managed code) Quicker since it is managed code. Unmanaged code is easy to spot App store is more aggressive in blocking apps
  133. 133. WP8 app vs iPhone app Do you know what guidelines to follow for WP8? User Experience Design Guidelines for Windows Phone us/library/windowsphone/design/hh202915(v=vs.92).aspx
  134. 134. WP8 app vs iPhone app Tip: if you‟re writing your own user controls, you‟re probably doing it wrong (WP7.5) (WP8)
  135. 135. Lots more: s-Mobile.aspx
  136. 136. 7. Controversy!
  137. 137. ?
  138. 138.  Well, we had a few in the presentation... 
  139. 139. Comfort of LearningTechnology is intimidating. People are afraid to break the system orlose the data. Encourage experimentation, increase comfort Have reversible actions (Undo) Previewed actions Avoid dialogs unless there‟s a system error (not user error) Track user preferences and defaults, *remember recent*
  140. 140. Resources Rules to Better Interfaces ces.aspx Rules to Better Website Layouts tesLayout.aspx
  141. 141. Resources
  142. 142. Summary General Usability Practices Windows Apps Popups and Message Boxes Controls and Forms (Windows and Web) Reports Web UI Mobile interfaces Controversy! Future Thinking. Immediate Results.
  143. 143. Thank You!Sydney | Melbourne | Brisbane |
  144. 144. Find me on Slideshare!