CASO ESTUDIO · Shortly

Web Responsive · Acortador de enlaces 

CONTEXTO

Shortly es una herramienta web responsive para acortar enlaces. De manera que el usuario puede introducir una dirección de internet (URL) cualquiera y la función principal de la herramienta será generar una versión corta de la misma.

Esta herramienta tiene 3 funciones:

• • Permite publicar links en redes sociales donde existe una limitación de longitud de los mensajes (Twitter)
  • Permite la obtención de un enlace más corto y fácil de reconocer o recordar
  • Permite también consultar las estadísticas de uso del enlace

FUNDAMENTOS DE LA PROPUESTA GRÁFICA

Como primera parte del proceso de diseño, llevé a cabo una pequeña investigación para obtener una visión más amplia de las herramientas que existen actualmente para entender cómo funcionan y cómo resuelven el diseño de interacción tanto en temas de estructura como en cuestiones de look&feel y layout.

Una vez recopilada la suficiente información, al ser un proyecto empezado des de 0, generé un Universo Visual definiendo una serie de conceptos asociados al futuro producto. De aquí generé un Mood Board que me ayudó a que los conceptos de mi universo visual tomaran forma.

A partir de aquí pude definir la paleta de colores, la tipografía e iconografía que perfectamente encajaba con el concepto del producto.

PROCESO DE DISEÑO

El briefing del proyecto señalaba que era necesario diseñar para desktop y mobile, de manera que la creación del producto debía tener en cuenta los términos de diseño responsive. Por lo tanto, lo primero antes de empezar con el proceso de creación de componentes y estilos, se puso detenida atención en la definición de la rejilla, facilitando la creación de los componentes básicos. En este punto del proceso buscaba construir un sistema que fuera lo más económico posible, es decir, que se pudieran directamente usar los mismos componentes para los dos break points definidos o, que estos sufrieran los mínimos cambios al pasar del uno al otro.

Una vez definida la rejilla empecé con el diseño del producto, la creación de los estilos (UI Kit) y sus componentes. Para organizar mi sistema de diseño me basé en el diseño atómico, ya que es una metodología que me funciona muy bien a la hora de crear los componentes. Para construir mi interfaz me basé en un pequeño grupo de componentes que poco a poco fui agrupando en componentes más complejos.

Una vez completado mi UI Kit, empecé con la creación de las diferentes pantallas y definición de los flujos del prototipo interactivo.

Seguidamente redacté un informe explicativo para llevar a cabo una prueba de usabilidad con usuarios, definiendo los objetivos generales, localizando las áreas a testear, definiendo escenarios de uso coherentes y el perfil objetivo de persona usuaria.

El objetivo principal de esta prueba donde se aplicó el método del Thinking Aloud, fue identificar los problemas de usabilidad de la interfaz. Esta prueba la realicé con 5 usuarios siguiendo el ejemplo de Jacob Nielsen y Tom Landauer y su investigación que demuestra que haciendo una prueba con 5 usuarios se localiza el 85% de los problemas de usabilidad del proyecto. Seleccioné 2 usuarios para testear el desktop prototype y 3 más para el mobile.

De las pruebas se pudieron extraer los siguientes insights y sus propuestas de mejora:

• • Que el botón de sign up sea la primera información que el usuario encuentra no está hecho al azar. El principal objetivo de la página es obtener el máximo número de registros de manera que se prioriza la acción. El usuario puede probar gratuitamente el servicio de la página de igual manera sin necesidad de registrarse previamente. Se define que el usuario pueda acortar hasta un máximo de 3 enlaces. Seguidamente será necesario el registro para poder seguir usando la herramienta. Por lo tanto, el icono de eliminar tanto en la página principal como en la página de estadísticas del enlace no será visible para los usuarios que no estén registrados. Se diseña un mensaje informativo para que el usuario esté al tanto de que es necesario registrarse para poder acortar más enlaces.

    
    ANTES (icono para eliminar enlace)
    
    
    DESPUÉS (sin icono)

• • ¿Se ha copiado el enlace? – Es necesario diseñar feedback del sistema para que la acción del usuario sea claramente visible identificando que la aplicación responde al copiar el enlace. De igual manera se añade mensaje de error en el caso que el usuario no introduzca una URL correcta y, mensaje informativo cuando el usuaria haya utilizado la herramienta para acortar el máximo establecido de enlaces. (Véase seguidamente en el prototipo).
    
    MOBILE (feedback al copiar el enlace)
    DESKTOP (feedback al copiar el enlace)
• • ¿Cómo consultar las estadísticas del enlace acortado si hemos cerrado la página? – Es necesario que los enlaces (un máximo de 3) queden guardados para que el usuario al regresar pueda consultarlos. Permanecerán en la página principal de la herramienta.

    

    DESKTOP (se conservan los links en la página)

• • ¿Uso de iconos o texto? En el caso de desktop se han usado ambos. Entendemos que la acción de copiar el enlace prioriza en un primer momento a la de consultar las estadísticas por lo tanto se utiliza la palabra “Copy” para fomentar la agilidad de entendimiento del usuario. En el caso del diseño mobile y por restricciones de espacio y layout se opta por el uso de iconos, lo más descriptivos y standard posibles, para ambas acciones.

Siguiendo el proceso de diseño proseguí con la segunda iteración de los diseños aplicando los cambios a partir de los resultados obtenidos en las pruebas de usabilidad. Dando como resultado el prototipo final de este proyecto.

? ? Enlace a los prototipos 

CONCLUSIONES

En general los cambios en el diseño fueron mínimos pero determinantes para la mejora de la interacción con la herramienta. Se entiende que los diseños previos cumplían con unos estándares buenos de usabilidad y una buena coherencia en la arquitectura de la información, ya que los usuarios pudieron completar las tareas sin dificultades. Por otro lado, las pruebas de ayudaron a definir mejor la interacción que ofrece la aplicación (freemium) y a mejorar la visualización del estado del sistema, definiendo mensajes de error, validación e informativos durante toda la interacción.

La PEC2 ha consistido en realizar un prototipo interactivo y de alta fidelidad de una herramienta web responsive para acortar enlaces.

La herramienta se llama Shortly y toma como parámetro de entrada una dirección de internet (URL) cualquiera, y su función principal es generar una versión corta de la misma.

He creado un universo visual a partir de un moodboard, una guía de estilo y un UI Kit donde se recogen todos los componentes que forman la interfaz.

A continuación se presentan los dos flujos de interacción para los dos breakpoints: Desktop y Mobile. 

Prototipo

Vídeo

A partir de la observación, el estudio y la réplica de la página de Airbnb, he podido comprender y mejorar el conocimiento que tenía de la herramienta Inspeccionar de Google Chrome. Muy útil y necesaria en mi día a día cuando se trabaja en un entorno FE y se requiere entender mejor este entorno.

Esta práctica me ha servido para mejorar mi agilidad trabajando con Figma y para seguir profundizando en el pulido de las interacciones y micro-interacciones. He podido explorar cuál es la mejor manera de construir el prototipo para recrear con más exactitud el producto real. Aunque actualmente no se pueda conseguir al 100%, no creo que estemos lejos a poder presenciar nuevas y mejores funcionalidades para Figma.

Me gusta crear Design Systems y el UI KIT sirvió para organizar mejor mi espacio de trabajo.

Aquí os dejo el enlace al prototipo y al vídeo.

P.D: El prototipo de Mobile requiere de mockup. Al estar los 4 prototipos en el mismo archivo (Desktop, Tablet, Mobile y ejemplo de Responsive) no lo he podido dejar predeterminado ya que afectaría a los otros. Es por eso que la barra de navegación parece que no esté bien situada.

Prototipo

Vídeo