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.

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!