トースト

定義

トーストは、操作の結果を画面の隅にちょっとだけ表示し、数秒後にひとりでに消える短い通知です。 名前はトースターからパンがぽんと飛び出す様子に由来していて、実際に「保存しました」や 「リンクをコピーしました」といった一行のお知らせが、画面の下や上の端にすっと現れては 静かに引っ込みます。ユーザーが確認ボタンを押して閉じる必要もなく、作業の手を止める必要も ありません。ただ、いま行った操作がきちんと処理されたという事実を横目で確かめて、そのまま 先へ進めばいいだけです。そのためトーストは、流れをさえぎらない一番軽いフィードバック手段として 定着しました。

なぜ重要か

トーストが大切なのは、ユーザーを安心させながらも邪魔をしないからです。ボタンを押したのに 何の反応もないと、ユーザーは本当に押せたのか不安になり、同じボタンをもう一度押してしまいがちです。 そんなとき短いトーストが一行ぱっと現れれば、「自分の操作がちゃんと伝わったんだ」という確信が 生まれます。同時にトーストは自分から消え、背景をふさぐこともないので、確認を強いるモーダルとは 違ってユーザーの流れを少しも断ちません。ただ、この軽さはそのまま限界にもなります。ちらっと 現れてすぐ消えるので見逃しやすく、消えたあとは呼び戻すこともできません。ですから、必ずユーザーが 読んで判断しなければならない情報をトーストに載せてしまうと、それを見逃した人は何が起きたのかを 永遠に知ることができなくなります。だからこそトーストは、軽いお知らせだけに向いているという線を 守ることが大切なのです。

よくある間違い

• 必ず確認しなければならない重要なエラーをトーストで知らせてしまうことです。ちらっと現れて すぐ消えるのでユーザーはメッセージを見逃しやすく、見逃したあとは何が間違っていたのかを もう一度見る手段がなく、問題がそのまま埋もれてしまいます。
• トーストの表示時間を短くしすぎたり、いくつも一度に積み重ねたりすることです。読む前に消えたり、 通知が画面を埋め尽くしたりすると、本当に見てほしいお知らせが騒がしさに埋もれて、結局何も 伝わりません。
• トーストを、必ず押さなければならないボタンのように作ってしまうことです。トーストは通り過ぎる 通知なので、その中の操作を見逃してもユーザーが困らない程度に、負担なく載せるべきです。

実務のヒント

• トーストは流れをさえぎらない軽いフィードバックなので、保存成功のように知らせるだけでよい お知らせに使いましょう。ユーザーの確認がどうしても必要な場合や、見逃してはいけないエラーなら、 トーストの代わりにモーダルやインラインメッセージではっきりと引き止めておくほうが安全です。
• いま行った操作を取り消す余地があるなら、トーストに「元に戻す」のような短いアクションを載せましょう。 削除の直後にちょっと現れる取り消しボタン一つが、うっかりミスによる事故を大きく減らしてくれます。
• 人が一行を落ち着いて読める程度に表示時間をたっぷり取り、複数の通知が重なるときは一つずつ積んで 順番に見せましょう。急いでいるユーザーのために、手で先に閉じられる道も一緒に開けておくと親切です。

関連概念