押しても何も起きないとき
約0.1秒は即時、1秒は流れを保ち、10秒で注意が離れます（Miller, 1968; Card et al., 1991; Nielsen, 1993）。0.1秒以内に変化がないと再度押され、二重決済の原因になります。即座のマイクロインタラクションで防ぎます。
ボタン内での見せ方
進捗を示すと待ちに耐えやすくなります（Myers, 1985）。小さなスピナーと「決済中…」を、幅を固定して表示します。10秒以上は進捗表示（Sherwin, 2014）、画面全体はスケルトンへ。アニメーションで体感時間も変わります（Harrison et al., 2010）。
終わり方とアクセシビリティ
成功ならチェックを一瞬表示して戻し、失敗なら再度有効にして理由を伝えます。タイムアウトも設けます。WCAG 2.2の4.1.3に従いaria-liveで「処理中」を伝えます。
よくある質問
- 処理中は無効にする？
- はい、重複防止のため。ただし状態を明確に示します。
- 進捗表示を使うのは？
- 数秒以上かかる処理です。
出典確認日：2026-10-27
参考文献
- Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 応答時間の閾値の古典です。
- Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 181–186). ACM. 0.1秒・1秒・10秒の時間定数です。
- Nielsen, J. (1993, January 1). Response time limits. Nielsen Norman Group. 応答時間の3つの限界です。
- Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. 進捗表示で待ちが受け入れやすくなる研究です。
- Harrison, C., Yeo, Z., & Hudson, S. E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1545–1548). ACM. アニメーションで体感時間が変わる実験です。
- Sherwin, K. (2014, October 26). Progress indicators make a slow system less insufferable. Nielsen Norman Group. スピナーと進捗バーの使い分けです。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 4.1.3ステータスメッセージです。