Hace unos meses, nos dimos cuenta de que muchos usuarios nuevos tenían dificultades con la sección de diseño en el Designer debido a la pronunciada curva de aprendizaje necesaria para usar esa función.
En última instancia, esto creaba un obstáculo que frenaba la competencia y la velocidad de nuestros usuarios al crear en Webflow.
Nuestro equipo quería solucionar este problema, así que nos preguntamos: ¿cómo podríamos mejorar las funciones de diseño de Webflow para aumentar la adopción y la satisfacción de los usuarios?
¿La respuesta? La caja de alineación—una interfaz intuitiva diseñada para minimizar los clics y agilizar el proceso de diseño en Webflow. Echemos un vistazo a cómo nuestro equipo creó esta función.
Inspirándonos en el tres en raya
Durante nuestra sesión de lluvia de ideas, nos inspiramos en el clásico juego del tres en raya, utilizando su mecánica subyacente para dar forma al diseño de la caja de alineación. Al igual que la conocida cuadrícula de 3x3 del tres en raya, la caja de alineación adopta una disposición similar.
Establecimos un paralelismo entre la forma en que los jugadores juegan al tres en raya y cómo queríamos que apareciera la caja de alineación. Del mismo modo que los jugadores usan las celdas individuales del tres en raya para colocar sus símbolos X u O, queríamos que nuestros usuarios interactuaran con la caja de alineación seleccionando una celda individual para ajustar la alineación.
Al reflexionar sobre la estructura del tres en raya, observamos que el marcado del juego comprende esencialmente 9 divs, cada uno con un controlador onClick para facilitar los movimientos del jugador. De manera similar, en nuestro código, hemos estructurado 9 divs (denominados celdas), cada uno equipado con su propia lógica onClick.
Conceptualizamos cada celda como correspondiente a una coordenada específica; por ejemplo, a la celda superior izquierda se le asigna la coordenada (0,0), a la central (1,1), y así sucesivamente. Esta disposición sistemática agiliza las operaciones relacionadas con las celdas, garantizando una referencia sencilla. Utilizando nuestro sistema de coordenadas designado, recuperamos los valores de alineación asociados a la celda clicada cuando un usuario interactúa con ella para aplicar un estilo concreto. Estos valores de alineación pueden incluir varias propiedades de estilo, como align-items y justify-content para Flexbox, y align-content y justify-content para Grid.
Por último, inspirándonos en la representación de matriz 2D que se usa habitualmente en el tres en raya para identificar combinaciones ganadoras, implementamos un enfoque similar en nuestro código. Aprovechando una matriz 2D, construimos el marcado HTML para la caja de alineación e integramos la lógica onClick, conectándola con nuestro sistema de coordenadas para aplicar estilos de forma dinámica.
/**
* Los posibles valores de celda
*/
enum Cell {
TopLeft = '0,0',
TopCenter = '0,1',
TopRight = '0,2',
CenterLeft = '1,0',
Center = '1,1',
CenterRight = '1,2',
BottomLeft = '2,0',
BottomCenter = '2,1',
BottomRight = '2,2',
}
/**
* Una matriz 2D de las 9 celdas en la alignBox
*/
const alignBox = [
[Cell.TopLeft, Cell.TopCenter, Cell.TopRight],
[Cell.CenterLeft, Cell.Center, Cell.CenterRight],
[Cell.BottomLeft, Cell.BottomCenter, Cell.BottomRight],
];
<GridContainer>
{alignBox.map((row) =>
row.map((cell) => (
<div onClick={() => onCellClick(cell)}>
<PointIcon>
</div>
))
)}
</GridContainer>
Construcción de la caja de alineación
Estructura
Una vez sentadas las bases de nuestro sistema de coordenadas, nos sumergimos en el proceso de estructuración de la caja de alineación. Un requisito fundamental era que, en cualquier momento, la caja de alineación debía mostrar un icono correspondiente a los estilos seleccionados. Este icono podía cubrir una o tres celdas en nuestra cuadrícula de 3x3. Así, cuando un usuario pasaba el ratón por encima de una celda diferente, se revelaban uno o varios iconos que correspondían a determinados estilos de alineación.
El marcado requería superponer varios elementos. El desglose es el siguiente:
- Un elemento React contenedor encargado de gestionar los controladores de eventos, la lógica de negocio y la lógica de teclado.
- Un elemento React Ninebox responsable de mostrar u ocultar los 9 puntos.
- Un elemento React de variante hovered (al pasar el ratón) responsable de presentar los iconos vinculados a los estilos de alineación sobre los que se pasa el ratón.
- Un elemento React de variante selected (seleccionado) responsable de mostrar los iconos correspondientes a los estilos de alineación seleccionados.
- Una variante hovered que aparece solo cuando se mantiene pulsada una tecla modificadora (en este caso, Comando (en Mac) o Control (en Windows)).
Iconos de visualización
Una vez establecido el marcado, procedimos a crear una estructura de datos de mapa para determinar la búsqueda del icono apropiado de forma eficiente. Esta estructura maneja todas las combinaciones posibles de valores de alineación, permitiendo la recuperación de los datos del icono pertinente, incluido el icono SVG. Aplicamos un enfoque similar para la variante hovered, pero basamos nuestra selección en los valores de alineación sobre los que se pasa el ratón.
Accesibilidad
En Webflow, nos dedicamos a garantizar la accesibilidad para todos los usuarios al crear para la web. Para asegurar que la caja de alineación fuera accesible, implementamos la capacidad de modificar los valores de alineación mediante métodos de navegación por teclado, como el uso de las teclas de flecha, para establecer los estilos de alineación. Además, para facilitar una navegación fluida entre celdas mediante el teclado, introdujimos también el concepto de celda activa.
Celda activa
- Una celda activa representa la celda que corresponde a los estilos de alineación actuales. Calcular esta celda activa de forma declarativa fue crucial por varias razones. Primero, garantizó que supiéramos qué celda estaba activa cuando el componente se renderizó inicialmente.
- Dado que los valores de alineación pueden alterarse por diversos medios fuera del componente (como el uso de menús desplegables o el restablecimiento de etiquetas de propiedades), la celda activa podría quedar desincronizada con los valores de alineación reales. Al calcular esto de forma declarativa, pudimos asegurar que la celda activa siempre reflejara con precisión los valores de alineación, ya que estos valores sirven como la fuente definitiva de verdad.
/**
* Enum que representa los valores direccionales. Este enum se correlaciona con las direcciones de las teclas de flecha.
*/
enum Direction {
/* La dirección Arriba se correlaciona con ArrowUp */
Up = 'Up',
/* La dirección Abajo se correlaciona con ArrowDown */
Down = 'Down',
/* La dirección Izquierda se correlaciona con ArrowDown */
Left = 'Left',
/* La dirección Derecha se correlaciona con ArrowRight */
Right = 'Right',
}
const activeCell = () => getCellFromAlignmentValues()
/**
* Gestiona la navegación por teclado entre las celdas en el alignBox. Esta función se
* llama cuando el usuario presiona una tecla de flecha mientras el alignBox tiene el foco.
* @param {Direction} direction - La dirección hacia la que navegar. Se correlaciona con la tecla de flecha presionada.
* @returns {void}
*/
const handleKeyboardNavigation = (direction: Direction) => {
let nextCell: Cell = activeCell;
switch (direction) {
case Direction.Up:
nextCell = gridNavigation.moveUp(activeCell);
break;
case Direction.Down:
nextCell = gridNavigation.moveDown(activeCell);
break;
case Direction.Left:
nextCell = gridNavigation.moveLeft(activeCell);
break;
case Direction.Right:
nextCell = gridNavigation.moveRight(activeCell);
break;
}
// Obtener los valores de la celda a la que se navegó
const values = getCellAlignmentValues();
// Actualizar los estilos del elemento con los nuevos valores
onUpdate(values)
}
Una vez establecida la celda activa, implementamos una clase reutilizable llamada GridNavigation, que facilita la navegación entre celdas en el cuadro de alineación. Esta clase expone cuatro métodos nuevos: moveDown, moveUp, moveLeft y moveRight, que corresponden a la navegación en sus respectivas direcciones. Cuando se presiona una tecla de flecha, podemos determinar la siguiente celda a la que navegar, recuperar su valor y, posteriormente, actualizar los estilos en consecuencia según esta navegación.
¿Qué sigue para el cuadro de alineación?
En abril, lanzamos el cuadro de alineación con el objetivo de lograr un equilibrio armonioso entre la simplicidad para los recién llegados y la eficiencia para los usuarios experimentados.
Aunque el lanzamiento recibió una respuesta de sentimiento social positivo del 94%, siempre hay oportunidades de mejora, y esperamos seguir perfeccionando la experiencia del usuario en los próximos meses.
