UIデザインに基づくページレイアウトを行うために インターフェイスのどこにUI要素を配置すべきかを考える

企業がデジタル変革のためのデザインシステムを構築するとき、私たちはさまざまなチームに分散しているデザイナー達に望むことがあります。

 

新製品のインターフェイスデザインに取り組む際は、一貫性のある優れたメンタルモデルを持つことに理解を頂きたいのです。

 

そのためのアプローチの1つは、ナビゲーションアーキテクチャ用のワイヤフレームを作成することです。

 

しかしB2BとB2Cのニーズにはそれぞれ異なる専門知識がいくつか必要なため、まだすべての可能性を予測することはできません。また、最初の商品を作りながらそれを構築していかなくてはならないということが分かっています。

 

私たちはこれまでナビゲーションの一貫性を保つための大まかなガイダンスを提示しようとしましたし、それを元にチームがフレームワークを作成することを望みました。また、ユーザーが常に確実に従うコンテンツ作りについて検討したいと望み、それをComponent Compassと呼びました。

 

デザインしたい通りのページレイアウトが可能になる、この非常に使えるフレームワークを紹介しましょう。

 

Component Compassとは

 

コンパスは一般に北・東・南・西と方角を案内して行き先を教えるものです。Component Compassは同じ役割をします。

 

インターフェイスのどこにUI要素を配置すべきかを知らせるのです。 そのページのトピックであるオブジェクトを、断片的ではなくストーリーとして伝えるガイドとなります。

 

インターフェースのUI要素は連動しています。 たとえば料理をするとして、最初に何の料理を作るかの情報なしに、材料のリストがあってもあまり意味がありません。

 

北へ行くように言う代わりに、Component Compassは物事を「理解と概観」、「製品と機能」、「個人と感情」、または「消費と詳細」のどちらかの方向に向かうべきか知らせます。上から下へ、左から右へ。素敵な読書体験に案内します。

 

Component Compassは、製品のページがどのようになるかを把握した後に活用できます。

 

私自身はOOUX（オブジェクト指向の利用者体験　Object-Oriented User Experience）の大ファンなのですが、私の製品のオブジェクトとそれらのオブジェクトに属するコンテンツ（コアコンテンツ、メタデータ、およびCTA）を見つけた後にOOUX という言葉が使われだしました。

 

OOUXはすでに、オブジェクトを構成するものうち最も重要なものと最も重要でないもののランク付けを行っています。 ただし、インターフェイスのレイアウト・エレメンツの外観・大きさ・強調したいこと・まだ発見されていないことなどを完全には反映していません。

 

ある観点から見て、この特定のオブジェクトにとって最も重要な情報が含まれるとしても、それが他のユーザから見て最初のものになるべき要素ではないかもしれません。 それは誰かの方向感覚を失わせるか、あるいは他のUI要素から得られる特定の文脈でしか意味をなさないでしょう。

 

 

Component Compassの示す方角　TOP：理解と概要

 

このセクションはページの一番上にあります。閲覧者はページのどこにいるのか理解し、ページを見て得られるものの概要を知ることができます。

 

ここでは、ユーザーが体験しようとしているストーリーを紹介します。製品が何を提供するのか​​を示すだけでなく、ユーザーが正しい場所にいるかどうか判断させます。

 

問題は「ここで見つかるものを説明できるのはどのコンテンツエレメンツか、そしてどの程度の目立つ必要があるのか​​。このページにアクセスしたときに最初に見るものか？」です。

 

ここではまだユーザーに詳細まで見せたくありません。ページにとどまるか離れるか、商品を紹介するかしないか、判断の場となります。

 

 

Component Compassの示す方角　左：製品と機能

 

私たちのほとんどはテキスト・写真・ページを左から右にスキャンします。（文化的な違いがありますが、私は自分が設計しているものをそう設計しています）

 

よって、私たちは一番左にあるものを最初に見ます。Component Compassは、ユーザーとの対話のスタートを左端に配置することを提案します。

 

ストーリーを紹介するだけではなく、話し始めているという点で、TOPの役割とは異なります。例えるなら、章のタイトルだけではなく、雰囲気や情景、および文脈の流れを決める、最初の2～3行の文章なのです。

 

これは、ユーザーが対話したいことの写真、または対話が意味をなす前に紹介される必要があるトピックに関する文章になるでしょう。

 

ただし、「左に配置する」と言っても、ページの幅いっぱいに広がることはありません。それはただそれが左側から始まり、必要なところまで到達することを意味します。

 

私がこの方向を「製品と機能」と呼んでいるのは、ここに配置するものが製品を構築するものだからです。チームや企業として「売りたい」または自分のユーザにもたらしたいものを配置します。

 

 

Component Compassの示す方角　右：個人と感情

 

ユーザーがどこにいるのか、そして何を扱っているのかがわかるようになったので、可能性のある対話を展開することができます。

 

左側で私たちは販売の必要性とビジネスの観点を考えました。右側は個人向けのメモです。 「ユーザーはここで何をしたいですか？彼らはどうやって私たちの製品とやり取りしたいのですか？」という質問をします。

 

私たちは理路整然と自分たちの商品の可能性を示すだけでなく、ユーザーが考えることも提示します。

 

最後に目にするものは、最初のものよりもずっと記憶に残っているので、それらのことを最後に示すことで、ユーザーのニーズがその製品にあることを印象付けます。ユーザーの記憶に何かを残すのです。それはただ事実を述べることよりも、ずっといいストーリー作りに繋がります。

 

ここでのUI要素はインタラクションのためのものではなく、オブジェクトに関するさらなる情報を与えることもできます。

 

この情報もまた、ユーザーにとって非常に関連性があり（たとえば特典など）、より個人的なレベルで製品がユーザーとどのような関係があるかを伝える必要があります。

 

 

Component Compassの示す方角　BOTTOM：消費と詳細

 

ここまで既に私たちはプロダクトを紹介し、説明し、そしてユーザーの文脈でそれを翻訳しました。しかも、第一印象で集中的に伝わるようにしました。

 

これでたくさんのユーザーが決断を下したり、意見を表明できるようになりますが、それだけでは十分ではない場合もあります。たとえば、決心する前にすべてのことを知っておく必要がある人や、できるだけ多くのことを知りたいファンなどです。

 

そのため、BOTTOMでは、オブジェクトについてより一層詳細に記述します。

 

そのオブジェクトについてどれだけ知る必要があるかに応じて、すでにTOPで示したことを繰り返すことができます。しかしより詳細に、料理の説明の後にその材料リストを見るように、セクションごとに詳細を知らせることもできます。Component Compassに従い何度でもセットアップできるのです。

 

どのオプションが製品に有効であるのかにかかわらず、さらに下方に表示する情報のすべてが、TOPでユーザーに与えた知識に基づいていることを忘れないでください。

 

こうして、2つの大きなグループのユーザタイプを扱うことができます。既に詳細を知っているので、とにかく素早く対処したいと思う人たちと、行動を起こす前にもっと詳しく知りたいと思う人たちです。

 

ご覧のとおり、Component Compassは方向の組み合わせ次第でより効果的に機能します。「北に行く」だけではなく「北東に行く」ことも可能なのです。

 

 

最後に

 

インターフェース上のUI要素が特定の場所にある理由を認識することは重要なことです。

 

もしかしたらこの手法は当たり前と思われるかもしれません。また既に常識として多くの人々が既に実行しているかもしれません。

 

この決まりごとは理由があってなされたものであり、理由をもとに説明することができます。 

 

もちろん、この方法では間に合わないことが常にあるでしょう。もちろんしっかりした理由があればそれでも構いません。そこが私が言いたいことでもあります。 

 

例外にはこのフレームワークと同様にガイドラインと見なすに値する理由があるのです。