ゲシュタルトの原理とは何か？

UXやインタラクションデザインの分野で最も影響力のある心理学理論のひとつにゲシュタルト理論があります。 この理論はドイツの心理学者によって創設され、「ゲシュタルト」という言葉は、次のような意味を持ちます。 形容 または 形状 ゲシュタルトの原理は、その名の通り、人間は個々の物ではなく、物体の集まりをパターンとして認識するという考え方です。

ゲシュタルトの原理に関する記事はたくさんありますが、UX/UIデザイナーとしての仕事にどのように適用するかを理解できるものはそれほど多くありません。 この記事では、ゲシュタルトの原理を使って、人々が少ない労力で目標を達成できるような優れたUX/UIデザインを作成する方法について、いくつかのアイデアを提供します。

類似性の法則

類似性の原理とは、物体が物理的に似ている場合、私たちはそのように考える傾向があるというものです。 括りつける を持っていると仮定します。 どうきのう 例えば、下の画像では、バーガンディレッドの円を含むラインは色が違うので、他の部分と区別がつきやすいですね。

類似性の原理の一例。 撮影：筆者

UXおよびUIデザインにおける類似性の利用

あなたの会社が開発した「Il Mio Chef」というアプリが、アメリカやカナダのイタリア料理愛好家に利用されているとしましょう（この記事の続きでは、このアプリを使います）。 UXリサーチャーがあなたに渡した最近のレポートによると、イタリア料理を注文するとき、ユーザーはどのレストランが自分の近くにあるかということに関心があるようです。 結局、私たちは皆、自分の食べたいものを食べたいと思うでしょう？ラザニアやピザを、焼きたての温かいうちに宅配してくれるんでしょう？

アプリのユーザーがどのレストランが一番近いかを簡単に確認できるように、UIでこれらのレストランをハイライトすることで、類似性の原理を利用できます。 下の画像では、これらのオプションを黄色（右側）でハイライトすることで、一番近いレストランと遠いレストランの違いを視覚的に強調し、大きな違いを生み出しています。 このようにして、あなたはは、類似性の原理を利用して、ユーザーが探しているものをすぐに見つけられるようにすることができます。

ゲシュタルトの原理を用いた類似性 イメージは筆者によるものです。

近接の法則

近接の原理とは、近くにある物体同士は 関連性が高いように見える 例えば、1枚目の画像と2枚目の画像では、円の数は同じですが、2枚目の画像では、ある列が互いに接近しているため、1つの大きなグループではなく、3つの異なるグループが存在するように感じられます。

近接 - 例1 - 大きなグループ 画像は著者によるものです。

近接性 - 例2 - 3つの異なるグループ 画像は著者によるものです。

UXおよびUIデザインにおける近接性の活用

情報ビジュアライゼーションの分野から例を挙げてみましょう。

今回は、あなたがアプリ「Il Mio Chef」のパフォーマンスを確認したい経営者だとします。 あなたは、財務パフォーマンス、ユーザーエンゲージメント、満足度を測るKPIを調べたいのです。 最初は、情報可視化の専門家が以下のダッシュボードを作成しましたが、あなたや他のすべての経営者は、数字に没頭してさらに質問することになります。 1ヶ月後、多くの人は、次のように考えます。このダッシュボードの使用を完全に停止してください。

KPIダッシュボード - Il Mio Chef. Image by author.

このとき、あなたは情報可視化の専門家に戻り、ダッシュボードのデザインを変更することで、人々が全体像を理解しやすくするよう依頼しました。 この場合、近接の原則が役に立ち、以下の新しいデザインを見ることができます。 KPIの種類によって分けられた3つのグループがあり、アプリが財務面でどうなっているかを誰もが理解できるようになっています。オブジェクトをグループ化し、グループ間の余白を増やすことで、ユーザーが情報をより速く消化できるようになります。

ダッシュボードデザインにゲシュタルトの近接性の原理を用いる。 画像は著者によるものです。

継続の法則

連続性の原理とは、目は一度物体を追い始めると、別の物体に出会うまでその方向への「動き」を追い続けるというものです。 この動きによって、その物体を、情報を探すために通らなければならない同じ道の一部と認識することができます。 下の画像は、連続性の原理を使って、このように視覚的に誘導するパターンを作ることができます。を特定の方向に向ける。

Continuityの原則の一例。 画像は筆者によるものです。

UXおよびUIデザインにおける継続性の活用

あなたのUXリサーチャーは、「イルミオシェフ」アプリを使用するユーザーの主な動機は、毎週新しいイタリア料理のレストランにアクセスできるため、食の探索であるという新しいレポートを発表しました。 あなたは、下の画像（左側）の現在のUIデザインで、人々が何回選択肢をスワイプしたかを示す指標を見て、彼らが2回以上スワイプしないことを確認しました。平均して、どのようなオプションがあるのかを確認することができます。

UXデザイナーは、連続性の原理（下の画像の右側）を利用して、その数を平均10スワイプ程度に増やすことに成功しました。 なぜそうなったかというと、画像の一部を隠して、中身を見るには左右にスワイプする必要があることを強調したことで、ユーザーの目が文字通り「スワイプ」の動きをするように誘導され、よりレストランやお店を探そうという気になったのです。これは、本来ならやる気があるはずのことでも、先のデザインでは全くやる気が起きないのです。

UX/UIデザインにゲシュタルトの連続性の原理を使う。 画像は筆者撮影。

要約すると この記事で紹介したゲシュタルトの原理をUXやUIデザインに活用することで、ユーザーが情報をより早く見つけ、よりよく消化できるようになります。 さらに、ユーザーが最も好きな行動を取るように動機付けることで、製品に対する満足度を高めることができます。

‍

表紙にはMiklos Philipsのアートワークを使用し、Vectornatorで編集しています。