Prototyping à la Node with Express (at NationJS)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Prototyping à la Node with Express (at NationJS)

  • 560 views
Uploaded on

Talk given at NationJS 10/4/13 ...

Talk given at NationJS 10/4/13

Schedule Description:
In this talk, Pam Selle (thewebivore.com) 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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
560
On Slideshare
544
From Embeds
16
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 16

https://twitter.com 16

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
  • 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

Transcript

  • 1. + Prototyping à la Node with Express Pam Selle @pamasaur thewebivore.com
  • 2. + This is a little talk about prototyping and user testing
  • 3. + This is a little talk about Express and building quick websites with Node
  • 4. Hopefully you learn a little something
  • 5. + Prototyping
  • 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. + “The best way to have a good idea is to have lots of ideas.” -Linus Pauling
  • 8. + Playing modes Idea/Concept Process/Technique Replicate/Learn
  • 9. + Prototypes: Quick Make early Not necessarily pretty Not permanent
  • 10. + Prototypes are not: The first iteration of a project
  • 11. + Prototyping/wireframing tools  Balsamiq  Justinmind  Mixture.io  Axure  InvisionApp  Adobe Empire (Photoshop, Illustrator …)  … and lots more
  • 12. + … forget that! Let‟s do it all in JavaScript! (and HTML/CSS)
  • 13. + Express.js  Web app framework  Analogous to Sinatra  http://expressjs.com/
  • 14. + Express.js  Routes  Requests  Views
  • 15. + Wow! That sounds good for making a web app prototype.
  • 16. + STOP Demo time.
  • 17. + Cheat to win! npm install –g express express [appname]
  • 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. + User Testing
  • 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. You are not your users/audience
  • 22. + User testing Test early. Look for heuristics violations. Look for anger. Document.
  • 23. + Test early
  • 24. + Look for heuristics violations http://www.nngroup.com/articles/ten-usability-heuristics/
  • 25. + Look for anger
  • 26. + Document Take pictures Take (limited) notes Then, you iterate.
  • 27. + User Testing  Do it early  Observe  Document  Great book: Don‟t Make Me Think
  • 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. + @pamasaur thewebivore.com Thank you!