UX Glossary

5

5-Second Test
A test that lasts five seconds to gather users' first impressions of a single page.

6

60-30-10 Rule
A rule to help improve the color design of a page by using 60%, 30%, and 10% proportions for better color balance.

8

80/20 Rule
The Pareto principle, which states that 20% of a website, web app, or software environment's functionality and features are responsible for 80% of the effects.

A

A/B Testing
A method of testing one version of a product against another. Usually there are only a few (i.e. one or two) differences between the versions, and the purpose of the A/B test is to see if the difference(s) affect usability.

Accessibility
How well a website or app serves users with disabilities. It’s important to consider a diverse set of users, including those who are color blind, blind, visually impaired, deaf, and so on.

Affordance
Clues that tell us what an element can and can't do. For example, on a door, the type of door handle would be the affordance because we could tell whether to push or pull by the design. On a user interface screen, a button would be the affordance because it shows us we can trigger an action by clicking it.

Agile
An approach to software development that breaks down product work into smaller "stories" or "tasks" to be completed in two week cycles, also called "sprints."

Analytics
A measurement of users' interactions and behaviors with a site to help developers understand how their products can be improved.

API
Pieces of software that help different applications communicate with each other to allow easy access to server information.

Automation Testing
When a Quality Assurance (QA) engineer tests a software application with an automation tool.

Avatar
A online representation of users without an uploaded image of themselves, often seen in comment threads.

B

Back-End Development
Work on the core functionality of a website, software, or IT system.

Backlog
A list of tasks prioritized by project managers/product owners that developers can work on when they finish their main tasks.

Brand Book
A company document that establishes brand identity and standards and sometimes a company overview and communication guidelines.

Breadcrumbs
An element usually placed near the top of the page to help users navigate a website and go to the homepage.

Bug
Software mistakes that cause unintended behavior such as glitches or crashes.

C

Cache
Temporary storage space in a computing environment, such as how a username is stored in your computer's cache for faster logins.

Call to Action (CTA)
A word or phrase to encourage users to use a the designer's product for what it's intended for, such as in buttons, tabs, or links.

Card Sorting
A method of user testing where users are provided cards on which key concepts/features of a product are written. The users are then asked to sort the cards as to how they think the concepts/features should be organized.

Clickstream Analysis
A report of a user's path through a website, tracking behaviors like routing, stickiness, arrival, and departure from a website.

CMS (Content Management System)
A computer application, such as Drupal, WordPress, and BrightSpot, that creates and manages digital content.

Color Contrast
The difference between two colors in hue, value, and saturation to make content legible to viewers. The preferred contrast is a high contrast between text and the background.

Color Wheel
A circular graphic that artists and designers use showing the relationship between primary, secondary, and tertiary colors.

Context of Use Analysis
A report of user's daily behaviors to improve the website. The behaviors it studies include personas, user flows, wireframes, the content map, the site map, and the content strategy.

Conversion Rate
The percentage of users who complete a desired action.

Corporate Identity Guideline
A document that defines how a company's brand, image, and message should be displayed to the public.

CSS (Cascading Style Sheets)
A style sheet programming language to define the style of a website, including information on fonts, color, spacing, layouts, graphics, etc.

Customer Experience
How customers feel after interacting with their supplier's employees, systems, channels, or products.

Customer Journey Map
A comprehensive visual that shows a user’s touchpoints with the company, service, and product.

D

Data Science
The field that uncovers data trends and insights for businesses to make strategic decisions.

Data-Driven Design
A design method backed by data to help understand the intended audience. Data proves tgat design is on track, reveals users' pain points, and improves design through objectivity.

Design Thinking
A five-stage method for solving problems creatively:
1. Empathize: Understand the challenge
2. Define: Define the problem
3. Ideate: Brainstorm potential solutions
4. Prototype: Build your solutions
5. Test: Test your solutions

Dev Ops
A focus on people, culture, and fast technology delivery through the use of agile development. It improves collaboration between development and operations teams.

Diary Study
A research method that is used to gain insight into the behavior and needs of participants over time by having them record daily events, tasks, and perceptions around a given subject.

Dots Per Inch (DPI)
A method of measuring the density of a print or video image by calculating the number of differently colored dots that can fit into a one-inch space, providing information about the resolution of the image.

E

Empathy Map
A visualization split into four equal quadrants about what a user is saying, thinking, doing, and feeling.

End User
Although there are a variety of stakeholders for each project, the end users are the people the website or application is actually designed to serve.

Experience Architecture
The outline of a user's path as they interact with the information architecture, interaction design, and experience design.

Eye Tracking
Hardware and software that tracks the point of vision of the user on an interface.

F

F-Pattern
The most common path a user reads a web page; in a matter of seconds, they start at the main heading of a page, scan the first few lines or paragraphs, and skim the left side of the page to find more relevant info from the subheaders.

Fishbone Diagram
A diagram that identifies cause-and-effect relationships. It usually contains a "head" that states the problem and "bones" along the spine that represent the factors.

Fitts’ Law
A mathematical model that takes the target's size and proximity to predict how long it will take to point at that target. It will take users longer to interact with targets that are smaller and farther away.

Flat Design
This type of design focuses on bright colors, simple forms, buttons, and icons. Techniques to convey depth are not used (gradients, shadows, textures, or highlights) because this design philosophy is based on simplicity and functionality.

Flowchart
A diagram to present the steps to complete a task.

Focus Group
An interview conducted in a small group setting where everyone has the opportunity to answer the questions asked.

Front-End Development
The creation of a website's features that users can view.

G

Gamification
The process of integrating game-design elements and principles into products to increase user engagement.

Gestalt Principles
The concept that humans group similar objects and see them as part of a whole. These principles describe human tendencies toward similarity, proximity, continuity, closure, figure/ground, and symmetry & order.

Github
A web-based platform or hub for developers to collaborate on their coding projects.

Golden Ratio
The Golden Ratio is known as the most visually appealing layout to the human eye. It is found by dividing a line into two parts so that the ratio of the full length divided by the long part is equal to the ratio of the long part divided by the short part.

Grid
A grid consists of horizontal and vertical lines that form a structural basis for page layout and design. It permits flexibility for organizing content on a page and provides a common structure.

H

Hallway Testing
A usability test that utilizes bystanders to test your product. It is good practice to set-up in a high foot traffic area.

Heat Maps
Areas of intersect/focus points are represented by certain colors. This technique is used with eye-tracking software.

HTML
Hypertext Markup Language (HTML) is used to create websites. It focuses on the structure of a website rather than the style.

Human-Computer Interaction (HCI)
The study of design and use of computer technology. Specifically how we interact with computers today.

I

Information Architecture (IA)
How information is organized and obtained on a website.

Interaction Design (IXD)
A field of study concerned with how a user interacts with a page, application, or product.

J

Javascript
A programming language that integrates with HTML and CSS and creates interactive elements on a page.

Journey Maps
A visualization of a user's process as they perform a goal, including the stages they go through, the tasks they execute, their emotions, and product opportunities.

K

Key Performance Indicators (KPI)
These are measurable values that allow us to understand and track a product's success rate, user error rate, and time on task.

L

Landing Page
The web page, also known as a target or destination page, that a user is taken to after clicking a link.

Lean UX
This method is based on Agile. It focuses on a collaborative user-centric approach while prioritizing "learning loops" (building, learning, measuring through iterations, etcetera) over design documentation.

M

Material Design
A design language that Google developed, often referred to as just "Material".

Mental Model
Take what the user believes to be true about a product's functionality to create your mental model. The more the mental model aligns with the functionality of the product, the easier it will be for them to use.

Microcopy
Any text that is 20-200 characters long on apps or websites to help users navigate a website. Labels on buttons, error messages, placeholder text in input fields, and text on tooltips are examples of microcopy.

Mindmap
A diagram that is used to visually organize information. It is usually created around one concept, and words/images that are associated are added. Major ideas connect directly to the single concept chosen, and other ideas branch out from there.

Mockup
A to-scale or full-size model of a product that can be used for evaluation and/or testing purposes.

Mood board
A mood board helps define the style for a product by collecting materials such as images, text, colors, and other branding elements. It allows you to understand the voice, direction, and style of the project. This type of data collection method is free-flowing by nature.

MVP
Minimum Viable Product (MVP) refers to the necessary features that are needed to launch a product. This doesn't mean further elements won't be developed later on. Products tend to be launched as MVPs to gather user feedback with a fast release.

N

Needfinding
Conducting research to uncover user needs, not simply wants or conveniences, that can be met by a product. This often consists of going to the users and conducting observations, interviews, etc.

O

Onboarding
The onboarding process of a site is meant to be a welcoming experience for new users and is usually limited to a first-time use scenario.

Open Source
Anything that is open source is free and accessible to the public. You are free to use it, modify it, and build with it.

P

Pain Points
The problems that users face are known as pain points. Once identified, designers can create a more user-friendly design.

Persona
A representation of a certain type of user. Personas are grounded in research, and therefore provide a shorthand for that user group’s attributes, desires, and behaviors.

Pixel
Pixels are miniature squares used to create the images seen on our device. The color of each pixel changes to show different images and graphics.

Prototype
A modeled representation of a final product which users can interact with and give feedback on.

-Low-Fidelity Prototype – Early prototypes are simple. A quick sketch on paper can be enough to get feedback on an idea.

-High-Fidelity Prototype – A high-fidelity prototype looks like and functions closely to the desired final product and can be used as a tool to deliver specifications to developers.

Q

Qualitative Research
This form of research includes gathering data about the target audience's problems, motivations, opinions, and reasons by conducting interviews.

Quantitative Research
Utilizes numerical data to understand user behavior.

R

Responsive Web Design (RWD)
RWD is accomplished when the content and layout of a website efficiently adapts to the sizes and abilities of the device it is opened on. In doing so, you provide optimal viewing experiences to the user across a variety of platforms and devices.

Retrospective
A step in Agile development where the team reflects on an iteration (sprint) to improve the process of the next iteration (sprint).

S

SaaS
Software as a Service (SaaS) delivers applications over the internet. It frees you from complex software and hardware management by accessing software via the internet. This avoids the hassle of installing and maintaining software.

Scenario
The story of a user’s day-to-day life which offers context as to how your app or website fits into their life.

SEO
The goal of search engine optimization (SEO) is to increase a website's visibility in search results. It involves writing content on a website that includes certain words and phrases commonly used in searches related to the brand's product or service.

Site map
A visualization of the hierarchy and pages of a website.

Sketching
A drawing that helps designers propose, explore, refine, and communicate ideas.

Sprints
A term in agile software development to signify the period of time, usually 2 weeks, that team members have to complete assigned tasks.

Stakeholders
Additional parties beyond the user, such as the project owner, project sponsor, and customers who have investment in the project. It’s important to communicate with and respond to the needs of all stakeholders.

Storyboard
A storyboard captures a UX designer's vision of the design by creating a rough sketch of the scenario. By arranging sequenced images chronologically a storyboard is able to narrate the main events of the story.

SVG
SVG stands for scalable vector graphics. This image format consists of scalable two-dimensional graphics that have the capability to be manipulated and animated with code.

T

Task Analysis
Listing tasks or steps a user takes to complete a given goal. When done in the early stages of development it can help identify and communicate problems in the user experience.

Technical Debt
When an easy but messy solution is favored over a better yet more time consuming option technical debt begins to accrue. This generates more work cleaning up the messy solution.

Touchpoint
Any instance where a user will interact with the party(ies) producing the app, website, feature, etc.

U

UI Elements
Allow the users to engage with the design by providing virtual items on a website's interface known as UI Elements. Examples of UI Elements are buttons, navigation bars, slider arrows, dropdown lists, message boxes, and anything that enables the user to navigate the website.

UI Pattern
A reusable solution to a common usability problem. For example, a login screen tends to be made up of two input fields (username and password) and a button to submit these. This collection of UI elements is a login pattern.

Unit Testing
Verifying that each part of an application works by testing them. This can be done manually or it can be automated.

Usability
How easy a website or app is to navigate and use.

Usability Testing
Allows us to evaluate the usability of a product by testing it on a group of representative users.

User Engagement
A measurement of whether users find value through the choices they make on a website.

User Experience (UX)
Includes several areas that study the effect of design on the level of satisfaction and usability of a product, site, or system.

User Experience Design (UX Design)
Designing a product to be as user-friendly as possible. It focuses more on the technical and functional aspects of design as opposed to the aesthetic aspects, and it should include user research/testing. UX design usually starts before UI design.

User Flow
The intended steps a user must take to complete a goal on a product. The user flow often includes a name, steps, and a description of each step.

User Interface
The set of visual components needed to interact with a product (text, buttons, etc.) is known as the user interface.

User Interface Design (UI Design)
Similar to graphic design, UI design consists of designing the polished look and feel of a product. It typically begins after UX design has begun so that data brought forth from the UX design can be incorporated.

User Research
Research that is focused on understanding your end user better. The goal is to add context and insight to the design process.

User Scenarios
Hypothetical circumstances that prompt the user to follow a specific path of tasks.

User Stories
User Stories record actions each user can take in a product. The formula is as follows: “As a <insert kind of user>, I want <insert feature or action>, to be able to <insert desired outcome>.”

User Testing
Testing a product in development with people who could be real users of the finished product.

User-Centered Design (UCD)
Approaching the design of a product or service by placing the end user in the center of the process.

V

Vertical Rhythm
The vertical spaces between elements on a page are consistent with eachother. This can be done with the help of a baseline - creating consistent spaces by using a common denominator.

W

Waterfall
Waterfall is the opposite methodology of Agile. Each phase must be completed before the next phase can begin. For example, the entire design would need to be completed and approved before the developers could begin their work.

Web Analytics
Forming a better understanding and optimization of web usage by measuring, collecting, and analyzing the internet.

White or Negative Space
Leaving blank (unmarked) space on a page that promotes the content and grants easier navigation.

Wireframe
A low-fidelity prototype made to convey basics of content positioning and feature functionality of an interface. Colors and styling are typically not needed.