Prototyping à la Node with Express (at NationJS)


Published on

Talk given at NationJS 10/4/13

Schedule Description:
In this talk, Pam Selle ( will demonstrate a simple method of rapid prototyping and idea validation. You’ll learn how to use Express.js for rapid prototyping, leverage user testing to validate designs and interactions, and get it all up and running on the web quickly and easily.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Hi! I’m pam, etc.I’m going to talk about two things here
  • Okay, maybe secretly three things
  • A prototype is something EARLY to TEST or something to LEARN from
  • TEST*2/LEARNCan talk about the second two in the Q&A if you like
  • Quickly makes them cheapMake them early for maximal learningPretty is in the eye of the beholder, and pretty means they focus on the prettyMOST IMPORTANT!
  • Selling point is don’t need to know how to code, and they’ll take your moneyAxureOMG it’s dreamweaverInvision – linkify and annotate designs. Good for visuals, or collaboration, maybe not so good for prototyping.
  • Node gives you HTTP for a webserver, Connect is middleware to make it easier, and Express is the sugar on top that makes it tasty.Shouldn’t need data, etc.
  • JessicaIvins talks about UUD, check out her slides for some resources.
  • Can’t advocate for who you don’t know The most direct route. You have to talk to them.
  • My tips for user testing
  • How convenient that we just talked about prototyping!Talk about Neighboards – idea was to take coffee shop board online, help people find neighborhood eventsExercise in prototyping and user testingDid research beforehand as well
  • "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines. (i.e. not “only have 3 widgets”)Ex. Help users recognize, diagnose, and recover from errorsCategorize your observations into the heuristics to make sure they’re important, and help prioritize
  • Look for emotions. Anger is a very informative emotions.Mark Dominus!
  • Use pictures as a memory tool, catch the screen if you canDon’t make people feel like ratsImportantly it’s time to iterate. Make another version if an issue showed up multiple times, its and issue
  • If we have some time, I’m happy to answer questions, like other kinds of prototypes
  • Prototyping à la Node with Express (at NationJS)

    1. 1. + Prototyping à la Node with Express Pam Selle @pamasaur
    2. 2. + This is a little talk about prototyping and user testing
    3. 3. + This is a little talk about Express and building quick websites with Node
    4. 4. Hopefully you learn a little something
    5. 5. + Prototyping
    6. 6. + What is prototyping? A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from. Source: ye olde Wikipedia
    7. 7. + “The best way to have a good idea is to have lots of ideas.” -Linus Pauling
    8. 8. + Playing modes Idea/Concept Process/Technique Replicate/Learn
    9. 9. + Prototypes: Quick Make early Not necessarily pretty Not permanent
    10. 10. + Prototypes are not: The first iteration of a project
    11. 11. + Prototyping/wireframing tools  Balsamiq  Justinmind   Axure  InvisionApp  Adobe Empire (Photoshop, Illustrator …)  … and lots more
    12. 12. + … forget that! Let‟s do it all in JavaScript! (and HTML/CSS)
    13. 13. + Express.js  Web app framework  Analogous to Sinatra 
    14. 14. + Express.js  Routes  Requests  Views
    15. 15. + Wow! That sounds good for making a web app prototype.
    16. 16. + STOP Demo time.
    17. 17. + Cheat to win! npm install –g express express [appname]
    18. 18. + Prototyping  Not difficult to build!  Express is pretty nifty  But not always necessary  Nice article on Express Understanding Express.js from Evan Hahn
    19. 19. + User Testing
    20. 20. + Why user test?  Usability!  The „U‟s of usability  Utility: Does it do what you need?  Usability: Ease and pleasure of use  Useful: usability + utility  Useful, usable, desirable (Liz Sanders)  Needed, understandable, wanted & enjoyable
    21. 21. You are not your users/audience
    22. 22. + User testing Test early. Look for heuristics violations. Look for anger. Document.
    23. 23. + Test early
    24. 24. + Look for heuristics violations
    25. 25. + Look for anger
    26. 26. + Document Take pictures Take (limited) notes Then, you iterate.
    27. 27. + User Testing  Do it early  Observe  Document  Great book: Don‟t Make Me Think
    28. 28. + Summary  Use prototyping to cheaply produce something to show  Express is a quick, fun way to create apps  User testing is fast, cheap, and you can do it!
    29. 29. + @pamasaur Thank you!