• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wireframing Web Apps
 

Wireframing Web Apps

on

  • 2,806 views

By Richard Rutter at the Launch48 2009 Conference

By Richard Rutter at the Launch48 2009 Conference

Statistics

Views

Total Views
2,806
Views on SlideShare
2,805
Embed Views
1

Actions

Likes
4
Downloads
32
Comments
0

1 Embed 1

http://dschool.co 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Wireframing Web Apps Wireframing Web Apps Document Transcript

    • Wireframing Web Apps Friday, 16 October 2009 Intros
    • Philosophy not Process Friday, 16 October 2009 Based on a day workshop, condensed into 15 minutes! Intend to get over principles and approaches.
    • Discovery Ideation Prototyping Usability Friday, 16 October 2009 Not set in stone, but we have seen these four stages emerge during our working practice
    • 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?
    • 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
    • CONVERG DIVE RGE E Discovery Ideation Prototyping Usability DIVERGE ERGE CONV Friday, 16 October 2009 Diverge to converge
    • 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
    • Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009 Breakdown of today. 2 mediums each with 2 uses.
    • The joy of paper Friday, 16 October 2009
    • sketch The joy of paper Friday, 16 October 2009
    • “A process for innovation and creativity through iterations” Bill Moggridge Friday, 16 October 2009 Definition of sketching. Iterations. Central to the notion of divergent design.
    • 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
    • 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).
    • 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!)
    • Examples Friday, 16 October 2009 (communication, collaboration, think while you sketch)
    • Friday, 16 October 2009
    • Friday, 16 October 2009
    • Friday, 16 October 2009
    • Friday, 16 October 2009
    • Friday, 16 October 2009
    • Friday, 16 October 2009 Too precise
    • &
anti-patterns Design patterns are your friend Friday, 16 October 2009
    • http://developer.yahoo.com/ypatterns/ Friday, 16 October 2009
    • http://designinginterfaces.com/ Friday, 16 October 2009
    • http://www.designingsocialinterfaces.com/ Friday, 16 October 2009
    • Bill Scott: Mind Mapping Design Patterns http://bit.ly/12jl3X Friday, 16 October 2009
    • Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
    • DIVERGE scovery Ideation Prototyp DIVERGE Friday, 16 October 2009
    • 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
    • Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
    • Friday, 16 October 2009 Paper prototyping is DRAWING whole pages rather than sketching elements or patterns
    • Friday, 16 October 2009
    • Friday, 16 October 2009
    • Going Interactive Friday, 16 October 2009 Design in the browser. Native medium. Clickable. High fidelity.
    • “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/ Friday, 16 October 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 Friday, 16 October 2009
    • “Wireframing AJAX is a bitch.” Jeffrey Zeldman http://alistapart.com/articles/web3point0 Friday, 16 October 2009
    • Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
    • “All the engineers need is a picture and a conversation.” Josh Damon Williams http://bit.ly/12XiNl Friday, 16 October 2009
    • Friday, 16 October 2009
    • Friday, 16 October 2009
    • Friday, 16 October 2009
    • Friday, 16 October 2009
    • Pe arson Friday, 16 October 2009
    • Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
    • ElfCartel super best friends 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
    • 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.
    • 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.
    • 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/