Principles of User Interface Design
People talk about user interface and user experience as though they’re interchangeable, but that’s not the case — and the difference matters. When people talk about “UX/UI,” they’re talking about a big umbrella that represents all the ways users interact with your product.
We took a deep dive into the principles of user experience in a separate pillar, so head over there to check that out. But this one is about user interface. So what’s the difference?
The idea of a “user interface” is actually a lot older than you might think. Even something as simple as the fact that your car has a gas pedal on the right and a brake pedal on the left, or that you turn knobs clockwise to increase things, qualifies as user interface.
In this case, though, we’re firmly seated in the digital age. For the purposes of this article, user interface is the visual and interactive component of a website, mobile app, or piece of software. It’s the colors, fonts, photos, images, CTAs, buttons, layout, and so on. The behavior, structure, and features of a website or piece of software are all considered UX — what you see on the surface is UI.
Once you start thinking about it, you’ll notice conscious UI decisions everywhere you go. Take the page you’re on, for example. The body copy is on the left and the table of contents is on the right. The download CTA has a shadow around it. The picture at the top is big and colorful. Each one of these is a conscious decision by MTM designers based on what we think will fit our brand voice and messaging, and the same is true for every website you visit and every app on your phone.
Why is UI So Important?
A good user interface can’t bring people to your website, but it can certainly keep them there and keep them coming back.
In partnership with UX, it’s part of what makes people enjoy your site and recommend it to others.
UI is also a crucial element of getting your visitors and users to do what you want them to do. It’s a delicate balance. On the one hand, you want them to easily find the features that they want, so your website should be helping them with their own goals. On the other, you want to guide them toward a purchase or other conversion, so your UI should be nudging them in certain directions rather than letting them wander.
Little details can make all the difference. The color and shape of a button, the order in which elements appear on a page, and even whether items have a shadow around them can all subtly hint to the viewer what they should do next.
Finally, there’s the brand consistency element. You want to put forward a strong, consistent, unique voice from your brand. The last thing you want is for customers to think of you as a faceless utility. When they access the DMV website to renew their driver’s license, they’re seeing a chore. When they access yours, they should see some personality, and your UI will help you show that.
Whether you want your company to come off as clean and simple, suave and sophisticated, extravagant and luxurious, or whatever else your brand identity may be, your UI should reflect that. The more you can show users who you are, the better. Here’s how to get started.
Build a Creative Inventory
The first step to building a good UI is to get organized.
You’ll be making a lot of pages that look similar, so you want the same elements to be consistent across the board. This saves time, too — if your designer comes up with a certain look for a CTA or a button, you want to be able to reuse that over and over. Here’s just some of what you’ll need:
- Typeface: pick a few font families — probably no more than three — to use on your site. Too many cooks spoil the broth, and too many fonts will make your website into a chaotic mess. You probably need one font for large blocks of text and a second for headings and page titles. If you use a third for accent text, use it sparingly.
- Headings: decide what your various heading tags (h1, h2, h3, and so on in HTML code) will look like. Remember, these will be universal — an h1 on one page will be the same as an h1 on any other — so make sure they work in any context. Think about size, letter spacing, color, whether they’re bold or italic, and so on.
- Special text: you’ll probably want to spice up long blocks of text like blogs and pillar pages with special text like customer testimonials, callouts, quotes, or statistics. What do those look like? Are they larger? Are they centered on the page? Do they have a box around them or some other element to set them off from the rest of the text?
- Lists: you’ll need to use bulleted or numbered lists at some point (like this one), so think about what they should look like. Are they the same size and color as the body copy or are they set apart? Do you want to design custom bullets or just use dots?
- Logos and icons: there will be dozens, if not hundreds, of small graphical elements on your site. You’ll use your company logo, the logos of partners, the logos for social media sites, icons for email addresses and phone numbers, icons for your services and portfolio, and so on. Design (or buy) a logo set that’s visually consistent and matches your site, then make sure you use them everywhere they appear.
- Image treatments: if you browse the web, you’ll notice that photos rarely appear all by themselves on a website. They usually have some special treatment — a shadow, a filter, a stroke around the border, a colored box across the page, a caption, or one of many others — that fits the page’s branding and sets the photo apart. Think of how you want your images to look and spell out those guidelines.
- Text inputs: when people type in text on your site, what does the box look like? How big is it? Is it a different color? When they type, what does the text inside the box look like?
- Radio menus: a radio menu is a menu where users can select or toggle one option at a time, usually with a little dot or checkmark to signify that the option is selected. Think about what you want that dot or checkmark to look like. Decide whether the item changes color when you hover the mouse over it or click on it.
- Select menus: a select menu is similar, except that your users are looking through a list of options and picking one (the menu at the top right of this page is an example of a select menu). The same decisions about appearance will apply to that menu, too.
- CTA buttons: a call-to-action (CTA) can take a lot of different forms, and you’ll use more than one on your site. You’ll have big, almost full-screen CTAs on landing pages. You can have small ones in columns off to the side of the main body content. You can have inline CTAs that are somewhere in the middle, like a wide banner with some text and a button in it. In every case, you’ll want to decide what those CTAs should look like.
Choosing Your Colors
Color is one of the most important elements of any user interface — it’s visceral, immediate, and can produce a strong emotional resonance. Besides, it’s the very first thing anyone will notice.
Before they read a single word or click a single link, your users will register what color your page is. It’s their first impression, so it’s important to get it right.
Virtually every major brand has its colors. Coke has red. Southwest has red, yellow, and blue. Google has red, yellow, blue, and green. A few big brands (Apple and Nike, for example) don’t have any real signature colors, but most have at least one or two that make them instantly recognizable.
You should be picking those out. If you don’t have signature colors from your logo, pick a few bold shades to use throughout your website. Don’t overdo it — your primary colors are there to provide a pop, not to overwhelm. You’ll also want a few accent colors that you can use to offset the primary colors, but that’s it! Color is used to draw attention to specific elements of your site, so too much color will just overwhelm and confuse your visitors.
White, Black, and Gray
You’ll also want to establish a definition for white, black, and gray. Bear with us, this isn’t as obvious as it sounds. True white and black are pretty rare to find in large quantities on websites, because they’re simply too high-contrast and they look harsh. The background color for a Google doc, for example, is #f8f9fa. It’s called “ghost white,” but actually a hair darker than the pure white of #ffffff. Similarly, the background of Netflix is #141414 — close to black, but not quite.
You’ll also want a low-contrast neutral color that lines up with your brand colors. It could be a shade of gray or a very pale version of one of your brand colors — it should stand out a little for elements like text boxes, but not enough to distract. Remember that certain colors have certain connotations. Shades of red are probably best to avoid for example, since they often mean that an error has occurred or that information is missing (more on that in a minute).
Interactive and Denotive Colors
Your next consideration will be the colors that mean something, not the ones that mostly serve as decoration. Color can go a long way toward telling people what to do and guiding them down the right path toward a conversion or a purchase.
The first set of colors is interactive colors. What color is a link or a button that can be clicked on? What color does it turn to when you hover over it? What does it change to after it’s been clicked?
The second set is called denotive colors — as the name suggests, they denote things! Say someone types an invalid email address into a form. You’ll want that form to indicate that the email field needs to be fixed, and color is a good way to do that. A successful form or download should have its own color as well. Finally, you’ll want a “disabled” color to indicate that a field can’t be typed in or that a button can’t be clicked. That’s usually as simple as greying it out, but it helps to choose it ahead of time.
Name Your Colors
It’s pretty rare that you’ll have only one person in charge of the visual component of your brand, which means you’re going to have to share that catalog of creative elements that we talked about with someone else eventually. When you do, they should be able to jump right in and start working without asking you what all the pieces are.
To that end, use both functional and color words like “primaryBlue,” “errorRed,” and “hoverGreen” (or whatever naming convention seems most intuitive to you) so that you can get a new creative up and running as smoothly as possible.
Test Your Colors
Finally, create a lot of different pages with your colors so you can see whether they work in every situation. Your preferred CTA color might look great on light backgrounds but blend into dark ones, so make sure you either have a color that works everywhere or a rule in place not to put certain colors on certain backgrounds.
Talking About Typography
If color is the most obvious first impression that your content makes, typography is a close second.
Some brands have such iconic typography that you can tell where the content came from even if you don’t see any other indicators of the brand, like a logo or trademark.
For the most part, though, typography is about the content, not the typeface itself. The bulk of the content on your site will be normal blocks and paragraphs of text, so you need a font that’s simple and clear to read. Save the exciting typography for your headers, titles, and the graphics that you share on social media that bring your whole brand together.
Choosing a Body Font
Your body font isn’t as important as you might think, so keep it simple. Pick a well-supported web font like something from the Google font catalog — they come with dozens of weights, all the glyphs you might need, and you know they’ll render well on any screen. Hosting a custom font simply isn’t worth the effort in 99 percent of cases.
Next, remember to let your text breathe. The web isn’t a newspaper. You’re not going to run out of space. People can scroll for as long as they’re interested in the content, and readability is a good way to help people stay engaged. Space your lines by about 1.5 times the height of the font to leave some white space in between the lines, and space the letters in headlines out a little more, especially if they’re in all-caps (see the words “pillar page” at the top of this page).
Column width is important, too. People don’t want to be jumping from line to line too quickly or they’ll lose their spot, but they don’t want to read from edge to edge on their desktop screen, either. Shoot for roughly 60-80 characters on a line on your desktop site and more like 30-40 on mobile.
Finally, don’t sweat the serifs. Serifs (the little extra projections off the ends of letters) are a subject of much debate in the writing world, and you can find plenty of articles about how serifs are more professional, sans-serif fonts are easier to read and friendlier, and so on. The truth is, it doesn’t matter. Plenty of tests have been done, and reading speed and comprehension aren’t affected by serifs. Pick a font that “feels” right for your brand and run with it.
Make Your Headers Stand Out
Don’t be shy about your headers — they should stand out a lot from your body text. Size is the easiest way to do that. We generally advise that your font be twice as large as body copy for headers, three times for titles, and four times for major elements like heroes at the top of pages. You can also make your font heavier, change the color, or switch to all-caps to make it stand out more.
Learning About Layouts
Now that you know what the individual elements of your page should look like, let’s talk about how they’re actually arranged in front of your users. Some of that will be down to the data you get from your UX team — UI and UX will need to work closely together to create the most intuitive, helpful pages — but there are some best practices to start out with.
Keep it Simple
Just like there are no space limits to pages, there’s no page limit to a website. Don’t try to make one page do too much, or people will get confused and lost and they’ll simply leave.
You also run UX risks with busy pages. The more there is on the page, the longer it will take to load, and slow-loading pages are a death sentence for websites.
The same principle applies when it comes to menus, graphics, forms, and other elements of your pages. When you give people too much to look at, they can’t focus on any particular thing. That means they can’t tell what they’re supposed to do next, which makes it much harder for you to guide them down the funnel.
Don’t get too cute with your menu items, either. People click on the menu because they’re looking for something, not because they want to browse aimlessly. Give them a hand by naming your menu items something obvious like “services,” “blog,” “contact,” and so on.
Steering Your Users
UI and UX are all about guiding people in the direction you want them to go. That’s a lot easier when you can play into their natural tendencies and coax them in the right direction naturally, rather than forcing it.
People tend to read left to right and top to bottom, so their eyes are going to go to the top left corner of the page first, then to the right, then lower on the page, then to the right again, and so on. UI designers talk about designing in an “F” shape to follow this path, arranging the most important and least important elements accordingly.
Negative space is a good way to steer users, too. People tend to shy away from blank sections of the page, so you can use areas with no content on them to steer people back in the right direction. Take a look at the Dropbox home page. You can scroll down and read more about Dropbox if you haven’t heard about it, but on the right side of the page is a signup form, surrounded by huge chunks of white space so the eye immediately goes to the form.
Break up your copy into easy-to-digest blocks. We try to keep our paragraphs to no more than 4-5 lines, which helps to break up long articles and separate thoughts. It also helps readers keep track of where they are on the page, rather than trying to pick out single sentences from hundreds of words of text.
Finally, stay responsive. We could write another 4000 words on the strategies and best practices of mobile UI (and maybe we will!), but the important thing is that small screens are not just scaled-down versions of large screens. With less room to work with, you have to pare down what’s on the page even more. Keep your designs simple, your pages uncluttered, and your copy as readable as possible.
Creating Good CTAs
CTAs are one of the most important elements of your web presence.
Whether you want people to fill out a form, download a whitepaper, purchase a product, schedule a meeting, or whatever it may be, you’re trying to steer them in that direction — and the final stop along the way is often a call to action (CTA).
To make your CTAs effective, they have to be persuasive, which means you have a license to be a little bit pushier than you would be on the rest of your site. Use action words — don’t way “find out more,” say “download now to find out more.” Tell the person viewing the CTA exactly what you want them to do and what will happen if they click it.
Urgency and scarcity are also useful tools. If you tell people that they can sign up for a webinar to learn about your product, they might think, “I’ll get around to it eventually.” If you tell them that sports are running out, that only 50 people will be allowed to sign up, and that they should get their spot while they can, they’re much more likely to take action.
When phrasing your CTAs, do your best to minimize the perceived risk and maximize the potential value. The risk should be essentially zero — maybe the user has to give you their email address, but they’ll get this comprehensive ebook in return!
Part of removing risk is getting rid of “friction words” that imply that the user will have to take some sort of action that they might not want to. Avoid words like “buy,” “order,” and “submit” until the very end of the funnel to make sure that people know they’re not overcommitting by clicking on a button.
Judging Post-Launch Success
After you make major updates to your UI, there are two major ways to see if it’s working: by comparing to your previous versions and by testing iterations. Comparing to your previous versions is the easy way. If conversions, clicks, time on site, and whatever other KPIs you measure are going up, then you’re doing well and you’ve made improvements to your UI.
The harder part is to keep testing against yourself, by which we mean testing everything over and over again. The easiest way to do that is with A/B testing, which is a designer’s best friend. You can go as big or as small as you want with A/B testing. Start with something as small as the color of a button and see if you get different click rates, or design two completely different versions of a landing page to see which one gets more conversions.
Talk to your users, too — especially the ones that have been with you for a long time. Ask them what they like and don’t like about the new interface. Be specific and ask them about the specific tasks and actions that your users take the most. Is it easier to find certain information on the site? Is it easier to view or change your account information? Is it easier to manage your dashboard? Whatever’s most important to your users, focus on optimizing those tasks.
Special Tools for Mobile
We don’t have to tell you how popular mobile browsing is. More than half of web page visits occur on a mobile device these days, and apps account for even more internet traffic than that. If your site isn’t optimized for mobile, your traffic and engagement will suffer.
On a desktop, it’s hard to tell exactly where someone’s looking until they actually click on something or scroll down the page. On mobile, you have a lot more information at your disposal, thanks to the touch interface of every mobile device.
Touch heatmaps can gather all the information from every interaction about taps, double taps, swipes, pinches, and so on, and put them all into a visual heatmap so you can tell exactly which parts of your page are commanding your users’ attention.
With that data at your disposal, you can tell which gestures (like scrolling or swiping) are natural to your users and which ones aren’t intuitive, whether certain elements need to be moved or resized, how people interact with popups, and more. If you have a mobile presence at all (and you should), you need a tool like this.
Pay special attention to the shortest sessions of your users. The users that come to your site, visit one page, and leave again are the ones you need to examine. With the right software tools, you can see where on the page these users are, which pages they’re leaving, and what might be causing them to abandon your site without exploring further.
A UI Designer’s Work is Never Done
The truth is, a website is never really a finished product. Your needs, your goals, and the needs of your users will constantly be shifting, and you need to be paying attention enough to keep up.
That’s where a new and exciting idea called “growth-driven design” (GDD) comes in.
CTA: Learn More About GDD
Link: Growth Driven Design Pillar
The idea behind GDD is that you’ll launch your website as a minimum viable product, containing only the most essential features and pages to serve your customers. As time goes on, you’ll add, change, and remove features based on the needs of your customers, staying flexible and nimble rather than only updating your site every five years.
When it comes to UI, this is where you can get a lot of use out of your catalog. You’ll need to make and change pages on the fly to accommodate the needs of your users, and the ability to grab buttons, headings, forms, text boxes, and graphics out of the toolkit will give you the versatility to create quickly and easily.
We’d all like to think that our product will speak for itself — that if you make a product or a website that’s useful, informative, and solves your customer’s problems, the business will come in naturally. But the truth is, visuals matter, and the user interface of your site or software will play a huge role in the way people perceive you. Time to get started!
The goal of UI is to anticipate what users might need to do and ensures that the interface has elements that are easy to access. That’s where we can help you design interfaces that are consistent and scalable.