Web del Ayuntamiento de Madrid
Case Study
EL RETO
Se plantea visitar la web del Ayuntamiento de Madrid que está continuamente implementando cambios para intentar mejorar su usabilidad y accesibilidad. Pero todavía es muy habitual encontrar secciones o funcionalidades que no funcionan de la mejor manera.
El ejercicio es navegar por la web y analizar o encontrar algún área de fricción para los usuarios y cómo se podría mejorar de una forma más sencilla.
DESCUBRIR
EL PROBLEMA
Según he ido navegando por la web del Ayuntamiento de Madrid, me llama la atención que hay bastantes áreas de fricción que se podrían mejorar.
En un principio parece que el menú principal de la Home del Ayuntamiento es el de arriba, el que aparece debajo de la cabecera. Pero en realidad también hay destacados o “atajos” que están dentro del menú secundario situado por debajo. O sea que aparecen en dos niveles distintos de navegación.
Me he centrado en el “atajo” o sección Distritos, porque considero que tiene varios inconvenientes a la hora de acceder a esta sección.
- Al clicar en Distritos sale un mapa interactivo de la ciudad de Madrid, pero al pasar por encima con el ratón, los nombres de los distritos se van fuera del mapa o no salen directamente.
Este problema podría ser por la implementación del mapa. Pero hay otro problema añadido:
2. Se pierden los menús principal y submenú lateral, y si haces clic en uno de los distritos, el submenú lateral será otro distinto desde el que no puedes volver atrás si no clicas otra vez en Distritos.
El Target
De 18 a 65 años.
La competencia
Otros ayuntamientos como el de Barcelona o Valencia.
El tono y sentimiento
La frustración de no encontrar la información que necesitas.
DEFINIR
Con toda esta información recabada voy a analizar y definir la sección Organización municipal e intentaré hacer una navegación dentro de la misma, donde esté todo el contenido más organizado y sea más fácil e intuitivo.
DISEÑAR
Primero he plasmado en papel lo que tenía en mente para ver si puede funcionar y así empezar a diseñar los wireframes.
La idea es que sea una página en scroll-down donde tengas presente el submenú lateral de la sección, en este caso la sección el de Organización Municipal.
Por otro lado creo que la información no está bien organizada y cuando clicas en el submenú te aparece otro distinto. Por eso he pensado en crear un sistema de organización de contenido desplegable. Así vas desplegando y la información que te interesa sin irte a otra página. Y se pliega para poder tener los menús y submenú de sección siempre presentes.
PROTOTIPAR
Para preparar los wireframes, se definen partiendo de la home de El Ayuntamiento, donde contiene la sección Organización municipal y Distritos.
Como se puede ver a continuación, el sistema de desplegables es el mismo para todas las subsecciones, de manera que todo el contenido está en la misma página y puedes ir navegando haciendo clic en el submenú o por scroll-down.
El submenú lateral tiene anclas enlazadas a cada contenido de la sección, de manera que se puede acceder a la información haciendo clic en cada sección del submenú lateral.
Navegando por las diferentes secciones del submenú lateral llegamos a Distritos, teniendo el submenú presente en la navegación.
El listado de Distritos de la ciudad de Madrid se irá activando si pasas el ratón por encima o haces clic desde el móvil. De manera que sabrás cuál es tu distrito y la información aparecerá debajo del mapa con el mismo sistema desplegable del resto de subsecciones (paso activo).
A continuación muestro los wireframes del prototipo de navegación.
