UI/UX Glossary: What Every Designer Should Know

Sergey Gladkiy

UI/UX Designer @ Django Stars

This article is dedicated to designers and the people who have to communicate with them. Of course, if you go into any design studio, 99% of what you see will be drawings. But probably 100% of what you hear in the studio will be words.

Imagine yourself in a situation where:

  1. You need a glossary on the blog so you can refer to it reading an article about the elements of user interface.

  2. It makes sense to shed light on the most commonly used UX terminology at design conferences and meetups.

  3. A new business meeting was going swimmingly – that is, until the client started asking questions about your design process. Then you poured out the complete lexicon of specialized user experience buzzwords the client knew nothing about.

  4. While having a conversation about designing stuff with a friend or colleague, it’s helpful if you know basic UI/UX terminology.

The UI/UX Glossary For Designers is a valuable bag of tricks that will teach you to speak the same language as designers. This short article provides you with better understanding of key UI/UX terminology.

Ready? Let’s go!

Terms for UI and UX Designers

· User Experience (UX)

A broad term that includes several disciplines that study the effect of design on the ease of use and level of satisfaction with a product, site or system. The term UX was invented by Dr. Donald Norman, a cognitive scientist.

· User Experience Design (UXD)

Designing software products and systems to be useful to a set of end users. It is a broad concept applied during the design process. UXD covers the technical use of a product or service and its essential physical interface.

· Customer Experience

The feelings of a customer generated by his or her interactions with a supplier’s employees, systems, channels or products.

· User Interface (UI), or Graphical User Interface (GUI)

What the user sees. This can be a set of commands or menus through which a user communicates with a program. It is also the space where interactions between humans and machines occurs.

· Interaction Design (IXD)

The study of how a user interacts with a page, application or product. IXD facilitates the actions we want to take with any given system.

· 3-click Rule

The theory that users will abandon a website if they are unable to complete their task within 3 mouse clicks.

· 5-Second Test 5-second-test

A technique that involves showing users a single content page for a quick 5 seconds to gather their initial impressions. Users make important judgments in the first moments when they visit a page. It gives the team insight into essential information about the page.

· F-Shaped Pattern

f-shaped-pattern

Users often read Web pages in an F-shaped pattern: two horizontal stripes, followed by a vertical stripe. In a few seconds, their eyes will move at amazing speed across your website’s words in a one-of-a-kind pattern.

· Sketching

sketching

A drawing which designers use to propose, explore, refine and communicate ideas. As a UX designer, you too can use sketching as your first line of attack to crack a design problem.

· Wireframe

wireframe

A simplified sketch of the important information on a page. Also known as page architecture, page schematic, or a blueprint. It’s a skeleton of the design and should contain all the important elements of the final product.

· Mockup

mockup

A medium or highly detailed static representation of the design. A good mockup demonstrates the information structure, content and basic functionality in static form. Mockups make it easy to perceive the idea of the final product, and the process of mockup creation is less time-consuming compared to prototypes.

· Prototype

prototype

Often confused with a wireframe, a prototype is a medium or a highly detailed representation of the final product. It simulates user interaction with the interface. It should allow the user to rate the content and interface and test the primary options for communication with the app. It may not look exactly like the final product, but it definitely should not be sketched in shades of gray. Interactions must be modeled in a way that closely mimic the final product.

· 80/20 Rule

80-20-rule

20% of the functionality and features in any environment will be responsible for 80% of the actions taken within that environment. This is Pareto principle as applied to any website, web app or software environment.

· A/B Testing

Determining which of two alternatives is preferred by the target audience.

· Accessibility

The measure of a web page's usability by persons with one or more disabilities.

· Golden Ratio

golden-ratio

A mathematical ratio with origins in ancient Greece, also known as the Greek letter Phi. It is found in nature, and has made its way into graphic and print design as people deem it to be the most visually appealing layout to the human eye. The Golden Ratio approximately equals 1.618. We find it when we divide a line into two parts so that the full length divided by the long part is equal to the long part divided by the short part.

· Grid

grid

A system of horizontal and vertical lines providing a structural basis for page layout and design. It communicates order, economy and consistency. The grid provides a common structure and flexibility for organizing content.

· Micro-copy

The ubiquitous text that turns up in tiny chunks on a webpage or in an application when you need it. It can be the label on a field, a quick set of instructions on what button to push, etc. It’s the tiny text on which much of the product’s UX hinges. Micro-copy provides those just-in-time clear instructions.

· 60-30-10 Rule

A timeless decorating rule that can help you put a color scheme together easily. The 60% + 30% + 10% proportion is meant to give balance to the colors used in any space.

· Color Contrast

color-contrast

The difference between two colors. Black and white create the highest contrast possible. Colors can contrast in hue, value and saturation. You usually want a high contrast between text and its background color. But too high contrast between design elements might give an unsettled and messy impression. Effective use of contrast is the essential ingredient that makes the content accessible to every viewer.

· Color Wheel

color-wheel

This circle shows the relationships between primary colors, secondary colors and tertiary colors. Artists and designers use red, yellow, and blue primaries arranged at three equally spaced points around their color wheel.

· Brand Book

An official corporate document that explains the brand’s identity and presents brand standards. Besides the design aspect, brand books may include a company overview and communication guidelines as well.

· Corporate Identity Guideline

Defines how your company’s brand, image and messaging are delivered to the public and particularly to your key audiences. The corporate identity guideline positions the company, no matter how big or small. The rules for consistent typography, color use, and logo placement are all laid out in the corporate identity manual.

· Web Analytics

The measurement, collection, and analysis of the internet to understand and optimize web usage.

· Card Sorting Method

The goal of card sorting is to understand how a typical user views a given set of items. Designers write items on individual paper cards, and then ask users to group together similar cards. Card sorting helps to create websites that are easy to navigate.

· Gestalt Principles

People do not visually perceive items in isolation, but as part of a larger whole. These principles account for human tendencies towards similarity, proximity, continuity, and closure.

· Dots Per Inch (DPI)

A way to measure the density of a print or video image. The number of differently colored dots that can fit into a one-inch space provides information about the resolution of an image. If an image is not of adequately high quality, it may not be able to be resized or printed without a loss of resolution.

· Clickstream Analysis

A form of Web analytics. Clickstream analysis is the tracking and analysis of visits to websites. This analysis reports user behavior such as routing, stickiness, where users come from and where they go from the site.

· Minimum Viable Product (MVP)

A product with enough features to meet the needs of early customers. This strategy provides feedback for future product development.

· Mindmap

A diagram used to visually organize information. A mindmap is hierarchical and shows the relationships among the parts of the whole. It is often created around a single concept to which associated images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those.

· Customer Journey Map (CJM)

A tool companies use to see what their customers truly want. A customer journey map tells the story from initial contact through to engagement and the long-term relationship. It may focus on a particular part of the story, or give an overview of the entire user experience. It talks about the user’s feelings, motivations and questions for each of these touch points.

· Onboarding

Designing a welcoming experience for new users by easing them into it. The design of the onboarding process for your site is usually limited to a first-time use scenario.

· Data-driven

This means using all the available data: analytics, A/B tests, customer service logs and social media sentiment to develop a better understanding of UX. There are common misconceptions that user experience is purely an art. But there is a lot more involved. Understanding how to collect and process data is one of the key tasks you have to face as a UX designer.

· Responsive Web Design (RWD)

RWD provides an optimal viewing experience across platforms and devices. The content and layout of a website should efficiently adapt to the sizes and technical abilities of the device it is opened on.

· Information Architecture (IA)

The organizing of information, including site hierarchies, web content, labeling schemes and navigation. IA makes it easy for people to find, understand and manage information.

· Scalable Vector Graphics (SVG)

An imaging application and language written in XML. The SVG interface offers a solution to the problem of sharing many sophisticated Web-based images and animations.

· Vertical Rhythm

This concept originated from print typography. Vertical Rhythm keeps the vertical spaces between elements on a page consistent with each other. This is often done with the help of a baseline – a common denominator used to create the consistent spaces.

· User Scenarios

Hypothetical circumstances used to frame and prompt the user to follow or pursue a particular task path.

· Heat Maps

heat-maps

Color-based representations of areas of interest/focus points; generally associated with eye-tracking software.

· Breadcrumbs

Breadcrumbs are a navigation element that allows users to orient themselves within a Web site or move to one of the intermediate pages. Breadcrumbs are usually placed near the top of the page (generally, right under the browser's address bar). Breadcrumbs allow users to find their way to the homepage.

· Call to Action (CTA)

For designers and content creators, the CTA is the word or phrase that stimulates users to interact with a product in the way it is designed for. CTA elements are the interactive controls such as buttons, tabs, or links that enable users to perform the expected action.

· Flat Design

A design philosophy based on simplicity and functionality. There are no techniques used to convey depth: no gradients, shadows, textures, and highlights that give a realistic view of the object. Flat design refers to the basics of graphics — bright colors, simple forms, buttons, and icons.

· Landing Page

The Web page a given user goes to after clicking a link. Also known as the Target or Destination page.

· Persona

The creation of a representative user based on available data and user interviews. Though the personal details of the persona may be fictional, the information used to create the user type is not.

· White or Negative Space

The use of blank (unmarked) space on a page to promote content and navigation. When the products or pages have enough white space, it helps them feel uncluttered, elevates them, and makes them feel special. And it makes people want to take a closer look.

· Context of Use Analysis

Observing users' behavior often helps create a website that supports their day-to-day activities. Context of use analysis studies personas, user flows, wireframes, the content map, the site map, and the content strategy.

· Conversion Rate

The percentage of visitors that complete a targeted transaction online.

· Diary Study

A research method that involves providing participants with the materials and structure to record daily events, tasks and perceptions around a given subject in order to gain insight into their behavior and needs over time.

· End Users

Refers to those people who use a website or those who are participants or subjects of research studies.

· User Engagement

It represents the purposeful choices a user makes with website content. Engagement is how people get value from the site.

· Eye Tracking

Specialized hardware and software that tracks users' point of vision on an interface. It tracks where users focus their visual attention while viewing an interface.

· Fishbone Diagram

A diagram designed to identify cause-and-effect relationships between factors in a given situation. It is made up of a "head", which states a problem, and bones along the spine that represent factors and categories of factors.

· Fitts' Law

A mathematical model that predicts how long it will take to point at a target based on the target’s size and proximity. The further away and smaller it is, the longer it will take for users to interact with it.

· Focus Group

A focus group is a pointed discussion with a group of participants led by a moderator. Questions are designed to gather feedback about users, products, concepts, prototypes, tasks, and strategies.

· User-Centered Design (UCD)

An approach to designing a product or service (user interface design), in which the end user is placed in the center of the process.

How the Knowledge of UI/UX Terms Benefits You

Did you already add a few new words to your design vocabulary?

Those are just few common terms used during a designers' work process. Now you have a bit more muscle to flex. In addition, the UI/UX Glossary For Designers is a great opportunity to translate design jargon. If you’re going to use words like “mockup” and “breadcrumbs”, at least take a few minutes to define those terms for your colleagues. Start building that common language.

When you work with a client, be prepared to continue describing your design ideas in plain language. Through a slow process of education and mutual trust, your clients will grow to understand your UX terminology. This will make it easier for them to be involved in the design process in the future.

When British Rail wanted to develop a new design for their InterCity trains, they invited a number of leading designers to submit proposals. The winners were Seymour/Powell, who at that time had no previous experience in train design. They simply explained to British Rail that their design would once again make children want to become train drivers, as in early times. Such a description must have triggered childhood memories in the minds of some senior British Rail executives. So a picture is worth a thousand words – but not always.

Comments