23/04/2014

El flat web design y sus problemas de usabilidad

El flat web design y sus problemas de usabilidad

El flat design, o diseño plano, es un estilo basado en formas simples, colores austeros y, principalmente, ausencia de gradientes y efectos de tridimensionalidad (los elementos no parecen «salir» del plano en el que se muestran). Actualmente podemos verlo en marquesinas, piezas gráficas y sitios web. Pero es en este último ámbito donde presenta sus mayores problemas, ligados a la usabilidad.

Lo habitual es que los sitios web imiten ciertas características del mundo físico para que los usuarios entiendan rápidamente qué hace cada elemento; en esto consiste el esqueuomorfismo. Por ejemplo, un control remoto tiene botones de goma que sobresalen de la superficie plástica y se hunden cuando los presionamos. Por eso, los botones de los formularios web suelen imitar ese comportamiento: parecen sobresalir y hundirse en la pantalla. Pero con el flat design, el botón parece estar en la misma superficie que el resto de los elementos, por lo que realmente no nos recuerda a un botón físico. ¿Puede un usuario reconocerlo como tal?

El experto Jakob Nielsen señala al flat design como una de las principales amenazas a la usabilidad en tablets, y sugiere alcanzar un punto intermedio entre este estilo (al que considera una moda pasajera) y el esqueuomorfismo, de manera que los elementos de la interfaz sean fácilmente distinguibles. En la misma línea, Matthew Moore propone el almost flat design: utilizar colores planos para los botones pero distinguirlos con gradientes sutiles y apilar elementos planos a través de sombras. El sistema operativo iOS 7, que marca la incursión de Apple en el flat design, presenta una variante interesante: las ventanas son planas pero traslúcidas, de manera que la que está arriba de todo se ve con claridad y las que quedaron debajo se ven esmeriladas (un efecto similar al de la barra de Inicio en Windows 7).

El flat design surgió como respuesta al exceso de brillos, sombras, gradientes y colores estridentes característicos de los inicios de la Web 2.0. En comparación, el flat design resulta no sólo más elegante sino también más fácil de implementar, ya que los gráficos presentan menos líneas y colores. Sin embargo, muchos expertos (por ejemplo, el diseñador de LG Itai Vonshak) advierten que los sitios planos tienden a parecerse demasiado entre sí y con el tiempo empezarán a aburrirnos. Mezclar características del flat design con otras de corrientes estilísticas más amigables para el usuario no parece tarea fácil, pero muy probablemente sea la tendencia dentro de poco tiempo.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce