NEW TEXT EDITOR
Mejorada la usabilidad del editor de texto: menús contextuales para tablas, imágenes y enlaces basados en el feedback.
INTRODUCCIÓN
El editor de texto de informes de Swydo necesitaba una renovación: un nuevo comportamiento del menú y nuevos menús contextuales para tablas, imágenes y enlaces — basados en los patrones que observamos en cómo los clientes usaban realmente el editor en su día a día. El menú anterior se activaba elevando todo el widget de texto, lo que desviaba la atención de la tarea real de edición.
PROYECTO
Trasladé el menú para que se ubicara encima del widget en lugar de dentro de él, manteniendo el comportamiento del widget coherente con el resto de widgets del informe y devolviendo el foco al propio menú. A partir de ahí, diseñé nuevos menús contextuales para tablas, imágenes y enlaces, cada uno adaptado a lo que los usuarios realmente necesitaban hacer con ese tipo de contenido.
DESAFÍO
Las tablas fueron lo que más trabajo requirió: los usuarios tenían que editar el contenido de las celdas, insertar o eliminar filas y columnas, y ajustar el ancho de las columnas, pero el menú existente escondía estas acciones. Estudié cómo otros productos gestionan la edición de tablas y adapté un patrón más descubrible, para luego extender el mismo enfoque de menú contextual a la edición de imágenes y enlaces, de modo que todo el editor resultara coherente.
MI ROL
Trabajé como Product Designer en el editor de texto de informes, llevando a cabo la investigación de usabilidad y diseñando la nueva posición del menú y los menús contextuales para tablas, imágenes y enlaces.
NUEVA POSICIÓN DEL MENÚ
Menú con widget al 100% del tamaño
A diferencia del diseño anterior del menú y del editor de texto, en el que todo el editor, una vez activado, se elevaba y mostraba el menú contextualmente en su interior, ahora la solución plantea colocar el menú por encima del borde superior del widget. Esta solución permite que el widget mantenga un comportamiento similar al de otros widgets y evita centrar la atención en todo el elemento, enfocándola solo en el menú.
WIDGET DE MENÚ AL 50% DEL TAMAÑO
WIDGET DE MENÚ AL 25% DEL TAMAÑO
NUEVO MENÚ CONTEXTUAL Y FUNCIONALIDAD
Para mejorar el comportamiento del widget de texto, además de pequeños detalles de UI, también quise mejorar el comportamiento del menú contextual de:
- Tablas Imágenes Enlaces
MEJORAS EN LOS WIDGETS DE TEXTO POR DEFECTO
WIDGET DE TEXTO EN HOVER
MENÚ CONTEXTUAL DE LA TABLA
Para mejorar la usabilidad del menú de la tabla, observé que otros productos también adoptan una solución más contextual. Esto se puede lograr de distintas formas; opté por usar tiradores (handlebars) interactivos.
EDICIÓN DE LAS FUNCIONES DE LA TABLA
En este flujo, busqué una solución más accesible para los usuarios. El pain point de este flujo era la falta de claridad sobre qué estaba editando el usuario y el conflicto entre el menú principal y el menú de la tabla.
COMPORTAMIENTO CONTEXTUAL DEL TEXTO EN LA CELDA
Cuando un usuario necesita editar el contenido de una celda, el comportamiento es similar al del menú principal, pero en este caso contextual a la propia celda.
MENÚ CONTEXTUAL DE ENLACES
En los ejemplos de abajo se muestra el antiguo menú contextual para enlaces en el editor de texto. El aspecto crítico de este elemento era su escasa visibilidad, ya que era difícil de encontrar en la página. La solución fue aplicarle una elevación distinta.
MENÚ CONTEXTUAL DE IMÁGENES
En el menú de imágenes el problema era similar al del menú de enlaces. Mi solución fue colocar un menú dentro de la imagen para reforzar su presencia, no encima de ella.
