web-dev-qa-db-ja.com

入力のようなマテリアルデザインのテキストの右側をフェードします

UIを改善して、画面に表示されるよりも多くのテキストがあることをユーザーが理解できるようにしています。私にはいくつかのアイデアがありました:

  1. 入力の右側をフェードする
  2. テキストがフィールドより長い場合は3つのドットを配置します

これが現在の状態です。

fade right of a textbox

問題は、ユーザーがテキストを選択するか、テキストの最後に移動したときに、フェードがまだ表示されており、これが望ましくないことです。それはそれが助けるよりもユーザーを混乱させる結果になります。私はおそらくこれでjsを修正できますが、実際に実装する前に、まずユーザーエクスペリエンスを向上させる方法について考えたいと思います。

3
Hasan Gürsoy

フェードのあるアイデアは紙の上では良さそうですが、特定の状況で人々を混乱させることがわかった場合は、いくつかのことを考えることができます。

  • あなたが提案したように、テキストボックスがアクティブなときにフェードを削除し、これをテストIDEA潜在的なユーザーに対して。
  • フェードをまったく表示しないことを検討してください。長すぎるテキストは切り捨てられるのが一般的なテキストフィールドの動作であり、コンテンツからは切り捨てられていることがよくわかります。次に例を示します。 enter image description here
  • この特定のテキストフィールドが長いコンテンツを保持すると予想される場合は、複数行フィールドの使用を検討してください。
  • また、1行のテキストフィールドを使用して、クリックで複数行のテキストフィールドに展開することもできます。
3
Tin Man

タップ(またはクリック)でテキスト全体を単純に展開することをお勧めします。さらに、可能であればラベリングを簡略化します。

お役に立てれば!

enter image description here

6
Marco Tatta

文字制限を制限し、テキストを切り捨て、ユーザーが切り捨てられたテキストにカーソルを合わせるとツールチップを使用します。この手法はほとんどの時間で機能し、ユーザーはフルテキストにアクセスする方法をすばやく伝えることができました。その直感的でスペース効率に優れています。

編集:これはモバイルデバイスのクリックで機能します

enter image description here

5
Deniz Erdal

行の終わりに展開/続きを読むボタンまたはリンクを追加します。このようにして、ユーザーはそれを操作して長いテキストを表示できることがわかります。

切り捨てを追加することもできます。 (それはあなたが話している3つの点です)

1
Rick P

テキストに焦点を当てて何かをデザインするときはいつでも、基本に行くことを好みます。それを紙に書くにはどうすればいいですか?

したがって、この場合、私が紙/行の終わりに達すると、それを新しい行に折り返して、読者がそれを見て簡単に読むことができるようにします。

編集中は、テキストフィールドの境界線に下線が引かれている可能性があるため、ユーザーはここにさらにテキストがあることを理解できます。

0
Usman Mani

入力をユーザーにとってわかりやすい入力にします。ユーザーは、それがどのように機能し、動作するかはありません。

テキストを編集していない場合は、テキストを新しい行に分割して、テキスト全体が表示されるようにします。切り捨ては煩わしく、多くの場合必要ありません。

enter image description here

そして編集時:(入力が単一行に切り替わることは大きな問題ではありません)

enter image description here

0
jazZRo