Avatar

Le composant Avatar permet aux utilisateurs de s’exprimer visuellement en choisissant une image ou une icône qui les représente dans votre application.

Configurer votre avatar

1: Choisir la représentation visuelle de l'avatar

Sélectionnez le visuel qui représentera votre avatar :

• Icône : Choisissez une icône prédéfinie dans la bibliothèque pour représenter l'avatar. C'est une bonne option pour une représentation simple et symbolique.

• Image : Téléchargez votre image pour personnaliser l'avatar. Idéal pour utiliser des photos ou des graphiques personnalisés.

2: Définir la forme (variante)

Choisissez la forme de votre avatar :

• Cercle : Affiche l'avatar dans un cadre circulaire. C'est un choix courant pour les profils utilisateur.

• Carré : Affiche l'avatar dans un cadre carré

3 : Définir la taille

• Tailles prédéfinies : Sélectionnez parmi des tailles prédéfinies comme « Petit », « Moyen » ou « Grand ».

• Taille personnalisée : Spécifiez les dimensions exactes (en pixels) pour votre avatar si vous avez besoin d'un contrôle plus précis

Ajustez la taille de l'avatar pour qu'il s'intègre à votre design.

Ajouter du contexte et des détails

4. Fournir des informations supplémentaires (détails)

Utilisez les paramètres « Détails » pour ajouter du texte qui apporte plus de contexte sur l'avatar :

• Texte principal : Ajoutez un label principal, comme le nom de l'utilisateur.

• Texte secondaire : Incluez des informations complémentaires, comme un intitulé de poste ou une description.

• Position du texte : Contrôlez le placement du texte par rapport à l'avatar (en haut, en bas, à gauche ou à droite).

• Étiquettes : Ajoutez des tags pour catégoriser ou décrire davantage l'avatar.

5. Indiquer le statut ou la présence (optionnel)

Utilisez les indicateurs « Statut » et « Présence » pour communiquer visuellement l'état ou la disponibilité de la personne ou de l'objet représenté par l'avatar. Ce sont de petits repères visuels qui fournissent des informations d'un coup d'œil.

• Statut : Un point coloré superposé sur l'avatar, utilisé pour représenter différents états.

  • Exemples :

    • Statut d'approbation : Vert pour approuvé, jaune pour en attente, rouge pour refusé.

    • Statut du compte : Vert pour actif, rouge pour verrouillé, gris pour suspendu.

    • Statut de la tâche : Vert pour terminé, jaune pour en cours, gris pour non démarré.

  • Personnalisation : Vous pouvez contrôler la position du point sur l'avatar et choisir les couleurs représentant chaque statut.

• Présence : Similaire à « Statut », mais indique explicitement la disponibilité en ligne/hors ligne.

  • Usage courant : Souvent utilisé dans les outils de communication ou de collaboration.

  • Couleurs standard : Utilise généralement le vert pour en ligne/disponible et le rouge ou le gris pour hors ligne/indisponible.

Pourquoi utiliser Statut et Présence ?

• Communication améliorée : Transmettre rapidement des informations sans avoir besoin de texte supplémentaire.

• Amélioration de l'expérience utilisateur : Aider les utilisateurs à comprendre la disponibilité et à prendre des décisions éclairées.

• Efficacité accrue : Réduire la charge cognitive grâce à des repères visuels facilement interprétables.

https://docs.google.com/gview?embedded=true&url=[votre URL PDF] Dans une application de support client, utilisez des avatars avec des indicateurs de présence pour montrer quels agents de support sont actuellement en ligne et disponibles pour aider.

6. Ajouter une icône d'entité (optionnel)

Utilisez une « Icône d'entité » pour clarifier ce que représente l'avatar (par ex., un utilisateur seul, un groupe ou une organisation).

• Comment ajouter : Sélectionnez une icône dans la bibliothèque qui symbolise le type d'entité.

• https://docs.google.com/gview?embedded=true&url=[votre URL PDF] Utilisez une icône de personne unique pour un individu, une icône de groupe pour une équipe, ou une icône de bâtiment pour une entreprise.

• Personnalisation :

  • Taille : Ajustez la taille de l'icône pour qu'elle soit visible mais n'obstrue pas l'image principale de l'avatar.

  • Position : Placez l'icône dans un coin de l'avatar (par ex., en haut à gauche, en bas à droite).

7. Ajouter des actions interactives (optionnel)

Transformez vos avatars en éléments interactifs en ajoutant des boutons d'action.

• Boutons d'action : Ajoutez des boutons qui déclenchent des actions spécifiques lorsqu'on clique dessus.

  • Exemples : « Modifier » (pour mettre à jour un profil), « Message » (pour démarrer une discussion), « Suivre » (pour se connecter avec un utilisateur).

• Déclencheurs : Définissez comment les boutons d'action sont activés :

  • Au clic : L'action est effectuée lorsque l'utilisateur clique sur le bouton.

  • Au survol : L'action est effectuée ou prévisualisée lorsque l'utilisateur survole le bouton avec la souris

---

Exemples d'utilisations

• Profils utilisateur : Afficher les avatars des utilisateurs avec leurs noms et rôles.

• Listes de contacts : Afficher les avatars des contacts avec leur statut ou présence.

• Tableaux de bord d'équipe : Représenter les membres de l'équipe avec des avatars et leurs projets en cours.

• Listes interactives : Utilisez des avatars avec des boutons d'action pour permettre des interactions rapides (par ex., envoyer un message à un utilisateur).

---

Notes importantes

• Optimisation des images : Pour de meilleures performances, utilisez des images optimisées avec des dimensions appropriées.

• Accessibilité : Fournissez un texte alternatif pour les avatars afin d'assurer l'accessibilité aux utilisateurs malvoyants.

• Cohérence : Maintenez un style et une taille cohérents pour les avatars dans toute votre application pour une expérience utilisateur homogène