Casilla de verificación y botón de selección con imagen

Descripción general

Los componentes casilla de verificación y botón de selección con imagen se utilizan para seleccionar opciones visuales en una interfaz. Estos componentes son similares a las casillas de verificación y los botones de selección tradicionales. Sin embargo, tienen la característica visual adicional de mostrar una imagen junto con el rótulo de texto.

Cuándo se debe utilizar

• Cuando la representación visual es importante para transmitir las opciones de manera efectiva. Por ejemplo, en una aplicación en la que los usuarios eligen su avatar, cada opción podría estar representada por una imagen en miniatura de un avatar junto al nombre. Esto no solo hace que las opciones sean más atractivas visualmente, sino que también ayuda a los usuarios a identificar rápidamente su opción preferida.
• Para seleccionar varias opciones simultáneamente, utilice la casilla de verificación con imagen.
• Para seleccionar solo una opción de un grupo a la vez, use el botón de selección con imagen.

Anatomía

Los componentes casilla de verificación y botón de selección con imagen constan de los siguientes elementos:

1. Imagen: Una imagen pequeña, como un ícono o una miniatura, que ofrece una representación visual de cada opción.
2. Rótulo: Establece el contexto para los usuarios e indica lo que representa la opción.
3. Área de contenido: Proporciona espacio adicional de contenido para elementos como el cuerpo del texto.
4. Control de selección: Los usuarios pueden hacer clic en la casilla de verificación para seleccionar o anular la selección de la opción. En el caso del botón de selección, los usuarios seleccionan haciendo clic en el botón o en la imagen asociada a él.

Tanto para la casilla de verificación con imagen como para el botón de selección con imagen, puede activar y desactivar la imagen, el rótulo y el contenido.

Ejemplo de un patrón de opciones de botón de selección en Guidewire Cloud Platform

Pautas generales

• Elija imágenes o íconos simples, claros y relevantes que sean fácilmente reconocibles en el contexto de las opciones. Las imágenes o los íconos deben ayudar a los usuarios a comprender las opciones con solo verlos.
• Sea estratégico y reflexivo sobre cómo incorpora las imágenes. Demasiadas pueden ralentizar el procesamiento cognitivo y perjudicar la experiencia del usuario.
• Mantenga la coherencia en los tamaños de imagen, las relaciones de aspecto y los estilos en todas las opciones. La coherencia favorece una experiencia visual coherente y facilita a los usuarios leer y comparar opciones.
• Asegúrese de que las imágenes sean accesibles para todos los usuarios proporcionando texto alternativo y manteniendo un contraste de color suficiente entre las imágenes y el fondo. El texto alternativo debe transmitir la misma información que la imagen.
• Deje suficiente espacio alrededor de la imagen y el texto para evitar aglomeraciones. Esto garantiza que la interacción sea cómoda, especialmente en pantallas más pequeñas o dispositivos táctiles.
• Compruebe la usabilidad con diversos usuarios para asegurarse de que las imágenes mejoren la comprensión y no sean fuente de confusión ni carga cognitiva.
• Incluya rótulos de texto claros y descriptivos junto a las imágenes para garantizar su comprensión.

Interacciones

• Área en la que se puede hacer clic: Abarca tanto la imagen como el rótulo de texto.
• Navegación por teclado: Permite a los usuarios navegar entre las opciones y seleccionarlas con el teclado.
• Compatibilidad táctil: Optimice el componente para dispositivos táctiles y asegúrese de que responda con precisión a los gestos táctiles, como tocar o deslizar el dedo. Asegúrese de que el área en la que se puede hacer clic tenga el tamaño necesario para las interacciones táctiles.
• Selección única: Para los botones de selección con imágenes, fuerce la elección de una sola opción dentro de un grupo de opciones. Cuando el usuario seleccione una opción, se anula cualquier otra seleccionada previamente dentro del mismo grupo.
• Manejo de errores: Si el usuario intenta seleccionar una opción pero se encuentra con un error, proporcione un mensaje claro y orientación sobre cómo resolver el problema.

Estados

La casilla de verificación y el botón de selección con componentes de imagen tienen los siguientes estados interactivos:

1. Predeterminado: Indica al usuario que el elemento está habilitado para la interacción.
2. Con cursor encima: Indica que el usuario ha colocado un cursor sobre el elemento. Al pasar el ratón por encima, el ancho y alto del contenedor se expande un 10 %.
3. Seleccionado: Indica que el usuario ha realizado una selección. Cuando la tarjeta está seleccionada, presenta un nuevo color y se delinea con un borde.

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

• Texto alternativo para imágenes: Proporcione texto alternativo descriptivo para las imágenes utilizadas en los componentes. El texto alternativo debe transmitir la misma información que la imagen, para ayudar a las personas con discapacidad visual a comprender el contenido.
• Accesibilidad con el teclado: Asegúrese de que los usuarios puedan navegar e interactuar con los componentes utilizando solo el teclado. Esto incluye poder mover el foco entre las opciones, seleccionar opciones y borrar selecciones si fuera necesario.
• Estados en foco: Implemente estados en foco claros y visibles para que los componentes indiquen a los usuarios cuándo se navega hacia ellos o se los selecciona mediante el teclado. Los estados en foco deben ser distintivos y fáciles de identificar.
• Contraste de color: Mantenga suficiente contraste de color entre las imágenes, los rótulos de texto y el fondo para garantizar la legibilidad de las personas con baja visión o deficiencias en la visión del color.
• Compatibilidad con lectores de pantalla: Asegúrese de que los lectores de pantalla puedan interpretar y anunciar correctamente el contenido y la funcionalidad de los componentes. Esto incluye proporcionar el marcado y el rotulado adecuados para los usuarios de lectores de pantalla.
• HTML semántico: Utilice elementos HTML semánticos, como input para casillas de verificación y botones de selección, y label para rótulos de texto asociados. Esto ayuda a las tecnologías de asistencia a comprender el propósito y las relaciones de los elementos.
• Manejo de errores: Proporcione mensajes de error claros y descriptivos si los usuarios se encuentran con errores al interactuar con los componentes. Asegúrese de que los mensajes de error sean anunciados por los lectores de pantalla y sean fácilmente perceptibles.
• Capacidad de ser responsive ante cambios de tamaño: Diseñe los componentes para que se adapten a los cambios en el tamaño del texto o el nivel de zoom. Asegúrese de que la composición y disposición y el espaciado se adapten a tamaños de texto más grandes sin superponerse ni hacer que el contenido se vuelva inaccesible.

Capacidad de ser responsive

Los componentes casilla de verificación y botón de selección con imagen están diseñados para funcionar en varios dispositivos y tamaños de pantalla. Esto incluye lo siguiente:

• Escritorio: En pantallas más grandes, como las computadoras de escritorio, los componentes se pueden mostrar en una composición y disposición de cuadrícula con varias opciones visibles a la vez. Las imágenes y los rótulos de texto pueden ser más grandes para aprovechar el espacio disponible, y los efectos de cursor encima o las descripciones emergentes pueden proporcionar información adicional.
• Tablet: En las tablets, los componentes pueden ajustarse a una composición y disposición más compacta para optimizar el espacio de la pantalla. Se puede cambiar de tamaño de las imágenes y los rótulos de texto para adaptarlos al tamaño de pantalla más pequeño, y se implementan interacciones táctiles para garantizar la facilidad de uso.
• Móvil: En los dispositivos móviles, los componentes normalmente se apilan verticalmente para adaptarlos al ancho de pantalla más estrecho. Se puede cambiar de tamaño de las imágenes y los rótulos de texto aún más para garantizar la legibilidad, y se optimizan las interacciones táctiles para facilitar su uso en dispositivos con pantalla táctil. También se puede separar más los elementos para evitar selecciones accidentales.

Ejemplo de cómo se comporta el componente casilla de verificación con imagen en computadoras de escritorio y dispositivos móviles

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.

A la hora de definir el tema de la casilla de verificación o el botón de selección con una imagen, tenga en cuenta lo siguiente:

• Tratamiento de la imagen: Los temas pueden determinar el tratamiento de las imágenes dentro de los componentes. Por ejemplo, en algunos temas se pueden preferir imágenes en escala de grises, mientras que en otros se pueden permitir imágenes a todo color. El borde redondeado o la forma de las imágenes también pueden variar según el tema.
• Accesibilidad: Los temas deben garantizar que los componentes mantengan los estándares de accesibilidad. Esto incluye consideraciones en cuanto al contraste de color, los estados en foco y la compatibilidad con lectores de pantalla, que deben ser coherentes en todos los temas.
• Opciones de personalización: Los componentes con determinado tema pueden ofrecer opciones de personalización para que los usuarios o desarrolladores adapten la apariencia a sus preferencias. Esto podría incluir opciones para cambiar los colores, las fuentes u otros aspectos visuales de los componentes dentro de las restricciones del tema.
• Coherencia entre los componentes: Los componentes con determinado tema deben mantener la coherencia con otros elementos de la interfaz de usuario dentro del mismo tema. Esto garantiza una apariencia uniforme en toda la aplicación o el sitio web.
• Diseño responsive: Los temas pueden incluir aspectos de diseño responsive para garantizar que los componentes se adapten adecuadamente a diferentes tamaños de pantalla y factores de forma, y, al mismo tiempo, mantengan la estética general del tema.

Más información sobre la tematización con tokens de diseño

Ejemplo de cómo se ven las tarjetas de casilla de verificación con imagen en una aplicación de plantilla temática

Investigación que lo avala

Para la primera versión de este patrón, los diseñadores de UX consultaron con el equipo más grande de Guidewire UX. Recopilaron ejemplos de cómo se utiliza este componente en los productos de Guidewire y analizaron casos de uso.

También realizaron un análisis competitivo. El análisis competitivo es una técnica de investigación que se utiliza para comparar y entender en qué están trabajando otros en el mismo campo. Los diseñadores de UX analizaron cómo otros sistemas de diseño han implementado este componente o uno similar, y buscaron fortalezas y debilidades relativas, tendencias y diferencias. Los diseñadores utilizaron esa información, encontraron puntos en común y crearon un patrón basado en esas prácticas frecuentes.

Componentes y patrones relacionados

Componentes

• Tarjetas
• Casilla de verificación
• Grupo de selección

Patrones

• Chips

Recursos

Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.

Biblioteca de patrones de Jutro (19.6 MB)