web-dev-qa-db-ja.com

最初のフォームフィールドに自動フォーカス。正しいですか?

最初のフォームフィールドをページの読み込みに自動フォーカスさせることで、ユーザーの流れに少しを加えたいと思います。

最初、オートフォーカスは私を少し怖がらせます(時には offensive と呼ばれます)。しかし、そのQ&Aで述べたように、フォームがそのページの唯一の目的であるページは、非常に良い候補です。

正しくできる方法があるのか​​と思っていました。たとえば、ユーザーがすでにいくつかのフィールド自体に焦点を合わせている場合は、そうしないことを考えています。オートフォーカスが「不適切」でないことを確認する方法は他にありますか?

更新

全体像をもう少し探しています。これをうまく機能させるためにとるべき措置は何ですか? ux、technical、visualなどを含みます。たとえば、フィールドがブラウザのパスワードマネージャによって事前に入力されている場合はどうしますか?

4
Lode

「正しく行う」には、新しいHTML5フォームフィールド属性「autofocus」(HTML5をサポートするすべてのブラウザーで機能します)を使用し、JSベースのシムを使用して、古いブラウザーに下位互換性サポートを徐々に追加する必要があります。

基本的な作業を完全に行う jQueryスニペット と、実際に動作するデモを次に示します。

パスワードマネージャーなどの特殊なケースを処理したい場合は、これを変更できますが、デフォルトのHTML5互換ブラウザー機能のみがエミュレートされるようにコードを変更せずにそのままにし、エンドユーザーエクスペリエンスが全体で一貫するようにすることをお勧めします。ウェブ;パスワードマネージャーの開発者は、ユーザーが必要に応じてフィールドオートフォーカスに対応します。このようなEdgeのケースを見越して時間を無駄にしないでください。

同様のアプローチは、HTML5フィールド placeholders (ヒントテキスト)でも使用できます(使用する必要があります)。

4
MarcusTucker

オートフォーカスを行う場合は、フォーカスがそこに移動したことを示す明確な視覚的な「通知」も行う必要があります。色を変更したり、ボックスをフェードインしたり、矢印を点滅させたりする必要があります。

このようにして、カーソルが期待した位置にない場合でも、ユーザーは驚かないでしょう。むしろ、あなたは彼らにそれがあるべき場所を示し、彼らはそこにそれを見つけます。

4
floatingLomas

LinkedInのサインインページではオートフォーカスが使用されており、次のようになります。

enter image description here

私はそれは非常に明確であり、それを超える特別な長さには及ばないと思います。背景を着色するかもしれませんが、それは時々必須のフィールド表示として使用されます。

ところで、@ Coldnorthには同意しません-通常、Webページが読み込まれると画面のどこにもフォーカスがないので、「ユーザーがカーソルを期待した位置にないときに驚かれます」という本当の危険はありません。フォーカスはオートフォーカスに表示されるか、ユーザー自身がどこかに配置した場合に表示されます-いずれにしても、オートフォーカスは無効になります。

2

フォームを使用することがページの主な目的である場合にのみ、オートフォーカスを実行します。特にユーザーが誤ってキーボードのEnterキーを押した場合、サイトのホームページに検索ボックスまたはサインインフォームを自動入力すると混乱を招く可能性があります。

ブラウザがフィールドに自動入力する限り、これは問題になりません。オートフォーカスを使用すると、ユーザーはEnterキーを押すだけでデータが入力されたフォームを送信したり、必要に応じてタブ移動していくつかの変更を行ったりできます。

私がチェックする唯一のことは、フォーム項目のいずれかにすでにフォーカスがあるかどうかを確認することです。フォームへの入力の途中で、最初のボックスにフォーカスを戻すのは本当に面倒です。

1
bendur

オートフォーカスは、Webページの主な目的がフォームでデータを収集することである場合、ユーザーにとって非常に役立ちます。これを使用する場合は、最初のフィールドがスクロールせずに見える範囲にあることを確認してください...最初のフィールドにページをスクロールすると、ユーザーは非常に混乱します。オートフォーカスが必要な場合とそうでない場合があります。ログイン専用のログインページがある場合は、必ず最初のフィールド(ユーザー名)にフォーカスしてください。ログイン機能を含むホームページ(右上など)では、そこにオートフォーカスを設定する必要はありません。

また、ALTと文字の組み合わせを使用してそのフィールドに直接移動できるキーアクセラレータ機能も気に入っています。これらを長い形式で自由に使用することは、天の恵みとなる可能性があります。

フォーカスするための主な方法として、bodyタグのオートフォーカス機能を使用します:<body onload="document.myformname.myfieldname.focus();">

0
johnbmull