Learn / Guides / UI design guide
User interface: what it is and why it matters
Designing a sleek user interface (UI) is like rolling out the red carpet for your guests: it makes the product experience smooth, effortless, and enjoyable—and contributes to a positive impression of your company.
But user interface design isn’t always easy to get right. You need to create the perfect balance of form and function—like giving users the right menu or button exactly when and where they need it.
This glossary walks you through what a user interface is, why it’s important, the different types of UIs, and key elements—so you can approach your own product design with confidence.
Design a user interface that captivates customers
Use Hotjar's tools to discover how users interact with your site’s UI elements.
What is a user interface?
A user interface is the surface layer through which users control and communicate with software or hardware. It’s the space of interaction between a person and technology.
For example, if you’re looking for a mattress on a direct-to-consumer (DTC) website, you might see product listings clearly arranged in a grid pattern, find a specific mattress using a search bar, and then click an add-to-cart button.
At every step, you’re interacting with the user interface: the layout of items on the screen, the photos and graphics that visually guide your way, and the elements like buttons and bars that help you take action.
An excellent user interface is intuitive and enjoyable for those who interact with it. The field of UI design focuses on creating a positive user experience (UX) through the best combination of aesthetic and functional elements.
User interface elements you need to know
To enhance the user experience, the typical product UI relies on four components.
1. Input controls
Input controls make it easy for users to enter information. If you’ve ever entered your credit card information on a checkout page, you’ve used input controls. A checkout flow is likely to contain text inputs where you can type directly into a box from your keyboard.
Other options for input controls include:
Buttons, like the ones you use when you click ‘submit’
Radio buttons, which let you select one answer from a list of options
Checkboxes, which let you select one or more answers from a list of options
Dropdown menus, like when you click an arrow and it reveals a list of countries or states for you to select
2. Containers
Much like the boxes you use to store seasonal decorations, containers group similar items together so that information doesn’t overwhelm the user.
Types of containers include:
Accordions, which expand to show more information and collapse to save space and avoid information overload for the user. Think of frequently asked questions (FAQs) sections where the question is always visible, and the answers are visible with a click.
Tables: often the best choice to organize numbers or help shoppers compare options side by side, like available features in tiered software-as-a-service (SaaS) subscriptions
Cards, which bundle information into an easily digestible group. For example, a card might include an overview of product information—a photo, title, description, and price—in a unified rectangular area.
Collaborative presentation SaaS company Pitch uses cards to showcase their pricing plans and tables to compare the features
3. Navigational components
If you’re moving from one page to another, you’re likely using navigational UI components. These elements save you time by letting you scroll, click, or swipe to land exactly where you want to go.
Examples of navigational controls include:
Breadcrumbs, the clickable text that appears at the top of the site to lead you back to where you were before, like Home > Kids > Tops > Sweaters on a clothing retailer's site
Tabs, which let you organize information as you do in a binder, letting users quickly jump from one page or section to another
Menus, such as when you hover over the ‘Home’ tab on an ecommerce website, and a list of options, including ‘Bed & Bath’ and ‘Kitchen’, appears
4. Informational components
Sometimes the best thing you can do to improve UX is to keep the user informed. There’s nothing worse than submitting information into an email capture form, for instance, and not seeing any indication that the submission went through.
Some examples of informational components, also known as display components, include:
Progress bars, like those indicating you need to spend $12 more to get free shipping
Text, such as when you order a SaaS product, and a message pops up with: “Thank you! Your order was received. You’ll receive your access code shortly. Check your inbox for more information.”
Tooltips, which let you hover over an element for more details about what it is or how it works
Notifications or alerts, such as a push notification on a mobile app that reads: "Cha-ching! You received a $450 deposit!"
💡Pro tip: test which user interface elements work best for your users—and which need adjustments.
Use heatmaps to visualize aggregate data on how people interact with your site’s user interface. Heatmaps use color to show you where visitors click, scroll, and move the most.
For example, if you see users completely ignoring an important UI element—like a required form field—on a heatmap, you might move it elsewhere or make it easier to complete by turning it into a drop-down menu.
On the flip side, if you notice your FAQs accordion is getting a lot of attention, you might want to dig deeper into why. What do users need to know before making a decision? Should you move some of the information up to the product description?
Hotjar’s Heatmaps tool lets you visualize how users are interacting with monthly versus annual pricing tabs and product tier cards.
Why is the user interface important?
Imagine you land on a website for a service provider—let’s say a marketing company. You want to learn more about their paid advertising services but don’t see a navigational menu in the upper corner.
You scroll down, and the entire page is written in a 12-point font without any icons or buttons, only a scattering of hyperlinks throughout. Within three seconds, you exit the page—another bounce for the marketing company.
Without clear UI elements to engage, inform, and guide visitors, your product or website becomes virtually unusable. But when done well, your user interface helps you:
Improve the user experience: UI and UX go hand in hand. Your user interface directly affects your user experience—visitors' interactions and how they feel about those interactions. If your UI is visually appealing, intuitive, and useful, you’ve hit the golden trifecta that results in a top-notch user experience.
A user interface is where and how a person interacts with technology. The other part of the UI is the user experience, or what it's like to interact with that interface. Designing a great user experience often comes back to the ideas of being easy to understand and easy to use.
Acquire customers: your user interface also improves your search engine optimization (SEO) efforts. With a good UI, you can increase your average session duration metric, a factor that search engines use to rank your website. When you rank higher, you receive more traffic to your site—which could lead to more customers.
Build brand loyalty: your products and services go a long way in helping you retain customers, but your user interface is often just as important. A good UI keeps your customers happy, helping them associate feelings of ease and delight with your brand and making them more likely to stick with your business over competitors.
Increase conversions: conversions are when visitors take desired actions, like signing up for your email list or completing checkout. Even minor tweaks to UI aspects—like altering your layout or call-to-action button design—can have a big impact on conversions and revenue.
💡Pro tip: instead of relying on just your instincts or adhering to traditional wisdom, collect data from real users.
To determine what UI elements needed adjustment, Every.org, a platform that lets visitors donate to more than one million charities, turned to Hotjar Recordings to watch real sessions of users interacting with their site.
The company’s Senior Product Designer, Dave Sharp, filtered recordings to focus on rage clicks: moments when visitors click multiple times in frustration. Sharp quickly noticed that potential donors got frustrated on a page with two call-to-action (CTA) buttons: ‘add card’ and ‘donate.’
Regulations required the company to collect credit card information first, so they couldn’t change the process itself. Instead, they separated the checkout flow into two pages: users would add their card on page one and then select their donation on the next.
While conventional wisdom says to reduce steps in a checkout flow, a two-page UI approach was just right for Every.org and its customers: donations increased by 29.5%.
Every.org’s original checkout flow included two CTAs on the same page, which frustrated potential donors.
4 user interface types—and when to use them
As you read this guide, you’re interacting with UI elements like text and images, and you may click on buttons or menus. But this type of user interface—a graphical user interface—is only one type among several. Here are the four main categories of user interfaces:
1. Graphical user interface (GUI)
Used by most major computer operating systems and websites, a GUI (sometimes pronounced ‘gooey’) presents information through elements like windows, menus, icons, and buttons. Users interact with the interface through a device like a mouse or trackpad.
You use graphical user interfaces whenever you hop on your MacBook or PC, open a browser window, and surf the web. GUIs are popular for two reasons: they’re visually attractive and easy to use. You don’t have to memorize complex commands or understand how to code; instead, you can just point and click.
2. Voice user interface (VUI)
With more than 90 million people installing smart speakers in the US alone, voice user interfaces are more prevalent than ever. A VUI allows people to interact with technology like smart speakers or artificial intelligence (AI) assistants through voice commands. For example, they might turn to their Amazon Echo speaker and ask Amazon’s AI assistant Alexa for today’s weather forecast.
In addition to making life easier, VUI helps people complete tasks more safely. For example, users can place calls while driving without ever taking their eyes off the road or their hands off the wheel.
Voice-based interfaces are more common these days—think, ‘Hey, Google, turn up the speakers.'
3. Command-line interface (CLI)
In a command-line user interface, the user interacts with the computer via lines of text. A programmer or system administrator enters text commands into an operating system or application, and the computer executes those commands.
While not as pretty or as user-friendly as GUIs, CLIs use fewer system resources and are often more efficient for complex tasks involving large amounts of data. For example, a system administrator can use a CLI to easily install software or monitor system health in a multi-server environment.
4. Gesture-based user interface
A gesture-based user interface is a UI type that lets people interact with a computer through movements. Instead of using a mouse or keyboard to enter or access information, a user might make a simple tapping or swiping gesture to progress to the next screen.
Built-in sensors take gesture-based interfaces to the next level: users can shake their mobile phone to interact with apps, or control a device completely hands-free by looking at different parts of the screen.
While the gesture-based user interface is often less precise than other UI types, it allows for a more natural way of interacting with technology.
💡Pro tip: continue to hone your user interface long after you release your product or your site goes live with insights directly from your users.
Place a Hotjar Feedback widget on any page to give visitors an easy way to provide insights on individual UI elements.
Or, talk directly to users with Hotjar Engage, where you can easily find people to interview and ask about their experience with your UI.
Hotjar Engage connects you with users who interact with your product, so they can answer questions about their experience in real time
An intuitive UI starts with user insights
Designing a brilliant user interface begins with user insights. To customize your overall UI design and nail each element, you need to know who your users are and what they want. That means you need to collect data and feedback directly from your users—with tools like heatmaps, recordings, feedback, or interviews—to find out exactly what kind of product they want.
The end result will be a smooth, intuitive UI that keeps your users coming back to your product again and again.
Design a user interface that captivates customers
Use Hotjar's tools to discover how users interact with your site’s UI elements.
