Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Documentation Workshop @ IA Summit


Published on

Published in: Technology
  • Impressive presentation on ’Documentation Workshop @ IA Summit'. You’ve shown your credibility on presentation with this slideshow. This one deserves thumbs up. I’m John, owner of . Hope to see more quality slides from you.

    Best wishes.
    Are you sure you want to  Yes  No
    Your message goes here
  • As a management instructor I enjoy viewing the function of others. This is among the greatest demonstration on planning I have viewed.
    Are you sure you want to  Yes  No
    Your message goes here

Documentation Workshop @ IA Summit

  1. 1. Communicating Design Making IA Documentation Clear and Actionable Presented by Dan Brown Principal, EightShapes, LLC IA Summit 2007 Las Vegas, Nevada, USA 1
  2. 2. Today’s Agenda Establish Design Problem ❖ Exercise 1: Flow Charts ❖ Anatomy of a Document ❖ Planning & Creating Documents ❖ Exercise 2: Wireframes ❖ Presenting & Using Documents ❖ 2
  3. 3. 1 Your web site allows a small design agency to track new business leads. 2 Your web site allows service agents to diagnose problems with customers’ internet connections. 3
  4. 4. Exercise 1 Flow Chart 4
  5. 5. What is a ow chart? Visualizes how users accomplish a speci c task. ❖ Answers: How do users do X? ❖ Answers: What happens when users do X? ❖ 5
  6. 6. Draw a Flow Chart hint: Pick a single task or goal to document hint: Imagine project circumstances rst 6
  7. 7. Discussion: Flow Charts How many di erent kinds of information did you include? ❖ What process did you use to put the ow chart together? ❖ What planning did you do before creating the document? ❖ 7
  8. 8. Anatomy of a Document 8
  9. 9. Three kinds of information Elements that DEFINE ❖ Elements that ELABORATE ❖ Elements that ENHANCE ❖ 9
  10. 10. Planning & Creating Documents 10
  11. 11. Before creating a document... Do a situation analysis ❖ What is the purpose of the document? ❖ Who will be using it? ❖ How does the document relate to those that came before ❖ and after? List everything you want to include ❖ What are the di erent pieces of information? ❖ What is the speci c data set? ❖ What are the relationships to highlight? ❖ 11
  12. 12. To create your document... Design a visual language ❖ How will you represent each idea? ❖ How will you show relationships between ideas? ❖ Start with key relationships and information ❖ What is the most important message? ❖ Which ideas serve as the backbone to the entire message? ❖ Sketch on paper rst ❖ Give yourself time to explore di erent approaches ❖ 12
  13. 13. Planning a Visual Language 13
  14. 14. JJG’s Visual Vocabulary © 2000-2001 Jesse James Garrett 14
  15. 15. Interlude: Highlight’s from Dan’s Portfolio 15
  16. 16. print version Code Link to Request shared URL c yes Pass Subscribers Three-Day Invitation Pass start here unique code no Program 2 Code Code Pass Unknown a yes Already Expired Overview Code Active ! ! ! 4 no 9 3 no No Passes email/IM version Left b yes ! unique URL 1 Decision Points Functional Notes a 1 Users can generate up to ve passes a day. Does the user have any passes left to distribute? b Is the unique URL valid? Users have two ways to distribute pass information: electronic 2 printing it out. c Is the code valid? d Is the guest registration information valid? There are three possible errors for the code/URL. It could be u 3 expired, or already active. The rst two error pages instruct us code from their friend. When a code is already active, the syste
  17. 17. Guest Activates Pass Guest Registers Guest U y. Guests with a printed pass will visit the code request Guests must go through a simple registration process. Guests use meo header. screen. Guests with a unique URL will, if valid, be taken Screennames created during this process do not carry some modi directly to the registration ow. over to regular registration. address for always see Code Guest User enters Cosmeo Request Registration unique URL Log-in Three-day pass account? Log-In Y N Registration ses? Activation code valid? Guest account a information valid? N Y N Y Code Username Account Guest Guest Expired in Use Expired Registration Welcome ! ! ! Unknown Invalid Code Password
  18. 18. Exercise 2 Wireframe 18
  19. 19. What is a wireframe? Represents a screen’s contents and priorities. ❖ Captures functional details of a page or screen. ❖ Answers: What does the user see on this page? ❖ Answers: What can the user do on this page? ❖ 19
  20. 20. Draw a Wireframe hint: Pick a screen from your ow chart 20
  21. 21. Discussion: Wireframe Creation What kinds of information did you include? ❖ What did you do to plan your wireframe? ❖ How is doing a wireframe di erent from doing a owchart? ❖ 21
  22. 22. Present Your Wireframe hint: Put it in context of the web site goal 22
  23. 23. Discussion: Wireframe Presentation How did you walk through your wireframe? ❖ What kind of feedback did you get? ❖ Did the stakeholder understand the wireframe? ❖ Did you establish next steps? ❖ 23
  24. 24. Presenting & Using Documents 24
  25. 25. When discussing your document... Communicate the purpose of the discussion ❖ What questions do you need answered? ❖ How does the document help you move forward in the ❖ design process? How does the document relate to what came before? ❖ Relinquish control ❖ Don’t mistake the document for the nal product ❖ Leave your pride at the door ❖ Use the document as a springboard for discussion ❖ 25
  26. 26. When using your document... Make note of opportunities for improvement ❖ What did you revise the most? ❖ What did users of the document miss? ❖ What generated the most clarifying questions? ❖ Estimate value of keeping document up-to-date ❖ What is the level of e ort for updating the document? ❖ How often are legacy documents consulted in your ❖ organization? What role did the document play in the design process? ❖ 26
  27. 27. Thank You! Contact Me ❖ About the book ❖