User experience design is a young and constantly evolving field. We have compiled this glossary of nearly a hundred commonly used terms to help new and established designers, researchers and developers communicate their ideas to clients, stakeholders and fellow team members.
This is a growing resource, so bookmark the page and check in from time to time to see updates.
LAST UPDATE: 01.02.23
A/B Testing
A research methodology that consists of randomised experiments with two variants (the “A” and “B”). It can be used during the main testing phase or post launch but requires a large sample size for accurate results.
Accessibility
A set of principles that enables people with disabilities to effectively use a product or service. This includes permanent, temporary and situational disability and ensures a better experience for all users. Common practices include ensuring that the colour contrast for typography meets WCAG 2.0 standards, providing captions for video and audio content etc.
Accordion
A UI component that consists of a vertically stacked list of items. Its functionality is similar to that of tabbed navigation, meaning only one item at a time is expanded.
Adaptive
An adaptive user interface (AUI) is a collection of design solutions created for particular screen sizes and device types. It automatically detects which device is being used and chooses which version of the interface to load accordingly. Its alternative is a responsive interface.
Affordance
A design pattern that gives visual clues as to how a user can interact with a UI element. The most common example in digital interfaces are button states that signify that they “afford” to be clicked to trigger an action.
Breadcrumbs
Also known as a breadcrumb trail, breadcrumbs are a secondary navigation system that shows the user’s location on the site. Just like Hansel and Gretel in the Brothers Grimm’s fairy tale used crumbs of bread to find their way home, website users can use breadcrumbs to understand the site structure and trace their steps back to the homepage.
Breakpoint
In responsive design, a breakpoint is the screen size value at which the layout or functionality changes. For instance, a breakpoint of around 600px often marks the switching point between mobile and desktop layouts.
Button
An interactive UI element that triggers an action. It should have a label, an icon or both that clearly communicates what action it triggers. A single interface often has a hierarchy that includes primary, secondary and tertiary buttons, which perform the role of signposts signifying common task flows. For improved affordance, a button should have responsive states, which include normal, hover, pressed and disabled.
Card
A UI component that provides a summary and an entry point to additional information and visually resembles a playing card. It can include multiple UI elements, such as media, text, buttons and tags, but should function as a single unit with a shared function. For instance, if a card links out to another area of the site, clicking anywhere on the card should redirect you there.
Card sorting
A user research technique that asks participants to sort a number of cards into predefined or new categories based on their intuitive associations. This folksonomy can be used for designing information architecture, navigation, task flows and more.
Carousel
A UI component that allows multiple pieces of content to occupy a shared space by appearing on rotation. Carousels are most commonly used for image galleries, allowing a user to swipe through an entire album without having to scroll.
Checkbox
An interactive UI element that allows a user to make a binary choice, for example, a “yes” or a “no”. In contrast with the radio buttons, in a list of checkboxes each choice is independent, meaning the user can select one, several or all of the options.
CTA button
Call-to-action (CTA) button is a UI element that triggers the main action that the user is encouraged to take. Popular CTA examples are “buy”, “contact”, “subscribe”, “log in” and so on.
Container
A building block of a user interface that holds one or multiple UI elements and controls their size and responsive properties. For example, you may place a grid of cards into a single container with a predefined size (this can be absolute or relative), margin and padding that will allow you to align and scale them as a single element.
Dark patterns
A deception technique in interface design that intentionally tricks a user into doing something they were not intending to do. Many dark patterns exploit Jacob’s Law and rely on the user’s familiarity with common patterns in user interface design. A common example is tricking users into subscribing to a newsletter by making them think they are accepting terms and conditions. Don’t do it.
Design system
A library of UI elements, components and guiding principles for any given interface. The purpose of the design system is to maintain consistency and speed up the design and development process when new features are added.
Design Thinking
A widely-used method for creative problem solving that consists of five stages:
- Empathise
- Define
- Ideate
- Prototype
- Test
Diary study
A qualitative user research technique that gathers insights from participants who are asked to maintain a journal and reflect on their daily experiences over a period of time.
Dropdown list
The most common form of a picker, it is an interactive UI element that allows a user to select a single option from a predefined list. Their functionality is similar to that of listboxes with one key difference: dropdowns only allow to select one value from the list.
Eye tracking
A user research technique that measures and records what the user is looking at any given time. It requires the use of specialised tools and typically presents results in the form of a heat map that helps assess visual hierarchy of information on a page.
Fidelity
The property used to describe how closely the wireframes or prototypes match the look and feel of the final interface. Low-fidelity wireframes can be as basic as pen-and-paper sketches of the layout, while high-fidelity prototypes have the stylistic treatment and at least some interactive properties of the final product.
Flat design
A design trend characterised by minimalist style, vibrant colours and two-dimensional UI elements. It is often celebrated for its modern look and criticised for the lack of affordance.
Fold
The line that separates that upper area of an interface that is immediately visible when a user loads the site (above the fold). It often contains a call-to-action and is used to communicate the purpose of the site and encourage further exploration.
Form
An interactive UI element that gathers information from a user. It commonly consists of textboxes, dropdown lists, checkboxes, radio buttons and other interactive elements.
Gamification
The application of game principles, like competition and rewards, to other products in order to increase user engagement.
Gestalt Principles
A set of visual principles that describe how the human mind perceives the relationship between elements based on their similarity, proximity, continuation, closure and connectedness.
Graceful degradation
The practice of designing and building digital interfaces that will maintain at least their basic functionality even when most of it is not available. For instance, if the desired font can’t be displayed, the system will offer an alternative, meaning the user experience may be disrupted but not ruined.
Grid system
Part of the design system, grids are layout constraints that determine the position of UI elements on a page. They can scale following responsive or adaptive layout principles.
Heat map
In UX, it is a visual representation of the level of activity on a site. It uses a colour scale that commonly depicts temperature range, with red (hot) areas of the interface receiving the most attention and blue (cold) the least. Heat maps are often produced as a part of an eye tracking exercise.
Hover state
A responsive state of an interactive UI element that is triggered when the user places a mouse cursor over it. Hover states improve affordance, but, for obvious reasons, they are not available on touchscreen devices.
Icon
A simplified visual representation of an object, action or idea. As interactive UI elements, icons typically appear on buttons, hyperlinks, and menus and serve as visual clues to help a user navigate the interface.
Information Architecture (IA)
A diagram that defines the structure and organisation of information on a website or mobile app. It is used as a blueprint for wireframes and informs but is different from a sitemap.
Jacob’s Law
A UX principle that maintains that “users spend most of their time on other sites and therefore prefer your site to work the same way as all the other sites they already know”. This doesn’t discourage innovation, but emphasises the importance of prioritising the established UX principles to reduce cognitive load for the user.
Listbox
An interactive UI element that allows a user to select one or multiple options from a list of predefined values. Its functionality is similar to that of a dropdown, but a listbox offers a preview of the first 5-7 options and typically allows multi-value selection.
Mental model
In the context of UX design, this represents the user’s expectations for the product’s functionality. The closer the real and the expected functionality are aligned, the easier an interface is to use.
Menu
A UI element that consists of a list of categories, features or commands. Standard horizontal menu is the most common solution for site navigation, but there are many alternatives. Sites with complex information architecture commonly use mega menus to reveal the full list of categories. Mobile platforms often save space by initially hiding the options behind an icon, such as hamburger, kebab, doner, meatballs or bento menus.
Microcopy
A term used to describe all the text elements forming a part of the UI. Common examples of microcopy include labels, buttons, tooltips, error messages and HTTP response status codes (like 404 pages), and the pop-up asking to install some cookies on your device.
Mockup
An often misused term, a mockup is a static representation of a product. Unlike prototypes, mockups are non-interactive but can be used for some types of usability testing.
Modal
A modal window, dialog or popup is a UI element that sits on top of the main window and temporarily disables it. It disrupts a linear user flow and displays information that must be acted upon – either accepted or dismissed – before the user can continue with the main application window. Common examples are timeout warning messages on banking apps or confirmation requests before performing an irreversible action.
Onboarding
The process of introducing people to a new product and a user flow associated with it. This typically includes a signup process, guided introduction and adjustment of settings and preferences.
Pagination
An interactive UI element used for site navigation, pagination divides content into pages and allows a user to skip between them. It is commonly used for long lists of items that would be impractical to scroll through. The number of items per page depends on their size and functionality, but a good rule of thumb is to limit the number to no more than 50 items on desktop and 20-30 on mobile.
Persona
An archetypal representation of a targeted user that combines insights from user research. Personas are fictional but constructed using information about real users.
Picker
An interactive UI element that allows a user to select an option from a predefined list. The most common example of a picker is a dropdown list, but other variations may be more suitable for complex or highly conceptual entry values, such as date, time or colour.
Prototype
A preliminary interactive model of a final product that is used for usability testing prior to the launch. It can be built from low-fidelity wireframes or high-fidelity mockups but should support quick iterations that don’t require input from engineers or developers (read about the difference between the two here). Unlike static mockups, interactive prototypes allow to test functionality and should prioritise usability over aesthetics.
Progress bar
A UI element that visualises the progress of an extended computer operation, for example file transfer or download. This can be expressed as a percentage or steps (a step progress bar is commonly used in wizard interfaces).
Radio button
An interactive UI element that allows a user to choose one item from a predefined set of mutually exclusive options. Unlike a checkbox list, radio buttons don’t allow the selection of multiple answers.
Responsive
The layout of a responsive user interface (RUI) gets adjusted for the device on which it is viewed. The elements may rearrange, stretch and shrink, or change appearance (a common example is a hamburger menu that replaces desktop navigation on mobile devices), but the content on a page should not change. Unlike adaptive UI that consists of a number of separate design solutions, responsive interface is a single design that gets optimised for different device types.
Slider
An interactive UI element that allows a user to select a specific value or a range of values on a scale. It’s commonly used for specifying a time period, price range or rating.
Style sheet
Also known as a style guide, this is a collection of all styles, rules and principles for a given interface. It typically includes instructions on the use of colour and typography and examples of all UI elements and their responsive states and forms a part of a wider design system. A style sheet is a reference point that helps ensure a consistent look and feel of a product.
Sitemap
An inventory of all labelled pages of a website or an app, which sometimes includes additional notes on goals, content or functionality. It is informed by the information architecture and should be reflected in the navigation.
Skeuomorphism
In UI design, this is the practice of creating interface elements that inherit non-functional cues from their real-world counterparts. A common example is adding shadows to buttons to create a sense of depth in a two-dimensional interface. This is the opposite of flat design, and, when done right, results in an increased affordance.
Storyboard
A visual representation of a user’s experience with a product that borrows its format from comic strips. A storyboard helps understand the context in which the product is being used. It should inform the user flow and user journey map.
Tab
An interactive UI element used for site navigation. Its functionality is similar to an accordion or a carousel, meaning tabs allow for multiple pieces of content to occupy a shared space on the page. Following the skeuomorphism principles, their appearance and functionality references the real work tabbed dividers in the filing system.
Tag
A UI element that is used to assign a category to an item. Its functionality is very similar to a keyword with one difference: keywords are derived from the content, while tags are assigned manually and can represent any type of category.
Task flow
A visual representation (typically in a form of a linear diagram) of the steps a user takes to accomplish a task. You should use the user stories to help you identify the key tasks. The resulting task flows will form part of a wider user flow diagram.
Toggle
Also known as a switch, it is an interactive UI element that allows you to turn a setting on or off.
Tooltip
A message that is hidden by default and appears when a user clicks on an icon or a link to reveal it. Tooltips should be used for non-essential information that only a small number of users will need, e.g. tips for filling in a form.
UI (user interface)
Broadly speaking, user interface is an area where human-computer interactions occur, meaning pretty much everything you see on the screen of your digital device.
UI component
A group of UI elements with a shared function but individual functionality. Some common UI components are cards, carousels and accordions. A card may consist of an image, text, button and tags, all of which will have a different functionality but share a single function, for instance, represent and link to a single blog entry.
UI design
The design of a user interface for machines and software. Closely linked to UX design, the UI design typically begins when most of the research, strategic planning, user journey mapping and wireframing are done. It’s primarily concerned with the look and feel of an interface and its interactive features, but adheres to the same usability principles and accessibility standards as all UX design processes.
UI element
A functional building block of a user interface. Some common UI elements include navigation, search, buttons, breadcrumbs, tooltips, toggles, checkboxes, radio buttons, modals and much more. Most elements can be broken down into smaller parts, for instance, a button may include a text label, an icon and a container with or without a border, but these parts should work together to perform a single function.
Usability testing
Also known as user testing or usability study, this is a user research technique that helps evaluate how easy and enjoyable a product is to use. Since its primary focus is on the user interface and its functionality, the usability testing typically happens at the late stages of the design process and involves high-fidelity prototypes or even a fully developed interface. Usability testing may take the form of an interview, but, unlike a user interview, its main focus is the product and not the user.
User flow
A flow chart that visualises a set of steps a user takes to achieve their goal within an interface. This planning tool is often used in conjunction with an information architecture diagram and sitemap to visualise how the user will progress through the design and identify any issues, such as gaps or dead ends.
User interview
A user research technique during which a researcher asks a user (real or targeted) a set of questions that will inform the design process. Unlike usability testing, user interviews are focused on a person rather than the product. Because of that, they are typically conducted in the early stages of the design process and inform personas, storyboards, user stories, user journey maps etc.
User journey map
A map of the key steps of the user flow with additional layers of information about their motivation, emotional state and pain points. If done right, user journey maps visualise the user’s relationship with the product and helps to identify weaknesses and opportunities for improvement.
User research
A set of research methods that helps gather insights about a product and its performance by testing it with representative users. Some of the most common user research techniques include user interviews, usability testing, surveys, card sorting, diary studies etc. User research can take place at various stages of the design process and different exercises will be used to gather insights about the information architecture, wireframes and the UI design.
User stories
Short statements that summarize desired functionality from the point of view of a user. They typically follow a simple template: as a <user type>, I want <a goal> so that <a reason>.
UX design
The user experience design is the practice of creating and refining digital products that are useful, usable and enjoyable. It is a multi-stage process of enhancing the experience that people have while interacting with the product.
Whitespace
Areas of a user interface that are intentionally left unoccupied. When used right, whitespace helps convey the structure and hierarchy of information on the page and makes the interface less cluttered.
Wireframes
Often described as a skeleton of the user interface, wireframes are the initial visualisations of its layout. They can range from low to high fidelity, but should represent the content structure and functionality and NOT its form or style.
Wireflow
Also referred to as a screen flow, it is a version of the user flow that shows wireframes of the future interface for each of the steps.
Wizard
A user interface type that guides the user through a series of predefined steps. It’s commonly used for complex tasks that are performed infrequently, such as completing an annual tax return, to help minimise the number of user errors.
Widgets
A widget is a graphic and condensed component that displays information and provides a link to a more detailed page within that digital app or website. They provide a visual representation of a core feature of the platform so need to be clear, informative and engaging.
Toast messages
A toast notification is a lightweight and easily digestible notification to let users know that a certain action has occurred. Toast messages tend to be one or two lines long and provide the user with information and feedback about the action that has just been performed. Users don’t need to dismiss toast messages, they tend to disappear just as quickly as they have appeared, much like a piece of toast covered in delicious honey!
Onboarding screens
An onboarding screen, or set of screens is a way to introduce users to a new product, app or feature. The onboarding journey needs to be simple and user friendly to keep the user engaged and interested. It often provides a guided introduction to the product, sets up initial preferences or points out new graphic elements in an interface. They should be easily digestible and sweet, just like a lemon sherbert.
Contextual help
Contextual help, also known as context-sensitive help, provides support for the user relative to the area they are currently interacting with. For example, if you’re completing a form, contextual help will provide inline feedback allowing you to correct your errors before submission of the form.
Have a call
We’d love to talk to you about how Make it Clear can support your organisation. Book a call here.