METRIX

METRIX

IconografíaDiseño y visualización de la informaciónAnimación UI

IconografíaDiseño y visualización de la informaciónAnimación UI

metrix_main-img

Planteamiento

Concepto de diseño para Metrix, una aplicación web de analítica digital para UX. Totalmente enfocada a profesionales del sector ofrece de forma muy simple y directa las métricas más relevantes que impactan o tienen relación con la experiencia de usuario al utilizar un producto digital. Algunas de estas métricas son:

  • Visitas. Para controlar el impacto de mejoras en el diseño, detectar problemas y oportunidades de mejoras, etc. 
  • Tasa de rebote. Porcentaje de usuarios que han salido sin realizar ninguna interacción respecto al total. Es importante tener en cuenta el tipo de negocio para analizar esta métrica y donde se situan los rangos más habituales.
  • Tasa de conversión. Puede ser desde una compra hasta suscribirse a una newsletter pero nos ayuda a entender si se cumplen los objetivos del negocio y el impacto de las mejoras realizadas en la experiencia del cliente.
  • Páginas de salida para detectar comportamientos naturales o inesperados y tratar de descubir los motivos así como proponer e implementar soluciones.
  • Flujo del usuario, relacionada con la anterior pero más general y visual nos indicará dónde entra el usuario, por qué páginas pasa y dónde abandona. Nos muestrs el flujo más común que siguen nuestros usuarios. Muy útil para UX sobretodo en procesos de compra.

Para el desarrollo de esta aplicación se requiere:

  • Diseño de la iconografía customizada para las secciones principales del menú. Que extienda la personalidad de la marca y se base en ella.
  • Diseño y visualización de la información para mostrar las distintas métricas de UX de la forma más visual, simple y directa posible. Que ofrezca una visión general y detalle da cada una de las secciones si es necesario. 

Desarrollo: Iconos de sistema

En la primera fase se establecieron los objetivos principales o generales y posteriormente los más concretos o secundarios. Debemos evaluar si los iconos son necesarios, su propósito y el enfoque conceptual. Debemos hacer un inventario de los ítems que iban a ser necesarios, planificar el desarrollo, realizar una búesqueda de posibles referentes, idear mediante mapas conceptuales para generar una variedad de opciones y hacer una selección final de los más convenientes para nuestro contexto de uso.

La segunda fase más de desarrollo o diseño específico, se realizaron bocetos libres, bocetos en papel reticulado, se definió la sintaxis visual (aspectos morfológicos del sistema, buscando unidad y coherencia visual), se hicieron pruebas de color, se estableció una retícula para los iconos (basada en la de Otl Aicher para los juegos olímpicos de Munich del 72), se definieron módulos compositivos y grosores de línia, se realizaron ajustes ópticos, detalles finales y finalmente se exportaron a los tamaños requeridos.

A nivel visual, destacar que los iconos debían convivir con la marca dentro de la aplicación y por ello tenían que empaparse de su identidad. Es por eso que se siguieron guías para garantizar la unidad visual de los iconos y mejorar su integarción. Algunos de estos requisitos a seguir y en común con el símbolo gráfico de la marca fueron: uso de formas geométricas simples, iconos filled o con relleno y de estructura modular.

Desarrollo: Dashboard

Con el set de iconos finalizado y en base a la identidad visual de la marca se desarrolló la aplicación web, su estructura base y el dashboard principal con las distintas gráficas para cada métrica. La estructura y la funcionalidad se planteó para que fuera muy sencilla y a la vez dejará bastante espacio para la visualización de los datos mediante gráficas. Una barra superior enmarca la aplicación y sirve para ubicar el branding, escoger el proyecto que queremos analizar de todas las propiedades disponibles, filtrar por fecha y el acceso a nuestro perfil mediante nuestro avatar. En la barra lateral en el primer nivel tenemos el menú principal con las secciones principales que al pasar por encima muestra en el sidebar contiguo a su derecha las subsecciones que incluye además de una etiqueta de texto indicando la sección escogida (los iconos son reforzados por texto identificativo para garantizar y mejorar su reconocimiento y entendimiento). La zona restante, bastante amplia es la destinada al contenido, es aquí donde se mostrará todo lo relacionado con las métricas, datos y gráficas. Cada visualización de datos debe evaluarse en función de su escenario de uso, cómo querrá usarla el usuario, prioridades a comunicar y si es necesario incluir detalle mediante popovers que amplien la información.

A nivel visual el diseño se basa en los colores corporativos y la tipografía del logotipo añadiendo colores de acento y una tipografía que combina perfectamente con la marca, de palo seco, moderna y un poco condensada que perimite mostrar más información en menos espacio.

metrix-mockup-browser

Animación UI y microinteracciones

Diseño de la animación UI y las microinteracciones tanto de la navegación principal como de las gráficas principales. El objetivo de la animación debe ser ayudar a resolver problemas de diseño y potenciar la comunicación efectiva con el usuario. Debe tener un propósito, una razón lógica y funcional para estar ahí además de estilo. Entre otras cosas se diseñó la animación para orientar, dar contexto, dirigir el foco y la atención, mostrar causa-efecto y dar feedback al usuario.

Works

AireProject type

TacticalProject type

MNACProject type

MetrixProject type

© David Soriano 2018. Made with ❤ in BCN.