La frontera entre el diseño web y el UX Design se va estrechando. No es ninguna novedad que los dispositivos móviles están condicionando la manera de interpretar el diseño web y que éste se centra cada vez más en el contenido y la experiencia del usuario. Caminamos hacia un diseño simplificado, sin grandes sofisticaciones y donde lo importante es la usabilidad.
Antes de adentrarnos en un proyecto así, tanto si lo realizamos nosotros como si lo encargamos, es importante estar bien documentados sobre las últimas tendencias de diseño web para evitar que nuestra página quede obsoleta rápidamente y obtengamos de esta manera un resultado poco aprovechable. Darnos un paseo por los sites de referencia en la red nos ayudará a entender mejor este fenómeno, que recogemos a continuación en estos 5 puntos:
1. La vanguardia se llama Google
Como siempre, Google nos marca las pautas. Es quien determina hoy en día lo que es un diseño web responsive y lo hace con la autoridad que le otorga ser el buscador más potente del mundo. El posicionamiento SEO en Google es tan importante que él mismo nos da las claves para mejorarlo. Podemos realizar una prueba de optimización para móviles introduciendo la URL de nuestra web aquí. Si, por ejemplo, introducimos el enlace de una web aparentemente antigua (y por consiguiente sospechosa de no estar optimizada para dispositivos móviles) el resultado es el siguiente:
-El texto es demasiado pequeño para leerlo
-Los enlaces están demasiado juntos
-No se ha definido la ventana gráfica para dispositivos móviles
Así pues, ya tenemos unas cuantas pistas de lo que realmente se le exige a una buena página web: cuerpos de texto grandes, botones visibles y separados y una ventana gráfica adaptada a los navegadores de nuestro smartphone o tablet.
El nuevo diseño web debe estar preparado para el movimiento de nuestros dedos deslizándose por una pantalla, ahora más rápido y vertical, y a través del cual se accede al contenido sin necesidad de hacer clic. Esta tendencia es el resultado del comportamiento mecanizado del usuario, que cada vez obtiene con más facilidad la información que quiere y denota una creciente pérdida de paciencia cuando no lo consigue por la vía rápida y sencilla.
Si, en cambio, nos fijamos en los requisitos estéticos tales como la profundidad, el color, las sombras, las animaciones y las transiciones, Google nos lo indica en este paquete de trucos llamado Material Design. Siguiendo este mandato mejoraremos las interacciones de nuestra web o app.
2. En busca de la verticalidad
Lo hemos apuntado anteriormente. La optimización para dispositivos móviles ha obligado a reinterpretar el diseño web prescindiendo de menús desplegables, pestañas, vínculos y botones en la parte superior de la pantalla. Entramos directamente al contenido y nos desplazamos por él, y si lo podemos conseguir en un paso, ¿para qué hacerlo en dos? Así pues, cada vez vamos a ver menos artículos como este divididos en dos páginas. De ser así y tener que darle al “next”, probablemente ya no estarías leyendo esto. Por lo tanto, ya puedes bajar un poco más y no perderte el siguiente punto.
3. El uso de la imagen
Hay varios factores a tener en cuenta en el uso de imágenes.
Por un lado, el scroll manual (el desliz rápido del que hablábamos) nos permite prescindir de menús y simplificar nuestro diseño. Nos posibilita, también, contar historias a través del movimiento por la pantalla y disfrutar de una navegación sin control. Por ello existe una creciente tendencia a usar imágenes grandes y atractivas que ocupan gran parte del formato, lo que nos lleva a hablar del ya famoso menú hamburguesa. Así se denomina el tipo de navegación por el cual sus elementos se mantienen ocultos, incrementando el espacio para el contenido. Para usar los elementos de navegación deberemos interaccionar con dicho contenido, que a menudo viene representado por imágenes. Un buen ejemplo de ello lo tienes aquí.
Ahora bien: por otro lado, para que esto funcione debemos tener en cuenta el factor upload. En gran parte el uso de imágenes pesadas es un problema técnico y no se resuelve solo con un buen hosting. Si una página tarda más de 4 segundos en cargarse, una cuarta parte de los usuarios la abandona. Si lo hace en 10 o más, ya estamos hablando del 50%. Por eso no es de extrañar que el diseño web utilice cada vez más imágenes vectoriales (lo hemos visto ya en el Material Design de Google) y vaya abandonando el mapa de bits. El diseño vectorial pesa mucho menos y es muy afín a las pantallas de retina, pudiendo aumentar su tamaño en la pantalla sin perder resolución.
Otra buena manera de gestionar imágenes de todo tipo es el uso de patrones de diseño de interacción (patrones UI), precisamente creados con el objetivo de mejorar la velocidad de carga y minimizar el efecto del peso de las imágenes. Dichos patrones ofrecen además una experiencia única basada en el movimiento sin necesidad de recurrir al ya obsoleto Flash. He aquí algún ejemplo. Otra modalidad de estos patrones es el diseño modular que han empleado plataformas populares como Pinterest (lo podemos ver aquí). Si una imagen vale más que mil palabras, cientos de ellas valen más que un millón.
4. Vamos, ¡anímate!
La constante evolución de las telecomunicaciones y el ancho de banda hace que se puedan enviar más datos y cada vez es más común ver vídeos y animaciones que mejoran la experiencia del usuario. Son un gran reclamo. Sin embargo, las imágenes en movimiento pueden suponer un handicap al que hay que contraponerse: debemos usarlas con moderación, pues pueden desviar la atención y distraer respecto al contenido que nos interesa mostrar. Las tendencias en los diferentes tipos de animación vienen en forma de vídeos de fondo a pantalla completa, animaciones de carga, menús dinámicos, hovers (imágenes o textos que cambian al pasarles el ratón por encima), slideshows y parallax. Estos últimos resultan muy interesantes, pues la interacción del usuario genera cierto ritmo que ayuda a potenciar el contenido. Aquí una divertida muestra de ello.
5. La tipografía como sujeto
El universo tipográfico ha dado un salto cualitativo en los últimos años. Es evidente que está de moda, y no se lo debemos únicamente al diseño web: también a la industria gráfica. Y no es para menos. Las posibilidades que ofrece la tipografía en su uso expresivo dan mucho juego y podemos observar su aplicación ilustrativa como una de las nuevas tendencias en diseño web para este año. Si anteriormente hablábamos de la simplicidad y la inmediatez como características esenciales de una página web moderna, el uso de fuentes como medio de expresión es la prueba fehaciente de que el mensaje es alto, claro y directo. Una letra, una palabra, un nombre o una frase también pueden tener voz propia. Aquí tienes uno, dos y tres buenos ejemplos.
¿Te consideras un web trender y no te puedes resistir a hacer tu aportación? ¡Hazlo!
Si en cambio crees que este artículo es más tendencioso que otra cosa, habla sin tapujos. Nadie te lo va a impedir.
