wireframing web 2.0 for design and definition: london ia uxlondon redux

Wireframing Web 2.0

for Design and Definition

London IA UXLondon Redux

Sunday, 16 August 2009

Philosophy

not Process


Discovery Ideation Prototyping Usability



Card sortingPersona development

User journeysSite mapping

Competitor analysis

Content audit

Ethnographic research

Contextual enquiry


starting here


Paper

Interactive

Ideation Prototyping

✓✓✓✓


Diverge to converge



DIVERGE CONVERGE


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 Robinsonhttp://www.andybudd.com/archives/2008/02/design_artefact/


http://www.andybudd.com/archives/2008/02/design_artefact/

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


The joy of papersketching


• Rapid

• Timely, convenient

• Cheap

• Disposable

• Plentiful

• Clear vocabulary

Sketch attributes


• Minimal, relevant detail

• Appropriate degree of refinement

• Suggest & explore, don’t confirm

• Ambiguous

Sketching outcomes


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




Paper

Interactive


✓✓✓✓



DIVERGE

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 BuxtonSketching and Experience Design, BostonCHI, November 2006.


“A process for innovation and creativity through iterations”

Bill Moggridge


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

Sketch smart


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/


http://schulzeandwebb.com/blog/2007/09/09/the-experience-stack-revisited/

http://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 Humetomhume.org/2006/02/interaction_des.html


The gift of codehttp://tr.im/uxlondongoodies


http://tr.im/uxlondongoodies

http://tr.im/uxlondongoodies

Paper

Interactive


✓✓✓✓


“Wireframing AJAX is a bitch.”Jeffrey Zeldman

http://alistapart.com/articles/web3point0


http://www.alistapart.com/articles/web3point0

http://www.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

Input Field Gains Focus

User Input Detected on Input Field

AC Data Requested

AC Container Opens

AC Container Data Is Refreshed with New Results

AC Data Retrieval Results in Error

AC Type-Ahead Pre-populates Input

AC Container Closes

Mouse To AC Item

Mouse Away from AC Item

Arrow to AC Item

Arrow Away from AC Item

Selection Made SelectionCleared

Input Field Loses Focus

API Event (on AC object):

(use DOM event) (use DOM event) textboxFocus

Event

textboxKeypress

Event

dataRequestEvent containerExpand

Event

dataReturnEvent dataErrorEvent typeAhead

Event

containerCollapse

Event

itemMouseOver

Event

itemMouseOut

Event

itemArrowTo

Event

itemArrowFrom

Event

itemSelectEvent or

unmatchedItem

SelectEvent

selectionEnforce

Event

textboxBlur

Event

Page After selection is made, return or enter in the input field may post form.

Input Field May highlight, depending on browser.

Contents of field automatically cleared.

Loses default browser highlighting,

Cursor Automatically becomes text cursor.

Carat Carat blinks in text field.

Typed-ahead portion of text is highlighted using OS-default highlight color.

In multi-select mode, delimiter is added and carat moves to end of input field for further text entry.

Carat remains in text input field.

Carat disappears.

AutoComplete Container

Not visible. Not visible. Not visible. AC container unaffected until after widget delay has passed.

Default: Unaffected. Animation or other treatment could visually convey “loading” state.

Opens. Animation (slide down) is a built-in option, as are shadow and iFrame shim.

Changes to reflect new content. Animation is a built in option to ease the change in container size, if applicable.

Default: Closes. No impact. Closes. Animation (slide up) is a built-in option, as are shadow and iFrame shim.

No impact. No impact. If necessary, scrolls to reveal pre-selected item.

No impact. Closes; close event fires.

If open, the Container closes.

Closes; close event fires.

Moused-over Item in AC Container

Highlightng treatment.

Highlighting treatment removed.

Pre-selection treatment, which is stronger than mouseover highlighting, applies.

Pre-selection treatment removed; returns to naked or moused-over treatment.

Pre-Selected Item in AC Container

No impact; pre-selection is stronger and takes precedence.

No impact. Item being pre-selected gets pre-selection treatment.

Pre-selection treatment removed.

What indicators are present to suggest AC (e.g., in the case of content-filtering)

What happens when the mouse moves over the input field?

What happens when the user clicks in or tabs to the input field?

What happens when user input is detected in the input field?

What happens when the AC widget requests data?

What happens when the AC container opens?

What happens when the AC container, once open, gains a different data to display?

What happens when the AC widget requests data and gets malformed data (or other error occurs)?

What happens when AC autofills the input field with the top choice in the result set?

What happens when the AC container closes?

What happens when the mouse moves over an item in the AC container?

What happens when the mouse moves away from an item in the AC container?

What happens when an item is pre-selected using arrow keys?

What happens when an item in the AC container is de-selected using arrow keys?

What happens when a selection is made, via mouse click, enter key, or tab key?

What happens when the AC widget clears the input field because user selection did not match any valid options?

What happens when the input field loses focus (user clicks or tabs away, or submits the form)?

http://developer.yahoo.com/yui/dragdrop/#storyboard


http://developer.yahoo.com/ypatterns/

http://developer.yahoo.com/ypatterns/

“All the engineers need is a picture and a conversation.”

Josh Damon Williams http://bit.ly/12XiNl


http://bit.ly/12XiNl

http://bit.ly/12XiNl

Paper

Interactive


✓✓✓✓


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 lowfidelity or high fidelity prototype -- only the right or wrong prototype.

Bill Buxton, Interaction08


When is a high-fidelity prototype appropriate?


The goal of a project is not to produce documentation


There’s nothing functional abouta functional spec.

Getting Real, 37 Signals

Functional specs are fantasies.

Functional specs only lead toan illusion of agreement.

Functional specs don’t let you evolve, change, and reassess


Usability testing


Formative vs. Summative


RITERapid iterative testing and evaluation


[email protected]


mailto:[email protected]

mailto:[email protected]