¿Por qué son tan horteras los diseños web de organismos oficiales? #1
En algún momento de nuestra existencia, todos hemos pasado por el calvario de realizar cualquier gestión online a través de la página web de un organismo oficial.
La sorpresa viene cuando entramos a la página web de dicho organismo y nos encontramos con un diseño que se nota que está a la última. Sí, a la última de la cola.
Y la pregunta que nos viene a todos en ese momento: ¿qué he hecho para merecer éste castigo? ¿no es suficiente pagar la multa, qué además debo realizar trabajos forzados?
En esta primera entrega de diseños horteras, vamos a analizar la página web de la DGT. Hemos ajustado el GPS para no perdernos entre los recovecos y callejones de la página web.
Para los más aventureros, el enlace para acceder: DGT
¿Por qué es tan hortera el diseño web de la DGT?
Sólo hace falta echar un vistazo a la página web para ver que nos encontramos ante un diseño web pensado para marear. Puede ser que forme parte de la imagen de marca de la DGT. Algo así como una forma de transmitir al visitante la esencia del «mal conducir».
La página web, según he podido consultar en web.archive.org, parece ser que fue rediseñada hace cuatro años. Sin embargo, parece de la época de las américas.
El primer vistazo
El objetivo del primer vistazo para cualquier página web, debería ser facilitar al usuario la lectura de la información. Escoger lo más importante que deseamos que vea el visitante y mostrarlo de forma que, inconscientemente, la mente del usuario navegue rápidamente entre el contenido. Jerarquizando, para mantener un orden.
Si entramos en temática, podríamos decir que lo mejor para el usuario sería una carretera de un solo sentido, con las mínimas salidas posibles y sobre todo debemos ofrecer indicaciones.
Sin entrar en lo visual, el primer fallo que nos encontramos con la página web de la DGT, así resumiendo, es una putada para la mente. ¡¡¡Tenemos a nuestra disposición más de 40 enlaces!!!
Vendría a ser como ir conduciendo, entrar en una ciudad y encontrarnos en una encrucijada con unas 40 salidas.
El segundo vistazo
Una vez nos hemos llevado el primer susto, nos recomponemos de la «hostia visual», recuperamos la movilidad del brazo para mover de nuevo el cursor y pronto recordaremos de nuevo el asunto por el cual nos encontrábamos en la página web.
Empezando de arriba a bajo, lo que nos encontramos como primer elemento es un enlace al Contacto. No digo que no sea importante, pero, ¿no podríamos incorporarlo al menú principal y nos ahorramos ese primer link solitario? Además de eso, la tipografía escogida es una Arial Regular (Sí, está bastante «outdated», pero eso es lo de menos).
Para los demás links, vemos que utilizan una Arial Narrow, la versión condensada de la misma tipografia. ¿Por qué el link de contacto debe hacer ese «desentono visual» respecto con los demás enlaces?
Tipografías
Tal y como hemos puntualizado, se está utilizando una Arial Regular junto con una Arial Narrow. Mal. Haciendo esto, se crea un choque visual entre las tipografías.
Si usamos tipografías diferentes, lo mejor, es crear contraste entre ellas. En caso de usar una sola tipografía, lo cual es totalmente legítimo, lo mejor es jugar con las negritas o cursivas, pero usar la misma família de tipografía cambiando la condensación de la misma, por norma general, no es nada agradable visualmente.
Además de eso, también tenemos muchas disonancias entre los tamaños de tipografía de toda la página web. Cada imagen tiene un tamaño diferente de tipografía y además, muchas de ellas, están pixeladas. Todo muy romántico.
Márgenes, paddings y otros elementos
Al igual que con el punto anterior, no hay una uniformidad entre los elementos de la página web con los márgenes y paddings. Cada elemento va a su rollo. Perfecto para favorecer la experiencia de usuario que estamos teniendo.
Los sombreados hace tiempo que no se utilizan. Usarlos es una buena manera de hacer que una página web se vea antigua.
Si nos fijamos en las imágenes del lateral, no entendemos del todo cual es la imagen que quieren ofrecer. Aparecen tres señores confusos haciendo el saludo de Ronaldinho. Puede que sea una forma de hacernos sumergir más en tiempos pasados.
Los banners superiores
Tenemos el logotipo nuestro preciado Gobierno con un fallo entre medio de las dos cajitas, hay una línea de fondo blanco que no llega hasta arriba, o la quitamos o la ponemos hasta arriba, pero este fallo visual, es muy feo. El logotipo del Gobierno hace 60px de altura, justo al lado el logo de la DGT a 51px de altura. Si pusiéramos los dos a la misma altura, iríamos un poco bien. Si además ponemos un espacio entre los dos logotipos, aún mejor.
justo debajo del logotipo de la DGT, pasándose la linea horizontal por el forro, tenemos un texto de reconforte a la ciudadanía «a tu lado vamos todos». Gracias DGT.
A la derecha, tenemos dos banners más. Los dos, así para redondear a 76,39px de altura. Ya puestos, no hubiese estado mal poner el numero π (pi). Los dos pixelan y los dos tienen diferentes tamaños de tipografía.
Los botones de menú
Preciosos. Con un hover de lo más bonito que hemos visto hasta el momento.
Hubiese sido bueno pensar en incorporar un submenú desplegable al poner el cursor encima de cada botón, para reducir el número de enlaces que tenemos en pantalla.
El pasador de imágenes twitter y redes sociales
El pasador de imágenes, no nos dice mucho, tiene un diseño que parece de los años 50. De cuando aún no había internet. La tipografía está pegada a la imagen directamente. Lo cual es malo para la indexación del contenido y laborioso de mantener desde el backend.
El widget con el feed de twitter si lo tenemos que poner así pequeño, mejor no lo pongamos.
Sobre los enlaces a las redes sociales: cada icono tiene su propio tamaño y van sobre un fondo gris oscuro, supongo que a razón de seguir con la «línea gráfica» del menú superior. ¡Vaya! parece ser que la línea gráfica la seguimos de forma excepcional, cuando sabemos que va a quedar mal.
Los tres bloques con enlaces
En lo que debería ser la parte más fuerte de la página web, nos ponen un listado de enlaces inacabables. Algunos enlaces incorporan imagen al lado, otros no, unos tienen una descripción inferior, otros no.
Hubiese sido mejor reducir el número de enlaces y unificar el estilo en cuanto al uso de imágenes y descripción.
Si seguimos hacia abajo
La cosa no mejora. Sigue en la misma tónica. Cero usabilidad y visualmente estresante. No exagero si digo que he quedado con la cabeza atontada conforme iba viendo toda la sarta de sin sentidos gráficos.
Otros aspectos
- No es responsive. Podemos tomarlo como una forma para alejar al usuario de la tentación que le puede suponer entrar en la web de la DGT a través de su smartphone mientras va conduciendo.
- En el pie de página podemos ver que nos ofrecen un titular en el que podemos leer «Para personas». Por si alguien se confundía y pensaba que era para tocinos.
- Si navegamos dentro de los diferentes apartados, veremos que el laberinto se expande de forma exponencial.
- El código fuente de la página resulta bastante sorprendente
- La etiqueta <!DOCTYPE> no empieza en la primera línea, lo cual no es una buena práctica
Conclusiones
Si entras a la página web de la DGT, te recomendamos no haber tomado antes unas copas de más y asegúrate de abrocharte bien el cinturón. También esperamos que si has accedido, haya sido por accidente y no para pagar una multa.
Compartir en Facebook
Compartir en Twitter
Compartir en Linkedin
comentarás de forma anónima