ユーザーエクスペリエンスデザインの包括的なガイド

公開: 2022-03-10
簡単な要約↬設計者は、すべてがマッピングされるまで、詳細に迷う傾向があります。 設計プロセスは反復的なものであるため、これはお勧めしません。 このガイドは、順調に進むのに役立ちます。

これは後援された記事です。)最初のユーザー調査を実施し、調査結果を分析した後、設計プロセスの次のフェーズは、一連の設計を開発して学んだことを適用し、仮定をテストすることです。 Adobe XDのシリーズの4番目の記事では、設計プロセスの初期段階に焦点を当てます。

この10の記事のシリーズ全体の中で、これは設計プロセスを結び付ける3つの記事の最初のものです。 この記事では、鳥の目から見たUXデザインをより高いレベルで扱います。 次の記事では、UIデザイン、インターフェイスインベントリの調査、パターンライブラリの構築、インタラクションとアニメーションの設計について説明します。 シリーズ内のこのシリーズの3番目の記事では、ワイヤーフレーミングとプロトタイピングについて説明します。

UXの調査に関する前回の記事で調べたように、私たちが行ったユーザー調査に基づいていることを強調することが重要です。 調査結果を分析した後、設計プロセスのこのフェーズでの目標は次のとおりです。

  • ユーザーストーリー、シナリオ、ストーリーボードを採用することで、さまざまなユーザーのニーズを満たす明確なユーザー経路を確立します。

  • ヒューマンコンピュータインタラクション(HCI)の世界からのいくつかの教訓を適用して、第一原理を念頭に置いて設計します。 と

  • デスクトップとモバイルの両方のコンテキストに適用できる、デバイスに依存しない方法で、デザインの「ルックアンドフィール」を確立します。

つまり、この記事は、調査段階と設計段階の間の架け橋として機能することを目的としています。 前回の記事で強調したように、設計プロセス(調査、設計、プロトタイプ、構築、テスト)は反復的なものです。 プロセスのこのフェーズでは、プロトタイプ作成、構築、およびテストが可能な一連の設計の開発に重点を置いています。

UXデザインは広大なトピックなので、この記事を短い入門書と考えてください。ただし、以前の記事と同様に、十分にカバーされていることを確認するために、いくつかの推奨読書を提供します。

スケルトンを配置する

ユーザーインターフェイス(UI)の設計とインタラクティブなプロトタイプの構築の詳細に取り掛かる前に、設計の高レベルのフローを設定し、その周りに設計を構築できるスケルトンを確立することが重要です。

プロセスのこの時点で、調査結果を使用してユーザーストーリーの開発を通知し、さまざまなユーザーの目標を特定することが重要です。 これらのユーザーストーリーを使用して、さまざまなシナリオを作成できます。 これは、設計プロセスを導く明確な目標とその根底にある意図を特定するのに役立ちます。 また、構築しているものを介してフローを開発することもできます。

ペーパープロトタイプとストーリーボードを使用して初期フローを開発するときは、詳細にドリルダウンする前に、デザイン全体の感触をつかむことに重点を置いています。 スケルトンを配置し、詳細に迷わないようにすることが重要です。

前回の記事では、プロジェクトの設計段階に着手する前に、ユーザー調査を行うことの重要性に焦点を当てました。 私が言ったように:

ユーザーと時間を過ごし、ユーザーのニーズと、ユーザーが何を達成しようとしているのかを理解します。これらは、ユーザーの「実行すべき仕事」です。

ユーザーの「やるべき仕事」をからかうことで、私たちが設計するものが本当にユーザー中心であることを保証できます。 焦点を絞ったユーザー調査を行った後、調査結果を取得し、それらを使用して設計プロセスに情報を提供することが重要です。 あなたの研究は、あなたがデザインしているユーザーが共通して持つためのいくつかのパターン、ニーズを確立するのに役立つはずです。

ただし、1つのサイズですべてに対応できることはめったにありません。また、設計するものに、ニーズの異なる複数のユーザータイプが含まれる可能性があります。 さまざまなユーザーのニーズを表す「ユーザーストーリー」を作成すると、解決しようとしている目標を抽出し、残りのプロセスを形作るのに役立ちます。 しかし、ユーザーストーリーとは正確には何ですか?

ユーザーストーリー

ユーザーストーリーは、さまざまなユーザーの「実行するジョブ」の高レベルのビューを確立するための便利な方法です。 一般的なユーザーの観点から作成されており、さまざまなユーザーが持つさまざまな目標を設定して、それに応じてさまざまなニーズに合わせて設計できるようにします。

「ユーザーストーリー」という用語は、ソフトウェア開発におけるアジャイルムーブメントの創始者の1人であるAlistair Cockburnが、1998年のChryslerのプロジェクトで、「ユーザーストーリーは会話の約束です」というフレーズを作り出したことに由来しています。

ユーザーストーリーは、要件について書くことからそれらについて話すことに重点を移します。 微妙ではありますが、このシフト(書くことから話すことへ)は、設計プロセスに大きな影響を与える可能性があります。

多くの場合、要件は抽象的な方法で提供されます。チェックするリストは、注意しないと、ユーザーが必要とするものとはほとんど似ておらず、「委員会による設計」が必要とするものとは似ていません。 ユーザーストーリーは、ユーザーを会話の中心に位置付けるのに役立ちます。

ユーザーストーリーは、ユーザーを設計プロセスの中心に配置することで、さまざまなユーザーのニーズを定義するための優れた方法です。ユーザーストーリーは、役割をアクションと目標にマッピングするのに役立ちます。
ユーザーストーリーは、ユーザーを設計プロセスの中心に配置することにより、さまざまなユーザーのニーズを定義するための優れた方法です。 ユーザーストーリーは、役割をアクションと目標にマッピングするのに役立ちます。

会話を促進および促進するツールのこのアイデアは、ユーザーストーリーの強みを捉えています。 これらは、シナリオのマッピングを開始するための理想的なツールであり、ユーザーが常に設計および開発プロセスの中心に留まるようにします。

さまざまなユーザーの視点から語られた目標と機能の簡単な説明であるユーザーストーリーは、ユーザーの根本的な目標を理解するのに役立ち、ユーザーの視点から問題を確認できます。 これらは次のようなパターンに従います。

  • (特定の役割の人)として
  • (アクションを実行するか、何かを見つけたい)、
  • そのため(私は私の目標を達成することができます)。

上記のテンプレートを使用して、さまざまなユーザーの立場に立ち、さまざまなストーリーを開発してデザインを形作ることができます。 たとえば、講師と学生が学習資料を共有できるWebベースの学習リソースを構築していると想像してみてください。 さまざまなニーズを持つさまざまなユーザーがいる可能性があります。 講師のユーザーストーリーは次のようになります。

講師として、講義のスライドを共有して、生徒が教室以外のリソースにアクセスできるようにしたいと考えています。

このユーザーの特定のニーズに関する短編小説を作成することで、このタイプのユーザーを満足させるデザインパターンを思い描くことができます。 学生(さまざまなニーズを持つさまざまなユーザー)の観点から見ると、次のユーザーストーリーを作成する可能性があります。

学生として、講義スライドにアクセスして、改訂時に参照できるようにしたいと思います。

これらのストーリーは、さまざまな視点から中継され、設計プロセスの開始時に使用できる有用な挑発を提供して、高レベルでの設計のマッピングを開始します。 重要なのは、ストーリーがユーザーのニーズを満たすことに焦点を合わせていることです。 つまり、ユーザーストーリーは、ユーザーの目標がどのようなものであるかを高レベルで把握するのに役立ちます。 次に、これらのストーリーを使用して、設計を開始できるさまざまなシナリオを開発できます。

シナリオを使用して設計に通知する

プロジェクトの開始時に、機能を豊富に追加したり、「機能炎」で迷子になったりするのは簡単です。 このアプローチの危険性は、ユーザーの主要な目標を損なう機能の追加を簡単に開始できることです。

ユーザーストーリーを使用して典型的なシナリオを開発することにより、ユーザーの主要な目標に集中し続けることができます。 このアプローチにより、プロジェクトの開始時に明確な成果物と範囲を設定するために使用できる、一般的なユーザーのニーズに対する期待を確立し、ベンチマークを開発することもできます。

ユーザーストーリーから始めて、さまざまなユーザーのニーズを満たすさまざまなシナリオの構築を開始できます。これらのストーリーをマッピングしてフローを構築することで、さまざまなユーザーのニーズにどのように対応するかを確立できます。
ユーザーストーリーから始めて、さまざまなユーザーのニーズを満たすさまざまなシナリオの構築を開始できます。 これらのストーリーをマッピングしてフローを構築することで、さまざまなユーザーのニーズにどのように対応するかを確立できます。

前の例に戻ると、さまざまなユーザーの観点からいくつかの高レベルの目標を設定できます。講師の場合、アップロード機能を設計する必要があります。 学生のために、アクセス機能を設計する必要があります。 これらは高レベルの目標ですが、シナリオを開発するときに、ユーザーストーリーにある程度の粒度と複雑さを追加して、設計にさらに情報を提供することができます。

たとえば、前の例に戻ると、学生の観点から、次のシナリオを検討できます。

  • 基本レベルでは、学生はスライドにアクセスしたいと考えています。

  • もう少し強化されたレベルでは、生徒はスライドに注釈を付けてメモをキャプチャできるようにしたいと思うかもしれません。

  • 最後に、リソースが許せば、生徒は自分のメモを同僚と共有して、共同学習を可能にすることができます。

上で検討した例のようなシナリオを使用すると、さまざまなレベルの複雑さを明確に把握し、それに応じてこれらの設計を行うことができます。 また、デザイン全体のユーザーの流れを把握できるため、ユーザーを紙にマッピングして、プロジェクトの鳥瞰図を作成できるようになります。

デザインフローのマッピング

ユーザーストーリーとシナリオをディスカッションの推進力として使用すると、設計全体の経路を高レベルでマッピングし始めることができます。 前に示したユーザーストーリーマッピングのこのプロセスは、さまざまなユーザーフローを定義するのに役立ちます。

プロセスのこの時点で、紙は、より洗練されたストーリーボードの開発に進む前に、ラピッドプロトタイピングのための強力なツールです。 低コスト、低忠実度、高速アプローチのペーパープロトタイピングには多くの利点があります。

  • 低コストで、参入障壁がほとんどない状態で複数のアイデアを検討できます。

  • 忠実度が低いため、全体像に集中し、細部に迷うことはありません。

  • 高速で、フローの複数のバリエーションをすばやく反復できます。

紙はまた、コラボレーションを可能にし、複数の参加者がテーブルを回ってデザインをすばやく開発し、全員の意見や洞察を取り入れることを可能にします。

紙は、初期のプロトタイピング段階のための強力なツールです。低コストで忠実度が低いため、「全体像」に焦点を合わせ、デザインの骨組みを整えることができます。
紙は、初期のプロトタイピング段階のための強力なツールです。 低コストで忠実度が低いため、「全体像」に焦点を合わせ、デザインの骨組みを整えることができます。

最後に、紙は「自分自身を救う」。 画面上でデザインする場合、ソフトウェアが「状態」を保存する性質、つまりデザインプロセスのさまざまなポイントが原因で、デザインアーティファクトが失われることがよくあります。 ペーパープロトタイピングにより、完成したコンセプトに至るまでの拒否されたアイデアを含む、設計プロセス全体を確認できます。

私の経験では、典型的なプロジェクトでは、思考を繰り返し実行するときに、ペーパープロトタイプを複数回必要とすることがよくあります。 プロセスのこの時点では、画面での作業が遅すぎて洗練されすぎているため、不必要な詳細がすぐに失われる可能性があります。 紙は、この段階で重要な全体像に集中するためにあなたを解放します

もちろん、経験豊富な設計者でさえ、インターフェースをスケッチするというアイデアに直面したときに反動する可能性があり、そのプロセスは恐ろしいものです。 「でも、絵が描けない!」と聞くのも珍しくありません。 これは明らかに真実ではありません。私たち全員が子供の頃にうまく描くことができました(両親の冷蔵庫にあるすべての写真が証明したように!)私たちはこの貴重なスキルを再学習する必要があります。

ジェイソンサンタマリアを言い換えると:

スケッチは優れた芸術家になることではなく、優れた思想家になることです。

高レベルのスケッチが確立されたら、ストーリーボードとワイヤーフレームを作成して忠実度を追加し始めます。 その考えを保持します。 ただし、ワイヤーフレーミングとプロトタイピングに関する6番目の記事でそれに戻ります。

科学のスポット:UX法

UXは比較的新しい分野かもしれませんが、ヒューマンコンピュータインタラクション(HCI)の分野での数十年にわたる研究から情報を得ています。

このシリーズの最初の記事で述べたように、ユーザーエクスペリエンスデザインの進化については、何よりも人間向けにデザインしています。人間は、デザインを決定する際に考慮すべき同様の特性を広く共有しています。 HCIは、ユーザーエクスペリエンスデザインの分野に適用できる多くの原則を提供します。

これらの原則の多くは、たとえば次のような「法則」の形で抽出されています。

  • ヒックの法則。これは、認知的負担を軽減し、意思決定を促進するために選択肢を最小限に抑える必要性を強調しています。

  • フィッツの法則。インターフェイス要素のサイズ設定と配置を慎重に行うことで、相互作用を容易にする方法に関する貴重なアドバイスを提供します。 と

  • 複雑なタスクを容易にするための「チャンキング」の利点を強調するミラーの法則。

これらは、マクロレベルとミクロレベルの両方で適用できる原則であり、設計者として改善するために、深く探求する価値があります。 ヒックの法則、フィッツの法則、ミラーの法則の3つについて説明しますが、他にもたくさんあります。

JonYablonskiの優れたサイトであるLawsof UXは、ブックマークする価値のある、役立つ原則のコレクションです。 それ自体が素敵なデザインであるだけでなく、各原則の概要と、さらに読むためのリンクも提供します。

ヒックの法則

ヒックの法則(または、完全にヒック・ハイマンの法則)は次のように述べています。

決定にかかる時間は、選択肢の数と複雑さとともに増加します。

心理学者のペアであるウィリアム・エドマンド・ヒックとレイ・ハイマンにちなんで名付けられたこの法律は、ユーザーに提示する選択肢の数を減らすことの重要性を強調しています。

無限の一連の選択肢を提供することでユーザーを支援していると思うかもしれませんが、実際には、ユーザーの認知的負担が増えています。 ユーザーが直面する選択肢が多ければ多いほど、「意思決定の麻痺」によって機能不全に陥り、立ち去る可能性が高くなります。 これは、ユーザーが立ち去ると収益に直接影響を与えるeコマースのコンテキストでは特に問題になる可能性があります。

Book Apartは、最近のリリースを特集しています
A Book Apartは、ホームページにすべての本を掲載するのではなく、最近のリリースだけを取り上げており、選択肢の数を減らし、意思決定の麻痺を軽減しています。 特定の本を探している人は、クリックするだけでライブラリ全体を利用できます。

ヒックの法則をさまざまな方法でUXデザインに適用できます。

  • 選択肢の無限のリストを提供する代わりにナビゲーションを作成するときは、ほんの数個に焦点を合わせてください。 あなたのユーザーはあなたに感謝します。

  • eコマースのコンテキストでは、すべての製品を一覧表示するのではなく、選択肢の数を減らして焦点を絞ります。 これを行うと、意思決定の麻痺を相殺して、コンバージョン率を高めることができます

  • 重要なコンテンツと二次的なコンテンツを区別します。 ユーザーがより少ない選択肢から道を見つけることができるようにすることで、認知的負担を軽減します。

私たちはしばしば「もっと」を「より良い」と同一視することで罪を犯しますが、ヒックの法則は私たちに別のことを考えるように言っています。 オプションの数が多いほど、ユーザーが決定に達するまでの時間が長くなります(場合によっては、決定を下さないことになります)。 特に、選択にますます圧倒される世界では、焦点が重要です。

フィッツの法則

フィッツの法則は次のように述べています。ターゲットを取得するのにかかる時間は、ターゲットまでの距離とサイズの関数です。 つまり、ターゲットが遠くにある場合(たとえば、画面上のボタン)、ユーザーがターゲットに簡単に到達できるようにするには、ターゲットを大きくする必要があります。

ボタンやその他のクリック可能な画面上の要素を設計する場合、フィッツの法則は特に重要です。 コンテキストが異なれば、必要なアプローチも異なり、設計アプローチに役立ちます。

インターコムは、行動を促すフレーズのボタンが大きく、人目を引くことを保証します
インターコムのホームページでは、召喚状のボタンが大きくて人目を引くため、見やすく、ナビゲートしやすいようになっています。

デスクトップのコンテキストでは、ユーザーはマウスを使用し、大画面では潜在的に長距離を移動します。 このコンテキストでは、召喚状ボタン(CTA)のサイズが適切で、見やすく、クリックしやすいことを確認することが重要です。

モバイルコンテキストでは、インターフェイスを設計するときにタップターゲットを考慮することが重要です。 タッチスクリーン用に設計する場合、指はマウスポインターよりも忠実度が低いため、タップターゲットサイズを大きくする必要があります。 (もちろん、デスクトップ環境でのより大きなタップターゲットも役立ちます!)

フィッツの法則をさまざまな方法でUXデザインに適用できます。

  • モバイル向けに設計するときは、タップターゲットを考慮してください。 画面のスペースが少なくなると、クリック可能な要素の数が減り、サイズが大きくなります

  • 当たり前のように聞こえるかもしれませんが、画面に大きなボタンがある場合は、それが主要な行動の呼びかけであることを確認してください。そうしないと、ユーザーが誤ってボタンをクリックするリスクがあります。

  • ドロップダウンメニューまたは他の形式のネストされたナビゲーションを設計するときは、ターゲットサイズがユーザーが取得できる十分な大きさであることを確認してください。

一般的に言って、何かが遠くにあるほど、ユーザーがそれを打つために必要な大きさは大きくなります。 設計を高レベルで計画するときは、重要な行動の呼びかけを検討し、これらを設計するときにフィッツの法則を採用していることを確認してください。 小さなボタンはきちんと整頓されているように見えるかもしれませんが、ユーザーを苛立たせる場合は、デザインを機能させる必要があります。

ミラーの法則

ミラーの法則は次のように述べています。平均的な人は、作業記憶に7つ(プラスまたはマイナス2)のアイテムしか保持できません。 要するに、私たちが短期間で頭に抱えることができるのはそれほど多くないということです。

ミラーの法則は、情報をどのように整理およびグループ化するかを検討するときに特に重要であり、チャンキングが役立つ場合があります。 次の2つの電話番号(両方とも同じ架空の番号)のフォーマットを検討してください。

  • 07700984964

  • 07700 984 964

スペースのない数字の文字列であるため、11桁の数字は、ユーザーが作業メモリーに保持するのが困難です。 ただし、いくらかの間隔を追加すると、ユーザーの作業が大幅に簡素化されます。 情報をチャンク化することにより、ユーザーは3つのグループの数値を作業メモリーに保持し、タスクを完了できるようになります。

カード番号と詳細を入力するときにユーザーを支援する
Gumroadスペースでクレジットカードの詳細を入力すると、クレジットカードの数字が4つのグループにチャンクされます。 これは、ユーザーがカード番号を入力するとき、および正しいカードの詳細を入力したかどうかを確認するのに役立ちます。

ミラーの法則は、このようなマイクロインタラクションを緩和するだけではありません。 よりマクロなスケールで使用することもできます。 たとえば、フォームを設計するときは、情報を論理的に編成されたグループにチャンク化することに焦点を当てます。名前、住所、連絡先の詳細。 ユーザー名やパスワードなどのアカウントの詳細。 銀行の詳細; およびその他のグループ。

ミラーの法則をさまざまな方法でUXデザインに適用できます。

  • 電話番号を一覧表示するときは、情報をチャンク化して、作業メモリーに簡単に保持できるようにします

  • クレジットカード情報を備えた支払いフォームを設計する場合、クレジットカード番号は4つのチャンクに分割されているとユーザーが簡単に解析できます。

  • 提供される選択肢の数を制限することにより、認知的負荷を軽減します。

デザイナーとして、私たちはしばしば複雑な情報を提示しなければなりません。 ミラーの法則は、この文脈で覚えておくと便利です。 可能な場合は、分解してチャンク化できる情報のグループを探し、ユーザーの作業メモリーにそれらをより簡単に保持できるようにします。

ルックアンドフィール:ビジュアルデザインの伝達

プロジェクトのフローの鳥瞰図が確立されたら、そのルックアンドフィールとビジュアルデザインについて考え始めることが重要です。 これは私が「ビジュアルグラマー」と呼んでいるものであり、デザインに採用するビジュアルアプローチです。

時計、電話(小型から大型まで)、タブレット、デスクトップ、その他のメディアなど、デザインするデバイスが増え続ける中、単一ピクセルの完璧なビジュアルを開発するというアイデアは時代遅れになっています。

この変化する風景に対応して、デザインの「フレーバー」をキャプチャするために、ピクセルの完全性から離れるデザインアーティファクトへの動きが見られました。 これらのアーティファクトには、たとえば次のものが含まれます。

  • ムードボード
  • スタイルタイル
  • 要素のコラージュ

プロセスは人によって異なりますが、プロセスのこの段階では、ムードボードと要素のコラージュを組み合わせて方向性を確立します。ムードボードは適切なボールパークに入るのに役立ち、要素のコラージュはビジュアルデザイン間の架け橋として機能します。とユーザーインターフェイスのデザイン。

ムードボーディング

ムードボーディングは、その名前が示すように、ムードを確立し、全体的な目標に合った特定のルックアンドフィールにゾーンインするのに役立ちます。 ムードボードは会話のきっかけとして役立ち、その周りに構築できる焦点として機能します。 経験則として、私は通常、3〜5つの異なるムードボードを組み合わせ、それぞれが異なる方向を示します。

あなたは特定のルックアンドフィールを念頭に置いているかもしれませんが、私たち全員が知っているように、私は確信していますが、あなたの好みのオプションはクライアントの視点と一致しないかもしれません。 選択肢があると便利だと思います。多くの場合、さまざまなムードボードからさまざまな要素をまとめた最終結果を見つけることができます。

TinyBooksのWebサイトのムードボード
Tiny Booksのムードボードを開発するとき、私はアナログ(左)とデジタル(右)の両方のアプローチを採用しました。 私のデジタルムードボードは、サイトのブランディングを優雅に開発したVicBellに方向性を提供するのに役立ちました。

結論:この段階では、画面サイズが大きく異なる時代には無駄なピクセルパーフェクトなデザインを作成することに迷うことなく、高レベルのビジュアルデザインを提示しています。 詳細なモックアップは、ワイヤーフレーミングとプロトタイピングの段階で続きます。

プロセスのこのポイントは、会話のきっかけとなるために使用できるデザインアーティファクトの開発に関するものです。 その創造的な議論を推進するために、それぞれが異なるルックアンドフィールを持つさまざまな異なるムードボードを持つことが役立ちます

ムードボードをまとめるときは、デジタルアプローチだけでなくアナログアプローチも考慮することが重要です。 視覚的なインスピレーションが100%デジタルである場合、あるデザインが別のデザインとまったく同じように見えるのと同じように見えるというリスクがあります。 画面の向こう側からインスピレーションを得たり、古い不要な雑誌を使ってインスピレーションを得たりすることを検討してください。そうすれば、デザインが際立ちます。

要素のコラージュ

ムードボードにフィードバックを集めたら、いくつかのデザインコンポーネントの開発を開始し、視覚的な方向性をいくつかの典型的なユーザーインターフェイス要素に適用して、「視覚的な文法」に落ち着くことができます。

スタイルタイルや要素コラージュなど、これを行うために使用できるツールは多数あります。 どちらにも長所があり、主に完成したルックアンドフィールに向けてエッジングするための触媒として機能します。

スタイルタイルの方法論を開発したサマンサウォーレンは、次のように述べています。

スタイルタイルは、クライアントの好みや目標に関する議論のきっかけになります。

ルックアンドフィールについて話し合うことに重点を置いているのが、これら2つの方法の強みです。 これらはかなりの時間を節約し、この段階で複数のサイズでピクセルパーフェクトなレンダリングを作成する必要がなくなります。

私の経験では、スタイルタイルは、視覚的なモックアップであると誤って考えているクライアントによって誤読される可能性があります。 私はより自由形式で、テンプレートベースのアプローチを好みません。DanMallのElement Collageアプローチを発見したとき、私は夢中になりました。

読書のためのダンモールによる要素のコラージュは基本的です
エレメントコラージュ(Dan Mall for Reading Is Fundamentalのようなもの)は、さまざまな視覚要素をキャプチャし、潜在的なデザインの方向性について会話を始めるのに役立ちます。

リーディング・イズ・ファンダメンタルのプロジェクトに関する彼のデザインプロセスを詳述した優れた投稿で、モールはプレゼンテーションを会話に置き換え、クライアントをプロセスに関与させる必要性を強調しています。 Element Collagesは、この会話型アプローチを推進するための優れた方法です。 モールが言うように:

クライアントとデザインについて話すときは、同じことを話していることを確認するために、できるだけ多くの視覚的な飼料を用意するのが好きです。 私のバージョンのStyleTilesは、私が「要素コラージュ」と呼んでいる別のタイプの実行のためにコラージュするという私の愛情を統合しています。 その特定のフレーズは、私たちが見ているのは最終的なデザインではなく、特定のロジックや順序のない異種のピースのアセンブリであるという期待を生み出します。

Element Collagesの優れている点は、ムードボードと(間もなく開発される)UIコンポーネントの間のブリッジとして機能することです。 それらは、私たちが構築するものの感触を確立するためにクライアントに示すのに十分な柔軟性があります。 とりわけ、これらは、より時間のかかるプロトタイプの開発を開始する前に、視覚的な文法に関するコンセンサスを得るのに役立つ便利なツールです。

最後に

ユーザーインターフェイス(UI)の設計とインタラクティブなプロトタイプの構築の詳細に取り掛かる前に、設計の高レベルのフローを設定し、その周りに設計を構築できるスケルトンを確立することが重要です。

プロジェクトの設計フェーズを開始するための高レベルのプロセスを確立することにより、より効率的に作業して、明確なフレームワークを導入できます。 プロセスのこの段階では、細部に迷うのではなく、幅広いブラシストロークを適切に配置することに集中することが重要です。

UIの設計やワイヤーフレームやプロトタイプの開発を深く掘り下げる前に、幅広いブラシストロークを取得することが重要です。 詳細に入る前に、明確な設計の方向性といくつかの明確なユーザー目標を確立することに焦点を当てます。 明確な設計目標を設定せずに細部に焦点を合わせたいという衝動に抵抗することで、無駄な作業を節約できます。

要するに、すべてがマッピングされるまで、詳細に迷わないでください。

推奨読書

オフラインでもオンラインでも、冒険に役立つすばらしい出版物がたくさんあります。 私はあなたの旅を始めるために以下にいくつかを含めました。

  • 「よりスマートなユーザーストーリーの書き方」、Joe Natoli
    すでにユーザーストーリーに精通している場合は、Natoliが提案するユーザーストーリーの拡張機能(測定可能なメリットに焦点を当てることによる)を読むことをお勧めします。

  • 「ユーザーストーリー」、Mountain Goat Software
    このガイドでは、ユーザーストーリーを一連の小さな接続されたストーリーに分割し、「満足の条件」を追加するための役立つアドバイスを提供します。これは検討する価値があります。

  • 「UXの法則」ジョン・ヤブロンスキー
    ブックマークする価値のある、役立つ原則のコレクションを備えた優れたサイト。 それ自体が素敵なデザインであるだけでなく、各原則の概要と、さらに読むためのリンクも提供します。

  • 「心理学とUX」、ニールセンノーマングループ
    ユーザーエクスペリエンスの分野で適用できるさまざまな法則にしっかりと基づいているので、心理学も探求することをお勧めします。

  • 「エレメントコラージュ」、ダンモール
    これらのツールを一般的なクライアントプロジェクトのサービスでどのように使用できるかを理解したい場合は、これを読む価値があります。

この記事は、アドビが後援するUXデザインシリーズの一部です。 Adobe XDは、アイデアからプロトタイプへの移行を高速化できるため、高速で流動的なUXデザインプロセス向けに作られています。 設計、プロトタイプ作成、共有—すべてを1つのアプリで。 Adobe XD on Behanceで作成されたより刺激的なプロジェクトをチェックしたり、Adobeエクスペリエンスデザインニュースレターにサインアップして、UX / UIデザインの最新のトレンドや洞察に関する最新情報を入手したりできます。