Wireframing Web 2.0 for Design and Definition London IA UXLondon Redux Sunday, 16 August 2009
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
Discovery Ideation Prototyping Usability
Card sortingPersona development
User journeysSite mapping
Competitor analysis
Content audit
Ethnographic research
Contextual enquiry
Sunday, 16 August 2009
Discovery Ideation Prototyping Usability
Sunday, 16 August 2009
Discovery Ideation Prototyping Usability
Sunday, 16 August 2009
starting here
Sunday, 16 August 2009
Paper
Interactive
Ideation Prototyping
✓✓✓✓
Sunday, 16 August 2009
Diverge to converge
Sunday, 16 August 2009
Discovery Ideation Prototyping Usability
DIVERGE CONVERGE
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 Robinsonhttp://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
The joy of papersketching
Sunday, 16 August 2009
Sunday, 16 August 2009
• Rapid
• Timely, convenient
• Cheap
• Disposable
• Plentiful
• Clear vocabulary
Sketch attributes
Sunday, 16 August 2009
• Minimal, relevant detail
• Appropriate degree of refinement
• Suggest & explore, don’t confirm
• Ambiguous
Sketching outcomes
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
Paper
Interactive
Ideation Prototyping
✓✓✓✓
Sunday, 16 August 2009
Discovery Ideation Prototyping Usability
DIVERGE
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 BuxtonSketching 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
• 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
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 Humetomhume.org/2006/02/interaction_des.html
Sunday, 16 August 2009
The gift of codehttp://tr.im/uxlondongoodies
Sunday, 16 August 2009
Paper
Interactive
Ideation Prototyping
✓✓✓✓
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
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
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
Paper
Interactive
Ideation Prototyping
✓✓✓✓
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 lowfidelity 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 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
Sunday, 16 August 2009
Usability testing
Sunday, 16 August 2009
Sunday, 16 August 2009
Formative vs. Summative
Sunday, 16 August 2009
RITERapid iterative testing and evaluation
Sunday, 16 August 2009