Quick mockups

Making a quick physical mockup before you make a more functional prototype can, in a lot of cases, save you a lot of time and wasted development. Even if its made out of cardboard, it still gives you a feeling for the size of the device, how you and other people will hold it, a feel for where the buttons should be placed and their size. If you do have access to an FDM machine and the 3D model then by all means make something more realistic and sturdy. But if not there is a lot of insight that can be gained from cutting out some cardboard and drawing on the UI, and handing it around a few colleagues.

Around a month ago I was given a rough functional spec and a render of a product. I was given the job to design the UIs for the device and the desktop software. First task which was required within the week (being Tuesday already) was to specify what buttons were required and what would be displayed on the small LCD.

I began by sitting down with the people involved with the project to get up to speed as fast as possible with the product along with who it was targeted towards and any competitor products they liked. After reviewing all the material and playing with similar other products, I started sketching a few ideas for the UI trying to limit the number of modes, keeping the functionality clean and simple, and the key functions as accessible as possible. Eventually I come up with a design that everyone liked. The design was then sent off to become the first prototype. As I was pressed for time I had skipped the quick mockup stage. A mistake I will not be forgetting soon, a few hours would have saved a few weeks in development.

One month later I received the prototype. It worked great until I switched it into the second mode which made me naturally change my grip and made the left/right arrows become up/down which did not make sense in the UI. In addition because the device is designed to hold in one hand, users with slightly smaller hands found it difficult to reach the top quick keys with their thumb. There were also a few other small issues.

I’m sure a cardboard mockup would have identified pretty much all of these mistakes leaving us to focus on the next round of improvements with the prototype. Don’t make the same mistake as I did, take the time to do a quick mockup and pass it around a few colleagues and friends.