7 つの古典的なおとぎ話から学ぶ UX の教訓!

名脚本家ロバート・マッキーはかつてこう書いています。「物語は人間のコミュニケーションの通貨である。」物語は、私たちが周囲の世界を理解する方法です。私たちが周囲の状況を理解すればするほど、生き残る可能性が高まり、私たちは物語を通してこの生き残りに関する知識を交換します。共有されたすべてのストーリーには、現実世界から学んだ教訓が含まれています。

今日、私たちの物語はデジタルの世界と物理的な世界に混在しています。私たちは、デジタル世界と現実世界の法則が必ずしも一致しないことを忘れて、両者の間をシームレスに行き来し、混乱を招くことがあります。

おとぎ話が人気があり、今日まで生き残っているのは、主にその単純さによるものです。おとぎ話は、私たちが暮らす現実世界についての教訓を教えてくれるようです。しかし、これらの教訓は仮想デジタル世界にも応用できるので、私は別の視点からこれらの話をしたいと思います。

1. 三匹の子豚

UXの知識：しっかりとした基盤を築くことが重要

多くの場合、Web サイトやモバイル アプリでは、ワークフローやカテゴリの作成、サイト配布やコンテンツ マトリックスの分析などの計画と構造化の作業を省略し、コンセプトから UI デザインに素早く移行します。まだ建てられていない家を内側から設計しようとすることを想像してみてください。

UX デザインの 5 つの要素のうち 3 つは、Web サイトの構成とアーキテクチャに直接影響されます。三匹の子豚の物語が私たちに思い出させるように、十分な準備なしに急いで計画を立てすぎると、基盤が不安定になり、デジタルの世界では、粗雑な顧客体験、雑然としたコンテンツ、操作しにくい Web サイトにつながります。こうした問題が一度発生すると、自然に解消することはほぼ不可能です。ウェブサイト/アプリの所有者は、この不安定な構造に留まり、永久に亀裂を修復することを余儀なくされます。

幸いなことに、Web の歴史から、優れたアーキテクチャとは主に、コンテンツの階層を作成すること、コンテンツを論理的に整理すること、コンテンツを段階的に提示すること、一貫性のある便利なナビゲーションを使用すること、明確な道標を提供することなど、次の基本事項を念頭に置くことであることがわかります。 Wikipedia が長い間存在し続けてきた理由は、上記の基本を非常にうまく実行しているからです。

△ ウェブサイトのコンテンツの論理的な階層

あなたのウェブサイトやアプリを破壊してしまう大きな悪いオオカミから身を守るために私が見つけた最良の方法は次のとおりです。1. サイトマップを作成します。 2. 「標準」文書を作成します。どちらの文書も視覚的なものである必要があります。サイトマップはコンテンツの階層的なグループ化を視覚化する必要があり、標準ドキュメントはコンテンツ管理のルールを示す必要があります。たとえば、標準 23: すべてのページ/画面には、遍在するプライマリ ナビゲーションが必要です。ウェブサイトがこれら 2 つのドキュメントを備えている場合にのみ、存続する可能性が高まります。

時間をかけて安定した構造を構築してください。

2. 王女とエンドウ豆

UXの知識: ユーザーの期待に挑戦しない

従来の Web サイトは、ヘッダー、本文、フッターという 3 つの主要な UI 構造で構成されています。これらはデザイナーにとって実証済みのキャンバスです。

時間が経つにつれて、これらのコンポーネントはユーザーの期待を具体化するようになります。たとえば、ヘッダーには通常、Web サイト名 (およびロゴ)、メイン ナビゲーション、機能ナビゲーション、検索機能、ログインなどが含まれます。さらに、ヘッダー領域はパターンに従います。ブランド ロゴは通常、ヘッダーの左端に配置されます。

すべてのサイトがこれを行っているわけではなく、ルールを破ることでより優れた、よりユニークなデジタル体験が実現できると考えるサイトもあります。これらの点については異論を唱えるつもりはありませんが、ほとんどの Web ページがこのパターンに従っていることがわかります。

グローバル インターネットの一貫性により、ユーザーがこのパターンを目にする可能性が高まります。Web ページの左側にロゴが配置されているのを目にするほど、ユーザーはそこにロゴを配置したいと考えるようになります。これは、ユーザーが新しい Web サイトを見る前に、その Web サイトに対して期待を抱いていることを意味します。これはメンタルモデルと呼ばれ、デジタル製品の UX ではメンタルモデルとは次のことを意味します。

デジタル製品におけるメンタルモデルの目的は、意味を識別し、時間を節約することです。

たとえば、家のメンタルモデルは、4 つの壁、屋根、窓、ドアがあるというものです。どの家に近づくときも、窓ではなく、中に入るためのドアのように見える場所を探すのは当然です。これにより、時間が節約され、すべての可能性のある入口を評価する必要がなくなります。同様に、ユーザーにとって、Web サイトにも同様のメンタル モデルが含まれています。

△ 家のメンタルモデル

「エンドウ豆の王女」の物語は、ユーザーが期待する場所以外に物を置かないように教えてくれます。王女様のように、何かが期待通りでなかったら、それは悪い経験につながります。

同様に、標準ドキュメントを作成すると、期待に応えられない Web サイトの作成を回避するのにも役立ちます。競合分析とユーザーテストを通じてこれを知ることができます。競合分析は、競争で優位に立つための方法と見なされることが多いですが、実際には、ユーザーが Web サイトやアプリを使用する前に、ユーザーのメンタル モデルを予測するのにも役立ちます。

あなたが自動車メーカーだとしましょう。あなたのウェブサイトを訪問するターゲットユーザーのほぼ全員が、競合他社のウェブサイトも訪問します。競合他社がナビゲーションをヘッダーに配置しているのに、あなたはそれを左側に配置することにこだわっている場合。ターゲット ユーザーは、Web サイトにアクセスしたときに混乱し、混乱した気分になります。突然、Web サイトの閲覧に思考と努力が必要になります。本来は簡単な作業でも、顧客の期待が不必要に裏切られるため、困難で複雑な作業になってしまいます。

ユーザーは敏感なので、お姫様のように扱ってください。

3. キャンディハウス

UXの知識: ユーザーは常に自分の家への道を探している

インターフェース デザインに影響を与えた最も有名なおとぎ話は「ヘンゼルとグレーテル」です。これは、森に入って魔女に騙された 2 人の子供が、パンくずを追って最終的に家に帰る道を見つけるという物語です。パンくずは現在、Web デザインの一般的な機能であり、特にコンテンツをセクションやサブセクションに分割する必要がある大規模なサイトではよく使用されます。パンくずリストには、方向付け、ナビゲーション、安心感という 3 つの主な目的があります。サイト構造を使用してユーザーに現在位置を伝え、ハイパーリンクを使用してユーザーが以前の場所に戻れるようにします。

Argos.co.uk のパンくずリストの例

最も重要なことは、パンくずナビゲーションによって人々に安心感を与えることができるということです。ほとんどのオンライン活動には、情報採餌、つまり知識の探索と呼ばれる行動が伴います。名前が思い出せない俳優を IMDB (インターネット映画データベース) で何回調べたか考えてみてください。通常、この「採集」行為には、単一の検索結果ページよりも深い何かが必要です。この場合、パンくずが最も効果的です。

プレゼントを赤いリボンで包みたいと想像してください。お気に入りの検索エンジンで弓を検索すると、オンライン小売店のページが表示されます。このサイトにパンくずナビゲーションがあったら、次のようになります。

ギフト > 包装資材 > リボン

パンくずリストは、表示している情報のコンテキストを提供し、正しい場所にいることを保証します。パンくずリストが次のようになっている場合:

ギフト > スポーツとレジャー > アーチェリー用具> 弓

…すると、明らかに自信を失ってしまいます。

4. ゴルディロックスと三匹の熊

UXの知識: アンカーは情報に文脈と強調を与えるのに役立ちます

私たちは実際にこのおとぎ話を使って、古い UX の原則である「ゴルディロックス効果」について話しているのです。この効果は、ユーザーに 3 つの類似しているが異なる定量的オプションが同時に提示された場合によく発生します。たとえば、異なる温度のお粥を 3 杯用意します。

特定のスケールで 3 つのオプションを組み合わせると、次の 2 つの重要な状況が生まれます。1) 高低の 2 つのアンカー ポイントの形成。 2) 明確な中間の選択肢。 (これは、同様の目的を持ちながら実装が異なる認知バイアスであるデコイ効果と混同しないでください)。

アンカーとは、現実世界を理解するために私たちが作成する測定の基準です。

たとえば、これまで購入したことのない高価な宝石を購入する予定で、ディーラー A から 5,000 ポンドの見積もりを受け取ったとします。ディーラー B から 10,000 ポンドの見積もりを取得します。ディーラーAの方がお得なようです。

しかし、ディーラー C から 10 万ポンドの見積もりを受け取ったとき、ディーラー A が依然として最良の選択肢である一方で、ディーラー B も突然それほど悪くないように思えます。この宝石を贈り物として購入した場合、ディーラー A の価格は他のより高価な宝石と比べて安く見えるかもしれません。

背景環境を決定するために、2 つのアンカー ポイント A と B が導入されています。理想的には、より多くの情報（この場合はより多くの引用）を探して、A と B が通常の引用であり、C が特別なケースであることを判断できるようにします。しかし、情報が限られている場合、私たちは知っていることに基づいてしか判断を下すことができません。

デジタル製品では、ゴルディロックス効果を利用して、ビジネス目標を達成するためにユーザーに特定のオプションを選択するよう促すことができます。オンラインでサービスや製品を販売する場合、どちらか一方を強調する必要があります。次に、その横にさらに 2 つのオプションを追加します。そうすることで、ユーザーの目にその魅力が増すでしょう。追加オプションが選択されていても問題ありませんが、ページでのそれらの主な目的は主力製品をサポートし、強調することです。

assembla.comはゴルディロックス効果を利用して3つの月額プランの価格を設定しています

この効果において、デザインは依然として重要な役割を果たします。色、距離、位置、フォントの太さはすべて、スター製品を視覚的に強調するために使用されます。しかし、これらのオプションはステージ上に設定されたアンカーです。

アンカーポイントは一度設定すると変更が困難になります。だからこそ、昔と比べて今はあらゆるものが高価になっていると誰もが感じているのです。これは、インフレにより価格が上昇しているにもかかわらず、アンカーを変更していないためです。たとえば、私が初めてポテトチップスの袋を買ったとき、20ペンス支払ったのを覚えています。 20年経った今、ポテトチップス一袋に75ペンス払うとき、私はまだ自分をあの初期のアンカーと比べる。

デカルトの名言を借りれば、「我思う、ゆえに我あり」です。私たちが世界を認識する際のアンカーの役割は、私たちが特定の時点での知識の総和であることを示しています。

5. みにくいアヒルの子

UXの知識: 美しさは相対的である

醜いアヒルの子の物語の主な内容は何ですか?それは挑発的な行動を克服することなのか、それとも内面の美しさを称賛することなのか?正直に言うと、よく分かりません。

私にとって、みにくいアヒルの子の物語に含まれる相対性の概念を理解することは、UX デザインに役立つ最も重要なことです。同じ比較の中で最悪のアンカーである醜いアヒルの子がいなかったら、他の仲間は見​​た目ほど良くはなかったでしょう。

同じロジックが、Web ページ上に複数の CTA (コール トゥ アクション ボタン) を設計する場合にも適用されます。ページに、商品の購入やショッピング カートに追加などのアクションをユーザーに促す CTA ボタン (ボタン 1) が 1 つあるとします。ページを閲覧するユーザーは、「ホブソンの選択」と呼ばれる、a) 購入する、b) 購入しないという 2 つの選択肢から排他的に選択する必要があります。この選択に直面した場合、ほとんどのユーザーは b) 購入しないことを選択します。

ここで、ページにボタン (ボタン 2) を追加したとします。これは、ユーザーの手間はかかりますが、ユーザーのソーシャルチャネルに製品へのリンクを共有するなど、ビジネス行動にプラスの効果をもたらすオプションとして意図的に設計されています。この例では、ボタンは醜いアヒルの子です。調査によると、ボタン 2 をボタン 1 の隣に配置すると、ボタン 1 のクリック率が向上することがわかっています。これはいわゆる「ホブソン+1効果」です。

6. 狼がやってくる

UXの知識: 誤った情報でユーザーを誤解させない

ユーザーが Web サイトやアプリを操作すると、さまざまな方法で情報がユーザーに伝達されます。コンテンツのグループ化から色の選択に至るまで、ユーザーは常に私たちが作成した記号によって導かれ、影響を受けます。これはシンボル理論の基礎となる概念です。 (シンボルの研究と記号論および UX デザインの議論の詳細については、「アイコンにはテキストが必要ですか?」を参照してください。)

記号論の応用の注目すべき例として、デザイン原則の 1 つであるアフォーダンスが挙げられます。 UX のゴッドファーザーである Don Norman によって造られたアフォーダンスは、アクションのトリガーを提供することとして定義されています。たとえば、車のドアハンドルは、車のユーザーが車のドアを開けられるように設計されているため、そのデザインは特にこの種の動作の実施を奨励し、支援します。この例では、ユーザーに伝えられる標識の意味は、「これは引き離すためのものです」ということです。

車のドアハンドルは「引いて開ける」というアフォーダンスを提供する

ウェブデザインの 2 次元の世界では、アフォーダンスを実装するのは非常に困難です。ウェブデザインの初期には、現実世界を反映させようとする試みとして、スキューモーフィズムの原則が提案されました。たとえば、iOS6 でかつて使用されていたシーン深度デザインを覚えていますか?

しかし、その後フラットデザインが採用され、クリックできなくなったと思われるボタンが当初の計画のまま多く残されました。ボタンの機能が完全に失われ、意味を解読することが困難になっています。

これにより、ユーザーにとって信頼の問題が残ります。長方形はすべてボタンですか?これにより、将来の Web デザイナーには、デザインが十分に考え抜かれ、さらに重要なことに一貫性があることを保証するという重い責任が課せられます。結局のところ、意味の解釈は経験の繰り返しのプロセスから生まれます。あるページの青い下線付きテキストがクリック可能なリンクを示している場合、別のページの同じ青い下線付きテキストが同じ機能を提供していると推測できます。これが再度検証されれば、私たちの思考プロセスは、この特定のスタイルに対処するための簡略化されたパターン、つまり「青 + テキスト + 下線 = クリック可能なリンク」に一般化されます。

狼少年の寓話が思い出させるように、私たちが誤った信号を受け取っている場合、問題が発生します。自分の行動の結果を考えずに、少年が狼の到来について誤った警告を発したことと、村人たちが到着したときに何も見つけられなかったことが、村人たちが警告を無視するのに十分な理由となり、狼が本当にやって来たときに悲劇が起こった。

Lyondell Basell はタイトル、情報、テキスト リンクに青色のテキストを使用しているため、混乱が生じています。

ユーザーがサイトにアクセスし、意図しない誤った指示を受け取った場合にも同じことが起こります。ウェブサイトの所有者が有名なブランドである場合、有名なブランド自体が権威を持っているため、悪影響はさらに大きくなります。したがって、重要なのは一貫性のある設計であり、優れたドキュメントが常に役立つことを繰り返し強調しておく価値があります。

覚えておいてください。人々は当然権威を信頼しますが、権威が嘘をついている場合は、もはや信頼しなくなります。

7. 皇帝の新しい服

UXの知識: 固定観念に挑戦することを恐れない

これまでの暴露をすべて具体的に列挙した声明を書かなければならないよりも、もっと良い終わり方があるでしょうか。

「新しい服の皇帝」は、プライドに囚われないように人々に警告する寓話です。伝えられる情報には常に疑問を持つべきだということを人々に思い出させます。

絵ローラーを覚えていますか? UX デザインの初期に登場し、非常に人気を博した要素であるため、ほぼすべての Web サイトが、フォト ギャラリー、プロモーション、製品を表示するためにこれをホームページに配置したいと考えています。そして、多くのウェブサイトは今でもこれを行っています。

しかし、データは、これらは効果がなく、醜いものであることを示しています。失敗の主な理由は、イメージローラーの主な設計意図がコンテンツの隠蔽と再現を実現することであり、これはユーザー啓蒙の最も重要な原則であるリコールシナリオでの再識別に違反していることです。

「オブジェクト、アクション、オプションを視覚的に表示して、ユーザーの記憶負荷を最小限に抑えます。ユーザーは、現在の段落以外の情報を覚えておく必要はありません。」

ユーザーはローラーをひっくり返す際に、事前に決められた決定を下すために各オプションの位置を覚えておく必要があります。さらに悪いことに、私たち人間は決断を下す前に全体像を見たいと思うようにできています。つまり、25 個の選択肢があることがわかれば、選択を行う前にそれらすべてを検討する可能性が高くなります。これはユーザーフレンドリーではありません。

現実世界と同じように、私たちが作り出すデジタル世界も常に変化しています。この光景は決して長くは続かないでしょう。物理世界とデジタル世界がますます絡み合うようになるにつれて、ユーザー エクスペリエンスがどのように関与しているかを理解する唯一の方法は、循環的で証拠に基づく学習です。

歴史を振り返ると、新しいデジタル インターフェイス (デスクトップ コンピューター、タッチスクリーン デバイス、ウェアラブル テクノロジー、仮想現実) が導入されるたびに、UX の真実に関する私たちの信念が疑問視されることになります。

このような状況では、UI デザインは振り出しに戻って、ユーザーが新しいテクノロジーを採用できるようにするために特別な努力を払う必要があります。

iOS が初めてスキューモーフィック インターフェース デザインを導入したとき、Apple はユーザーが現実世界を通じてデジタルの世界に早く慣れ親しめるように意図的にこれを採用したことを今でも覚えています。

フラットデザインはウェブサイトやアプリのデザイン標準となっていますが、 VR （仮想現実）の世界ではそうではありません。仮想世界では、ファイルは本棚にある本として表現したほうがよいかもしれません。スキューモーフィズムは消滅したわけではないが、循環的に存在し続ける可能性がある。

ここで学べることは、今日私たちが知っている知識が将来も引き続き使用されるかどうかはわからないということです。

時間が経つと、「カルーセル」は削除される可能性があります。しかし、慣習に挑戦するのは難しいということを知っておく必要があります (Apple がフラット デザインを導入する自信を得るまでに 6 回の試行が必要でした)。

解決策の 1 つは、アラン・グリシュタイン氏が最初に提案した段階的削減アプローチを採用することです。この方法の前提は、ユーザーが明らかなデザインのヒントを必要としないほどインターフェースに慣れる必要があるということです。デザインは最終的には、ユーザーがインターフェースにどれだけ精通しているかによって決まります。

露出が増えるにつれて、デザイナーがユーザーを段階的にガイドする必要性がますます少なくなります。これにより、大衆に対応する必要のある UX の部分が削除され、よりパーソナライズされたユーザー エクスペリエンスに置き換えられます。

これを説明するグラフを作成すると、x+y=10 のような式のようになるかもしれません。 X 軸はユーザーの専門知識レベルを表すために使用されます。1 はユーザーが UI にあまり精通していないことを意味し、10 はユーザーが UI に非常に精通していることを意味します。 Y 軸は、インターフェースを通じてユーザーをガイドする必要がある度合いを表します。 1 はあまり必要ではないことを意味し、10 は非常に必要であることを意味します。

レスポンシブ デザインが Web ページのサイズへの適応だけにとどまらない未来を想像するのは簡単です。これは、さまざまなタイプのユーザーに適応するインターフェースです。上級ユーザーと低級ユーザーでは、それぞれに合わせてカスタマイズされた異なるエクスペリエンスが得られます。

これはある意味、CRM（顧客関係管理）の自然なプロセスです。このプロセスでは、貴重な顧客関係が蓄積されるにつれて、これらのビジネス関係がビジネス関係資産に変換されて活用され、最終的にはインタラクティブなレベルでより有意義な情報をユーザーに提供できるようになります。これは真の意味でのパーソナライズされたデザインであり、影響を最大化することを目指すデータ駆動型のデザイン モデルです。

ストーリーが人間の関与を表す通貨であるならば、UX デザインはそのコインを鋳造するプロセスです。トランザクションが正常に実行されるメカニズムを作成しました。