--- title: "Affordance y diseño plano: lo que perdió Gmail en su rediseño" id: "283" type: "post" slug: "affordance-y-diseno-plano-gmail" published_at: "2011-11-06T20:26:10+00:00" modified_at: "2025-09-30T07:35:00+00:00" url: "https://www.guindo.com/blog/affordance-y-diseno-plano-gmail/" markdown_url: "https://www.guindo.com/blog/affordance-y-diseno-plano-gmail.md" excerpt: "El rediseño de Gmail en 2011 apostó por limpieza y minimalismo, pero la falta de affordance en botones generó dudas de usabilidad." taxonomy_category: - "Diseño" taxonomy_post_tag: - "accesibilidad" - "affordance" - "diseño" - "ergonomía" - "usabilidad" - "UX" --- [← Blog](https://www.guindo.com/blog) de **[Guindo Design](https://www.guindo.com)**, Diseño Estratégico de Producto Digital # Affordance y diseño plano: lo que perdió Gmail en su rediseño 6 Nov, 2011, *por* Sergio. Uno de los aspectos más criticados en Twitter sobre el reciente rediseño de Gmail, y en general de las aplicaciones de Google, es el aspecto de los botones. Además de eliminar las etiquetas y basarse únicamente en iconos, su diseño resulta completamente plano. En conjunto, el nuevo *look & feel* transmite una apariencia excesivamente plana y monocroma, con poco contraste y escasas pistas visuales que indiquen qué elementos son clicables y cuáles no. Rediseño de la bandeja de entrada de Gmail en 2011.Uno de los argumentos principales de este rediseño es la búsqueda de limpieza y modernidad. Si bien es cierto que la interfaz resulta más depurada, también lo es que el afán por lo diáfano ha eliminado focos visuales claros, y el “cepillo” de la modernidad se ha llevado por delante la *affordance* de muchos elementos. Aquí es donde entra en juego el concepto de *affordance*. Por definición, una *affordance* es la cualidad de un objeto que nos da pistas sobre cómo se utiliza. En el caso de los botones, es su aspecto pulsable: los pequeños matices de diseño que indican que sobresale de la superficie y que puede hundirse al hacer clic. Lo interesante es que no hace falta realizar grandes cambios para recuperar esas pistas. Pequeños ajustes en el diseño pueden marcar la diferencia. Tomemos como base el diseño actual: [https://www.guindo.com/blog/wp-content/images/boton-plano.png](https://www.guindo.com/blog/wp-content/images/boton-plano.png) Diseño actual de los botones secundarios de Google. El diseño actual es sencillo y elegante, pero presenta un problema: visualmente podría interpretarse tanto como un botón como una caja de texto. [https://www.guindo.com/blog/wp-content/images/boton-bisel.png](https://www.guindo.com/blog/wp-content/images/boton-bisel.png) **Bisel interior:** genera la sensación de que el botón se eleva. Para hacer más explícita su función, podemos elevarlo ligeramente, como si sobresaliera de la superficie de la interfaz. [https://www.guindo.com/blog/wp-content/images/boton-degradado.png](https://www.guindo.com/blog/wp-content/images/boton-degradado.png) **Degradado lineal:** aporta iluminación superior y aspecto tridimensional. Ahora el botón no es tan plano, hay una pequeña elevación en la zona central que nos invita a pulsarlo. Aún así se puede realzar más. [https://www.guindo.com/blog/wp-content/images/boton-sombra.png](https://www.guindo.com/blog/wp-content/images/boton-sombra.png) **Sombra inferior:** refuerza la idea de que el botón flota sobre la superficie. Con solo estas tres modificaciones, el botón ya se percibe mucho más pulsable, sin perder coherencia de color ni estilo general. De manera similar, también podrían mejorarse el contraste entre mensajes leídos y no leídos, o la diferenciación entre grupos de mensajes.. Es posible que en este ejercicio hayamos sacrificado algo de modernidad, pero debemos recordar que usamos estas aplicaciones de manera intensiva cada día. La ergonomía, la accesibilidad y la psicología de la percepción resultan tan importantes como la estética. Al fin y al cabo, **las modas son pasajeras**, pero la usabilidad permanece. ## Artículos relacionados - [Rediseño de pisos.com](https://www.guindo.com/blog/rediseno-de-pisos-com/) - [La barra de nunca acabar](https://www.guindo.com/blog/la-barra-de-nunca-acabar/) - [La crítica en el diseño: una práctica en construcción](https://www.guindo.com/blog/la-critica-en-el-diseno-una-practica-en-construccion/) Más entradas de [Diseño](https://www.guindo.com/blog/category/diseno/)