Documentation Workshop @ IA Summit

Slide 1: Communicating Design Making IA Documentation Clear and Actionable Presented by Dan Brown Principal, EightShapes, LLC IA Summit 2007 Las Vegas, Nevada, USA 1

Slide 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

Slide 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

Slide 4: Exercise 1 Flow Chart 4

Slide 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

Slide 6: Draw a Flow Chart hint: Pick a single task or goal to document hint: Imagine project circumstances rst 6

Slide 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

Slide 8: Anatomy of a Document 8

Slide 9: Three kinds of information Elements that DEFINE ❖ Elements that ELABORATE ❖ Elements that ENHANCE ❖ 9

Slide 10: Planning & Creating Documents 10

Slide 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

Slide 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

Slide 13: Planning a Visual Language 13

Slide 15: Interlude: Highlight’s from Dan’s Portfolio 15

Slide 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

Slide 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

Slide 18: Exercise 2 Wireframe 18

Slide 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

Slide 20: Draw a Wireframe hint: Pick a screen from your ow chart 20

Slide 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

Slide 22: Present Your Wireframe hint: Put it in context of the web site goal 22

Slide 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

Slide 24: Presenting & Using Documents 24

Slide 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

Slide 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

Slide 27: Thank You! Contact Me ❖ dan@eightshapes.com About the book ❖ www.communicatingdesign.com

Slideshare.net (beta)