Your SlideShare is downloading. ×
0
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Documentation Workshop @ IA Summit

7,374

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,374
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
43
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. Exercise 1 Flow Chart 4
  • 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. Draw a Flow Chart hint: Pick a single task or goal to document hint: Imagine project circumstances rst 6
  • 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. Anatomy of a Document 8
  • 9. Three kinds of information Elements that DEFINE ❖ Elements that ELABORATE ❖ Elements that ENHANCE ❖ 9
  • 10. Planning & Creating Documents 10
  • 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. 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. Planning a Visual Language 13
  • 14. JJG’s Visual Vocabulary © 2000-2001 Jesse James Garrett http://www.jjg.net/ia/visvocab/ 14
  • 15. Interlude: Highlight’s from Dan’s Portfolio 15
  • 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. 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. Exercise 2 Wireframe 18
  • 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. Draw a Wireframe hint: Pick a screen from your ow chart 20
  • 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. Present Your Wireframe hint: Put it in context of the web site goal 22
  • 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. Presenting & Using Documents 24
  • 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. 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. Thank You! Contact Me ❖ dan@eightshapes.com About the book ❖ www.communicatingdesign.com

×