Saltar al contenido principal

Navegación lateral

Descripción general​

El patrón de navegación lateral se utiliza en muchas áreas diferentes en todos los productos Guidewire y amplía el uso del panel izquierdo más allá de la navegación.

Los elementos que aparecen en el panel izquierdo varían según la aplicación y el caso de uso. A continuación, se incluyen ejemplos de diferentes casos de uso:

  • En la plantilla de cotización y compra de agentes, el usuario navega a través del flujo mediante un indicador de progreso.
  • En Guidewire PolicyCenter™, el usuario navega entre carpetas mediante una vista de árbol en el panel izquierdo.
  • En Guidewire Workflow Designer™, el usuario arrastra y suelta objetos de flujo desde la paleta hasta el lienzo.

Cuándo se debe utilizar​

Flujos de cotización y compra y los casos en que se necesita el panel izquierdo para otras funciones más allá de la navegación.

Cuándo no se debe utilizar​

Planos de planta que no tengan panel izquierdo.

Anatomía​

Ejemplo que ilustra los diferentes tipos de elementos que podrían aparecer en el panel izquierdo. Ejemplo del patrón de navegación lateral que aparece en el flujo de compra y cotización del agente.

  1. Panel izquierdo: Panel en el lado izquierdo de la pantalla con contenido persistente.
  2. Indicador de progreso: Ejemplo de los diferentes tipos de elementos que podrían aparecer en el panel. En este caso, el agente utiliza el indicador de progreso para navegar hacia adelante y hacia atrás en el flujo, realizando cambios en la cotización según sea necesario.
  3. Pie de página: Pie de página simplificado que muestra la información de la aseguradora, además de información de derechos de autor, dirección y algunos enlaces opcionales.
  4. Información de la cotización: Información persistente acerca de la cotización, incluida la línea de negocio y el número de cotización.

Pautas generales​

  • El patrón de navegación lateral admite varios menús de navegación y otros componentes.
  • Los usuarios pueden agregar y eliminar elementos según sus necesidades.
  • La disposición de los componentes o elementos depende de los requisitos del diseñador.

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.

Capacidad de ser responsive​

Ejemplo que ilustra el patrón de navegación lateral en un dispositivo móvil

El patrón de navegación lateral se contrae para las pantallas móviles. La opción para verlo está disponible a través del menú de opciones en el encabezado del dispositivo móvil.

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​

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 lo que han creado las diferentes aseguradoras, además de comparar otras industrias que utilizan patrones similares en sus diseños, y revisaron las fortalezas y debilidades de cada versión. Por ejemplo, ¿qué nivel de adaptabilidad tiene en dispositivos móviles? ¿Qué podemos mejorar en estos diseños? ¿Qué posibilidad hay de que este patrón se reutilice en diferentes productos? Los diseñadores utilizaron esa información, encontraron puntos en común y crearon un patrón basado en esas prácticas frecuentes.

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)