Wireframing Web 2.0 for Design and Definition

Wireframing Web 2.0
for Design and
Definition
London IA UXLondon Redux

Sunday, 16 August 2009

Philosophy
not Process


Discovery Ideation Prototyping Usability


Content audit
Ethnographic research
Competitor analysis
Contextual enquiry

Discovery Ideation Pro
Persona development
Card sorting User journeys
Site mapping


y Ideation Prototyping


starting here


Ideation Prototyping

Paper
✓ ✓
Interactive
✓ ✓


Diverge to converge


D IVERGE CONVE
RGE

Discovery Ideation Prototyping Usability


We want richer, more
meaningful, engaging
experiences…
...and we want them quicker
than before.

...Did we mention Agile?


The problem
with deliverables


http://www.youtube.com/watch?v=FCUqlM65osc


The goal of a project is not
to produce documentation


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/


Wireframes are design tools


Formative
as much as
Summative
(perhaps more so)


The joy of paper


sketching
The joy of paper


Sketch attributes
• Rapid
• Timely, convenient
• Cheap
• Disposable
• Plentiful
• Clear vocabulary


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


“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/


DIVERGE

scovery Ideation Prototyp
DIVERGE


“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.


“A process for innovation and
creativity through iterations”
Bill Moggridge


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.


Collaborating with
clients/stakeholders


Interactive


Why interactive?


Complexity


Behaviour


Participation


“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/


“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


The gift of code
http://tr.im/uxlondongoodies


“Wireframing AJAX is a bitch.”
Jeffrey Zeldman
http://alistapart.com/articles/web3point0


Documenting rich interactions


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


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


The gap between
ideation and
prototyping is blurry


Ideation vs. Prototyping
Divergent Convergent
Evocative Didactic
Suggests Describes
Explores Refines
Questions Answers
Provokes Resolves
Proposes Tests


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


When is a high-fidelity
prototype appropriate?


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

Usability testing


Formative vs. Summative


RITE
Rapid iterative testing and evaluation


Fin
james@clearleft.com


Wireframing Web 2.0 for Design and Definition

Recommended

Recommended

More Related Content

Similar to Wireframing Web 2.0 for Design and Definition

Similar to Wireframing Web 2.0 for Design and Definition (14)

Recently uploaded

Recently uploaded (20)

Wireframing Web 2.0 for Design and Definition