El diseño web está en crisis
La crisis de identidad de las interfaces desktop tras el auge del móvil.
Vamos a explicarlo sin que nadie se lleve las manos a la cabeza.
Cada vez hay más conciencia del papel clave que juega el diseño y se invierte más que nunca. Los profesionales lo tienen todo a la mano para estar mejor formados y hay infinidad de recursos prácticos que optimizan el desarrollo. Entonces, ¿por qué está en crisis?
El responsive, el mobile first, las Google Fonts, los frameworks como Bootstrap, las plantillas de WordPress, Drupal, Joomla o de cualquier otro CMS son un gran avance y bien aprovechados ayudan considerablemente tanto en procesos internos como en resultados para el cliente y el usuario final.
Dicho esto…
El mal uso de todos estos recursos (esclavos de las modas) también son culpables de esta crisis.
La variedad de dispositivos provoca que los profesionales confundamos necesidades para cada tipo de pantalla y pongamos elementos que sólo son necesarios y útiles para la versión móvil en la versión desktop.
El caso más evidente son los iconos de hamburguesa y los menús de navegación ocultos.
Sólo hay que pasarse por SiteInspire. Hoy no eres nadie si no pones una hamburguesa en desktop. Hasta agencias de UX buenísimas lo hacen.
No hace falta que pongas todas tus secciones a la vista, pero pon las 4–5 principales. Aportan seguridad y te pueden ayudar a aumentar páginas vistas.
- El mal uso del responsive y de los frameworks
- la esclavitud de lo flat
- y las plantillas de cualquier CMS que son víctimas de las modas
generan falta de innovación.
Volumen de la crisis: CMS y plantillas
Para que veamos el tamaño de esta crisis pensemos en el mercado de los CMS.
No hay cifras oficiales. Puede que bajo WordPress, Drupal y Joomla funcionen el 40–45% de las webs de todo el mundo. De WordPress hay cifras más claras.
Wordpress es el ZARA de los CMS
Con WordPress funcionan el 20% de todas las webs, según Automattic.
Cualquier persona puede tener una web en condiciones y cualquier desarrollador o diseñador puede llegar a entenderlo y hacer buenos diseños. Por eso digo, como gran elogio, que es el ZARA de los CMS.
El problema no está en las herramientas sino en los usos y talentos de cada uno para hacer buenos trabajos.
Avada es el tema de WordPress más vendido con más de 91.000 descargas. Su desarrollador se ha podido hacer una gran casa en Pakistán con las ganancias. Olé por él. Se asoció con un diseñador de EE.UU para hacer ese tema y otros. Han ganado más de $4 millones. ¿Te gusta ese tema? A mí no.
Si miras la lista de los temas más vendidos verás que la mayoría explotan las modas para que les compren. No critico caer en alguna moda, critico explotarlas para que tu producto sea más vendible lo que hará que tenga una fecha de caducidad más cercana. Critico explotar esas modas y aplicarlas sin sentido.
La fuerza de WordPress está en sus desarrolladores. Son los que mayoritariamente hacen los temas. Y eso ha hecho que muchos diseñadores buenos no lo usen ni lo exploten como avanzadilla del buen diseño.
Muchos prefieren otros como Squarespace que han hecho del diseño su carta de presentación.
Creo que es un error, pero es lo que está pasando.
Automattic se ha dado cuenta y cada vez más está apostando por buenos diseños en sus temas y cuidando a los buenos diseñadores destacando sus obras en el directorio de compra.
La crisis en el diseño de las webs de noticias: la tablerización de la web
La variedad de pantallas junto a la droga de las páginas vistas para rentabilizar la publicidad hace que se haya optado por una visualidad y navegación “antinatural” para desktop. Hacen la versión desktop como si la estuvieran viendo desde una tableta. A eso lo llamo la “tablerización de la web”:
1. Wired.co.uk con navegación horizontal, hamburguesa, publicidad mal integrada y abuso del grid en la sección de relacionados en la plantilla de la noticia:
2. Terra.com va claramente a un público juvenil y cree que con este formato lo captarán mejor. El problema es el cómo lo hacen. Con hamburguesa, abuso loco del grid, tipografías sin gusto ni jerarquía…
3. Time.com con hamburguesa, lateral fijo y rendimiento publicitario muy mejorable.
Un gran acierto es el scroll horizontal continuo con el que vas pasando páginas sin darte cuenta. Las webs del grupo lo aplican y se está poniendo de moda a raíz de Quartz (hecho con WordPress).
Es una moda muy buena, aunque tiene sus riesgos como perder el flujo de comentarios si te interesa crear comunidad en torno a lo que publicas.
4. Sports Illustrated con grids a lo loco, hamburguesa y tipografías artificiales.
La carga de imágenes conforme vas haciendo scroll lo hacen muy bien. Una práctica heredada de las apps que en desktop también es muy útil. Este plugin de WordPress es muy bueno y ligero si quieres activar el lazy load en tu web.
5. USA Today. Este caso genera mucho debate. Hay un grupo de gente que le gusta y otro al que que no en el que somos minoría.
Nuevamente se abusa del grid sin jerarquías claras generando efecto ceguera y cierta parálisis, espacios para la publicidad mal rentabilizados y plantilla de noticias en popup:
Lo de las noticias en popup para desktop no lo entiendo por mucho que lo veo:
Como es de suponer no tengo los tests para confirmar mi tesis y quizá a muchas de estas webs les vaya mejor con estas prácticas, pero desde un punto de vista formal y de experiencia de usuario para desktop es muy mejorable.
Todo en la vida es mejorable, pero si es tan evidente es que no está bien diseñado. Hay servicios y productos que son feísimos y funcionan a las mil maravillas. Por ejemplo, Mil anuncios.
No es requisito indispensable que tenga buen diseño, pero a la larga puede que surjan problemas. Un competidor que lo haga más atractivo (que se lo digan a Microsoft con Apple), un problema técnico o de contenido derivado de ese mal diseño…
Conclusión
El móvil crece en uso y sus patrones de interfaz e interacción están invadiendo la pantalla de tu portátil y ordenador de sobremesa como si así se fuera a recuperar el tráfico del desktop.
Una cosa es aportar consistencia y otra confundir las necesidades de cada pantalla.
Tanto por tamaños de pantalla como contexto de consumo, la interacción y la disposición de los elementos no pueden ser la mismas.
Las necesidades de la persona que te usa de pie en el metro no pueden ser las mismas de la que te usa sentada en la oficina.
Perdón por la obviedad.
