UXに大事なアフォーダンス(Affordances)・シグニファイア(Signifires)・フィードバック(Feedback) とそれぞれの改善について

はじめに

UXデザインを改善しようとする際、どこから手をつければ良いか迷うことがあります。UXデザインを向上させるためには、アフォーダンス(Affordances)、シグニファイア(Signifiers)、フィードバック(Feedback)の3つの要素に分けて改善方法を検討すると、わかりやすくなります。これら3つの要素に分けて考えることで、UX改善に効果的にアプローチできることを学びましたので、それぞれの段階についてまとめてみました。

アフォーダンス(Affordances)とは

デザイン用語としてのアフォーダンスとは、人と物との関係のことです。Webデザインの例では、クリックやスクロール、スワイプなどの操作が挙げられます。元々の心理学の用語では、動物と物の間に存在する行為の関係性を表す言葉で、行為の選択肢の一つという意味合いが強いですが、デザインの領域では、要素に対する行為（操作）という意味で使われることが多いようです。アフォーダンスを適切にデザインすることで、ユーザーの利用可能性を広げるだけでなく、間違った操作を予防する効果も期待できます。

シグニファイア(Signifires)とは

シグニファイアとは、人と物との関係をユーザーに伝達するもので、わかりやすく言い換えると、行為(操作)へ誘導するためのヒントのことです。Webデザインの例では、クリックすることで意図した画面へ移動できるようにナビゲーションを工夫することや、スワイプが可能であることをわかりやすくすることが挙げられます。シグニファイアを適切にデザインすることで、ユーザーが目的を達成するまでストレスなく到達できます。

フィードバック(Feedback)とは

フィードバックとは、操作やアクションの後に即時の手応えや反応のことです。Webデザインの例では、クリックしたときのボタンの色の変化や、コンテンツの読み込み中や処理中のプログレスバーの表示などが挙げられます。フィードバックを適切にデザインすることで、ユーザーに正しい操作をしていることを確信させ、安心して操作することをサポートできます。

アフォーダンスを改善する方法

アフォーダンスには明示的なものと暗黙的なものがあり、特にWebデザイン領域では暗黙的なアフォーダンスが多く使われる傾向があります。例えば、画像をクリックすると拡大して表示されたり、左にスライドさせると削除される、一覧の一番上でさらに下にスクロール操作をすると最新情報に更新されるといった操作は、明確にUIとして示されず、ユーザーの経験によって成り立っています。

暗黙的なアフォーダンスはユーザーの直感に頼るため、学習コストが低い一方で、新しいユーザーには理解しづらい場合があります。逆に、明示的なアフォーダンスは誰にでも理解しやすいですが、デザインが煩雑になる可能性があります。したがって、広く一般化されたアフォーダンスではない限り、積極的に隠さない明示的なアフォーダンスを選択することが最善と言えます。

アフォーダンスを改善するためには、以下の点に注意することが重要です。

意図せず隠すアフォーダンスを避ける: ユーザーが直感的に理解できるように、明示的なアフォーダンスを優先する。
デザインシステムの活用: 既存のデザインシステムを利用するだけでなく、オリジナルのデザインシステムを構築する場合も、一般的なUIコンポーネントやパターンを参考にする。これにより、一貫性のあるデザインを実現しやすくなります。
多様な視点からの参考: マテリアルデザインやAppleのデザインシステムに加え、BootstrapやAnt Designなどの他のデザインフレームワークも参考にする。これらのフレームワークから得られるベストプラクティスを取り入れることで、オリジナルのデザインシステムを強化できます。
ユーザーテストの実施: オリジナルのデザインシステムを構築する際には、ユーザーテストを実施してフィードバックを収集し、アフォーダンスの改善に役立てる。

これらの方法を取り入れることで、アフォーダンスの質を向上させ、ユーザーが直感的に操作を理解できます。

シグニファイアを改善する方法

シグニファイアは、ユーザーに対して行為(操作)を誘導するためのヒントを提供します。例えば、ハンバーガーメニューのアイコンがナビゲーションを開くためのボタンを意味していたり、虫眼鏡のアイコンがキーワード検索を開始するためのボタンを意味しているなど、アイコン自体がシグニファイアの役割を果たしている場面をよく見かけます。

シグニファイアを改善するためには、以下の点に注意することが重要です：

複数の手段を組み合わせる: 一つの記号に頼らず、テキスト、コントラスト、色、シンボル、テクスチャなどを適切に組み合わせることで、ユーザーに対するヒントを強化します。
文化的背景を考慮する: アイコンやシンボルが異なる文化や世代に対してどのように解釈されるかを考慮し、普遍的に理解されるデザインを目指します。例えば、フロッピーディスクを知らない世代には保存の意味が伝わりにくい、郵便マークも各国でシンボルが異なることがあるなどを考慮する必要があります。
補足情報を提供する: アイコンだけでなく、テキストやツールチップを併用して意味を明確にすることで、ユーザーが直感的に操作を理解できるようにします。
一貫性を保つ: 同じ意味を持つシグニファイアを一貫して使用することで、ユーザーの混乱を防ぎます。

これらの方法を取り入れることで、シグニファイアの効果を最大化し、ユーザーが直感的に操作を理解できます。

フィードバックを改善する方法

Webにおいてフィードバックは、色の変化、画面の遷移、プログレスバー、メッセージの表示などで表現されます。適切なフィードバックは、ユーザーが操作の結果を理解しやすくし、次のアクションを促す役割を果たします。

例えば、ボタンをクリックした後に何も変化がないと、ユーザーはクリックできなかったと判断して操作を中断してしまいます。また、入力フィールドで間違った入力をしても何も変化がなければ、ユーザーは次のアクションを起こしづらくなります。

フィードバックを改善するためには、以下の点に注意することが重要です。

即時性: ユーザーのアクションに対して即時にフィードバックを提供する。例えば、ボタンをクリックした際に色が変わる、プログレスバーが表示されるなど。
視覚的な変化: 色の変化やアニメーションを利用して、ユーザーに操作が成功したことを視覚的に伝える。CSSの:activeや:focus擬似クラスを利用すると簡単に実装できます。
明確なメッセージ: エラーメッセージや成功メッセージを表示して、ユーザーが次に何をすべきかを明確に伝える。
ユーザーストーリーに沿った設計: ユーザーの行動パターンを理解し、それに合わせたフィードバックを設計する。例えば、フォームの入力エラーをリアルタイムで表示するなど。

これらの方法を取り入れることで、フィードバックの質を向上させ、ユーザーが安心して操作できます。

まとめ

UXデザインを向上させるためには、アフォーダンス、シグニファイア、フィードバックの3つの要素を適切にデザインすることが重要です。

アフォーダンスは、ユーザーが直感的に操作を理解できるようにするための要素です。明示的なアフォーダンスを優先し、意図せず隠すアフォーダンスを避けることが重要です。既存のデザインシステムを活用するだけでなく、オリジナルのデザインシステムを構築する際には、一般的なUIコンポーネントやパターンを参考にし、ユーザーテストを実施してフィードバックを収集することが効果的です。
シグニファイアは、ユーザーに対して行為を誘導するためのヒントを提供します。複数の手段を組み合わせ、文化的背景を考慮し、補足情報を提供することで、ユーザーが直感的に操作を理解できるようにします。また、一貫性を保つことで、ユーザーの混乱を防ぎます。
フィードバックは、ユーザーの操作に対する即時の反応を提供し、次のアクションを促す役割を果たします。即時性、視覚的な変化、明確なメッセージ、ユーザーストーリーに沿った設計を取り入れることで、フィードバックの質を向上させ、ユーザーが安心して操作できます。

これらの要素を総合的に改善することで、ユーザーエクスペリエンスを向上させ、ユーザーが直感的に操作を理解し、ストレスなく目的を達成できます。

UXを改善したいけど、どこから直していけば良いか迷った場合は、ぜひ参考にしてみてください。