Mockup prototyping with HTML, CSS and JavaScript.

Quick, efficient, keeping everyone happy.

If there is one thing you will encounter as a usability tester, it's that even small changes to the interface of Anymeta can eat away a considerable amount of time from both you and the front-end developers.

Enlarge

Mockup screen of the add organisation wizard. - The layout is practically the same as the original. Just without all the smooth edges and eyecandy.

When you want to test interface changes in Anymeta, you can't always ask a front-ender to make the appropriate modifications. The front-enders simply don't have enough time to implement every change you want to test. [Remember, they are very busy bees!] In my case, if I had to go to a front-ender to ask for a change in the Anymeta wizards, chances are their hands are probably full.

This is where mockup prototyping comes in.

Mockups are an inexpensive and time-saving way to test if your solutions to usability issues are working like they should. With some basic HTML, CSS and JavaScript knowledge you can easily recreate most parts of Anymeta.

Recreate the part of the interface you would like to test as a dummy. This means that it doesn't actually process any data and perform any functionality; it just looks that way.

When you're ready for testing, just let the user work through it as if it were the real thing. Most of the time, the usability issues you find in the mockups are also there in the real thing.

This process of prototyping your design is quite advantageous. Because mockups are only a visual representation of your product, it's easier to build and change. This way, you save time between making changes and testing them.

After each test round, you can quickly fine-tune the prototype yourself. This gives you the chance to work out most of the flaws before you pass it on to the front-enders. This results in less time spent bugging front-enders to fix usability issues and keeps your project manager happy.