ボタンには、押せる状態と押せない状態以外にも、ロード中という状態があります。このロード中という状態は通常数秒以内で処理されるため、ユーザーには見えません。しかし通常よりも処理に長い時間がかかる場合、ロード中の状態を見せないことはアクションエラーを誘発します。
アクションエラー
もしアクションを実行するのに自分が想定したよりも長い時間がかかったら、ユーザーはシステムが自分のリクエストを実行しているのかどうかを知る必要があります。何も起こっていないように見えたとしたら、彼らは正しくボタンを押せなかったと思うでしょう。この誤解が、彼らに再度ボタンを押させてしまいます。
ユーザーが２回以上ボタンを押すと、システムの処理が増えるだけでなく、操作が二重になります。状況によっては、ユーザーだけでなく、あなたにとってもフラストレーションになるような重大なエラーに繋がりかねません。
たとえば、ユーザーはうっかりメッセージを複数回送ったり、フォームを何度も送信したり、同じプロダクトを２回注文するかもしれません。こうしたアクションエラーによって、あなたが対処し、片づけなければならない余計なデータが作られます。そしてときには、そういったデータを片づけることは時間とコストがかかるのです。
プログレスボタン
こうしたエラーを防ぐためには、２秒以上かかる操作にはプログレスボタンを使う必要があります。ある研究によれば、ユーザーはページの読み込みが２秒以下で完了することを期待しており、それ以上は我慢できないといいます。
プログレスボタンは、ユーザーにロード中であることを示す視覚的な合図を送ることができます。プロセスが進行中であるとわかれば、ユーザーは再度ボタンを押すことはないでしょう。アクションエラーを起こさせないためには、プロセスが進行中のときにはボタンを押せない状態にすることが重要です。
ボタンの外側にロード中の表示を出すこともできますが、理想的ではありません。ユーザーはボタンを押すとき、視線をボタンに置いています。ボタンの中にロード中の状態を表示すれば、それはユーザーの視界の中に現れます。処理が進行中であることを示すものが別の場所に表示されるということは、ユーザーがそれを探さなければいけないということであり、彼らはそれを見落とすかもしれません。
プログレスボタンは簡単に導入でき、そのスタイルには一貫性があるべきです。こうすれば、ユーザーにとってはロード中であることが分かりやすくなりますし、ボタンが画面上の他の要素と競合することもないでしょう。ロード中の表示のために、ボタンのサイズや範囲を大きくするべきではありません。また、ボタンに特別な背景色を持たせる必要もありません。その代わりに、透明な背景色を使ってボタンが押せない状態を示し、ロード中の表示のために明確なコントラストを作りましょう。
何の処理が進行中なのかユーザーが分かるように、ロード中の表示はボタンのラベルを隠すべきではありません。このロード中の表示とラベルを同時に収めるだけのスペースが無ければ、これを実現することは難しいでしょう。その場合は、円形の表示の代わりに線形の表示を使うことができます。このアプローチなら、ボタンのラベルを表示したままで、ボタンの中にロード中の表示を出すことができます。もしボタンに角があるならば、ボタンの上端を使って処理の進捗を表すこともできます。
進行中の処理をユーザーに分かりやすく伝えるためには、ボタンのラベルをシステムが現在おこなっている処理を示すように変えることもできます。たとえば、元々「送信する」だったラベルを「送信中」に変えれば、ユーザーは待っている間、何が進行中なのか知ることができます。ボタンに長いラベルを表示するだけの大きさが無い場合は、このアプローチは有効ではないかもしれませんので注意してください。
２秒ルールを守ろう
ボタンをデザインするとき、ロード中の表示について考えるデザイナーはほとんどいません。しかし処理に２秒以上の時間がかかるなら、ユーザーにロード中の表示を見せることは非常に重要です。プログレスボタンはこれを実現するためのコントロールです。あなたを困らせるようなアクションエラーをユーザーに起こさせないために、これを活用しましょう。
