Arrastrar y soltar
Descripción general
Arrastrar y soltar es un patrón de interacción de la interfaz de usuario (IU) que permite a los usuarios seleccionar y manipular objetos haciendo clic en ellos y arrastrándolos de una ubicación a otra dentro de una interfaz digital. Proporciona una forma visual e intuitiva para que los usuarios muevan, reorganicen o transfieran elementos, como elementos de lista, tarjetas, mosaicos, filas y columnas en una tabla de datos, simplemente arrastrándolos con un mouse o una entrada táctil. La función de arrastrar y soltar mejora el control y la eficiencia del usuario, ya que reduce la dependencia de menús complejos o acciones basadas en comandos.
Cuándo se debe utilizar
- El público objetivo está familiarizado con el concepto de interacciones que implican arrastrar y soltar, y se corresponde con su modelo mental.
- El usuario debe manipular o reorganizar objetos dentro de un contexto espacial, como la organización de archivos en una carpeta o de elementos en un lienzo.
- Los objetos que se manipulan tienen una representación visual clara y se pueden arrastrar y soltar fácilmente sin ambigüedad.
- La interacción de arrastrar y soltar mejora la experiencia general del usuario, por la vuelve más intuitiva, eficiente o agradable.
- Se debe lograr una ubicación o personalización precisas, como en el diseño de composición y disposición, la organización de elementos o la creación de flujos de trabajo personalizados.
- Cuando la interacción de arrastrar y soltar mejora el control y la eficiencia, ya que reduce la dependencia de menús complejos o acciones basadas en comandos.
Cuándo no se debe utilizar
- El público objetivo no está familiarizado con el concepto de interacciones de arrastrar y soltar, y puede resultarle confuso o difícil de usar.
- La interacción de arrastrar y soltar aporta complejidad innecesaria o ralentiza el flujo general del usuario, lo que resta usabilidad a la interfaz.
- Hay objetos o elementos limitados para manipular y los métodos de interacción alternativos, como casillas de verificación o menús desplegables, pueden proporcionar una solución más simple y eficiente.
- Los objetos que se manipulan son demasiado pequeños o están muy cerca, lo que dificulta a los usuarios seleccionarlos y arrastrarlos con precisión.
- El patrón de arrastrar y soltar entra en conflicto con las pautas o los requisitos de accesibilidad, ya que inaccesible para los usuarios con ciertas discapacidades o impedimentos.
- El usuario debe desplazarse y arrastrar al mismo tiempo.
Anatomía
Arrastrar y soltar es un patrón contenedor que se puede implementar junto con muchos otros componentes, como tarjetas, listas, tablas de datos y carga de archivos.
- Contenedor de origen de arrastrar y soltar (tarjeta)
- Contenedor de destino de arrastrar y soltar (tarjeta)
- Indicador arrastrable (ícono)
- Elemento arrastrable
- Indicador arrastrable (cursor)
- Contenedor de origen (desde donde se extrae el elemento arrastrable)
- Contenedor de destino (donde se va a colocar el elemento arrastrable)
Apariencia
Ícono
- El indicador de arrastre es un par de tres puntos verticales (predeterminado). Se puede colocar a la izquierda o a la derecha, según el caso de uso.
- Nota: Si el contenedor del elemento arrastrable tiene una acción secundaria, se recomienda que el ícono de arrastre aparezca a la izquierda del contenedor.
Cursor
- Izquierda: El cursor Mickey Mouse de Mac aparece al pasar el cursor e indica que la función de arrastrar y soltar está disponible.
- Centro: Al hacer clic y mantener presionado, el cursor de arrastrar y soltar de Mac cambia a un guante cerrado para indicar que se ha sujetado el elemento.
- Derecha: El cursor de arrastrar y soltar de Windows aparece al pasar el cursor por encima, pero no cambia para indicar que se ha sujetado el elemento; en cambio, permanece como una barra transversal durante toda la interacción.
- Nota: Estos cambios de cursor no se producen cuando se mueve ventanas en Mac o Windows; solo se aplica a objetos dentro de aplicaciones o sitios web.
Área de agarre
El área de agarre se puede definir de dos maneras:
- Contenedor de elementos (predeterminado).
- Solo indicador de ícono arrastrable: esto se aplica cuando el elemento arrastrable tiene un evento de clic asociado con su contenido.
Retroalimentación de elementos sujetos
Una vez que el usuario haya “sujetado” el objeto que arrastrará y soltará, se necesitan dos tipos de retroalimentación:
- retroalimentación que indique que el objeto se ha “sujetado”;
- retroalimentación que permita una vista previa de lo que sucederá cuando el usuario “suelte” el objeto.
La retroalimentación que indica que el objeto se ha sujetado generalmente hace que el objeto se vea diferente a otros objetos similares en la pantalla. Puede incluir lo siguiente:
- Un contorno o un color contrastante.
- Elevación: una presentación visual que hace que aparezca “por encima” de otros elementos, como una sombra paralela.
- Desplazamiento visual del objeto, como aplicarle sangría o inclinarlo.
Pautas generales
- Asegúrese de que los elementos que se pueden arrastrar sean visualmente distintivos y fáciles de identificar.
- Proporcione un punto de partida evidente para iniciar la acción de arrastre, como un puño o un área de arrastre designada.
- Permita interacciones de hacer clic y arrastrar, además de tocar y arrastrar para mayor versatilidad.
- Utilice retroalimentación visual (como inclinar o resaltar el objeto con el que se interactúa) para proporcionar una indicación clara de la acción de arrastre.
- Active la selección múltiple y el arrastre de varios elementos cuando tenga sentido dentro del contexto.
- Proporcione un área de destino para soltar que ofrezca indicaciones visuales o se resalte cuando un elemento arrastrable esté sobre una ubicación válida.
- Proporcione retroalimentación visual adecuada después de una acción de soltar correcta para indicar que finalizó.
- Tenga en cuenta los casos en que el elemento se suelte por accidente o las acciones no deseadas; para ello, permita a los usuarios deshacer la operación de arrastrar y soltar.
- Optimice el rendimiento para garantizar interacciones fluidas y responsive de arrastrar y soltar, especialmente cuando se trata de elementos grandes o complejos.
- Pruebe la interacción de arrastrar y soltar con usuarios representativos para identificar cualquier problema de usabilidad e itere el diseño en función de sus comentarios.
Contenido
Pautas generales de redacción
- En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
- Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
- Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
- Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
- Las palabras y las oraciones deben ser breves.
Accesibilidad
La accesibilidad del teclado es un aspecto importante de la función de arrastrar y soltar. Los usuarios deben poder acceder a él y utilizarlo de manera efectiva sin depender únicamente de un mouse o pantalla táctil. Para garantizar esto, incluya mensajes del lector de pantalla para todos los patrones, que proporcionen una guía clara sobre cómo realizar las acciones de arrastrar y soltar con las teclas del teclado.
- Para seleccionar: El usuario presiona la tecla Tab para desplazarse por la lista/tarjeta y seleccionar el elemento que se puede arrastrar apropiado para moverlo a la tarjeta/lista de destino.
- Para tomar: El usuario presiona la barra espaciadora sobre un elemento arrastrable para ingresar al modo de arrastrar y soltar.
- Para mover: El usuario utiliza la tecla de flecha derecha para soltar o mover el elemento arrastrable hasta la tarjeta/lista de destino y utiliza las teclas de flecha hacia arriba y abajo para mover la posición del elemento arrastrado dentro de la tarjeta/lista de destino.
- Para soltar: El usuario presiona la barra espaciadora sobre un elemento arrastrable para salir del modo de arrastrar y soltar.
- Para anular la selección: El usuario pulsa la tecla Tab para anular la selección del elemento que se puede arrastrar en la tarjeta/lista de destino.
Nota: Aplique las mismas acciones de arrastrar y soltar con las teclas del teclado cuando el área de agarre esté limitada a solo el ícono del indicador de arrastre (los puntos verticales), en lugar de todo el elemento que se puede arrastrar.
Interacciones
En un patrón de arrastrar y soltar, los diferentes estados desempeñan un papel crucial a la hora de guiar a los usuarios y proporcionar retroalimentación a lo largo de la interacción.
Tematización
De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.
Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.
Más información sobre la tematización con tokens de diseño
Investigación que lo avala
Se llevó a cabo un análisis competitivo y un estudio exhaustivo sobre las prácticas recomendadas de patrones de arrastrar y soltar durante la fase de descubrimiento de este proyecto de diseño.
Componentes relacionados
- Acordeón
- Tarjetas
- Tabla de datos
- Vistas de datos
- Cargador de archivos
- Los componentes personalizados también estarán relacionados en función de las necesidades específicas del proyecto
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.