Pour reconnaître des personnes ou des groupes
Les photos de profil ne doivent pas être le seul moyen d’identifier un utilisateur.
avatar Système de conception
Montrez votre identité et fournissez des mises à jour contrôlées des photos.
Contenu de la checklist
Progression de la vérification
01
Structure et signification
Comparer les informations et la présentation dans le contexte d'utilisation.
02
Interaction et convivialité
Essayez l'opération, modifiez le statut et continuez à travailler.
La progression est enregistrée automatiquement dans ce navigateur.
GUIDE
Comment vérifier
EXEMPLES
Exemples d’utilisation
Pour reconnaître des personnes ou des groupes
La liste des membres affiche à la fois l'avatar et le nom « Linh Nguyen ».
Variantes et cas d’usage
Forme de l’avatar
Choisissez une forme cohérente pour un même type d’entité et conservez les parties importantes de l’image lors du recadrage.
Testez un portrait dont le sujet est près du bord et un logo horizontal ; ne coupez pas la partie qui permet de reconnaître l’entité.
Exemple Les utilisateurs ont une photo ronde ; les organisations utilisent un cadre carré aux coins arrondis.
Échelle de tailles
Définissez des tailles pour les listes, les commentaires et les profils, plutôt que de les modifier arbitrairement selon l’écran.
Comparez les avatars d’une liste dense et de l’en-tête de profil ; une petite image ne doit pas augmenter anormalement la hauteur de la ligne.
Exemple La liste utilise des avatars de 32 px et le profil de 80 px, avec le même recadrage.
Indicateur de statut
Placez le statut près de l’image et ajoutez son nom pour que l’utilisateur n’ait pas à deviner la signification de la couleur.
Testez les thèmes clair et sombre ainsi qu’un affichage sans couleur ; l’indicateur de présence doit conserver son sens.
Exemple Le point vert est accompagné du libellé « En ligne » dans les informations de l’utilisateur.
En l’absence de photo
Conservez les dimensions et l’identité lorsque l’URL de l’image échoue, est absente ou se charge encore.
Bloquez la requête de la photo ; la ligne ne doit pas se déplacer et l’utilisateur doit rester identifiable.
Exemple Une photo indisponible est remplacée par les initiales AN pour le compte d’Anh Nguyen.
AN
Image de remplacement