A theory that if users aren't able to complete their task with 3 mouse clicks or less, they will abandon the website.
A test that lasts five seconds to gather users' first impressions of a single page.
A rule to help improve the color design of a page by using 60%, 30%, and 10% proportions for better color balance.
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 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.
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.
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.
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."
A measurement of users' interactions and behaviors with a site to help developers understand how their products can be improved.
Pieces of software that help different applications communicate with each other to allow easy access to server information.
When a Quality Assurance (QA) engineer tests a software application with an automation tool.
A online representation of users without an uploaded image of themselves, often seen in comment threads.
Work on the core functionality of a website, software, or IT system.
A list of tasks prioritized by project managers/product owners that developers can work on when they finish their main tasks.
A company document that establishes brand identity and standards and sometimes a company overview and communication guidelines.
An element usually placed near the top of the page to help users navigate a website and go to the homepage.
Software mistakes that cause unintended behavior such as glitches or crashes.
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.
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.
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.
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.
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.
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.
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.
The field that uncovers data trends and insights for businesses to make strategic decisions.
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.
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
A focus on people, culture, and fast technology delivery through the use of agile development. It improves collaboration between development and operations teams.
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.
A visualization split into four equal quadrants about what a user is saying, thinking, doing, and feeling.
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.
The outline of a user's path as they interact with the information architecture, interaction design, and experience design.
Hardware and software that tracks the point of vision of the user on an interface.
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.
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.
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.
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.
A diagram to present the steps to complete a task.
An interview conducted in a small group setting where everyone has the opportunity to answer the questions asked.
The creation of a website's features that users can view.
The process of integrating game-design elements and principles into products to increase user engagement.
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.
A web-based platform or hub for developers to collaborate on their coding projects.
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.
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.
A usability test that utilizes bystanders to test your product. It is good practice to set-up in a high foot traffic area.
Areas of intersect/focus points are represented by certain colors. This technique is used with eye-tracking software.
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.
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.
A programming language that integrates with HTML and CSS and creates interactive elements on a page.
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.
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.
The web page, also known as a target or destination page, that a user is taken to after clicking a link.
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.
A design language that Google developed, often referred to as just "Material".
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.
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.
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.
A to-scale or full-size model of a product that can be used for evaluation and/or testing purposes.
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.
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.
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.
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.
Anything that is open source is free and accessible to the public. You are free to use it, modify it, and build with it.
The problems that users face are known as pain points. Once identified, designers can create a more user-friendly design.
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.
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.
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.
This form of research includes gathering data about the target audience's problems, motivations, opinions, and reasons by conducting interviews.
Utilizes numerical data to understand user behavior.
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.
A step in Agile development where the team reflects on an iteration (sprint) to improve the process of the next iteration (sprint).
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.
The story of a user’s day-to-day life which offers context as to how your app or website fits into their life.
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.
A visualization of the hierarchy and pages of a website.
A drawing that helps designers propose, explore, refine, and communicate ideas.
A term in agile software development to signify the period of time, usually 2 weeks, that team members have to complete assigned tasks.
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.
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 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.
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.
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.
Any instance where a user will interact with the party(ies) producing the app, website, feature, etc.
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.
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.
Verifying that each part of an application works by testing them. This can be done manually or it can be automated.
How easy a website or app is to navigate and use.
Allows us to evaluate the usability of a product by testing it on a group of representative users.
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.
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.
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.
Research that is focused on understanding your end user better. The goal is to add context and insight to the design process.
Hypothetical circumstances that prompt the user to follow a specific path of tasks.
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>.”
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.
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.
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.
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.
A low-fidelity prototype made to convey basics of content positioning and feature functionality of an interface. Colors and styling are typically not needed.