web-dev-qa-db-ja.com

読み取り専用フィールドはアイコンを非表示にするか無効にする必要がありますか?

システム全体で、アイコンが関連付けられたさまざまな入力フィールドタイプがあります。

例:

  • 時間アイコンのある時間フィールド-アイコンをクリックすると、現在の時間が入力されます。
  • カレンダーアイコンのある日付フィールド-カレンダーをクリックすると、ユーザーが日付を選択できるカレンダーが表示されます。

読み取り専用の入力フィールドにアイコンを表示するためのベストプラクティスはありますか?

  • アイコンを非表示にする必要がありますか?または
  • 彼らはただ無効なスタイルを持っているべきですか?

無効なスタイルのアイコンの例:

2
L. Lemmer

アイコンを非表示にするよりも無効にすることをお勧めします。

標準の無効化された<select>入力は、無効化された場合でも<select>入力のように見えます。これにより、ユーザーはこの要素から特定のタイプの対話を期待できます。共通要素の入力方法はさまざまであり、スタイルはユーザーがどの要素に期待されるかを予測するのに役立ちます。次の(完全ではない)リストは、ユーザーの期待の違いを示すのに役立ちます。

主な入力方法:クリック/タップ

  • 選択リスト(通常)
  • チェックボックス
  • ラジオボタン
  • ボタン

主な入力方法:キーボードエントリ

  • 入力フィールド

入力フィールドのように見える要素を見て、それが有効になったときに<select>要素にすばやく変換されるのを見ると、ユーザーは要素とのやり取りを理解するために要素を簡単に再処理する必要があります。

したがって、<select>アイテムのパターンに従って、カスタム入力に個別のアイコンを表示できるようにして、ユーザーがそれらを有効にする前に前処理を試すことができるようにします。

3
maxathousand