Techniques on Fernando Ruiz

Affinity Mapping

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Affinity Mapping (or Affinity Diagramming) is a method used to organize a large amount of data (brainstorming ideas, interview observations, etc.) by grouping them into themes or categories based on their relationship or “affinity.” It is a collaborative way to find patterns in unstructured qualitative data.

What Is Affinity Mapping?

Imagine you have just done a month’s grocery shopping and you empty all the bags on the kitchen floor. You have a chaos of products. To put them away, you start creating groups: vegetables together, cleaning products in another pile, canned goods in another. You did not have predefined categories – you simply group things that “go together.”

Card Sorting

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Card Sorting is a user research (UX) technique that helps discover how people understand and group information. In a Card Sorting session, participants are asked to organize a series of cards, each with a concept or topic, into groups that make sense to them, and then label those groups.

What Is Card Sorting?

Imagine you give a friend a deck of 50 cards, each with the name of an animal. You ask them to sort them into piles that make sense to them. One person might create groups like “Pets,” “Jungle Animals,” and “Sea Animals.” Another might create groups like “Mammals,” “Reptiles,” and “Birds.” Neither is wrong; they simply reflect different mental models.

Chunking in UI Flows: Intelligent Fragmentation

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Chunking is the technique of dividing complex information or extensive user flows into smaller, logically grouped “chunks.” This makes it easier for the user’s brain to process, understand, and remember information without feeling overwhelmed.

Why Chunking is vital for Memory?

Our working memory is extremely limited. According to George Miller, we can only hold between 5 and 9 items at once in our mind. If an interface presents us with 20 form fields or a 10-step manual without pauses, our brain becomes saturated, and cognitive load skyrockets.

Color Contrast Math: Readability and Ratio

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Color Contrast is the difference in luminosity between the text (foreground) and the background. WCAG 2.1 accessibility guidelines establish specific mathematical contrast ratios (e.g., 4.5:1) that must be met for content to be readable by as many people as possible.

Why the Designer Must Know Color Math?

Designing only for “what looks good” on your high-end 5K monitor is a dangerous trap. A large portion of the world’s population has some form of visual impairment or uses their devices under direct sunlight.

Competitive Analysis

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A competitive analysis (or benchmarking) is a research process that involves identifying your competitors and evaluating their products, strategies, strengths, and weaknesses in comparison to your own product or idea.

What Is a Competitive Analysis?

Imagine you are the coach of a soccer team. Before an important match, you do not just train your team; you also study recordings of your rival’s games. You analyze their playing style, who their star players are, what their usual tactics are, and where they make mistakes. You are not doing this to copy them, but to prepare a counter-strategy that exploits their weaknesses and neutralizes their strengths.

Component API Design: Predictability and Flexibility

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Designing a Component API consists of defining a clear entry contract (props) and behavior for elements in a design system, with the goal that they are easy to use, predictable, and maintainable for both designers and developers.

What Makes a Good Component API?

A component is not just a visual piece; it is a unit of functional logic. A well-designed API must clearly answer these three fundamental premises:

Component Prop Organization: Structure and Hierarchy

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Prop Organization consists of structuring and prioritizing a component’s properties so its use is intuitive and predictable. This reduces the cognitive load of designers in Figma and developers in code, facilitating the creation of consistent interfaces.

Why does Prop order matter?

Imagine a complex component (e.g., an Input with a label, icon, error message, and help text). If the configuration properties are disorganized, the design system user (the designer or developer) will waste time looking for how to change the icon color or text size.

Constraints and Auto Layout Logic in Figma

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Constraints define how elements are positioned and scaled within a static container. Auto Layout is a flexible design system that creates containers that automatically expand or contract based on their content. Together, they form the foundation of any modern responsive design in Figma.

Why are these Tools Vital?

In modern digital product design, we don’t design for a single static screen. We design for an infinite number of devices and contexts. The correct use of Constraints and Auto Layout allows you to:

Crazy 8's

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Crazy 8’s is a rapid ideation exercise, fundamental to [[Design Sprints]], in which each participant sketches eight different ideas to solve a design problem in eight minutes. The goal is to force creative thinking by going beyond the first idea (which tends to be the most obvious).

What Is Crazy 8’s?

Imagine you are in a contest where you have to generate as many ideas as possible in a very limited time. The pressure forces you not to overthink, not to judge your own ideas, and to put down whatever comes to mind first. Crazy 8’s is exactly that: an ideation sprint.

Dot Voting

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A quick, visual voting technique that reveals team consensus without lengthy discussion—essential for prioritization workshops.

What is Dot Voting?

Dot voting is a rapid decision-making technique. Write ideas or features on a wall. Give each person dots (sticky dots, stickers, or markers). Each person places their dots on ideas they prefer. Most dots wins.

It’s silent. It’s democratic. It’s fast. The person with the loudest voice doesn’t dominate. Everyone’s vote counts equally.

Focus Management: Navigation without a Mouse

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Focus Management is the control of which interface element is selected at any given time to interact with it. It is the backbone of navigation for keyboard users (who press Tab), screen readers, and anyone not using a mouse.

Why the Designer Must Manage Focus?

Imagine walking into a dark room with only a flashlight. The area your flashlight illuminates is “the focus.” If you move the flashlight and, suddenly, the light disappears or jumps to the next room without sense, you’ll feel lost and frustrated.

Form Validation Timing: Reward and Rules

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Validation Timing decides exactly when we communicate to the user whether the information entered is correct or incorrect. Choosing the right moment drastically reduces flow interruption, user anxiety, and form abandonment rates.

Why Validation Timing is Everything

Filling out forms is a taxing task for the human brain. If you interrupt the user at the wrong time, you break their mental flow and create a sense of constant surveillance. Validation should not be a judgment, but a guide that helps finish the task as quickly as possible.

Heuristic Evaluations

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A heuristic evaluation is a usability inspection method in which one or more evaluators examine an interface and judge it against a set of recognized usability principles (the “heuristics”). The goal is to identify usability problems in the design.

What Is a Heuristic Evaluation?

Imagine you are a food critic visiting a restaurant. You are not a regular customer; you are an expert who evaluates the restaurant based on a set of established criteria: ingredient quality, presentation, service, ambiance, etc. At the end, you produce a report with your findings.

Input Masking Dangers: Usability vs. Format

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Input Masking is the technique of visually forcing a data format while the user types (e.g., automatically adding hyphens in a date DD / MM / YYYY). Although it seems like a visual aid, if implemented incorrectly, it is one of the greatest sources of error, frustration, and form abandonment.

The Input Mask Dilemma

Imagine you are typing your phone number and the field decides to put parentheses and spaces for you. If you make a mistake in one number and press Backspace, the mask deletes not only the number but also the automatic space, and then re-inserts it for you. This infinite loop is the definition of a poor user experience.

Intrinsic Layout Decisions: Content vs. Boxes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Intrinsic Layout Decisions are design rules that define how interface elements are positioned and scaled based on the needs of their own content (such as text width or image size) rather than being forced by an external grid (Layout Grid).

Why Intrinsic Layout is the best option for dynamic products?

Historically, we designed websites with 12-column grids. It’s a safe and predictable system, but fragile. If a username is too long, the grid design breaks or text is cut off.

Layout Decisions: Grid vs. Intrinsic

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Layout Grids are predefined grids that force elements to follow a rigid structure of specific columns and distances. Intrinsic Layout is an approach where the size and position of elements depend on their content and internal relationship, without relying on an external grid.

The Modern Layout Dilemma

In the web of the early 2010s, everything was based on 12-column grids. Today, thanks to the capabilities of Figma (Auto Layout) and modern browsers (Flexbox/CSS Grid), design is becoming more fluid and less dependent on these fixed structures. The key question is: When should we force the grid and when should we let content rule the space?

Loading States: The Indulgent Wait in UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Loading State is the visual or audible information shown to the user while the system processes an action (e.g., loading data from a server, uploading a file, or performing a search). Good loading design eliminates the fear of a “frozen system.”

Why Loading States are Critical

The moment a user clicks a button and waits for a response is the time of greatest vulnerability and potential frustration. Without a clear loading state, the user doesn’t know if:

Optimistic Updates and Rollback UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Optimistic Updates are an interaction design technique where the user interface updates immediately after an action (such as giving a “Like” or sending a message), assuming the server will process the request successfully, without waiting for its actual response. Rollback is the process of reversing that visual change if the request ends up failing.

The Secret of Speed in Modern Apps

Imagine you press the “Like” button on Instagram. If the heart icon didn’t turn red until the server returned an “OK,” the application would feel slow and heavy.

Quantitative Data

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Quantitative data in UX is numerical information that measures user behavior and attitudes. It focuses on the “how much,” “how many,” or “how often,” and is used to analyze patterns at a large scale, validate hypotheses, and measure the impact of design.

What Is Quantitative Data?

Imagine you own a store. Quantitative data is your sales report: it tells you how many customers came in, how many bought something, and which product sold the most. It gives you the numbers, the “what.”

Responsive Scaling Strategies: Liquid UI

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Responsive Scaling Strategies define how interface elements behave when available space changes. It’s not just about resizing boxes, but deciding which elements grow, which stack, which disappear, and which maintain their original size to ensure usability on any device.

The Challenge of Infinite Screens

Today, we design for a 30mm smartwatch (Apple Watch) and a 49-inch curved monitor. We cannot design a screen for every width. We need a Scaling Strategy that is liquid and resilient.

Safeguards for Destructive Actions: Positive Friction

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Safeguards are intentional friction mechanisms designed to prevent a user from performing irreversible actions (deleting, formatting, closing an account, or removing critical data) accidentally or impulsively. In this case, friction is an ally of the user experience.

The Power of Positive Friction

In standard interface design, we seek to remove any obstacles or friction that slows down the user. However, for destructive actions, friction is humanly necessary. Without it, a single mistaken click could erase years of user work. A good safeguard forces the brain to switch from automatic mode (“System 1”) to analytical and conscious mode (“System 2”).

Screen Reader Testing: The Ear of UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Screen Reader Testing is the process of navigating and interacting with a digital interface using only voice reading technologies (such as VoiceOver, TalkBack, or NVDA). Its goal is to verify that visual information is correctly translated into a logical and understandable auditory experience.

As designers, we often think of accessibility as a technical “checklist” that development must follow. However, accessibility is experiential.

Token Aliasing and Inheritance Strategy

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Token Aliasing consists of defining a token that refers to another token instead of a raw value (like a hexadecimal or pixels). Inheritance is the logical structure that allows design decisions to flow from the most general to the most specific, ensuring consistency and total flexibility in the system.

What is Token Aliasing?

Imagine you want to buy a car in “Sporty Color”.

Raw Value: Red #FF0000
Primitive Token (Global): brand-red -> #FF0000
Semantic Token (Alias): color-background-cta -> brand-red

In this example, color-background-cta is an alias of brand-red. If tomorrow you decide that your brand’s sporty color is Orange, you only have to change the alias reference to brand-orange, and automatically all the call-to-action (CTA) buttons in your product will update. Without aliasing, you would have had to manually search for setiap instance of the color red and change it.

Tree Testing

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Tree Testing is a UX research technique used to evaluate the “findability” of topics in a site or application’s Information Architecture. Users are asked to find specific locations in a simplified, text-only version of the site structure (the “tree”), without the influence of visual design or navigation.

Usability Testing

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A usability test is a fundamental UX research technique where real users are observed using a product (or a prototype) to identify usability problems, collect qualitative and quantitative data, and determine the participant’s overall satisfaction with the product.

What Is Usability Testing?

Imagine you have designed a new can opener. You think it is revolutionary. Instead of just admiring it, you give it to 5 different people and ask them to open a can while you observe in silence. You see that three of them do not understand how to hold it, one cuts their finger, and the fifth takes two minutes to open the can. You are not judging whether the people are “clumsy”; you are evaluating whether your can opener is easy and safe to use.

User Interviews

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A user interview is a qualitative research technique in which a researcher asks a user (or potential user) questions to gain a deep understanding of their behaviors, needs, motivations, and pain points in relation to a specific problem or product.

What Are User Interviews?

Imagine you are a journalist preparing a documentary. You do not send a questionnaire to the protagonist; you sit down with them and have a deep conversation. You ask open-ended questions so they tell you their story in their own words. You want to understand their experiences, their emotions, and what motivates them.

Variant Explosion Control (Wrangling Systems)

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Variant Explosion Control is the process of optimizing and simplifying component architecture to avoid an excessive number of manual versions, using tools like Component Properties and Booleans to keep the system lightweight and easy to maintain.

The Problem: The Variant Labyrinth

Before improvements in tools like Figma, creating a simple component (like a button) with 3 sizes, 4 color variants, 2 icon states, and 5 interaction states (default, hover, active, focus, and disabled) required the manual creation of 120 individual variants (3 x 4 x 2 x 5).

Techniques on Fernando Ruiz

Affinity Mapping

What Is Affinity Mapping?

Card Sorting

What Is Card Sorting?

Chunking in UI Flows: Intelligent Fragmentation

Why Chunking is vital for Memory?

Color Contrast Math: Readability and Ratio

Why the Designer Must Know Color Math?

Competitive Analysis

What Is a Competitive Analysis?

Component API Design: Predictability and Flexibility

What Makes a Good Component API?

Component Prop Organization: Structure and Hierarchy

Why does Prop order matter?

Constraints and Auto Layout Logic in Figma

Why are these Tools Vital?

Crazy 8's

What Is Crazy 8’s?

Dot Voting

What is Dot Voting?

Focus Management: Navigation without a Mouse

Why the Designer Must Manage Focus?

Form Validation Timing: Reward and Rules

Why Validation Timing is Everything

Heuristic Evaluations

What Is a Heuristic Evaluation?

Input Masking Dangers: Usability vs. Format

The Input Mask Dilemma

Intrinsic Layout Decisions: Content vs. Boxes

Why Intrinsic Layout is the best option for dynamic products?

Layout Decisions: Grid vs. Intrinsic

The Modern Layout Dilemma

Loading States: The Indulgent Wait in UX

Why Loading States are Critical

Optimistic Updates and Rollback UX

The Secret of Speed in Modern Apps

Quantitative Data

What Is Quantitative Data?

Responsive Scaling Strategies: Liquid UI

The Challenge of Infinite Screens

Safeguards for Destructive Actions: Positive Friction

The Power of Positive Friction

Screen Reader Testing: The Ear of UX

Why the Designer Should Know How to Use a Screen Reader?

Token Aliasing and Inheritance Strategy

What is Token Aliasing?

Tree Testing

Usability Testing

What Is Usability Testing?

User Interviews

What Are User Interviews?

Variant Explosion Control (Wrangling Systems)

The Problem: The Variant Labyrinth