SlideShare una empresa de Scribd logo
1 de 29
+
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 be
replicated or learned from.
Source: ye olde Wikipedia
+
“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, Illustrator …)
 … and lots more
+
… 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 Understanding Express.js from Evan
Hahn
+
User Testing
+
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
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 testing is fast, cheap, and you can do it!
+
@pamasaur
thewebivore.com
Thank you!

Más contenido relacionado

Más de pamselle (12)

WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Session
 
Power Spriting With Compass
Power Spriting With CompassPower Spriting With Compass
Power Spriting With Compass
 
Aylin Caliskan: Quantifying the Translator Effect: Identifying authors and ma...
Aylin Caliskan: Quantifying the Translator Effect: Identifying authors and ma...Aylin Caliskan: Quantifying the Translator Effect: Identifying authors and ma...
Aylin Caliskan: Quantifying the Translator Effect: Identifying authors and ma...
 
Sadia Afroz: Detecting Hoaxes, Frauds, and Deception in Writing Style Online
Sadia Afroz: Detecting Hoaxes, Frauds, and Deception in Writing Style Online  Sadia Afroz: Detecting Hoaxes, Frauds, and Deception in Writing Style Online
Sadia Afroz: Detecting Hoaxes, Frauds, and Deception in Writing Style Online
 
Kamelia Aryafar: Musical Genre Classification Using Sparsity-Eager Support Ve...
Kamelia Aryafar: Musical Genre Classification Using Sparsity-Eager Support Ve...Kamelia Aryafar: Musical Genre Classification Using Sparsity-Eager Support Ve...
Kamelia Aryafar: Musical Genre Classification Using Sparsity-Eager Support Ve...
 
GDI WordPress 4 January 2012 (white)
GDI WordPress 4 January 2012 (white)GDI WordPress 4 January 2012 (white)
GDI WordPress 4 January 2012 (white)
 
GDI WordPress 4 January 2012
GDI WordPress 4 January 2012GDI WordPress 4 January 2012
GDI WordPress 4 January 2012
 
GDI WordPress 3 January 2012 (white background)
GDI WordPress 3 January 2012 (white background)GDI WordPress 3 January 2012 (white background)
GDI WordPress 3 January 2012 (white background)
 
GDI WordPress 3 January 2012
GDI WordPress 3 January 2012GDI WordPress 3 January 2012
GDI WordPress 3 January 2012
 
GDI WordPress 2 January 2012
GDI WordPress 2 January 2012 GDI WordPress 2 January 2012
GDI WordPress 2 January 2012
 
Gdi word press_2
Gdi word press_2Gdi word press_2
Gdi word press_2
 
GDI WordPress 1 January 2012
GDI WordPress 1 January 2012GDI WordPress 1 January 2012
GDI WordPress 1 January 2012
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 

Prototyping à la Node with Express (at NationJS)

Notas del editor

  1. Hi! I’m pam, etc.I’m going to talk about two things here
  2. Okay, maybe secretly three things
  3. A prototype is something EARLY to TEST or something to LEARN from
  4. TEST*2/LEARNCan talk about the second two in the Q&A if you like
  5. 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!
  6. 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.
  7. 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.
  8. JessicaIvins talks about UUD, check out her slides for some resources.
  9. Can’t advocate for who you don’t know The most direct route. You have to talk to them.
  10. My tips for user testing
  11. 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
  12. "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
  13. Look for emotions. Anger is a very informative emotions.Mark Dominus!
  14. 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
  15. If we have some time, I’m happy to answer questions, like other kinds of prototypes