Designing Progress
Throw out your ruler
This article was originally published on The Layout, a magazine about the craft of UI engineering by Lucas Rocha.
Even when designing for the screen, we still adopt many metaphors and patterns of print design: from newspapers, magazines, leaflets, novels, and on. We do this for good reasons, mostly. After all, the ecosystem of print has been around for hundreds of years, heavily researched and monetized.
Fair enough: there are many well-established and thought-out conventions that can perfectly be carried over to the pixel screen—like margins, fonts, pictures, and words. But we need to be aware of two very important approaches that represent pivotal differences of how we consume screen media and interact with them, as opposed to how we engage with print.
Publishing on the screen is not linear
Once printed, a monthly magazine will be the same magazine, with the same content and the same layout until its disintegration, brought about either by natural decay or by the teeth of your dog.
Once you reveal something on a screen, though, it will change. Content might be improved, a database entry updated, or the list of user comments continues to grow. Eventually, the user agent or the design will change fundamentally, and a couple of months in, there might not be much left of the original publication.
Interaction is not linear
Most books (yes, those with actual pages made of trees) are progressively read from the first to the last page. It’s exactly the linear process the author designed it to be. Some people might cheat by skipping a few sections or having a quick peek at the end, they might fall asleep and not know where to pick up again. But, this exception left aside, all content is placed on fixed pages, one hugging the other, in an unchanging order.
The complete opposite is true for web and software design. Your product might have a clear starting point and maybe it even has a clear ending. But there’s no telling what happens in between: how users interact with and consume your content, how they operate the functions, and where they hop in and out of the experience after adding and deleting content, after changing quality or mathematical values.
Non-linear Design
With those two principles in mind, we can clearly see that screen and interface design should never be focused on just one fixed state. A better way to deal with possible complexity is to approach visual screen design by considering a screen or part of a screen in interaction with its moving and scaling elements.
A very common problem for designers of the classical school is a strong focus on individual elements. Sure, we care about the details. They make the difference in the end. But what is a perfectly styled button with a beautiful gradient, gentle highlights, and just the right drop shadow opacity worth, if you figure out you don’t need it in the end? Better spend time refining the general layout after an orientation change, or improve the horrible error message that blocks all relevant information.
The baseline is: there’s hardly a use case within screen design where we have complete control over everything that happens behind the glass. We need to embrace those constraints and create user interfaces with change and variation in mind, always conscious of the big picture. There’s a context to every image, every headline, every icon, and every padding. That context is a combination of your user, her screen, and your interface.