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.1 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. Accordion

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 and 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 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.

Card

A UI component that groups related information into a flexible-size container that visually resembles a playing card. It can include multiple UI elements, such as images, 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.

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 that allow 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 contract 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:
  • Empathize
  • 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’s 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 a 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 the 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, continuation, closure, proximity, figure or ground, and symmetry and order.

Graceful degradation

A 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’s 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 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. Default and hover states of a button

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 organization of information on a website or mobile app. It’s 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, hotdog, or their veggie-friendly alternatives, such as strawberry or candy box. Menu icon variations: hamburger, kebab, hot dog, bento box, strawberry, candy box

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 popup 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 component 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.

Navigation

A UI element that facilitates movement between different parts of the interface. Sites with complex information architecture often have hierarchical navigation allowing a user to “jump” between various levels. Navigation is most commonly represented with a menu, but breadcrumbs, UI cards and gesture navigation (swiping) are other examples.

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’s 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. 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’s 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’s informed by the information architecture and should be reflected in the navigation.

Skeuomorphism

In UI design, this is a 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 categories.

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 a part of a wider user flow diagram.

Toggle

Also known as a switch, it’s an interactive UI element that allows 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, modals, 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, 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 and 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 the user interview, its main focus is the product and not the user.

User Experience (UX)

“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

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 focussed 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 identify its 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 interview, 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 summarise desired functionality from the point of view of a user. They typically follow a simple template: as a , I want so that .

UX design

The user experience design is the practice of creating and refining digital products that are useful, usable and enjoyable. It’s 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’s 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.