Interface Design for Non-Interface Designers
Interface design requires a different mode of thinking than traditional design.
This may seem counterintuitive at first. After all, design is design – whatever the medium, it requires a similar focus on problem-solving and empathy for the user. Superficially, a website or app looks a lot like a print layout, but the core behavior towards each is fundamentally different. Interface design more closely resembles architecture or industrial design in that its results are meant to be used, not observed.
Lately, I’ve found myself frequently partnering with traditional designers on UI/UX projects. To help ease the transition between the different types of thinking, I’ve compiled a list of principles that differ between graphic/print design and their interactive counterpart. These are meant to be used as a quick-and-dirty guide for getting traditional designers up-to-speed on the tenets of interaction design. Here they are:
Think functionally, not visually.
Interface design is all about interactions. In fact, the aesthetic component is only important to the degree that it facilitates the product’s usefulness.
When working on UI/UX projects, the first consideration is how an interface will work. An attractive interface that’s frustrating to use is still a failure – the phrase “lipstick on a pig” comes to mind. The famous gestural interface from Minority Report is a perfect example. It’s gorgeous, but it must be exhausting to use. Horribly impractical.
On the other hand, there are plenty of examples of ugly interfaces that still function well, leading to products that are wildly successful. Think Reddit, Craigslist, and even Amazon.
Great interfaces start with well-designed interactions. The visual layer reinforces those interactions, providing visual cues and an accessible face to make them simpler and more approachable.
Design from the core interaction outwards.
It’s tempting to start designing from the homepage, or home screen, or whatever the user will see first. It’s better to identify the core of the product – its raison d’être, where users will be spending the most time – and design that first. Then, once that’s solid, build the paths the lead into it and away from it, and allow the design of that core interaction to inform the design of everything else.
The core interaction could be anything, from an article (on a blog or news site), a video (on a site like YouTube), or an action (like taking pictures in a camera app). Even beyond dictating the order in which you design a digital product, honing in on the core interaction is essential for understanding our users and building something goal-oriented and usable.
A deeper explanation of this principle, along with a process for implementing it, can be found here.
Design for a fluid canvas.
The screen size, device capabilities, pixel density, and user environment in which our work will be used is wildly unpredictable. That website you’re designing? Maybe it’ll be used on a widescreen monitor in a dark room, or maybe it’ll be used on an ancient Nokia phone on the EDGE network. Even apps, previously a bastion of predictability, are subject to the numerous screen sizes of Android and the split-screen multitasking (coming soon!) of iOS. It’s rare to find a project where the use cases are completely known.
Rather than designing pages, which will inevitably break as our canvas shrinks and grows, we should design modules that can be reconfigured and remixed into various layouts. Our work needs to bend so it doesn’t break. Interface design is less about crafting a unified whole than about designing a flexible system of typography, colors, grids, and textures that can be adapted on-the-fly for different uses. Our job is to define the relationships between design elements, creating a system rather than treating the layout as a discrete unit.
A method for creating modular systems is discussed in greater depth in Atomic Web Design, an article by Brad Frost.
Corollary: Don’t aim for pixel perfection.
Because the landscape is so unpredictable, it’s impossible for a website or app to match the original design 100% in all cases. While the final product may look exactly like the PSD in ideal circumstances, there’s no way it will match on every device and at every screen size.
Web development tends to follow the law of diminishing returns – once the broad strokes of the site are built, adding too many small details increase development time and file sizes well beyond their worth. As Harry Roberts writes in this presentation, “If we can achieve 80% of the design with 20% of the code, we should.”
Pixel perfection is a losing battle. The sooner you acknowledge that, the sooner you’ll regain your sanity.
Design for the biases of the medium.
Interactive, as with any medium, has its own set of capabilities and biases. For instance: it enables hyperlinked information and interaction, and it’s biased away from long-form thinking and towards shorter attention spans. It encourages distinct patterns of thought and behavior, and our interfaces should be designed with these predilections in mind.
Just as nobody would copy a book layout and try to use it for an album cover, we shouldn’t clone graphic or print design when creating something fundamentally interactive. Not only is it disingenuous, but it doesn’t play to the many advantages of the digital medium.
There’s plenty of literature about user interfaces and human/computer interaction, but you probably know the basics from your own experience. Think about your own time using websites and apps: you know immediately if it’s information overload, or if an interface is asking too much of your attention, or if a visual metaphor is too abstract.
When designing an interface, think about negative interactions you’ve had with similar products and design away from them. Use your own work incessantly – load the mock-ups on the correct device, have friends and coworkers test it, and get feedback from real users. It’s funny how many issues become obvious only when a design is tested in its native environment.
Emphasize the things that interfaces are particularly good at. If you have the choice between presenting information verbosely or concisely, go with the concise option. If you can skip the visual metaphor and just make something directly manipulable, go with that. If you can break information into multiple hyperlinked segments rather than one long piece of prose, do that. Design an interface that minimizes friction between itself and how people use the medium.