インタラクションの制御に関する実装はユーザー体験に大きく影響するものの、デザインファイルやプロトタイプ上で表現することが難しく、システムの挙動を細かくデザイナーとエンジニアで調整するようなことも多いかと思います。しかし、このような時に取り入れられる技術的な実装パターンには名前がついていることも多く、デザイナーが実装パターンの名前を知っているだけでエンジニアとのコミュニケーションがスムーズになることも多いのではないでしょうか？
今回は、そんなちょっと技術的だけど知っておくだけで役立つコンセプトからインラタクション制御に関する「Debounce（デバウンス）」という実装パターンを紹介します。
連続したインタラクションを制御する必要性
Debounceの有効性をリアルタイム検索フォームを例に見てみましょう。
リアルタイム検索とは、ユーザーが検索キーワードを入力するたびに、その都度即座に結果が表示される検索機能のことを指します。
このようなフォームをそのまま実装すると、ユーザーが文字を入力するたびに検索が行われ、結果が画面に表示されます。このような実装には２つの問題があります。
不必要に検索リクエストが多くなることによるサーバー負荷
画面が頻繁に更新されることによる視覚的な不快感
Debounce処理をされていないリアルタイム検索フォーム
このような実装だと、フォームに文字が入力され るたびに検索結果が更新されるため、画面がちらつくように見えますね。
このような時、どうしたら良いのかとさまざま検討すると、おそらく多くの場合「毎回文字を打つたびに検索を行わず、入力が止まったタイミングで検索を行い結果を表示するのが良い」という結論に至ることが多いのではないでしょうか？
実はこのような実装には「Debounce処理」という名前がついており、この実装パターンを覚えておくだけで、「リアルタイム検索のインタラクションはDebounce処理を行う」という共通言語を使ったコミュニケーションをとることができるようになります。
ボタンを押すたびに何かが起こる、普通のボタンの実装
では、Debounceとはどのようなインタラクション実装なのでしょうか？
まずは通常のインタラクションを見てみましょう。何も制御されていないインタラクションでは、連続するユーザーのアクションそれぞれに対応してシステムに何かしらの連絡が行われるようになっています。
このように制御のない状態でリアルタイム検索を行うと、システムへ短期間に多くの連絡が行われることになります。これが頻繁なリクエストによるサーバー負荷や、画面の頻繁な更新といった問題を生むのです。
インタラクションの交通整理をするDebounce
では、Debounceという実装パターンを見てみましょう。
Debounce処理とは、頻繁に発生するイベント（= インタラクション）に対して、そのイベントがある一定時間内に再度発生しなかった場合のみ実行するように制御する手法です。
まさに、「毎回文字を打つたびに検索を行わず、入力が止まったタイミングで検索を行い結果を表示する」という仕様にぴったりの実装パターンですね。
Debounce処理がされたリアルタイム検索フォーム
上の例では、インタラクションに対してDebounce処理をすることで、ユーザーの入力に一定の間隔が空いた場合にのみ検索を実行するようになっています。実際に、「デザイン」と入力した後に一回、「システム」と入力した後にもう一回画面が切り替わるのがわかると思います。
技術的な挙動の命名を知っておくだけでもコミュニケーションがスムーズになることも
今回の検索リクエスト以外にも、Debounce処理はユーザーが連続して同じアクションを行う可能性があるUIに取り入れることができます。たとえば、フォームのバリデーションやリアルタイムの文字カウント、テーマ切り替えのトグルボタンなど、場合によってはサーバーとの通信を行わないようなケースでも取り入れることができます。
UX観点では、連続したユーザーインタラクションが可能なUIを作るタイミングで、このDebounce処理を覚えておくとより快適なユーザー体験を提供できそうです。
また、このような実装パターンの名前を覚えておくだけでもプロダクトの仕様に関するコミュニケーションに共通言語が生まれ、デザイナー、エンジニア、PM間でのコミュニケーションもスムーズになるのではないでしょうか？
