A Great UI is Invisible

A really well designed user interface is one that goes unnoticed by the user, whereas a poorly designed user interface forces the user to pay attention to it instead of the content. Users come to websites in order to achieve a goal: buy a new book, learn about jQuery, share an article with friends, find new music, write a novel or just find the nearest Target. Users don’t come to play with your interface design. In fact, users don’t care about your interface. For years the desktop paradigm and the lack of interactive tools have made people think about user interfaces, how they work and what makes some designs better or worse; but do we really want our users caring about all this stuff?

Users have become too familiar with user interface patterns and user interface components — a user really doesn’t even want to know or even care to know what these things are. Over the years web designers have spent hundreds if not thousands of hours playing with button colors, drop shadows, borders and gradients in order to make the UI more usable and pretty. But really, the end goal of a great user interface design should not be usable, but invisible.

If you haven’t heard, mobile devices are kind of a big deal these days. The multi-touch device has cracked open the idea that user interfaces are a series of clicks and sequences that allow manipulation of content — mobile devices allow more natural user interaction between the human and the content embedded on the device. These Natural User Interfaces (NUI) are more “natural” for a variety of reasons, but, direct manipulation of content and the lack of antiquated metaphors (the desktop) allow these devices to be super easy to use because their interfaces are almost invisible.

But we still work on desktop and laptop computers, we still view web sites and use web applications that can’t always take advantage of this new, more natural interface design with all the wonderful multi-touchy stuff that makes these devices so much fun to use. So, because we aren’t quite there yet, do we continue to create old, “get in the way” interface components? We shouldn’t. The goal of an invisible interface should be the goal of every UI designer and developer.

UIs, not Hurdles

The user interface shouldn’t be a hurdle to content or the user’s end goal. The user shouldn’t have to jump over UI traps and poorly organized navigations in order to achieve their goals. Over the years we’ve used and invented some real UI hurdles that, on the surface, feel as though they are solving a problem when they are just adding more user burden. The breadcrumb is a great example of this. Often we think a bread crumb is a great way to let the user know where they have been in the app, but that is mostly just an added UI component that is not always necessary in a properly designed user experience.

While the breadcrumb doesn’t directly burden the user, it takes up screen real estate that in most cases should be used to further the user goals and display content. Instead of adding a breadcrumb to overcome a navigation problem, address the navigational problem. Some UI problems are all too often “fixed” by adding a new component, but too many of these unnecessary components start to add up and eventually you have a UI that is riddled with hurdles. How can a UI become invisible when you just keep adding more UI components to it?

Fix the Problem

This really ties into what we just talked about, but building an invisible UI means that you’ll need to solve the deeper problems, you’ll need to actually fix what is broken. I have a little bit of a back problem and sure, popping my back and taking Ibuprofen helps treat the pain, but it doesn’t fix the actual problem; I don’t exercise enough, I tend to slouch and I’m about as flexible as a rock. We do the same thing with UI problems. As we design and build web sites and apps we discover weird things in our sites and interfaces. A lot of the time we just react and throw something superficial on them to fix the problem when most of the time the problem lies somewhere deep down in the interface. We just stop the bleeding.

Generally, ‘stopping the bleeding’ has become the best practice for most of us because we’ve learned to pick our battles with project managers, site owners, stakeholders, time constraints or just plain laziness. We tend to right that off as a way to do some user or AB testing “Well, I know it’s got some issues but we’ll see if they are real problems when we user test.” That might not be the best approach if we are trying to design for invisibility. Having a completely transparent interface means solving those deeper design and user issues so that they don’t rear their ugly heads and become hurdles for users to trip over.

Design for Forgiveness

An attribute of an invisible interface is that it’s generally very forgiving. Natural user interfaces are more open to exploration by the nature of touch, they are also less prone to throw errors when the user finds a dead end and more prone to give a user another direction.

Forgiving the user means that we don’t punish them when they make mistakes. User mistakes are more often the result of the user not knowing what to expect. We tend to blame the user for making mistakes and we punish them with big warnings and errors. A more invisible UI refrains from punishing the user when they fall into a trap. Rather than displaying an error, a well designed UI predicts where there is a higher chance of user error in the app and provides a way for the mistake to be resolved or even deflected.

Forgiveness also means that the site or app allows the user to break it. It’s a cheesy thing, but the most valuable lesson is the one learned after you broke your Mothers antique vase, glued it back together and then got caught because you glued your fingers together doing so. The user learns more about the app when they are allowed to fix their mistakes if they make them — hopefully without a big red error icon and some poorly written, non-readable text.

Goals First

This is pretty much just interaction design 101, it’s a Cooper building block, but since it still doesn’t seem to happen much I think it warrants a little mention — goal-oriented design. Your user interface should be designed around the goals of the users. Not what the user wants or what the user prefers, hell, it’s not even about what you want or what you would prefer, it’s about discovering the user needs to accomplish and meet the expectations by getting them there. It’s funny, users have a great idea on what they want to use, but they really don’t have any idea of what they need. It’s your job to figure out the need not the want. The ‘want’ just creates bloated, hurdle ridden interfaces that just annoy the user.

Find out the goals and allow your user to get there as quickly as possible, they don’t really care about anything else so if you can get them to their destination as quickly as possible that is reward enough. You don’t need to design some pretty interface if the user can quickly achieve their goal. Avoid over designing the UI to compensate for poor goal oriented design.

Real Consistency

Okay, so in the UX world, we talk about consistency a lot and rightfully so. Consistency is a big deal when it comes to interface designs. If your UI components are all in the same place, have the same color and function the say way then your interface will disappear slowly over time… kind of like Marty McFly. But just simply putting all your call-to-action buttons in the same place on every page or calling a particular action the same thing through the app might not solve the consistency problem.

Another thing we tend to do in UX design is use constant and familiar things from other apps or sites in our own apps. I’ve written about this in the past about how familiar surroundings can make an interface more comfortable. But when we are trying to accomplish an invisible interface design than instead of being consistent for consistency’s sake might still not be good enough. An invisible interface has “real consistency“, meaning that not only are components, values, links, and other data presented consistently throughout the app, they are also consistent in context and meaning.

For example, you may notice that a lot of other apps put the login button or link in the top right corner of the app and so you just figure since other more popular apps use it, it can’t be bad. But maybe in your app it doesn’t make sense to have it there. Instead of continuing to build a flawed interface, put your components where they belong in your app and then continue the consistency of that throughout the app.

Conclusion: Inspire the User

The last thing any really well designed and completely invisible interface should do is inspire the user. When the user interface gets out of the user’s way and simply directs them to what they need, the user can focus on the their goals for using the application.

Interfaces should provide seamless interactions with the data and content and inspire the user to build a better relationship with it. Users do enjoy navigating a clever UI and in some cases have fun using them, but most often a user is inspired by an interface that isn’t there at all.