モバイルフォームの確定ボタンはどこに設置すべきか?

anthony

UX Movementの著者で編集長。素晴らしいウェブ体験を愛し、ユーザーのために戦う。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Why Users Miss Form Buttons Placed in the Action Bar (2015-06-02)

モバイルフォームのボタンをどこに置くかは、ユーザーのタスクの完了と効率に影響します。もしボタンがユーザーが予期するところに置かれていなければ、ユーザーはタスクを放棄し、フォームから離れてしまうかもしれません。

ボタンを探すのに余計に数秒かかっただけでも、ユーザーはイライラし、戻るボタンを押すことがあります。そのため、フォームの入力を完了したら、ボタンはユーザーの目の前に表れるべきです。

多くのモバイルサイトは、この点を間違っており、フォームボタンをアクションバー(つまりナビゲーションバー)に置いています。調査によると、ユーザーはしばしばアクションバーに置いてある送信ボタンを見逃してしまいます(出典)。また、アクションバーにある保存ボタンも見逃し、設定を保存しないままフォームを離れてしまいます。

予想外の送信ボタン

ユーザーがアクションバーにある送信ボタンを見逃してしまうのは、フォームの入力を完了したときにユーザーの目が向けられている場所が原因です。フォームの入力を完了すると、ユーザーの目はページのいちばん下に移動しています。

送信ボタンがユーザーが予期するところにない

送信ボタンがユーザーが予期するところにない

フォームの入力を完了したとき、ユーザーの目はページのいちばん下を見ています。そこに送信ボタンがないと、ユーザーは混乱し、どのようにしてタスクを完了してよいか分からなくなります。

ほとんどのユーザーはアクションバーに送信ボタンがあるとは予想していません。アクションバーは、ページの右上角に視線を移さなければならないため、不便な位置なのです。

ユーザーは、上から下に向けて進んでフォーム入力を完了したため、送信ボタンが一番上にあるのは直観に反しているのです。そこからアクションバーに上がって戻るのは不自然に感じてしまいます。それはユーザーが予期していることではないので、送信ボタンをそこに置くべきではありません。

送信ボタンを固定する

ユーザーはフォーム入力を完了したとき、送信ボタンはページのいちばん下にあるものと予想しています。でももしユーザーがフォームを上にスクロールした場合、それを見失ってしまうかもしれません。

fixed-submit-button

ユーザーは自分が入力したものをチェックしたり変更したりするために、ページを上にスクロールすることがあります。そうすると、ユーザーは送信ボタンが見えなくなって、またそれを探すために下までスクロールしなければなりません。

余計な仕事をさせないためにも、ユーザーにいつでも見えるように、送信ボタンは固定のフッターに置きましょう。そうすれば、ユーザーは準備ができたらすぐフォームを送信することができます。

ユーザーがフォームを入力し終えたあとは、余計な仕事をさせてはいけません。もし、送信ボタンを見つけたり送信ボタンまでスクロールするためにユーザーが目や手を動かさなければならないとすれば、そのサイトは効率的とはいえません。

不明確な保存ボタン

ユーザーが設定を保存せずにフォームを離れてしまうのは、不明確なアクションボタンバーのせいです。アクションバーは、戻るボタン、ページタイトル、保存ボタンがあります。しかし、保存ボタンがいちばん識別しにくいです。

unclear-save-button

ユーザーが設定を選択すると、保存しなければならないということに気付かないため、戻るボタンを押す傾向にあります。保存ボタンはタスクの基本的な行為ですが、角のほうにグレーのチェックのアイコンとして隠れています。

ユーザーは、保存しろと言ってくれるものがないので、選択しただけで設定を保存できたと考えてしまいます。それだけでなく、ページタイトルも、戻るボタンの隣に置かれていると行動を誘引するもののように見えてしまいます。アクションバーの不明確さがユーザーの間違いを引き起こすのです。

保存ボタンを固定する

保存ボタンをアクションバーに入れるのでなく、固定のモーダルなフォームを使いましょう。そうすれば、ユーザーは紛らわしい戻るボタンではなく、明確な保存・キャンセルボタンを使うことができます。

fixed-save-button

キャンセルボタンは戻るボタンとして機能します。違いは、キャンセルボタンの場合、離れる前に設定を保存することが必要で、そうしないと設定は失われてしまうことを伝えてくれる点です。保存ボタンにはラベルがあり、サイズや色の面でももっと目につきやすいです。

アクションバーに置くべき唯一のものは、タスクを表すページタイトルだけです。保存・キャンセルボタンは別の固定フッターに置かなければなりません。これでボタンは常に視認できるようになり、ユーザーはフォームの入力を速く簡単に完了できるようになります。

まとめ

アクションバーは、ページの遷移にまつわるボタンを置くにはいい場所ですが、タスクを完了するためのボタンを置くのに適切な場所ではありません。モバイルフォームのボタンは固定フッターに置くことで見逃しにくくなり、ユーザーの期待にもマッチしています。

ボタンを置く位置はユーザーがタスクを完了する方法に大きな影響を与えます。モバイルサイトをデザインしているからといって、すべてのものをアクションバーに詰め込んではいけません。タスクの完了と効率を考え、フォームボタンを置くべき場所に置きましょう。


イベント