Storyboarding

Ethnographic Research/Contextual Design - Hugh Beyer & Karen Holtzblatt
- You sit down in the environment with the people you are designing for as an apprentice to see what they do on a day-to-day basis. Be in the actual working environment
- many companies will not pay for this detailed research, but it is more effective if they will
--> Capture of Story Lines - Write a timeline/storyline about what you have observed, take notes, use post-its, capture your data
- interpret your data and write key statements about what you have learned
- group the sticky notes together under categories of information (contextualize them)
- make larger categories to cerate a storyline of what people do to complete the task
- task analysis for many people
- then change what they're doing into what you want them to do - start to get screen ideas to help them get where you want them to go on your site for a better process than they're using
--> Storyboarding - We make a storyboard to show what you're doing on the screen. It's hard to describe textually. - It makes more sense when you show it visually. - It explains your design ideas and why you're designing what you're designing. It shows the user following the process you've designed.
- It's basically Task Analysis in pictures. It's an easier level of communication. A picture is worth a thousand words.
--> Paper Prototype - Paper is cheap. Code is expensive. Paper is easy to change and easy to test several ideas quickly.
- Paper makes it obvious that it's just a prototype. Customers are much more willing to "rip apart" your prototype if it doesn't look like you spent a ton of time on it already. They're much more willing to talk about your design and their suggestions when it's not a high-level prototype. They also focus on the important basics rather than things that come later, like the colors you've chosen.
- Prototypes increase in fidelity each time you edit it. They go from rough to high-fidelity, then finally to working code.
--> Test --> Release -

Are there elements that always need to be there on your web design?
Not necissarily, but you do need some sort of navigation.
Navigation should probably be across the top or down the left.
Search is becoming more and more needed and wanted. It should usually be across the top by itself.
It's not so much what you have to do, it's more what you don't want to do.
Avoid the right hand column. Avoid putting things in banner locations and styles because users have developed "banner blindness".
Eye tracking research has been doen to see where people look.
Jakob Nielsen's site has a lot opinions about web usability. www.useit.com
Jared Spool - http://www.uie.com/articles/three_hund_million_button
Colors - Consider your users and what they would like. And, yes, be careful about color blindness, cultural implications, etc.
Stay away from tiny fonts with little differentiation. 19 pt. font or bigger.

boxesandarrows.com

http://www.usablepatterns.net/

xkcd.com
Cartoons & Storyboarding using stick figures - the punch line is always in the alt text, so put your mouse over the picture to read the punch line

Storyboarding Software:
PC - Visio
Mac - Omnigraffle
PowerPoint
Keynote

http://www.balsamiq.com/products/mockups
online mock-up software
free 30-day trial

Resources
Ch. 7 in the book

daveb@usablepatterns.net

Random
Languagemonitor

Narrative Multimedia
Finding Lady: The Art of Storyboarding

Benefits of Narration:
creates focused and conclusive environments
engages learners in the story as it unfolds
puts learner in the role of storyteller, creating more engagement
immerses students in the enviroment

Narrative Development:
cognitive goals
scripts
plans

Experiential Learning:
learning from primary experience
imagination-based experience may offer a context or experiential learning
multimedia experiential learning can povide the opportunity for epression and reflection
focus on situated and social aspects of learning process

Colors
kuler.adobe.com
Great for finding color schemes!!
2-3 colors recommended for a website