Learn / Guides / UI design guide
UI design glossary: 15 terms you need to know to delight users in 2023
In today’s digital world, great user interface (UI) design plays a huge role in how users experience your website or product. A good UI design ensures they stick around and engage with your product or website for longer, whereas a bad UI design could drive them away completely.
However, the field of UI design is full of interesting (and often confusing) terms that can get the best of even the most seasoned professionals. Knowing the lingo will give you a great foundation to create a functional, intuitive, and accessible UI for your users.
This glossary takes you through 15 essential terms that dominate the world of UI design.
Whether you’re a budding designer or have several years on the job, learning these key definitions and phrases will help you create a better product experience for your users, easily communicate ideas with your team, and speak confidently about your UI design.
Create a UI design your users love
Hotjar’s tools give you the insights you need to build a beautiful, user-friendly UI based on real customer feedback.
Essential UI design vocabulary to know in 2023
Do you know your prototype from your wireframe? Your user flow from your user persona? If not, you’re in the right place. Our handy glossary translates industry jargon into simple terms to help you understand the most popular tools and concepts you need to create an excellent product experience for your users and customers.
1. User interface
A user interface (UI) is the place users control an app, website, or machine. An interface lets you take certain actions depending on which elements—like buttons, icons, or text fields—you interact with. For example, think about the maps app on your phone. You type in the ‘text field’ to enter a location and click a ‘button’ to get directions. Together, all these elements on the screen make up the user interface.
2. Graphical user interface
A graphical user interface (GUI) is a type of interface that lets users complete certain tasks by manipulating elements on the screen (like icons and scroll bars). It helps users do things without needing to type commands—dragging a document into the ‘Trash’ file on your desktop, for example.
3. Command line interface
A command line interface (CLI) is an interface where the user has to type in commands to perform computer functions—like running a program or setting the location of a file. Some argue that the command line interface isn’t actually a user interface at all, but a programming language.
4. Voice user interface
A voice user interface is where the interaction between a user and a device happens through voice input and output. Apple’s assistant, Siri, is a great example of a voice user interface. The user gives a verbal command, like “Hey Siri, what’s the weather like today?” and the software carries out the desired function by telling the user about the weather.
5. Touch user interface
Another sub-category of UI, a touch user interface (TUI) is one where the interaction between a user and device occurs through physical touch. For example, the touch of your finger on your smartphone’s screen lets you carry out many different functions, like typing, opening and using apps, or making calls.
6. Tooltip
A tooltip is a short message that appears when a user hovers over an element (or a little ‘i’ icon next to it) on the interface. Businesses use tooltips to provide useful or additional information to help guide users through their journey. You often see tooltips during onboarding and product tours.
7. Input controls
Input controls are interactive elements of the user interface that allow people to input information. This includes things like checkboxes, buttons, toggles, and text fields. Input controls are one of the essential building blocks of UI design, providing interactive touch points for the user while they navigate through a website, app, or product.
8. Wireframe
A wireframe is a simple physical or digital drawing showing the layout of a user interface. In a wireframe, you usually keep things like copy, styles, and colors to a minimum. Instead, simple boxes, lines, and shapes give a clear overview of the screen’s layout and structure.
9. Prototype
A prototype is a sample of your final product for you to test your ideas and designs before the development stage. Prototypes can be simple paper models with hand-drawn ‘screens’, or they can be interactive, digital models that function much like the final product.
10. Design system
A design system is a collection of reusable components and guidelines that a team or company uses to design and develop a product. A design system is usually accompanied by detailed documentation that provides standards for when and how to use the assets within it. For example, a design system might show which color and style teams should use when creating a primary button. The documentation will provide rules on how to use that button, like only using it once per screen.
11. User flow
A user flow is a flowchart or diagram that shows the user each step they can take as they move through the product from the starting point—like an onboarding screen—to the endpoint—like making a purchase. Mapping out this process helps designers optimize the user experience and spot any issues throughout the user journey.
12. User persona
A user persona is a fictional profile of a person representing your ideal user. For example, a user persona for a premium dog food brand might be a 30-year-old dog owner with a higher-than-average income and an interest in canine nutrition. Businesses base the user persona on research they conduct into the needs, goals, pain points, and behavior of their target audience. It’s a helpful tool to understand users and ensure that product decisions are always customer-centric.
13. Responsive design
A responsive design is one that adapts depending on the device, platform, and screen size of the user. Responsive design creates a visual consistency for your product while offering a better experience for your users, no matter how they’re accessing your product or site.
14. Scrollytelling
A mashup of ‘scrolling’ and ‘storytelling’, scrollytelling is where elements of a page (like images, videos, or blocks of text) only appear when the user scrolls. It’s a way to control the pace of the content in a dynamic and visually engaging way.
15. Invisible design
Invisible design is a concept where the user experience is so intuitive that the design itself goes mostly unnoticed. For example, when an app allows you to take a photo of your credit card rather than enter the details manually. The design itself may not be revolutionary, but it doesn’t matter. What matters is that it simplifies the payment process and creates a more enjoyable user experience.
