Part of picking up a new marketing skill is learning the vocabulary. Every field has a variety of unique terms that are used to communicate principles, concepts and ideas.
As a designer, it’s easy to get confused if you aren’t familiar with user interface (UI) and user experience (UX) terms and words being thrown around.
When you deal with a designer, you’re bound to come across walls and tables filled with drawings and the terms you’ll soon learn will take up most of the conversation.
No matter: We’ve compiled this UI-UX design glossary, a reference guide for when you’re speaking to colleagues, interpreting design-oriented projects or offering feedback on new websites and applications.
Here are 35 different UIUX terms that are most commonly used today:
This term includes a handful of different disciplines that encompass the field of crafting a positive user experience within a system, product or website. The goal is to make your product as easy to use and enjoyable as possible for the user.
This is what the user sees when interacting with a program. It’s how a human interacts with a machine without having to program it directly. The most common example is a desktop graphical interface where you click on icons to access programs and create folders to store files.
This is exactly what it sounds like: research you do to gain a deep understanding of your user. This process incorporates both analytical research such as uncovering numerical data to understand user behavior and preferences. Plus, qualitative research to understand the big issues and problems your audience faces.
Persona is a broad term that’s used throughout the marketing and design world. Essentially, a persona is a user profile that gives you an understanding of the person you’re designing for. Instead of designing for a broad and generic audience, you’ll be designing for a very specific person.
The end users are the people who will be interacting with the finished design. Even if you have different people interacting with your design during its production, these aren’t the end users. Usually, these will be visitors to your finished website or application.
The customer journey map is the series of actions a user will take from first entering your site. The 2 levels of a user journey are:
This map will generally have a branch-like chain of effects as users progress on different potential journeys throughout your site.
You want your design to be as frictionless as possible. These points of friction are called pain points. By identifying and fixing these, the resulting design will be more user friendly.
A wireframe acts as the foundation for your app, product or website. It’s a skeleton that helps you understand and refine the basic structure of the design before content, images and other elements are added to the design.
When you think of a wireframe for a website, you’ll be mapping the layout of each page, along with how each connects.
Wireframes are created in the earlier stages of the design process before the mockup and prototyping process begins.
A mockup is a near-finished version of the final design. A final mockup is produced once all the feedback and revisions have been made to the earlier iterations of the design. Keep in mind that these are usually purely design-based, it hasn’t been coded yet, even into a simple one such as Hypertext Markup Language (HTML).
Mockups will showcase the structure, functionality and include content so the final version of the product can be easily understood. They typically are created before a prototype as it’s less time consuming and can be used to generate a more efficient prototype.
The goal is to simulate user interaction with the app or website and visually understand how the user will interact, navigate and communicate.
Any interactions that are sketched out in the prototype should closely mirror the functionality of the final product.
The F-shaped pattern refers to how users will typically read web pages. Two horizontal stripes, followed by a long vertical stripe. Keep in mind that this process happens in a few seconds. By placing the most important elements of your website along these lines you’ll help your users quickly find the most useful information.
The 3-click rule is a design principle which states that if a user can’t find the information they’re looking for within 3 clicks of using your website or application, they’ll leave your site.
Now data suggests this number isn’t a hard-lined fact, but instead a concept you should follow. When designing your application or website your goal should always be creating a positive user experience, where your user can find what they’re looking for in the shortest amount of time possible.
The ultimate goal of card sorting is to get user feedback to help create websites and applications that are easy to navigate. The process involves a designer writing out elements on cards, then having team members and potential users arrange the cards to produce the most intuitive navigation pattern.
This is commonly used in motion picture production to understand and map out a movie before you start shooting. By sketching out frames you understand how the story progresses. However, you can also use a storyboard to map out a user journey and interaction with your app or website. This helps to create a story around your product and helps to craft a logical and emotional experience.
Sketching takes place in the initial design phase. This is when a designer will use a drawing or sketch to map out an initial design, communicate ideas or explore new concepts or potential features. Whether you’re sketching UX or sketching UI all you’ll be using is paper and pen. It’s also usually the first line of attack for app or website problem-solving.
Essentially, UI breadcrumbs help to tell your users where they are on a website. They help your users visibly see how each page or post on the site connects and their current location.
They aren’t used as often as they were in the earlier days of the web, but sites with complex navigation and deep pages might still find some value.
A/B testing is the process of testing different versions of a design against one another. You have one version of the design that’s the control and the other you change a few elements and get user feedback.
This can even be simple website color changes that you implement via Cascading Style Sheets (CSS) or something as large as an entirely different logo, headline or image.
This process allows you to create a more user-oriented design that better meets their needs and can be high converting.
User-centered design is an approach to design that places a focus on the user throughout the entire design process. As a result, the user is regularly involved in the process including the research and testing phases. The overarching goal is to create a final design that deeply aligns with user wants and needs.
Data-driven design is the process of using tangible data to improve your existing design. Instead of relying on intuition and design principles, you have cold hard data to prove your design is on the right track. This includes using testing tools like A/B testing, heat maps and analytics to gather real-time user data.
Interaction design uses engaging interfaces that respond to user behaviors and decisions. It relies upon logical decision-making workflows to create a user experience that feels natural, but still guides them to a successful result. Effective implementation of this requires a lot of communication between backend development and front-end development as the two need to work together seamlessly.
Iterative design is an evolving design process. Instead of the design being static there’s no end to the design process. You’ll continuously be prototyping new features, implementing, getting user feedback and keeping the changes that improve the design.
This is a common way that most new applications function. The basic version will be shipped and new features will be added iteratively, thus creating a better product while improving the customer experience UX.
Flat design is a style of UI design that relies upon two-dimensional design elements. The end goal of this style of design is simplicity, along with including bright colors to make the design more engaging. It’s related to minimalism but boasts a more modern and human feel.
The overall usability of your website or app refers to how easy it is to intuitively navigate. A usability test is a process of having a user complete tasks and noting points of friction or confusion, which can be improved upon. It answers the question: Is this product easy to use?
Eye tracking is the process of tracking user eye movements to see how their eyes engage with a website. This data will show where users place most of their attention.
This is aligned with heat maps on websites, which correlates the user’s mouse with eyesight to see the points of highest engagement. With this information, you can improve your website to put the most important items where their attention is already going.
The conversion rate shows the percentage of users that take the desired action. This data can show how effective your designs are at helping users reach the end goal. For example, if you want to see how well your website is converting visitors into paying customers, you can track the percentage of new visitors that add items to the cart.
UI elements refer to any of the virtual elements on a web page or app that allows users to interact virtually. These span a wide range of different items like boxes, buttons, navigation drop-downs, sliders buttons, checkboxes and much more. Any interactive item on a website or app is classified under UI elements.
Navigation is one of the core concepts of usability. It can generally be thought of as the actions that a user takes to accomplish the goals of your website or app. Successful navigation leads to the successful use of a product.
Useful website navigation will fulfill the goals the user had in mind when they set out to use your site. It’s the role of the designer to make sure the navigational experience is as smooth and free from issues.
Navigation can utilize many forms, but typically includes buttons, links, tab bar, menus, switches and more.
Building intuitive navigation usually goes hand-in-hand with other parts of the design process like UX wireframing, layouts and user journey mapping.
The menu is one of the primary navigation elements. Essentially, it’s a list of command-oriented options the user can take to interact with your design. Menus are very useful design elements. Using a website with a menu is one of the most commonly used applications.
This helps to categorize website information and give users a list of navigation options. Menus can be placed in multiple locations on a website or app like the header, footer and sidebar.
Ideally, a well-designed menu will help users navigate and accomplish tasks on your website or app with greater ease. A menu should only enhance the user experience, never detract from it.
Buttons are one of the more widely used elements in graphical interfaces. The purpose of a button is to help users issue commands and accomplish design goals. UI buttons help to improve the user experience by integrating with the existing design, while still being noticeable enough to stand out.
Here are a few of the most commonly used buttons:
Call-to-action (CTA) elements are designed to get users to do just that: take action. This type of interactive element can take many forms, whether that’s buttons, links or even tabs.
Website CTA elements are one of the main drivers of user action. Properly placed CTAs should improve the user experience and navigation across your app or site.
Without well-placed CTAs you’re creating user friction and even confusion about what to do next.
However, not every call-to-action element needs to include text. If you’re using a widely recognized image or icon, then this can act in place of text.
The bar section of a user interface allows for a few different interactions to be accomplished. First, it can include a clickable interface that lets users go back and forth between different screens, and quickly showcase the action.
You can also use a loading bar that can visually illustrate a page loading or show the percentage of progress made on a given task. Or, a progress bar, which will visually showcase progress made towards a specific goal, like the number of steps taken in a day.
A UI picker allows users to pick from a set of different options. Usually, you’ll find this element paired with scrollable lists with differing values. Things such as minutes, hours, temperature and different numeric values. The most common application of this is seen in alarm clocks and timers.
A UI checkbox allows users to interact with a given post or page to accomplish tasks or give information, like a questionnaire.
With checkboxes, you give users a choice of binary options. They’re commonly used in apps and websites as well, like a to-do list and time tracking apps.
A UI switch lets users turn an option on or off. Usually, a color change or even animation will be in place, so users can easily distinguish whether the option is on or off. The goal of a switch is to improve usability and allows users to make customizations and set preferences within an app.
A widget is an on-page interactive element. Common widgets include buttons, email contact forms, slider arrows, icons and more. Think of it as any aspect of your website that requires some form of user interaction. Widgets also are goal-based, they serve a purpose within the functioning of the product.