The core principles of UI design

This is an excerpt from Fundamental UI Design, an InVision e-course by Jane Portman.

When I was in a law school many years ago, each course started with a list of definitions and core principles. At first we thought it was pure manifestation, or just a need to start from something in a new class. But then a professor explained it to us.

The legal field is documented thoroughly—more thoroughly than UI design, that’s for sure. But real life can be rather surprising. There are many situations when the legal norms are contradicting each other or downright missing.

Core principles exist precisely for such situations. These principles should help you make decisions when everything else is vague and uncertain.

Ever since, I studied the principles with extra care and interest.

UI design has core principles, too. Whenever in doubt, remember them and let them be your guiding light.

Clarity

Do you find it hard to walk with your eyes closed? The lack of information suddenly makes you shy and slow even though your legs function as well as before.

Same with a poorly designed app. In order to operate the app well, the user should be well-informed and confident. Clarity serves both.

At any place in your app, a few things should be perfectly clear to the user:

• What just happened
• Where you are
• What you can do
• What will happen when you do it
• What just happened, etc.—rinse and repeat

Clarity goes side-by-side with simplicity. I’m not defining simplicity as a separate principle—a user interface shouldn’t be simple just for the sake of it. Neither should it be minimalist—there’s nothing good about a blank screen with exotic navigation jumping out of all corners.

“Clarity goes side-by-side with simplicity.”

A rule of thumb is to do a sanity check after you call something done. Imagine you’re not familiar with the product, and you don’t know all the hard design decisions behind it. Ask yourself: “Is everything deadly obvious? Does this look like an alien rocketship or a comfortable traditional house?”

Flexibility

Design something that looks good in all situations.

A static Photoshop mockup can lose plenty of polish when it’s coded up into a live app. It keeps losing charm when it’s filled with real data, which is inconsistent at best—or often downright ugly.

“Design something that looks good in all situations.”

And then it’s used on an outdated low-res laptop by your lovely grandfather.

You should take all this into consideration. How do you create a design that stands up to this hard test of life?

• Rely on traditional design solutions that work well in different situations (simple responsive layouts, less things stuffed in corners)
• Use bulletproof typography (black on white, large, readable, etc.)
• Think through all the possible content situations (no content, little content, ugly content, weird content). Sketch up the most important ones.
• Account for all the devices and resolutions
• Consider implications and flaws that can happen during the development process. Give additional cautionary comments.

Familiarity

Our eyes love seeing simple and familiar things. Research shows that people even consider them more beautiful.

For yourself, it means a few things. First, you should spend less time reinventing a wheel, and use common solutions without feeling guilty.

Second, conventional layouts will seem less complex just because they’re familiar.

For some reason, certain designers and clients consider an obligation to bring something creative into everything they make (begone my days working with marketing agencies). What a delusion.

Of course, you want your app to be memorable. But it doesn’t have to be a brain-twisting puzzle to the user.

Here’s a short list of things that should be deadly familiar to the user:

• Icons. When in doubt, replace an icon with text.
• Navigation
• Calls to action—links, buttons, etc. Use simple, popular verbs
• Common color codes: red for urgent, green for done, etc.
• Anything related to payment processing

The user will be relieved to see familiar items and patterns in the unknown world of your app.

Efficiency

Make sure the user completes their main task in the most efficient way and never loses the result of their work.

First, answer a question: what’s the most routine job that the user does on a daily basis? Is it content entry, editing, or viewing? Is it performing the same complex sequence of actions?

Then design the interface to facilitate these tasks in the best way. Measure the effort that’s required to complete the task, like number of clicks, forms, and screens. Then clean up this sequence to make it streamlined.

There’s nothing bad about designing powerful software, but the core interface should be simple and functional. You can always hide plenty of options somewhere in context menus or app settings.

Consistency and structure

Consistency is a way to start feeling familiar about certain things, even if they were unknown before. It’s a way to introduce your own language inside the app.

Structure makes things more approachable, without feeling messy or overwhelming.

“Consistency and structure will help the user feel at home.”

Here’s what you can do:

• Introduce strong visual hierarchy, with the most important things big and bold
• Align everything nicely along the grid, or introduce any other kind of visual order
• Use a consistent color scheme throughout the app
• Keep the navigation consistent across all screens
• Re-use the same elements for different situations. For example, design a sample notification and color-code it for different situations.

Consistency and structure will help the user feel at home. And that’s what we want.