DESIGN GLOSSARY

A-Z of Enterprise UX Design and Front-End Engineering

Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1
Life at f1

- A -

A/B Testing

The comparison of two designs against each other to determine which performs better.

Accessibility

Designing experiences for people with disabilities.

Affinity Diagramming

An exercise used to organise a large number of data and ideas, sorting them into groups based on their natural relationships and into more meaningful categories.

Affordance

Affordances are clues that tell us how an element should behave.

Alert

Use alerts to deliver a persistent, in-app message that informs users of a particular change state.

Accessible design

Accessibility or accessible design helps users of all abilities to interact with a product.

Accordion

In UI design, an accordion is a type of menu that vertically stacks items that lets the user expand and collapse the content.

Alignment

Alignment is the design principle that is used to create structure and readability. It builds order and helps lead people through your design.

Animation

In UI terms, animation is the act of adding motion to any UI element to improve a product’s interactivity.

Adobe Xd

It is one of the most popular UX design tools and is part of the Adobe Creative Cloud suite, it’s a vector-based design tool used for creating wireframes, prototypes and animations.

Adaptive

An adaptive interface is a collection of layouts designed specifically for different devices. it detects the device type being used and displays the layout designed for it.

Analytics

Analytics measure human behaviour on a site. They help us better understand and interpret patterns of behaviour on the products we use.

API

This is actually used mostly by developers but designers use this term as part of everyday work as well.

Agile software development

A software development process in which requirements (and solutions) evolve through the collaborative effort between product development teams and their customers.

Augmented reality

A technology that adds a computer-generated, visual layer on top of the real world.

Avatar

Avatars represent users online who have not uploaded an image for themselves. It is commonly seen in comment threads or in games.

Audit

A UX audit reviews an existing product (or an aspect of the product) to identify issues in the overall user experience.

- B -

Benchmarking

Evaluating a user interface, against a standard or external comparator.

Branding

The process of communicating a unique selling proposition sets a product or service apart from the competition.

Breadcrumb

Type of navigation that helps users understand their location in a website or app.

Banner

A banner displays an important, succinct message, and provides actions for users to address. It requires a user action to be dismissed.

Button

A graphical or web element that executes an action when clicked.

Breadcrumbs

Breadcrumbs allow users to see their current location within the system.

Baseline

The baseline is the invisible line where text sits on a page. In UI design, the baseline is an important measuring tool between text and any other elements.

Bento menu

Named after the Japanese lunch box that packs meals into neat sections, a bento menu is a menu with gridded items. It provides an overview of multiple items at once.

Beta testing

Beta testing is when one launches an unfinished product to a select group of users in order to see how it performs in the real world.

Brand Identity

Brand identity captures and conveys the essence of what a company is all about. It’s built on company values and how they want people to feel when they interact with the products or service.

Back-end development

In software, the backend concerns the portion that the user doesn't see, acting as the backbone logic and code that gives an application functionality.

- C -

Call-To-Action

A message that encourages a reader, or a consumer to take an action on the website.

Card Sorting

The process of generating ideas and solutions in a short amount of time.

Case Study

A UX case study presents the process of how a particular design problem was solved.

Customer Experience

CX refers to the overall experience of a user when they interact with a brand through its multiple platforms and products.

Coachmark

Coachmarks are used to draw a person's attention to a part of the UI, and increase engagement with that element in the product.

Command Line Interface

The command line interface is no longer common as a form of basic user interface in everyday consumer products, but it is still in use under certain circumstances.

Checkboxes

Alternative way for selecting none, one, or multiple options.

Charts

Charts are a common way of expressing complex data sets because they depict different data varieties and data comparisons.

Card

Cards group related content side-by-side so that users don’t have to scroll through a list to find the information they are looking for.

Confirmation dialogues

Confirmation dialogues are responsible for collecting user consent for a particular action. For example, collecting user consent for a delete action.

Containers

A container is a UI element designed to contain page elements to a certain width based on the size of a user’s screen.

Combo boxes

Combo boxes allow users to either type a custom value directly or select a value from the list. It is a combination of a drop-down list or list box and a single-line input field.

Contrast

The degree of difference between two juxtaposed elements.

Chatbots

Chatbots lets the user ask questions to the system via a chat interface. They are a popular customer service tool and resemble the experience of texting a friend.

Clickstream

When the user lands on a site, they click their way through it to complete a task. This is what a clickstream represents: the path of clicks the user took on it to accomplish a goal.

Commits

Throughout the development process, developers create commits whenever they have reached a good point in their work. Commits are similar to drafts.

Conversion rate

The Conversion Rate of a product or site is the percentage of users who complete a desired action.

Colour theory

The study of how colours make people feel and respond.

Closed card sort

In closed card sorts, researchers provide pre-determined categories for participants to sort cards into.

Cognitive biases

Cognitive biases are errors in reasoning, memory or other cognitive processes that result from holding onto existing beliefs regardless of contrary information.

Content strategists

Content strategists help maximise the usability and profitability of content, throughout the full content lifecycle: analysing, planning, writing, editing, distributing, managing and monitoring content.

Content strategy

The strategy, organisation and management of content that aligns between user and business goals.

- D -

Dark Patterns

Deceptive design elements created to mislead website visitors into making unintended and possibly harmful choices.

Design System

A documented catalog of components and styles used within a product, including how and why each should be implemented.

Design Thinking

A set of cognitive, strategic and practical processes by which design concepts are developed.

Date picker

It is defined as an input field that allows a user to choose a date via text input or app interaction with a calendar interface.

Dialogue

A pop-up window that appears before/after an action.

Dropdown buttons

The dropdown button is the clickable button used in a dropdown list to reveal, yes, a list of items.

Design systems

A collection of design assets, guidelines, constraints and best practices to adhere to when embarking on a new design project.

Decision matrix

A decision matrix is referred to as a prioritisation matrix. It’s a framework used to evaluate and prioritise ideas based on a set of predetermined criteria.

Design deliverables

Design deliverables are the tangible “things” or artefacts a UX designer produces throughout the design process. UX deliverables include things like personas, user journey maps, wireframes and prototypes.

Design exercise

Often a take-home "quiz" of sorts to determine a design process.

Dark pattern

Tricks used in websites and apps that cause unintended user action, like buying or signing up for things that you didn't mean to.

Design facilitation

The skill of facilitating design process and efforts, such as presenting to stakeholders or conducting design workshops.

Design sprint

The design sprint is an increasingly popular practice which condenses and accelerates the product design process.

Diary study

A diary study is a UX research method used to gain insight into how users behave in real-world situations and everyday contexts.

- E -

Empathy Map

Empathy maps are collaborative tools that help us in visualizing user behavior, and feelings.

End-User

A person who is intended to ultimately use a product.

Ergonomics

The application of psychological and physiological principles to the engineering and design of products, processes, and systems.

Experience Design

The process of creating evidence-based, interaction designs between human users and products or websites.

Easing

Easing is the slow and gradual movement of an animated UI element.

Empathy

Empathy is the ability to metaphorically put yourself in someone else’s shoes and it’s the very foundation of good UX design.

Ethical design

It is the process of ‘designing for good’ keeping in mind the user’s wellbeing.

Eye tracking

It is the method to track the user’s eye movement as they look into a website.

Edge case

In software design, edge cases often threaten to break a system and the user experience. Edge cases deal with the extreme maximums and minimums of parameters.

Ethnographic study

A qualitative research method of observing users in their natural habitat to understand their behaviour.

- F -

Fitt’s Law

A model that helps designers place and position the size and location of user interface elements for their optimal utility.

Flat Design

A user interface design style that uses simple, two-dimensional elements and bright colors.

Flowchart

A flow chart is a visual representation of a series of steps in a process that explains how the process works.

Focus groups

A focus group is a research technique used to collect data through group interaction.

Fluid UI

Fluid UI is a prototyping and wireframing software tool used to design mobile touch interfaces.

Field

An area in the WUI (Web User Interface) or GUI (Graphical User Interface) where you need to enter information.

Form

Forms are a regular feature in our lives but thanks to autofilling features, the labour of forms has been made a lot easier.

Floating Action Button

A user interface (UI) element that sits on top of a screen design, often in the bottom-right-hand corner, and doesn’t move when the user scrolls.

Fidelity

Fidelity is used to describe the quality of wireframes and prototypes. In other words, how closely the wireframe or prototype resembles what the live product will look like.

Figma

Figma is a popular UX design tool used for wireframing, building out design systems, collaborating, running workshops and more.

Full-stack designer

A full-stack designer is a designer who has the skills and know-how to take on all the “stacks” or layers of the product design and development process.

- G -

Gamification

The use of game metaphors, and elements in non-game environments to create similar experiences to those experienced when playing games.

Gestalt Principles

Gestalt Principles talk about human perception and how humans group similar elements, and simplify complex images while perceiving them.

Graphic Design

Graphic design is the creation of visual compositions to solve problems and communicate ideas through typography, imagery, color and form.

Grid System

A grid system works as a framework that helps product teams to arrange UI elements to maintain good visual balance across pages.

Graphical User Interface (GUI)

The graphical user interface, or GUI, is the type of interface with which the majority of people are the most familiar.

Grids

In UI design, a grid is a layout constraint that determines where UI elements will sit on a screen or page.

Gutters

Gutters are the vertical strips between columns in grids that are used to prevent elements from bumping into each other.

Graphic designer

Graphic designers are visual communicators who produce work across both digital and print mediums such as posters, brochures, invitations, and business cards.

GitHub

GitHub is a collaborative development platform used by developers.

Gradient

It is the gradual change in colour from one tone into another.

- H -

Heuristic Evaluation

A usability inspection method for computer software that helps to identify usability problems in the user interface design.

Hick’s Law

Hick’s Law states “the time it takes to make a decision increases with the number and complexity of choices”.

High Fidelity Prototype

A prototype that is polished and similar to a final design.

Helper element

Elements such as icons, breadcrumbs, sliders and notifications fall into this category.

Hierarchy

Hierarchy is a UI design principle used to present information with different levels of emphasis according to its importance.

Human factors

The study of human behaviour and capabilities to find the best ways to design products for maximum effectiveness, safety, and delight.

Hybrid card

Hybrid card sorts allow for participants to both sort cards into predetermined, and also the option to create their own categories.

How Might We

How Might We questions are a great way to progress from problem to solution while keeping the user at the forefront.

Hybrid App

Hybrid mobile apps combine both native and web technologies. They’ll often use a combination of technologies like HTML, CSS, and JavaScript and will live inside a native container that lets it access device capabilities.

HTML

Hypertext Markup Language, or HTML, is the standard programming language used to create websites.

- I -

Ideation

Ideation refers to a process or method for forming ideas or concepts.

Inclusive Design

Inclusive design is a design process in which a product or service is designed to be usable for as many people as possible.

Infographic

Infographics are visual representations of information designed to communicate complex data easily.

Interaction Design

The practice of designing interactive digital products and considering the way in which users will interact with them.

Input elements

Input elements are responsible for handling different user inputs.

Icons

It’s a simplified symbol that is used to help users to navigate the system, presenting the information and indicating statutes.

Information architecture (IA)

Information architecture is the practice organising and arranging information to make it understandable.

Interaction designer

Interaction designers are focused on creating key interactions for the product, they're often expected to be able to create highly interactive and complex prototypes.

Intuitive design

It’s design that the user can instantly understand and use without needing any kind of tutorial or instruction.

Iterative design

Iterative design is the practice of continuously improving, refining and updating the product.

InVision Studio

InVision Studio is another powerful tool that all designers work with. It includes features and functions for drawing, wireframing, prototyping and animating. It’s used for both UI and UX designing.

- J -

Jobs-To-Be-Done

Developing products based on understanding both the customer's specific goal and the thought processes that would lead that customer to use that product.

Job Stories

Job stories help define user tasks in product design.

Journey maps

Journey maps are often presented as timelines to demonstrate interaction points covering the beginning, middle and end of an experience.

Java script

It is the language that helps the designer make or create elements on a page more interactive to the users.

- K -

Kerning

Kerning is the spacing between individual letters or characters. It focuses on a type looks.

Key Performance Indicators

KPIs are measurable values that help in understanding and tracking the performance of a product.

- L -

Landing Page

A standalone web page that a person "lands" on after clicking through any digital location.

Lean UX

Lean UX, is a collaborative user-centric approach that prioritizes “learning loops” over design documentation.

Localisation

The degree to which design, language, terminology, features, and functionality are adapted for a specific market.

Low Fidelity Prototype

Low-fidelity prototypes are simple and low-tech concepts.

List of links

A list of links consists of links. Sidebar with a category list is a good example of this. Links can be both internal and external.

List boxes

List boxes, like checkboxes, allow users to select multiple items at a time,but are more compact and can support a longer list of options if needed.

Legibility

The measure of how easy it is to distinguish one letter from the next.

- M -

Market research

Market research is an organized effort to gather information about target markets and customers.

Material Design

Material Design is an Android-oriented design language developed by Google in 2014

Microinteractions

Microinteractions are small moments where the user and design interact.

Mockup

Mockups are representations of the final design product, which are static in nature.

Modal Windows

It’s used to show content on top of an overlay and it blocks any interaction with the page until the overlay is clicked, or a close action is triggered.

Message boxes

It’s a small window that provides information to users but typically doesn’t prevent users from continuing tasks.

Menu-driven Interface

The menu-driven user interface provides you with a range of commands or options in the form of a list or menu displayed in full-screen, pop-up, pull-down, or drop-down.

Mental model

The way of explaining how something works is known as the Mental model. It is often influenced by their environment.

Miller’s law

The average person can only keep seven (plus or minus two) items in their working memory.

Minimal viable product

A product developed with only the most important features for the purpose of launching to an early set of users to provide feedback on the product.

Microcopy

Microcopy is the text which guides a user throughout a digital product.

Modal

A modal is a box that pops up outside of the main screen when the user clicks something on the current screen.

Multivariate testing

The goal of multivariate testing is to determine which combination of variations performs the best out of all possible combinations.

Mobile Web

The mobile web isn’t a separate section of the web or a special place. The term mobile web refers to jumping online on a mobile device.

- N -

Needfinding

The research process of identifying a user’s need for a solution.

Net Promoter Score

A score index ranging from -100 to 100, the Net Promoter Score is used to measure brand loyalty.

Navigation

An element of user interface (UI) design that manages how users move between sections and features in an app or website.

Navigation menu

UI element with several values that the user can select. They are taken to another area of the website/app from there.

Notifications

It is an update indicator that announces something new for the user to check. Typically shows completion of a task, new items to check etc.

- O -

Occam’s Razor

Occam’s Razor states “Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.”

Open Card Sort

With no pre-determined categories users sort cards into categories that make the most sense to them.

Open Questions

Questions whose answers include what, how, why, when, and where components.

Output element

Output elements are responsible for showing results against various user inputs.

Onboarding

Onboarding is the process of getting new users familiar with your product.

Open source

Open source enables a designer to modify and build elements with it without running into trouble.

Opacity

The degree of transparency an element has. The lower the opacity, the more transparent an element is.

- P -

Pairing Designing

The practice of putting two designers together to solve design problems.

Paper prototyping

The process of creating paper representations of digital products to help in realizing concepts and test designs.

Persona

A representation of the target user.

Product Design

The process of creating solutions to real-world problems, by creating usable products.

Peer transitions

Occurs between screens at the same level of hierarchy.

Picker

A picker is a UI element that allows the user to choose, for example, a date, time, or color. Pickers tend to be used where there is a very high number of options, or the input is highly conceptual.

Progress bars

A progress bar indicates the progress of a process. Typically, progress bars are not clickable.

Pane

An independent area in the Web User interface and Graphical User Interface that you can scroll and resize.

Panel

A toolbar or a control panel.

Pixel Density

The number of pixels that fit into an inch is referred to as pixel density.

Paginations

This feature divides the content between pages and allows users to navigate between them.

Product management

Product management is the planning, forecasting, marketing and/or production of a product or service.

Product managers

Professionals who navigate and manage the product cycle, from researching users and managing a roadmap to overseeing the development of the product.

Pain-points

Pain-points are any issues, problems, frustrations or hiccups a user encounters during a given experience or interaction.

Portfolio

A UX portfolio is a collection of best design work. It demonstrates skills and abilities of a UX designer.

Paradox of specificity

The paradox of specificity states that when a designer designs with a very specific user group in mind, he/she actually creates products that appeal to a mass audience beyond that target group.

Prototype

A tool to show preliminary design, pending user feedback and consultation for refinement.

Product roadmap

A product roadmap maps out the vision and strategy for a particular product and sets goals and priorities for the development of the product.

- Q -

Quality Assurance

Quality assurance is a way of preventing mistakes in products and avoiding problems when delivering services to users.

Questionnaires

A research instrument consisting of a series of questions and other prompts for the purpose of gathering information from respondents.

Qualitative user research

User research is a crucial part of the UX process and it can be either qualitative or quantitative. Qualitative user research provides insight into the users’ thoughts, motivations and behaviours.

Quantitative user research

UX designers and researchers conduct quantitative research to gather objective, measurable data about their users.

- R -

Rapid Prototyping

A design workflow that consists of ideation, creating a workable prototype, and testing to discover and validate their ideas quickly.

Requirements Gathering

The process by which the scope and detail of a requirement is elicited from customers, users and stakeholders.

Responsive Design

A design approach that responds to the user’s behavior and environment based on screen size, platform, and orientation.

Readability

The degree to which users can easily and accurately read information on a web page.

Radio buttons

Radio buttons allow users to select only one of a predefined set of mutually exclusive options. It is generally used for filling forms.

Redlining

Redline refers to the literal guides, which are often red lines, within a document that communicate exact spacing, margin, etc.

Responsive web design

The practice of making web pages render well on a variety of devices and screen sizes.

Return on investment

The general idea of ROI helps product teams evaluate whether certain efforts are worth pursuing.

Resolution

The amount of detail an image has.

Refactoring

Refactoring is the process of cleaning up and tidying code without affecting functionality, essentially increasing its quality.

- S -

Scannability

The ease with which a body of text can be digested by the user.

Service Design

Service design is the process by which services are designed and developed from a user-centered, both from the employee’s and user’s perspective.

Storyboard

A storyboard is a graphic organizer that consists of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture.

Styleguide

A document containing the styling options that are repeated throughout a design, for the purpose of maintaining visual consistency throughout an experience.

Search fields

A search bar allows users to enter a keyword and submit it to the system expecting the most relevant results.

Sidebars

Sidebars also contain other groups of elements and components. But that can be switched between collapse and visible state.

Saturation

The degree of intensity and vividness of a colour.

Sitemap

The list of pages of a website.

Scale

The change in the size of an object while keeping its shape and proportions intact.

Sketch

Sketch is an industry-standard, all-in-one digital design tool. It includes tools for collaborative design, prototyping and developer handoff.

Spec

Spec refers to specification, which are technical requirements that to be implemented during the product development process.

Stakeholder interviews

Stakeholders are the people within a company or organisation who are invested in the success of the product a designer designs, and who can offer insights and input to inform the design process.

Surveys

Surveys are another popular user research method. One can gather both qualitative and quantitative data through user surveys, depending on how the questions are framed.

- T -

Task Analysis

The process of listing tasks or the steps a user takes to complete any given goal from the user’s perspective.

Taxonomy

The practice of classifying things and concepts.

Tree Testing

A UX research method designed to understand and evaluate the findability, labels, and structure of a website’s navigation menu.

True Intent Study

A research method designed to collect data to understand user’s objectives as they visit a website.

Tab

A graphical or web element that groups a set of actions.

Toggle

A UI element that allows the user to turn a setting on or off.

Tooltip

A tooltip shows users hints when they hover over an element indicating the name or purpose of the item.

Toast

It refers to a UI feature where an event triggers a small text box to appear on the screen.

Terms

They are synonyms of descriptions.

Text fields

Text fields allow users to enter text.

Tags

Tags allow users to find content in the same category. Some tagging systems also allow users to apply their own tags to content by entering them into the system.

Typography

Typography refers to how text is arranged and styled.

T-shaped designer

T-shaped designers are strong generalists who know how to do all aspects of design sufficiently, but excels especially in one discipline.

Taskflow

A series of steps that users complete for a specific task.

Technical Debt

Technical debt is similar to design debt but instead of taking a toll on the design system, it takes it on the code.

- U -

UI Kit

A user interface kit is a collection of assets that contains a set of design elements such as UI components and styles.

Usability

The capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience.

User Interface

The medium through which users interact with an experience, product or device.

UX debt

UX debt is the result of taking shortcuts in the design process in order to quickly reach a solution or produce a deliverable.

UX documentation

UX documentation captures all the steps you follow throughout a given design project.

Usability testing

Usability testing is the act of evaluating products or services by testing them with users.

User-centred design

User-centred design (UCD) places the end user front and centre throughout the product design and development process.

User Flow

User flows are paths that users follow through an experience.

User journey map

A user journey map is a visualisation which depicts all the touchpoints between a user and a product across a given time period.

User Interview

A user interview is a common UX research method, it asks the user questions in order to gain insight into their thoughts, expectations, goals and pain-points in relation to a particular problem, product or experience.

User stories

A user story is a brief, simple statement which defines the purpose (or one of the purposes) of creating a product.

User onboarding

User onboarding is the process of orienting users to a new experience, product or feature.

UX writing

It’s the process of planning and writing all the text found on a digital product interface, with the goal of guiding the user through the experience.

User testing

User testing is when designers test their product, new feature or prototype on real users in order to gain feedback and inform future iterations of the product.

- V -

Virtual Reality

A simulation of 3d environments that users can interact with, often using special electronics like VR helmets, goggles, gloves, and sensors.

Visual Hierarchy

Visual hierarchy is a way to visually rank your design elements. It’s based on the order of visual importance, rather than aesthetics or design styles.

Visual Design

A discipline that combines design and information development in order to develop and communicate a media message to a target audience.

Voice user interface

Interfaces that enable users to use voice input to control computers and devices.

- W -

Wayfinding

An information system that guides people through a physical environment and enhances their understanding and experience of the space.

Website

A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server.

Whiteboard Exercise

Whiteboards are used for collaborative design and brainstorming.

Wireframe

A wireframe is a simple visual guide that represents the skeletal framework of a website or digital product.

WYSIWYG

An acronym for "What you see is what you get." It describes the way in which the layout on the graphical screen is a representation of the printed version of the document.

Widgets

It’s an element of interaction, like a chat window, components of a dashboard, or embeds of other services.

Wizard

A dialogue that walks a user through the sequence of steps to perform a particular task.

White space

White space is the empty space around and between different elements in the design.

Waterfall

Waterfall is a software development method with a relatively linear, sequential process.

Webapp

Webapps are short for web application, which is a computer program that users run in their web browser, also referred to as "client-side."

Enough Talking
Let's Collaborate

OR mail to: business@f1studioz.com