Wireframing Web 2.0
for Design and
Definition
London IA UXLondon Redux
Sunday, 16 August 2009

Philosophy
not Process
Sunday, 16 August 2009

Discovery Ideation Prototyping Usability
Sunday, 16 August 2009

Content audit
Ethnographic research
Competitor analysis
Contextual enquiry
Discovery Ideation Pro
Persona development
Card sorting User journeys
Site mapping
Sunday, 16 August 2009

Discovery Ideation Prototyping Usability
Sunday, 16 August 2009

y Ideation Prototyping
Sunday, 16 August 2009

starting here
Sunday, 16 August 2009

Ideation Prototyping
Paper
✓ ✓
Interactive
✓ ✓
Sunday, 16 August 2009

Diverge to converge
Sunday, 16 August 2009

D IVERGE CONVE
RGE
Discovery Ideation Prototyping Usability
Sunday, 16 August 2009

We want richer, more
meaningful, engaging
experiences…
...and we want them quicker
than before.
...Did we mention Agile?
Sunday, 16 August 2009

The problem
with deliverables
Sunday, 16 August 2009

http://www.youtube.com/watch?v=FCUqlM65osc
Sunday, 16 August 2009

The goal of a project is not
to produce documentation
Sunday, 16 August 2009

The process and act of
creating “deliverables” is
more important than the
deliverables themselves.
D. Keith Robinson
http://www.andybudd.com/archives/2008/02/design_artefact/
Sunday, 16 August 2009

Wireframes are design tools
Sunday, 16 August 2009

Formative
as much as
Summative
(perhaps more so)
Sunday, 16 August 2009

The joy of paper
Sunday, 16 August 2009

sketching
The joy of paper
Sunday, 16 August 2009

Sunday, 16 August 2009

Sketch attributes
• Rapid
• Timely, convenient
• Cheap
• Disposable
• Plentiful
• Clear vocabulary
Sunday, 16 August 2009

Sketching outcomes
• Minimal, relevant detail
• Appropriate degree of refinement
• Suggest & explore, don’t confirm
• Ambiguous
Sunday, 16 August 2009

“Sketchbooks are not
about being a good
artist, they’re about
being a good thinker.”
Jason Andrew Andrew Santa Maria
http://jasonsantamaria.com/articles/pretty-sketchy/
Sunday, 16 August 2009

Ideation Prototyping
Paper
✓ ✓
Interactive
✓ ✓
Sunday, 16 August 2009

DIVERGE
scovery Ideation Prototyp
DIVERGE
Sunday, 16 August 2009

“If your team succeeds all the time, then
fire them. They’re not trying hard enough
and being too conservative. You have to
reward mistakes, just not stupidity.”
Bill Buxton
Sketching and Experience Design, BostonCHI, November 2006.
Sunday, 16 August 2009

“A process for innovation and
creativity through iterations”
Bill Moggridge
Sunday, 16 August 2009

Sunday, 16 August 2009

Sunday, 16 August 2009

Sunday, 16 August 2009

Sketch smart
• Do lots! Diverge don’t converge
• Sketch as you talk & think
• Forget aesthetics (this is the
wrong place for that)
• Collaborate. Don’t be afraid to
scrawl on your colleague’s
sketches.
Sunday, 16 August 2009

Collaborating with
clients/stakeholders
Sunday, 16 August 2009

Interactive
Sunday, 16 August 2009

Why interactive?
Sunday, 16 August 2009

Complexity
Sunday, 16 August 2009

Sunday, 16 August 2009

Sunday, 16 August 2009

Behaviour
Sunday, 16 August 2009

Sunday, 16 August 2009

Participation
Sunday, 16 August 2009

“It has to be realised that
experience is very badly
understood by observation: the
designer has to take part.
Nothing is easier than believing
we understand experiences
we’ve never had.”
Matt Webb
schulzeandwebb.com/blog/2007/09/09/the-experience-stack-revisited/
Sunday, 16 August 2009

“You can’t tell how well
something will work
until it’s sitting there in
your sweaty palm.”
Tom Hume
tomhume.org/2006/02/interaction_des.html
Sunday, 16 August 2009

The gift of code
http://tr.im/uxlondongoodies
Sunday, 16 August 2009

Ideation Prototyping
Paper
✓ ✓
Interactive
✓ ✓
Sunday, 16 August 2009

“Wireframing AJAX is a bitch.”
Jeffrey Zeldman
http://alistapart.com/articles/web3point0
Sunday, 16 August 2009

Documenting rich interactions
Sunday, 16 August 2009

Autocomplete Interaction Storyboard The Yahoo! User Interface Library
©2006 Yahoo! Inc. http://developer.yahoo.net/yui
Actor/Event Page Load Mouse Over Input Field User Input AC Data AC Container AC Container Data AC Data AC Type- AC Container Mouse To AC Mouse Away Arrow to AC Arrow Away Selection Made Selection Input Field
Input Field Gains Focus Detected on Requested Opens Is Refreshed with Retrieval Ahead Pre- Closes Item from AC Item Item from AC Item Cleared Loses Focus
Input Field New Results Results in populates
Error Input
API Event (on AC (use DOM event) (use DOM event) textboxFocus textboxKeypress dataRequestEvent containerExpand dataReturnEvent dataErrorEvent typeAhead containerCollapse itemMouseOver itemMouseOut itemArrowTo itemArrowFrom itemSelectEvent or selectionEnforce textboxBlur
Event Event Event Event Event Event Event Event Event unmatchedItem Event Event
object): SelectEvent
Page After selection is
made, return or
enter in the input
field may post
form.
Input Field May highlight, Contents of field Loses default
depending on automatically browser
browser. cleared. highlighting,
Cursor Automatically
becomes text
cursor.
Carat Carat blinks in Typed-ahead In multi-select Carat remains in Carat
text field. portion of text is mode, delimiter is text input field. disappears.
highlighted using added and carat
OS-default moves to end of
highlight color. input field for
further text entry.
AutoComplete Not visible. Not visible. Not visible. AC container Default: Opens. Changes to reflect new Default: Closes. No impact. Closes. Animation No impact. No impact. If necessary, No impact. Closes; close event If open, the Closes; close
Container unaffected until Unaffected. Animation (slide content. Animation is (slide up) is a scrolls to reveal fires. Container closes. event fires.
after widget delay Animation or down) is a built- a built in option to ease built-in option, as pre-selected item.
has passed. other treatment in option, as are the change in container are shadow and
could visually shadow and size, if applicable. iFrame shim.
convey “loading” iFrame shim.
state.
Moused-over Item Highlightng Highlighting Pre-selection Pre-selection
in AC Container treatment. treatment treatment, which treatment
removed. is stronger than removed; returns
mouseover to naked or
highlighting, moused-over
applies. treatment.
Pre-Selected Item No impact; pre- No impact. Item being pre- Pre-selection
in AC Container selection is selected gets pre- treatment
stronger and takes selection removed.
precedence. treatment.
What indicators What happens What happens What happens What happens What happens What happens when What happens What happens What happens What happens What happens What happens What happens What happens What happens What happens
are present to when the mouse when the user when user input when the AC when the AC the AC container, once when the AC when AC when the AC when the mouse when the mouse when an item is when an item in when a selection is when the AC when the input
suggest AC (e.g., moves over the clicks in or tabs is detected in the widget requests container opens? open, gains a different widget requests autofills the container closes? moves over an moves away from pre-selected using the AC container made, via mouse widget clears the field loses
in the case of input field? to the input input field? data? data to display? data and gets input field with item in the AC an item in the AC arrow keys? is de-selected click, enter key, or input field because focus (user
content-filtering) field? malformed data the top choice in container? container? using arrow keys? tab key? user selection did clicks or tabs
(or other error the result set? not match any away, or
occurs)? valid options? submits the
form)?
http://developer.yahoo.com/yui/dragdrop/#storyboard
Sunday, 16 August 2009

“All the engineers need is a
picture and a conversation.”
Josh Damon Williams
http://bit.ly/12XiNl
Sunday, 16 August 2009

Sunday, 16 August 2009

Sunday, 16 August 2009

Ideation Prototyping
Paper
✓ ✓
Interactive
✓ ✓
Sunday, 16 August 2009

The gap between
ideation and
prototyping is blurry
Sunday, 16 August 2009

Ideation vs. Prototyping
Divergent Convergent
Evocative Didactic
Suggests Describes
Explores Refines
Questions Answers
Provokes Resolves
Proposes Tests
Sunday, 16 August 2009

There is no such thing as a low
fidelity or high fidelity prototype --
only the right or wrong prototype.
Bill Buxton, Interaction08
Sunday, 16 August 2009

When is a high-fidelity
prototype appropriate?
Sunday, 16 August 2009

The goal of a project is not
to produce documentation
Sunday, 16 August 2009

There’s nothing functional about
a functional spec.
Functional specs are fantasies.
Functional specs only lead to
an illusion of agreement.
Functional specs don’t let you
evolve, change, and reassess
Getting Real, 37 Signals
Sunday, 16 August 2009

Usability testing
Sunday, 16 August 2009

Sunday, 16 August 2009

Formative vs. Summative
Sunday, 16 August 2009

RITE
Rapid iterative testing and evaluation
Sunday, 16 August 2009

Fin
james@clearleft.com
Sunday, 16 August 2009