Cajón
Descripción general
El cajón (anteriormente conocido como “vista rápida”) es un contenedor que muestra información adicional relacionada con la página principal. Flota sobre el área de contenido principal y permite a los usuarios acceder a contenido y acciones complementarios sin tener que ir a una nueva página.
Cuándo se debe utilizar
- Para mostrar información adicional, contexto o detalles sobre el contenido de la página principal.
- Para miniflujos que se relacionan con el contenido de la página principal.
- Cuando el contenido adicional requiere más espacio (por ejemplo, filtros, formularios y detalles de sección).
- Para las operaciones Crear, Leer, Actualizar y Eliminar (CRUD).
- Para obtener una vista previa del contenido sin tener que ir a una página nueva.
Cuándo no se debe utilizar
- Para realizar flujos que no estén relacionados con el contenido de la página principal. En cambio, utilice una nueva página.
- Si desea forzar a los usuarios a completar una acción antes de continuar. En cambio, utilice un modal.
Anatomía
El patrón de cajón consta de los siguientes elementos:
- Encabezado (obligatorio): Contiene un encabezado H2 y un ícono de cierre que permite al usuario salir de la vista.
- Cuerpo (obligatorio): El contenido principal se encuentra aquí. Puede ser de solo lectura, editable, pestañas con secciones, enlaces, filtros, formularios, etc. Es posible desplazarse por el cuerpo.
- Pie de página (opcional): Contiene botones de acción que activan el contenido del cajón. La posición del pie de página es fija.
Pautas generales
- Utilice un ícono, enlace o botón de la página principal para abrir el cajón. No use una fila de tabla completa.
- Coloque una superposición sobre su contenido principal si debe estar inactivo cuando el panel está abierto.
- El panel se puede cerrar de varias maneras:
- desde el botón Cerrar del encabezado;
- desde el botón Cerrar en el pie de página (en algunos casos);
- con la tecla ESC.
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.
Pestañas
Si el contenido de un cajón es complejo, colóquelo en pestañas para lograr una mejor estructura. Recomendamos usar un máximo de 4 pestañas. Utilice el modo explorar en profundidad si tiene más contenido para mostrar.
Enlaces y modo explorar en profundidad
Si su caso de uso requiere más de 4 pestañas en un cajón, le recomendamos utilizar enlaces. Después de hacer clic en un enlace, aparece una nueva subpágina (llamada modo explorar en profundidad) donde el usuario puede ver información más detallada con la opción de volver atrás (en el encabezado del cajón). Si su caso de uso requiere más de 3 niveles de subpáginas en el cajón, le recomendamos utilizar una página separada. Incluya siempre un botón de retroceso cuando esté en modo explorar en profundidad.
| Enlaces | Modo explorar en profundidad |
|---|---|
 |  |
Interacciones
Cambio de tamaño
Se puede cambiar el tamaño del cajón cuando un usuario arrastra su borde. Recomendamos establecer un ancho máximo igual al 50 % del ancho de la pantalla y un ancho mínimo igual al 30 % del ancho de la pantalla.
Capacidad de ser responsive
Para los dispositivos móviles, el cajón siempre ocupará todo el ancho de la pantalla.
Investigación que lo avala
La investigación para este patrón consistió en 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 los patrones de otras 7 bibliotecas de diseño. 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 relacionados
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.