Sketchboards are popularised by Adaptive Path. Wireframes as a first step are too slow and detailed. The collaborative use of the sketchboard opens up the design process to everyone involved (all stakeholders including clients, visibility for management). Designers need a quick way to explore many different possibilities of the bigger picture, solo or in collaboration.
Related concepts
User flow -
Sketchboard – your starting point? ”inspirational material such as personas or requirements are used as a starting point to drive the conceptualization process”
Experience map – typically showing the full concept, official deliverable and usually not sketched
Canvas flow
Wireflow – mix between wireframes and user flow
Speech bubbles – used as a starting point per user, or showing the thought processes step-by-step for one particular user, these are annotation elements
The process, coarsely speaking
- Get out a big sheet of paper (2-3 meters) and stick it to the wall
- Use sticky notes to divide the sketchboard into broad topics like Design/User Personas or steps that your users will take (signup, log in, edit details, close account, etc).
- Use paper or the UX Sketchbook to start roughing out ideas or thoughts
- Stick them to the board (DS: preferably everything is sticky and can be moved around)
- Move things around
From: Sketchboard before you wireframe – Treehouse Blog
The process, detailed steps
See http://www.slideshare.net/ugleah/sketchboards-prototypes-presentation
and http://www.boxuk.com/blog/using-sketchboards-to-design-great-user-interfaces
1. Gather the inputs:
On the left side of the sheet (label it “Input” and optionally draw a dashed vertical line to separate it from the wireflows that sit on the right-side)
- sitemap
- scope items
- objectives
- add criteria (requirements/user stories) (
- users (personas, facts)
- success metrics
2. Sketch, sketch, sketch
Start sketching on separate papers
- Start with 6-up (A4 landscape) multi-page templates (a.k.a. thumbnail sketches) to explore one problem from different angles, or explore a possible flow (example) (template)
- - Focus first on quantity. Go right-brained. Your goal here is to come up with many different ideas or usability solutions without being too critical or pixel-perfect at this stage.
- - stick them up on the board
- - “take a step back and think about which one works best. Maybe [it's a hybrid]. Do another thumbnail sketch if this is the case, then” go for the 1-up template.
- - don’t use pencils, just scribble it out to not get perfectionist over the details
Then sketch full pages using this single-page template (1-up) to “zoom in” on a particular thumbnail idea with slightly more detail
- - add headers, visual weight, functional elements
- - remain sketchy, don’t overdo it on the fine detail
3. Start your sketchboard
- Divide it into steps that your user will take or stages of user process (these should be labeled big)
- “Once you’re happy with the position and grouping of your sketches, replace the Post-It headings with inked ones – a big chisel tip Sharpie works well (just make sure the ink doesn’t bleed through the brown paper and onto the wall!) “
- Roughly organise your problems and constraints
- Optionally add research findings, competitor examples and other inspiration libraries
- Select, evaluate, discuss, critique, decide – collaborate!
4. Share and iterate
- take it to your team in a tube
- take (seperate) notes for feedback (not on the board)
- go back and add summarized changes as annotations to your board
“During the evaluation sessions, annotate your sketches, use Post-It notes, and amend or create new sketches as required to capture feedback, suggestions and corrections”
5. Start wireframing
- THEN make the wireframes and/or prototype on the computer
Sketchboard examples
http://wireframes.linowski.ca/2009/05/sketchboarding/
http://blog.teamtreehouse.com/sketchboard-before-you-wireframe
Resources
$ Tools
- Drafting dots (sticky)
- Mobile whiteboards (lightweight, useful if you lack wall space) or large piece of cardboard
Examples
http://pinterest.com/Webhode/user-experience/
Related articles
http://uxdesign.smashingmagazine.com/2012/01/04/stop-designing-pages-start-designing-flows/
http://conversionxl.com/how-to-design-user-flow/
See also:
Types of deliverables WP post
Learn more
http://konigi.com/book/sketch-book/work-fast TIP videos
More videos @ http://lanyrd.com/search/?q=sketchboard
Ideas, tools, alternatives
Consider using Prezi for wireflows and sitemaps. It’s a less linear, more free-form and animated way of telling a story. Alternatively, zoom in manually in powerpoint.
