デザイン

デザイン

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

本記事は、A compass for page layouts
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

2,496 views

読了時間 : 約5分12秒

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

 

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

 

そのためのアプローチの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要素が特定の場所にある理由を認識することは重要なことです。

 

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

 

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

 

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

 

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

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ