Línea de tiempo
Descripción general
La línea de tiempo es un patrón que le permite mostrar los eventos en orden cronológico. El patrón de línea de tiempo es útil cuando necesita mostrar muchas entradas estáticas o entradas generadas por el sistema o un usuario.
Cuándo usar una línea de tiempo
Prevé una larga lista de eventos relacionados con el sistema o el usuario (por ejemplo, historial de objetos).
Cuándo no usar una línea de tiempo
Tiene entradas que no se pueden ordenar cronológicamente.
Anatomía
El patrón de línea de tiempo consta de los siguientes elementos:
- Nodo de inicio: Muestra un ícono que informa al usuario de que la línea de tiempo comienza aquí.
- Detalles del evento: Informa al usuario sobre los detalles de un evento. Puede contener texto, enlaces, botones de acción e íconos.
- Nodo: Indica un evento en la línea de tiempo.
- Eje: Línea en la que las entradas se ordenan cronológicamente. La distancia no corresponde al tiempo entre cada ocurrencia.
- Nodo final: Muestra un ícono que informa al usuario de que la línea de tiempo termina aquí.
Pautas generales
- Dentro del nodo de inicio, puede elegir cualquier ícono de la biblioteca de Jutro. Recomendamos usar los íconos de reloj, calendario, usuario o indicador.
- Dentro del nodo final, puede elegir cualquier ícono de la biblioteca de Jutro. Recomendamos usar íconos indicador o acción correcta.
- Para la línea de tiempo horizontal, coloque la entrada más reciente a la derecha. Para la línea de tiempo vertical, coloque la entrada más reciente en la parte superior.
- Para la línea de tiempo horizontal, el ancho máximo es de 400 px y la altura debe ser la misma que para todas las descripciones emergentes.
- Para la línea de tiempo vertical, la altura máxima es de 400 px y el ancho debe ser el mismo que para todas las descripciones emergentes.
- Las descripciones emergentes nunca deben superponerse entre sí. La distancia mínima permitida entre dos descripciones emergentes es de 16 px.
- Las líneas entre las entradas pueden tener diferentes tamaños, dependiendo del tamaño del contenido dentro de la descripción emergente.
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
Interacción con el lector de pantalla: Si la línea de tiempo no tiene enlaces ni botones de acción, no puede recibir el foco, pero se puede acceder a ella mediante las flechas del teclado.
Interacciones
Las líneas de tiempo son solo de visualización. Los usuarios pueden llevar el foco o desplazarse con el tabulador al contenido interior si es interactivo. Por ejemplo, si la línea de tiempo contiene botones, solo recibirán el foco los botones.
Capacidad de ser responsive
Para dispositivos móviles, utilice solo líneas de tiempo verticales. El siguiente ejemplo es una línea de tiempo vertical:
Solo use líneas de tiempo horizontales si está seguro de que los elementos no se desbordarán del ancho del contenedor. El desbordamiento da como resultado el desplazamiento horizontal. Si la línea de tiempo es generada por el usuario o el sistema, evite la línea de tiempo horizontal.
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 las líneas de tiempo de 4 sistemas 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.
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.