From Website To Webapp   Shane Morris
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

From Website To Webapp Shane Morris

on

  • 5,214 views

Slides from my Oz-IA08 talk, Sept 08.

Slides from my Oz-IA08 talk, Sept 08.

Statistics

Views

Total Views
5,214
Views on SlideShare
5,052
Embed Views
162

Actions

Likes
5
Downloads
63
Comments
1

3 Embeds 162

http://blogs.msdn.com 159
http://www.slideshare.net 2
http://xss.yandex.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

From Website To Webapp Shane Morris Presentation Transcript

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