Una de las cosas muy positivas que tienen las webs públicas del Gobierno es que todas deben ser accesibles para personas que tengan ciertas dificultades para navegar, como personas con limitaciones visuales, etc. Uno de mis compañeros es experto en accesibilidad web y me descubrió un mundo hace años al enseñarme cómo hacían que las webs fueran completamente accesibles y compatibles con los sistemas que usan para poder navegar más fácilmente.
Sin embargo, para el resto de aspectos, estas webs del Gobierno sorprenden pero para mal. Mala estructuración en la navegación, información desordenada, ninguna llamada a la acción contundente y priorizada, aspecto visual anticuado, fotos sin sentido, iconos de su padre y de su madre…
Todos, incluyendo nosotros, hacemos lo que podemos en nuestras webs, blogs, ecommerce, tienen miles de fallos de usabilidad, de estructuración de la información, imágenes pixeladas, etc. Pero esto no debería ser lo típico en las páginas de la administración pública, ¿no creéis?
Criterios del análsis
- Certificado SSL: qué menos que tener operativo el certificado SSL que nos permita usar https para acceder a la página. Hace años quizás era algo opcional, ahora es muy necesario, ya no solo por seguridad, si no también porque Google penaliza a aquellas webs que no lo usen.
- Look and feel global: es algo realmente subjetivo, y entiendo que al ser una página estatal, no vamos a tener los últimos avances en diseño web, pero me propongo encontrar algo que al menos sea óptimo a los principales tamaños de pantalla.
- Consecución de objetivos: con esto me refiero a que aunque dejemos que el usuario navegue y busque lo que considere, al menos, hay que entender qué suele querer la mayoria y en base a eso, priorizar las acciones y la información para hacer más simple el journey del usuario y guiarle en la navegación.
- Elementos gráficos o detalles específicos: podemos tratar imágenes, colores, tipografías, formas, módulos, popups, etc.
- Versión mobile: no vamos a pedir mobile first, pero al menos alguna versión que se adapte mínimamente a dispositivos móviles.
Análisis
Portal DNI Electrónico
URL: https://www.dnielectronico.es
¡Certificado SSL correcto! 😃 Qué menos, si está firmado por la Dirección General de Policía.
En cuanto al look and feel, el fondo con imagen fija, scrolling en cada caja… Quizás habiéndola dejado un poco más sobria, sin tanto fondo y manteniendo una sensación de oficialidad, generaría una mayor impresión de oficialidad. Por otro lado, ese contenedor central está bien, ya que, cuanto menos anchos los textos, más fáciles para leer. Pero no es recomendable que se perciba tanto el corte entre el fondo y el contenedor central.
¿Qué objetivo creéis que hará la mayor parte de los usuarios que entren a esta web? Yo, sin tener datos, apuesto a la mayoría accederán a esta página para renovar el DNI o el pasaporte.
Lo lógico entonces es tener una llamada a la acción (CTA) nada más acceder, bien destacada, que permita acceder al proceso de cita previa. Este no es el caso, asi que mirad lo que aparece si haces click en Obtención del DNI > Renovación del DNI:
Instrucciones kilométricas y seguimos sin CTA que nos lleve a citaprevia.es😂
En cuanto a elementos gráficos, destaco el logo y la cabecera borrosos, al haber «estirado» la imagen para adaptarse a mi pantalla.
La versión mobile es en realidad hacerla algo adaptable cambiando el menú por uno hamburguesa, por cierto, bastante poco visible.
Seguridad Social
La verdad es que me ha sorprendido que no tuvieran certificado SSL, ya que como iremos viendo en el resto del post, estas webs de la administración suelen estar verificadas por AC Camerfirma. ¿Quizás se trate de algún error técnico?
En cuanto al look and feel, con un contenedor más disimulado, pero también más estrecho que la web de dnielectronico.es, y con tantísima informacion sin apenas destacar, es algo difícil diferenciar las entradas de «noticias», «novedades», «comunicación», etc.
De cara a los objetivos, entiendo que para esta página será más complejo al tener muchas opciones un mismo sitio web. De todas formas, apostaría por destacar mucho más la sección de «lo más visitado», que al final son los enlaces que más se usarán a lo largo del tiempo (accesos fijos, no noticias o comunicaciones). Las noticias estarán genial, pero no sé hasta qué punto son tan consultadas para priorizarse tanto.
En los elementos gráficos, destacar el módulo (temporal entiendo) que se ha puesto con motivo de la situación actual. Es importante destacarlo, pero quizás el formato no sea el más apropiado, e incluso para un mensaje de alerta, el propio texto sea demasiado grande para destacar. Como hipótesis, plantearía llamar la atención con un mensaje más breve que pueda ser ampliado en una sección específica posteriormente (un mayor número de clicks estarían «justificados» para no penalizar la experiencia y la atención del usuario). Por otro lado, el carrousel carece de sentido al indicar las mismas secciones que ya existen en el menú superior: duplicación de contenido sin aparente justificación en la misma visualización.
La versión mobile es una adaptación directa de la versión desktop, que al menos hace ligeramente más fácil la lectura.
Agencia Tributaria
URL: https://www.agenciatributaria.es
Tiene certificado SSL, así que punto positivo.
El look and feel, es al menos algo más sencillo (en el buen sentido), más limpio. Aprovecha más el ancho de la pantalla, aunque eso puede hacer que haya frases largas que cuesten leer (los ojos tienen que recorrer un espacio mucho mayor). Veo que algo común en todas estas webs son el número elevadísimo de novedades / noticias / avisos que hay en la home. Me cuesta realmente creer que la gran parte de los usuarios los lean de verdad.
El objetivo en esta temporada será principalmente la presentación de la declaración de la renta, digo para el grueso de la población. Sin embargo, como veis está bastante poco destacado.
Respecto a los elementos gráficos, no termino de entender bien las pequeñas imágenes que aparecen debajo del aviso y en la parte inferior. Me recuerdan un poco a las pegatinas que los cerrajeros dejan al final de las persianas de los comercios. Sería quizás más interesante acompañarlas de algún enlace, o al menos dar la sensación de que son clicables. Parecen más bien la típica sección de «estas empresas nos avalan». ¿Sabéis a lo que me refiero?
También añadir, que quizás los enlaces de la parte superior, al ser tan sencillos y no tener subrayado, se hace algo más difícil el hecho de intuir que son enlaces.
La versión mobile, como me imaginaba, vuelve a ser una versión que se adapta ligeramente, pero que mantiene las «pegatinas de cerrajero».
Portal del contribuyente
URL: https://www.madrid.org/cs/Satellite?language=es&pagename=Contribuyente%2FPage%2FCONT_home
Por supuesto, dejo la mejor para el final. Bueno «la mejor», entendedme… 🤦♂️ Todo hay que decirlo, y parece que está moviendo la mayor parte de la web a otro dominio donde el estilo al menos parece algo más moderno. En cuanto a certificado SSL, gana a la seguridad social, porque esta sí funciona correctamente bajo HTTPS.
El look and feel… mejor no comentar mucho 😂Tiene pinta de que fue pensada hace muchos años para otro tipo de pantallas, no para una 1920 x 1080, y así se ve…
A mi me ha recordado un poco a cuando hace muchos años trasteaba con los CMS de PHP para aprender cómo se instalaban y se configuraban, y que todas usaban practicamente el mismo tipo de plantillas con sidebar a los lados y mucho contenido encapsulado. Vamos, más viejos que las montañas 😅
El objetivo supongo que podría ser pagar algún impuesto o acceder a la oficina virtual. Realmente no está del todo mal, porque parece que lo más buscado esté en los enlaces que aparecen en la home, pero sólo los encontrarás si eres capaz de leerlos, porque con ese tamaño de fuente, está difícil.
Destaco el header gigante en comparación con el resto de la página. Y sobre todo la capacidad de que ocupe tantisimo y que el resto del contenido les entre debajo sin necesidad de hacer scroll down (para una pantalla grande) También otro elemento gráfico del que soy muy fan (ironía) es la imagen del chico de rojo que está sentado con el cuadro blanco que contiene los números de teléfono. Apostaría a que está hecho con paint, y por eso no permite la transparencia, y porque esa tipografía me pega mucho verla en paint, o quizás PPT, ¡quién sabe!
¿Hace falta que os hable de la versión mobile?😉
