Get the latest tips straight to your inbox.
Digital interactions are increasingly a consumer’s first — and sometimes only — exchange with many brands. The ease and enjoyment of those interactions can make or break the relationship in no time at all. Positive interactions are what drives interactive user interface (UI) and user experience (UX) design.
The days of DOS prompts and endless pages of website text are long gone. Users today have little patience for brands that haven't caught up with the times. They want an experience that is both effortless and engaging, and one that feels personal without the benefit of brick-and-mortar interactions.
That's why your website design can't just be about selling products, conveying information or catching consumer eyes. It has to be all that and more. For that to happen, the importance of interactive UI and UX design can’t be overstated.
UI and UX define how a customer will experience your brand, whether they visit your website, download your app or use your physical product. For now, let’s focus primarily on websites. UI deals with every aspect of how that customer interacts with your site and how straightforward and seamless that process is. UX is broader and describes how that whole process feels to your customer. UI and UX design are disciplines that deal with these 2 critical components.
Just as it sounds, UI entails every point of interaction between the user and your site. Wherever they click, type, scroll or otherwise navigate through the pages, the user is interfacing with your brand. The best UI design has ease of use as its main objective. The guiding question is: At every step, how can we make this more user-friendly, less confusing and more effective?
UI is really a subset of the broader UX, which is really about the overall feeling users get from interacting with your site. It isn’t only about whether they enjoy using it, but whether it gives them a genuine feel for your brand. Does the whole experience add up to something satisfying and enjoyable? That's the question of UX design.
Video games can make the distinction (and the relationship) between UI and UX clear.
In a game, the UI is the functional design of the controller. It defines what each button does and how those buttons and their combinations allow the player to interact with the game’s environment. The UX captures what that play feels like and how easily the player is absorbed into the game.
In some sense, the less the player even notices the elements of UI, the better the overall experience. UI and UX designers are constantly working toward this end.
Your website may be your only fleeting chance to capture someone's eyes. For this reason, a lot of attention is often paid to good website aesthetics and clean copywriting. But these are just 2 aspects of the overall experience a user has interacting with you through your site.
Those beautiful images don't matter if they take too long to load. Sparkling copy isn't helpful if it's buried on pages too confusing to find on your menu. Your newsletter is only effective if people can easily sign up for it. Innovative products won't fly off the shelves if users have to clumsily navigate 5 pages of checkout before they can finish making a purchase.
All of these are aspects of UI and UX design, and every one of them can have a significant impact on your bottom line. A too long or complicated checkout process is the third most common reason online shoppers abort their checkouts, according to the Baymard Institute, a web-usability researcher. It accounts for 21% of abandoned carts. A page load time that goes from 1 second to 5 seconds increases the bounce rate by 90%, Google reports.
You can do the math about what those numbers mean for your business.
UI and UX design are tools for reaching as many people in your target audience as possible. It isn’t simply about making a great impression, but making that impression with anyone who visits the site regardless of limitations. This is the intersection between UI, UX and web accessibility.
Consider, for instance, a colorblind person who visits your site. Would they recognize navigational elements in the same way as someone who isn't colorblind?
Or consider a user with learning disabilities who may find complex gestures difficult. Does your page offer simpler alternatives?
Regardless of any specific differences a single user may have, using your visual, layout and text elements consistently across your site will make navigation easier for all visitors.
One common point of confusion in these terms is the distinction between UI, UX and Interaction Design (sometimes called IxD). While there is some overlap among these disciplines, it's most helpful to think of them as concentric circles. UI is a subset of IxD, which is a subset of UX. In other words, UX encompasses all of them.
Where UI focuses on the minutiae of buttons, menu layouts, forms and graphics, interaction design zooms out to deal with the overarching flow of information and how the user interfaces with it.
UI deals with questions of typography, spatial relationships between page elements and the simplicity of the interface. While IxD doesn't ignore these elements, it does focus on different priorities. According to Usability.gov, the federal government’s standard-bearer for UX best practices and guidelines set by the Digital Communications Division, these are:
You can see how all of the issues concerning IxD and UI developers are concerns for UX developers, too. Each discipline may have its specific emphases, but all 3 are working toward the same end: creating an interactive experience that leaves the user excited about your brand.
Despite the distinctions, it's helpful to think of all of these concepts under the same umbrella of interactive UI and UX. That is, you should consider every aspect of the user's interface and experience through an interactive lens. Creating an interactive UX means you aren’t just making sure that it's clear where your web page visitors should click or how they should fill out a form, but that the whole experience is something dynamic and engaging.
An interactive UI incorporates animations and gestures to create a fluid, responsive experience. No design element is insignificant — from each color choice to the way the text and images move on the page. All of it is meant to give the user a feel for what it's like to interact with your brand. That means there's no formula. Since every brand is unique, the best interactive UX for your brand depends on your personality.
Putting all of this together, we can think about some overarching principles for creating a holistic, powerful, interactive user experience. Many of these concepts are foundational for interactive designers, but they apply across the board.
This may seem obvious, but a lot of web designs betray this fundamental principle. When coding and technical considerations are put in the driver's seat, you get websites and apps that feel more like they were designed for robots than people.
Interacting with people creates a much more complex emotional and psychological landscape. Interactive design has to navigate this landscape. The response time of your site matters because real people with real lives are using it. Colors and images have an emotional effect. Simple copy choices can create an entirely different feel for the user — namely one that's either in sync with your brand or not.
Before you start designing your site, you need a clear idea of the personas you're trying to reach. What are their unique needs and concerns? What problems are they trying to solve by coming to your brand? What are their general attitudes and personalities? The whole UX will feel more human if it feels like it was actually made for humans.
This isn’t to say simple questions of functionality are irrelevant. Once you know who you're designing for, then questions of usability become paramount.
Websites and apps that put form over function quickly frustrate users. They may look pretty, and using them may even be fun for a moment, but they ultimately don't serve the user. User-centered design always approaches the challenge with some core questions in mind:
Interactive UI and UX design have to constantly answer these questions and refine processes to remove obstacles to a smooth user experience.
It's easy to think ergonomically about physical spaces. Retail stores are laid out to create a natural flow that makes shopping and checking out easy. These same ideas can be applied to digital spaces.
On a surface level, some of this is obvious. Menus shouldn't be clunky and they should be designed to work well on different devices. Pop-ups shouldn't constantly interrupt the user's natural flow. Each page should have a similar structure and layout so the user doesn't have to reorient every time they land somewhere new.
But other ergonomic elements aren’t as immediately apparent. Link anchor text should be relevant and point the user to pertinent content. A clean layout doesn't overwhelm someone with too much text and allows the user to flow naturally through the site and find what they're looking for.
At the heart of ergonomic design is your site's or app's architecture. And the fundamental question is: At any given moment, does the user know where they are and how to get where they want to be?
Interactive design isn't a theoretical discipline. Once you translate concepts into real user experiences, you have to evaluate how those interactions play out. If you have a few concepts you want to try, you can create different versions of the site and test them on different groups of users.
Evaluating interactive UX can be as simple as collecting visitor feedback after they use your site, or you can set up more direct methods for testing in real time. Focus groups are one way to collect live information and get user impressions as they navigate your site for the first time.
As you gather feedback, create new iterations of your design and test your improvements. Your UI and UX work is never finished.
Again, none of this can be summed up in a concise formula, because you have to apply everything to your own brand identity and personality. While the aim is for users to have an overall positive experience, what "positive" means will depend on your unique style and target audience.
Even though it's critical to design for the user first, you still have to ask questions about how the UX relates to your brand. If your image is meant to be cutting edge and exciting, does the user interaction support that? Choices you make toward that end should be quite different from ones you would make to convey a professional brand identity.
The Microsoft Desirability Toolkit offers a list of 118 words that you can use to evaluate consumer reactions when they experience your website, app or products. (Nielsen Norman Group recommends adapting and shortening the list.) You can use this list to define your brand identity and seek to shape the interactive UX accordingly.
Remember to keep questions of accessibility in mind as you make design choices for your brand, as well. When you make it easier for all users that fit your target audience to engage with your website or apps, you convey that your brand is trustworthy and approachable. The A11y Project, a resource on web accessibility and inclusivity, offers an accessibility checklist that you can use in your design efforts.
UI and UX design shapes the digital interactions that brands have with their customers. As digital spaces continue to supersede physical ones, those interactions become increasingly critical. Interactive UI and UX must be at the forefront of your marketing and branding efforts.