UX/UI & Interaction Design
Compressflow
Herramienta para Webflow
Diseño de herramienta de compresión de imágenes, mediate la metodología Lean UX
Contexto inicial
Este proyecto consiste en la realización de un prototipo para definir la interfaz gráfica de «Compressflow» (herramienta de compresión de imágenes), su posterior evaluación con usuarios, y la implementación de las mejoras.
Descripción del problema
Para conseguir que el peso de las interfaces sea el menor posible, debemos elegir el formato adecuado para cada imagen (.svg, jpeg, png.) y optimizarlas. Siempre intentando perder la menor calidad posible.
Objetivos
Crear una interfaz gráfica para una herramienta de compresión de imágenes, e incluir una guía de estilo, ya que más adelante se deberían incorporar más funcionalidades.
Requisitos y limitaciones
Se debe utilizar la identidad gráfica de Webflow, y debe ser responsive. Herramienta de uso libre, con registro previo. Transformación de JPG y PNG. Posibilidad de carga de varias imágenes, comparativa de original y vista previa, y dejar el sistema preparado para incluir otras herramientas.
Técnicas utilizadas
Lean UX
Benchmarking
Sketching
Wireframing
Prototipado alta fidelidad (Figma)
Diseño de UI Kit
Test con Usuarios
Análisis heurístico
El Proceso
Creación de un prototipo
Evaluación con Usuarios
Evaluación sin Usuarios
Implementación de mejoras
Creación de un primer prototipo y de una guía de estilo
Fundamentos gráficos
Benchmarking
Como primer paso, se ha realizado una comparativa entre varias aplicaciones de compresión de imágenes, que ha supuesto una orientación para generar los primeros bocetos en papel.
Identidad gráfica libre de Webflow
Una vez descargados estos elementos (logo, tipo colores, etc.), e investigado sus composiciones, ya se pueden desarrollar el resto de componentes y realizar una composición visual en concordancia.
La guía de estilo contiene:
Elementos básicos para incorporar nuevas funcionalidades en futuro
Algunos patrones estándar como botones y links (dif. tamaños y estados), campos de formulario (estados y mensajes, textarea), desplegables (dropdown, dropups), checkbox, toggle y radiobutton, modales, alertas y tooltips, iconos, cards, notificaciones, etc.
Todo dentro del universo de marca de Webflow
justificación
Se ha intentado que el prototipo cuente con la interactividad suficiente para que un usuario pueda comprender, con cuantas menos explicaciones mejor, qué puede hacer con esta herramienta y qué pasos debe dar para conseguirlo. Para ello, se han desarrollado 2 flujos (para JPG, y para PNG), con los que se pueden realizar diferentes acciones (carga de imágenes, modificación, compresión, previsualización y descarga)
Con el UI kit se ha dejado creada una guía de estilo que permite sistematizar los diferentes componentes de esta herramienta, de modo que, en el futuro, un diseñador cuente con los elementos básicos para incorporar nuevas funcionalidades sin tener que partir de cero.
Evaluación: test con usuarios
Objetivo
-Comprobar si entienden la lógica de la interfaz
-Ver qué nivel de dificultad y dónde la encuentran
-Reconocer si la interfaz concuerda con sus patrones mentales
Screening
-Entre 30y 50años
-Nivel de informática medio/de usuario
-Que hayan utilizado antes herramientas similares
Realización de la prueba
-Previamente firmar acuerdos legales (CI y NDA)
-Cada participante realiza las dos tareas (comprimir y descargar 4 imágenes JPG en versión móvil, y 4 en PNG para escritorio)
Para finalizar
-Deberán responder a una encuesta final
-Y expresar sus sugerencias e inquietudes
-Les agradecemos su participación
Análisis de las pruebas
Tras grabar las sesiones, tomar nota de las interacciones de los usuarios (especialmente la comunicación no verbal) y analizar las grabaciones, se han encontrado varios puntos críticos o problemas en la interfaz (son bastantes debido a que en esta Metodología Ágil el prototipo está todavía poco definido). Estos son algunos:
Mejoras surgidas de los tests
Una vez recogidas las dificultades, dudas y sensaciones que han tenido los participantes de los tests, se han deducido las siguientes mejoras. Algunos problemas se han desestimado, debido a que eran errores del usuario, o por la baja definición del prototipo:
No encuentran fácilmente la herramienta Compressflow
Opciones de reducción: no ve que son botones
Les confunden las fotografías superpuestas; no reconocen que es la vista previa
Busca otro botón de descarga para la imagen que edita
Le confunde "descargar", prefiere "guardar"
Etc.
Se debe destacar la herramienta de Compressflow
Poner opciones de reducción dentro de círculos
Nombrar las imágenes (normal/reducida) para diferenciarlas
Añadir botón de descarga para la imagen que edita
Añadir botón de "mantener proporciones"
Etc.
Evaluación sin usuarios: heurística de Nielsen
Con este método se complementa la evaluación del producto, ya que esta técnica consiste en corroborar ciertas reglas generales que debe cumplir la interfaz; señalando qué puntos de la interacción se deben mejorar, y asegurando que se vean cumplidas las necesidades de usabilidad.
Implementación de mejoras
Prototipo final
En estas versiones del prototipo final se pueden llevar a cabo varios flujos diseñados:
-JPG: selección de herramienta, carga de imágenes, modificación, y descarga
-PNG: selección de herramienta, carga de imágenes, modificación, y descarga
Para más adelante
Esta herramienta Compressflow, como proyecto dentro del Diseño Centrado en el Usuario, requiere de un proceso iterativo. Esto significa que la próxima fase del proyecto consistiría en realizar nuevamente testeos con usuarios y sin usuarios, para validar o no las mejoras que hemos hecho hasta ahora, para descubrir nuevos problemas, y para añadir nuevas mejoras después.
CONCLUSIONES
Este proyecto carece de una investigación previa, ya que es una Metodología Ágil. Como tal, se ha comenzado con un prototipo de aproximación, pero ha sido tras la prueba con usuarios cuando realmente se ha ajustado al modelo mental de los usuarios testeados.
No deja de sorprenderme la cantidad de problemas que surjen de algo que, según mi perspectiva, no está tan mal, y en consecuencia, también el número de insights y de mejoras.
Creo que realmente del prototipo inicial al último, hay una gran diferencia.