Configuración

Descripción general

El patrón de configuración ayuda a los usuarios a cambiar la configuración en las aplicaciones web y ejecutar acciones relacionadas con las preferencias de su cuenta.

Cuándo se debe utilizar

Cuando los usuarios necesitan cambiar sus preferencias de cuenta (por ejemplo, idioma, credenciales y otros).

Cuándo no se debe utilizar

• Cuando los permisos de la aplicación o del usuario no permitan que el usuario cambie la configuración o las preferencias de la aplicación.
• Para mostrar parámetros de configuración que el usuario no puede cambiar.

Anatomía

1. Encabezado de la tarjeta de configuración: Muestra un encabezado h2 y un botón de acción.
2. Cuerpo de la tarjeta de configuración: Contiene los detalles de configuración relacionados con el contenido de la tarjeta.
3. Botón Editar: Habilita la edición del contenido de la tarjeta cambiando del modo de visualización al modo de edición.

Pautas generales

• Coloque los rótulos en la parte superior de los campos de la tarjeta de configuración para una mejor legibilidad.
• Agrupe las entradas horizontalmente si tiene sentido agruparlas (por ejemplo, dirección y código postal).
• El título de la tarjeta de configuración debe seguir el orden jerárquico de los encabezados. Si el nivel anterior es h1, use h2 para el título de la tarjeta.
• No abarrote la página con varias acciones principales, ya que elimina el foco de las acciones que tienen mayor prioridad (por ejemplo, “guardar” en el modo de edición).

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.

Modo de visualización y edición

Las tarjetas de configuración pueden estar en modo de visualización (izquierda) o en modo de edición (derecha), según la tarea del usuario en cuestión. En el modo de visualización, el usuario solo puede ver el contenido. Para interactuar con el contenido, el usuario debe estar en modo de edición.

Modo de visualización	Modo de edición

Ancho de la tarjeta

Para optimizar la cantidad de información, organice de dos o tres tarjetas en una fila utilizando la cuadrícula de contenido. Ordene las tarjetas para permitir un flujo de trabajo eficiente.

No haga automáticamente que todas las tarjetas tengan el ancho máximo. Muy poco contenido para el tamaño de la tarjeta desperdicia espacio y provoca que los botones de acción queden lejos del contenido.

Ancho de entrada

Intente dimensionar las entradas de acuerdo con la longitud aproximada de la información que pueden contener razonablemente. Proporciona una pista útil a los usuarios, se logra un uso eficiente del espacio y coloca objetivos como flechas de menú desplegables al alcance de la mano. Redondear las longitudes a la mitad o al tercio más cercano puede aportar uniformidad y ayudar a agrupar campos relacionados.

No extienda automáticamente las entradas para que ocupen todo el espacio. Desperdicia espacio y al usuario le resulta más difícil analizar la información.

Capacidad de ser responsive

El patrón de configuración es responsive tanto para el modo de visualización (izquierda) como para el modo de edición (derecha).

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

Componentes relacionados

• Entrada de texto
• Botón
• Otras entradas según sea necesario (por ejemplo, menú desplegable y fecha)

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)