| name | affordances |
| description | Los objetos deben sugerir cómo se usan. Use cuando diseñe botones, controles interactivos, o cualquier elemento que invite a la acción. |
| metadata | {"author":"ux-ui-skills","version":"1.0","category":"design-principles"} |
Affordances (Prestaciones)
Resumen
Las affordances son propiedades de un objeto que sugieren cómo puede ser usado.
Un botón que parece presionable tiene buena affordance. Los usuarios deberían
saber qué hacer sin instrucciones.
Origen
- Autor: James J. Gibson (original), Don Norman (aplicación al diseño)
- Año: 1966 (Gibson), 1988 (Norman)
- Fuente: "The Design of Everyday Things" - Don Norman
Tipos de Affordances
Affordances Físicas (Gibson)
- Propiedades reales del objeto
- Una silla "afford" sentarse
- Relación entre actor y objeto
Affordances Percibidas (Norman)
- Lo que el usuario cree que puede hacer
- Más relevante para UI digital
- Señales visuales que sugieren uso
Signifiers
- Señales explícitas de cómo usar algo
- Labels, iconos, instrucciones
- Complementan affordances implícitas
Aplicación en Diseño
Botones
- Aspecto 3D o sombreado sugiere "presionable"
- Estados hover que invitan al click
- Tamaño táctil adecuado
- Color que indica interactividad
Links
- Subrayado o color distintivo
- Cursor que cambia a pointer
- Estados visited diferenciados
- Texto que sugiere acción
Formularios
- Campos con borde que invita a escribir
- Placeholders que muestran formato esperado
- Labels claros de qué introducir
- Checkboxes que parecen marcables
Controles
- Sliders con affordance de arrastrar
- Toggle switches que invitan a cambiar
- Dropdowns con flecha indicativa
- Drag handles visibles
Ejemplos
- iOS: Botones con esquinas redondeadas y color
- Material Design: Elevation para elementos interactivos
- Scrollbars: Affordance de arrastre
- Input fields: Borde que invita a escribir
- Door handles: Push plates vs pull handles
Anti-patterns
- ❌ Links que no parecen links
- ❌ Botones planos sin estado hover
- ❌ Áreas clickeables sin señales visuales
- ❌ Texto interactivo sin diferenciación
- ❌ Controles que no sugieren su función
Métricas
- Discoverability Score: % de usuarios que encuentran funciones
- First Click Accuracy: Clicks correctos sin ayuda
- Error Rate: Clicks en áreas no interactivas
- Time to First Interaction: Tiempo para primera acción
Principios Relacionados
- [[feedback-principle]] - Confirmar que la affordance funcionó
- [[nielsen-visibility]] - Hacer visible lo que es posible
- [[constraints-principle]] - Limitar acciones a las válidas
Referencias
