【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
「アフォーダンス」と「シグニファイア」という言葉を聞いたことがありますか? これらはUIデザインと密接に関わる単語です。
この2つの概念をしっかり理解することで、よりアクセシビリティに配慮したUIデザインを手がけられます。
今回は、アフォーダンスとシグニファイアについて、画像を使って分かりやすく解説します。
アフォーダンスは、対象となる要素がどのように振る舞うのかを教えてくれる、知覚的または視覚的な手がかりです。
目の前にある要素でどのようなことができるのか、ユーザーに伝えてくれます。
シグニファイアは、アフォーダンスを支える付加的な情報です。
UIデザインにおいて「シグニファイア」という言葉は、単にコンポーネント(構成要素)のラベルを指すこともあります。
しかし以下のようなものを指すこともあるので、合わせて把握しておきましょう。
これらは組み合わせて使うことも、単独で使うことも可能です。ただし色だけで意味を伝えることはできません。
UXデザインやUIデザインにおいては、「要素の役割」を伝えるアフォーダンスに、「該当の要素の状態」を伝えるシグニファイアを重ねることで、ユーザーとコミュニケーションします。
ユーザーが色で機能を判断できない場合でも、テキストやアイコンなどがサポートしてくれます。
認知科学者であるドナルド・ノーマン氏は、著書『Design of Everyday Things』で、アフォーダンスを「知覚可能な行動の可能性」としています。
つまり対象となる要素そのものにアフォーダンスがあるのではなく、アフォーダンスやシグニファイアはユーザー側から正しく認識される必要がある、ということです。
ノーマン氏は「ノーマン・ドア」という概念を作りました。ノーマン・ドアとは、どうやって開けたらいいのかわからない、ユーザビリティが低いドアのこと。
たとえば取っ手だけついていて、「押す」や「引く」といったプレートがついていないドアは、ノーマン・ドアにあたります。
ノーマン・ドアのようなUIを避けるために必要なのは、ユーザーが理解しやすいようにUIをデザインすることです。
CTAのヒエラルキーや色が整理されておらず、記号の意味が矛盾していると、ユーザーを混乱させてしまいます。
たとえば選択できない状態をあらわす色を、選択できる状態のボタンに使うと、操作可能なボタン(アフォーダンス)を否定することになります。
不適切な、あるいは相反する意味をもつアフォーダンスには、以下のようにそれぞれ名前があります。
「操作できそうなのにできない」のが、フォルス(偽の)アフォーダンスです。
上の図では文字の一部に下線がついていますが、これがリンクでないとしたら、フォルスアフォーダンスにあたります。
「ボタンのように見えるのに操作できない」といった例はネガティブアフォーダンスにあたります。
上の図の右側のように「一定の条件を満たすとボタンとして操作できる」という場合は、ネガティブアフォーダンスではありません。
「ユーザーが使いかたを知っていることを前提にしている」場合、パターンアフォーダンスにあたります。
たとえば上の図の右上にあるハンバーガーメニューは、ユーザーが使いかたを知らなければ、ただの3本の線としか認識されません。
「ユーザーが行動を起こすまで認識されない」場合は、ヒドゥン(隠れた)アフォーダンスにあたります。
たとえばホバーしてはじめてボタンだとわかる仕様だと、スマートフォンやタブレットを使っているユーザーには認識されません。
ボタンに限らず、ヒエラルキーを構成するあらゆるコンポーネントやエレメントは、アフォーダンスとシグニファイアを考慮したうえでデザインしましょう。
見た目へのこだわりも大切ですが、UXやアクセシビリティへの影響を考えてデザインするように心がけましょう。
「アフォーダンス」と「シグニファイア」は、UIデザインの基礎となる概念を知るうえで重要な単語です。
顧客やチームとのコミュニケーションのためにも、それぞれの意味や違いをしっかり把握しておきましょう。
(執筆:H Locke、翻訳:Nakajima Asuka、編集:北村有、転載元:UX Collective)
ビジュアルウエイトを決める11の要素。ユーザーの目を惹くUIオブジェクトを作る方法
Workship MAGAZINE
CTAボタンの理想的なデザインとは?サイズ/色/テキスト/配置のポイントまとめ
Workship MAGAZINE
Uberがアイトラッキングを利用してWebデザインを改善。その全貌を、新旧比較で大公開
Workship MAGAZINE