The document discusses designing web applications for workflow by focusing on the work artifact and revealing the process. It suggests using techniques like user research, personas, card sorting, wireframes, usability testing and workflow diagrams to understand tasks and design the interaction model. Workflow diagrams map the main user steps to focus on flow between functions. The diagrams can help identify groupings, key flows and the overall interaction pattern.

1. From Website to WebApp: Designing for Workflow Shane Morris

5. C$_

8. Usability

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

21. Web Applications?

23. What’s This, Chopped Liver?

24. RIA?

32. How do I know if I’m working on a Web Application?

35. Dear Internet...

36. Dear Internet... Welcome to 1993

37. The Thing About Work

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…

46. Interaction paradigms – Outlook Web Access

47. Outlook Web Access

48. Outlook Web Access

49. Google Docs

52. Techniques

56. Applications Break At The Joins

58. Workflow Diagram The Hiser Group

62. Workflow Diagram The Hiser Group

64. Workflow diagramming in action The Hiser Group

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

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

72. User Experience Fundamentals

73. A question of emphasis

74. Thank you Shane Morris [email_address] blogs.msdn.com/shanemo