UX Psychology Skill
Capa asesora para decisiones de diseño web. Expone principios relevantes de psicología conductual durante el diseño de páginas y componentes. Esta es una entrada ponderada: informa decisiones, no anula el juicio estético, la identidad de marca ni la dirección creativa.
Cuándo Usarlo
Invoca después de construir o diseñar páginas, componentes o flujos. El skill funciona mejor como capa de revisión: primero construye, luego aplica el lente de psicología para encontrar lo que falta:
- Páginas de aterrizaje, precios, flujos de incorporación
- Embudos de suscripción/conversión
- Diseños de paneles y presentación de datos
- Navegación y arquitectura de información
- Páginas de producto de e-commerce y flujos de pago
- Cualquier página donde quieras que los usuarios realicen una acción específica
Proceso de Decisión
Cuando se active, sigue este orden:
- Identifica el tipo de página — landing, precios, incorporación, panel, checkout, etc.
- Extrae los 3-5 principios más relevantes de las prescripciones por tipo de página a continuación
- Para cada principio, indica: qué es → cómo aplicarlo a ESTA página específica → cómo se ve el anti-patrón
- Pondera frente a restricciones — la identidad de marca, accesibilidad y requisitos técnicos siempre tienen prioridad
- Recomienda cambios específicos e implementables — no consejos abstractos. Muestra qué cambiar en el marcado, diseño o copia. Si puedes señalar una línea de código, hazlo.
Cómo Ponderar
Los principios de psicología son una entrada entre muchas. La jerarquía de ponderación:
- Identidad de marca y visión creativa (la más alta — el sitio debe verse y sentirse bien)
- Accesibilidad y usabilidad (no negociable — cumplimiento WCAG, objetivos táctiles, contraste)
- Calidad técnica (rendimiento, SEO, diseño responsivo)
- Principios de psicología (este skill — influencia sutil, no manipulación agresiva)
Nunca sacrifiques estética o confianza del usuario por un truco psicológico. Si un principio entra en conflicto con un buen diseño, el buen diseño gana.
Qué NO es este Skill
- NO es un manual de patrones oscuros — cada principio aquí es solo aplicación ética
- NO es un sistema de diseño completo — aumenta las habilidades de diseño existentes
- NO es un reemplazo para la investigación de usuarios — los datos reales de usuarios siempre superan la teoría
- NO es una lista de verificación rígida — usa los principios que encajen, ignora los que no
Prescripciones por Tipo de Página (Incluidas)
Los principios principales por tipo de página, autocontenidos para consulta rápida. Consulta knowledge/page-prescriptions.md para orientación ampliada y errores comunes.
Página de Inicio / Landing
| Principio | Aplicación |
|---|---|
| Primeras Impresiones | El hero comunica valor en menos de 3 segundos. Se forma en 50ms — no hay segundas oportunidades. |
| Anclaje | Lidera con tu métrica o afirmación más fuerte. El primer número visto establece la referencia. |
| Prueba Social | Números reales visibles desde el principio (usuarios, resultados, historial). Las afirmaciones vagas no convierten. |
| Olor a Información | Navegación clara — el usuario sabe exactamente a dónde ir después. |
| Estética-Usabilidad | El pulido visual genera confianza antes que el contenido. Lo bello se siente más fácil de usar. |
Precios / Suscripción
| Principio | Aplicación |
|---|---|
| Anclaje | Muestra el nivel premium primero o el más prominente visualmente. Todo lo demás parece una ganga. |
| Aversión a la Pérdida | Enmarca en torno a lo que los usuarios GRATUITOS PIERDEN, no solo lo que los usuarios de pago obtienen. Perder duele 2x más. |
| Efecto por Defecto | Pre-selecciona el nivel recomendado. La mayoría de usuarios nunca cambia los valores predeterminados. |
| Compromiso/Consistencia | Los usuarios que ya usaron funciones gratuitas están preparados para suscribirse — cada paso lleva al siguiente. |
Incorporación / Registro
| Principio | Aplicación |
|---|---|
| Compromiso Progresivo | Primero una acción gratuita pequeña, luego la cuenta, luego el pago. |
| Carga Cognitiva | Una pregunta por pantalla supera a un formulario largo. Elimina todo lo no esencial. |
| Efecto Zeigarnik | Muestra el progreso (paso 2 de 4). Las tareas incompletas molestan — los usuarios vuelven para terminar. |
| Reciprocidad | Da valor antes de pedir información. Acceso gratuito a herramientas, vista previa o resultado de muestra. |
Panel / Visualización de Datos
| Principio | Aplicación |
|---|---|
| Fragmentación | Agrupa los datos por categoría o prioridad — no una lista gigante. |
| Memoria Espacial | Diseño consistente para que los usuarios recurrentes encuentren las cosas al instante. No muevas nada. |
| Satisfacción | Resalta la única información más importante. Los usuarios eligen la primera opción aceptable. |
| Reconocimiento sobre Recuerdo | Muestra el contexto completo (etiquetas, marcas de tiempo, iconos) — no obligues a los usuarios a recordar. |
Checkout / Pago
| Principio | Aplicación |
|---|---|
| Carga Cognitiva | Opción de pago como invitado. Campos de formulario mínimos. Una decisión a la vez. |
| Transparencia | Muestra TODOS los costos antes del paso de pago. Las tarifas sorpresa son la causa #1 de abandono. |
| Aversión a la Pérdida | Sellos de confianza y garantías JUNTO AL botón de pago, no en el pie de página. |
| Efecto por Defecto | Pre-selecciona el envío estándar. Pre-marca "guardar información". Reduce las decisiones. |
Acerca de / Página de Confianza
| Principio | Aplicación |
|---|---|
| Autoridad | Metodología, fuentes de datos, experiencia del equipo — demuestra que sabes lo que haces. |
| Jerarquía de Confianza | Esta página sirve a usuarios en nivel 2-3 (interés → confianza). No pidas la venta aquí. |
| Transparencia | Honesto sobre las limitaciones, no solo sobre las fortalezas. La vulnerabilidad genera confianza. |
Ejemplos de Implementación a Nivel de Código
Anclaje (Página de Precios)
Antes — todos los niveles iguales, sin ancla:
<div class="planes">
<div class="plan">Básico — $19/mes</div>
<div class="plan">Pro — $49/mes</div>
<div class="plan">Empresarial — $99/mes</div>
</div>
Después — Pro anclado como predeterminado visual:
<div class="planes">
<div class="plan">Básico — $19/mes</div>
<div class="plan destacado"> <!-- visualmente prominente, pre-seleccionado -->
<span class="insignia">Más Popular</span>
Pro — $49/mes
</div>
<div class="plan">Empresarial — $99/mes</div>
</div>
Por qué: El nivel destacado se convierte en el ancla. Básico parece una ganga en comparación. Empresarial existe para hacer que Pro parezca razonable. La insignia "Más Popular" añade prueba social.
Aversión a la Pérdida (CTA de Suscripción)
Antes — enmarcado en ganancia:
<button>Obtener Acceso Premium</button>
<p>Desbloquea todas las funciones y contenido premium.</p>
Después — enmarcado en pérdida:
<button>Mantener mi Acceso Premium</button>
<p>Sin Premium, perderás acceso a información diaria,
paneles guardados y soporte prioritario.</p>
Por qué: "Perderás acceso" activa la aversión a la pérdida (~2x más fuerte que ganancias equivalentes). El CTA usa "Mantener" — enmarcándolo como proteger algo que ya tienen.
Efecto Zeigarnik (Progreso de Incorporación)
Antes — sin indicación de progreso:
<form>
<h2>Cuéntanos sobre ti</h2>
{/* 8 campos en una página */}
</form>
Después — escalonado con progreso visible:
<div className="barra-progreso">
<div className="paso completado">Perfil</div>
<div className="paso activo">Preferencias</div> {/* actual */}
<div className="paso">Revisión</div>
</div>
<form>
<h2>Paso 2 de 3 — Tus Preferencias</h2>
{/* Solo 2-3 campos */}
</form>
Por qué: Las barras de progreso incompletas crean tensión psicológica. Los usuarios regresan para terminar lo que comenzaron. Dividir 8 campos en 3 pasos de 2-3 campos reduce la carga cognitiva Y crea el tirón para completar.
Carga Cognitiva (Checkout)
Antes — creación de cuenta forzada:
<h2>Crear Cuenta para Continuar</h2>
<input placeholder="Correo electrónico" />
<input placeholder="Contraseña" />
<input placeholder="Confirmar Contraseña" />
<button>Crear Cuenta y Pagar</button>
Después — pago como invitado con creación de cuenta diferida:
<h2>Pagar</h2>
<input placeholder="Correo electrónico (para el recibo)" />
<button>Pagar Ahora</button>
<p class="sutil">¿Quieres guardar tu información para la próxima vez?
<a href="/crear-cuenta">Crear una cuenta</a> después del pago.</p>
Por qué: Cada campo adicional es un punto de decisión que causa abandono. Consigue la venta primero. La creación de cuenta es una pequeña solicitud DESPUÉS de que ya se han comprometido (principio de Compromiso/Consistencia).
Categorías de Principios (11)
| Categoría | Conteo | Idea Central |
|---|---|---|
| Atención | 4 | Los usuarios ven menos de lo que crees |
| Gestalt | 8 | La agrupación visual guía la comprensión |
| Memoria | 10 | El reconocimiento supera al recuerdo; fragmenta todo |
| Comprensión | 3 | Los modelos mentales moldean las expectativas |
| Toma de Decisiones | 5 | Menos opciones, resultados más claros |
| Motor/Interacción | 3 | Objetivos grandes, respuestas rápidas |
| Motivación | 4 | Autonomía + competencia + relación |
| Sesgos Cognitivos | 10 | Los valores predeterminados persisten; las primeras impresiones anclan |
| Persuasión | 9 | Confianza antes de preguntar; demuestra antes de prometer |
| Emoción | 6 | Lo bello se siente más fácil; el deleite gana lealtad |
| Ética | 3 | Línea clara entre persuasión y manipulación |
Total: 65 principios — consulta knowledge/principles.md para la base de datos completa con definiciones e implicaciones de diseño.
Anti-Patrones (Nunca Hacer)
- Contadores de escasez falsos — si no es real, no lo muestres
- Confirmshaming — "No, no quiero ahorrar dinero" es manipulador
- Costos ocultos al pagar — la causa #1 de abandono de carrito
- Continuidad forzada — las suscripciones difíciles de cancelar erosionan toda la confianza
- Desinformación — trucos visuales para forzar clics equivocados
- Prueba social falsa — testimonios inventados o números inflados
- Valores predeterminados oscuros — marcar previamente opciones que el usuario no solicitó
- Patrones de motel de cucarachas — fácil de entrar, imposible de salir
Fuente
Principios derivados de la guía de Psicología para UX de NN/g (112 recursos en 11 categorías), adaptados en patrones de diseño accionables. Fundamentos académicos: Kahneman (Teoría de Prospectos), Norman (Diseño Emocional), Cialdini (Influencia), Hick, Fitts, Miller, Zeigarnik.