/
Design process

UI/UX Terminology: Speak the Same Language With the Designer

19

mins to read

Developing a website or an application is impossible without communicating with your internal team and contractors. As a product owner, you can’t just hire a UI/UX designer and wait till the product is ready. To feel comfortable and to be able to offer, discuss, accept or decline different design ideas at each step of the product design process you have to understand basic UI/UX terminology.

Eleken is a SaaS design agency and we believe that clear and transparent communication between the customer and the designer determines a great deal of the final product’s success. Just take a look at reviews from our clients. For each of them, communication played an essential role. 

Reviews

To help you talk about designing stuff with your employees, colleagues, or other experts freely, we have compiled a list of the most important UI/UX terms. Now, whenever you hear a buzzword in the office, read a blog post on a design-related topic, or see some gibberish in Slack from your designer, refer to this UI and UX design vocabulary to make sure you got it correctly.

UI/UX glossary

Here you will find answers to such basic questions as “what is UI/UX design?” and more specific ones like decryption of acronyms SWOT or MVP.

For your convenience, we grouped all terms into several clusters. Each cluster contains topic-related terms sorted alphabetically:

  • General terms
  • UI/UX acronyms
  • UX design process and methods
  • Design elements
  • The language of developers

Let’s start with the most essential UI/UX design terminology.

General terms

This cluster contains basic vocabulary that you will often encounter when talking about design.

Accessibility

A set of practices that makes the interface easy to interact with to a wide range of people, including people with disabilities. It uses a balanced color scheme, alternative keyboard controls, special page layouts, customized versions, and other tools to help people with disabilities use the product.

Design system

A set of brand values, tools, and components that makes it easy to create, test, visually, and technically update products, while ensuring their consistency.

Read about the design systems of well-known companies to see what it is in practice.

Design thinking

A method of developing products and services aimed at solving the existing problems of potential customers. Design thinking is a creative process of generating and implementing ideas, the main task of which is to think outside the box to create a valuable design solution.

Flat design

A minimalist style of user interface design. It is characterized by a focus on the use of simple 2D elements with vibrant colors.

A great example of flat design is the Dropbox Basic landing page. As you can see, the UI elements are so minimalistic that they highlight the content of the page.

Dropbox
Gamification

The technology of applying design elements and principles that are typically used in games to non-game processes for greater user involvement.

Human-centered design

An approach that focuses on solving design issues by placing users at the center of the design process and identifying their needs, pain points, goals, and behavior to create a product that effectively solves users’ problems.

For deeper understanding take a look at how popular companies apply human-centered design in their products.

Information architecture

The process of organizing information, which includes structure, design, layout, and navigation. It allows users to find and manage the information they need. For example, information architecture determines the placement of elements on a page, their navigation, and the relationship between the pages.

Landing page

A one-page site created for an advertising campaign with the aim of selling a product or service. There are several objects on the landing page that call the user to action - for example, click a button or leave a request.

Onboarding

A process of creating a friendly environment for new users by making it easier for them to start interacting with the product. The design of the onboarding process for the site/app is usually limited to the first-use scenario.

Read more in our guide on SaaS onboarding.

Responsive design

Responsive design adapts the size of the website to any device screen, orientation, and platform. This design allows you to resize the site's page to fit any screen with the help of flexible layout, grid, and images.

UI/UX design

The design of any user interface in which usability is as important as the look of the app/website.

If your mind is blowing when you think about UI, UX, UI/UX and the difference between all these terms read our article UI vs UX.

Usability

An indicator of the simplicity and ease of use of the site/app.

User Experience (UX)

A set of impressions and emotions the user gets from interacting with the interface of a software or a website.

User Interface (UI)

UI determines what the interface looks like and what physical characteristics it acquires. It determines what color your product will be, whether it will be convenient for a person to hit the buttons with their finger, whether the text will be readable, etc.

UX design 

UX design is responsible for product functionality and user experience. The simpler and more intuitive the interface, the easier it is to reach the desired result and complete the targeted action.

UI/UX acronyms

API (Application Programming Interface) 

An interface that allows different software components to interact with each other. When you use an app like Facebook, send a direct message, or check the weather on your smartphone, you are using the API.

CTA (Call to Action)

A graphic element that motivates and encourages site visitors to take a specific action: buy, download, subscribe to the newsletter, etc. CTA tells what exactly the visitor should do and what the developer of this page expects from them. Usually, a CTA looks like a button, which can have various visual effects that draw attention to it.

KPI (Key performance indicators)

A measurable value that demonstrates how effectively a company is achieving key business objectives.

MVP (Minimum viable product)

Refers to the basic set of functions with which we can launch a product to get started. Products are often launched as MVPs to quickly release and collect valuable user feedback.

PM (Project Manager)

A member of the project team that tracks how the work is being delivered, communicates with the client, tracks deadlines, and monitors the budget. 

PoC (Proof of Concept)

The process of demonstration of a certain idea or concept to show/verify its feasibility and value.

PR (Pull Request)

Allows developers to share with others what code changes have been made on GitHub.

QA (Quality Assurance)

The team member that has the responsibilities of testing a product and reporting to developers/designers what needs to be changed, fixed, or improved.

SS

 A screenshot

SWOT (Strengths, Weaknesses, Opportunities, and Threats)

SWOT analysis is a method that aims to develop a business strategy (for an enterprise or product), that takes into account four main factors of successful growth: strengths, weaknesses, opportunities, and threats.

UX design process and methods

Here you will find the most widely-used methods and deliverables produced by designers during the product design process.

A/B test 

A method that involves showing two versions of a product to users in order to compare them and see which one performs better. It allows you to confirm hypotheses for making potential improvements in comparison with the original version and see what works better for your audience based on statistical performance analysis. A/B testing can also be called split testing.

Card Sorting
Image credit: medium.com

A technique that helps designers to evaluate the information architecture of the product. The respondent must combine the groups of data placed on the cards according to certain criteria. There is a closed and open type of card. With a closed sorting, the respondent groups the cards according to the already specified criteria, while in the open sorting respondents themselves formulate the criteria for grouping data.

Competitive audit

A research method that involves analyzing and comparing competitors’ products (their features, target audience, etc.) to understand the industry trends, and opportunities to improve your product.

Customer journey map (CJM)
Image credit: pinterest.com

A visualized experience of the client using the product that takes into account thoughts, emotions, and goals. The map is drawn from the customer’s point of view and looks like a graph with points of the client’s interaction with the product. CJM reflects the customer journey to the product, identifies problem areas, and advises on how to increase conversion and customer loyalty.

Eyetracking

A technology that allows you to observe and record eye movement. It is widely used in many areas, including UX research of websites, mobile applications, and branding. Eyetracking is primarily used to understand where users are looking and how they interact with a product.

Focus Group/User Interview

Groups of potential users of your product that are formed to get feedback from them. Participants express their opinion on prototypes, tasks, strategies chosen to create a product.

F-shaped pattern
Image credit: medium.com

The most common crawl path for block-based content. The F-pattern gained widespread acceptance after the Nielsen-Norman Group conducted a study of eye movements when reading web content. During the study, more than 200 users studied thousands of web pages. It was possible to identify a pattern in user eye movements when studying different sites: the general trajectory of crawling content resembles the letter "F".

Mockup

Static representations of a product. You cannot click on it or interact with it. In essence, they represent a picture of what the final product will look like.

Moodboard

A collection of visual materials that help define a specific style of a product through images, text, colors, and other branding elements. It gives an idea of the style of a particular project, design, or brand.

Prototype

A detailed representation of the final product that simulates the interaction between the user and the interface. The interactions must be accurately modeled and have significant similarities to the final experience. It allows users to assess the basic functions of the product and product owners to test the viability of their business idea.

Sketches

A design method that allows designers to communicate, evaluate and refine their ideas quickly and with minimal resources (usually only pen and pencil).

Storyboard
Image credit: smashingmagazine.com

A visual representation of the user experience with a product or problem space. This technique was adopted by the designers, and it is very similar to the creation of comics.

Target audience segmentation 

The division of the audience into groups, where they are united on the basis of similar needs. With the help of segmentation, you can study patterns of behavior, problems of certain groups of users, compare with other groups, and also design further development of the product, taking into account the needs of these groups.

Usability testing

Usability testing is performed with end-users. It shows how the product matches the expectations of the target audience, identifies problem areas in the interface, and makes it possible to look at the product through the eyes of users. In the process of usability testing, the user performs typical tasks with the product in the lead testing mode.

Use case

A description of how users will perform tasks on the website (from the user’s point of view). It shows how the system will respond to the user’s requests. Use case looks like a sequence of simple steps that starts with a user’s goal and finishes when that goal is fulfilled.

User flow

The order of actions that a user performs on a site or application. User Flow helps you understand whether all processes in the product have a logical order. The main task is to show the process of user interaction with the product.

User stories

A way of describing the requirements for the system that is under development formulated as one or more sentences in the user's everyday or business language. The text of the story should explain what the user is doing, what they feel, and what kind of result they want to achieve.

Example of user flow designed by Eleken for Alacrity. an app that helps users to eliminate productivity problems
UX research

The starting point for any project. UX research helps to understand users: their behavior, goals, needs, and motivation. It also shows how people navigate the site, where they have problems, and how they feel from interacting with the product.

Wireframe

A low fidelity design image clearly showing the main content group, information structure, basic visualization of the interaction between the interface and the user.

Example of a wireframe designed by Eleken for Pomocup, smart device for ski tourers
Z-shaped pattern
Image credit: omnidigit.com

The trajectory of crawling content on the page from left to right and top to bottom, thus, the trajectory of the gaze is in the form of the letter "Z". This pattern works because this is how most people read books: top to bottom and left to right.

Design elements

Breadcrumbs 
Image credit: blog.hubspot.com

Navigation aids that tell users where they are on a website. They allow users to repeat their steps on multi-level websites.

Chatbot

A program that simulates a real conversation with a user. Chatbots allow you to communicate using text or audio messages on websites, messengers, mobile applications, or by phone.

Grid

A system of vertical and horizontal lines that help designers arrange content on the screen.

Layout

The order of visual elements on the page aims to correctly communicate the main message and logically present the information. 

Navigation

A form (link system) that helps the user find the needed information on the site or mobile application.

White space (negative space)

A part of the page with no text or images.

Widget

A display element that users interact with. Examples of widgets: sliders, calendar tools, buttons, contact forms

The language of developers

Here you will find some terms that are essential for the product development process.

Agile

A collective term for several different types of methodologies for software development. The focus is on keeping your code simple, testing frequently, and delivering functional parts of your application as soon as they're ready.

Backlog

Scope of work to be completed. The Agile Product Backlog is a list of priority features.

Back-end (development)

The hardware and software part of the service. It is a set of tools by which the logic of work of a website/app is implemented. This is what is hidden from our eyes, that is, it happens outside the computer and browser.

Front-end (development)

A front-end developer creates a visual interface for an application or website. It creates functions visible to users.

Framework

A platform for developing software applications. It provides a basis on which software developers can create platform-specific programs. For example, a framework can include predefined classes and functions that can be used to process input, control hardware devices, and interact with system software. It simplifies the development process because programmers don't have to reinvent the wheel every time they develop a new application.

Library

A software library generally consists of pre-written code, classes, procedures, scripts, configuration data, and more. Typically, a developer might manually add a software library to a program to achieve more functionality or to automate a process without writing code for it.

Sprint

In agile software development, a sprint is a specified period of time within which an assignment must be completed. A sprint can last anywhere from 1-3 weeks depending on the business. In design, a sprint is a unique five-day process of testing ideas and solving big problems by prototyping and testing ideas with clients.

UI Pattern

Reusable solutions to common usability problems presented as a collection of user interface elements.

To sum up

Working with UI/UX designers and getting to know their terminology is almost like learning a new language. Still, in the process of delving into the topic of UI and UX design, your vocabulary will expand significantly. Until you are a design expert, refer to this glossary to quickly find the answer to the needed question.


And to be even more profound in design-related topics read our blog post about UI/UX trends.

Kateryna Mayka

Author

Table of contents

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.

UI/UX Terminology: Speak the Same Language With the Designer

19

min to read

Table of contents
Share

Developing a website or an application is impossible without communicating with your internal team and contractors. As a product owner, you can’t just hire a UI/UX designer and wait till the product is ready. To feel comfortable and to be able to offer, discuss, accept or decline different design ideas at each step of the product design process you have to understand basic UI/UX terminology.

Eleken is a SaaS design agency and we believe that clear and transparent communication between the customer and the designer determines a great deal of the final product’s success. Just take a look at reviews from our clients. For each of them, communication played an essential role. 

Reviews

To help you talk about designing stuff with your employees, colleagues, or other experts freely, we have compiled a list of the most important UI/UX terms. Now, whenever you hear a buzzword in the office, read a blog post on a design-related topic, or see some gibberish in Slack from your designer, refer to this UI and UX design vocabulary to make sure you got it correctly.

UI/UX glossary

Here you will find answers to such basic questions as “what is UI/UX design?” and more specific ones like decryption of acronyms SWOT or MVP.

For your convenience, we grouped all terms into several clusters. Each cluster contains topic-related terms sorted alphabetically:

  • General terms
  • UI/UX acronyms
  • UX design process and methods
  • Design elements
  • The language of developers

Let’s start with the most essential UI/UX design terminology.

General terms

This cluster contains basic vocabulary that you will often encounter when talking about design.

Accessibility

A set of practices that makes the interface easy to interact with to a wide range of people, including people with disabilities. It uses a balanced color scheme, alternative keyboard controls, special page layouts, customized versions, and other tools to help people with disabilities use the product.

Design system

A set of brand values, tools, and components that makes it easy to create, test, visually, and technically update products, while ensuring their consistency.

Read about the design systems of well-known companies to see what it is in practice.

Design thinking

A method of developing products and services aimed at solving the existing problems of potential customers. Design thinking is a creative process of generating and implementing ideas, the main task of which is to think outside the box to create a valuable design solution.

Flat design

A minimalist style of user interface design. It is characterized by a focus on the use of simple 2D elements with vibrant colors.

A great example of flat design is the Dropbox Basic landing page. As you can see, the UI elements are so minimalistic that they highlight the content of the page.

Dropbox
Gamification

The technology of applying design elements and principles that are typically used in games to non-game processes for greater user involvement.

Human-centered design

An approach that focuses on solving design issues by placing users at the center of the design process and identifying their needs, pain points, goals, and behavior to create a product that effectively solves users’ problems.

For deeper understanding take a look at how popular companies apply human-centered design in their products.

Information architecture

The process of organizing information, which includes structure, design, layout, and navigation. It allows users to find and manage the information they need. For example, information architecture determines the placement of elements on a page, their navigation, and the relationship between the pages.

Landing page

A one-page site created for an advertising campaign with the aim of selling a product or service. There are several objects on the landing page that call the user to action - for example, click a button or leave a request.

Onboarding

A process of creating a friendly environment for new users by making it easier for them to start interacting with the product. The design of the onboarding process for the site/app is usually limited to the first-use scenario.

Read more in our guide on SaaS onboarding.

Responsive design

Responsive design adapts the size of the website to any device screen, orientation, and platform. This design allows you to resize the site's page to fit any screen with the help of flexible layout, grid, and images.

UI/UX design

The design of any user interface in which usability is as important as the look of the app/website.

If your mind is blowing when you think about UI, UX, UI/UX and the difference between all these terms read our article UI vs UX.

Usability

An indicator of the simplicity and ease of use of the site/app.

User Experience (UX)

A set of impressions and emotions the user gets from interacting with the interface of a software or a website.

User Interface (UI)

UI determines what the interface looks like and what physical characteristics it acquires. It determines what color your product will be, whether it will be convenient for a person to hit the buttons with their finger, whether the text will be readable, etc.

UX design 

UX design is responsible for product functionality and user experience. The simpler and more intuitive the interface, the easier it is to reach the desired result and complete the targeted action.

UI/UX acronyms

API (Application Programming Interface) 

An interface that allows different software components to interact with each other. When you use an app like Facebook, send a direct message, or check the weather on your smartphone, you are using the API.

CTA (Call to Action)

A graphic element that motivates and encourages site visitors to take a specific action: buy, download, subscribe to the newsletter, etc. CTA tells what exactly the visitor should do and what the developer of this page expects from them. Usually, a CTA looks like a button, which can have various visual effects that draw attention to it.

KPI (Key performance indicators)

A measurable value that demonstrates how effectively a company is achieving key business objectives.

MVP (Minimum viable product)

Refers to the basic set of functions with which we can launch a product to get started. Products are often launched as MVPs to quickly release and collect valuable user feedback.

PM (Project Manager)

A member of the project team that tracks how the work is being delivered, communicates with the client, tracks deadlines, and monitors the budget. 

PoC (Proof of Concept)

The process of demonstration of a certain idea or concept to show/verify its feasibility and value.

PR (Pull Request)

Allows developers to share with others what code changes have been made on GitHub.

QA (Quality Assurance)

The team member that has the responsibilities of testing a product and reporting to developers/designers what needs to be changed, fixed, or improved.

SS

 A screenshot

SWOT (Strengths, Weaknesses, Opportunities, and Threats)

SWOT analysis is a method that aims to develop a business strategy (for an enterprise or product), that takes into account four main factors of successful growth: strengths, weaknesses, opportunities, and threats.

UX design process and methods

Here you will find the most widely-used methods and deliverables produced by designers during the product design process.

A/B test 

A method that involves showing two versions of a product to users in order to compare them and see which one performs better. It allows you to confirm hypotheses for making potential improvements in comparison with the original version and see what works better for your audience based on statistical performance analysis. A/B testing can also be called split testing.

Card Sorting
Image credit: medium.com

A technique that helps designers to evaluate the information architecture of the product. The respondent must combine the groups of data placed on the cards according to certain criteria. There is a closed and open type of card. With a closed sorting, the respondent groups the cards according to the already specified criteria, while in the open sorting respondents themselves formulate the criteria for grouping data.

Competitive audit

A research method that involves analyzing and comparing competitors’ products (their features, target audience, etc.) to understand the industry trends, and opportunities to improve your product.

Customer journey map (CJM)
Image credit: pinterest.com

A visualized experience of the client using the product that takes into account thoughts, emotions, and goals. The map is drawn from the customer’s point of view and looks like a graph with points of the client’s interaction with the product. CJM reflects the customer journey to the product, identifies problem areas, and advises on how to increase conversion and customer loyalty.

Eyetracking

A technology that allows you to observe and record eye movement. It is widely used in many areas, including UX research of websites, mobile applications, and branding. Eyetracking is primarily used to understand where users are looking and how they interact with a product.

Focus Group/User Interview

Groups of potential users of your product that are formed to get feedback from them. Participants express their opinion on prototypes, tasks, strategies chosen to create a product.

F-shaped pattern
Image credit: medium.com

The most common crawl path for block-based content. The F-pattern gained widespread acceptance after the Nielsen-Norman Group conducted a study of eye movements when reading web content. During the study, more than 200 users studied thousands of web pages. It was possible to identify a pattern in user eye movements when studying different sites: the general trajectory of crawling content resembles the letter "F".

Mockup

Static representations of a product. You cannot click on it or interact with it. In essence, they represent a picture of what the final product will look like.

Moodboard

A collection of visual materials that help define a specific style of a product through images, text, colors, and other branding elements. It gives an idea of the style of a particular project, design, or brand.

Prototype

A detailed representation of the final product that simulates the interaction between the user and the interface. The interactions must be accurately modeled and have significant similarities to the final experience. It allows users to assess the basic functions of the product and product owners to test the viability of their business idea.

Sketches

A design method that allows designers to communicate, evaluate and refine their ideas quickly and with minimal resources (usually only pen and pencil).

Storyboard
Image credit: smashingmagazine.com

A visual representation of the user experience with a product or problem space. This technique was adopted by the designers, and it is very similar to the creation of comics.

Target audience segmentation 

The division of the audience into groups, where they are united on the basis of similar needs. With the help of segmentation, you can study patterns of behavior, problems of certain groups of users, compare with other groups, and also design further development of the product, taking into account the needs of these groups.

Usability testing

Usability testing is performed with end-users. It shows how the product matches the expectations of the target audience, identifies problem areas in the interface, and makes it possible to look at the product through the eyes of users. In the process of usability testing, the user performs typical tasks with the product in the lead testing mode.

Use case

A description of how users will perform tasks on the website (from the user’s point of view). It shows how the system will respond to the user’s requests. Use case looks like a sequence of simple steps that starts with a user’s goal and finishes when that goal is fulfilled.

User flow

The order of actions that a user performs on a site or application. User Flow helps you understand whether all processes in the product have a logical order. The main task is to show the process of user interaction with the product.

User stories

A way of describing the requirements for the system that is under development formulated as one or more sentences in the user's everyday or business language. The text of the story should explain what the user is doing, what they feel, and what kind of result they want to achieve.

Example of user flow designed by Eleken for Alacrity. an app that helps users to eliminate productivity problems
UX research

The starting point for any project. UX research helps to understand users: their behavior, goals, needs, and motivation. It also shows how people navigate the site, where they have problems, and how they feel from interacting with the product.

Wireframe

A low fidelity design image clearly showing the main content group, information structure, basic visualization of the interaction between the interface and the user.

Example of a wireframe designed by Eleken for Pomocup, smart device for ski tourers
Z-shaped pattern
Image credit: omnidigit.com

The trajectory of crawling content on the page from left to right and top to bottom, thus, the trajectory of the gaze is in the form of the letter "Z". This pattern works because this is how most people read books: top to bottom and left to right.

Design elements

Breadcrumbs 
Image credit: blog.hubspot.com

Navigation aids that tell users where they are on a website. They allow users to repeat their steps on multi-level websites.

Chatbot

A program that simulates a real conversation with a user. Chatbots allow you to communicate using text or audio messages on websites, messengers, mobile applications, or by phone.

Grid

A system of vertical and horizontal lines that help designers arrange content on the screen.

Layout

The order of visual elements on the page aims to correctly communicate the main message and logically present the information. 

Navigation

A form (link system) that helps the user find the needed information on the site or mobile application.

White space (negative space)

A part of the page with no text or images.

Widget

A display element that users interact with. Examples of widgets: sliders, calendar tools, buttons, contact forms

The language of developers

Here you will find some terms that are essential for the product development process.

Agile

A collective term for several different types of methodologies for software development. The focus is on keeping your code simple, testing frequently, and delivering functional parts of your application as soon as they're ready.

Backlog

Scope of work to be completed. The Agile Product Backlog is a list of priority features.

Back-end (development)

The hardware and software part of the service. It is a set of tools by which the logic of work of a website/app is implemented. This is what is hidden from our eyes, that is, it happens outside the computer and browser.

Front-end (development)

A front-end developer creates a visual interface for an application or website. It creates functions visible to users.

Framework

A platform for developing software applications. It provides a basis on which software developers can create platform-specific programs. For example, a framework can include predefined classes and functions that can be used to process input, control hardware devices, and interact with system software. It simplifies the development process because programmers don't have to reinvent the wheel every time they develop a new application.

Library

A software library generally consists of pre-written code, classes, procedures, scripts, configuration data, and more. Typically, a developer might manually add a software library to a program to achieve more functionality or to automate a process without writing code for it.

Sprint

In agile software development, a sprint is a specified period of time within which an assignment must be completed. A sprint can last anywhere from 1-3 weeks depending on the business. In design, a sprint is a unique five-day process of testing ideas and solving big problems by prototyping and testing ideas with clients.

UI Pattern

Reusable solutions to common usability problems presented as a collection of user interface elements.

To sum up

Working with UI/UX designers and getting to know their terminology is almost like learning a new language. Still, in the process of delving into the topic of UI and UX design, your vocabulary will expand significantly. Until you are a design expert, refer to this glossary to quickly find the answer to the needed question.


And to be even more profound in design-related topics read our blog post about UI/UX trends.

Top Stories

Got a UI/UX project in mind?

Fill out the form, and let's chat about how we can help bring your vision to life

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.
Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.