Se lee en 6 minutos

El reto

Durante parte de 2019, en colaboración con la ESA, contribuí al desarrollo y evolución de un portal web que servía como repositorio para su conocimiento científico y técnico. Dicho portal debía facilitar al máximo la creación y búsqueda de estos contenidos. Mi labor fue liderar el área de UX / UI y asesorar a los stakeholders. Llegamos a las siguientes conclusiones en cuanto a los puntos clave prioritarios que había que mejorar:

  • Unificar y definir con claridad el diseño, ya que partíamos de una base muy irregular en ese aspecto.
  • Optimizar la usabilidad del portal a lo largo de todo el user journey
  • Dar un enfoque a la Home que explicase el propósito de la herramienta.
  • Mejorar el sistema de búsqueda.
  • Encontrar una manera unificada y consistente de embeber contenidos multimedia de distinta naturaleza en un mismo documento.   
  • Hacer el portal adaptable a cualquier dispositivo. 

Contexto

Los requisitos de la Agencia Espacial Europea para este proyecto consistían en crear un repositorio que almacenase la captura de conocimiento de científicos y expertos, principalmente a través de vídeos y todo tipo de archivos multimedia. Una especie de wiki para la Gestión de los Conocimientos de la ESA.

El repositorio tomaría forma a través de un portal web que permitiese a los usuarios crear y subir contenidos, etiquetarlos con metadatos y compartirlos con otros usuarios.

El sistema debía contener tres categorías principales de contenido:

  • El contenido de la wiki, siempre cambiante y controlado por uno o más editores.
  • Documentos curados de diversos tipos, con contenidos definidos proporcionados por un autor y con una fecha de creación especificada.
  • Contenido de vídeo y audio, video-tutoriales o resultados de entrevistas de captura de conocimientos.

Research y early insights

Empecé realizando benchmarking de proyectos que pudieran tener una naturaleza similar, aunque no los listaré por temas de privacidad.

Esta fase me ayudó a ver de qué adolecían otros proyectos similares y descubrir qué valor añadido podía aportar nuestro proyecto. 

También hice un análisis exhaustivo a nivel técnico para conocer cómo estaba construido el portal. 

Tras esta fase obtuve una serie de early insights, muchos de ellos de carácter técnico y de los que hablaré en el siguiente apartado. 

Insights

Tras las fases anteriores y teniendo muy en cuenta heurísticas básicas de usabilidad, descubrí y comprendí la importancia de dar respuesta a las siguientes preguntas (solo se muestran algunas a modo de ejemplo):

  • ¿Cómo distribuimos la información a nivel general? Los layouts serán de 1 o 2 columnas, con sus correspondientes subdivisiones. El layout de 1 columna se utiliza en páginas simples como la Home. Para el resto usaremos 2 columnas y sus subdivisiones.
  • ¿Cuanto peso deben tener los menús para este proyecto? El menú superior debe ser minimalista, dando mucha importancia al buscador debido al propósito del portal y a las recomendaciones de la ESA. El menú lateral será ajustable en anchura solo cuando sea preciso, por ejemplo en los filtros de la búsqueda avanzada. Para mobile usaremos menús tipo hamburguesa principalmente.
  • ¿Textos, iconos? El menú principal se simplificará para mejorar la legibilidad, accesibilidad y comportamiento responsive. Cuando los iconos se usan, por ejemplo en la búsqueda avanzada, su propósito es agrupar elementos visualmente. En la barra de filtros, usamos los iconos para ayudar a identificar las categorías. Se hacen especialmente útiles, por ejemplo, cuando plegamos la barra lateral para ganar espacio.
  • Configuración de las tablas de elementos: las columnas de las tablas serán ordenables siempre que proceda. Las tablas serán responsive.
  • Mostrar resultados de search y sistemas de filtrado: se añadirá un desplegable en el buscador de la Home y cualquier otra página excepto la de búsqueda avanzada. Mantendremos los filtros en la sidebar plegable, pero será diseñada de manera más modular, haciendo más evidentes los filtros aplicados (mediante checkboxes). Los checkboxes generarán a su vez al ser activados una etiquetas que mejorarán la usabilidad y servirán de ayuda visual. Se añadirá una barra de herramientas bajo el campo de búsqueda que permita reordenar resultados y cambiar de vista (lista / cards).
  • Textos por defecto: se generarán textos e imágenes por defecto que se mostrarán siempre que aún no haya contenidos.
  • Navegación jerárquica: las estructuras jerárquicas siempre usarán tabulación o indentado. 
  • Mostrar información adicional: se usarán bloques (cards) específicos para la información adicional. Dichos bloques (widgets) se reajustarán al espacio que les sea asignado, ya sea a la derecha de los contenidos principales, bajo ellos, etc. Mantenemos las pestañas, tanto horizontales como verticales para mostrar contenidos relacionados.

Aplicando criterios de mejora

Las capturas a la izquierda (cabecera negra) muestran el estado previo a la primera fase de aplicación de mejoras de diseño y usabilidad.  Las capturas de la derecha (cabecera azul) muestran los cambios en el diseño y el layout. Los describo a continuación:

Home: en un primer paso, empecé a unificar estilos y colores que dieran más coherencia al portal y a la imagen de marca. También generé una serie de imágenes de reemplazo para ser mostradas en ausencia de imágenes definitivas. 

Búsqueda: unifiqué todos los filtros en la barra lateral izquierda para mejorar la usabilidad. Este mejora aplica en todos los casos similares.

Artículo: en este portal era vital que se mantuvieran consistentes los artículos con muchos contenidos embebidos. Esta pantalla es una primera aproximación a la solución.

Embedded content - example of an article in which different media sources are embedded

Embedded content – example of an article in which different media sources are embedded

Favoritos: en esta sección mejoré la distribución de las cards y su tipología. Además el menú superior fue totalmente remodelado para comportarse correctamente en dispositivos móviles y mejorar la calidad gráfica, como veremos también en las capturas de responsive. 

Aplicando diseño responsive

Éstas son algunas capturas extra en modo tablet. En ellas se ve claramente que la simplificación del menú superior no afecta a su usabilidad.

A continuación se muestra la siguiente iteración, desarrollada con Sketch para agilizar el proceso y obtener una rápida validación por parte de la ESA. 

Sketch mockup – Desktop

En la Home utilicé un slider de tipo hero para destacar las características principales del portal. Utilizando este elemento de interfaz mejoré además el UX writing y el onboarding. 

En el caso de los artículos con contenidos embebidos, opté por alternar texto e imagen para que la maquetación se mantuviese equilibrada. El menú lateral se hace más consistente que en la versión anterior, especialmente en dispositivos móviles. La arquitectura de la información se clarifica con la mejora en el diseño del tree view

La búsqueda avanzada se simplifica. En el menú lateral, los filtros se activan mediante checkboxes, que quedan reflejados en la barra de búsqueda facetada. Esta barra se muestra ahora justo debajo del campo de búsqueda por coherencia y para mejorar su comportamiento responsive. Además permite cambiar de vista (lista / cards).

A continuación puedes ver un vídeo con el mockup en vivo.

Sketch mockup – Mobile

En estas pantallas se puede apreciar en detalle la adaptación del menú superior a mobile. 

Las funcionalidades de la búsqueda avanzada se adaptan perfectamente a cualquier viewport mobile.

De nuevo, puedes ver un vídeo con el mockup en vivo.

Mockup HTML

Desarrollé este mockup en HTML para facilitar a los stakeholders la comprensión del prototipo.

Marvel Mockup Screens 

Aquí se pueden ver todas las pantallas que componen el mockup para desktop y mobile. 

Imágenes de reemplazo

Aquí tienes algunos de los diseños de la iconografía para las imágenes de reemplazo.

Tipografías

Éstas son las tipografías utilizadas en el proyecto. Son las indicadas en el style guide oficial de la ESA.

Bocetos a mano

El origen de mi contribución al proyecto está aquí. Todo empieza con lápiz y papel 🙂

Wireframes – all

 

Suscríbete a tonalidad.es