A Great UI is Invisible

A user interface that is invisible and that provides seamless interaction possibilities will help the user focus on their goals and direct them to what they need.

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.

opencoach_carosel_nav

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

http://dribbble.com/shots/560911-IMG0007

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

http://dribbble.com/shots/890759-Ui-Kit-Metro

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

http://dribbble.com/shots/731563-Music-player

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

http://dribbble.com/shots/825856-Bobo-Profile-Page

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

http://dribbble.com/shots/510911-Inside-Photo-album-iPad-UI-UX-iOS

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.

Previous:
Next:

Tagged with:

Patrick is a UX Designer at Instructure (Canvas LMS) by day, freelancer and UX consultant by night. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

View all contributions by

Website: http://patrick-cox.com

Related Articles

Feedback 52

Comments are closed.
  1. 1

    I think that Facebook and Google and the like have taken this advice far too literally when they actually made many of their buttons INVISIBLE. That is NOT intuitive nor useful. As an interface designer as well, I understand the idea of a metaphorically ‘invisible’ UI, however we must not go to the same extremes as Facebook and Google. The latter have taken a few steps back since then, but their UI’s change all the time.

    Right now, Facebook’s edit buttons remain invisible until you mouse-over them, and as many of them toggle a menu, on a slow PC or connections the user ends up both opening and closing the menus accidentally. Why is it that such awful design has remained for so long? I think it’s that users in the demographic Facebook thrives from are more than willing to just ‘deal with it’ if it means they can still get their Facebook crack.

    That usual people don’t care what makes a UI great, is something which has always exasperated me.

    There’s nothing wrong with buttons though. Buttons are how we interface with real world objects every day. It is a logical and easily understood metaphor, and when it’s not there, and instead are a bunch of seemingly inactive icons which I must mouse-over to make come to life or tell me what they do, that’s time-wasting and irritating.

    Buttons might be ugly and heavyhanded, but the maxim that a UI should be invisible need not have any bearing on visual style. It’s about how little time the user requires to see the UI, identify its elements, understand them and start being productive.

  2. 2

    To the point indeed. But one thing that I’ve always wondered about is why I, and most of my friends, switched from icq to msn one day in the past. I think that somehow it must be related to – not only to the ease – but also the design of the application that is offered and the emotional feeling that it gives the user.
    Although I agree with many points in your article, I also believe that many users care about the design of a site, despite the fact that they are not always aware of the fact that they do. But perhaps what matters most is the context in which a website is offered; eg. a company or even blog website vs a social network. I think that for a part it depends whether your website should be a source of information, or if the visit should be an experience on its own.
    But these are only my thoughts.

  3. 3

    You said the following: “a great user interface design should not be usable, but invisible.”. But having a usable website doesnt mean its not invisible. If you website is so usable that users can directly find what they need, and everything is self-explaining, then this is a very usable website, and at the same time the user is not paying attention to the design because he has no trouble achieving his goal. So I think having a usable and invisible website is best.

    • 4

      I agree with you. That is what I was trying to say and maybe didn’t phrase it correctly…. “invisible” doesn’t meant that the interface doesn’t exist, “invisible” is exactly what you said, the site is so usable that the user doesn’t know its there. The user doesn’t have to know how to use the interface, they just use it. You hit the nail right on the head. Thanks!

  4. 5

    Great post ,
    love to read , like the design for forgiveness,
    will try this in my blog.
    Thanks

Comments are closed.