Adding motion to improve UI
In my latest work on Divided, I’ve been thinking about how motion affects the user experience. Two primary things have sprung out at me:
- Motion makes things feel more physical.
- Motion attracts the eye.
I’ve tried to bring both of these ideas into the next update of Divided, and I wanted to talk a bit about my thought processes as I’ve been building the update.
Motion makes things feel more physical
Smartphones across the spectrum, starting with the iPhone in 2007, have been adding a certain physicality to their interfaces. I’m not talking about the sometime excesses of skeuomorphism, but instead the evocation of the feeling that you are using a physical object.
There are obvious gestures to this all over current smartphone interfaces, from the bounce-back of lists to the mere fact that you drag content rather than scrollbars.
More subtly, physicality is reinforced by the way the user interfaces work. Nothing appears from thin air; motion is omnipresent.
In “drill down” apps, like Mail, the interfaces slides from one pane to another. Each pane is pre-rendered, so it can slide in fully-formed as if it’s been waiting there all along. There are exceptions to this—for example, emails sometimes take a moment to render when you open them—and it’s testament to the rest of the UI that these feel slightly jarring.
Other examples from a quick look through my iPhone:
- You zoom into an app. The home screen zooms outwards and the app towards you, like it’s been waiting behind the home screen the whole time to come out and serve.
- A general push away from splash screens, which I’m guilty of, towards interfaces which appear to be in suspended animation on opening before springing to life.
- Even checkboxes have been replaced with switches—no checkmarks mysteriously appearing on tap.
The first version of Divided doesn’t play so well with this. There are several places in the UI where values or controls just appear from nowhere, and disappear back again. So I’ve tried to clean all these up.
Controls and values now, in the main, wait off-screen until they are needed and move into play when useful. A couple of things don’t: testing indicated the motion was too distracting. Even here, though, I’ve added motion to the disappearance which adds greatly to the feeling of physicality.
In addition to adding substance to the app, I’m hoping that they also inject some fun and personality into the application.
Motion attracts the eye
This is, of course, a two-edged sword. Motion can be used to attract your attention to something important, but it’s just as easy for it to become a distraction. Obviously I’ve tried to stay within the confines of the former.
In that vein, values slide in and out when you enter the enough information into the application to make them valid. In particular, when you’ve entered the bill total and a number of people to split the bill with, the amount each has to pay slides in. The idea is to attract your attention to the value you are probably wanting to know right now.
I’ve tried to extend this idea throughout the application, and the version currently with my testers comes with the question “have I gone to far?”.
My hope is that my increase in use of motion will increase the feeling of engaging with an object rather than using an app. Paying is dull, and injecting some entertainment into the process is the least I can try to do.