Prototyping tools

i213 fall 2015

warning: unsolicited advice

Zooming out:

The point of prototyping is to learn something,

NOT to make a beautiful, polished, finished application

You prototype to learn...

 

  • about your users & their needs
  • about how you can help them
  • about how well your tool is serving them

You DO NOT prototype to...

 

  • finalize your graphic design
  • "prove" to your users that your tool is "good"
  • NOR to prove to yourself that your tool is "good"

Hi-fi prototypes.....

  • sanity-check your assumptions!
  • surface things you still don't know!
  • THEN you can build something.

DOs

DONTs

DO
DONT
 

Generate a lot of designs

Arbitrate over the "best" design. (What do you know?)

DO
DONT
 

Optimize for good user feedback

Make an artifact of such unspeakable beauty that users won't criticize it.

DO
DONT
 

Make a safe space users to give you feedback.

Make users afraid of hurting your feelings.

DO
DONT
 

Have some remove from your "designer self" when doing UX research.

Advocate for your design during your user evaluations. What good is that?

DO
DONT
 

See what users do with your interface.

Explain your interface. (Seriously. Why do you think we're doing this?)

Recommendations for USING prototypes to your advantage

Using prototypes to your advantage

  • Get the user to give you honest feedback. This isn't their inclination.
    • Trashy-looking prototypes get trashed - this is good!
    • If it all possible, "We didn't build this, we're testing it on behalf of....." 
  • Don't tell your users what to do.
  • Advocate for the user, not for your interface.

Criteria for a good prototyping tool

  • What will help you get the best feedback?
    • Most beautiful? Maybe not....
  • What will let you generate different patterns?
  •  Reconfigure them easily
  • Generic life advice: The best tool is the one you already know!

Balsamiq

  • webapp editor available
  • classic tool
  • limited emulation
  • unrealistic mockups (a + to me)
  • we have a license -- email me/tap

Justinmind

  • 30-day full trial
  • nice web-based emulator 
  • supports Google Glass
  • interface similar to Illustrator/Photoshop
  • WARNING: makes beautiful mockups

InVision

  • we have an edu license - 56-73-13-19
  • good collaboration tools
  • support from Nadav Reis - nadav@invisionapp.com

Briefs

  • decent trial (limited to 10 scenes)
  • good emulators 
  • simpler interface, more like Keynote/Powerpoint

Pixate

  • free for students (see above link)
  • native iOS/Android prototyping

Flinto

  • 30 free trial
  • installs on iOS 
  • works from PNGs - good if you want to make your screen designs in some other software

LightTable

  • LISP-style REPL editor for HTML/CSS
  • Live reloading while you edit
  • Don't use this unless you're extremely fluent in HTML/CSS

Be critical

  • Find the problems in your solutions
    • Solve those too
  • No tradeoffs?
    • Not likely
  • No questions?
    • Who knows everything?
  • Write those down, too

via rich hickey - hammock-driven development

Prototyping tools

By nick merrill