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


Published on

A 30 minute synopsis of our workshop from UXLondon [http://uxlondon.com/programme/2009-06-17/richandjames/]. Given at a London IA event on Wednesday 12th August 2009.

Published in: Design, Business, Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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

  1. Wireframing Web 2.0 for Design and Definition London IA UXLondon Redux Sunday, 16 August 2009
  2. Philosophy not Process Sunday, 16 August 2009
  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
  6. y Ideation Prototyping Sunday, 16 August 2009
  7. starting here Sunday, 16 August 2009
  8. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Sunday, 16 August 2009
  9. Diverge to converge Sunday, 16 August 2009
  10. D IVERGE CONVE RGE Discovery Ideation Prototyping Usability Sunday, 16 August 2009
  11. We want richer, more meaningful, engaging experiences… ...and we want them quicker than before. ...Did we mention Agile? Sunday, 16 August 2009
  12. The problem with deliverables Sunday, 16 August 2009
  13. http://www.youtube.com/watch?v=FCUqlM65osc 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
  16. Wireframes are design tools Sunday, 16 August 2009
  17. Formative as much as Summative (perhaps more so) Sunday, 16 August 2009
  18. The joy of paper Sunday, 16 August 2009
  19. sketching The joy of paper Sunday, 16 August 2009
  20. Sunday, 16 August 2009
  21. Sketch attributes • Rapid • Timely, convenient • Cheap • Disposable • Plentiful • Clear vocabulary Sunday, 16 August 2009
  22. Sketching outcomes • Minimal, relevant detail • Appropriate degree of refinement • Suggest & explore, don’t confirm • Ambiguous 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
  28. Sunday, 16 August 2009
  29. Sunday, 16 August 2009
  30. 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
  32. Collaborating with clients/stakeholders Sunday, 16 August 2009
  33. Interactive Sunday, 16 August 2009
  34. Why interactive? Sunday, 16 August 2009
  35. Complexity Sunday, 16 August 2009
  36. Sunday, 16 August 2009
  37. Sunday, 16 August 2009
  38. Behaviour Sunday, 16 August 2009
  39. Sunday, 16 August 2009
  40. Participation 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
  46. Documenting rich interactions 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
  49. Sunday, 16 August 2009
  50. Sunday, 16 August 2009
  51. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Sunday, 16 August 2009
  52. The gap between ideation and prototyping is blurry Sunday, 16 August 2009
  53. Ideation vs. Prototyping Divergent Convergent Evocative Didactic Suggests Describes Explores Refines Questions Answers Provokes Resolves Proposes Tests 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
  58. Usability testing Sunday, 16 August 2009
  59. Sunday, 16 August 2009
  60. Formative vs. Summative Sunday, 16 August 2009
  61. RITE Rapid iterative testing and evaluation Sunday, 16 August 2009
  62. Fin james@clearleft.com Sunday, 16 August 2009