User Interface

Overview
_____________________

What’s Important

• UI is part of what makes people enjoy your site and recommend it to others
• Learn how to assemble a creative inventory
• The importance of choosing brand colors
• Which typography is best for your brand
• Optimizing your layouts
• Creating the most effective CTAs that drive action
• Measuring your success after launch

Introduction
_____________________

Principles of User Interface Design

People talk about user interface (UI) and user experience (UX) 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 representing 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: User Experience Pillar Page. This pillar focuses on user interface. So, what’s the difference?

Key Differences Between User Interface and User Experience

The idea of a “user interface” is actually a lot older than you might think. Many things that you don’t even realize qualify as a user interface. For example, the simple fact that your car has a gas pedal on the right and a brake pedal on the left — that’s a user interface. The same applies to electronic devices, such as a radio, where you turn the knob clockwise to increase volume and counterclockwise to decrease volume.

In our 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 software application that users interact with are all considered UX — what you see on the surface (elements of interaction) is UI. The user interface and user experience complement one another, so getting both right is critical in today’s competitive market.

Once you start thinking about it, you’ll notice conscious UI design decisions everywhere you go. Take this pillar page you’re on, for example. The body copy is on the left, and the table of contents is on the right. The “download the PDF” CTA has a shadow around it. The banner image at the top of the page is big and colorful. Each one of these elements is a conscious decision by MTM designers. The choices are based on what we think fits our brand voice and messaging. The same is true for every website you visit and every app you use on your phone.

Chapter 1
_____________________

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, UI is part of what makes people enjoy your site and recommend it to others. UI design 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 they want, so your website should help them with their own goals. On the other hand, you want to guide them toward a purchase or other conversion, so your user interface design should nudge them in specific directions rather than let them wander.

Little details can make all the difference. Consider the color and shape of a button, the order in which elements appear on a page, and whether items have a shadow around them. These elements subtly hint to the viewer about what they should do next.

Finally, there’s the brand consistency element. You want to put forward your brand’s strong, consistent, unique voice. The last thing you want is for customers to think of you as a faceless utility. For instance, when they access the DMV website to renew their driver’s license, they see a huge chore. But when visiting your website, you want them to see some personality. You can convey that with the help of your UI design.

Whether you want your company to come off as clean and simple, suave and sophisticated, extravagant and luxurious, or whatever your brand identity may be, your UI design should reflect that. The more you can show users who you are, the better. Here’s how to get started.

Chapter 2
_____________________

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 turn 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 how your various heading tags (H1, H2, H3, etc. in HTML code) will look. 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 content like blogs and pillar pages with special text, such as 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 how they should look. 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. In addition to using your company logo, there may be illustrations representing your services and portfolio, partners’ logos, social media icons, email addresses, phone number symbols, etc. Design (or buy) a set of visually consistent logos and icons that match your site, then make sure you use them everywhere they appear.
• Image treatments: As you browse the web, you’ll notice photos rarely appear all by themselves on a site. They usually have some special or unique treatment — a shadow, a filter, a stroke around the border, a colored box across the page, a caption, etc. — that fits the page’s branding and sets the photo apart. Consider how you want your images to look and spell out those guidelines.
• Text inputs: Search boxes, web forms, and other inputs are used to process or collect user information on the website. 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: This type of menu allows users to select or toggle one option at a time, usually with a small dot or checkmark to signify 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 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 also apply to that menu.
• CTA buttons: A call to action (CTA) can take many forms, and you’ll use more than one on your site. You can have large, almost full-screen CTAs on landing pages along with small ones within side columns next to the main body content. You could also have inline CTAs located somewhere in the middle, such as a wide banner with some text and a button. In every case, you’ll want to decide what those CTAs should look like.
• Animations: Nowadays, most websites and apps contain UI design elements with added motion features to increase the level of interactivity on the page. Similar to other elements, animated ones help guide user actions and influence their decisions. Be sure to use restraint when incorporating animations. You want to provide subtle feedback, not wow them with cool entertaining animations.
• Advanced features: Good UI design is simple. Making a UI too complex leaves users perplexed and without good experiences. Progressive disclosure is a way to provide a secondary interface that users access if they desire more. For example, average users may only need to know a few general or introductory pieces of information, whereas power users may want to dig deeper. Consider whether certain parts of the design are absolutely necessary or too complicated.
• Emerging technology: Artificial intelligence (AI), virtual reality (VR), augmented reality (AR), the Metaverse, and other innovative technologies have made their way into UI. Think of the AI-powered Google Assistant or the Pokémon Go AR game. Identify ways you can enhance customer engagement through personalized interactions, some of which may blend reality and virtual environments.

Chapter 3
_____________________

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.

Brand Colors

Virtually every major brand has its own corporate identity and brand colors. Coke has red; Southwest has red, yellow, and blue; Google has red, yellow, blue, and green. A few big brands (Apple and Nike) don’t have any actual signature colors, but most have at least one or two that make them instantly recognizable.

You should pick those out. If you don’t have signature colors from your logo, select a few bold shades to use throughout your website. Don’t overdo it — your primary colors are there to provide a pop, not to be overpowering. 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 site elements, 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 colors to find in large quantities on websites because they simply look too high-contrast and harsh. For example, the background color for a Google Doc is #f8f9fa. It’s called “ghost white,” even though it’s actually a hair darker than pure white (#ffffff). Similarly, the background of Netflix (#141414) is close to black, but not quite.

Consider using a low-contrast neutral color that aligns with your brand colors. It could be a shade of gray or a very pale version of a brand color — it should stand out a little for elements like text boxes but not enough to distract. Remember that certain colors have certain connotations. Case in point, shades of red often mean an error has occurred or information is missing, so it’s probably best to avoid them (more on that in a minute).

Interactive and Denotive Colors

Your next choices will involve sets of colors that mean something, not those primarily acting as decoration. Colors go a long way toward telling people what to do and guiding them down the right path toward conversion or purchase.

The first set is interactive colors. What color is a link or a button that users can click? What color does it turn into when hovered over? What does it change to after it’s been clicked?

The second set is called denotative 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 using color is a great 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 when a field can’t be typed in or a button can’t be clicked. That’s usually as simple as graying it out, but it helps when you choose it ahead of time.

Name Your Colors

You’ll rarely have only one person in charge of the visual component of your brand, which means that the catalog of creative elements we talked about will have to be shared 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), so that you can get a new creative up and running as smoothly as possible.

Test Your Colors

Finally, create many different pages with your colors to see whether they work in every situation. Your preferred CTA color might look great on light backgrounds but blend into dark ones. Therefore, you should make sure to either have a color that works everywhere or a rule stating not to use those colors on certain backgrounds.

Chapter 4
_____________________

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 brand indicators, 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, your titles, and the graphics shared 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 isn’t worth the effort in 99% 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, so 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 lines, and space out the letters in headlines 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 jump from line to line too quickly, or they’ll lose their spot. They also don’t want to read from edge to edge on their desktop screen, either. Shoot for roughly 60-80 characters per line on your desktop site and 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. You can find plenty of articles about how serifs are more professional, sans-serif fonts are easier to read and friendlier, and the like. The truth is, it doesn’t matter. Plenty of tests have been done, proving that 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 fonts should 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.

Chapter 5
_____________________

Learning About Layouts

Now that you know what the individual elements of your page should look like, let’s talk about how they’re arranged in front of your users. Some of that will come 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 you out.

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 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 similar.

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 naturally play into their natural tendencies and coax them in the right direction rather than forcing it.

People tend to read left to right and top to bottom, so their eyes will 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 elsewhere. UI designers talk about designing in an “F” shape to follow this path, arranging the most important and least important elements accordingly.

White space (or negative space) is an effective way to steer users too. People tend to shy away from blank sections of the page, so you can use areas with no content to steer people back in the right direction. Take a look at the Dropbox home page. (you can scroll down to learn more about what it is). On the top right side of the page are several CTAs, including a “sign in” link and a “get started” button. You’ll notice they’re surrounded by chunks of white space, so the eye immediately goes to the action text. Directly underneath, the rotating banner also has large areas of negative space. In particular, long brand-colored buttons that span the page’s width draw users’ eyes to additional CTAs.

Break up your copy into easy-to-digest blocks. We try to keep our paragraphs to no more than 4-5 lines, which helps split 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 4,000 words on mobile UI strategies and best practices (and maybe we will!), but the important thing is small screens are not just scaled-down versions of large screens. With less room to work with, you must pare down what’s on the page even more. Keep your designs simple, pages uncluttered, and copy as readable as possible.

Chapter 6
_____________________

Creating Good CTAs

CTAs are one of the most important elements of your web presence.

Why? Because your website isn’t purely ornamental, it’s trying to persuade your visitors to do something.

Whether you want people to fill out a form, download a white paper, 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 must 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 say “find out more,” say “download now to find out more.” Tell the person viewing the CTA precisely what you want them to do and what will happen if they click.

Urgency and scarcity are also useful tools. If you tell people 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 spots 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 — perhaps the user has to provide their email address, but they’ll get this comprehensive e-book in return!

Part of removing risk is getting rid of “friction words” that imply the user will have to take some sort of action they might not want to take. Avoid words like “buy,” “order,” and “submit” until the very end of the funnel to ensure that people know they’re not overcommitting by clicking on a button.

Chapter 7
_____________________

Judging Post-Launch Success

After you make major updates, there are two major ways to determine if your UI design works well: compare it to previous versions and test 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 made improvements to your user interface design.

The harder part is to continuously test against yourself, meaning testing everything repeatedly. The best way to do that is with A/B testing, a designer’s best friend. You can go as big or small as you want with A/B testing. Start with something small (e.g., 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 those who 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 particular 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, whether by smartphone, tablet, or other devices. More than half of web page visits occur on a mobile device these days, and apps account for even more internet traffic. If your site isn’t optimized for mobile, web traffic and engagement will suffer.

On a desktop or laptop, it’s hard to tell exactly where someone is looking until they click on something or scroll down the page. On a mobile device, you have much more information, thanks to the touch interface of every mobile device.

Touch heatmaps can gather all information from every interaction about taps, double taps, swipes, pinches, etc. Put them into a visual heatmap to tell exactly which parts of your page command 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 (and you should), you need a tool like this.

Pay special attention to the shortest sessions for 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 users are on the page, 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.

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 customers’ needs, staying flexible and adaptable rather than only updating your site every five years.

When it comes to UI design, this is where you can get a lot of use out of your catalog. You’ll need to create and change pages on the fly to accommodate user needs. The ability to grab buttons, headings, forms, text boxes, and graphics out of the toolkit will give you the versatility to develop quickly and easily.

We’d all like to think our product will speak for itself — that if you make a product or website that’s useful, informative, and solves your customer’s problems, business will come naturally. But the truth is that visuals matter. The user interface of your site or software will play a huge role in the way people perceive you.

Time to get started!