Your website's UI (or User Interface, a mix of visual and interaction design) functionality is imperative to a healthy functioning website. It doesn't matter how pretty your graphics are, how great your brand photos turned out, or how on-point your copy is if your functionality is lackluster. It's been a few years since the ideas of UI and its friendly cohort, UX (User Experience, the way the user interacts with the interface), have been regular parts of web design, given their success in product design the last decade. A user-centric model has become the mainstay of design and development. While engineers and graphic designers debate what's more important, function or beauty, less than pretty function regularly beats out beautiful confusion.

But what makes great UI? Or, more importantly, what are the five most important things to improve the experience and function of your UI? As busy business owners and marketers, we often don't have the time to do a major overhaul of every single nook and cranny of our website. You're busy, and we get it. That's why we're sitting down with website guru and PRIME's Director of Digital Development, Ben Fjare, to get his five keys to more functional UI. Without further ado, let's dive in.

Leave the Wheel Alone

At the top of Ben's list is a simple concept that's been tried and true throughout history—"Don't try and reinvent the wheel," he says. There are certain things your users have come to expect. And while you don't want to be boring, a certain level of predictability on your website is a good thing. Otherwise, you risk confusing people. 

Whether they know it or not, people expect your logo to be at the top left of your website. As for your navigation, it should either run horizontally across the top or vertically down the left side. Stick to the basics in these facets of your site instead of trying to create something entirely out of the box for the sake of being different that actually leaves your users frustrated and makes your website harder than it is cool to use.

If you want to differentiate your site, there are other places to do so apart from the UI. Lace it into your copy with unexpected language or a tone that most people are too scared to take. Have really strong, branded visuals that push the envelope. But keep the UI part as vanilla as possible. Your users will thank you for it.

One of the methods that product design has had abundant success from that web design has learned from is in component design or materials design. The menu that you like that Google or Apple uses is a styled component that can be transferred to your site. When you look at the commodity of an image rotator, a menu slider, or a pop-out box, those components are designed as static materials to configure, rather than reinventing the wheel every time. With consistent materials, the testing has already been worked out. The component that you use has been vetted by popularity, elevating the UI and UX to something familiar and successful, rather than something complicated and unique. 

Create a Clear Path

When it comes to where your website is taking your users, it needs to be clear. As Ben told us, "Make sure every time your user clicks something, they know exactly what's going to happen next." In the coders' classroom, it's called a feedback mechanism — something that indicates there is an actionable element on the page. 

What does that mean in practice? A few things. For one, if you have nontraditional clickable items (i.e., not a button), like an image, you need some sort of indicator about where that item will take them. Maybe it's hover text that appears when they move their mouse over the image. Perhaps it's a line of text next to the image explaining what will happen next. Users can't read your mind, and they aren't familiar with every page of your site the way you are. Keep this in mind to help you make things abundantly clear.

It also means your CTAs need to be explicit. Staying away from cutesy CTAs (or calls to action) is good practice in general as certain words such as "learn, get, grab, book," prompt a higher click rate. But more so, cutesy CTAs can leave your user confused about what they're getting. Are they accessing a download? Are they about to read more copy? Does the CTA lead to your contact page? It should be explicit. You want the peace of mind that your users knew the promise of the CTA, and followed it.

Lean into Legibility

Speaking of clarity, one area to focus your energy on improving the function within your user's interaction is the contrast you choose on your website. This refers to the aspects of your site's design, that can overwhelm the functionality, or cause people to exit before they are engaged. The background color you choose for your site page, the font color you select, the interplay of image and motion: If they are too close in color, too harsh, too pixelated, or too faint, your user may have a hard time reading your content. Just try putting some bright blue text on a red screen, and you'll see what we mean. 

In the same vein, be careful of choosing images versus a solid color for your background. It can most certainly be done, but you'll need to make sure the image isn't too busy or too close in color to your text to the point that it inhibits clarity. The same is true of expressive fonts. While they can differentiate you and set you apart, it won't matter much if your user can't read what you've written. 

Pick Your Colors and Stick to Them

Have you noticed a trend yet? So much of the best working usability is all about keeping things both simple and consistent. The same is true of your web colors. As Ben explains, "Find one good primary color and use it for all your links and buttons." This helps people to know what is and isn't clickable so that things don't get lost in the maze of your design.

Being that you probably aren't a giant company like Oracle or Apple, tertiary color palettes and beyond are not quite the solution you are looking for. Using simplified color palettes makes for clean and minimal design, which has been the favored form of design for more than a decade. Having a consistency of colors makes them stand out from your background and makes it clear that they're interactive pieces of your site. 

Respect the Hierarchy

We know you know your business is great, but that doesn't mean you need to give your users a long-winded explanation of why. In a culture where bounce rates are high, and scrolling or swiping past the ubiquitous "tl;dr," it doesn't take Sweet Brown telling us, "Ain't nobody got time for that" for us to understand. 

When people browse the web these days, they're most likely looking for bitesize information, fast. "Don't give people seven paragraphs to read," Ben explains. "Break things out into chunks of text that have distinct headings, and if they want more information on that topic, take them to a secondary page where they can get it."

With this in mind, it's also essential to have a distinct hierarchy between the text on your page. We're not just talking tags and heading (although these are important). We mean the website's content itself. If everything on your page is the same size in composition, the user's eye has trouble knowing where to land and what visual path to follow. Breaking things out into a visual hierarchy helps their eye move down the page in a manner you want, leading them to relevant information and calls to action.

Have questions about how to turn these five keys of UI, UX, and usability into real action? Ask us! We're always here to help. Contact us today, and we will partner with you on your efforts.