UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

私は普段、画面共有をするときにmacOS標準のズーム（拡大鏡）機能を使って見やすいように画面一部をズームして見せるときがあります。

そんなとき、ふと「これって普段からズーム機能を使うようなユーザーだと困るのでは？」と気付いた事象があります。

気がついたこと

「保存」ボタンを押すと保存処理が実行され、画面上に「保存しました。」的なフィードバックが表示されるよくあるデザインでした。

しかし、私は画面を拡大していたのでそのフィードバックに気がつかず、少し待っていました。
少ししてから「あれ？終わっている？」とズームを解除したのですが、そのフィードバックは数秒経つと自動的に消える表示だったため、どうやら解除したときにはすでに消えていました。

自動的に非表示になることの前提

数秒経つと自動的に非表示になるトースターは、ズーム機能を使わずに常に画面をすべて見ていることを前提とした設計と言えます。

「わざわざ非表示にするのが面倒だろうから、善意で時間が経ったら消しておいたよ」ということです。

しかし、画面を一部拡大するユーザーにとっては、フィードバックを見逃す可能性を生んでしまいます。

普段からズーム機能は使っている（画面共有時に一瞬だけですが）にも関わらず、持ったことがない視点でした。

フィードバックをすぐ近くに置く

また、一般的なフィードバックは画面下や画面左上など、ボタンから離れた位置でも固定で表示される場合があります。

もちろん、フィードバックの位置がバラバラだとユーザーが混乱するため、特定の位置に固定で表示するのは重要です。

しかし、それだとズーム機能を使っているユーザーは気付かない可能性があります。
フィードバックをすぐ近くに置くか、あるいはボタン自体にローディング表示を実装するのも手かもしれません。

Vue.jsのコンポーネント集のVuetifyでは、ボタン自体にローディング表示が実装されています。

必ずしも非表示にすることが最善ではない

振り返ってみると、フィードバックに気付いていたとしても、勝手に消えてしまうせいでエラーメッセージが最後まで読めなかった経験は過去ありました。

正常なフィードバックであれば自動非表示も手ですが、エラーの場合はユーザーが意図して消すまで勝手に非表示にしないなどするのも必要かもしれません。

まとめ

今回のように、普段よく見かけるUIも、ふとしたきっかけで「あれ？これって本当にこれでいいの？」と思うケースがあります。

すべてに対応しようとするとコストがかかりますし、最終的にどうするかは案件やクライアントが見据えているゴールによります。
ただ、「よく使われているからこれが正解」と思考停止にならないことが大切ですね。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！