On October 23rd, 2014, we updated our
By continuing to use LinkedIn’s SlideShare service, you agree to the revised terms, so please take a few minutes to review them.
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?
Draw a Flow Chart
hint: Pick a single task or goal to document
hint: Imagine project circumstances rst
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?
Anatomy of a Document
Three kinds of information
Elements that DEFINE
Elements that ELABORATE
Elements that ENHANCE
Planning & Creating Documents
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
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?
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
Highlight’s from Dan’s Portfolio
print version Code
Link to Request
shared URL c yes
start here unique code
a yes Already
! ! !
No Passes email/IM
! unique URL
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
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
User enters Cosmeo
unique URL Log-in
Three-day pass account?
ses? Activation code valid? Guest account a
N Y N Y
Code Username Account
Expired in Use Expired
! ! !
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?
Draw a Wireframe
hint: Pick a screen from your ow chart
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?
Present Your Wireframe
hint: Put it in context of the web site goal
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?
Presenting & Using Documents
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
How does the document relate to what came before?
Don’t mistake the document for the nal product
Leave your pride at the door
Use the document as a springboard for discussion
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
What role did the document play in the design process?
About the book