Recommended tools/processes for UX prototyping? [closed]

Question

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 Stack UX community approach the same goals. Specifically, what tools and processes have you found to be effective in prototyping a quality user experience?

Answer 1

It sounds like you're doing HTML prototyping with Javascript for the functionality iterations (Backbone.js wheee!) so let me approach it from that point of view.

First off, doing things in HTML allows you to focus on the right details of the user experience, whereas with a tool like Axure or paper prototyping you're really zooming out too much to a conceptual level. That's not the right level of detail for iterating on the finer details of how something works. You also can't do things you're trying to do now with those approaches (like data persistency), whereas with HTML and Javascript it's trivial.

I think you're right in the sweet spot in terms of iterating with users and using a quick HTML/JS prototype to change things up based on feedback. That's great. But I'm sure you're bumping into some productivity issues as well, like how to quickly and easily get your updated prototype in front of the test group.

We faced the same problems, so we developed a tool to solve it. Instead of working locally and then committing things to a Git repo or something and having to publish it somewhere, our tool is web-based and contains a HTML/CSS/JS editor in the browser. As a result we now just work from there and everything we save is live instantly.

This is been really significant in terms of how it's changed our approach to prototyping. Now we can be talking to a client on the phone, change something, hit save, and ask them to refresh their browser to see what happened. And we can group usability tests into a few hours spanning several iterations rather than having to invite participants across multiple days. It's a huge efficiency boost.

I realise this sounds very product pitchy but I really believe that when you're doing HTML prototyping our approach is the way to go. It's called Handcraft. Let me know if it works for you.

Answer 2

This is arguably the best way to do rapid prototyping. Paper-based prototypes are good to evaluate taxonomy and also for evaluating if consumers will understand what the product is supposed to do and how it might work. FUnctional prototyping forces you to really think through the executional details and allows you to refine the experience paths.

The only downsides to this approach are a) it can get expensive and time-consuming to make revisions and b) you may get locked into an UI design that is essentially being driven by technology vs. by a designer.

Answer 3

That sounds like a lot of work for the stage you are at. I'd be inclined to take it back to paper and pencil for wireframing and prototyping the different interactions and workflows.

I'd then mock something up in balsamiq or inkscape (my preferred tools) and string some basic interaction together using html pages in a browser with screen sized images, and image maps to make buttons etc, clickable. I find this to be a quick and flexible process that I can make as low or high fidelity as I need.

That just happens to be a method that works for me and one that I have found clients really like. You'll probably find lots of people have their own methods that work for them.

Answer 4

I recently read an interesting article that reviewed some popular prototyping apps that differed in levels of fidelity. The user comments also brought up some good suggestions, such as iRise, Keynote, Archetype, Fireworks, and more.

http://id8.com/2011/08/15/comparing-digital-prototyping-tools/

Answer 5

Try using PowerPoint or any presentation tools that support hyperlinks. For interactive prototyping and animation, my take is on MS Expression Blend or Flash.

Answer 6

Try Axure: http://www.axure.com/

With this you can generate working html prototypes easily.