Compartir a través de

Diseño de Viva Connections tarjetas personalizadas para el panel

Principios

Las tarjetas se usan para vincular recursos, mostrar información y potenciar la interacción directa con las aplicaciones.

Integrar en lugar de duplicar: aproveche las experiencias que ya estén disponibles en la intranet, como la asignación y la finalización de tareas, la programación de turnos, directivas de la empresa y mucho más.

Mantenerse en contexto: diseñe tarjetas para evitar que los usuarios cambien a experiencias diferentes. Por ejemplo, es ideal si puede mantener las interacciones dentro de la aplicación Viva Connections mediante la vista rápida (vínculo a la página de vista rápida aquí). La siguiente mejor opción es mantener las interacciones del usuario dentro del panel.

Dé vida a las tarjetas con datos relevantes y actualizables dinámicamente: el precio de las acciones de la empresa, las fechas de vencimiento de los proyectos o la formación, las actualizaciones de tareas y los días de vacaciones restantes son algunos ejemplos.

Imagen en movimiento que muestra el proceso de registrar un turno.

Anatomía de las tarjetas

Cada tarjeta de panel tiene los siguientes elementos:

Diagrama que muestra el contenedor de tarjetas y los elementos de tarjeta, donde se muestran las opciones de tiempo libre y de tiempo libre de pago disponibles.

  1. Contenedor: todo el contenido de la tarjeta se encuentra dentro del contenedor.

  2. Icono: representación visual única de esta tarjeta. Puede elegir el icono del conjunto predefinido o cargar un icono personalizado.

    Los iconos del conjunto predefinido son aptos para temas y se ajustarán automáticamente a temas claros y oscuros mediante el color principal del tema.

    Para los iconos personalizados, el tamaño máximo es de 24 px por 24 px. Los formatos recomendados son PNG o SVG. Los iconos SVG se escalan mejor en diferentes resoluciones de pantalla. Asegúrate de que el icono tenga un fondo transparente y que tenga un buen aspecto tanto en el tema claro como en el oscuro. Obtenga información sobre los temas de SharePoint.

  3. Título: normalmente el nombre de la aplicación. Todos los títulos deben llevar mayúscula inicial seguida de minúsculas.

  4. Encabezado: texto más destacado visualmente en la tarjeta. Se usa para comunicar información clave. El texto del encabezado puede ser estático o actualizarse dinámicamente. Todos los encabezados deben estar en mayúsculas y minúsculas.

Al agregar el título y el encabezados, asegúrese de que el texto no se trunca y puede caber en el ancho de la tarjeta tanto en el escritorio como en el móvil en ambos tamaños de tarjeta (a continuación se proporciona más información sobre los tamaños) y todos los idiomas usados. El texto truncado puede ocultar información clave que puede ser necesaria para que el usuario final complete la tarea. Para el título, en la mayoría de los casos, una longitud de 10-12 caracteres debería caber en el ancho de la tarjeta.

Diagrama en el que se muestra el tiempo de envío de las opciones de permiso y tiempo libre, siendo la opción recomendada la opción de tiempo libre.

Diseños y tamaños

Hay tres tipos de diseños de tarjetas disponibles para elegir.

  • Heading
  • Encabezado + imagen
  • Encabezado + descripción

Todos los diseños tienen dos tamaños: mediano o grande. El tamaño de la tarjeta determinará cómo se usará el espacio en el panel. Es útil empezar con tarjetas de tamaño medio. Use una tarjeta de gran tamaño si es necesario para mostrar información adicional que no se ajuste al tamaño mediano.

Encabezado

Se usa cuando el encabezado es suficiente para comunicar la información clave de la tarjeta.

Diagrama de la tarea Tiempo de libre y muestra la relación base entre las dos tareas.

Encabezado y descripción

Se usa cuando la descripción puede agregar valor informativo al título y puede facilitar la comprensión del propósito de la tarjeta. Evite repetir la información ya comunicada en el encabezado.

Diagrama de las dos tareas de tiempo libre y que muestra el encabezado y la descripción para las tareas medianas y grandes.

Encabezado e imagen

Las imágenes atraen la atención del lector, por lo que debe usar las imágenes cuidadosamente para crear reconocimiento en una aplicación o un sitio web que ya se conoce, o para aumentar el protagonismo visual general de la tarjeta en el panel. La imagen debe conectarse significativamente al título y/o encabezado.

Captura de pantalla de los iconos medianos y grandes que muestra cómo aparece una imagen para el diseño de tarjeta mediana frente a cómo aparece para el diseño de tarjeta grande.

Interacción

Hay tres formas posibles de interactuar con una tarjeta:

  • Tarjeta (se puede hacer clic en toda la tarjeta)
  • Botón principal
  • Botón secundario

Captura de pantalla de las interacciones del botón principal y botón secundario de la tarjeta.

Cada una de estas interacciones se puede personalizar. Úselas para realizar una acción instantánea, enviar una solicitud al servidor, abrir una vista rápida (agregar vínculo), vincular a una aplicación de Teams, abrir un sitio web externo, etc.

Estos son los procedimientos recomendados para diseñar interacciones de tarjeta:

  • La tarjeta general siempre debe ser interactiva.
  • Si se usa el botón principal, debido a su prominencia visual, debe ser la acción más importante en la tarjeta.
  • El botón secundario puede usarse por sí mismo o junto con el botón principal si se necesitan dos acciones (solo disponibles en diseños de tarjeta de gran tamaño). Si se usa con el botón principal, asegúrese de que está vinculado a la segunda acción más importante de la tarjeta. En ese caso, la propia tarjeta se convertirá en la acción menos importante.
  • Para las etiquetas de botón, use texto conciso y claro que refleje con precisión el comportamiento del botón. Por ejemplo, "Ver tareas" puede ser mejor que solo "Ver".
  • Asegúrese de que cada interacción de la tarjeta sea única.
  • Diseñe tarjetas para evitar que los usuarios cambien a experiencias diferentes. Por ejemplo, es ideal si puede mantener las interacciones dentro de la aplicación Viva Connections mediante la vista rápida. La siguiente mejor opción es mantener las interacciones del usuario dentro del panel.

Nota:

Debido a la falta de espacio:

  • El diseño Encabezado + imagen no tiene botones con tarjetas de tamaño M.
  • Los diseños Encabezado + descripción solo pueden tener un botón con tarjetas de tamaño M.

Ejemplos

Estas son algunas tarjetas de ejemplo para cómo se pueden usar estos diseños.

Captura de pantalla que muestra varias tarjetas de ejemplo, incluidas tarjetas para turnos, tareas, COVID 19 y tutoriales.

Plataformas y modos

Las tarjetas de panel se admiten en iOS, Android y Web. Sin embargo, hay ligeras diferencias en el estilo entre las distintas plataformas: fuentes (Segoe UI para escritorio, Roboto para Android, SF Display Pro para iOS), los colores, los tamaños y el espaciado se ajustan ligeramente para que se adapten mejor a la plataforma respectiva y que las tarjetas tengan un aspecto coherente con la experiencia general de esa plataforma.

Captura de pantalla que muestra cómo aparece la misma tarjeta en las plataformas web, i O S y Android.

Las tarjetas de panel también admiten el tema de modo claro y oscuro. Asegúrese de que los colores que usa funcionen para ambos modos (el texto debe ser legible y los botones e iconos deben ser claramente reconocibles en el fondo). Para cumplir los criterios de accesibilidad, el texto debe tener una relación de color de 4,5:1 con respecto al fondo del botón, los componentes que no sean de texto, como el icono, deben tener una relación de color de 3:1 con respecto al fondo. Use esta herramienta para comprobar el contraste de color.

Captura de pantalla que muestra cómo aparece la misma tarjeta en modo claro frente a cómo aparece en modo oscuro.

Mostrar la aplicación en el cuadro de herramientas

Las nuevas tarjetas se agregan a ese panel mediante el siguiente cuadro de herramientas.

Captura de pantalla de la pantalla Relecloud en la que se muestra el panel, que muestra varias herramientas.

Para mostrar la aplicación personalizada en el selector de paneles, necesitará lo siguiente:

Captura de pantalla del panel con un foco en el icono, el título y el texto descriptivo de cada herramienta del panel.

1. Icono: representación visual única de esta aplicación. El tamaño máximo del icono personalizado es de 24 x 24 px y debe ser preferiblemente en formato PNG o SVG. Los iconos SVG se escalan mejor en diferentes resoluciones de pantalla. Es preferible usar un icono monocromático, pero puede usar iconos de color si quiere representar tu marca única con los iconos. En cualquier caso, asegúrese de que el icono tenga un fondo transparente y que tenga un buen aspecto tanto en el tema claro como en el oscuro. Obtenga información sobre los temas de SharePoint. El mismo icono se usará para la tarjeta del panel (consulte más arriba).

2. Título: asegúrese de que el título de la aplicación es conciso y no está truncado. La longitud recomendada es de 10 a 12 caracteres. Se debe usar el mismo título para la tarjeta de panel (ver arriba) y la vista rápida (página de vista rápida de vínculo) (si se usa). Si tienes varias aplicaciones, se recomienda que cada aplicación tenga un título único. Todos los títulos deben llevar mayúscula inicial seguida de minúsculas.

3. Texto descriptivo: una descripción clara y concisa explica el propósito de la tarjeta y proporciona información sobre cómo usarla. Debe aparecer en la información sobre herramientas al mantener el mouse (en la Web). Asegúrese de que el texto se ajusta correctamente y no es demasiado ancho o demasiado estrecho en la información sobre herramientas. La longitud de línea óptima se considera de 50 a 60 caracteres por línea, incluidos los espacios.

Definición de la configuración de la tarjeta

Cuando se hace clic en la aplicación, la tarjeta se muestra en el panel. La tarjeta se puede editar mediante el panel de configuración de la derecha.

Captura de pantalla de la aplicación Rerecloud que muestra un panel de edición que permite al usuario editar el título, el encabezado y la descripción de una tarjeta.

Estos son algunos procedimientos recomendados para ofrecer la configuración de personalización:

  • Incluya texto descriptivo que explique el propósito de la tarjeta y proporcione información sobre cómo usarla. Asegúrese de que este es el mismo texto que la información sobre herramientas o que lo complementa.
  • A menos que el texto de la tarjeta se actualice dinámicamente, permita a los usuarios editar el texto de la tarjeta para adaptarlo a sus necesidades. Considere la posibilidad de proporcionar texto predeterminado escrito previamente en los campos que el usuario puede invalidar y editar según sea necesario.
  • Si hay varias tarjetas disponibles en la misma organización, asegúrese de que las etiquetas y las interacciones del panel de configuración sean coherentes en todas las tarjetas.
  • Si hay varias configuraciones y la tarjeta es compleja en el diseño, se recomienda agregar una vínculo de "Más información" donde los usuarios pueden encontrar procedimientos recomendados para agregar la tarjeta a su panel, por ejemplo, tamaño recomendado, tarjetas de ejemplo, etc.