From Website To Webapp Shane Morris

4,414 views

Published on

Slides from my Oz-IA08 talk, Sept 08.

Published in: Design, Technology

From Website To Webapp Shane Morris

  1. 1. From Website to WebApp: Designing for Workflow Shane Morris
  2. 2. <ul><li>Marlon Paul Bruin - my-daily-image.blogspot.com </li></ul>
  3. 3. The impending death of Information architecture <ul><li>“ The fact is that IA is a theory about the inherent structure of information…the architecture of information…and if we are moving away from that we should call it something else.” </li></ul><ul><li>Joshua Porter </li></ul><ul><ul><li>bokardo.com/archives/thoughts-on-the-impending-death-of-information-architecture/ </li></ul></ul>
  4. 5. C$_
  5. 6. <ul><li>dictionary.zdnet.com/definition/GUI.html </li></ul>
  6. 7. GUI Basics <ul><li>Visibility </li></ul><ul><li>Affordance </li></ul><ul><li>Standards </li></ul>
  7. 8. Usability
  8. 10. <ul><li>blog.codersanonymous.com/?p=81 </li></ul>
  9. 11. The Web Was Irrelevant <ul><li>Problem was not hard </li></ul><ul><li>Few Degrees of Freedom </li></ul><ul><li>3 forms of interaction </li></ul>
  10. 12. What we were worried about <ul><li>Web Sites </li></ul><ul><ul><li>Finding Information </li></ul></ul><ul><ul><li>Organising Information </li></ul></ul><ul><li>GUI’s </li></ul><ul><ul><li>Organising functionality </li></ul></ul><ul><ul><li>Jamming functionality into the Standard </li></ul></ul><ul><ul><li>Breaking the standard </li></ul></ul>
  11. 13. The Web Was Awesome <ul><li>No installation </li></ul><ul><li>Cross-platform </li></ul><ul><li>Refactoring </li></ul><ul><li>New interactions </li></ul>
  12. 14. The Web Also Sucked <ul><li>Page waits </li></ul>
  13. 15. But The Web Kept Evolving <ul><li>Controls Hard </li></ul><ul><li>Conventions Hard </li></ul><ul><li>JavaScript Hard </li></ul><ul><li>DHTML Hard </li></ul><ul><li>Remote Scripting Hard </li></ul>
  14. 16. But The Web Kept Evolving <ul><li>Controls Hard </li></ul><ul><li>Conventions Hard </li></ul><ul><li>JavaScript Hard </li></ul><ul><li>DHTML Hard </li></ul><ul><li>Remote Scripting Hard </li></ul><ul><li>Gmail Easy! </li></ul>
  15. 17. pptPlex Section Divider Collision Course The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.
  16. 18. Parallel Paths Command Line CUI GUI Web Games
  17. 19. Parallel Paths Command Line CUI GUI Web Games Web Applications
  18. 20. Enabling Technologies <ul><li>Flash </li></ul><ul><li>Flex </li></ul><ul><li>AIR </li></ul><ul><li>Silverlight </li></ul><ul><li>Curl </li></ul><ul><li>XUL </li></ul><ul><li>HTML 5 </li></ul><ul><li>JavaFX </li></ul><ul><li>OpenLazlo </li></ul><ul><li>Pipes </li></ul><ul><li>Gears </li></ul><ul><li>Chrome </li></ul>
  19. 21. Web Applications?
  20. 22. RIA? <ul><li>Rich Internet Application </li></ul><ul><li>Rich Interactive Application </li></ul>
  21. 23. What’s This, Chopped Liver?
  22. 24. RIA?
  23. 25. Web Applications <ul><li>Application </li></ul><ul><ul><li>Users perform tasks </li></ul></ul><ul><ul><li>Actions have an effect </li></ul></ul><ul><ul><li>2-way flow of information </li></ul></ul><ul><li>Web </li></ul><ul><ul><li>Delivered via web technology </li></ul></ul><ul><ul><li>Leveraging web technologies </li></ul></ul><ul><ul><li>Probably leveraging web conventions </li></ul></ul><ul><ul><li>Probably running in a web browser </li></ul></ul>
  24. 26. Continuum <ul><li>Web Site </li></ul><ul><ul><li>Static information </li></ul></ul><ul><ul><li>Lot’s of information </li></ul></ul><ul><ul><ul><li>One direction </li></ul></ul></ul><ul><ul><li>Structured transactions </li></ul></ul><ul><ul><li>Atomic transactions </li></ul></ul><ul><li>Web App </li></ul><ul><ul><li>Dynamic information </li></ul></ul><ul><ul><li>Less information </li></ul></ul><ul><ul><ul><li>Two directions </li></ul></ul></ul><ul><ul><li>Unstructured transactions </li></ul></ul><ul><ul><li>Work broken over time </li></ul></ul>
  25. 27. Web Applications <ul><li>Outlook Web Access </li></ul>
  26. 28. Web Applications <ul><li>Buzzword - blogs.zdnet.com/Stewart/images/buzzword_2.png </li></ul>
  27. 29. Web Applications <ul><li>PhotoShop Express - Lynda.com </li></ul>
  28. 30. Web Applications <ul><li>dominos.com.au </li></ul>
  29. 31. Web Applications <ul><li>mscui.net </li></ul>
  30. 32. How do I know if I’m working on a Web Application?
  31. 33. How Do I... <ul><li>...support work that can happen in any order? </li></ul><ul><li>...support work that is stopped and restarted over time? </li></ul><ul><li>...give users a constant view of their work in progress? </li></ul><ul><li>...give users access to dozens, or hundreds of functions? </li></ul><ul><li>...give users instant feedback and a sense of control? </li></ul><ul><li>...allow users to freely and confidently experiment? </li></ul><ul><li>...shield new users from the full range of functions, while giving experts easy access? </li></ul><ul><li>And... </li></ul>
  32. 34. How Do I... <ul><li>...support work that can happen in any order? </li></ul><ul><li>...support work that is stopped and restarted over time? </li></ul><ul><li>...give users a constant view of their work in progress? </li></ul><ul><li>...give users access to dozens, or hundreds of functions? </li></ul><ul><li>...give users instant feedback and a sense of control? </li></ul><ul><li>...allow users to freely and confidently experiment? </li></ul><ul><li>...shield new users from the full range of functions, while giving experts easy access? </li></ul><ul><li>And... </li></ul><ul><li>...draw a sitemap for a site that has only one page? </li></ul>
  33. 35. Dear Internet...
  34. 36. Dear Internet... Welcome to 1993
  35. 37. The Thing About Work
  36. 38. The Problem With Web Apps <ul><li>Applications tend to an object-action model </li></ul><ul><li>The browser </li></ul>
  37. 39. Browsers <ul><li>What we love about Browsers </li></ul><ul><ul><li>Ease of Publishing </li></ul></ul><ul><ul><li>Refactoring </li></ul></ul><ul><ul><li>Zero-install </li></ul></ul><ul><ul><li>Bookmarks / Favourites </li></ul></ul><ul><ul><li>Back / Forward </li></ul></ul><ul><ul><li>Links </li></ul></ul><ul><ul><li>No window management </li></ul></ul><ul><ul><li>Search </li></ul></ul><ul><ul><li>Breadcrumbs </li></ul></ul><ul><ul><li>Scrolling </li></ul></ul>
  38. 40. Browsers <ul><li>What we love about Browsers </li></ul><ul><ul><li>Ease of Publishing </li></ul></ul><ul><ul><li>Refactoring </li></ul></ul><ul><ul><li>Zero-install </li></ul></ul><ul><ul><li>Bookmarks / Favourites </li></ul></ul><ul><ul><li>Back / Forward </li></ul></ul><ul><ul><li>Links </li></ul></ul><ul><ul><li>No window management </li></ul></ul><ul><ul><li>Search </li></ul></ul><ul><ul><li>Breadcrumbs </li></ul></ul><ul><ul><li>Scrolling </li></ul></ul><ul><li>What we hate about Browsers </li></ul><ul><ul><li>Designed for static content </li></ul></ul><ul><ul><li>Sandboxed </li></ul></ul><ul><ul><li>Largely stateless </li></ul></ul><ul><ul><li>Clunky windowing model </li></ul></ul><ul><ul><li>Poor accessibility </li></ul></ul><ul><ul><li>No standards? </li></ul></ul>
  39. 41. Designing for work
  40. 42. A different navigation paradigm Web Site: User navigates to information This is about wayfinding… Web App: Functionality comes to the user This is about working in one place…
  41. 43. A Different Interaction Paradigm <ul><li>GUI Principles </li></ul><ul><ul><li>Recognition over recall </li></ul></ul><ul><ul><li>Object/action paradigm </li></ul></ul><ul><ul><li>Visibility </li></ul></ul><ul><ul><li>Explicit destruction </li></ul></ul><ul><ul><li>Standards and Terminology </li></ul></ul>
  42. 44. Visibility <ul><li>Google Docs </li></ul>
  43. 45. Standards <ul><li>slideshare.net </li></ul>
  44. 46. Interaction paradigms – Outlook Web Access
  45. 47. Outlook Web Access
  46. 48. Outlook Web Access
  47. 49. Google Docs
  48. 50. Tips – Designing for Workflow <ul><li>Reveal the Process </li></ul><ul><li>Focus on the Work Artefact </li></ul>
  49. 51. The Primary Workspace <ul><li>Is there a process which needs to be visible? </li></ul><ul><ul><li>(E.g. a set of steps?) </li></ul></ul><ul><li>Or is a work artefact the primary focus? </li></ul><ul><ul><li>(E.g. a document/form?) </li></ul></ul><ul><li>Workflow is creating, making or revising something </li></ul><ul><ul><li>What is the ‘something’ in your application? </li></ul></ul>
  50. 52. Techniques
  51. 53. Techniques <ul><li>Web Site </li></ul><ul><ul><li>User Research </li></ul></ul><ul><ul><li>Personas </li></ul></ul><ul><ul><li>Card Sorting </li></ul></ul><ul><ul><li>Content Structure </li></ul></ul><ul><ul><li>Wireframes </li></ul></ul><ul><ul><li>Usability Test </li></ul></ul><ul><ul><li>Refine </li></ul></ul><ul><ul><li>Site Map </li></ul></ul><ul><ul><li>Treat </li></ul></ul><ul><ul><li>... </li></ul></ul>
  52. 54. Techniques <ul><li>Web Site </li></ul><ul><ul><li>User Research </li></ul></ul><ul><ul><li>Personas </li></ul></ul><ul><ul><li>Card Sorting </li></ul></ul><ul><ul><li>Content Structure </li></ul></ul><ul><ul><li>Wireframes </li></ul></ul><ul><ul><li>Usability Test </li></ul></ul><ul><ul><li>Refine </li></ul></ul><ul><ul><li>Site Map </li></ul></ul><ul><ul><li>Treat </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Web Application </li></ul><ul><ul><li>User Research </li></ul></ul><ul><ul><li>Activity Scenarios </li></ul></ul><ul><ul><li>Task Analysis </li></ul></ul><ul><ul><li>Workflow Diagram </li></ul></ul><ul><ul><li>Storyboards </li></ul></ul><ul><ul><li>Usability Test </li></ul></ul><ul><ul><li>Refine </li></ul></ul><ul><ul><li>Screenflow diagrams </li></ul></ul><ul><ul><li>Treat </li></ul></ul><ul><ul><li>... </li></ul></ul>
  53. 55. Activity Scenarios <ul><li>Among many things... </li></ul><ul><li>Focus on the sequence </li></ul>
  54. 56. Applications Break At The Joins
  55. 57. Task Analysis <ul><li>“ Much of my user-centered practice in rich application design relies on task analysis for its basis. Task analysis is a key part of the early research that usability specialists perform when determining what an application ought to do. … Information architecture—and much Web design and development effort—has focused on content.” </li></ul><ul><li>Leo Frishberg </li></ul>
  56. 58. Workflow Diagram The Hiser Group
  57. 59. Workflow Diagrams <ul><li>From: </li></ul><ul><ul><li>User research </li></ul></ul><ul><ul><li>Activity scenarios </li></ul></ul>
  58. 60. Workflow Diagrams <ul><li>Are </li></ul><ul><ul><li>A map of the main user steps that make up a task </li></ul></ul><ul><ul><li>High-level </li></ul></ul><ul><ul><li>A way to start thinking about how to break tasks up in the user interface </li></ul></ul><ul><ul><li>A way to focus on flow between functions, not just the functions </li></ul></ul>
  59. 61. Workflow Diagrams <ul><li>Are </li></ul><ul><ul><li>A map of the main user steps that make up a task </li></ul></ul><ul><ul><li>High-level </li></ul></ul><ul><ul><li>A way to start thinking about how to break tasks up in the user interface </li></ul></ul><ul><ul><li>A way to focus on flow between functions, not just the functions </li></ul></ul><ul><li>Are not </li></ul><ul><ul><li>A site map </li></ul></ul><ul><ul><li>A diagram of the screens/pages in an application </li></ul></ul><ul><ul><li>A diagram of every possible path and action </li></ul></ul>
  60. 62. Workflow Diagram The Hiser Group
  61. 63. Creating Workflow Diagrams <ul><li>Start by creating one workflow diagram for each activity scenario / task. </li></ul><ul><ul><li>Avoid the temptation to incorporate other scenarios/functions at this stage. </li></ul></ul><ul><li>Keep it high-level! </li></ul><ul><ul><li>Once you have a first-pass, try to simplify the diagram. </li></ul></ul><ul><ul><ul><li>(By combining steps, for example.) </li></ul></ul></ul><ul><li>Once you have a few, try to combine related diagrams into one, more abstract diagram. </li></ul>
  62. 64. Workflow diagramming in action The Hiser Group
  63. 65. Workflow diagram syntax <ul><li>No set rules </li></ul><ul><li>Keep it simple </li></ul>User action 1 User action 2 Condition Decision Y N Entry/Exit point Optional Usually enough
  64. 66. Workflow diagram The Hiser Group Plan Special Effect Record Composite to Film Preview Retouch Images Interpolate Set Parameters Select Nodes Scan in Film Rolls Convert & Manipulate Tape Build Flowgraph Composite Convert & Manipulate Tape Arrange Elements on Lightbox Preparation Planning Implementation Completion
  65. 67. Interpreting workflow diagrams <ul><li>Examine your workflow diagrams for: </li></ul><ul><ul><li>Groupings of related functions </li></ul></ul><ul><ul><ul><li>Suggests screens, pages or panels </li></ul></ul></ul><ul><ul><ul><li>Avoid ‘one screen/page per workflow diagram box’. </li></ul></ul></ul><ul><ul><li>Key flows between activities </li></ul></ul><ul><ul><ul><li>And therefore flows between screens/pages </li></ul></ul></ul><ul><ul><li>Clues to the overall Interaction model </li></ul></ul><ul><ul><ul><li>Hub-based / Document Centric? </li></ul></ul></ul><ul><ul><ul><li>Wizard-based? </li></ul></ul></ul><ul><ul><ul><li>Combination? </li></ul></ul></ul>
  66. 68. For the Record <ul><li>Other types of task analysis </li></ul><ul><ul><li>GOMS </li></ul></ul><ul><ul><li>HTA </li></ul></ul><ul><ul><li>Etc. </li></ul></ul>
  67. 69. Interaction model Early draft The Hiser Group Node Palette Node Parameters Preview Console File Manager Lightbox Flowgraph Paint Conversion/ Transfer Manager Composite Scrapbook Notes Job Navigation Minature Interpolation Palette Palette Palette Palette
  68. 70. Screen Flow Diagram
  69. 71. You already know a lot <ul><li>“ Though the process of designing and creating application and information space user experiences for the Web is virtually the same — even if the deliverable design documents may differ — their user experiences are fundamentally and profoundly different.” </li></ul><ul><ul><li>http://www.uxmatters.com/MT/archives/000063.php </li></ul></ul><ul><ul><li>(Emphasis mine) </li></ul></ul>
  70. 72. User Experience Fundamentals
  71. 73. A question of emphasis
  72. 74. Thank you Shane Morris [email_address] blogs.msdn.com/shanemo

×