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