Don't Be Interface Incompetent

We’ve all experienced it. You open a website or an app for the first time and immediately feel confused about where to start. Not a great sign.

After some searching, you find the option to “create a new account” at the top corner in tiny print, and you attempt to follow the registration form, filling in the required information. You click “submit,” only to have an error message pop up asking you to choose a more secure password. You click “ok,” the page reloads, and you realize, much to your frustration, that the entire form has been cleared and you must reenter all of your information, PLUS an iron-clad password. Wheee! So much fun.

Once you finally get your account set up, you’re rerouted to the home screen. A blank, cold, uninviting home screen. You have no idea what to do next. The very page that should spur you to engagement and action makes you want to run for the online hills, because without reassurance that you can make this site or app work for you, you feel overwhelmed and stuck. You’re not sure where to start, and after poking around at menu options for a few minutes, you don’t start, and you close your laptop or turn off your mobile device and move your focus to something (anything) else. Weeks go by, and that app or site ends up getting deleted or shoved into a folder.

All of these scenarios are examples of shoddy user-interface design. And while there’s no excuse for this type of workmanship, sites and apps just like this are everywhere. Why? Because they were designed by interface-incompetent designers.

DON’T BE AN INTERFACE INCOMPETENT DESIGNER.

Incompetent interface design is the direct result of relying too much on a computer to do the heavy lifting when it comes to user functionality. Computers speak in code and are indifferent to the experiences warm-blooded beings have with an interface. They don’t know how to account for user error and imperfection. This is where the need for User Experience Design comes into play.

Great UI teams consider all possible scenarios when it comes to user function, user error, and internet and server problems. They think in terms of what could happen when everyday Janes get their hands on the interface, and they cover all their bases. Only then is an interface well rounded and ready for use by the public.

There are four main layers to a great interface, and each layer has to be considered. Along the way, potential outcomes must be accounted for before an interface is ready to launch. Each of these layers must then come together and work seamlessly for a consumer to have a positive user experience. Let’s take a minute and focus on each layer individually.

THE BLANK-SLATE LAYER

Buffer’s Sign-in Screen

Every user has a first-time encounter with your interface. This layer refers to an interface in its virgin form, generic and ready to be personalized. This is your greatest chance to impact your users. It’s their very first impression, and it sets the tone for their overall experience. The blank slate should not, in reality, be blank. It should be inviting, should nudge the user to action, grab their eye and their interest, and assure them of the value they will be getting from your service or product.

THE “UH-OH” LAYER

An error message on Netflix

I call it the “uh-oh” layer because my grandmother or kids may read this, and it’s more appropriate for print than the words most of us probably say through gritted teeth when we run into errors on an interface. When it comes to computers, it’s inevitable that things are going to go wrong. Again, computers speak code, and great designers attempt to cover their bases and foresee potential problems to avoid mistakes and error messages, but the reality is that things will go wrong. It’s more a question of when, not if. I think we should be asking a different question, though: how will my interface handle the errors that are most definitely going to come its way? For instance, ideal interfaces handle errors without wiping out any data the customer has already entered. Your page shouldn’t have to reload to process the error.

Great designers make it a point for their interfaces to handle problematic scenarios in nimble and attentive ways. Error messaging should be easily understood by the user. Think, “What would I want someone to tell me when things go wrong?” Your users are probably not well-versed in computer code, so speak plain English, and use verbiage that reassures them of the error’s resolution.

THE “WE’RE-GETTING-THERE” LAYER

LinkedIn showing profile completeness

This is the layer that addresses partially-completed profiles and pages with only a row or two of data (basically anytime an interface is being used at less than 100% capability). The page is no longer a blank slate, but it’s pretty sparsely populated. The user is engaged, but maybe she’s new and hasn’t acquired a lot of history or stored data. How do you position your interface so that the consumer feels engaged with the site/app, while at the same time encouraging her on toward making progress to better personalize her experience?

Your number-one job in this situation is to make sure the interface keeps people from getting frustrated or disheartened and walking away. You must point your users toward the full value offered to them in your product, and convince them that it’s worth their time and legwork to stick with the sometimes-tedious tasks at hand. If you can do this creatively and clearly, you’ll retain users who might otherwise bail.

THE LOADING LAYER

An app showing progressive loading of elements.

Last, but not least, we examine the infamous loading layer. Who likes to wait on content to load? Yeah, me neither. So how does an interface designer keep users’ attention while data is processing and pages are loading? How do you represent that you’re gathering data? Do you draw the focus to the content that isn’t there, which leads your users to start counting time as it’s ticking by?

Your design goal should be to capture the user’s attention by focusing on the indication of progress. Focusing on the indicators of progress and not the progress itself makes it feel more likely that things are in motion to get the user to their end goal.

There are many ways to accomplish this (skeleton screens are an especially hot trend right now). You must know your target audience and cater to his/her desires and needs. Loading should take place optimistically. When success is assumed, loading appears to happen more rapidly, and your customer feels like time has passed quickly.

FOUR QUALITY LAYERS = ONE SUCCESSFUL INTERFACE

When the four layers I mentioned come together, with each functioning well individually and collectively, the result is one very successful interface. Great designers don’t focus solely on the overall successful interface; they study each layer carefully and do their best to account for every scenario that might come its way. Each layer should point users back to the overarching purpose of the interface, and should do so in a clear way. Also consider how you can deal with customers in an empathetic and friendly way when “uh-ohs” come along, because, trust me, if I know anything, it’s this: the uh-ohs will come along.

The question is: how will your interface handle them?