UX/UI Design
At its core, UX research and design is about understanding people and designing their needs into experiences. Becoming fluent in UX vocabulary will help novices and experts go deeper with research and design deliverables, and in the end, create better products.
-
3 Click Rule
A best practice of web design that states that users should be able to find anything need on a website within three (or fewer) mouse clicks. When more clicks are needed to find information, users can become frustrated and leave the website.
-
5-Second Test
Any number of user tests that involve a 5-second exposure to part of the interface. Short tests allow researchers to capture impressions.
-
80/20 Rule
A general principle stating that 20% of factors are responsible for 80% of the outcome. Applied to web design, 20% of product features are responsible for 80% of the outcome. Researchers want to identify this 20% and focus most on designing these features well.
-
A/B Testing
A tool for gathering feedback on small changes to a product. In web design, it involves showing users one of two versions of the same page and measuring which one gets a better result in terms of some metric, such as conversions or click-through rates. The pages usually include a change to a single feature, such as color, copy, or placement of a button or text box.
-
Above/Below the Fold
Content above the fold is content that can be seen when the page is loaded. Content below the fold is content that users must scroll to see, and this area should include more supplemental content.
-
Accessibility
A measure of how accessible a website is to users with functional impairments. For example, additional features can be implemented to help visuallyimpaired site visitors, such as image meta tags, voice assistants, or text readers. For hearing-impaired visitors, captions or transcriptions of video and audio content are useful.
-
Adaptive Design
Adaptive design is similar to responsive design, except that they layout stays fixed until the screen reaches a specific size, and then the layout “snaps” to a new format. Adaptive design layouts only change a few times, while a responsive design continually changes its layout to mimic the screen size.
-
Affinity Diagramming
A visual tool used by researchers to organize qualitative data and come up with overarching themes. User statements that express similar needs, attitudes, experiences, or ideas are grouped together on a board. Researchers can rearrange the statements to find the most cohesive and consistent themes collected in research.
-
Affordance
Any action an object can accommodate. For instance, a “button” on a website can be “clicked.”
-
Blur Test
A test that presents users with a blurred version of the interface to see what the most striking visual elements are.
-
Breadcrumbs
A navigation system that displays where the user is within the site. It can help the user determine their current level in the website or the pages related to the one they are currently visiting.
-
Business Model
The way a business plans to make money with its product. User experience should play heavily into the business model; when a product provides a solution that is delightful to use, it stands out from its competitors.
-
Card Sort
A method for getting user feedback on a site’s architecture. Testers are given a stack of cards with the names different information resources on them. The testers sort them into piles that make sense to them and come up with labels for these piles. This method is helpful for determining the most intuitive arrangement of site levels and categories.
-
Chunking
A technique of breaking information into smaller pieces in order to help users assimilate it. One example is breaking text into multiple paragraphs, sections, or boxes so that users can process it one piece at a time.
-
Clickable Prototype
Another rapid prototyping option. Online programs like InVision allow designers to quickly put together a set of screens with hotspots that can be clicked, taking the user to another screen. It is a better way to simulate what an actual, coded website would look like, although it takes more time to set up than a paper prototype.
-
Clickstream Analysis
A recording that captures where the user clicks on a page. In user testing, it can be used to evaluate the path the user takes through an interface. It can also be used to analyze erroneous clicks, such as clicks on non-clickable items or clicks on the wrong part of the interface or navigation.
-
Cognitive Bias
A bias that occurs in the way people think, based on the situation, their prior knowledge, the way information is presented, or some other factor.
-
Cognitive Load/Overload
Cognitive load describes the amount of mental effort needed to complete a task. Cognitive overload occurs with the task requires too much working memory or mental effort. When site interactions, directions, or navigations are too complicated, they can create cognitive overload in the user, who then makes inefficient or incorrect decisions (or gets frustrated and leaves).
-
Cognitive Walkthrough
A tool for evaluating learnability in a system. The evaluators complete a set of tasks as if they were new users of the system to determine whether there are any gaps in learnability.
-
Color Psychology
The psychological study of how colors influence emotions and cognitions. For instance, color can affect brand recognition, gendered product appeal, perceptions of trust, and emotional reactions to a product.
-
Competitive Analysis
The process of comparing a product to other similar products on the market in order to gain insight about features, strengths and weaknesses, branding, and user experience of the products already available.
-
Contextual Inquiry
A research method based on observing people working in their natural environments. Researchers are able to better understand the ways people interact with the world by observing participants outside the confines of the lab environment. Contextual inquiry is used to observe people interacting with a product or performing a task on their own to gain insight into how they would behave in their natural environment.
-
Conversational UI
Any element of a user interface that mimics a human-to-human conversation. Voice assistants and chatbots are two clear examples, but elements of conversation can appear in copy as well, such as when a “OK, got it.” message is displayed after a user clicks a button. These interface features make the UI appear more responsive and less impersonal.
-
Conversion Rate
A conversion is an action the user takes to become further invested in the business, such as a making a purchase, requesting membership, or providing their personal information for a mailing list subscription. Usually, users are prompted with messaging to take one of these actions after interacting with the site. The conversion rate is the percentage of users who accept the prompt and take action.
-
Copy
The strategic writing on the website that includes messaging, calls to action, buttons, and other snippets of text. The quality of copy affects how clear and compelling the user’s next action is. Also related to copy is Typography – the design of printed language. UX designers are concerned with the way typography affects information processsing and emotion.
-
CTA (Call To Action)
A message that prompts the user to take an important action. It could be to “call use for more information” or “buy now.”
-
Customer Journey Map
A diagram that shows the cradle-to-grave journey a customer takes when interacting with a company. It starts with initial contact and continues through the decision-making and buying phases, and then through to upgrading or replacing the product. It can be used to evaluate how effective the common touchpoints are with a customer.
-
Design Thinking
A problem-solving process used by designers to brainstorm innovative solutions. A successful design should make use of design sensibilities and best practices, meet users’ needs efficiently, and be viable for the business to implement.
-
Discoverability
The degree to which users can discover useful information on a given website. While findability deals with the presence of useful and expected information, discoverability deals with whether the user can easily locate that information.
-
End User
The set of users that a product or service is designed for. While anyone can be a user (even the product’s designer or developer), the term end user better captures the average or ideal person who will be using the product; it is these people’s perspectives that should be considered first and foremost when designing the product.
-
Error Analysis
A method for researchers to evaluate the type, frequency, severity, cause, and other aspects of errors that occur when a software product is used. Not all of these errors can be predicted up front, since conditions may come up in real-world use that weren’t part of the test conditions.
-
Ethnographic Research
The study of people or a culture, where the researcher attempts to observe the world from the point of view of the study’s subjects. The goal is to deeply understand the culture, attitudes, cognition, or perspectives of a group of people.
-
Eye Tracking
A research tool where researchers use equipment to track the movement of testers’ eyes on a page. It can be used, for instance, to see what catches users’ eyes first, how long they spend looking at different features of the page, and how they search for a particular feature on the page.
-
Feature Analysis
The process of ranking a set of potential features for the product based on some criteria, such as how useful, expected, or exciting a feature is for users.
-
Findability
The degree to which users can find the information they expect to find on a given website.
-
Flat Design
A trend in web design where the appearance of buttons, icons, and other design elements is flattened to create a minimalistic design. Once most people were familiar with the functionality of a button or text box, designers started to simplify these symbols to give the website a cleaner interface.
-
Fluid Design
A fluid design is created by setting width percentages for each element of the page so that they change size as the window is resized. Although it works for many screen sizes, it tends to look awkward when the screen is significantly larger or smaller than the designer’s screen.
-
Focus Group
A targeted group of people that researchers can ask questions or lead discussions with. In user research, this is a good way to quickly hear from a lot of people or find commonalities in people’s experience or attitudes about the research topic.
-
Framing Bias
A common example of a cognitive bias that comes up in user research. It happens when researchers inadvertently highlight a detail that affects user behavior. Positive or negative words can affect how users conceptualize a task or interface, leading them to pay more attention to certain details or to have a harder (or easier) time completing a task using the interface.
-
Gestalt
The cognitive perception of a “whole”. Designers must look at how users perceive and recognize the entire shape and layout of the page, since these impressions can affect their implicit perceptions of the page.
-
Grid
A division of the interface into equally-sized columns and rows. It helps with appropriate placement of page elements, control of white space, and alignment of content on the screen. Many websites are developed with a grid. It’s also key to responsive design, where page elements can snap to a smaller or larger grid when the page is resized.
-
Guessability
The degree to which a user can easily guess how to use a website’s functionality. It is a key part of making a website intuitive.
-
HEART Framework
Google’s metrics for evaluating user experience, including happiness, engagement, adoption, retention, and task success.
-
Heuristics
Rules of thumb that help enforce best practice. In web design, these are the general rules applied by designers to create a usable interface. A few heuristics are to include undo and redo features, use natural language, check for consistency across the site, make important information visible, and provide support for common user errors.
-
Impression Test
A 5-second, open-ended test where researchers solicit keywords or gut impressions to describe the site.
-
Information Architecture (IA)
The process of structuring a website’s information resources for usability.
-
Information Hierarchy
The relative importance of information on a page. Ideally, information hierarchy should correlate with visual hierarchy, so that more important information is more prominent on the page.
-
Interaction Design
The design of what happens when a user interacts with a product. An “interaction” could be a click, swipe, text entry, or other gesture. Interaction design aims to create a consistent, intuitive, efficient, and pleasing response from website objects as they are interacted with.
-
Interaction Model
The relationship behind all parts and interactions within an application. It defines how objects relate to actions, what each interaction means, and how users get from place to place within an application.
-
Interactive Design
A design philosophy that advocates for meaningful, responsive, and personal experiences with software.
-
Kerning
The process of adjusting the space between two letters in a font. In every font, the width of letters and the amount that they hang into the space to the left or right of their stem can change. Kerning makes the design more balanced and the text easier to read.
-
Leading
Often referred to as line spacing, leading is the distance between the baseline of one line of text and the top of the next line of text.
-
Learnability
The degree to which a user can easily learn and remember how to use a website’s functionality.
-
Level
A layer within the site’s architecture. The top level represents the most important funnels of information, but there are often 1-3 additional layers or “levels” of information below the top level.
-
Low/High Fidelity Wireframes
Varying degrees of detail in wireframes. Low fidelity wireframes are missing many elements (colors, material design, etc) that will be in the final product, but they allow for quicker communication with other designers or stakeholders. High fidelity wireframes aim to be as close to the final product as possible. They are appropriate when nearing the final stages of design, where clarity and consensus on design details is needed.
-
Material Design
A design style advocated by Google. It strikes an aesthetic balance between flat and skeuomorphic design.
-
Mental Model (or Mental Map)
A person’s conceptual, cognitive model of something. A user naturally tries to conceptualize or predict how a new interface works, based on their past experiences. Good UX design successfully builds on people’s mental models of similar experiences. Designers must be careful not to mismatch mental models, or to create functionality that only they personally understand (but that users interpret differently).
-
Minimum Lovable Product (MLP)
A strategy to ensure that a product has enough features to be lovable. A product that is exceptional in the eyes of users will push beyond a basic set of features from the beginning in order to be exciting and novel.
-
Minimum Viable Product (MVP)
A strategy for getting a product to market quickly in order to get feedback from users. The product is developed with a minimal set of features deemed necessary to meet users’ core goals. The idea is that the user experience for these core features is most important to get right during early development. Additional features are added after product feedback is taken into account.
-
Mockups
A design tool for pinning down the final graphical elements of an interface. Rather than focusing on functionality, a mockup describes the look and feel of the interface.
-
Mood Boards
A display of visual assets (such as fonts, colors, or images) that capture the emotional response a brand or site should elicit. In the early stages of branding or design, the mood board can help set the tone for any design choices that are made during the mockup and prototyping stages.
-
Motion Design
A part of interaction design that deals with motions that happen when a page element is interacted with. Examples include drag and drop functionalities, motion graphics used to introduce modal windows, and quick animations.
-
Navigation
The process of moving through the information resources on a website. A website’s navigational elements include global (site-wide), local (available in specific sections), supplemental (separate from the main navigation), and contextual (available based on the user’s path).
-
Object Oriented User Experience (OOUX)
An approach to design that considers all parts of an interface as objects the user can interact with to complete their goals.
-
Page Speed
Another measure of website performance that focuses on the time it takes to initially load the page. If the load time is over the threshold of 1000 milliseconds (1 second), It’s said that users might get frustrated and navigate to a different site, or think the site isn’t working and lose trust in it.
-
Pain Point
A problem that causes frustration or inefficiency. In the initial stages of user research, the researchers may uncover pain points by asking users what solutions they currently have for meeting a specific need. The pain points are the ways in which that solution is lacking. The current solution might not be completely adequate in meeting the user’s goals, or it may be unpleasant or time-consuming for them to implement. Designers have the opportunity to solve users’ pain points in order to create a valuable product.
-
Paper Prototype
A version of rapid prototype, where screens are drawn on paper. The researcher then manually switches to a different “screen” if the user “clicks” on an interaction. Paper prototypes are a good way to do early prototyping without investing in a lot of development on a design that may be changed completely.
-
Path
The path a user travels to reach a specific location within the site.
-
Performance
A measure of how quickly and efficiently a website works. Any time data must be requested loaded, or a computation is performed, or the page communicates with another website, issues with performance can come up, either through slow reaction times or page errors. These are frustrating for users and contribute to a poor user experience.
-
Personas
A tool for understanding a subset of users better. The persona takes attributes of similar users and blends them into a description of a single target user. The persona includes details about the attitudes, behaviors, pain points, preferences, lifestyle, and motivations of this group of users.
-
Preference Test
A test that presents two versions of an interface to users to find out which one they prefer (and why).
-
Process Flow
This concept considers movement through the application from the perspective of a single process or task. It starts at the point of entry and describes the intermediate steps of the process, through to completion of the process.
-
Product Roadmapping
A vision of the path a product will take. It is essential for communicating the purpose and direction of a product in order to gain funding and get everyone on the same page.
-
Prototyping
A tool for usability testing. It is a draft of the interface that includes enough details to be usable. Users can then complete task scenarios on the prototype, or researchers may ask questions about the prototype to ensure that it is perceived as designers intended.
-
Qualitative Research
A UX research approach that focuses on collecting data about the “why” and “how” of experience and decision making. Through exploring individual narratives, a set of meaningful themes can be created and applied to research.
-
Quantitative Research
A research approach that focuses on numerical data that can be used for statistical analysis, algorithms, and other mathematical methods.
-
Rapid Prototyping
A testing method where a rough prototype is created early on in order to solicit user feedback.
-
Responsive Design
Design that considers screens of all sizes. Since users may be accessing a site from a mobile phone, tablet, or laptop, not all screen elements can be easily used across these varying screen sizes.
-
Screener
A set of questions asked of potential user research participants to ensure that they are part of the target audience. Screeners help maximize research budgets and control the quality of results by ensuring that only qualified respondents are allowed to participate in the study.
-
Search Engine Optimization (SEO)
A tactic for increasing page rankings in search engines like Google or Bing. There is a set of specific rules that SEO experts can apply to make content easy for search engines to find. They include using keywords within the content, using appropriate tags for images, and having efficient and descriptive navigation. Often, the tactics that make websites easier for search engines to read also make them more accessible to users.
-
Signifier
In UX design, a signifier is a visual cue that helps users guess an object’s functionality or affordances. An example would be a button that is raised or changes colors when hovered over.
-
Sitemap
A diagram that shows the structure of the site. It lists the name of each webpage, with lines or arrows showing which other pages it is linked to.
-
Skeuomorphic Design
A design style that includes heavier detailing of buttons and icons to make them appear to have a texture closer to the actual item they represent. Initially, this type of design was used to help signal to users that the item is interactive.
-
Story Mapping
A visual tool for mapping essential product requirements and holes in product functionality. Each user story is mapped under the functionality that would be needed to make the story possible.
-
Storyboarding
A UX storyboard is a series of illustrations that tell a story about the person using the product. They use a story format to show the key moments in the user’s product journey. Since UX design is meant to be user-focused, storyboarding helps keep the focus on the people ultimately using the product by telling a story that designers and stakeholders can empathize with.
-
Swim Lanes
A diagram used to show process flow. Each process or subprocess is placed in its own lane, along with the sequential steps needed to accomplish that process. Arrows are added to show how steps in a subprocess are related to steps of other subprocesses.
-
Task Scenario
A believable scenario given to users in order to test an interface. The scenario provides context for users to imagine they are performing a personal task. Users then explore the interface and try to complete the task while researchers record and observe their actions. The think aloud method may be used while participants complete a task scenario.
-
Think Aloud
A test method where users think aloud as they use a system. Researchers learn what people are thinking as users figure out how to navigate a new interface.
-
Time on Task
The amount of time a user spends on a task. Researchers can analyze time on task to see if it is reasonable, or to see if changes to the design result in lower average times.
-
Use Case
A condition that is triggered by a specific set of user or system actions. The use case often defines the actions that create the condition, along with the expected software behavior when the condition is triggered.
-
User Experience (UX)
A term that broadly describes the thoughts, emotions, perceptions, or attitudes people have while interacting with a piece of software. Emphasis is placed on how easy, pleasant, and efficient the software is to use.
-
User Flow
The set of steps (or screens) users must move through to accomplish a goal within an application. The smoother the flow, the more likely the user is to have a positive experience and complete the goal; researchers attempt to streamline movement within an application to provide better flow.
-
User Interface (UI)
The space (such as a computer or mobile screen) where users interact with software.
-
User Interview
A method where researchers ask specific questions of users to enhance data gathered during observational methods. Questions asked could pertain to demographics, the user’s past experiences and background, or parts of observation that need to be clarified.
-
User Observation
The research method of observing users and recording their behaviors to look for insights.
-
User Profile
A model of a particular user that includes a specific set of data on the person. It can be used to quickly access certain traits, demographics, or preferences of the person to use in groupings and computations.
-
User Segmentation
The process of grouping users into meaningful subsets in order to delve further into that particular group’s preferences, attitudes, and behavior. Possible segmentations include users at a particular stage in the product lifecycle, users with differing capability levels, and users with different goals for the product.
-
User Story
A short statement that describes a user, a specific “want” they have, and the reason for that “want”. Two examples of user stories would be: “As a forum user, I want to be able to create a new thread, so that I can start a conversation with other forum members” and “As a forum administrator, I want to be able to approve new members before they can create threads, so that I can control the quality of content on the forum”. The user stories are an approachable way to discuss product requirements.
-
User Survey
A survey that can be sent out to target users to gain feedback, ask about intended usage of a software product, and get input on features, among other issues. They are a cost-effective way for designers to gain information, although they are not in-depth enough to be used as a substitute for user testing.
-
User Testing
The process of conducting tests with users to get feedback on impressions and usability.
-
User-Centered Design (UCD)
A design process that is driven by the needs of the product or service’s end users. It requires designers to determine users’ needs, design the product with those needs in mind, and then test the product with real users to ensure that the core needs of users are actually being met.
-
Visual Hierarchy
The visual importance of elements on the page. An element may be higher in the hierarchy if it is larger, more colorful, or placed higher on the page. Elements that include motion also catch the eye, as do images. Ideally, items with greater visual hierarchy should also be the most important elements of the page, content-wise.
-
White Space
The blank space on the page that isn’t filled with text or images. White space allows for the eye to travel to points of interest rather than being bombarded by constant content.
-
Wireframing
A preliminary visualization of an interface layout. It leaves out many design details (color, images, copy) and focuses on showing the relationship between different objects on the page. The goal of a wireframe is to explore how the structure of the site is working, without being distracted by irrelevant visual details.