Michael Kowalski

7,906
-1

Published on

Michael Kowalski's presentation from Future of Web Apps, in London, October 2007.

Published in: Business, Technology
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,906
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
336
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

Michael Kowalski

  1. 1. User interface design for web applications Michael Kowalski Kitsite.com
  2. 2. What we’re going to cover • What is the difference between designing a webapp and designing a website? • Why is good user interface design important? • What are the characteristics of a great user interface? • What can we learn from interaction design? • What are some specific techniques that I can use to improve my webapp UI? • Where is web UI design heading?
  3. 3. Q. How is designing a web application different from designing a website?
  4. 4. Information
  5. 5. Information
  6. 6. Information Interaction
  7. 7. Web user interface HTML form controls are the primitives of an application user interface
  8. 8. Hey, let’s build the webapp right here! • Democratisation of user interface development • Low cost, rapid development • The web is an open distribution channel • Anybody can build a web app!
  9. 9. Alan Cooper
  10. 10. “The limitations and challenges of web interactivity... set interaction design back several years” Alan Cooper
  11. 11. Web constraints
  12. 12. Web constraints annoyances
  13. 13. Living on the network
  14. 14. Living on the network • Connectivity
  15. 15. Living on the network • Connectivity • Network latency
  16. 16. Living on the network • Connectivity • Network latency • Source code down the wire
  17. 17. Living in the browser x
  18. 18. Living in the browser x • Security sandbox • Box-model rendering • Limited widget set No access to system menus No rich text editing No drawing • Typographically limited
  19. 19. My pet hates • <select multiple>! • Backspace key for navigation! • Form controls are modal! • CSS...
  20. 20. But if web UI sucks so badly...
  21. 21. But if web UI sucks so badly... how come the web is winning?
  22. 22. Why web apps became viable • Cross-platform consistency driven by standards • Asynchrony • Faster networks and computers • “Worse is better”
  23. 23. Innovation from the web Hyperlinks Folksonomy navigation Findability addressability bookmarks Embedding Social apps portlets sharing widgets collaboration
  24. 24. Q. Why is good user interface design important?
  25. 25. • The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs.
  26. 26. • The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs. • It’s never been cheaper or easier to get an idea to market.
  27. 27. • The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs. • It’s never been cheaper or easier to get an idea to market. • In a more competitive market, emphasis will shift from executing first to executing best.
  28. 28. • The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs. • It’s never been cheaper or easier to get an idea to market. • In a more competitive market, emphasis will shift from executing first to executing best. • The quality of user experience is becoming the significant differentiator.
  29. 29. • The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs. • It’s never been cheaper or easier to get an idea to market. • In a more competitive market, emphasis will shift from executing first to executing best. • The quality of user experience is becoming the significant differentiator. • Also, scaling your app depends on not having to handle support requests (or at least, not linearly).
  30. 30. Let’s not reinvent wheels We can take advantage of many years of research in interaction design. Plus we can look at best practice on the web today.
  31. 31. Q. What are the characteristics of a good user interface?
  32. 32. simple
  33. 33. consistent simple
  34. 34. consistent simple polite
  35. 35. consistent simple polite responsive
  36. 36. consistent simple polite responsive pragmatic
  37. 37. consistent simple polite responsive aesthetically pragmatic pleasing
  38. 38. Interaction design concepts
  39. 39. Concept 1 The user
  40. 40. You are not the user!
  41. 41. Real world process or object
  42. 42. The implementation model
  43. 43. The user model
  44. 44. The user model
  45. 45. The user model Mismatch between the user model and the implementation model is a source of usability problems
  46. 46. Users have different levels of expertise Novice Intermediate Expert
  47. 47. Users have different levels of expertise Novice Intermediate Expert
  48. 48. Users have different levels of expertise Novice Intermediate Expert
  49. 49. The rule of 7
  50. 50. The rule of 7 • Short term memory holds around 7 distinct things • Fades in 10 - 20 seconds
  51. 51. Spolsky’s 3 laws of users People can’t control the mouse
  52. 52. Spolsky’s 3 laws of users People can’t read People can’t control the mouse People can’t remember
  53. 53. A polite interface assumes the user is busy and has more important things to do than think about how the app works.
  54. 54. A polite interface assumes the user is busy and has more important things to do than think about how the app works. • Talks the user’s language • Designed around the user’s conceptual model • Focused on achieving user goals • Is tolerant and forgiving
  55. 55. Concept 2 Metaphor
  56. 56. Metaphor A shopping basket • Add to the basket • View the basket • Go to the check out
  57. 57. Metaphor can be a useful way of gluing together the user model and the implementation model • Metaphor gives developers a language to discuss the model • Warning: metaphors can get you in trouble if you follow them too literally
  58. 58. False metaphor
  59. 59. Concept 3 Aordance
  60. 60. Affordance is... “the perceived and actual properties of the thing... that determine just how the thing could possibly be used” Don Norman, The Design of Everyday Things
  61. 61. A tale of two buttons Save Save
  62. 62. A tale of two buttons Save Save
  63. 63. A tale of two buttons Save Save
  64. 64. A tale of two buttons Save Save
  65. 65. A tale of two buttons Save Save
  66. 66. A tale of two buttons Save Save
  67. 67. A tale of two buttons Save Save
  68. 68. A tale of two buttons Save Save
  69. 69. The #1 affordance on the web Home | Help | Your profile
  70. 70. The #1 affordance on the web Home | Help | Your profile • This is a learned affordance
  71. 71. New affordances evolve
  72. 72. Fitt’s Law T = a + b log2(D +1) W where T is the average time taken to complete the movement. a and b are empirical constants, and can be determined by fitting a straight line to measured data. D is the distance from the starting point to the centre of the target.
  73. 73. Fitt’s Law T = a + b log2(D +1) W
  74. 74. Fitt’s Law T = a + b log2(D +1) W Targets that are smaller and/or further away require more time to acquire.
  75. 75. Bigger targets are better Browse Search
  76. 76. Bigger targets are better Browse Search
  77. 77. Bigger targets are better Browse Search
  78. 78. Bigger targets are better Browse Search
  79. 79. Affordance techniques • Bevelled edges and gradients on buttons • Texture, eg. grippy corners on draggables • label for • Tooltips (via title attribute on a tags) • Cursor hinting
  80. 80. Concept 4 Excise
  81. 81. Excise is noise in the interface • A “cognitive tax” on the user • Effort that is not directed towards the users’ goals • Frequently exposes the underlying implementation model • Satisfies the needs of the technology rather than the user • Visual clutter is excise • Customisation is usually excise
  82. 82. Too much affordance is excise Therefore: • Trade off affordance against excise to prioritise more frequent tasks • Provide extra affordance transiently, eg. on mouseover • Reduce the affordance on less commonly used controls
  83. 83. Using links for commands Save Cancel • In a form, hyperlinks have less affordance than buttons, so can be used to reduce excise. • Use a different colour to distinguish command links from navigational links.
  84. 84. Progressive disclosure Use progressive disclosure to reduce excise Show more
  85. 85. Progressive disclosure Use progressive disclosure to reduce excise Show more less • Disclosure arrows • Hyperlinks to popups or overlays • Dropdowns In a goal-oriented design, not every function has to be accessible from every screen.
  86. 86. Concept 5 Modes
  87. 87. Modes The same gesture has different meanings depending on what mode the application is in
  88. 88. Modes Approve Reject That’s the stupidest thing I ever heard! I agree with every word of your brill... Buy Vi@gra from us!!!
  89. 89. Modes Approve Reject That’s the stupidest thing I ever heard! I agree with every word of your brill... Buy Vi@gra from us!!! Modal Choose the command mode first (eg. “Approve” and then select the item to action.
  90. 90. Modes Approve Reject That’s the stupidest thing I ever heard! I agree with every word of your brill... Buy Vi@gra from us!!! Modeless Make a selection first, and then choose Modal Choose the command mode first (eg. a command to then to that selection. “Approve” and apply select the item to action.
  91. 91. Modes
  92. 92. Modes • With a few exceptions, modes are bad
  93. 93. Modes • With a few exceptions, modes are bad • The exceptions: graphics and other drawing apps
  94. 94. Modes • With a few exceptions, modes are bad • The exceptions: graphics and other drawing apps • Transient modes are less bad
  95. 95. Modes • With a few exceptions, modes are bad • The exceptions: graphics and other drawing apps • Transient modes are less bad • If you are using modes, then the current mode should be visible right where the user is looking (eg. by changing the cursor).
  96. 96. Concept 6 Posture
  97. 97. What is posture? • Defined by Alan Cooper in About Face • Identified 4 different postures for apps • Posture relates to amount of attention that a user will give the application
  98. 98. Sovereign
  99. 99. Transient
  100. 100. Auxiliary
  101. 101. Daemonic
  102. 102. Immersive
  103. 103. Concept 7 Preattention
  104. 104. Preattention variables • Hard-wired rules of human perception • Things we see immediately, without conscious thought
  105. 105. Visual properties Intensity Shape Colour Symmetry Texture Motion
  106. 106. Visual properties Intensity Shape Colour Symmetry Texture Motion
  107. 107. Spot the odd one out
  108. 108. Spot the odd one out
  109. 109. Grouping
  110. 110. Use grouping and visual properties to: • Prioritise what’s important and most useful • Associate related commands or information • Distinguish between controls that behave differently • Establish consistency
  111. 111. Bad Amazon • Buttons are variably sized • Poor alignment and inconsistent guttering • Giftbox icon is excise • Colours used inconsistently
  112. 112. Concept 8 Locus
  113. 113. I’m looking here
  114. 114. I’ll notice this
  115. 115. I probably won’t notice anything here
  116. 116. Concept 9 Feedback
  117. 117. Communication Action Visual cues Feedback time
  118. 118. Communication Action Visual cues Feedback (“feedforward”) time
  119. 119. 0.25 After seconds, the user will assume that it hasn’t worked and try again
  120. 120. Feedback rules
  121. 121. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started.
  122. 122. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started. • Use spinners or progress bars for actions that 1 second. will take more than
  123. 123. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started. • Use spinners or progress bars for actions that 1 second. will take more than • Document load events should not take more 10 seconds. than
  124. 124. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started. • Use spinners or progress bars for actions that 1 second. will take more than • Document load events should not take more 10 seconds. than • Acknowledge completion modelessly
  125. 125. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started. • Use spinners or progress bars for actions that 1 second. will take more than • Document load events should not take more 10 seconds. than • Acknowledge completion modelessly • If completion will take longer than a few seconds, the new status should be displayed non-transiently
  126. 126. Now Current state • What’s happening now? • Am I logged in? • Are my friends logged in? • Is there new activity I should know about?
  127. 127. Next Visual cues • What’s going to happen next? • What will happen if I click this?
  128. 128. Concept 10 Icons
  129. 129. Icons Icons can be useful because: • Don’t take up much screen real state • Take advantage of human spatial recall • They have become a familiar idiom • Can add colour and visual interest
  130. 130. The trouble with icons
  131. 131. The trouble with icons • In a modeless interface, most command affordances will be verbs.
  132. 132. The trouble with icons • In a modeless interface, most command affordances will be verbs. • Verbs are hard to draw.
  133. 133. The trouble with icons • In a modeless interface, most command affordances will be verbs. • Verbs are hard to draw. • Most icons are therefore hard to interpret without a label.
  134. 134. The trouble with icons • In a modeless interface, most command affordances will be verbs. • Verbs are hard to draw. • Most icons are therefore hard to interpret without a label. • Icons work best in sovereign posture applications where space is at premium and users have the time to learn the icons.
  135. 135. Rules for using icons • Use icons sparingly. • Use icons that convention has made familiar (eg. document icons) • Label your icons, using the app vocabulary. Avoid puns! • Don’t forget your app’s colour scheme and lighting angle.You may need a larger palette of colours for hinting - but still keep it constrained. • Get professionals to design them!
  136. 136. Concept 11 Learnability
  137. 137. Learnability is... • what we usually mean when we say “intuitive.” • Because most web apps have a transient posture, this is particularly important - your app has to be relearnable as well as learnable. • Warning Too much guidance can be excise
  138. 138. Concept 12 irectD manipulation
  139. 139. Direct manipulation
  140. 140. Direct manipulation • The user acts directly on a visual representation of an object, and immediately sees the result.
  141. 141. Direct manipulation • The user acts directly on a visual representation of an object, and immediately sees the result. • Examples: • Drag and drop • Drag resize • Drawing tools
  142. 142. Direct manipulation • The user acts directly on a visual representation of an object, and immediately sees the result. • Examples: • Drag and drop • Drag resize • Drawing tools • Downside: generally poor affordance
  143. 143. Evaluating web app UI Divide up into groups of about 4 Pick a web app Evaluate aordance, excise and feedback Look for good and bad points Suggest at least one improvement 15 minutes
  144. 144. br/
  145. 145. Techniques
  146. 146. Technique 1 UI first
  147. 147. Design the user experience first
  148. 148. Design the user experience first • Before user research?
  149. 149. Design the user experience first • Before user research? • Before data modelling?
  150. 150. Design the user experience first • Before user research? • Before data modelling? • Before technology choices?
  151. 151. Design the user experience first • Before user research? • Before data modelling? • Before technology choices? Yes! Avoid getting railroaded by the implementation model
  152. 152. User research • Formal user research can be expensive, tricky and inconclusive • Long-tail users might be hard to come by • Informal research with a handful of users can give useful insights • Beta launching can get early feedback from real users • Apple vs Microsoft
  153. 153. Technique 2 Personas
  154. 154. Sarah Turner Justin Finch “Sooner is better.” “I’m not much of a technology buff, to be Occupation: Head of honest” PR Occupation: Bookseller Wants to get prior approval on new Wants to get info about corporate comms. new releases as painlessly Worries that her staff as possible. Low will not use the new app expectations: thinks the unless it’s really simple. app will be pointlessly Must have controlled complicated. Dislikes hard costs. Sarah can be quite sell from publishers; wants demanding. to make up his own mind.
  155. 155. Sarah Turner Justin Finch “Sooner is better.” “I’m not much of a technology buff, to be Occupation: Head of honest” PR Occupation: Bookseller Wants to get prior approval on new Wants to get info about corporate comms. new releases as painlessly Worries that her staff as possible. Low will not use the new app expectations: thinks the unless it’s really simple. app will be pointlessly Must have controlled complicated. Dislikes hard costs. Sarah can be quite sell from publishers; wants demanding. • Not a market segment to make up his own mind. • A representative individual
  156. 156. Technique 3 Goal-directed design
  157. 157. Goal-directed design Task Task Task Goal Task Task
  158. 158. Goal-directed design Task Task Task Goal Task Task May not be appropriate in social spaces
  159. 159. Goal-directed design • Determine goals • Break down into tasks • Aim for 1 task = 1 screen • Every digression is an obstacle to the user Step 1 Step 2 Step 3 Done
  160. 160. “Just start” • Occasional use or transient posture apps need to be optimised for novices over intermediates. • The web is your marketing and distribution channel. “Try-before-buy” means barriers to entry need to be as low as possible. • Zero configuration is the ideal.
  161. 161. Technique 4 Paper prototyping
  162. 162. Paper prototyping Basic materials
  163. 163. Paper prototyping In practice • Use role play • Encourage “think-aloud” • If user testing with real users, don’t cheat: the “Computer” must not speak. Set goals and leave user to it
  164. 164. Paper prototyping Advantages • It’s really cheap. Really, really cheap. • You can iterate on the spot • Can be used for brainstorming as well as proof of concept testing • Very flexible, can be adapted to suit skill levels of participants • Good for working out what is essential, and what can be descoped
  165. 165. Other prototyping techniques • Presentation software • Quick-and-dirty software mockups
  166. 166. Other prototyping techniques • Presentation software • Quick-and-dirty software mockups Beware the implementation model!
  167. 167. Technique 5 Grid systems
  168. 168. Grid systems • Enforce consistency, exploit spatial memory • All grid measurements defined in terms of an atomic unit (eg. 10 pixels) • Minimise number of different layouts based on the grid • Yahoo! and Google both provide useful starting points
  169. 169. Example grid Atom Header width 120 10 pixels Overlay height 320 Overlay width 440 Gutter 10 540 20 180 10
  170. 170. Squint tests • Take a snapshot of your interface • Greyscale it in Photoshop • Blur until you can’t make out detailed structure
  171. 171. Squint tests • Take a snapshot of your interface • Greyscale it in Photoshop • Blur until you can’t make out detailed structure OR • Just sit back a bit and squint
  172. 172. Technique 6 Modular design
  173. 173. Modularity • Aim for “deep consistency” by reusing design elements throughout your app • Modules range from single control elements (a button) to complex composite widgets. • Include abstract structural elements like a “sidebar box” as well as behaviours • Develop an application lexicon
  174. 174. Colour swatches • Add colour late in the design process. • Use a small palette: 2 or 3 base colours. • Use a small number of different tints of the base colours, eg. 100%, 80%, 40% • Greyscale the coloured design to check contrast and intensity.
  175. 175. Consistent light source Mac OS9 Mac OS X to top left of screen directly above, slightly forward OK OK
  176. 176. Technique 7 Copywriting
  177. 177. Copywriting is interface design • Stick to the metaphor (within reason) • Use the user’s language • Avoid technical jargon • Use consistent terminology: write a thesaurus • Polite messages • Positive actions in checkbox labels • Keep it brief
  178. 178. Technique 8 Triage
  179. 179. Is that really necessary? Q. If you remove an interface element, will the interface still function? • Prune visual clutter and gratuitous motion • Avoid forcing user to toggle back and forth between mouse and keyboard • Avoid user preferences: modal excise • Monotony as a virtue: only one way to perform any particular action
  180. 180. Technique 9 Ajax
  181. 181. Ajax Performance • Avoid full page reloads • Deferral Fetch additional data after the screen has loaded • Progressive loading Incrementally fetch data as it is requested
  182. 182. Ajax Excise • Use transient affordances at the locus of attention • Use disclosure to reveal additional guidance or advanced options only on request
  183. 183. Ajax Modes • Provide modeless feedback and state information • Use overlays for modal or auxiliary interactions
  184. 184. Using overlays
  185. 185. Using overlays • Overlays have displaced modal dialogs in many webapps
  186. 186. Using overlays • Overlays have displaced modal dialogs in many webapps • Overlays became popular because: • They avoid popup blockers • They can be more attractively styled than the default Javascript alert windows, and can load new content • New windows can be weirdly slow to render on some platforms • They avoid accidental dismissal problems.
  187. 187. Modeless overlay
  188. 188. Modal overlay
  189. 189. Rules for modal overlays • Don’t use for informational or confirmation messages: these should be modeless • Don’t ask questions to which you already know the answer (eg, where “OK” is the only option) • Use sparingly: don’t cry wolf • Remember overlays are not bookmarkable • Don’t try and emulate the OS
  190. 190. Ajax Animation Motion is a preattentive variable.
  191. 191. Ajax Animation Motion is a preattentive variable. • Just because you can, doesn’t mean you should!
  192. 192. Ajax Animation Motion is a preattentive variable. • Just because you can, doesn’t mean you should! • Animation introduces latency and is distracting
  193. 193. Ajax Animation Motion is a preattentive variable. • Just because you can, doesn’t mean you should! • Animation introduces latency and is distracting • Use it when you want to distract the user, ie. shift the user’s locus of attention
  194. 194. Ajax Animation Motion is a preattentive variable. • Just because you can, doesn’t mean you should! • Animation introduces latency and is distracting • Use it when you want to distract the user, ie. shift the user’s locus of attention • Good use: changes to screen layout (eg. opening a drawer or palette)
  195. 195. Technique 10 Memory
  196. 196. Things to remember
  197. 197. Things to remember • Configuration options
  198. 198. Things to remember • Configuration options • Paginated lists: remember page number
  199. 199. Things to remember • Configuration options • Paginated lists: remember page number • Hierarchical lists: remember open nodes
  200. 200. Things to remember • Configuration options • Paginated lists: remember page number • Hierarchical lists: remember open nodes • MRU - Most Recently Used
  201. 201. Things to remember • Configuration options • Paginated lists: remember page number • Hierarchical lists: remember open nodes • MRU - Most Recently Used • MFU - Most Frequently Used
  202. 202. Things to remember • Configuration options • Paginated lists: remember page number • Hierarchical lists: remember open nodes • MRU - Most Recently Used • MFU - Most Frequently Used Missed opportunity Remember state between sessions
  203. 203. Technique 11 Service design
  204. 204. MyApp
  205. 205. MyApp
  206. 206. Adoption Support Discovery Community
  207. 207. Software as a service • Web apps are services • Great! An opportunity to break out of feature bloat cycle, as do not need to sell new features with each upgrade • Think about service design
  208. 208. Service design • Think about user interaction with app in a broader way than how a session works • Touchpoints • Service blueprint
  209. 209. User acquisition touchpoint
  210. 210. Technique 12 Design patterns
  211. 211. Using design patterns • Consistent internally - but also consistent with usage elsewhere on the web • Identify relevant patterns on other websites • O’Reilly’s Designing Interfaces takes a pattern- based approach • Yahoo! Design Patterns Library
  212. 212. The future
  213. 213. Trends
  214. 214. Trends • Does fashion matter?
  215. 215. Trends • Does fashion matter? • Gradients, big fonts, drop shadows and rounded corners may stick around
  216. 216. Trends • Does fashion matter? • Gradients, big fonts, drop shadows and rounded corners may stick around • Overlays, autocomplete, libraries will be ever more popular
  217. 217. Trends • Does fashion matter? • Gradients, big fonts, drop shadows and rounded corners may stick around • Overlays, autocomplete, libraries will be ever more popular • Guided interfaces will become the norm
  218. 218. Trends • Does fashion matter? • Gradients, big fonts, drop shadows and rounded corners may stick around • Overlays, autocomplete, libraries will be ever more popular • Guided interfaces will become the norm • The web will increasingly drive innovation on the desktop (tags? bookmarks?)
  219. 219. Future
  220. 220. Future Widgets
  221. 221. Future Widgets Offline
  222. 222. Future Widgets Offline Charting / vector graphics
  223. 223. Future Widgets Offline Charting / vector graphics Mobile
  224. 224. Future Game design? Widgets Offline Charting / vector graphics Mobile
  225. 225. Future Game design? Widgets Offline Social space Charting / vector graphics Mobile
  226. 226. • In the future, most user interface innovation will come from the web
  227. 227. end
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×