web-dev-qa-db-ja.com

リストモードのテキストの省略記号のUXは何ですか?

リストモードでは、説明の列があります。各レコードには、この説明フィールドの多くのテキストを含めることができます。ユーザーが二次情報と考えても表示する必要があります。

サイズが異なる行の高さを避けるために、最初の行に省略記号を強制します。ユーザーが省略記号をクリック/ホバー/タッチすると:

  • オプション1:ユーザーが省略記号をクリックすると、完全な文を表示するポップアップが開きます。
  • オプション2:ユーザーは省略記号にカーソルを合わせて、情報ツールチップを表示します。
  • オプション3:入力フィールドのサイズを拡大して、すべてのテキストを表示するのに十分な幅になるようにするか、すべてのテキストを表示するテキスト領域になるようにします。

私が持っている質問は:

  1. 長い説明は1行または2行で記述する必要がありますか?
  2. コンテキストを失わずにすべてのテキストを表示するには、UXは何ですか?

あなたは何をお勧めします?

おかげで、

2
Didier

UXの観点から:

ユーザーがすべてのアイテムをクリックまたはマウスオーバーしてフルテキスト(ポップアップ、ツールチップ、インラインのいずれか)を表示する必要があるため、ユーザーは間違いなく苛立ちます。これは、リストが大きい場合でも、特にリストが大きい場合は、面倒な作業です。とか、ぐらい。

次のことを検討してください。

  1. 説明を2〜3行で全文を表示する数文字に制限します。ブリーフ(内容)は意味があるべきです

  2. テキストを制限できない場合は、ツールチップとともに「すべて展開/すべて折りたたむ」というボタンを用意します。

1
Deekshit-CUA

オプション3をお勧めします。理由は、ユーザーが詳細な説明を表示したい場合、ユーザーがクリックしてテキストを表示できるようにすることです。インライン展開としてテキストを表示することは、より良いオプションです。モーダルポップアップまたはポップオーバーにさらにテキストを表示することは、複数のDIV要素とスタイルを追加するために良い考えではありません。単に不要な追加スタイルを追加するだけです。省略記号をリンクとして保持し、ユーザーがクリックしてより多くのテキストを表示できるようにします。ここでは、ユーザーが無意識のうちにリンク上を移動したときにテキストイベントの展開がトリガーされるホバーcosについてはお勧めしません。これにより、マイナーなUIの不具合が発生します。

省略記号の場合説明の最大行数を2行に保ちます。2行を超える場合は省略記号を追加します。

1
Grafix Guru

inputtextareaという言葉に少し戸惑っています。これらが実際にinput要素とtextarea要素である場合は、省略記号がまったくないはずです。 1行または数行のテキストを意味すると思います。この場合、最適なオプションは、テキストの行を垂直方向に拡張することです(アコーディオンタイプの要素を考えてください)。

したがって、これがある場合:

I'm a great line of text that will take no more than 60 char (...)

クリックすると次のようになります。

I'm a great line of text that will take no more than 60 
characters, and after that I'll need to expand in as many
lines as needed

リストビューで水平方向に展開すると、水平方向にスクロールすることになります。これにより、テキストが完全に表示されるだけでなく、 文字数がわかりやすい が維持されます。

1
Devin