Case Study: Portal web Gobierno de España

Capítulo II

Rubén Sueiro
Sep 2, 2018 · 4 min read

3 — Referencias.

Actualmente, tenemos como referente la página del Gobierno de U.K., premiada al Mejor Diseño Web en 2013.

Captura de la web del Gobierno de Reino Unido

El Servicio Digital del Gobierno del Reino Unido ha conseguido crear unos estándares que deberían ser tomados en cuenta por todas las páginas gubernamentales del Mundo, poniendo de primera mano la experiencia del usuario. Estos principios son:

  • Comenzar con las necesidades del usuario.
  • Proporcionar recursos para que todos los puedan usar.
  • Diseñar bajo los datos analíticos de los usuarios.
  • Enfocarse en hacer algo simple de usar.
  • Iterar al máximo con el usuario.
  • Diseño accesible para todos
  • Comprender el contexto y diseñar para personas.
  • Construir un servicio digital, no un sitio web.
  • Usar el mismo lenguaje y los mismos patrones de diseño siempre que sea posible.
  • Hacer las cosas abiertas y transparentes.

Además de los puntos comentados anteriormente sobre el diseño, proponen la centralización de todos los ministerios, administraciones , etc en la misma página, para que desde ahí el ciudadano tenga acceso directo a sus demandas.

Otra página en la que inspirarse es la web del gobierno de Australia. Donde hay una jerarquía de la información muy bien enfocada y esquematizada. Su motor de búsqueda está ubicado en un lugar accesible, e incluso utiliza iconos para guiarnos en el menú y en diferentes apartados.

Captura de pantalla de la página web del Gobierno Australiano. www.australia.gov.au

Comienza mi idea…

4 — Card sorting.

Tras consultar las bases, analizar como se distribuyen las demás páginas de Gobierno Internacionales, y en función a las necesidades aportadas por ciudadanos/as, jerarquizamos un nuevo menú dividido en cuatro grupos:

Servicios e Información.

Moncloa y Gobierno.

Noticias y Medios.

Acerca de España.

La intención es simplificar al máximo nuestro menú y evitar la sobrecarga en el usuario. Pero ojo, posteriormente aquí tendremos que realizar un nuevo trabajo, ya que una vez seleccionado el apartado en el que queremos entrar, esta nueva página que se abra también debemos reorganizarla, y así evitar que el usuario tenga que pasar por varias secciones antes de poder acceder a la que realmente quiere llegar.

Una vez constituidos los grupos de organización de contenido del menú principal, realicé un card sorting cerrado para categorizar todos los elementos y verificar si la clasificación de información es familiar y comprensible para el usuario.

Muestra del proceso de card sorting.

5— Construcción.

Como comenté durante el análisis de la página actual, esta se encuentra sin adaptar a los diferentes tipos de dispositivos digitales, por lo que me pareció básico iniciar el diseño en “mobile first”.

Comencé plasmando mi idea mediante wireframes con la herramienta web Whimsical , al mismo tiempo que iba pensando en los iconos que iba a incluir para cada sección del menú. Y, ¿ Por qué incluir iconos ?… Los iconos son más fáciles de recordar y mejoran la usabilidad, además van acompañados de una etiqueta de texto, lo que mejorará todavía más la facilidad de uso, legibilidad y compresión.

Pequeña captura del wireframe.
Primer boceto de algunos de los iconos utilizados

7 — La guía de estilo.

Manteniendome firme a la obligación de crear una página web accesible para el ciudadano, las bases de la guía de estilo contienen los elementos necesarios para que este diseño tenga un buen contraste

6— El prototipo y valoración final.

Mock
Ejemplo de la Interacción de menú y scrolling.

Rubén Sueiro

Written by

Ux Ui & Brand Designer // www.rubensueiro.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade