検索ボックスの使いやすさを高める自動フォーカスについて

ブログ記事の転載です。

Webサイトの検索ボックスは利用頻度の高いUI（ユーザーインターフェイス）だと思いますが、検索ボックスにおいて「ページを開いた時点ですぐに文字入力ができるかどうか」は使いやすさに影響する1つの要素だと考えています。

検索エンジンのGoogleでは、ページを開いた時点で検索ボックスの入力欄にカーソルが合わさっており（フォーカスされており）、すぐに検索キーワードが入力できるようになっています。

Googleの検索ボックスの挙動。ページを開いた時点で検索ボックスにフォーカスが当たっており、利用者が検索ボックスにカーソルを合わせる必要がなく、すぐに文字を入力できます。

機能としては当たり前のことのようですが、検索ボックスで自動的にカーソルが合わせるようにするには実装時に少し工夫が必要です。

※この記事では、入力欄に「カーソルが自動で合わさること」を「自動フォーカス」と呼びます。

検索ボックスで自動フォーカスされないと利用者の負担が増えてしまう

検索ボックス入力欄にカーソルが自動的に合わない（自動フォーカスされない）場合は、検索を完了するまでに以下の4つの操作を必要とします。

・検索ボックスが表示されているページを開く。
・検索ボックスの入力欄にマウスカーソルを合わせてクリックする（入力できるようにする）。
・検索キーワードを入力する。
・検索ボタンを押して（もしくはEnterキーを押して）検索する。

ここで問題なのは、2番目の「検索ボックスの入力欄にマウスカーソルを合わせてクリックする（入力できるようにする）」という余計な操作が増えることです。これは利用者に不要な負担をかけている状態です。

※スマートフォンやタブレットでは自動フォーカス時にディスプレイ上のキーボードが表示されてWebページの表示領域が一時的に狭くなるため、自動フォーカスを設定するか否かは状況に応じて判断するのが良いと考えます。

操作手順が1つ増えることの何が問題なのか

「操作手順が1つ増えるだけ」という捉えかたもありますが、操作が1つ増えるということは利用者にとって大きなストレスになると考えます。

特にフリーワード検索の場合は、利用者が自由に検索条件を決めるために1度の検索で目的の項目（記事や商品など）を見つけられるとは限りません。

その場合の利用者は目的の項目を見つけられるまで複数回に渡って検索を繰り返すか、検索を繰り返すことに疲弊してWebサイトから離脱します。

さらにECサイトやメディアサイト、ブログサイトなどは1度の訪問で目的を達成して終わりということは少なく、繰り返し訪問する利用者が多いはずです。

例えばあるECサイトに年間で20回訪問し、1回の訪問当たり5回検索をおこなうサイト利用者が存在すると仮定すると、利用者は20訪問×5回検索で計100回検索することになります。

この時にひと手間増えている状態では、検索回数100回分の余計な操作をさせてしまうことになります。

これは改善したい課題です。

改善方法

Webサイトの状態にもよりますが、JavaScriptのfocus()メソッドを用いることで検索ボックスの自動フォーカスに対応できます。

以下はコーディング例です。

// ページ読み込み時に検索ボックスに自動的にフォーカスを当てる（画面横幅が1001px以上の場合）
var $window = $(window);

// min-widthを用いて記述することでより省略できそうですが、別箇所のコード記述と合わせるために以下のように記述しています
$window.on('load resize', function() {
 if (window.matchMedia('(max-width:1000px)').matches) {
 } else {
   $('#js-search-form__input').focus();
 }
});

※inputタグにautofocus属性を付与する方法もあり、そのほうがよりシンプルに実装できます。ですが次の理由からJavaScriptによる実装を採用しています。

※スマートフォンやタブレットでは文字入力時にディスプレイ上にソフトウェアキーボードが表示されますが、自動フォーカスによって意図せずソフトウェアキーボードが表示されてしまう状態は利用者がストレスを感じやすいと考えています。そのため画面サイズによって自動フォーカスの有無を出し分けられるJavaScriptによる実装方法を選びました。

ドロップダウンメニューなど、ページ表示時に検索ボックスが表示されていないページデザインの場合は以下のような方法でも対応できます。

// ドロップダウンメニューを用いる場合のコード例
$('#js-drop-down--is-search').on('click', function() {
 $(this).toggleClass('is-active');
 $('#js-search-form__input').focus();
});

この対応によって自動的に検索ボックスの入力欄にフォーカスが当たるようになります。これにより検索ボックスの入力欄にマウスカーソルを合わせる操作が不要になり、利用者の負担を減らせます。

実例

以下は過去にデザインとコーディングをおこなった検索ボックス実例です。

SHIBUYA GAMEサイトの検索ボックス

検索用の虫眼鏡ボタンを押して検索ボックスが表示された時点で入力欄にフォーカスが当たるようになっており、すぐに文字が入力できます。

ログイン情報申請フォーム

自動フォーカスは一般的なメールフォームにも応用できます。メールフォームの最初の項目に自動フォーカスが当たるように設定することで、入力が始めやすくなります。

まとめ

・検索ボックスの入力欄は自動フォーカスに対応すると使いやすくなる。
・操作手順が1つ増えることは、利用者にとって大きな負担になってしまう可能性が高い。
・改善方法として、JavaScriptのfocus()メソッドを用いることで自動フォーカスに対応できる。
・自動フォーカスはメールフォームにも応用できる。

使いやすさを高める小さな取り組みの積み重ねが、サイト全体の品質向上につながると考えて実践しています。

ブログ記事一覧
Twitter
元記事