Quelle est une excellente façon d'afficher l'adresse e-mail d'un utilisateur dans un petit espace horizontal (dans une carte d'utilisateur)?
Je conçois une zone d'une application qui doit afficher les utilisateurs dans un certain groupe. Pour économiser de l'espace tout en fournissant des photos plus grandes (plus reconnaissables), j'ai décidé d'utiliser un style "carte" avec photo au-dessus du nom et de l'e-mail. L'adresse e-mail de chaque utilisateur doit être visible.
Le problème est que les adresses e-mail sont plus larges que les largeurs de la "carte d'utilisateur". J'ai trouvé quelques façons possibles de résoudre ce problème et je suis curieux de savoir ce que les gens pensent le plus convivial.
Option A: Définition de l'élément contenant le courrier électronique pour masquer le débordement et utilisation d'une infobulle de souris pour afficher le courrier électronique complet.
Option B: Identique à A, sauf que l'utilisation d'ellipses pour indiquer que l'adresse e-mail est tronquée.
Option C: Forcez-moi simplement l'e-mail sur plusieurs lignes
Option D: Remplacez l'e-mail tronqué par le mot "Email" qui utilise une info-bulle de souris.
Option E: Supprimez l'e-mail et faites-le apparaître lorsque vous survolez le nom de l'utilisateur via une info-bulle de souris.
J'apprécie vos réflexions et suggestions.
Bons designs! Je recommanderais d'aller pour l'option B . La raison étant:
Option A : Même si vos utilisateurs savent que votre e-mail a été tronqué, le manque de capacité visuelle comme Ellipsis peut les dérouter et quelqu'un peut accidentellement prenez-le comme email complet. De plus, ils ne savent peut-être pas qu'ils doivent survoler l'e-mail pour le voir complètement.
Option B : elle évolue bien et l'utilisation des points de suspension est un moyen courant d'informer les utilisateurs qu'il y a plus de texte et que les utilisateurs pourraient déterminer le e-mail en le survolant.
Si vous vous demandez comment Ellipsis informe les gens qu'il y a plus de contenu disponible, je vous recommande de lire ceci article
Un Ellipsis fonctionne bien parce que c'est une marque courante utilisée dans la langue anglaise pour les omissions et les pensées inachevées. À un niveau cognitif, les utilisateurs comprendront que les points de suspension Ellipsis signifient qu'il existe davantage d'options disponibles pour terminer la tâche qui ne sont pas encore affichées. L'ellipse indique aux utilisateurs que l'action n'est pas immédiate. Cela permet aux utilisateurs de cliquer sur un bouton ou une sélection de menu pour explorer les différentes options qui se cachent derrière.
Option C : Cela pourrait techniquement fonctionner mais pourrait ne pas bien évoluer si l'utilisateur a une longue adresse e-mail et que vous revenez à peu près à l'option A. interrompra également l'alignement.
Option D : Cela peut être frustrant car parfois je ne suis pas intéressé à envoyer simplement un e-mail à la personne mais à connaître son identifiant de messagerie et puisque vous utiliseriez un lien Je suppose que c'est juste un lien et n'a pas d'état de vol stationnaire qui révélerait l'identifiant de l'e-mail.
Option E : Pas du tout recommandé car il n'y a aucune possibilité que le survol du nom révèle l'identifiant de l'e-mail.
Si vous souhaitez libérer plus d'espace pour votre e-mail et opter pour l'option C, vous pouvez opter pour un design comme celui-ci
Le nom a été déplacé dans une superposition, libérant ainsi tout l'espace à utiliser pour l'e-mail
par défaut sur C: essayez de afficher le texte intégral autant que possible, vous ne savez jamais si vous tronquez avant "@" ou après. Les utilisateurs peuvent vouloir copier et coller, leur faciliter la tâche. Chaque fois que C ne prend pas en charge tout le texte, utilisez les ellipses. Ce ne sera pas parfait mais vous couvrirez un plus large éventail d'utilisateurs que d'aller directement pour B.