Transcript Storyboards and Flow Charting

Storyboards and
Flow Charting
Presented By: Eric Pascarello
Ajax and Web 2.0
► Breaks
the ways we have been thinking
about web application design.
► Multiple – integrated features add a new
level of complexity.
► Dynamic Content showing, hiding, and
changing can not always be expressed in
words.
► Ajax introduces new paths in flow.
Storyboards and Flow Charting brings
Programmer
Boss
Web Guru
SME/Client
everyone on the same page
But doesn’t this slow down the project?
► Storyboards
and
flowcharting add time
to the software
development cycle.
► The
managers are
saying: “That does not
save us money!”
MANAGERS: A poorly written requirements
document slows down development!
DEVLOPERS: When deadline time
comes around…
► Do
you want to be
stuck behinds the bars
of your desk on a
Saturday because you
misinterpreted a
requirement?
► Or do you want to be
able to leave early on
a Friday afternoon and
enjoy life?
What do we all gain from
taking the extra time?
DEVELOPERS
►
►
►
No missed information
No surprises
No I meant it to be…
WEB GURUS
►
►
No fixing up Developers bad
designs
No wondering what in the world
the client is after design wise.
MANAGERS
►
►
On time releases
No wasted money $$$$
CLIENT / SME
►
►
►
No saying “That is not what I
pictured”
No need to have a “Geek Speak”
Dictionary when you have cute
pictures
No extra waiting needed.
Storyboarding
or
“Displayed Thinking”
Uses images, text, audio, video, animations,
prototypes, diagrams, colors, little imaginary
trolls, and whatever else you can cram into
a document to emphasize the scope of the
problem.
There is no right and wrong way to do it!
So why use a storyboard over
traditional req. documents?
► Not
a single person in
this room thinks alike!
► We
need to make us
think alike
► Let
us look at a quick
example
Adaptive Path’s Original Diagram
The Real Life Diagram of Ajax –
How to explain Ajax to your nongeek friends
THE COLLEGE PARTY
The Bleak Situation
The Non-Ajax Solution
► Figure
out what is more important and rank
order of operation.
► Should I clean the mess, get food, or
update the outdated music collection?
► Perform one task and do the others after
each other. Hopefully I have enough time!
 Go to Store, Download Music, Clean Apartment
so it can be trashed again.
The Ajax Solution
►
Do multiple things at once!
►
Hire a maid to do the
cleaning!
Order delivery pizza!
And I can download new
music while others do the
dirty work! Ajax Clean!
►
►
Storyboards should include
► Description/Title/File
► Text
Name
(the real text!)
► Graphics (sketches or the real thing)
► Links
► Navigation
► Notes of the actions
► Flash/animations
► Videos/sounds
► CSS/Fonts/Display Information
Storyboards can also include
► Storyboard
Number (number them in 5’s or
10’s)
► Date of Storyboard
► Page Numbers
► Revision Number
► Screen Name
► Attachments (external JS libraries, etc)
► Any thing else that you can think of
Storyboards should not…
► …be
busy.
 To much information on one page can
be a pain to read!
 K.I.S.S.
 Multiple pages should be used for
complicated designs
► …be
open to interpretation.
► …require anyone to ask questions.
Do I have to draw?
►
►
►
You can if you are an
inspiring artist!
Most people use Viso,
MSPaint, Dreamweaver,
Photoshop, white board
with digital camera, post it
notes, and so on to build
the screens.
Electronic format is best
 Easy to share around
 East to edit
 Easy to make changes
Is there a standard to storyboards?
► Some
hardcore people say yes!
► You need to find what works for your team.
► You may need more text, more pages, more
forms
► You may need to develop custom
storyboard formats
 Layout, CSS, Images, Interaction Matrix,
Audio/ Video, User Experience, Flow
Charting, etc.
What do storyboards look like?
The Great Requirements
► Show
Our Available hosting plans using an Ajax
powered double combo filled with special effects.
 Must show step instructions with images pointing out
the step. Instructions change with each step. (See
Marketing for exact copy).
 Animation should be shown when request is made with
the Ajax call to the server.
 Plan details should be shown in an area when the user
selects a plan from the dynamically filled second list.
 Website should have web 2.0 look and feel.
Interaction Storyboard Matrix
► Probably
the most important storyboard
element you can produce!
► Everyone
► Yahoo!
here SHOULD DO THIS STEP!
has great examples of these:
 http://developer.yahoo.com/yui/autocomplete/a
utocomplete_storyboard.pdf
Double Combo Interaction Storybook Matrix
Page
Load
Parent
DDL
Option
Selected
Child DDL
Data
Requeste
d
DDL
Retrieval
Error
DDL Data
Retrieval
Complete
Child DDL
Option
Selected
Page
Parent
DDL
Posted
Filled From
Server w/
default
Selected
Value
Obtained
Options
Emptied
Child DDL
Output
Text Area
Buy
Button
Clicked
Options
Added
Selected
Value
Obtained
w/ JSON
Error
Message
Child
Message
Plan
Details
Displayed
From JSON
Default
Message
Action
Message
Action
Message
Buy
Button
Hidden
Hidden
Hidden
Hidden
Hidden
Visible
Submit
Form
Arrow 1
Visible
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Arrow 2
Hidden
Hidden
Hidden
Hidden
Visible
Hidden
Hidden
Arrow 3
Hidden
Hidden
Hidden
Visible
Hidden
Visible
Hidden
Action
Indicator
Hidden
Visible
Visible
Hidden
Hidden
Hidden
Hidden
(Use Yellow
Fade Effect)
Program Flow Charting
Ajax introduces new application paths
that we traditionally never dealt with.






Browser Unsupported
Errors
Clientside Caching
Successful/Unsuccessful Requests
Dynamic User Controlled Content
“Sessionless” State
Basic Program Flow
of the Page
Integrating
ClientSide Caching
The Serverside
Basic Flow
Validating Response
From the Server
Example #1 from my server log
Client Error Message/Detail: ERROR: BAD
RESPONSE FROM SERVER
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html>
<head>
<title>User Login</title>
Example #2 from my server log
Client Error Message/Detail: ERROR: BAD
RESPONSE FROM SERVER: <script
language="JavaScript">
<!-- // Start of AdSubtract JavaScript block; you
can ignore this.
// It is used when AdSubtract blocks cookies or
pop-up windows.
document.iMokie = "cookie blocked
This simple Ajax functionality has
multiple paths to take.
► Imagine
larger applications using a large
amount of Ajax calls with different
functionality.
 How do you handle errors?
 How do you handle injections?
 How do you handle older browsers?
Two most important things you
should get from this talk
► Make
sure to make a Interaction Storyboard
Matrix
► Make sure to make a program flow chart!
► The
main benefit is manual testers will
understand the flow of the program and all
of the interactions that HAVE to take place!
► Easier for them to build a test plan!
If you change requirements!
► UPDATE
YOUR STORYBOARDS
 I see so many people that do not do this.
 Storyboards are great for new developers on
the team
►No
more having to read code to figure out what is
happening
►No more guessing what the application is supposed
to do!
So you plan on how you spend your
weekend before a deadline!
OR
Stock photos from http://www.hasslefreeclipart.com/