+
Prototyping à la Node with Express
Pam Selle
@pamasaur
thewebivore.com
+
This is a little
talk about
prototyping
and user
testing
+
This is a little
talk about
Express and
building quick
websites with
Node
Hopefully you
learn a little
something
+
Prototyping
+
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 ...
+
“The best way to have a
good idea is to have
lots of ideas.”
-Linus Pauling
+
Playing modes
Idea/Concept
Process/Technique
Replicate/Learn
+
Prototypes:
Quick
Make early
Not necessarily pretty
Not permanent
+
Prototypes are not:
The first iteration
of a project
+
Prototyping/wireframing tools
 Balsamiq
 Justinmind
 Mixture.io
 Axure
 InvisionApp
 Adobe Empire (Photoshop, Illu...
+
… forget that!
Let‟s do it all in JavaScript!
(and HTML/CSS)
+
Express.js
 Web app framework
 Analogous to Sinatra
 http://expressjs.com/
+
Express.js
 Routes
 Requests
 Views
+
Wow!
That sounds good for
making a web app
prototype.
+
STOP
Demo time.
+
Cheat to win!
npm install –g express
express [appname]
+
Prototyping
 Not difficult to build!
 Express is pretty nifty
 But not always necessary
 Nice article on Express Und...
+
User Testing
+
Why user test?
 Usability!
 The „U‟s of usability
 Utility: Does it do what you need?
 Usability: Ease and pleasure ...
You are not your
users/audience
+
User testing
Test early.
Look for heuristics violations.
Look for anger.
Document.
+
Test early
+
Look for heuristics violations
http://www.nngroup.com/articles/ten-usability-heuristics/
+
Look for anger
+
Document
Take pictures
Take (limited) notes
Then, you iterate.
+
User Testing
 Do it early
 Observe
 Document
 Great book: Don‟t Make Me Think
+
Summary
 Use prototyping to cheaply produce something to
show
 Express is a quick, fun way to create apps
 User testi...
+
@pamasaur
thewebivore.com
Thank you!
Upcoming SlideShare
Loading in …5
×

Prototyping à la Node with Express (at NationJS)

548 views

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
548
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
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 thewebivore.com
    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  Mixture.io  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  http://expressjs.com/
    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 http://www.nngroup.com/articles/ten-usability-heuristics/
    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 thewebivore.com Thank you!

    ×