Conception de cartes personnalisées Connections pour votre tableau de bord
Principes
Les cartes sont utilisées pour relier les ressources, fournir des informations et permettre une interaction directe avec les applications.
Intégrez plutôt que dupliquer : Tirez parti des expériences déjà disponibles sur votre intranet, telles que les affectations et l’achèvement des tâches, les planifications des équipes, les stratégies d’entreprise, etc.
Restez dans le contexte : Concevez des cartes pour éviter que les utilisateurs se déplacent vers différentes expériences. Par exemple, l'idéal est de pouvoir conserver les interactions dans l'application Viva Connections à l'aide de l’affichage rapide (lien vers la page d’affichage rapide ici). Ensuite, il est préférable de conserver les interactions utilisateur dans le tableau de bord.
Actualisez les cartes avec des données pertinentes et actualisables dynamiquement : Le cours des actions de l’entreprise, les dates d’échéance pour les formations ou les projets, les mises à jour des affectations de tâches et les jours de congé restants sont quelques exemples.
Anatomie des cartes
Chaque carte de tableau de bord possède les éléments suivants :
Conteneur: tout le contenu de la carte se trouve dans le conteneur.
Icône : représentation visuelle unique de cette carte. Vous pouvez choisir l'icône dans l’ensemble prédéfini ou télécharger une icône personnalisée.
Les icônes de l’ensemble prédéfini sont adaptées au thème et s’ajustent automatiquement aux thèmes clair et sombre à l’aide de la couleur principale du thème.
Pour les icônes personnalisées, la taille maximale est de 24 px par 24 px. Les formats recommandés sont PNG ou SVG. Les icônes SVG s'adaptent mieux aux différentes résolutions d'écran. Veillez à ce que l'icône ait un arrière-plan transparent et qu'elle soit agréable à regarder, que le thème soit clair ou foncé. En savoir plus sur les thèmes SharePoint.
Titre principal : Généralement le nom de l’application. Chaque mot d’un titre principal doit commencer par une majuscule.
Titre: texte le plus visible de la carte. Utilisé pour communiquer des informations clés. Le texte de titre peut être statique ou mis à jour dynamiquement. Chaque mot d’un titre doit commencer par une majuscule.
Lorsque vous ajoutez le titre principal et le titre, assurez-vous que le texte n'est pas tronqué et qu'il peut tenir dans la largeur de la carte, tant sur ordinateur de bureau que sur téléphone mobile, dans les deux tailles de carte (vous trouverez plus d'informations sur les tailles ci-dessous) et dans toutes les langues utilisées. Le texte tronqué peut masquer les informations clés qui peuvent être nécessaires à l'utilisateur final pour accomplir la tâche. Pour le titre principal, dans la plupart des cas, une longueur de 10 à 12 caractères devrait convenir à la largeur de la carte.
Dispositions et tailles
Vous pouvez choisir parmi trois types de dispositions de cartes.
- Titre
- Titre + Image
- Titre + Description
Toutes les dispositions sont disponibles dans deux tailles : moyenne ou grande. La taille de la carte détermine l’utilisation de l’espace dans le tableau de bord. Il est utile de commencer avec des cartes de taille moyenne. Utilisez une carte de grande taille si nécessaire pour présenter des informations supplémentaires qui ne sont pas adaptées à la taille moyenne.
Titre
À utiliser lorsque le titre est suffisant pour communiquer les informations clés dans la carte.
Titre + Description
A utiliser lorsque la description peut ajouter une valeur informative au titre et peut faciliter la compréhension de l'objectif de la carte. Évitez de répéter les informations déjà communiquées dans le titre.
Titre + Image
Les images attirent l'œil de l'utilisateur. Utilisez-les avec précaution, soit pour aider à reconnaître une application ou un site web familier, soit pour accroître la visibilité de la carte sur le tableau de bord. L’image doit se connecter de manière significative au titre principal et/ou au titre.
Interaction
Il existe trois façons d’interagir avec une carte :
- Carte (toute la carte est cliquable)
- Bouton principal
- Bouton secondaire
Chacune de ces interactions peut être personnalisée. Utilisez-les pour effectuer une action instantanée, envoyer une demande au serveur, ouvrir un affichage rapide (ajouter un lien), un lien vers une application Teams, ouvrir un site web externe, etc.
Voici les meilleures pratiques pour concevoir des interactions de carte :
- L’ensemble de la carte doit toujours être interactif.
- Si le bouton principal est utilisé, il doit être l'action la plus importante de la carte en raison de sa proéminence visuelle.
- Le bouton secondaire peut être utilisé seul ou conjointement avec le bouton principal si deux actions sont nécessaires (disponibles uniquement dans les dispositions de carte de grande taille). S’il est utilisé avec le bouton principal, assurez-vous qu’il est lié à la deuxième action la plus importante sur la carte. Dans ce cas, la carte elle-même devient l’action la moins importante.
- Pour les étiquettes de bouton, utilisez un texte concis et clair qui reflète précisément le comportement des boutons. Par exemple, « Afficher les tâches » peut être préférable à « Afficher ».
- Assurez-vous que chaque interaction sur la carte est unique.
- Concevez des cartes pour éviter que les utilisateurs ne se lavent dans différentes expériences. Par exemple, il est idéal si vous pouvez conserver les interactions au sein de l’application Connections à l’aide de la vue rapide. Ensuite, il est préférable de conserver les interactions utilisateur dans le tableau de bord.
Notes
En raison du manque d’espace :
- Le titre + la disposition de l’image n’ont pas de boutons avec des cartes de taille moyenne.
- Les dispositions Titre et Titre + Description ne peuvent avoir qu’un seul bouton avec des cartes de taille moyenne.
Exemples
Voici quelques exemples de cartes illustrant l'utilisation de ces mises en page.
Plateformes et modes
Les cartes de tableau de bord sont prises en charge sur iOS, Android et sur le web. Toutefois, il existe de légères différences de style entre les différentes plateformes : les polices (Segoe UI pour le bureau, Roboto pour Android, SF Display Pro pour iOS), les couleurs, les tailles et l'espacement sont légèrement modifiés pour mieux s'adapter à la plateforme respective et rendre les cartes cohérentes avec l'expérience globale de cette plateforme.
Les cartes de tableau de bord supportent également les thèmes en mode clair et foncé. Assurez-vous que les couleurs que vous utilisez fonctionnent pour les deux modes : le texte doit être lisible et les boutons et les icônes doivent être clairement reconnaissables par rapport à l’arrière-plan. Pour répondre aux critères d’accessibilité, le texte doit avoir un rapport de couleurs de 4,5:1 par rapport à l’arrière-plan du bouton, et les composants autres que le texte tels que l’icône doivent avoir un rapport de couleurs de 3:1 par rapport à l’arrière-plan. Utilisez cet outil pour vérifier le contraste de couleur.
Affichage de votre application dans la boîte à outils
Les nouvelles cartes sont ajoutées à ce tableau de bord à l’aide de la boîte à outils suivante.
Pour afficher votre application personnalisée dans le sélecteur de tableau de bord, vous aurez besoin des éléments suivants :
1. Icône : représentation visuelle unique de cette application. La taille maximale de votre icône personnalisée est de 24 px par 24 px et doit être de préférence au format PNG ou SVG. Les icônes SVG s'adaptent mieux aux différentes résolutions d'écran. Il est préférable d’utiliser une icône monochromatique, mais vous pouvez utiliser des icônes de couleur si vous souhaitez représenter votre marque unique avec les icônes. Dans tous les cas, veillez à ce que l'icône ait un arrière-plan transparent et qu'elle soit agréable à regarder, que le thème soit clair ou foncé. En savoir plus sur les thèmes SharePoint. La même icône doit être utilisée pour la carte de tableau de bord (voir ci-dessus).
2. Titre principal : assurez-vous que le titre de l’application est concis et qu’il n’est pas tronqué. La longueur recommandée est de 10 à 12 caractères. Le même titre principal doit être utilisé pour la carte de tableau de bord (voir ci-dessus) et l’affichage rapide (lien page d’affichage rapide) (si utilisé). Si vous avez plusieurs applications, il est recommandé que chaque application possède un titre principal unique. Chaque mot d’un titre principal doit commencer par une majuscule.
3. Texte descriptif : une description claire et concise explique l’objectif de la carte et fournit des informations sur son utilisation. Il doit s’afficher dans l’info-bulle lors du survol (sur le web). Assurez-vous que le texte s'enroule correctement et n'est pas trop large ou trop étroit dans l'info-bulle. Considérez la longueur optimale d'une ligne comme étant de 50 à 60 caractères, espaces compris.
Définition des paramètres de la carte
Lorsque vous cliquez sur l’application, la carte s’affiche dans le tableau de bord. La carte peut être modifiée à l’aide du panneau Paramètres sur la droite.
Voici quelques meilleures pratiques pour offrir des paramètres de personnalisation :
- Incluez un texte descriptif qui explique l’objectif de la carte et fournit des informations sur son utilisation. Assurez-vous qu'il s'agit du même texte que l'info-bulle ou qu'il soient complémentaires.
- À moins que le texte de la carte ne soit mis à jour dynamiquement, permettez aux utilisateurs de modifier le texte de la carte pour l'adapter à leurs besoins. Envisagez de fournir un texte par défaut pré-écrit dans les champs que l'utilisateur peut remplacer et modifier si nécessaire.
- Si plusieurs cartes sont disponibles auprès de la même organisation, assurez-vous que les étiquettes et les interactions dans le panneau de configuration sont cohérentes pour toutes les cartes.
- S'il y a plusieurs paramètres et que la conception de la carte est complexe, il est recommandé d'ajouter un lien « En savoir plus » où les utilisateurs peuvent trouver les meilleures pratiques pour ajouter votre carte à leur tableau de bord, par exemple, la taille recommandée, des exemples de cartes, etc.