The document discusses various topics related to wireframing and prototyping for Web 2.0 projects. It covers the benefits of sketching ideas by hand during the ideation process. Interactive prototyping is also discussed as a way to test behaviors and user participation. The document emphasizes an iterative process of diverging and converging ideas to arrive at the best solutions through collaboration and usability testing.
3. Discovery Ideation Prototyping Usability
Sunday, 16 August 2009
4. Content audit
Ethnographic research
Competitor analysis
Contextual enquiry
Discovery Ideation Pro
Persona development
Card sorting User journeys
Site mapping
Sunday, 16 August 2009
5. Discovery Ideation Prototyping Usability
Sunday, 16 August 2009
14. The goal of a project is not
to produce documentation
Sunday, 16 August 2009
15. 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
23. â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
24. Ideation Prototyping
Paper
â â
Interactive
â â
Sunday, 16 August 2009
25. DIVERGE
scovery Ideation Prototyp
DIVERGE
Sunday, 16 August 2009
26. â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
27. âA process for innovation and
creativity through iterationsâ
Bill Moggridge
Sunday, 16 August 2009
31. 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
41. â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
42. â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
43. The gift of code
http://tr.im/uxlondongoodies
Sunday, 16 August 2009
44. Ideation Prototyping
Paper
â â
Interactive
â â
Sunday, 16 August 2009
45. âWireframing AJAX is a bitch.â
Jeffrey Zeldman
http://alistapart.com/articles/web3point0
Sunday, 16 August 2009
47. 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
48. âAll the engineers need is a
picture and a conversation.â
Josh Damon Williams
http://bit.ly/12XiNl
Sunday, 16 August 2009
54. 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
55. When is a high-fidelity
prototype appropriate?
Sunday, 16 August 2009
56. The goal of a project is not
to produce documentation
Sunday, 16 August 2009
57. 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