UX/UI Case study: Web Ayto. de Madrid
Un case study es un un proyecto de mejora, un tipo de investigación para satisfacer una necesidad y dar una solución importante al producto o servicio que se nos plantea.
Para enfrentarme a ello, sitúo al usuario en el centro y tengo que definir claramente su necesidad para satisfacerla, los recursos a los que tiene acceso, si la tarea le resulta fácil o difícil y cómo mide su éxito.
La web del ayuntamiento de Madrid ha intentado mejorar considerablemente su usabilidad y accesibilidad en los últimos años. Pero todavía es muy habitual encontrar secciones o funcionalidades que no funcionan de la mejor manera….
💡 Tal y como dice Steve Krug en su libro “No me hagas pensar”, las personas tienden a invertir poco tiempo en leer las webs: no leemos las páginas, las escaneamos. Bajo esta premisa, parte mi propuesta de mejora para la web del Ayto. de Madrid.
Me he centrado en la sección de Gestiones y Trámites de la web, ahora os muestro cómo.
Research
Hice encuestas a diferentes usuarios sobre la finalidad de uso que hacen cuando visitan madrid.es, la mayoría de las personas únicamente entran en la web para gestionar trámites o buscar información.
Con la actual pandemia los trámites on line están creciendo de manera considerada. Por ejemplo, si quieres solicitar el carné de la biblioteca, la solución, al menos en teoría, se encuentra en la web del ayuntamiento. Y en general vemos necesario, y es preferible, gestionar nuestros trámites de forma telemática.
Sobre aspectos a mejorar, la mayoría de las personas opinan que la web es cargante, hay mucha información en todas partes y cuando necesitan gestionar algún trámite prefieren buscar en Google para que les redirija directamente a la página que buscan de la web.
Si navegamos por la página de “Gestiones y Trámites”, vemos los tramites que podemos hacer en linea señalizados con etiquetas verdes, pero no están clasificados. ¿Se podría clasificar el contenido de otra forma?
- No se ve de forma clara qué trámites se pueden hacer en línea y qué trámites se deben hacer de forma presencial. Aquí pongo el enfoque del problema a solucionar.
- Para tramitar en línea se necesita acceder con certificado electrónico o usuario y contraseña. (Falta un botón de login)
- Se repite la información “Lo más visto” de la página de “Inicio”, ¿nos sobra aquí en la sección de “Gestiones y trámites”? ¿su diseño puede dar lugar a confusión como si se tratara de migas de pan?
- Los indicadores flotantes de desplazamiento 🔼 / 🔽 pueden ser reducidos solamente a uno para subir. (🔼)
- En la página de “Inicio” hay un chat online flotante para contactar con Línea Madrid, aquí en la página de “Trámites” no está incluido y puede ser necesario. (En mi opinión es necesario durante toda la navegación en la web)
En la investigación también descubro que el Ayuntamiento mantiene la atención a la ciudadanía abierta 24h a través de canales no presenciales, como lo son el teléfono 010 ó 91 529 82 10 y las cuentas en redes sociales @Lineamadrid. Hago uso de estos canales para saber qué trámites se pueden solicitar a través de la web en línea y que trámites son exclusivamente presenciales.
Hay infinidad de trámites que puedes hacer de forma online: descargar impresos para presentarlos, acceder a tus datos personales, donaciones Covid-19, Inspección Técnica de Edificios (ITE), realizar consultas y reclamaciones de consumo, pagar multas de tráfico, solicitud de limpieza de pintadas en fachadas, etc.
Y todavía son muchos los trámites que sí o sí tienes que gestionar yendo al ayuntamiento o a una de sus oficinas: Alta y cambio de domicilio en Padrón, comunicación de cambio de domicilio en los Registros de Vehículos y Conductores, servicio de Apoyo a Familias con menores, abono Deporte Madrid, tarjeta azul de transportes para autobuses (EMT) y metro, procedimiento para el reconocimiento de la situación de dependencia, etc.
No obstante, todo trámite que se puede hacer en línea, también se puede hacer de forma presencial. Al ser muchas más gestiones las que se pueden realizar en línea desde la web que las que sólo se pueden hacer de forma presencial, anoto todas las presenciales (puedes verlas aquí 📝).
Ideación
Una vez definido el problema, paso a ver cómo puedo hacer más efectiva la navegación en la web para que el usuario no caiga en desánimo tras navegar cierto número de páginas y abandone.
La solución pasa por jerarquizar visualmente el contenido para que en un simple escaneo tenga las cosas más claras y fáciles de entender. Vamos a intervenir la interfaz de usuario recurriendo a una clásica metáfora física y tangible: las pestañas. No nos sobra ni el buscador, ni los trámites destacados; sólo vamos a clasificar en dos versiones más concretas y directas el catálogo de trámites. Haremos dos pestañas: pestaña A será un centro de operaciones en línea y pestaña B será un centro de operaciones donde se agruparán todos los tramites que se hacen de forma presencial.
Prototipo
Primera vista de la web: Añado un botón de login en la esquina superior derecha. Debajo del submenú, a los pies de la foto, elimino la sección “Lo más visto” y dejo un breadcrumb-trail (migas de pan) para saber dónde está el usuario (estás en Trámites, dentro de Ciudadanía). Reduzco a uno el botón de desplazamiento e incluyo el chat online con Línea Madrid en la esquina inferior derecha.
En las siguientes imágenes muestro mi principal propuesta de mejora, dos pestañas para clasificar el contenido en dos tipos de trámites: operaciones en línea y operaciones presenciales. Cada pestaña mantiene los 3 botones de la versión original para clasificar el catalogo de trámites según temas, necesidades o colectivo. En este prototipo está activada la pestaña “Centro de operaciones en línea” y el botón “TEMAS” para mostrar un catálogo de contenido en cards con el titulo y un icono del tema. Cada card es una categoría que da paso a diferentes subcategorias, o lo que es lo mismo, cada card da paso a los diferentes trámites que se podrían hacer.
He tratado de mejorar el apartado dedicado a las gestiones y trámites del ayuntamiento con esta solución simple. Creo que, más pronto que tarde, todos los trámites que tengamos que hacer en nuestros ayuntamientos, se podrán tramitar directamente desde sus webs. Pero hasta entonces, creo que soluciones como esta, que clasifiquen y jerarquicen visualmente el contenido, pueden ayudar al usuario para alcanzar su objetivo. He recurrido a un uso clásico con las pestañas pero estoy seguro que con práctica, tiempo y aprendizaje, convertiré esta misma solución en algo más innovador y eficaz.
Para terminar os dejo la vista general de la sección de Gestiones y Trámites. con las diferentes pestañas activadas:
😎 Gracias por acompañarme hasta aquí. ¡Hasta pronto!
*Primer case study, para el precurso de UX/UI de Neoland.
