web-dev-qa-db-ja.com

ドロップダウン/コンボボックス長いテキスト管理

ドロップダウンリストに長いテキストを表示する方法を教えてください。各リスト項目は、2〜3行より長くなります。任意の提案をいただければ幸いです。ホバー時にツールチップはドロップダウンリストの正しい方法ですか?

enter image description here

3
Sunil kv

ユーザーがアクションについて混乱するので、ドロップダウンのロールオーバーツールチップや追加のボタンは使用しません。私は提案します:

A)ドロップダウンの幅を項目の最大長に調整するか、幅の後に項目を分割し、各項目をブロックとして表示します。

enter image description here

B)コンテンツが非常に特徴的である場合、テキストの最後を切り取り、3つのドット(...)を使用します。コンテンツが繰り返される場合、このアプローチは明らかにユーザーの混乱を招く可能性があります。

enter image description here

2
Deniz Erdal

次の2つのオプションがあります。

1.長いテキストを避ける

長いテキストが本当に必要ですか?選択/選択するために人々はそれを必要としますか?長いテキストはまた、圧倒的でスキャンが難しい場合があります。私の経験では、オプションを提示する別の方法がブレインストーミングセッションの後に登場する可能性が高いです。試してみる!

2。長いことを受け入れますが、何も隠さないでください

それで人々は選択/選択をするためにテキスト全体が必要ですか?それを隠さないでください!オプションに必要なスペースを要求できない場合、ドロップダウンはそれらを提示する最良の方法ではない可能性が高いです。

ラジオボタンと全幅のラベルが付いた新しいページ/画面の方が適していますか?

または、複数行にわたってラベルを表示します。単語を複数行に分割し、水平ではなく垂直のスペースを利用します。デニズは私より少し前で、この考えを説明しています。

ラベルを水平方向に展開しない

ラベルを省略記号(...)で区切らず、ユーザーアクション(ホバーまたはクリック)で展開しないでください。オンホバーこれはタッチスクリーンでどのように機能しますか? clickをクリックすると、テキスト全体を1回のクリックで表示できること、および選択するには2回のクリックが必要であることを人々はどのように知るのでしょうか。また、ボタンまたはリンクは明確ではなく、ひどく必要なスペースを奪います。

また、拡張されたテキストが画面から外れたときに、ユーザーが水平方向にスクロールしなければならない可能性があることについても触れていません。

1
jazZRo

ホバーアクションが、特定のテキスト行の完全なコンテンツを表示するために必要なアクションであるかどうかは明らかではありません。テキストのその行の表示部分の最後に信頼できる[+]記号を使用できます。

0
Adnan Khan

ホバー時はモバイルデバイスでは機能しないため、スクラップしてください。

省略記号を試して、コンテンツが省略されているが削除されていないことを示すことができます。

アイテム1 ...

+記号を試して、さらにあることを示すことができます

アイテム1 +

どちらかの記号をクリックすると、追加のメニュー項目が垂直にトリガーされます。

0
Brian Mccann

これらの考えに基づいて、私はより良いUXで良いバランスを達成し、コンポーネントを複雑にしようとしています。これが私が思いついたものです、私はそれを画像で説明する適切な仕事をしたと思っています。

enter image description here

このアプローチで悪化するか、悪化するか知りたい。 250と500に選択できる値、より良い代替案について何か考えはありますか?

0
thusithak

いくつかのオプションしかないが、それらがすべて非常に長い場合は、選択ボックスを使用する方法ではないかもしれません。ユーザーが正しいオプションを選択していることを確認するためだけに、いくつかのオプションのテキストをクリックして展開またはホバーする必要があるのは、ユーザーにとって非常に煩わしいことです。

代わりに、カスタムスタイルのラジオボタングループを使用してボタンを実装し、すべてのオプションを完全に表示する下のセクションを展開できます。

たとえば、こちらのラジオボタンセクションをご覧ください。 http://www.jqueryscript.net/demo/jQuery-Plugin-For-Labeled-Checkbox-Radio-Button-Labelauty/demo/

0
user87414