affordances
Los objetos deben sugerir cómo se usan. Use cuando diseñe botones, controles interactivos, o cualquier elemento que invite a la acción.
When & Why to Use This Skill
This Claude skill provides a comprehensive framework for applying the principle of 'Affordances' in UX/UI design. It enables designers and developers to create more intuitive user interfaces by ensuring that interactive elements—such as buttons, links, and forms—visually communicate their functionality. By implementing these principles, teams can significantly improve discoverability, reduce user friction, and enhance the overall usability of digital products.
Use Cases
- UI Design Review: Evaluate whether interactive controls like buttons and toggles clearly suggest their 'clickability' or 'draggability' through visual cues like elevation, shadows, and hover states.
- Form Usability Optimization: Improve form completion rates by ensuring input fields and checkboxes have clear affordances and signifiers that guide the user on how to provide information.
- Accessibility and Discoverability Audits: Identify elements that lack sufficient visual distinction, ensuring that all users can easily identify and interact with functional components without external instructions.
- Design System Standardization: Establish consistent visual languages for interactive elements (e.g., consistent use of color and borders) to maintain a high standard of affordance across complex applications.
| name | affordances |
|---|---|
| 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
- Gibson, J.J. (1966). "The Senses Considered as Perceptual Systems"
- Norman, D. (2013). "The Design of Everyday Things"
- https://www.nngroup.com/articles/affordance/