UX/UI GLOSSARY
The UI / UX Glossary for Designers is a valuable bag of tips that will teach you to speak the same language as designers. This will give you a better understanding of key UI / UX terminology.
#0
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
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.
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.
60-30-10 Rule:
A timeless decorating rule that can help you put a color scheme together easily. To put it short, the 60% + 30% + 10% proportion is meant to give balance to the colors used in any space.
A
A / B Testing:
An A / B test consists of proposing several variations of a page or an element which generally differ according to a single criterion. The goal is to determine which version gives the best results with users. It is necessary to obtain sufficient statistical confidence to determine whether a variation is winning or not. Enabling Composition Space: Use spaces to create a reading "flow" between items.
Affordance:
Affordance, or potentiality, is when the design is self-sufficient for the object to be used. Term coined by Don Norman in his seminal user experience book: The design of everyday things, Basic Books, 2013.
Arbitrated reality:
When the product adjusts or changes what the user sees.
Information Architecture (abbreviated AI):
It is the art of expressing a model or concept of information used in activities requiring explicit details in complex systems. In digital, it is the reflection on the contents of a site / an application, all its pages, functionalities, see even the user journeys, then their modeling in diagrams, models… According to the model of the key book of the user experience The elements of user experience, after the strategy and the scope
B
Branching and nodes:
Decision tree proposed to the user. Often used in lead generation sites.
Breadcrumb trail:
Secondary navigation schema on a site or web application. It shows the user's location and the path they are on. This is a recommended item for SEO. It often appears on websites in this format: Home page -> Category page -> Product page The page in "italics / bold" is the page the user is on.
Bounce rate:
The percentage of visits where the visitor enters and leaves the same page without having visited any other page on the site. This indicator is particularly interesting for allowing us to assess the performance of a home or landing page.
C
Call to action (abbreviated as CTA):
This is the name given to a button having an incentive form and / or content, prompting the click. This is usually the main action you want the user to take on a given page.
Conversion rate:
The conversion rate is the percentage of visitors who complete a specific action such as purchasing a product, filling out a form, or downloading a file. This performance indicator allows us to know to what extent our strategy is achieving its objectives.
Card sorting:​
This is the method of sorting the pages / content of a site or interface. There are 2 card sorting methods: open card sorting (no prior categorization) and closed card sorting (predetermined categorization).
Chunking:
Chunking is a psychological principle indicating the importance of always dividing, categorizing and ventilating information so that the user can decipher it.
Cognitive load:
Cognitive load theory involves the ability to store information and integrate new information. It allows the designer to take into account the upstream information that our memory may contain. It differentiates between working memory (instantaneous) and long-term memory (retained).
It can be associated with Miller's theory "7, the magic number + or - two": 1 person cannot hold more than 7 objects simultaneously. This forces the designer to be careful not to overload his user with information and choices.
Controls:
Controls allow you to change, adjust or manipulate the content of an interface. They must intrinsically make their purpose and use explicit. They can be based on: action, selection, input (or input) or display (or display).
Cross-selling:
Cross-selling, or associated selling, is a sales technique. It consists of offering products that can be perceived as complementary by the consumer when purchasing one of them.
Content inventory:
This is an audit of all the pages of a site and all of its content, to categorize them through a Sorting of cards.
Common Destiny:
Elements or objects that move in the same direction are seen as a common whole, as opposed to elements or objects having opposite directions.
Conversion rate optimization (abbreviated CRO, Conversion rate optimization):
Conversion rate optimization is a process of creating an experience for your website visitors that will convert them into customers. It uses tools like A / B testing and website personalization.
CMYK:
The CMYK acronym stands for Cyan, Magenta, Yellow, and Black: those are the colours used in the printing process. A printing press uses dots of ink to make up the image from these four colours.
D
Desired path:
Marks or traces of wear which designate the most common means of use. For example, heatmaps show the paths the user chooses that are not necessarily those intended for him.
Data-to-ink ratio:
Remove all the unnecessary from the design to bring the clearest information to the end user and thus provide the best user experience.
Design patterns:
Solutions that can be reused by the user. Whether it is to use models known to all users (use of the main navigation on a website) or to create uses for the site / product designed, these models are reusable by the user throughout his journey.
Deceptive (or Poka-Yoke principle):
It is the fact of applying a physical constraint to a product to force a behavior. For example, the difference between electrical outlets in France and Great Britain.
Digital skeuomorphism:
Used to clarify the presentation of an idea, skeuomorphism involves borrowing the design / characteristics of a physical object and applying it to a design (for example, using the design of a physical calendar for a online calendar). This allows the user to be guided.
E
Engagement:
In the field of web analysis and more broadly digital, engagement is defined by the volume of interactions that a user will have with a digital product or service (clicks, time spent on the site, number of page views , important actions carried out ...)
Ergonomics:
The goal of web usability is to make websites easier to use for the end user, without the need for dedicated learning. The user should be able to intuitively relate the actions they need to perform on a web page to the other interactions they see in their life (for example, pressing a button causes an action).
Eyetracking:
Produces heat maps or concentration points, to analyze where the user's eye is drawn.
F
False choice:
Provide different choices to the user, which lead to the same place. The user thinks he has a decision to make and walks through the interface.
Factors of presentation:
It is always necessary to take into account the factors of presentation of a device for the user experience: Size of the device / of its screen, components of the screen, ergonomic factors (touch, etc.) and the variation of presentation (horizontal / vertical).
Feedback:
When the interface responds to a completed task (a button changes color ...). This is essential to properly card and inform the user of what he is doing.
Fitts’s Law:
Always minimize distances and interaction time to maximize engagement.
Flowchart:
It is a graphical representation of a sequence of action / operation in order to visualize a process as a whole.
Flow State:
State in which the user is completely immersed in a task.
FOGG Model:
The key motivations for a trigger (Acceptance, Hope, Rejection and Fear) must align with the capacity factors (Time, Money, Physical Effort).
G
Gamification:
Applying the rules and elements of the game to what is not in the game (Badges, "unlockable" items, levels, percentage complete, etc.). This can make initially boring tasks totally addictive. Gamification can be carried out during lead collection tunnels, on the user account of an interface ...
Grid System:
An underlying structure that allows for a design based on alignments. There are columnar grids, modular grids, and hierarchical grids.
H
Hick's Law:
The more choices a user has to make, the longer it will take for them to make a decision.
Hover:
This is the behavior of an element of a site when the mouse hovers over it.
Human-machine interactions (abbreviated HMI):
Human-machine interactions (HMI) define the means and tools used so that a human can control and communicate with a machine. Engineers in this field study how humans interact with or between computers using computers, as well as how to design systems that are ergonomic, efficient, easy to use or more generally adapted to their context. of use.
I
Interaction state of a button:
The different interaction states of a button can be as follows: No interaction / Hover / click or pressure (for touch interfaces) / interaction activated / deactivated (often grayed out).
Interaction design (abbreviated IxD):
Interaction design is the design of interactions between a product and its user.
J
Javascript
We’ve looked at HTML and CSS, two of the 3 cornerstone technologies in web development. Javascript, the 3rd cornerstone, defines how both the HTML and CSS should behave. Think of it as the language that helps us make elements on a page interactive.
​
K
KPI: Key performance indicators (KPI).
These indicators are measures used to quantify results, to measure the strategic performance of an organization. On the Web, this can be unique visitors, a page views per visitor ratio or a bounce rate for example.
L
Long tail:
This expression refers to the phenomenon where all the products in a catalog sell in small proportions, but the sum of their sales may exceed the sale of the best-selling products. It also applies to SEO: the sum of visits generated by very little searched keywords can exceed the visits generated by the most searched keywords.
Landing page:
Refers to the first page of a visit to a site, this term is often used for the landing page of advertising campaigns.
Law of Tesler (or Conservation of Complexity):
Every system of interaction has a certain level of complexity. The design can only simplify interactions to a certain point, beyond this point the difficulty can only be displaced). Conversion tunnel: Refers to all the key steps that lead to converting an Internet user during a visit to a website.
​
​
M
Mental model:
Strategy to help the designer understand the bad user experience, beliefs and abilities necessary to use a product. This generates an alignment diagram.
Minimal usable design:
In the idea of ​​Pareto's law (law of 20/80), or an MVP (Minimal viable product), the minimal usable design makes it possible to validate the main functionalities of a product without this requiring too heavy an investment.
Multi-key gestures:
These are the gestures used in the touchscreen interfaces: Press / Hold down / Scroll / Pinch (for zoom) / Swiper / Rotate.
Marker:
A small piece of code, usually in javascript, that is inserted into a web page. This one follows up (tracking) visitors by saving the statistics of his visit such as the pages he consults, its frequency ... Many different markers are inserted into a site during a tagging plan.
N
Neumorphism:
Combines developments of flat design and skeuomorphism. Neumorphism, or soft UI, is a visual style that combines background colors, shapes, gradients, highlights, and shadows to ensure graphic intense buttons and switches. All that allows achieving a soft, extruded plastic look, and almost 3D styling.
​
O
Onborading (or Point of Entry):
Directing users who are entering an interface for the first time and providing them with the best possible assistance. Onboarding can be a job for UX in its own right.
P
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 and allows the user to rate the content and interface and test the primary options for communication with the app. Though, prototype may not look exactly like the final product, but it definitely should not be sketched in shades of gray. In addition, interactions must be modeled in a way that closely mimic the final product.
Q
Qualitative versus Quantitative:
In user research and generally in marketing, qualitative is used to define, describe the problem and add words and appearance to it. Quantitative makes it possible to address larger segments, to obtain statistics and volume. It is essential to combine these two approaches to get feedback from users that are as reliable and as close to reality as possible.
R
Rational Ignorance (or Law of Least Effort):
Rational Ignorance, or Law of Least Effort, is the act of giving up seeking more information before making a decision when the cost of obtaining that supplement exceeds what is at stake. this decision. By nature, humans create patterns of behavior that allow them to perform actions simply. When designing a website, it is essential to take this law into account. Indeed, users will never read all the content of the pages, will behave impulsively and will seek to achieve their goal as quickly as possible, and this without taking into account all the rational factors at their disposal.
Reading distance (tablet):
The 3 reading distances recognized for a tablet are bed / knees / table. You have to test your prototypes and models over all these distances, and especially on the positions of the fingers that they generate. Many problems that are difficult to anticipate when designing interactions can result. The main menus and options must be accessible for each of these distances.
Responsive / adaptive:
Responsive Webdesign is a part of a larger concept called Adaptive Design. Adaptive Design, on the other hand, goes far beyond simple fluidity in the layout. In practice, this term means the same as Progressive Improvement: Trying to bring the best user experience to the widest possible audience (different devices, but also different browsing situations).
Rules of the game:
In the design of video games, or in a design by Gamification, there are 3 types of rules to propose. Operational rules (written), constitutive rules (logical) and implicit rules (known to all).
S
Scanner VS Read:
On the web, and digital interfaces in general, users scan the content of pages, without reading it in its entirety. So they constantly make sacrifices and choose the most reasonable option based on what they just saw. This is explained by the fact that their choices have no direct consequences (they can go back, cancel their actions ...). It is therefore essential when building a web interface to always prioritize information and actions, taking into account their importance for the user.
Shannon and Weaver Model:
This model demonstrates how each form of communication can be misunderstood. This can be due to the different stages of the transmission, or non-linear interactive models (like online chat).
SEM: (Search Engine Marketing) :
Brings together all the means and techniques aimed at promoting the visibility of a website on a search engine. SEM brings together paid referencing (SEA) and natural referencing (SEO).
Smoke test:
A smoke test aims to assess the appetite of a target for a product or service that has not yet been developed. The advantage of the smoke test is to quantitatively validate a concept quickly and at a lower cost. Traffic source: Traffic sources represent all the possible ways of accessing a website.
Star network (or Hub and spoke paradigm):
Model requiring the user to return to the starting point at each change. It is used to contextualize or explain certain complex actions or options.
Skeuomorphism:
Is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files.
T
Task Analysis:
Task analysis is the process of listing tasks or the steps a user takes to complete any given goal from the user’s perspective. It is typically done during early stages of product development to help us identify and communicate problems in the user experience.
Technical Debt:
Technical debt is similar to design debt but instead of taking a toll on the design system, it takes it on the code.
Products accrue technical debt whenever an easy but messy development solution is favored over a better yet more time consuming alternative. Eventually, the messy solution will need to be cleaned up, generating work. This is what we call technical debt.
U
User Journey:
A user journey is a series of steps that represent a scenario in which a user interacts with a given interface. They can be used in 2 contexts:- Demonstrate how users are currently using the site or product.- Demonstrate how users could use the site or product.
User research:
User research is the phase preceding the design of a site or a product, allowing user feedback to be incorporated into the design process, and thus offering them a product suited to their needs and characteristics.
Ubiquitous computing:
This is the 3rd era of computing, the integration of technology into everyday life such as the smartphone, augmented reality, the cloud ...
User Experience or UX:
User experience is an often overused and misused term. According to Don Norman, inventor son: “I coined the term because I thought 'human interface' and 'usability' were too limited. I wanted to cover all aspects of a person's experience with a system, including industrial design, graphics, interface, physical interaction, and the manual. "
Unique visitor:
Visitor identified as unique visiting a site during a given period, usually a month. This visitor is identified by a unique IP address. A single visitor may have made multiple visits to the same website.
UX contains:
the price takes into account graphics, interaction design, psychological factors, marketing and usability. By using user-centered design methods, the business makes it easier to achieve its goals.
UX Writing:
This is the discipline that uses user-centered design (UX) methods to write content for a digital product, or a brand. Its most famous tools are the Tone of voice or the personas.
V
Visit:
The visit is a consultation of the site carried out by an Internet user. According to a convention adopted by the majority of tools, failure to consult new pages on the site within a period exceeding 30 minutes puts an end to the visit.
Visit duration:
Visit duration measures the time elapsed between the first and last page of a visit.
Vector:
Is a graphic image that is made with mathematical equations—they’re defined in terms of 2D points connected by lines and curves to form shapes. Basically this means that vectors can be resized or scaled to any size without losing quality or getting blurry.
W
Weber's Law or Difference Threshold:
Weber's law describes the relationship between a mental sensation and the physical magnitude of a stimulus. In interaction design, this translates into the importance of making significant changes to direct the experience, and that the user can clearly interpret those differences.
Wireframe:
As the blueprint of a screen. They are a low-fidelity representation of a website’s layout and content.
X
X-Height:
Refers very literally to the height of a lowercase x in a specific font. You may question why such a specific height is so important, but the x-height affects the proportion of any font and, in turn, its legibility. It can generally be assumed that as the x-height increases, legibility improves.
In a graphic image, the x denote width.
Y
Y-width
In a graphic image, the y indicate height.
Z