Quick interactive mockups for early usability testing [closed]

Question

I've completely fleshed out my idea for a mobile web app. I've created the mockups in Sketch 3, and have documentation of all the models and controller actions I need to make this app work.

I want to focus heavily on UX, so I'd like to quickly create an HTML/CSS prototype with full interactions so I can do usability testing, tweak and repeat before I get too deep into aesthetics, UI, data structures and all the other details that go into making a mobile web app.

I tried using D3.js a while back to make interactive mockups according to this article. Although, it became increasingly complex to setup every interaction.

I don't want to get too caught up in the details of making models, controllers and all the such (since I'll be using Rails for the app). So what tools would be best for making quick interactive mockups so I can focus most of my time on usability testing?

Answer 1

If you want to make quick mockups, you shouldn't focus on development and visual design yet.

1. Paper prototype

Drawing your ideas with pen and paper will allow you to try all sorts of layouts in a small amount of time. It's quick and it helps you to focus on the structure of your design.

With POP, you can quickly convert your sketched wireframes to a working prototype.

Test your wireframes.

Go to your target audience and let them navigate your wireframes. If they're unclear in this stage, you can go back to the drawing board without the waste of development hours.

2. Design

After making the perfect wireframe, you can start making a killer visual design which needs to improve the user experience. In this stage, you can finally focus on colors, fonts, animations, images and content with Sketch, Photoshop or other design tools (maybe after effects for motion designs).

Test your Design.

Go to your target audience again and test the visual designs to see if they like it

3. Development

This is the last stage of the iteration. Now you know that your structure and design is user friendly and makes the user happy, you can stretch your fingers and start developing.

Conclusion:

If you want to quickly test some ideas, use an app (like POP) that makes your wireframes interactive. But don't forget that testing should always be done at the end of every step.