Android and iOS - Prototyping - Part 1

Mocking up designs on mobile platforms

Building design prototypes might seem like the kind of thing that massive design studios do, not tiny indie programmers working out of a wheelie bin. But in reality, prototyping is an invaluable step for all designers, big and small. It’s amazing how much time you can save by fleshing out early designs into prototypes. Resist
the temptation to plough headlong into battle – not every flaw in your software can be fixed at the late testing stage. It’s essential to get 95% of the design nailed before you touch a line of code. That leaves 5% to be polished to a deep shine when your app reaches the first test users. Of course, you might choose to take a risk, forget the prototyping, and go with your gut – and, to be honest, sometimes this will work out just fine. However, you might find (as we have on occasions) that your idea is fundamentally flawed, and it’s only when you’re way too far down the development process that you realise the only option is to bail out. Buy by that point, you’ve spent too much time, too much money and, little by little, you’ve gone insane.

So what do we mean by prototyping?

In its most basic form, prototyping is the simple process of sketching out your app design on pieces of paper.
Don’t reach for Photoshop – you’ll get lost in a million little details and risk designing your interface for use with a mouse. Instead, get a good old-fashioned sketch pad and pencil, and start drawing. Use your iPad to make a perfect frame for your designs. Lay the iPad down on a sheet of paper and draw around the edge, now remove the iPad and approximate the bevel width, sketching this onto your diagram. When you think you have something that works, glue the sketch to some cardboard you’ve cut out to the size of the iPad. Try the interface out.

How does it feel?

If it feels good, the next stage is to scan the sketch, create rough graphics in Photoshop, then export that file
as a static photo to test on actual iPad hardware in assessing the look and feel of your app. Once you have the design on the iPad, pretend you are the user and consider a few things:
Does the app work from a crude, non-functioning perspective?
Does it make ergonomic sense?
How could you tweak, simplify and improve it?

This might be a good point to contact a programmer, show them your designs and get a sense of whether the design is
a) possible to code
b) expensive to code.

Or, if you’re working for a customer, then check back with them to make sure the designs meet their expectations for this project. Once the programmer has agree that your designs are fiesable, you will need to export every graphics asset as a seperate file. Any component that moves in the software will be saved out, usually as a PNG with alpha (transparency) included - this gives the graphic complete freedom of motion.

The importance of user testing

Your instinct will be to blame the user when they struggle to use your app. But, the truth is - user error does not exist! There is no such thing as user error, only bad design.

Before you cry out in pain, consider this: Good design will guide a user towards the correct interactions, it will anticipate mistakes and adjust the course of the interaction to put the user back on track. It will not punish a user nor cause unexpected user behaviour.

It may be that you have a fierce and brilliant mind - one that can imitate the behaviour of every type of user and therefore foresee problems they will run into - if so, you don’t need user testing; you can play the role of both the designer and the user. But, you would be the first such human. What’s more likely is that you will need to observe real users interacting with your app.

Watching a user failing turns potential difficulties into real, tangible obstacles. You cannot deny the terrible reality of a user floundering while navigating your app. You will observe first-hand how what you thought were obvious routes through the app were only obvious to you and nobody else.

Don’t worry, this is a fairly common experience. The important thing is to learn from these observations and improve your app design.

Historically, computer experts have been quick to blame computer users and their naivety or even stupidity. But, you may have noticed that the average computer user is capable of fairly complex tasks: walking while in deep thought, holding simultaneous conversations, perhaps even rock-climbing. If they fail to use your app properly, the correct response is to figure out what you did wrong. Unless your app is somehow more advanced than human language, or deeper than the mystery of love, you have no excuse. The user is not at fault, your app is. Fix it.

Read Next - Android and iOS - Prototyping - Part 2