Storyboards and Flow Charting Presented By Eric Pascarello
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 Buy Button Hidden Hidden Visible Submit Form Arrow 1 Visible Hidden Hidden Arrow 2 Hidden Visible Hidden Arrow 3 Hidden Visible Hidden Action Indicator Hidden Visible 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 Client. Side 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 "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd"> <html> <head> <title>User Login</title>
Example #2 from my server log Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER: <script language="Java. Script"> <!-- // Start of Ad. Subtract Java. Script block; you can ignore this. // It is used when Ad. Subtract blocks cookies or pop-up windows. document. i. Mokie = "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/
- Slides: 39