KOBITブログ

優れたUX設計のための要件と構造:情報アーキテクチャとインタラクションデザイン

この記事は約 8分 で読めます。

%e9%9a%8e%e5%b1%a4%e5%9e%8b

UI/UXについて理解を深め、優れたUI/UXを持ったWebサイトを構築するためにお送りする本連載。
前回記事では、優れたUXを設計するための5つの要素を紹介し、その最初の1つ「戦略」の段階で取り組むこととして、ペルソナ法やカスタマージャーニーマップ、ストーリーボードについて解説しました。

今回は引き続き5つの要素として、2つ目の「要件」、3つ目の「構造」についてそれぞれ解説していきたいと思います。

「UI/UXを知り、優れたWebサイトを構築する」連載一覧

第一回:良いUI/UXとは何か?Amazonと楽天に見るユーザー体験の違い

第二回:UIとUXはどう違う?UXの基本と、優れたUXを構成する7つの要素

第三回:SEOからSXOへ?SEOとUI/UXの関係

第四回:優れたUXを設計するための戦略:ペルソナ法とストーリーボード

要素② 要件:機能仕様、コンテンツ要求を決める

UXを設計するための戦略が明らかになった後は、それを実現するための要件へと落とし込みます。Webサイトにどのようなコンテンツを掲載する必要があるのか、あるいは、どのような機能が必要かを一覧化させる作業です。

例えば、企業のコーポレートサイトであれば、企業概要や商品説明、IR情報や求人情報などがコンテンツ要求として必要です。目を惹くような画像や動画を掲載したり、決算資料を検索したりする要件が、機能仕様として考えられます。

要件を洗い出す際にはペルソナ、カスタマージャーニーマップ、ストーリーボードといった前工程の成果物を考慮します。例えば、ソーシャルメディアで情報共有するのが好きなペルソナであれば、ソーシャルメディア連携が機能仕様として必須となるでしょう。カスタマージャーニーマップで、実店舗・マスメディア・検索エンジン等の異なる経路から訪問される可能性が見出された場合、状況に応じたランディングページの作成が求められるかもしれません。

機能やコンテンツを検討する際には、優先度の検討が欠かせません。どのような顧客にも対応できるよう、仕様を詰め込んでも、最適なUXにならないからです。

Googleの例を考えてみましょう。検索ユーザーの体験に特化したUXは、極めてシンプルになっています。特定のペルソナの満足させるために「なくてはならない」「あるのが望ましい」といった優先順位を付けていくと、必要最小限の機能によって最も満足度の高い設計に近づきます。あれもできる、これもできるという状態よりも、ユーザーの文脈によって最も必要な選択肢を提示するのが優れたUXを設計する鍵となります。

要素③ 構造:画面ごとの目的を明確にする

Webサイトに掲載するべきコンテンツや持つべき機能を洗い出した次のステップは、Webサイトの構造を明確化する作業です。

企業サイトやECサイトなど、その目的に応じて、情報を整理する方法は異なってきます。どのような構造で情報を整理すると、ユーザーにとって最も分かりやすいかを明らかにします。

情報アーキテクチャ

Webサイトの構造化手法は「情報アーキテクチャ」と呼ばれます。多数のコンテンツがどのようにつながり、意味を成しているかを定義します。

情報アーキテクチャに従ってメニュー構成などを定義すると、利用者にとって理解しやすい形式となります。以前、なんとなくナビゲーションを作っていない?情報アーキテクチャを見直そうという記事で紹介しましたが、情報アーキテクチャの設計においては、いくつかの有名な構造パターンがありますので、図を加えて改めて紹介します。(参考:http://uxmilk.jp/1040/2)

階層型

木のような構造で、主要ページから詳細ページへと枝分かれする構成です。企業サイトなどでよく見られます。%e9%9a%8e%e5%b1%a4%e5%9e%8b

ハブ&スポーク型

目次となるメインページと、多数の詳細ページから成る構造です。詳細ページ間の移動は認められず、必ずメインページに戻る必要があります。ユーザーの要求に限定した情報を提供できるのがメリットで、iOSの設定画面などで使用されています。%e3%83%8f%e3%83%96%e3%82%b9%e3%83%9d%e3%83%bc%e3%82%af%e5%9e%8b

ハイパーリンク型

ハブ&スポーク型とは異なり、詳細ページ間にも情報のつながりを許します。全ての情報が連結し、ユーザーは自由に探索できるようになります。インターネットそのものがハイパーリンク型の構造をとっています。%e3%83%8f%e3%82%a4%e3%83%91%e3%83%bc%e3%83%aa%e3%83%b3%e3%82%af%e5%9e%8b

直線型

コンテンツを順に提示し、一連の作業を促す構造です。ECサイトの購入手続きのように、Webサイトの一部において、利用される場合があります。%e7%9b%b4%e7%b7%9a%e5%9e%8b

タブビュー型

複数の機能を持つサービスにおいて、それぞれを「タブ」としてまとめる構造です。一目で利用できる機能が理解しやすいのが利点です。画面サイズに制限のあるモバイルアプリで多く見られる構造で、Instagramなどが採用しています。%e3%82%bf%e3%83%96%e3%83%93%e3%83%a5%e3%83%bc%e5%9e%8b

フィルタービュー型

絞り込み検索によって一つの画面で無数のコンテンツを紹介する構造です。ECサイトであれば、一つの商品が価格・ブランド・色などの複数のカテゴリで分類され、任意の検索によって情報が見つけられる仕組みになっています。Pinterestなどが代表例です。

%e3%83%95%e3%82%a3%e3%83%ab%e3%82%bf%e3%83%bc%e3%83%93%e3%83%a5%e3%83%bc%e5%9e%8b

インタラクションデザイン

情報アーキテクチャがコンテンツの静的な構造を具体化したのに対し、ユーザーが画面を操作する際の動的な機能を具体化するのがインタラクションデザインです。(参考:https://www.slideshare.net/takahiroishiyama/ux-48415701)

要件において定義された機能を、どのようにユーザーへ提示し、ユーザーがどう操作し、その結果をどうユーザーへ通知するかを検討します。

インタラクションデザインを検討する際には、その目的を明確にするのが重要とされます。Webサイトを初めて訪問してきたユーザーがすぐに習熟できるよう利用を促進する、従来のユーザーが抱いていた不満を解消する、ユーザーの使い勝手を向上させる等の目的を設定した上でインタラクションデザインを設計します。

インタラクションデザインには大きく4つの要素があります。

トリガー

トリガーは「引き金」を意味し、どのタイミングでユーザーがWebサイトを実際に利用するかを定義します。

まず、ユーザー側から利用を開始する場合、フォームに文字を入力して送信ボタンを押す等の行動が考えられます。一方で、システム側が通知して利用を開始する場合、受信メッセージ欄が目立つように光る、といった仕組みが活用できます。%e3%83%88%e3%83%aa%e3%82%ac%e3%83%bc

ルール

ユーザーの操作に対し、どのようにWebサイトが動作するかというルールを定義します。例えば、ECサイトで10000円以下という絞り込み選択を行えば、該当する商品だけが提示されるというロジックを指します。

%e3%83%ab%e3%83%bc%e3%83%ab

フィードバック

ルールはシステム内部の処理であるため、ユーザーに伝達するフィードバックの仕組みが必要です。視覚的・聴覚的・触覚的な要素を使って、ユーザーがWebサイトの状態を理解できるよう助けます。

絞り込み検索を行っている際には、その条件がチェックボックスで表示される、といった例が考えられます。検索結果が0件だった場合に、ビープ音を鳴らす、というのもフィードバックの一種です。

%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%83%90%e3%83%83%e3%82%af

ループとモード

ルールが複雑になってくると、繰り返し処理(ループ)や条件分岐(モード)が必要になります。受信メッセージが10件あるときは10回通知するのか、1回にまとめて通知するか、といった設計要素はUXに大きな影響があるでしょう。

ユーザーがWebサイトを利用する際の文脈をモードとして定義すると、必要なときに必要な機能やコンテンツのみを提供するのに役立ちます。

%e3%83%ab%e3%83%bc%e3%83%97%e3%81%a8%e3%83%a2%e3%83%bc%e3%83%89

まとめ

要件を定義する際には、ユーザーの求める機能やコンテンツを考慮し取り入れていく必要がありますが、ユーザーが真に求めるシンプルで使いやすいUXを実現させるためには、しっかり優先順位をつけ、場合によっては、あえてその機能はつけない、といった判断も行っていく必要があります。

要件の定義が終われば、次は構造を明確化させる作業に入ります。
定義された機能をどのようにユーザーに提示するか検討するこの段階においても、自分がユーザーであればどの構造が最も使いやすいか、ということを常に考えながら設計していくことが大切です。

 

次の記事優れたUX設計のために:ワイヤーフレームとプロトタイプで骨格と表層を作る

優れたUX設計のために:ワイヤーフレームとプロトタイプで骨格と表層を作る


CATEGORY:

さあ、KOBITをスタートしよう。