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
Prototyping tools
- 910