Your SlideShare is downloading. ×
Communicating Design
    Making IA Documentation Clear and Actionable
                 Presented by Dan Brown
            ...
Today’s Agenda
        Establish Design Problem
    ❖


        Exercise 1: Flow Charts
    ❖


        Anatomy of a Docum...
1
    Your web site allows a small design
    agency to track new business leads.
                    2
    Your web site ...
Exercise 1
    Flow Chart



4
What is a ow chart?

        Visualizes how users accomplish a speci c task.
    ❖


        Answers: How do users do X?
 ...
Draw a Flow Chart
    hint: Pick a single task or goal to document
     hint: Imagine project circumstances rst




6
Discussion: Flow Charts

        How many di erent kinds of information did you include?
    ❖


        What process did ...
Anatomy of a Document



8
Three kinds of information

        Elements that DEFINE
    ❖


        Elements that ELABORATE
    ❖


        Elements ...
Planning & Creating Documents



10
Before creating a document...
     Do a situation analysis
 ❖

          What is the purpose of the document?
      ❖

   ...
To create your document...
     Design a visual language
 ❖

          How will you represent each idea?
      ❖

        ...
Planning a Visual Language




13
JJG’s Visual Vocabulary




        © 2000-2001 Jesse James Garrett
        http://www.jjg.net/ia/visvocab/




14
Interlude:
     Highlight’s from Dan’s Portfolio



15
print version                   Code
              Link to                                                                ...
Guest Activates Pass                                        Guest Registers                                          Guest...
Exercise 2
     Wireframe



18
What is a wireframe?

     Represents a screen’s contents and priorities.
 ❖


     Captures functional details of a page ...
Draw a Wireframe
     hint: Pick a screen from your ow chart




20
Discussion: Wireframe Creation

     What kinds of information did you include?
 ❖


     What did you do to plan your wir...
Present Your Wireframe
     hint: Put it in context of the web site goal




22
Discussion: Wireframe Presentation

     How did you walk through your wireframe?
 ❖


     What kind of feedback did you ...
Presenting & Using Documents



24
When discussing your document...
     Communicate the purpose of the discussion
 ❖

          What questions do you need a...
When using your document...
     Make note of opportunities for improvement
 ❖

          What did you revise the most?
  ...
Thank You!
    Contact Me
❖
    dan@eightshapes.com

    About the book
❖
    www.communicatingdesign.com
Upcoming SlideShare
Loading in...5
×

Documentation Workshop @ IA Summit

7,404

Published on

Published in: Technology
2 Comments
43 Likes
Statistics
Notes
  • 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 www.freeringtones.ws/ . Hope to see more quality slides from you.

    Best wishes.
       Reply 
    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.
    Anisa
    http://financejedi.com http://healthjedi.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,404
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
43
Embeds 0
No embeds

No notes for slide

Transcript of "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 http://www.jjg.net/ia/visvocab/ 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 ❖ dan@eightshapes.com About the book ❖ www.communicatingdesign.com

×