⭐️

【Polaris和訳】Foundations/Information architecture

2021/10/25に公開

Shopify

polaris

tech

この記事について

この記事は、Polaris/Foundations/Information architectureの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

情報アーキテクチャ

私たちが Shopify で作成するものはすべて、情報アーキテクチャの基礎を持っています。あなたがデザイナー、コンテンツ戦略家、UX 開発者であれば、すでに情報アーキテクチャの仕事をしているはずです。

情報アーキテクチャの定義

情報アーキテクチャとは、効果的で持続可能な方法でコンテンツを整理し、構造化し、ラベル付けすることです。アプリや Shopify 管理画面の一部、新機能、編集ページなど、どのようなものを作るにしても、これらの IA 原則は、コンテンツを使いやすく、見つけやすくするのに役立ちます。

IA を行う理由

複雑さの解消：情報は可能な限りシンプルな方法で構造化され、管理されるべきです。
スケーラビリティをサポートする。優れた IA を実践することで、製品の成長や変更のたびに、以前の作業をやり直すことを避けることができます。
親しみやすさの実現。マーチャントがどのように Shopify にアクセスするかに関わらず、同じ製品のように感じられるべきです。共通の体験を作ることは、デザインだけではなく、Shopify のコンテンツをどのように構成するかにまで及びます。

私たちの IA 原則

これらの原則は、あなたが何に取り組んでいるかに関わらず、優れた IA を決定するのに役立ちます。

オーディエンスがどこにいるかを示す

成功する案内は、オーディエンスが目的を達成するためにナビゲーションを決定できるときに起こります。ウェイファインディングを可能にするナビゲーションのために

複数のナビゲーション・スキームを設定する
タスクベースのナビゲーションを使用する
二次的なナビゲーションのサポート（パンくずなど）を統合する。

ナビゲーションは、多くのウェイファインディングの目的を果たすツールです。良いナビゲーションは、マーチャントがトピックを深く掘り下げたり、タスクを簡単に切り替えたり、情報をフィルタリングしたりすることを可能にします。

Shopify の管理画面では、マーチャントは複数のナビゲーションスキームを使って道を探すことができます。

構造的：メインナビゲーション、ローカルナビゲーション、パンくずリスト
連想法：他の機能やヘルプドキュメントへの文脈上のリンク
ユーティリティー: アバターにリンクしてアカウントにアクセス、検索

Shopify の管理画面では、マーチャントはサイドナビゲーション(nav)と検索を使ってブログ投稿ページへの道を見つけることができます。パンくずを使って、ナビのオンラインストアのセクションのメインレベルに行くことができます。また、ページ下部にある「詳しくはこちら」のフッターから、関連するヘルプドキュメントにアクセスすることもできます。

コンテンツに一つの家と多くのドアを

人はそれぞれ、情報を求める行動が異なります。例えば、ある人は製品のさまざまな場所から体験を始めたり、タスクの途中で焦点を変えたりするかもしれません。また、あるデバイスでタスクを開始し、別のデバイスでタスクを終了することもあるでしょう。このような行動を促進するためには、すべての画面に意味のあるナビゲーションを設け、製品の他の部分へのコンテンツを橋渡しする必要があります。

Shopify ヘルプセンターの配送ページにあるコンテンツは、ヘルプセンターにのみ表示され、Shopify 管理画面やマーケティングページには表示されません。Shopify ヘルプセンターの配送ページのコンテンツはヘルプセンターにのみ設置されています。

情報過多を避ける

マーチャントがタスクを完了するために必要なすべての情報を提供したいのですが、情報過多にならないようにする必要があります。単純化しすぎず、かといってユーザーに選択肢を与えすぎてもいけません。これをデザインで実現するには、プログレッシブ・ディスクロージャーを使用しますが、この原則は情報アーキテクチャにも当てはまります。IA でプログレッシブ・ディスクロージャーを実践するには

要求された情報を徐々に公開する
情報へのアクセスポイントを複数用意する
冗長なコンテンツを排除する

Shopify.com の Shopify Capital ページにあるコンテンツは、Shopify から資本を受け取ることの利点を高いレベルで要約しています。概要を読み取った後、マーチャントは Shopify ヘルプセンターのドキュメントへのリンクを使ってプログラムの詳細情報にアクセスすることができます。このように段階的に情報を開示することで、マーチャントがより早く決断できるようにし、また、詳細な情報を前もって提供することによるフラストレーションや混乱を避けることができます。

成長と変化のための計画

情報アーキテクチャは、デザインと同様、定まったものではありません。製品に合わせて変化していくものです。そのため、情報アーキテクチャを決定する際には、成長のための余地を残しつつ、エクスペリエンス全体の一貫性を促進する必要があります。

Shopify.com のホームページでは、ページアーキテクチャに拡張性のあるアプローチを採用しています。これは、モジュール式のアプローチによって実現されています。

各拠点は、それぞれのニーズに合わせてホームページをカスタマイズすることができます。例えば、2 階建ての場合は、2 つのバナーを使用できます。3 階建ての場合は、バナー 1 つとタイル 2 つを使うことができます。

IA の決定がスケーラブルであることを確認するために

チームの内外を問わず、早い段階から頻繁にコミュニケーションをとりましょう。IA の作業を行う際には、コミュニケーションのラインをオープンにし、製品の他のエリアの作業との整合性を確認しましょう。
将来のことを考え、自分が行っている作業が他のプロジェクトとどのように交わるかを考える。
ユーザーにとって意味のあるものでありながら、成長に対応できる柔軟性のあるコンテンツグループを作る。
IA が複数の環境とその既存のパターン（例えば、iOS、Android、デスクトップブラウザ、チャットボット、Point of Sale のような小売製品）にどのように適応するかを考慮する。

モバイル IA

モバイルでは、コンテンツの整理は優先順位とアクション性が重要です。これは、使用できるスペースが限られていることと、モバイル体験そのものの性質によるものです。ほとんどのモバイルセッションには目的があり、短く、頻繁で、しばしば中断されます。

情報の重要度、場所、アクセス方法などを徹底的に評価することで、オーディエンスがタスクを完了するために必要なメンタルモデルを構築することができます。

モバイル IA に取り組む際には

iOS と Android に特有のメンタルモデルを考慮する
見せたいコンテンツを特定して優先順位をつけ、そのコンテンツの最適な場所を決める
オーディエンスが情報にアクセスする頻度を把握し、表示するコンテンツの優先順位を決定する
すべてのモバイルプラットフォームで一貫した体験を提供するために

モバイルデザインの基本的な原則をお読みください。

モバイルナビゲーション

モバイルでは、情報アーキテクチャ、ナビゲーション、タスク完了が密接に結びついています。

点と点をつなぐ

効率的なモバイルナビゲーションは、プラットフォームのネイティブガイドラインを活用します。現在の Shopify モバイルアプリのユーザーインターフェースと UX パターンを利用して、マーチャントを望ましい結果へと導きます。情報へのアクセスは、いつでも素早く、一貫性があり、親しみやすいものでなければなりません。

ワークフローの完了を加速させるナビゲーションを作ることは、モバイルで Shopify を使って何ができるかということについて、オーディエンスの認識に良い影響を与える可能性があります。

Do

最も重要なアクションを優先する
2、3 回の表示でタスクが完了することを目指しましょう。
ワークフローの「深さ」を最小限に抑え、複数のビューの入れ子を避ける。
不必要な操作を避けるために、可能な限りショートカットを提供する。

Don't

絶対に必要でない限り、新しいナビゲーションパターンを作成しない
使用しているプラットフォームとは異なるナビゲーションスキームを使用する
ナビゲーショナル UI を専用のスペース以外に配置する

Shopify アプリのご紹介

Discussion

ログインするとコメントできます