web-dev-qa-db-ja.com

チャットでのメッセージの整列

私はチャットソフトウェアを書いていて、メッセージの配置について話し合いました。

一方には、ユーザー名が行の先頭(モックアップの左側)から始まる「従来の」レイアウトがあります。反対側には、各メッセージが同じ位置から始まり、ユーザー名がそれに合わせて配置されるレイアウトがあります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

(ユーザー名はチャット自体で太字になっていることに注意してください)

目が常に同じ位置にあるので、新しいメッセージの最初に簡単にジャンプできるので、私は正しいものを好みます。

どのレイアウトを優先(標準)レイアウトにするか?他に何か提案はありますか?

10
TimWolla

2つのオプションのうち、2番目のオプションが最適です。メッセージの開始位置が視覚的にわかりやすいためです。したがって、メッセージの構造について人々はそれほど考える必要がないとして使用する方が簡単であり、コンテンツにより多く焦点を合わせることができます。ただし、チャットに長い名前が含まれていると問題が発生する可能性があるため、切り捨てのルールを考え出す必要があります。

ただし、同じユーザーが[名前を上揃え]およびグループの連続するメッセージを一緒にすることをお勧めします。これは長い名前の問題だけでなく、ステータスメッセージを表示する簡単な方法も提供します。

Flint はこれをうまく実行します。以下は2つの例です。

enter image description here

enter image description here

16
JohnGB

私が好きな2つのアプローチ:

1番目(例:アディウムメッセンジャー):

最初の行の名前

メッセージは新しい行から始まります

2つ目(例:Facebookチャット):

アイコンを使用してユーザーのサムネイルを表示する(ウィンドウのタイトルにユーザー名を表示する)

メッセージを表示するだけです。


チャットルームのシナリオの場合:SEでここにあるものを使用します。 それぞれのコンテナ内でユーザー名を右揃えにし、テキストを左揃えにします。

enter image description here

4
rk.

ターゲットプラットフォームで最も人気のあるチャットソフトウェアのデフォルトの動作を模倣します。これは、「正しい」答えがなく、人々が慣れ親しんでいるだけの種類のUXです。

1
Sparr

次のように分類されたチャットボックスを見ると、いつも満足しています。

(08:41)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

(08:41)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

(08:40)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

(08:39)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

(08:39)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

(08:39)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

(08:39)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

(08:38)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

(08:38)UserName:ここにメッセージここにメッセージここにメッセージここにメッセージ

私はアバターがチャットボックスに必要だとは思いません。それの必要性は何ですか?ユーザー名をリンクにするだけで、ユーザーのプロフィールページにリダイレクトされます。メッセージは下から上に始まることに注意してください。私の例のように下部にinputbox + submitボタンを配置するか、ボックスの上部に配置することができます。

私の意味の例。 [〜#〜]ここ[〜#〜]

0
Kees Sonnema