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

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

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

Behaviour 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

“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

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

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

http://www.hackstartups.com	112
http://www.currybet.net	39
http://www.slideshare.net	31
http://elearnovate.org	7
http://presentations.tumblr.com	4
http://sedley.tumblr.com	3
http://www.e-presentations.us	3
http://levidepoches.blogs.com	1
http://safe.tumblr.com	1
https://courses.quinnipiac.edu	1

Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux

by James Box on Aug 17, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 202

Statistics

Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux — Presentation Transcript