フィードバック マイクロインタラクション

Contact Price

UI・UXインターフェースフィードバック

User Interface - 2019.1.19 - Three Philosophers

トリガーで開始されたマイクロインタラクションは、ルールに則りユーザーにフィードバックを行います。オーブントースターが時間つまみを回すだけでスタートするのは素晴らしい仕組みですが、ユーザーは、ジーっと音を立てながらトースター内部がオレンジ色に熱を帯びていくという明確なフィードバックによって、動作を確認します。パンが焼きあがるまで、全く無反応ではユーザーは不安ですね。これはパソコンやスマートフォンのアプリケーションにおいても同様で、何らかの手段により進行状況を示す必要があります。

フィードバック

例えばローディング問題は、ビジネスにおいて最も重要な課題で、徐々に焼きあがっていくトーストと同様に、進行状況をユーザーに視覚的に示すことが求められています。

ローディングアニメーション

アニメーションは必ずしも良い効果をもたらすとは限りませんので、使いどころには注意が必要ですが、ロードが終わるまでは何もできない場合など、操作に影響の出ない範囲では有効的です。

スイッチの紹介ページでも語っていますが、スイッチの動きをよく観察すると、切り替え時にトグル部分がバウンド(バウンス)をしたり、背景部分にもフェードやモーフィング的な効果が加えられています。ユーザーに負荷のかからない自然なエフェクトは、心地よいフィードバックになりますので、積極的に導入を検討しましょう。

フィードバックは製品を特徴づける

ダン・サファー氏は著書の「マイクロインタラクション UIUXデザインの神が宿る細部」のなかでフィードバックは、製品全体の形態と並んで、製品の個性を決定づける要素だと言っても過言ではないと述べています。

堅牢でハイエンドなアプリケーションに、上図のようなポップに展開されるマウスのアニメーションは不向きです。色彩などにも注意しながら、簡潔で親しみやすく、製品の特徴を損なわない視覚効果を設計しましょう。

視覚、聴覚、触覚

フィードバックの表現にはビジュアル、サウンド、バイブレーションと3つの手段が考えられます。サウンドは視覚情報と比べて脳への伝達が早く、よりダイレクトな表現です。iOSではアプリ決済完了時に「チャキーン」という甲高い音が鳴りますが、個人的には、優れたフィードバックの一つだと思います。

触覚は意外なほど伝達力が低いようで、聴覚の100分の1ほどとも言われていて、用途が限られてきます。たしかに携帯端末の機種によってはバイブレーションが弱くて、メールの着信に気付かなかった経験も多いですね。メインとなる視覚情報、サウンド、バイブレーションと、すべてのフィードバックを見直し、より明確な表現にしていきましょう。

まとめ

フィードバックは多様な表現が可能ですが、アプリの特徴に沿った設計を心がけましょう。トリガーで開始されたマイクロインタラクションの一貫性を損なうことのないように、発生しうるコンテクスト(状況)を考慮しながら、適切なタイミングで組み込んでいくことが大切です。

マイクロインタラクション概要

トリガー:マイクロインタラクション

ルール:マイクロインタラクション

フィードバック:マイクロインタラクション

ループとモード:マイクロインタラクション