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

  • 6,356 views
Uploaded 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.

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.

More in: Design , Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • wires
    Are you sure you want to
    Your message goes here
  • Great display about the need to innovate business models; tips on how to represent them succinctly; as well as the need to make advancement initiatives actionable. Superb use of pictures and clear to see illustrative examples.
    Sharika
    http://winkhealth.com http://financewink.com
    Are you sure you want to
    Your message goes here
  • Spot on! This is exactly the direction we should all be moving towards. Less specs for RIAs, more working prototypes to explore the best interactions.

    Check out
    http://www.slideshare.net/toddwarfel/delve-prototyping-in-the-wild
    by Todd ZakiWarfel too- very similar concepts with lots of great ideas to play with.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,356
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
450
Comments
3
Likes
65

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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