Downloaded 37 times
Uploaded byLaunch 48
Wireframing Web Apps
This document discusses the process of wireframing web apps. It begins by introducing the concepts of discovery, ideation, prototyping, and usability. During the ideation phase, the document advocates for sketching using paper as it allows for rapid iteration. Some benefits of sketching outlined include being timely, disposable, and inviting feedback. The document then shifts to discussing interactive prototyping using tools on the browser, noting its benefits for demonstrating behaviors. Throughout, it emphasizes the importance of diverging during ideation before converging on solutions during prototyping.
Wireframing Web Apps
- 1. Wireframing Web Apps Friday, 16 October 2009 Intros
- 2. Philosophy not Process Friday, 16 October 2009 Based on a day workshop, condensed into 15 minutes! Intend to get over principles and approaches.
- 3. Discovery Ideation Prototyping Usability Friday, 16 October 2009 Not set in stone, but we have seen these four stages emerge during our working practice
- 4. y Ideation Prototyping Friday, 16 October 2009 (We’re going to be working on the Ideation/Prototyping phase) but what would happen prior to that?
- 5. Content audit Ethnographic research Competitor analysis Contextual enquiry Discovery Ideation Pro Persona development Card sorting User journeys Site mapping Friday, 16 October 2009 Some may be covered in planning this afternoon
- 6. CONVERG DIVE RGE E Discovery Ideation Prototyping Usability DIVERGE ERGE CONV Friday, 16 October 2009 Diverge to converge
- 7. an ge f ch o st o iv es c rn at lte of a n o. Discovery Ideation Prototyping Usability Friday, 16 October 2009
- 8. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009 Breakdown of today. 2 mediums each with 2 uses.
- 9. The joy ofpaper Friday, 16 October 2009
- 10. sketch The joy of paper Friday, 16 October 2009
- 11. “A process forinnovation and creativity through iterations” Bill Moggridge Friday, 16 October 2009 Definition of sketching. Iterations. Central to the notion of divergent design.
- 12. sketching is most u seful during ideation Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009 Largely pen & paper but as we will demonstrate can be interactive as well
- 13. Sketching outcomes • Minimal, relevant detail • Appropriate degree of refinement • Suggest & explore, don’t confirm • Ambiguous Friday, 16 October 2009 The outcomes of which are these. Minimal, relevant detail: you only need to tackle those elements you’re sketching to resolve (grey box or outline everything else, crossed images, scribbles for copy etc.) Appropriate refinement: too much detail confuses the purpose. Ambiguity, open-endings, question marks are absolutely fine. Sketches should ask questions and have holes in which the answers can expand (Buxton’s Swiss cheese analogy).
- 14. Sketch attributes • Rapid • Timely, convenient • Cheap • Disposable • Plentiful • Clear vocabulary Friday, 16 October 2009 Timely, convenient: You can do this now with very little, if any, preparation. Disposable: essential for iterative (refinement). No loss. Plentiful: Many routes can be discussed. Clear vocab: the intent is clear. A sketch is typically unfinished which tells people (like clients) that this is work in progress. That they still have the opportunity to change, to feedback. Contrast this to the polished screen design which implies you have finished, does not invite ideas. By implication you are saying I don’t want or even value your ideas. Nobody will confuse the sketch with the final product (and ship it!)
- 15. Examples Friday, 16 October2009 (communication, collaboration, think while you sketch)
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. Friday, 16 October2009 Too precise
- 22. & anti-patterns Design patterns are your friend Friday, 16 October 2009
- 23.
- 24.
- 25.
- 26. Bill Scott: Mind Mapping Design Patterns http://bit.ly/12jl3X Friday, 16 October 2009
- 27. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
- 28. DIVERGE scovery Ideation Prototyp DIVERGE Friday, 16 October 2009
- 29. Sketching tips • 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. Friday, 16 October 2009
- 30. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
- 31. Friday, 16 October2009 Paper prototyping is DRAWING whole pages rather than sketching elements or patterns
- 32.
- 33.
- 34. Going Interactive Friday, 16October 2009 Design in the browser. Native medium. Clickable. High fidelity.
- 35. “It has tobe 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/ Friday, 16 October 2009
- 36. “You can’t tellhow well something will work until it’s sitting there in your sweaty palm.” Tom Hume tomhume.org/2006/02/interaction_des.html Friday, 16 October 2009
- 37. “Wireframing AJAX isa bitch.” Jeffrey Zeldman http://alistapart.com/articles/web3point0 Friday, 16 October 2009
- 38. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
- 39. “All the engineersneed is a picture and a conversation.” Josh Damon Williams http://bit.ly/12XiNl Friday, 16 October 2009
- 40.
- 41.
- 42.
- 43.
- 44. Pe arson Friday, 16October 2009
- 45. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
- 46. ElfCartel super bestfriends web Home People Groups Amidactio's profile Add to friends Me in a nutshell Friends Olenit iuscing consequis facinci dolut, ros irilla psustrud. Stincil Screen name lacus inciduipit mollis magniamet, dolortisl consenisim aliquisi friend status diamet ver illa quipsum illaor illam. Put veros dunt curae gait, Adactio veriusto accum patin. Conullandiam blamet pede, issectem super best friend dionsenit illam ridiculus acipisl lute, suscipit doloboreet b0xman coreraestrud. good friend Tellus tat lacinia, commodipis nulput veliquat volor venit enim, Clagnut fermentum eugiat nummy. Accumsandre si sustrud, tisi vulluptatum mere acquaintance ullaor eu, praesed euisl acilit sequat. Aliquip aute nostrud, lobor dolor nim vulputat, non curae bla etuerostrud. Nonsenibh endreet Oriental prince in a land veros alisi dipiscipit, niscidu dolent sagittis. Aliquis nonulla acipsus. of soup never met More about me Groups Interests Group name admin My favourite music Currysoc My favourite films We love Pie! My favourite books and authors Friday, 16 October 2009 Elf Cartel: http://elfcartel.clearleft.com/profile.php?slide=simpleajax © 2008 Clearleft Ltd · About · Help · Legal · Contact Make a fave / remove as fave toggle Star rating widget& - incredibly difficult to describe in words but easy to show. Would have Profile photo with thanks apologies to Jeremy Keith taken a while to build, but lifted from our production library so it's just plug and play. Fairly simple as the change to the is occuring where the initiating action (mouse click) took place so that’s where the user’s attention currently is, although we’re not wireframing a ‘waiting’ state. More examples: Edenbee - cancelling notices, adding a flight
- 47. PolyPage http://github.com/andykent/polypage/ <a href="logout" class="pp_logged_in"> Sign out </a> <a href="login" class="pp_not_logged_in"> Login </a> Friday, 16 October 2009 PolyPage is a JQuery plugin for showing different views on the page. Just uses class names.
- 48. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009 Diverge to Converge – DO IDEATION! Use paper for rapid iterations but don’t be afraid to move to to the browser when paper reaches its limitations. Interactive for behaviour. Don’t be intimated by code. It’s not as hard as you think. Interactive for usability testing. Remember all this as a design tool as much as a communication tool. You need the conversation to turn them in to conversation tools.
- 49. Thanks! rich@clearleft.com http://clearleft.com/does/teach/prototyping/ Friday, 16 October 2009 Our day long workshop is at http://clearleft.com/does/teach/prototyping/