入力フォーカスなしでユーザーがタイピングを処理する方法
私が初心者のWebユーザーで繰り返し観察する問題は、最初に入力フィールドを適切に選択（フォーカス）せずに入力を開始することがあるということです。私が見る典型的なパターンはこれです：ユーザーが入力フィールドのすぐ外側をクリックし、ハントアンドペック方式で入力を開始します-戻って見たときに、テキストが入力されていないことを知るだけですスクリーン。この問題が発生する理由はいくつかあると思います。マウスの制御不良または運動の制御不良が最も重要なようです。
この問題に対処するための最良の戦略は何だと思うかについて意見を述べたかったのです。それは単に無視されるべきか、それともアプリケーションはそれに対処するために積極的な措置をとるべきか？
オートフォーカスは理想的ではありません。ログイン画面など、2つのフィールドのみがユーザー名とパスワードである、非常に単純な単一タスクのページでは、これは理にかなっています。
しかし、それよりも複雑なページでは、アクセシビリティの大きな障害になる可能性があります。たとえば、最初のフィールドが「ID」であるページに大きな複雑なフォームがある場合、スクリーンリーダーを使用している人はページをロードして「フォームフィールド：ID」と読み上げます。これは、このページが何であるかに関して完全に文脈を与えません。理想的には、最初にページのタイトル、紹介コンテンツなどを読むことができます。
これについてもう少し読んでください： http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/
使いやすさに関しては、多くの人が自分のカーソルを制御し続けることを好みます。したがって、オートフォーカスは一部のユーザーにとっては使いやすさの向上になる可能性がありますが、他のユーザーにとっては使いやすさの問題になる可能性があります。したがって、オートフォーカスルートを回避するもう1つの理由です。
質問に戻ると、ハントアンドペックのコンピューターユーザーを扱っていることに注意してください。彼らは確かに存在します。そして、それらを収容する必要があります。しかし、他のユーザーに不利益をもたらすことはありません。 ;）
私が提案するのは、彼らが集中するためのより大きなターゲット領域を作成することです。フィールドを大きくします。
上部の「標準」の代わりに、下部のようにスタイルを設定します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
さらに、追加されたボーナスは、これにより、タッチデバイスを使用する人にとって、物事がはるかに簡単になることです。
最善の方法は、ページがロードされるとすぐにカーソルを最初に予期される入力フィールドに置くです。フィールドを完全に選択する必要がなくなります。ただし、ユーザーに複数の選択肢がある場合は、混乱を招く可能性があるため、自動選択は避けてください。
次のフィールドについては、適切なタブナビゲーションを使用して、マウスを使わずにタイピングできるようにします。
例：FacebookとGmailのログインページを見てください。ページが読み込まれるとすぐに、カーソルは既にユーザー名フィールドにあります。
ユーザーを混乱させる誰がスピーカーを残したかを知りたい場合は、ユーザーが入力フィールドの外でキーをマッシュしたときにエラービープ音を作り始めることができます。 （問題は、ブラウザのキーボードナビゲーションショートカットに干渉することです）
私は、ビープ音やオートフォーカスによってユーザーに迷惑をかけない積極的なアプローチを取ります。
ユーザーがフィールドのすぐ外側をクリックしている場合、この問題に役立つ可能性のあるJavaScriptを介して入力フィールドを段階的に強化することができます。 入力フィールドは、クリック可能な空白を提供する<div>または他の要素で囲むことができます。入力フィールドの親要素がクリックされると、JavaScriptがリッスンできるため、要素の入力フィールド子供が集中するだろう。
統計的には、これは価値のある結果をもたらさないかもしれませんが、同じ問題が頻繁に見られる場合は、開発にあまり時間がかからないはずなので、価値があるかもしれません。ボタンの同様の実装について聞いたことがあります。この場合、クリック領域は視覚的なボタン自体よりもわずかに大きくなります。
ページレイアウトとその目的に応じて、フィールドの自動フォーカスが役立つことがあります。
ページの主要ポイントが入力を埋めるでない場合、それは良い考えではないかもしれないことに注意してください。
また、問題のフィールドがページの上部にない場合は、これを行わないでください。一番上にないフィールドにオートフォーカスすると、ページが部分的に下にスクロールされて（入力まで）読み込まれることがわかります。これは、理由がわからない場合はかなり奇妙な動作です。
別の解決策（HTMLで作業していると想定）は、対応するラベルタグ内に入力をラップすることもできます。次に、CSSを使用して、ラベルを少しパディングできます。このようにして、入力をクリックするか、入力の近くをクリックすると、フィールドがフォーカスされます。私は実際にこの方法を試したことはありませんが、W3によると有効なHTMLです。
私はrkに同意します。 A プロアクティブなアプローチはやり過ぎのようですテキストフィールドフォーカスの外で入力するとビープ音が鳴るなど。
Rk。を反映するために、ユーザーがサイトにアクセスしたときにユーザーが入力を開始する可能性が最も高い場所を理解することは、ページの読み込みに自動焦点を合わせる戦略にとって重要です。人々がこれに慣れていて、間違った分野に焦点が当てられている場合、それは大きな問題ではなく、単に煩わしいものです。ただし、分析を有線で行っている場合は、ページで他のアクションを実行する前に、自動フォーカスフィールドの外に何人のユーザーがフォーカスしているかを確認して、ユーザーが何をしているかを確認できます。