Ask HN: Recommended tools/processes for UX prototyping?

1 points by capelio 14y ago ↗ HN

Long time lurker, first time poster.

I'm prototyping the user experience for a web app project, iterating with users twice a week. I've been testing different approaches (modals vs new pages, edit buttons vs hover effects, etc) by putting users in the driver's seat, observing their reactions and gathering their feedback. So far, I've been using jQuery, Backbone.js and Express to test different workflows and UI elements, as well as provide a simple data persistence layer. In my quest to rapidly prototype a solution against real world extractions, however, my gut tells me there ought to be a better way.

For those that have a spare moment, I'd love to hear how others in the HN community approach the same goals. Specifically, what tools and processes have you found to be effective in prototyping a quality user experience?

2 comments

[ 2.9 ms ] story [ 11.5 ms ] thread

arkitaip 14y ago ↗

it depends on where you are in the dev process. If you find yourself in the early stages, paper prototyping is very powerful, easy and dirt cheap. By keeping it as simple as possible, you don't get so emotionally invested in your designs and you signal to your users that major changes are perfectly ok (with hi-fi prototyping users often make fewer and smaller change requests). There's a method to it but it's as lightweight as you'd imagine. Carolyn Snyder has written THE book on paper prototyping http://www.paperprototyping.com/

I mostly use Balsamiq Mockups. It's a lo-fi prototyping tool (software based) but it makes prototyping much faster. Prototypes, or mockups as they are called, are actually rendered as hand drawn sketches so you don't bother with pixel perfection. It's actually quite fun to use and becomes somewhat addictive. One drawback is that prototyping GUI changes and interactivity is difficult. http://balsamiq.com/products/mockups

I've also used Pencil, a prototyping plugin for firefox. It's not as polished as the other Balsamiq Mockups but it's free and covers the basics. http://pencil.evolus.vn/en-US/Home.aspx

garry 14y ago ↗

Omnigraffle is phenomenal as well. I believe in using some level of fidelity in mockups. Omnigraffle gives you all the tools to quickly line up elements and try on layouts / copy really fast. It's the essential tool in my app bar that helps me handle helping 60+ startups with design simultaneously.