（ユーザーカード内の）少量の水平方向のスペースにユーザーのメールアドレスを表示する優れた方法は何ですか？
特定のグループのユーザーを表示する必要があるアプリの領域を設計しています。スペースを節約しつつ、より大きな（より認識しやすい写真）を提供するために、名前とメールの上の写真に「カード」スタイルを使用することにしました。各ユーザーのメールアドレスが表示可能である必要があります。
問題は、「ユーザーカード」の幅よりも広いメールアドレスを扱っていることです。私はこれに対処するためのいくつかの可能な方法を考え出しました、そして私は人々が最もユーザーフレンドリーであると考えるものに興味があります。
オプションA：オーバーフローを非表示にする要素を含む電子メールを設定し、マウスツールヒントを使用して完全な電子メールを表示します。
オプションB：省略記号を使用して電子メールアドレスが切り捨てられていることを示す以外は、Aと同じです。
オプションC：メールを複数行に強制する
オプションD：切り捨てられた電子メールを、マウスのツールヒントを使用する「電子メール」という単語に置き換えます。
オプションE：メールを削除し、マウスのツールチップでユーザーの名前にカーソルを合わせると表示されるようにします。
私はあなたの考えと提案に感謝します。
良いデザイン！ オプションBに行くことをお勧めします。その理由：
オプションA：ユーザーはあなたのメールが切り捨てられたことを知っているかもしれませんが、省略記号などの視覚的アフォーダンスの欠如はそれらを混乱させ、誰かが誤ってするかもしれません完全なメールとして受け取ります。また、完全に表示するにはメールにカーソルを合わせる必要があることを知らない場合もあります。
オプションB：十分にスケーリングされ、省略記号の使用は、より多くのテキストがあり、ユーザーが特定できることをユーザーに通知するための一般的なアフォーダンスですカーソルを合わせてメールを送信します。
Ellipsisが利用可能なコンテンツが他にもあることを人々にどのように通知するかについて疑問がある場合は、これを読むことをお勧めします article
省略記号は、省略や未完成の考えのために英語で使用される一般的なマークであるため、うまく機能します。認知レベルでは、ユーザーはエリプシスアフォーダンスを理解し、まだ表示されていないタスクを完了するために利用できるオプションが他にもあることを意味します。省略記号は、アクションが即時ではないことをユーザーに通知します。これにより、ユーザーはボタンまたはメニュー選択をクリックして、その背後にあるさまざまなオプションを調べることができます。
オプションC：これは技術的には機能しますが、ユーザーが長いメールアドレスを使用していて、オプションAにかなり戻っている場合、適切にスケーリングされない可能性があります。また、配置が崩れます。
オプションD：相手にメールを送信するだけではなく、メールIDを知っていることに興味がない場合や、リンクを使用する場合があるため、これはイライラすることがあります。私はそれが単なるリンクであり、メールIDを明らかにするホバー状態がないと仮定します。
オプションE：名前にカーソルを合わせるとメールIDが表示されるため、アフォーダンスがないため、推奨されません。
電子メールのためにより多くのスペースを解放してオプションCを使用する場合は、次のようなデザインを使用できます
名前はオーバーレイに移動され、メール用にスペース全体が解放されます
デフォルトはC：可能な場合はフルテキストを表示を試してください。前の「@」以降を切り捨てるかどうかはわかりません。ユーザーは簡単にコピーして貼り付けることができます。 Cがすべてのテキストに対応しない場合は、省略記号を使用します。完璧ではありませんが、直接アクセスするよりも幅広いユーザーをカバーしますB。