Lo que enseña un irritante botón Cancelar en la esquina inferior derecha sobre cómo no traicionar la intuición
Al probar una interfaz parecida a una caja de pago, apareció una acción de cancelación en la zona inferior derecha.
Durante una fracción de segundo parecía el lugar típico de una acción para avanzar o confirmar. Bastó un error para que la interfaz resultara irritante.
La conclusión no es “Cancelar nunca puede estar a la derecha”. Cada plataforma y producto tiene convenciones distintas.
El problema real aparece cuando lo que una persona predice por experiencia previa no coincide con lo que hace la interfaz.
Nadie llega a cada pantalla como una hoja en blanco. Llevamos años de aprendizaje con móviles, sitios web, cajas, máquinas expendedoras, mandos y ascensores. Si el diseño lucha contra esas expectativas, puede ser comprensible después de pensarlo y aun así ser fácil de usar mal en el primer segundo.
Muchos errores cotidianos no son decisiones equivocadas después de un gran razonamiento. Son deslices: prisa, rutina, cansancio o dos controles demasiado parecidos y demasiado juntos.
La pregunta de este artículo es sencilla:
¿Cómo se diseña una UI/UX realmente amable con las personas?
La respuesta no es añadir más texto de ayuda.
Es ser predecible, reducir activaciones accidentales, facilitar la recuperación y no obligar a procesar opciones que todavía no hacen falta.
0. Versión de 30 segundos: no preguntes solo por qué se equivocó la persona
- La misma etiqueta debería producir el mismo tipo de resultado.
- Las acciones comunes deberían respetar convenciones familiares cuando sea posible.
- Acciones con consecuencias muy distintas no deberían parecer iguales ni estar pegadas.
- Las acciones costosas deberían poder deshacerse o explicar claramente el resultado antes de ejecutarse.
- Los objetivos táctiles necesitan tamaño y separación suficientes.
- Las funciones avanzadas pueden quedarse; no tienen que aparecer todas al principio.
- No culpes solo al número de opciones; importa la dificultad de compararlas.
- Observa correcciones inmediatas: volver atrás enseguida o deshacer una acción puede revelar confusión.
Una interfaz no es un examen.
El objetivo es que la persona pueda acertar normalmente sin tener que detenerse a resolver el diseño.
1. “Intuitivo” suele significar “reutiliza algo que ya aprendimos”
Las personas forman una idea de cómo creen que funciona un producto. En UX se habla de modelos mentales.[1][2]
Una lupa sugiere búsqueda. Una flecha a la izquierda sugiere volver. Una papelera sugiere borrar. Un triángulo sugiere reproducir.
No razonamos desde cero cada vez; reutilizamos la gramática aprendida en otros productos.
Por eso la originalidad puede salir cara. Si la búsqueda se convierte en una estrella misteriosa o cerrar usa un símbolo desconocido, el diseño puede parecer creativo al autor y convertirse en acertijo para el usuario.
Las heurísticas de NN/g destacan la correspondencia con el mundo real y la consistencia con las convenciones de plataforma y sector.[1]
La compatibilidad espacial también importa. La investigación sobre compatibilidad estímulo-respuesta ha encontrado más errores cuando la posición de la señal y la respuesta requerida entran en conflicto.[3]
Principio práctico:
No obligues a la gente a reiniciar su experiencia previa.
2. Un error de comprensión y un desliz no son lo mismo
Una persona puede entender mal el sistema y tomar una decisión equivocada.
O puede entenderlo perfectamente y pulsar el control incorrecto.
NN/g distingue de forma general mistakes y slips.[1]
Si alguien piensa que un botón guarda cuando en realidad borra, puede existir un problema de comprensión.
Si sabe que borra pero lo pulsa porque está pegado a Guardar, es más parecido a un desliz.
Decir “lea con más atención” es una solución débil.
El patrón más peligroso es juntar acciones con consecuencias muy diferentes: Guardar y Descartar, Enviar y Cancelar, avanzar diez segundos y abandonar el artículo.
NN/g también advierte sobre la proximidad de acciones destructivas y de confirmación.[4]
Consecuencias distintas merecen tratamiento visual y espacial distinto.
3. Antes de añadir otra confirmación, pregunta si se puede deshacer
Borrar. Cancelar una suscripción. Vaciar todo. Descartar cambios.
La respuesta automática de diseño suele ser: mostrar una confirmación.
Pero si todo pregunta “¿Seguro?”, la gente aprende a aceptar sin leer.
NN/g recomienda reservar las confirmaciones para consecuencias serias y difíciles de deshacer, explicar el efecto concreto y ofrecer Undo cuando sea posible.[5]
“¿Seguro? Sí / No” es peor que:
“Se eliminarán 3 elementos. Podrás restaurarlos durante 30 días” “Eliminar 3 elementos” “Conservarlos”
Una interfaz amable no promete eliminar todos los errores.
Reduce el coste de cometerlos.
4. El tamaño del botón es solo la mitad: importa la distancia
WCAG 2.2 Target Size (Minimum) exige, en general, objetivos de al menos 24×24 píxeles CSS o separación suficiente.[6]
El propio ejemplo del W3C describe a alguien que quería pulsar Submit y pulsó Cancel.
El criterio Enhanced utiliza 44×44 píxeles CSS, y Apple recomienda normalmente una región de activación de al menos 44×44 puntos.[7][8]
Pero hacer todo grande no basta.
Hay que combinar tamaño, separación, gravedad, frecuencia, posición en el borde y similitud con controles vecinos.
Dos botones enormes, Guardar y Borrar, pueden seguir siendo una trampa si están pegados y parecen iguales.
5. “Existe la función” no significa “hay que mostrarla ahora”
Los productos potentes acumulan funciones.
Escuchar, lectura rápida, marcadores, listas, capítulos, artículo anterior, siguiente artículo, modo de aprendizaje, ajustes, descarga.
Todas pueden ser útiles.
Todas visibles a la vez pueden convertir la pantalla en una feria de funciones.
La divulgación progresiva deja primero las funciones frecuentes y coloca las avanzadas en una capa secundaria. NN/g la relaciona con mejor aprendizaje, eficiencia y menor tasa de errores.[9]
Regla sencilla:
No la borres. Pliega la función.
6. ¿Más opciones siempre es peor? No
La ley de Hick relaciona el tiempo de reacción con el número de alternativas o la incertidumbre y sigue siendo importante en HCI.[10]
Pero una revisión moderna también analiza los efectos de la compatibilidad estímulo-respuesta, la práctica y conjuntos muy grandes.[10]
La sobrecarga de elección también depende del contexto.
Un metaanálisis de 2010 encontró un efecto medio cercano a cero y mucha variación entre estudios.[11]
Otro de 2015 identificó moderadores como la complejidad del conjunto, la dificultad de la tarea, la incertidumbre sobre las preferencias y el objetivo de minimizar esfuerzo.[12]
Por tanto, diez opciones no son automáticamente malas.
Diez opciones difíciles de distinguir, para una persona cansada que debe decidir ya, sí pueden serlo.
Inventario grande por detrás; superficie de decisión pequeña en el momento.
7. Una autoauditoría de un sitio de contenidos encontró las mismas trampas
7-1. Una palabra del título activó el siguiente paso equivocado
Un artículo sobre desarrollo con IA mencionaba una mudanza y el sistema mostró una acción sobre mudanzas antes del contenido. Coincidencia técnica correcta, significado equivocado.
7-2. Diez segundos, capítulos y artículos compartían la misma barra
Las flechas parecían relacionadas, pero sus consecuencias eran demasiado distintas. El movimiento local y la navegación a otra página deberían separarse.
7-3. La misma etiqueta “Buscar artículos” llevaba a destinos distintos
La misma palabra con resultados diferentes obliga a reaprender.
7-4. Un índice enorme apareció antes del texto
Un índice ayuda en textos largos, pero mostrar diecisiete opciones antes del primer párrafo convierte leer en comparar.
7-5. “Escuchar todos los resultados” era el botón más fuerte
Es una buena función avanzada, pero no siempre es la tarea principal de quien busca.
7-6. El final acumulaba relacionados, ranking, búsqueda, boletín y autor
Todo puede ser útil sin tener la misma prioridad al mismo tiempo.
7-7. Suscribirse y darse de baja estaban demasiado cerca
Acciones opuestas merecen separación y jerarquía distintas.
La parte divertida es que un producto que se preocupa por UX también puede fabricar sus propias trampas.
8. La publicidad no es automáticamente mala UX; secuestrar la lectura sí
La publicidad puede financiar un sitio.
El problema es la competencia por la atención.
Estudios con seguimiento ocular sobre publicidad web han mostrado que características como distancia y animación cambian el comportamiento visual y pueden interferir especialmente con tareas de lectura para comprensión.[13]
En páginas de artículos conviene tener un presupuesto de atención:
- no apilar anuncio, reproductor, índice gigante y registro antes del contenido
- separar anuncios de controles y enlaces
- plegar espacios publicitarios vacíos
- mantener distancia para evitar clics accidentales
La pregunta es:
¿Qué vino a hacer aquí la persona?
9. Lista de QC para una UI/UX amable
Predictibilidad
- ¿La misma etiqueta produce el mismo resultado?
- ¿Los iconos conservan significados familiares?
- ¿Se rompen convenciones sin motivo?
- ¿Una persona nueva puede anticipar el resultado?
Prevención de errores
- ¿Hay acciones opuestas pegadas?
- ¿Una acción destructiva destaca tanto como la principal?
- ¿Se puede deshacer?
- ¿La confirmación explica la consecuencia concreta?
Dedo y puntero
- ¿Los objetivos importantes son suficientemente grandes?
- ¿Los pequeños están demasiado juntos?
- ¿Los bordes de pantalla dificultan la interacción?
Carga de información
- ¿La tarea principal se ve?
- ¿Las funciones avanzadas aparecen demasiado pronto?
- ¿Índices, filtros y recomendaciones pueden abrirse progresivamente?
Consistencia
- ¿El producto usa la misma gramática de interacción?
- ¿Respeta expectativas útiles aprendidas en otros productos?
10. Los mejores datos de UX pueden aparecer justo después del clic
La tasa de clics premia la visibilidad.
No demuestra que la interacción fuera útil.
También conviene mirar:
- volver atrás en pocos segundos
- activar y desactivar inmediatamente
- navegar y regresar enseguida
- repetir clics en el mismo lugar
- abandonar después de un error
- completar la tarea en el segundo intento
- tardar demasiado en llegar al contenido principal
Son pistas, no diagnósticos.
Úsalas de forma agregada y respetuosa con la privacidad.
hipótesis → cambio pequeño → observar correcciones → mantener si mejora → revertir si empeora
11. Conclusión: ser amable no es explicar más; es poner menos trampas
Una buena UI suele pasar desapercibida.
Funciona. Permite volver. Lo esperado está donde suele estar.
Una mala UI puede convertirse en protagonista con un solo toque equivocado:
“¿Por qué está Cancelar ahí?”
No hagas que las personas memoricen la lógica privada de la máquina. Haz que la máquina se acerque a expectativas humanas ya aprendidas.
Mantén las funciones avanzadas. Mantén una biblioteca grande. Mantén monetización cuando haga falta.
Pero muestra primero lo necesario, separa acciones opuestas, refleja la gravedad en la jerarquía visual y permite recuperarse.
Una UI/UX amable no exige usuarios más inteligentes. Permite que personas normales se comporten normalmente sin convertir cada pantalla en una trampa.
- Nielsen Norman Group nngroup.com
- Mental Models nngroup.com
- Christ et al. (2000) pubmed.ncbi.nlm.nih.gov
- Application-Design Mistakes nngroup.com
- Confirmation dialogs nngroup.com
- W3C Target Size (Minimum) w3.org
- W3C Target Size (Enhanced) w3.org
- Apple Buttons developer.apple.com
- Progressive Disclosure nngroup.com
- Proctor & Schneider (2018) pubmed.ncbi.nlm.nih.gov
- Scheibehenne et al. (2010) doi.org
- Chernev et al. (2015) doi.org
- Online advertising and visual attention pmc.ncbi.nlm.nih.gov
