Alignement des messages dans un chat
J'écris un logiciel de chat et nous avons eu une discussion sur l'alignement des messages.
D'un côté, il y a la disposition "traditionnelle" où le nom d'utilisateur commence au début de la ligne (à gauche dans la maquette). De l'autre côté, il y a une mise en page où chaque message commence à la même position, avec les noms d'utilisateur alignés à droite sur lui.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
(Veuillez noter que le nom d'utilisateur est en gras dans le chat lui-même)
Je préfère le bon, car l'œil peut sauter plus facilement au début de chaque nouveau message car il est toujours à la même position.
Quelle disposition devrait être la disposition préférée (standard)? Y a-t-il d'autres propositions?
Des deux options que vous avez données, la deuxième est la meilleure, car il est plus évident visuellement où le message commence. Par conséquent, il est plus facile à utiliser car les gens doivent penser moins à la structure du message et peuvent se concentrer davantage sur le contenu. Cela peut cependant s'avérer problématique si vous avez des noms longs dans le chat, vous devrez donc probablement trouver une règle pour le tronquer.
Cependant, je suggère que vous aligniez en haut le nom et les messages successifs de groupe par le même utilisateur ensemble. Cela ne traite pas seulement le problème des noms longs, mais vous donne également un moyen simple d'afficher les messages d'état.
Flint fait un excellent travail, et voici deux exemples à partir de là:
2 approches que j'aime:
1er (ex: adium messenger):
Nom en première ligne
Le message commence à partir d'une nouvelle ligne
2ème (ex: chat facebook):
Utilisez simplement l'icône pour afficher la miniature de l'utilisateur (afficher le nom d'utilisateur dans le titre de la fenêtre)
Montrez juste des messages.
Pour un scénario de salle de chat: j'irais avec ce que nous avons ici sur les SE. Aligner à droite les noms d'utilisateur et aligner à gauche le texte à l'intérieur des conteneurs respectifs.
Imitez le comportement par défaut du logiciel de chat le plus populaire sur votre (vos) plateforme (s) cible (s). C'est le genre d'UX qui n'a pas de "bonne" réponse, seulement ce à quoi les gens sont habitués.
Je suis toujours heureux quand je vois une boîte de discussion où elle est triée comme ceci:
(08:41) UserName: Message ici Message ici Message ici Message ici
(08:41) UserName: Message ici Message ici Message ici Message ici
(08:40) UserName: Message ici Message ici Message ici Message ici
(08:39) UserName: Message ici Message ici Message ici Message ici
(08:39) UserName: Message ici Message ici Message ici Message ici
(08:39) UserName: Message ici Message ici Message ici Message ici
(08:39) UserName: Message ici Message ici Message ici Message ici
(08:38) UserName: Message ici Message ici Message ici Message ici
(08:38) UserName: Message ici Message ici Message ici Message ici
Je ne pense pas qu'un Avatar soit nécessaire pour une chatbox. Quel en est le besoin? Vous faites simplement du nom d'utilisateur un lien pour qu'il redirige vers sa page de profil. Notez que les messages commencent de bas en haut. Vous pouvez soit placer le bouton inputbox + submit en bas comme on le voit dans mon exemple, soit le placer en haut de la boîte.
Un exemple de ce que je veux dire. ICI