ADD BUTTON
FINDABILITY
Mejorada la incorporación de elementos al informe: mayor visibilidad y accesibilidad del botón Add gracias a las mejores prácticas de UX.
INTRODUCCIÓN
Añadir un nuevo elemento a un informe de Swydo es una de las acciones más básicas y frecuentes del builder — pero en el diseño anterior, el botón Add solo era visible al pasar el cursor sobre un widget existente, lo que lo hacía difícil de encontrar, especialmente en un informe vacío. El objetivo de este proyecto era que añadir un widget fuera fácil de descubrir en cualquier punto del informe.
PROYECTO
Hice un benchmark de cómo otras herramientas de creación (Semplice, Squarespace) abordan el mismo problema, exploré varias direcciones a partir del patrón de Squarespace de mostrar el espacio disponible entre elementos, y llegué a una solución más cercana al botón Add original que los clientes ya reconocían — simplemente reposicionado y siempre visible, incluyendo variantes de gutter horizontal y vertical y un comportamiento específico para widgets altos.
DESAFÍO
Los clientes ya estaban acostumbrados al botón Add existente, así que el desafío era mejorar su visibilidad y ubicación sin romper esa familiaridad — incluyendo casos límite como un informe vacío, añadir elementos entre widgets de una misma fila, y widgets largos y desplazables en los que el botón debía permanecer anclado y predecible.
MI ROL
Trabajé como Product Designer en este proyecto, llevando a cabo la investigación competitiva, explorando direcciones UX y diseñando la ubicación final del botón Add y sus estados en todo el report builder.
Antiguo botón Add
El botón Add en la estructura anterior del informe solo era visible al pasar el cursor sobre un widget del informe. Los usuarios se encontraban con dos problemas principales: entender dónde estaba la función del botón Add; y saber dónde se colocaría el nuevo widget tras su configuración. Con estos dos problemas principales en mente, pude acotar un poco el proceso de lo que quería lograr y hacia dónde orientar la investigación.
INVESTIGACIÓN UX
Basé mi investigación en tres productos distintos: Semplice Squarespace
SEMPLICE
Semplice es una plantilla para portfolios hecha en WordPress. Su editor está diseñado de forma que los usuarios puedan arrastrar al espacio vacío cualquier tipo de elemento que deseen en la página, como bloques de texto, imágenes, vídeos, etc. Cuando el usuario intenta insertar un elemento en la página, se resaltan los espacios de destino disponibles donde puede soltarlo. Al pasar el cursor sobre una de esas áreas, ese indicador se activa, mostrando al usuario que, si suelta el elemento ahí, se colocará en la posición deseada.
SQUARESPACE
Squarespace se comporta de forma similar a Semplice, pero tiene una función interesante relevante para mi investigación. Al pasar el cursor sobre una sección, se activan dos indicadores por encima y por debajo de esa sección concreta, y el usuario puede hacer clic en el botón "Add Section" para añadir elementos desde ahí. Este fue un caso de uso útil porque, en el report builder, los usuarios quieren decidir dónde añadir sus widgets, editores de texto o separadores de página.
EXPLORACIÓN UX
A partir de los ejemplos encontrados en las plataformas de referencia, empecé a crear posibles soluciones para nuestro producto.
Un primer intento reutilizó el criterio de Squarespace de mostrar los espacios disponibles entre filas del informe. Diferencié los botones con "Add Sections" y un "Add +" más simple, en función de la acción que el usuario podía realizar. Con el primero, el usuario podía crear una Section completamente nueva en el informe, un grupo que contiene widgets que cubren el mismo tema. El Add + o Add widget estaba pensado para ayudar a los usuarios a añadir elementos a la section. Aquí abajo una selección de variantes que creé para resaltar más el concepto de añadir widgets en horizontal, mostrando también cómo se activan las áreas al resaltarse.
Tras revisar cuidadosamente la solución de diseño con otros diseñadores y comentarla con el Product Manager, coincidimos en que la dirección era correcta, pero había que simplificar el botón. Por eso opté por un Add Button más similar al de los widgets anteriores, pero que destacara respecto a las áreas de los widgets y se comportara más de acuerdo con la solución que estaba explorando.
SOLUCIÓN FINAL Y DISEÑO UI
Como se ha descrito arriba, la solución consistía en mostrar un elemento más similar al anterior, por varias razones. Los clientes estaban acostumbrados al Add Button, pero tenían dificultades con su posición. Aquí abajo muestro varios estados del informe y la interacción con el Add Button.
Botón Add horizontal
Cuando el informe está vacío, el botón para añadir un widget aparece automáticamente debajo del mensaje de informe vacío. Al hacer clic en el botón más, un submenú muestra qué opciones puede añadir el usuario al informe.
Botón Add de gutter horizontal - ARRIBA
Si un usuario quiere añadir algo en la parte superior de la pila de widgets, puede hacerlo pasando el cursor por el gutter superior encima de la primera fila de widgets, para llegar al botón más que aparece automáticamente.
Al hacer clic en el botón más, un submenú muestra qué opciones puede añadir al informe.
Una vez elegido el widget a añadir, este se colocará en el primer lugar de la fila y empujará a los demás widgets hacia la derecha o a la fila inferior, si la fila ya está llena.
Botón Add de gutter horizontal - EN MEDIO
Si un usuario quiere añadir algo entre las filas de widgets, puede hacerlo pasando el cursor por el gutter entre las filas de widgets, para llegar al botón más que aparece automáticamente.
Al hacer clic en el botón más, un submenú muestra qué opciones puede añadir al informe.
Una vez elegido el widget a añadir, este ocupará el primer lugar de la fila siguiente y empujará a los demás widgets hacia la derecha o a la fila inferior, si la fila ya está llena.
Botón Add de gutter vertical
Si un usuario quiere añadir algo entre los widgets de una fila, puede hacerlo pasando el cursor por el gutter superior encima de la primera fila de widgets, para llegar al botón más que aparece automáticamente.
Al hacer clic en el botón más, un submenú muestra qué opciones puede añadir al informe.
Una vez elegido el widget a añadir, este se colocará en el primer lugar de la fila y empujará a los demás widgets hacia la derecha o a la fila inferior, si la fila ya está llena.
SOLUCIÓN ADICIONAL PARA WIDGETS LARGOS
Para widgets muy altos, podemos usar una solución diferente para el botón más.
Supongamos que el botón más tiene un padding-top de 24px. El margen superior del botón más está anclado a la parte superior del widget y permanece así mientras la parte superior del widget sea visible en el editor del informe.
Al hacer scroll, el botón más sigue anclado a la parte superior del widget porque esta sigue presente en el informe, manteniendo un padding de 24px respecto a la parte superior.
En cuanto el lado superior del widget alcanza un margen de 24px respecto a la parte superior del informe, el botón más permanece anclado a 48px desde arriba.
Ejemplo 1/3
En cuanto el lado superior del widget sale del informe, el botón más permanece anclado arriba con un padding-top de 48px.
Se mantendrá en esa posición mientras se haga scroll hacia la parte inferior del widget.
Ejemplo 2/3
En cuanto el lado superior del widget sale del informe, el botón más permanece anclado arriba con un padding-top de 48px.
Permanece en esa posición mientras se haga scroll hacia la parte inferior del widget.
Ejemplo 3/3
Como en la diapositiva anterior, también aquí en cuanto el lado superior del widget sale del informe, el botón más permanece anclado arriba con un padding-top de 48px.
Permanece en esa posición mientras se haga scroll hacia la parte inferior del widget.
Cuando el usuario hace scroll hasta 128px del final del widget, es decir, hacia su lado inferior, el botón más tendrá un padding superior e inferior de 48px. A partir de ese límite, el botón más se ancla a la parte inferior del widget y empieza a seguir el scroll de todo el informe.
El botón más desaparece mientras sigue el scroll, ya que el padding-bottom también es de 48px.
