Webサイトにおいて状況を伝えるシステムステータスの可視性（英: Visibility）は、ウェブサイトのユーザビリティ研究の第一人者ヤコブ・ニールセン（Jakob Nielsen）氏のユーザビリティ10原則のひとつです。
システムの現在の状態を伝えることで、ユーザーはそのシステムを操作、制御している感覚となり、この感覚こそが信頼を築くのに役立ちます。
この記事では、Webサイトでシステムの状況をうまく伝えることができる、4つのインタラクティブで視覚的なフィードバック方法をご紹介します。
1. ユーザーのロケーションや進行状況を表示する視覚的フィードバック
いまどこにいる？
迷子になりたいというひとはあまりいないでしょうが、現実の世界だけでなくデジタルの世界の両方で起こり得ます。
アプリ内のどこにいるのかユーザーに知らせることが、優れたナビゲーション体験に不可欠と言えます。アプリとWebサイトの両方において、現在選択されているナビゲーション設定をハイライト、強調し、ユーザーが今どこにいるのか、現在地を理解しやすく表示してみましょう。
Google Bottom Bar Navigation Pattern — Mobile UX Design by Aurélien Salomon ➔
手順を完了するために必要なステップ数は？
オンライン決済など特定の操作を完了するために必要なステップ数をすることは、ユーザーが手順完了までにどれくらいの時間が必要なのか予測するのにも役立ちます。
Survey knowledge checking app by SELECTO
2. ユーザー行動の確認
ユーザーアクション
ウェブサイトやアプリでのすべてのインタラクティブなイベントに、即座にフィードバックを提供することが重要となります。
一瞬の視覚的なフィードバックは、アプリがユーザーのアクションを正常通り受け取ったことを認め、ユーザーが操作しているという感覚を強めることで、同じボタンを2回タップするなどのエラーを防ぐことができます。
基本的にシステムがユーザーのタップ・クリックを受け取ったことを示すことが重要となります。
Button hover and active states by Ali Ali
ただし場合におっては、ボタンそのものの状態を変更することも大切です。このケースでは、視覚的なフィードバックも効果的で、目立ちやすく分かりやすいものを心がけましょう。以下は、視覚的なフィードバックを効果的に利用したサンプル例です。
いいね！ボタンをクリックしたとき
Spread love, not viruses by Charles Patterson
スイッチなどをオン/オフするとき。ボタンの色の変化は、ユーザーに現在の状況を伝えるヒントとなります。
Switcher XLIV by Oleg Frolov
商品や記事、アイテムなどをブックマークするとき。
Bookmark interaction [SVG animation] by Oleg Frolov
商品をカートに追加したとき。この場合、視覚的なフィードバックによって、商品が無事カートに追加されたことをわかりやすく示しましょう。
Coffee Ordering Animation (Starbucks) by Nhat M. Tran
3. システム状況を伝える視覚的なフィードバック
システムがなにかを行っていることを表示
システムの読み込みに数秒以上かかる場合は、ユーザーに即座にフィードバックを提供する必要があります。待ち時間に応じて、以下サンプル例のような読み込みローディングアニメーションを使用することをオススメします。（通常、10秒未満の操作とする）
Infinite Loading Loop by renatorena
または進捗プログレスバーも良いでしょう。（10秒以上の待ち時間がある場合）
Pumping Loading Animation by Allen Zhang
これらのローディングアニメーションは、システムがきちんと機能していることを伝え、ユーザーの不安を和らげるのにも役立ちます。
特にモバイルアプリの場合、アプリを最初に起動する際にスプラッシュスクリーンを使用することもできるでしょう。うまく活用することで、はじめてのユーザーに好印象を与え、「アプリの起動を待っている」ということを興味は切り替わります。
Logo splash screen by Gleb Kuznetsov✈
コンテンツの読み込み
コンテンツの読み込みに時間がかかってしまう場合は、「スケルトン・スクリーン（英: Skelton Screen）」という特殊なタイプのブロックコンテナを活用してみましょう。
読み込み中に一時的に表示されるこのコンテナは、待機時間を軽減するのに使用されており、データの読み込みが完了し、利用に可能になり次第、実際のデータと置換していく方法です。以下のサンプル例を参考にしてみましょう。
Skeleton Loader by Ginny Wood
このスケルトン・コンテナは、デスクトップとモバイルアプリのどちらにも適用できます。
Skeleton Loading Animation by Shane Doyle
4. トリガーとなるイベント
通知・インジケーター
効果的な通知（英: Notification）の目的は、ユーザーに新しいイベントが起こっていることに注意を向けさせることです。
アニメーション効果はユーザーの注意を自然と集めるため、通知には控えめなアニメーションを利用してみましょう。人間の目は、動いているものに焦点をあわせるようになっています。
Notifications by Aleksei Kipin
ユーザーアクションのリクエスト
たとえばユーザーの作成したパスワードの強度が弱かったり、無効なメールアドレスを入力したなど、システムがユーザーのアクションを要求するケースはたくさんあります。
常に適切で視覚的なフィードバックをつかって、問題についてユーザーに前もって通知することが重要となります。
Inline Email Validation by Derek Reynolds
より多くのコントロールが、より良いユーザー体験につながる
視覚的なフィードバックは、優れたデザイン設計でも見落とされがちですが、実際にはすべての体験がつながっています。
ユーザーは、ボタンなどのUIを操作するときに、予測が可能できること、そして独自にコントロール、制御することを期待しています。そのため、アニメーションを利用した視覚的なフィードバックが今後ますます必要となっています。
アニメーションの参考にしたい記事まとめ
実際にフィードバック向けアニメーションを作成するときは、SVGファイルを利用したLottieがオススメです。Gifアニメーションよりも断然軽量で、読み込みも早いですよ。
UXデザインにおけるアニメーションの基本原則とルールをまとめて紹介してます。インターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。
実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。
ディズニー社の現場で長年培われ、40年近くむかしに誕生したアニメーションの基本原則12個（英: 12 Principles of Animation）を、CSSアニメーションで再現しています。（HTML/CSSサンプルコード付き）
サムネイル@ : Birds Guide APP by Walid Beno – Dribbble
参照元リンク : 4 Ways To Communicate the Visibility of System Status in UI by Nick Babich – UX Planet
