Concepts on Fernando Ruiz

Accessibility in UX: Designing for Everyone

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

info Quick Definition

Accessibility in UX means designing digital products that are usable by everyone, including people with disabilities.

What is Accessibility in UX?

Consider a restaurant with stairs but no ramp at the entrance. It’s not deliberately excluding wheelchair users—it’s just not designed with them in mind. The same applies to many digital products. They work for able-bodied, sighted, hearing users with standard cognitive abilities, but exclude people with disabilities through unconscious design choices. Accessibility in UX means actively designing so that people with visual, hearing, motor, or cognitive disabilities can use your product with the same effectiveness as anyone else. It’s not an afterthought or a feature you add later. It’s built into design decisions from the beginning—semantic HTML, keyboard navigation, color contrast, transcripts for videos—so your product serves the widest possible audience.

Affordances and Signifiers: Making UI Self-Explanatory

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

info Quick Definition

An affordance is what an object actually invites you to do; a signifier communicates that affordance to the user.

What are Affordances and Signifiers?

Picture a door with a handle sticking out versus a flat metal plate. The handle affords pushing or pulling in specific ways—your hand and fingers have a natural interaction pattern. The flat plate affords pushing only. The affordance is the actual possibility; what the object physically invites. Now imagine those same doors without any visual distinction. You might miss the handle entirely or push when you should pull. That’s where signifiers come in—they’re the visual signals that tell users what affordances exist. Buttons in digital design have no physical affordance, so we use color, borders, and depth to signal “this is clickable.” Affordances are about possibility; signifiers are about communication.

Affordances vs. Signifiers: The Invisible Language of Design

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

info Quick Definition

An Affordance is the relationship between an object and a person: it is the property of the object that allows an action to be performed (e.g., a handle allows turning). A Signifier is the visual or auditory signal that communicates that capability (e.g., the shape of the handle indicates what to do with it).

Don Norman’s Legacy in UX

The concept of Affordance was originally introduced by James J. Gibson in perceptual psychology, but it was Don Norman who adapted it to design in his seminal book The Design of Everyday Things. For Norman, good design is one that doesn’t need instruction manuals: the user knows what to do just by looking at the object.

ARIA vs. Semantic HTML: The Golden Rule

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

info Quick Definition

Semantic HTML uses the browser’s native tags (such as <button>, <input>, <nav>) which already come with built-in accessibility and behavior. ARIA (Accessible Rich Internet Applications) is a set of attributes added to the code to “patch” or explain custom elements that the browser doesn’t understand by default.

The First Rule of ARIA

If there is one thing every designer and developer should remember, it is the First Rule of ARIA:

Atomic Design: Building UIs from the Ground Up

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

info Quick Definition

Atomic design is a methodology for creating reusable component libraries by breaking interfaces into five hierarchical levels: atoms, molecules, organisms, templates, and pages.

What is Atomic Design?

Think about how chemistry works. Atoms combine to form molecules, molecules combine to form organisms. Chemistry builds complexity from simple building blocks. Atomic design applies this same logic to user interface design. An atom is the smallest unit—a button, an input field, a label. Molecules combine atoms—a search field plus a button forms a search bar. Organisms combine molecules—a header with navigation, logo, and search becomes a component. Templates show how organisms fit together; pages are templates with actual content. This hierarchy creates a shared language between designers and developers, enables consistent design systems, and makes maintenance easier. Instead of building interfaces from scratch each time, you compose interfaces from tested, reusable components.

Breakpoint vs. Container Queries: Component-Based Design

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

info Quick Definition

Breakpoints (Media Queries) change the design based on the total width of the device screen (Viewport). Container Queries change the design based on the space available to the component within its parent container.

The Paradigm Shift in Product Design

For the last decade, we have designed “screens”: mobile, tablet, and desktop. However, in a modern design system, we design components that live in different places. The same “Product Card” component can appear in a 3-column grid on the home page, or in a single narrow column in a sidebar.

Cognitive Load Management in UX

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

info Quick Definition

Cognitive Load is the total amount of mental effort a user must invest to complete a task or process information in an interface. Good UX design seeks to minimize unnecessary load so that the user can focus on achieving their goal with as little friction as possible.

Types of Cognitive Load: The Sweller Model

In cognitive psychology, three types of mental load are distinguished. For a UX designer, understanding these concepts is key to creating intuitive interfaces:

Cognitive Load: Why Simpler Is Always Better

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

info Quick Definition

A measure of mental effort required to use a product; lower cognitive load means easier to use.

What is Cognitive Load?

Imagine you’re at a grocery store. If items are logically organized by category (produce, dairy, cereal), shopping is easy. Your brain knows where to go. But if the store randomly places items everywhere, you spend mental energy searching, remembering where you saw things, comparing options. You get frustrated and leave. The disorganized store has high cognitive load; the organized one has low cognitive load.

Conflict Resolution in Collaboration: UI and UX

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

info Quick Definition

Conflict Resolution occurs when two or more users attempt to perform contradictory actions on the same object at the same time (e.g., one deletes a paragraph while the other is editing it). In collaborative product design, our goal is for the user never to see a “Sync Error” notification if we can avoid it.

The Challenge of Multi-user Applications

In modern applications like Google Docs, Figma, or Notion, real-time collaboration is a basic feature. However, behind the magic lies extremely complex conflict resolution logic. If two people save different versions, who wins? Is anyone’s work lost?

CRDT Basics for Product Designers

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

info Quick Definition

CRDTs (Conflict-free Replicated Data Types) are data structures that allow multiple users to make simultaneous, independent changes that, when synchronized, automatically reach the same final state without the need for a central authority or manual conflict resolution. It is the technology that makes modern real-time collaboration possible.

Why the Designer should know what a CRDT is?

Traditionally, in web applications, the server was “the single source of truth.” If you wanted to change something, you asked the server for permission and waited for its “OK” response.

Dark Patterns: What They Are and Why to Avoid Them

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

info Quick Definition

Dark patterns are deceptive design techniques that trick users into taking actions against their interests for benefit to the business.

What are Dark Patterns?

Imagine a restaurant menu designed to make expensive items look cheapest through clever formatting, confusing you into expensive orders. That’s the offline equivalent of a dark pattern. On digital products, dark patterns are design choices deliberately engineered to confuse, mislead, or trick users into actions benefiting the business at users’ expense. Hidden unsubscribe buttons, misleading continue buttons, pre-checked boxes for unwanted services, difficult-to-find privacy settings—these are dark patterns. They exploit user psychology and attention to extract value: extra purchases, data harvesting, or subscription lock-in. The distinction from poor design is intent: bad design fails to guide users clearly; dark patterns deliberately misdirect. Dark patterns generate short-term gains at massive cost to trust and long-term relationships.

Design Principles

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

info Quick Definition

Design Principles are a set of brief, clear, and memorable guidelines that articulate the core values that should guide a team’s design work. They serve as an internal compass for making consistent, high-quality decisions, especially when there is no specific rule to apply.

What are Design Principles?

They are not prescriptive rules like “all buttons must be blue.” They are high-level values that help a team define what “good design” means for their specific product. They are the design team’s constitution.

Design System

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

info Quick Definition

A Design System is a collection of reusable UI components, guided by clear standards (principles, style guides), that enables teams to design and build digital products in a coherent and efficient manner.

What is a Design System?

Imagine you’re building with LEGO. You don’t have to create each brick from scratch every time you build something new. You have a set of standard bricks (2x2, 2x4, etc.) that you can combine to create anything. Plus, you have an instruction manual that tells you how the pieces fit together.

Designing for Perceived Performance: Faster Than Light

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

info Quick Definition

Perceived Performance is the time a user feels it takes for a system to respond, regardless of the actual speed (milliseconds) of the connection or processor. In product design, perception is reality.

Why does Perceived Performance matter?

We can have the best-optimized application in the world, but if the user stares at a blank screen for 2 seconds, they will think the app is slow.

On the contrary, an app that takes the same 2 seconds but shows a Skeleton Screen, a loading bar with a smooth animation, or interesting context messages will be perceived as much faster and more pleasant.

Error Prevention vs. Recovery: A Forgiving Interface

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

info Quick Definition

Error Prevention seeks to design the system so that the user cannot make mistakes. Error Recovery designs the way out when failure has already occurred, helping the user return to the right path without frustration.

The Forgiving Interface Paradigm

Human beings are fallible by nature: we get distracted, we make typing mistakes, or we don’t fully understand instructions. Mature UX design doesn’t blame the user for their errors but assumes they will happen and designs an ecosystem that mitigates or solves them gracefully. This concept is based on two of Jakob Nielsen’s 10 usability heuristics: #5 (Error prevention) and #9 (Help users recognize, diagnose, and recover from errors).

Fitts's Law: Reach and Ergonomics in UI

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

info Quick Definition

Fitts’s Law states that the time required to reach a target depends on the distance to the target and the size of the target itself. In short for UX: Make important actions large and close.

What is Fitts’s Law (and why should you care)?

Paul Fitts, an American psychologist, formulated this law in 1954 to measure human movement. In modern interface design, Fitts’s Law is the foundation of ergonomics: if a button is too small or too far from where the cursor (or thumb) is located, the user will take longer to interact and will make more errors due to lack of precision.

Foundations of the Accessibility Tree: How Machines See

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

info Quick Definition

The Accessibility Tree is a data structure generated by the browser (based on the DOM) that contains only the information relevant to assistive technologies (such as screen readers or voice dictation). It is not visual; it is a translation of your design into names, roles, states, and values.

Why the Designer should know the Accessibility Tree?

As designers, we often focus on the Visual DOM (colors, shapes, positions). However, for blind or visually impaired users, your design is only what the Accessibility Tree says it is.

Gestalt Principles for UX Designers

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

info Quick Definition

Gestalt principles describe how humans naturally perceive and organize visual information into meaningful patterns and groups.

What are Gestalt Principles?

Imagine looking at a flock of birds. Your brain doesn’t process each bird as a separate element—it instantly recognizes them as a unified group moving together. That instant organization is Gestalt perception at work. Gestalt principles are the rules your users’ brains follow when they look at your interface. They explain why some layouts feel organized while others feel chaotic, even when they contain the same elements. These principles come from early 20th-century psychology research, but they’re as relevant today as ever because human perception hasn’t changed. Understanding them lets you design interfaces that feel naturally organized rather than requiring users to squint and mentally reorganize your layout.

Haptic Feedback Principles: Feeling the Interface

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

info Quick Definition

Haptic Feedback is the physical response (vibration or tactile impact) that a mobile device or wearable emits in response to a user action. It is the third communication channel, along with sight and hearing, which allows the user to “feel” that something has happened without needing to look at the screen.

Why Haptics are Critical for UX?

We live in a world full of visual distractions. Human beings have evolved to feel textures and physical responses when manipulating objects. On a smooth glass screen, we lose that sense.

Hick's Law: Decision and Response Time

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

info Quick Definition

Hick’s Law states that the time it takes for a person to make a decision increases logarithmically as the number and complexity of choices increase. In UX, this translates into a golden rule: Less is faster.

What is Hick’s Law (and why should you care)?

William Edmund Hick and Ray Hyman discovered in the early 1950s that adding extra options not only slows down the user linearly but can actually paralyze them or make them feel overwhelmed (a phenomenon known as “Analysis Paralysis”).

Inclusive Design vs. Accessible Design: Why Both Matter

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

info Quick Definition

Accessible design removes barriers for people with disabilities; inclusive design considers the broadest possible range of human diversity from the start.

What’s the Difference?

Imagine a curb cut—a sloped section of sidewalk for wheelchair users. It technically makes sidewalks accessible to people with mobility challenges. But after implementation, everyone uses them: parents pushing strollers, delivery workers pushing carts, elderly people preferring the gentle slope, and travelers pulling luggage. Curb cuts are accessible but they’re also inclusive—they benefit a much wider population than just the disability they were designed for. Accessible design specifically removes barriers for people with disabilities through standards like WCAG compliance. Inclusive design takes a broader view: during initial planning, consider the full spectrum of human difference—disabilities, cultural backgrounds, age, experience level, economic status, language—and design for that diversity from the beginning. Accessibility targets a specific population; inclusion targets everyone.

Information Architecture

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

info Quick Definition

Information Architecture (IA) is the practice of deciding how to organize, structure, and label the content of a digital product (such as a website or application) in a way that is understandable and allows users to find information and complete tasks efficiently.

What is Information Architecture?

Imagine walking into a supermarket. You know the products are organized in some way: fruits and vegetables are together, dairy in another section, cleaning products in yet another. There are aisles with clear labels to help you navigate. Without that organization, finding the milk would be a nightmare.

Intrinsic Sizing Behavior in UI

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

info Quick Definition

Intrinsic Sizing is a design behavior where an element’s dimensions (width or height) are determined by its own content (letters, images, icons) rather than being forced by an external container with fixed measurements.

What is Intrinsic Sizing?

Imagine you want to put shirts in a suitcase.

Extrinsic Sizing: The suitcase has a fixed size of 50x40 cm. No matter if you put in 1 shirt or 20, the suitcase measures the same.
Intrinsic Sizing: The suitcase is made of elastic fabric and adjusts exactly to the volume of the shirts you put in. If you put in one shirt, it’s small; if you put in 20, it stretches.

In UI, this means a button doesn’t measure “200px,” but rather Text Width + Lateral Paddings. If the text changes from “OK” to “Unsubscribe,” the button widens automatically.

Mental Models of Undo and Redo: Time in the Interface

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

info Quick Definition

Mental Models of Undo and Redo are how the user understands that they can go back or forward in the history of their actions. Correct Undo design reduces user anxiety, allowing them to experiment freely with the interface without fear of making irreversible errors.

The Power of Indulgence (Forgiving UI)

The “Undo” button is the most powerful psychological safety tool in interface design. When a user knows they have a “safety net” under their feet, their cognitive load decreases and their willingness to explore new features increases dramatically. Without Undo, the user becomes conservative and fearful with every click.

Mental Models: Designing for How Users Think

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

info Quick Definition

A mental model is the internal framework users build about how a system works, shaped by past experiences and expectations.

What is a Mental Model?

Think about opening a new type of door for the first time. Your brain instantly compares it to every other door you’ve encountered—you look for a handle, expect it to open in a certain direction, and assume it follows familiar push-or-pull logic. If that door works differently than your mental model predicts, you hesitate or feel confused. Mental models are exactly these internal templates that your users carry into your product. They’re built from past experiences, cultural conventions, and learned patterns. When your design aligns with how users already think the world works, they navigate with confidence.

Mobile-First Design: Principles and Practice

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

info Quick Definition

Mobile-first design is an approach that prioritizes designing for mobile devices first, then progressively enhancing for larger screens.

What is Mobile-First Design?

Most digital products today are used on phones more than desktops. Yet many design teams start sketching on large monitors, then squeeze features onto phone screens like an afterthought. Mobile-first design reverses this: start with a phone-sized canvas, design for that constraint, then add complexity as screen size grows. It’s not about making phone versions work—it’s about recognizing mobile as your primary platform and desktop as an enhancement. The constraint of mobile forces clarity and focus. You can’t include every feature or overcomplicate interactions; limited screen real estate demands prioritization. What emerges is often a better product for all users.

Real-Time Presence Modeling: Collaborative UX

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

info Quick Definition

Presence Modeling is the set of visual and functional indicators that communicate to a user who else is with them in the same digital space (e.g., a Notion page or a Figma file) and exactly what they are doing at that precise moment.

The Magic of Not Being Alone: The Feeling of Presence

A few years ago, applications were lonely: you worked, saved, and closed. Today, product applications are multiplayer. Presence modeling is not just an aesthetic ornament; it is a critical communication tool that prevents users from making mistakes (like editing the same object at the same time) and fosters fluid collaboration.

Skeleton VS Optimistic UI: Loading Strategies

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

info Quick Definition

Skeleton Screens are gray placeholders that mimic the final structure of the page while data is loading. Optimistic UI is a technique that shows the result of an action immediately, assuming the server will respond successfully.

The Art of Waiting: Perceived Performance

In modern product design, speed is not just a matter of real milliseconds (latency), but of how the user feels the system is responding. Both techniques seek to reduce user anxiety during loading, but they are applied at different points in the flow.

Status Awareness in UI

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

info Quick Definition

Status Awareness (State Awareness) is an interface’s ability to clearly and continuously communicate what is happening in the system, at what step of the process the user is, and what the current condition of each component is (e.g., if a button is pressed, if data is loading, or if there is an error).

Why the User Needs Status Awareness?

As human beings, we hate uncertainty. In the physical world, if you flip a switch and the light doesn’t turn on, you know there’s a fault because the switch physically changed position. In the digital world, if a user clicks a button and nothing happens visually in the first few milliseconds, the user will click the button 5 more times, generating server errors and frustration.

The Command Pattern in Product Design

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

info Quick Definition

The Command Pattern is a software design pattern that encapsulates a user request or action as an independent object. In the world of product design, this allows us to treat each action (delete, move, edit, change color) as an entity that can be stored, undone, redone, and synchronized across multiple users.

Why the Designer Should Know the Command Pattern?

Traditionally, design focused on the final state of screens (the fixed photo). However, modern products (like Figma, Notion, or Google Docs) focus on the actions that lead from one state to another. The Command Pattern is the technical language that makes these transitions possible.

Token Architecture (Global vs. Semantic vs. Component)

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

info Quick Definition

Design token architecture is the logical structure that organizes design decisions (colors, typography, spacing) into layers of abstraction. A well-designed model allows you to change the appearance of an entire product in minutes, ensuring consistency and scalability between design and code.

What is Token Architecture?

Imagine you are building a city. You don’t want to have to paint every brick of every house individually. Instead, you define a “palette of materials” (global tokens), decide that all public buildings will be “institutional color” (semantic tokens), and finally apply that color to the “town hall main door” (component tokens).

Token Parity Across Multiple Platforms

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

info Quick Definition

Token parity ensures that design decisions are translated identically and accurately across different platforms (Web, iOS, Android, Desktop) using a single source system. This eliminates visual inconsistencies and significantly reduces QA effort.

The Challenge of Platform Fragmentation

Each technological ecosystem handles styles (colors, fonts, shadows) uniquely. If a designer chooses a “Primary Blue,” they face:

Web: CSS/SCSS files (rem, px, hex, hsl, rgb).
iOS: Swift/SwiftUI files (Points, UIColor, Asset Catalogs, JSON).
Android: Resource XML or Jetpack Compose (dp, sp, hex ARGB).

Without a parity strategy, the same color may look slightly different or have a different name on each platform, breaking brand consistency and causing confusion among development teams.

User-Centered Design: The Foundation of Everything

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

info Quick Definition

An approach where user research and user needs drive every design decision from start to finish.

What is User-Centered Design?

Imagine building a house without ever talking to the people who will live in it. You decide the layout based on what you think looks good, where you’d put the kitchen, how you’d arrange rooms. Then your clients move in and realize you put the bedroom upstairs but everyone in the family has mobility issues. The stairs are now a crisis. User-centered design is the opposite: you ask the people who’ll use the house what they actually need, then design based on their reality, not your assumptions.

UX vs UI Design: What's the Real Difference?

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

info Quick Definition

UX focuses on how a product works and feels, while UI focuses on how it looks visually.

What’s the Difference Between UX and UI?

Think of a restaurant: UX design is the entire experience—how the host greets you, the flow from entry to table, how easy the menu is to navigate, the pacing between courses, whether you feel welcome. UI design is how the physical menu looks—the fonts, colors, layout, and visual design that makes it easy to read and appetizing.

Variables vs. Styles in Figma: Strategies and Trade-offs

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

info Quick Definition

Variables are raw and dynamic values (numbers, colors, strings, booleans) that allow for creating themed systems and advanced prototypes. Styles are collections of visual properties (such as gradients, effects, or complex typography) that define an element’s final appearance.

The Dilemma: Variables or Styles?

Figma has evolved toward a much more powerful model with the introduction of Variables, but Styles remain fundamental in many workflows. Understanding the purpose and limitations of each of these elements will help you build a more robust and easy-to-use design library.

Visual Hierarchy VS DOM Hierarchy: Accessibility

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

info Quick Definition

Visual Hierarchy is the order in which a user sees and processes information on a screen based on size, color, position, and contrast. DOM Hierarchy (Document Object Model) is the order in which HTML code structures and reads that same information. Aligning both is the key to accessibility and SEO.

Why the Designer Should Know the DOM Hierarchy

As designers, we often “draw” elements on the Figma canvas without worrying about their internal order. However, for a Screen Reader or Keyboard user, your design is not an image; it is a sequential list of elements.

Visual Hierarchy: Guiding Users Through Your Design

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

info Quick Definition

Visual hierarchy is the arrangement of design elements to guide users’ attention toward the most important information or actions.

What is Visual Hierarchy?

Walk into a grocery store and look at the display. Massive sale signs grab your attention first, then specific product names, then prices, then smaller details. Your eye follows a deliberate path. That’s visual hierarchy. On a webpage, the same principle applies—you’re guiding users’ eyes through information in order of importance using size, color, contrast, whitespace, and position. Without hierarchy, every element competes equally for attention and the page feels chaotic. With intentional hierarchy, users instantly grasp what matters, what’s secondary, and what’s contextual. It’s the difference between an overwhelming interface and one that feels organized and approachable.