ビルディングブロックデザイン:UXユーザー向けのモジュール設計戦略

UXの観点からモジュール設計モデルのギャップを埋めるのに役立つ記事。

話から始めましょう

ストーリーが嫌いなら、このパートは飛ばすべきです。それは、組織のモジュール設計戦略を擁護する任務を負ったUXデザイナーに関するものです。彼女は短い茶色の髪と青い目をしています。あなたが今までに推測していなければ、そのUXデザイナーは私です。

約8か月前、私たちのチームは、オブジェクト指向UX(OOUX)と呼ばれるモジュール設計戦略を結集しました。他の大規模なモジュラーシステムとは異なり、OOUXでは、コアコンテンツタイプ(OOUXがオブジェクトと呼ぶもの)のモジュール化に焦点を合わせ、これらのオブジェクトが相互にどのように関連するかをよく調べます。このプロセスは、設計チームがコンテキストナビゲーションの固有のインスタンスを公開し、一貫したUIモジュールにプッシュするのに役立ちます。

それは、情報アーキテクチャとパターンライブラリの設計には最適ですが、エクスペリエンスの設計についてはどうでしょう。結局のところ、コンテンツの動員は戦いの半分に過ぎません。 UXの最前線にいる場合、理由と方法を尋ねる必要があります。

理由と方法

あなたは自分自身に言っているかもしれません。「なぜ、どのように私に教えてはいけません!私はUX研究者です、ダン・ナビット!なぜ、どのように朝食を食べますか。」だから説明させてください。

機能レベルでの戦略については話していません。プロセスフロー、ワイヤフレーム、プロトタイプについては話していない。アプリケーションレベルの戦略について話しています。ご存知のように、私たちはいつもやるべきことですが、どういうわけか時間がないのですか?そして、私はそれをモジュール設計のような他の戦略へのアプローチの不可欠な部分にすることについて話している。

もう少しコンテキストを説明するために、例を挙げて話しましょう。コンテンツの中核部分の1つがプロフィールである出会い系アプリを設計しているとしましょう。モジュール設計では、「このコンテンツはUIのどこに表示されるのでしょうか?」と尋ねます。そして、答えに基づいて、これらのシナリオごとにモジュールを設計します。リストに表示できるプロファイル、または表示全体を占めるプロファイルを設計するかもしれません。情報アーキテクチャ。パターン。チェック、チェック。

「これ」と「その」スタイルのプロファイル

しかし、今、私たちが何を決めたのか、そもそもなぜ誰かが特定のプロフィールを見たいのかを考える必要があることを必然的に認識するとどうなりますか?そして、そのプロファイルはその個人に対してどのように表示されますか?事実の後にこれらの戦略を実装し、何も壊れないことを願っていますか?

答えは「いいえ」ですから、頭を振ってください。

モジュールを最初に設計するのではなく、あらゆる角度から設計作業を推進できる戦略的なフレームワークを構築する必要があります。コンテンツの面(UIに表示されるもの)を定義する代わりに、そのコンテンツをサポートする方法と理由を定義することから始めます。これは、ビルディングブロックデザインと呼ばれます。

ビルディングブロックデザインを入力します

他のモデルのように最初にモジュールのコンテンツについて考えるように頼む代わりに、ビルディングブロックの設計では、代わりにそのコンテンツの背後にある戦略に集中するように求められます。

ビルディングブロックデザインでは、戦略がデザインのフレームワークを提供するようにします。その逆ではありません。

コアUX戦略(コンテンツを保持するフレーム)を定義して初めて、そのコンテンツがインターフェースでどのように表示されるかを設計できます。コアコンテンツの各部分に対する「全体像」戦略は、構築ブロックです。一緒に、ビルディングブロックは製品のUXを定義します。

ビルディングブロック設計は、UXer向けのモジュール設計です。

ビルディングブロックの解剖学

意味のある構造化されたコンテンツを作成するこのアプローチをよりよく理解するために、出会い系アプリの例に戻りましょう。アプリケーションのコアコンテンツ(プロファイル)を特定したので、このブロックの設計方法に影響を与える可能性のある戦略を検討します。他の戦略的イニシアチブとコンテンツとの関係を調査することで、この情報の設計と配信にどのようにアプローチするかについて、より批判的に考えることができます。

プロファイルブロックの構造が形になり始めています。

アプリケーションレベルの戦略間の関係を検討するときは、高いレベルから始めて、作業を進めることが最善です。たとえば、ペルソナを自分の戦略の主要な要素として特定した場合、以下を特定することでこの戦略をさらに細かく分類できます。

  • プロファイルに関与する特定のペルソナ。
  • アプリ内でこのコンテンツとやり取りしている場所。
  • 使用のコンテキスト;
  • プロファイルに対して実行するコアアクション。
  • そして、彼らがこのコンテンツにアクセスする頻度。

次のようになります。

ペルソナとプロファイルの関係は、私のプロファイルブロックの顔がどのように見えてどのような感じかについて、より多くのコンテキストを提供します。

このコンテンツが特定のタイプのユーザーにとって有益である理由についてもう少しコンテキストを与えたら、どのアクションを優先する必要があるか、ペルソナ固有の行動パターンを促進するためにモジュールをどのように構成するか、そして、体験のどこでこのコンテンツを配信する必要があるか。

この手法により、デザイナーは重要なものに集中し、視覚的な魅力、インタラクションの誘惑、その他の見栄えは良いが実際のユーザーの行動をサポートしないインターフェイスデザインパターンに巻き込まれないようにすることができます。

2番目の戦略的イニシアチブに関してこの演習を繰り返すと、追加の洞察が得られます。実施している戦略的イニシアチブの数と複雑さに応じて、これはすぐに時間のかかるプロセスになる可能性があります。 2つ以下の戦略から始めることをお勧めします。

だからあなたはそれを持っています。ビルディングブロックデザインで足を濡らす方法の例。これが設計チームに役立つと思われる場合は、以下のクイックスタートガイドでその他のヒントを確認してください。そして、もちろん、モジュール化されたすべてのものに関するあなたの考えを聞いてみたいです。以下にコメントを追加するか、LinkedInで連絡してください。

クイックスタートガイド

読者に実用的なTo Doを提供することで、多くのモジュール設計モデルがフラットになることがわかったので、その貴重な情報を提供することを強調しましょう。

ステップ#1:戦略インベントリ。

コンテンツとコンポーネントのインベントリを作成しているので、戦略インベントリを作成してみませんか?適切なアプリケーションレベルのすべての戦略のリストを作成します。例には、ペルソナ、データ、使用状況および人間環境の設計、応答性などが含まれます。これは、一時停止して「アプリケーションに適切な戦略がありますか?」と尋ねる良い機会です。仕事に取り掛かります。

目的:チームメンバーを集めて、独自の戦略インベントリを独自に作成します。

ステップ#2:コアコンテンツを定義します。

これは、ユーザーがアプリケーションでアクションを実行するものです。これを理解するために、チームとのブレーンストーミングセッションの時間をある程度遮断してください。 「ユーザーは何を検索しますか?見る?コアコンテンツを特定したら、それを紙に書き、壁に掛けます。

目的:チームと最初のブレーンストーミングセッションを行います。

ステップ3:方法と理由を定義します。

アプリケーションレベルの戦略とコアコンテンツを特定したので、次は2つを統合します。フォローアップ会議のためにブレーンストーミングルームに戻り、チームが戦略インベントリを持っていることを確認してください。プロセスのこの部分では、戦略が影響を与える可能性のあるコアコンテンツに戦略をポストイットノートとして配置してもらいます。

目的:チームとのフォローアップブレーンストーミングセッションを開催します。

ステップ#4:ビルディングブロックの構造。

分割して征服する時です。チームメンバーにいくつかのコアコンテンツタイプ(またはビルディングブロック)を割り当て、このコンテンツの構造を反復させます。

目的:各チームメンバーに複数のコンテンツタイプを割り当てます。そのチームメンバーは、そのコンテンツの構造を定義する必要があります。

ステップ#5:整列、整列、整列

最後のステップとして、各チームメンバーがビルディングブロックの構造を提示する控えめなプレゼンテーションの形式でギャングを元に戻します。最後に、各ビルディングブロックの個々の戦略的コンポーネントを推進するための次のステップに関する質問、調整、決定のための時間を節約します。

目的:チームメンバがビルディングブロックの構造を提示する時間をスケジュールします。

この記事はRUXERSによって提供されています。 RUXERSは、最新のデザイン、ユーザーエクスペリエンス、使いやすさ、および研究について共有し、議論している実際のユーザーエクスペリエンスリーダーのコミュニティです。私たちはTwitterにいます-参加してください!