ボタンを押したのに何も起きない。この状態が数秒続くと、利用者は押せていないと判断してもう一度押します。フォームであれば二重送信になり、決済であれば二重請求の問い合わせにつながります。
原因は処理が遅いことではなく、処理が始まったことを伝えていないことです。同じ待ち時間でも、進行中だと分かっていれば待てます。分からなければ、失敗したと判断されます。
この記事では、伝えるべき3つの状態、待ち時間の長さごとの見せ方、確認すべき箇所、そして過剰な演出との線引きを整理します。
この記事でわかること
・伝えるべきは、押した・処理中・終わったの3つ
・反応がないと同じ操作が繰り返される
・待ち時間の長さで適切な見せ方が変わる
・エラーも結果として伝える必要がある
・過剰な演出は逆に操作を遅くする
・確認は実際に操作して行う
伝えるべき3つの状態
操作に対する反応は、3つの段階に分けて考えると漏れがなくなります。
| 段階 | 伝えること | 伝えない場合に起きること |
|---|---|---|
| 押した瞬間 | 操作を受け付けた | 押せていないと判断される |
| 処理中 | 進行している | 固まったと判断される |
| 完了 | 終わった、結果はこう | できたか分からず不安が残る |
この3つのうち、最も抜けやすいのは処理中の表示です。開発環境では処理が速いため気づかず、実際の回線速度で問題が表面化します。
押した・処理中・完了の3段階で考えると漏れがない。
処理中の表示は、開発環境では気づきにくい。
反応がないと同じ操作が繰り返される
反応の欠如は具体的な損失につながります。
| 場面 | 起きること | 事業への影響 |
|---|---|---|
| 問い合わせフォーム | 二重送信 | 重複対応の工数 |
| 購入手続き | 二重注文 | 返金対応、信用の低下 |
| 予約の確定 | 二重予約 | 枠の無駄、当日の混乱 |
| 資料請求 | 諦めて離脱 | 見込み客の損失 |
| ログイン | 何度も試行 | アカウントの制限 |
特に決済と予約では、二重実行の影響が大きくなります。表示による対策に加えて、送信後にボタンを無効化する処理も併せて実装してください。
反応がないと、二重送信や離脱という具体的な損失になる。
表示だけでなく、ボタンの無効化も併用する。
待ち時間の長さで見せ方が変わる
処理時間によって、適切な伝え方が変わります。
| 待ち時間 | 適した見せ方 | 理由 |
|---|---|---|
| ごく短い | 押した瞬間の変化のみ | 追加の表示は煩わしい |
| 数秒程度 | 処理中であることの表示 | 進行が分かれば待てる |
| 長い | 進捗の度合いを示す | 終わりが見えないと不安になる |
| 非常に長い | 完了時に別途通知する | 待たせ続けない |
終わりが見えない待ち時間は、実際の時間より長く感じられます。進捗が分かる表示にすると、同じ時間でも離脱が減ります。
表示速度そのものの改善はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。
終わりが見えない待ち時間は、実際より長く感じられる。
進捗が分かると、同じ時間でも離脱が減る。
エラーも結果として伝える
処理が失敗した場合も、結果を伝える必要があります。何も表示されないのは、成功と区別がつきません。
- 何が起きたかを、利用者の言葉で説明する
- どこに問題があるかを、該当箇所で示す
- どうすれば解決するかを書く
- 入力した内容を消さない
- 再試行の方法を示す
入力内容が消えるエラー画面は、最も離脱を生みます。やり直す気力を失わせるためです。技術的な理由で保持できない場合でも、その旨を先に伝えてください。
エラー表示の設計は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計も参考になります。
失敗したことも結果として伝える。
入力内容が消えるエラーは、最も離脱を生む。
過剰な演出は操作を遅くする
反応を伝えることは重要ですが、演出が過剰になると操作の妨げになります。
| 状態 | 起きること | 対応 |
|---|---|---|
| 動きが長い | 次の操作まで待たされる | 短くする |
| すべての要素が動く | どこを見ればよいか分からない | 重要な箇所に限定する |
| 音や振動が多い | 煩わしい | 必要な場面に限る |
| 確認が多すぎる | 操作の手数が増える | 取り消せない操作に限る |
動きは、状態が変わったことを伝えるためのものです。装飾として動かすと、利用者の注意が分散します。特に繰り返し行う操作では、短いほうが快適です。
動きの使い方はマイクロコピーとは？CVRを動かす短い文章の書き方と併せて設計すると効果的です。
動きは状態変化を伝えるためのもの。装飾ではない。
繰り返す操作ほど、短いほうが快適になる。
確認は実際に操作して行う
設計上は考慮していても、実装で抜けていることがあります。
- 実際の回線環境で、各操作を試す
- 送信ボタンを押した直後の表示を確認する
- わざと誤った入力をして、エラー表示を確認する
- 処理に時間がかかる操作で、進行が分かるか確認する
- スマートフォンでも同じ確認を行う
開発環境では処理が速いため、待ち時間の問題は表面化しません。実際の環境で確認してください。特に回線が遅い状況を想定した確認が必要です。
開発環境では待ち時間の問題が表面化しない。
実際の環境で、誤入力も含めて操作して確認する。
優先順位のつけ方
すべてを一度に整えるのが難しい場合、損失の大きい箇所から着手してください。
| 優先度 | 対象 | 理由 |
|---|---|---|
| 最優先 | 決済、予約の確定 | 二重実行の影響が大きい |
| 高い | 問い合わせフォームの送信 | 重複対応と離脱 |
| 高い | エラー時の入力内容の保持 | 離脱に直結する |
| 中程度 | 検索や絞り込みの処理中表示 | 待ち時間による離脱 |
| 低い | 装飾的な動き | 実害が小さい |
成果に直結する操作から順に確認してください。装飾的な演出の改善は、実害が小さいため後回しで構いません。
どこで離脱しているかの把握にはヒートマップ分析のやり方｜何を見て、どこを直すのかが使えます。操作の確認方法はユーザビリティテストのやり方｜低コストで始める実践手順を参照してください。
二重実行の影響が大きい操作から整える。
装飾的な演出の改善は後回しでよい。
工程全体の中で見る
この工程の前後には、情報の分類と構造の設計があります。全体の流れは情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。
よくある失敗
処理中の表示を実装しない
開発環境では速いため気づきません。実際の回線速度で確認してください。
送信ボタンを無効化しない
表示だけでは二重送信を防げないことがあります。処理も併せて実装してください。
エラー時に入力内容を消す
やり直す気力を失わせます。最も離脱を生む設計です。
すべての要素に動きをつける
どこを見ればよいか分からなくなります。状態が変わる箇所に限定してください。
正常な操作しか確認しない
誤入力や通信の失敗も含めて確認してください。実際に多く起きるのはこちらです。
よくある質問
処理中の表示はどのくらいの時間から必要ですか
明確な基準はありませんが、押してから反応まで間があると感じる程度なら必要です。判断が難しい場合は、実際に操作してもらい、待たされたと感じるかを確認してください。
完了の表示は画面遷移でよいですか
遷移先で完了が明示されていれば問題ありません。ただし遷移に時間がかかる場合、その間の表示も必要です。また遷移後の画面で、何が完了したのかが分かる記述を入れてください。
動きはどのくらいの長さが適切ですか
短いほど操作は快適になります。長い動きは初回は印象に残りますが、繰り返し使う利用者にとっては待ち時間になります。頻繁に行う操作ほど短くしてください。
音や振動は使うべきですか
場面によります。公共の場で利用される可能性を考えると、音は慎重に扱うべきです。また利用者側で無効にしている場合があるため、音だけに頼らない設計にしてください。
既存サイトのどこから確認すべきですか
問い合わせフォームの送信直後から確認してください。最も成果に近く、二重送信の影響も出やすい箇所です。次に決済や予約があれば、そちらを確認します。
まとめ
ボタンを押しても何も起きない状態が続くと、利用者は押せていないと判断してもう一度押します。フォームであれば二重送信、決済であれば二重請求の問い合わせにつながります。原因は処理が遅いことではなく、処理が始まったことを伝えていないことです。同じ待ち時間でも、進行中だと分かっていれば人は待てます。
伝えるべき状態は、押したこと、処理中であること、終わったことの3つです。このうち最も抜けやすいのは処理中の表示で、開発環境では処理が速いため気づかず、実際の回線速度で問題が表面化します。また処理が失敗した場合も結果として伝える必要があり、特に入力内容が消えるエラー画面は最も離脱を生みます。
一方で、演出が過剰になると操作の妨げになります。動きは状態が変わったことを伝えるためのものであり、装飾として動かすと利用者の注意が分散します。特に繰り返し行う操作では短いほうが快適です。確認は実際の環境で、誤入力も含めて操作して行ってください。着手する順序は、二重実行の影響が大きい決済や予約からです。
当社ではホームページ制作において、フォームや操作導線の設計をご相談いただけます。既存サイトの点検はお問い合わせよりご連絡ください。
