誰が、何を、どのように: 実装への道を示すデザインマップ

「チーム プロジェクト」と呼ばれるものでは、全員が異なるページを閲覧していることが驚くほど頻繁にあります。デザインマップは点と点を結びます。研究、使用事例、デザインを整理します。 アーティファクト チームが実際に迅速に構築できる、明確なオブジェクト指向インターフェイスに変換されます。 「ちょっと待って、これはどういう意味ですか？」ということはもうありません。開発者から。設計から納品までの間に機能が失われることはもうありません。よりスムーズな引き継ぎ、より速い開発サイクル、そしてあなたのビジョンを構築したいと考えているチームメイトだけです。

このビデオでは、ユーザー エクスペリエンス (UX) ストラテジストで Syntagm Ltd の創設者である William Hudson が、さまざまな機能を統合するデザイン マップを構築する方法を説明します。 ペルソナ、 シナリオ、およびスケッチなどの主要なデザイン成果物、 ワイヤーフレーム、 そして プロトタイプそれで揃えることができます ユーザーのニーズ、システムの制約、および実装の決定を 1 つの明確なフレームワークにまとめます。

コラボレーション用のデザインマップを作成する方法

デザインマップも同時期に登場 ユーザーストーリー 概念と外観は、世界で人気のあるユーザー ストーリー マップに似ています。 アジャイル チーム。ただし、ユーザー ストーリー マップには、ユーザーが実行するステップのみが含まれており、 質問、 コメント、 そして アイデア。ここで取り上げているデザイン マップは、Pruitt と Adlin’s からのものです。 ペルソナのライフサイクル。

このビデオでは、William が、デザイン マップのすべての基本要素を組み立てる方法を示しています。 UXデザイン、これを付箋で行います。

クリップ内で述べたように、次のものだけに頼るべきではありません。 色 意味を伝えるために。コメント、質問、アイデアにラベルを付けたりマークしたりすることでこの問題に対処でき、色だけがメモの種類を示す唯一の手がかりではなくなります。

デザインマップツール

フリップ チャート パッド、イーゼル紙、ブッチャー紙、クラフト紙ロールなどの大きな紙シートまたはロールを使用して、紙のデザイン マップを簡単に作成できます。付箋は 4 色のパックで販売されており、多くの場合、上記のデザイン マップに示されている色が使用されます。

デジタル デザイン マップには、さまざまな共同デジタル ツールを使用できます。これらのビデオでは、William が無料アカウントを使用して Figma と Miro でデザイン マップを作成する方法を示しています。

フィグマ

ミロ

デザイン マップを直接作成する場合でも、オンラインで作成する場合でも、ペルソナの手順から開始し、必要に応じて他のメモを追加します。紙のデザインマップは次の方法で作成される傾向があります。 ワークショップ。オンライン コラボレーションにはワークショップが依然として最適なオプションである可能性がありますが、必要に応じて、チームは他の時間に変更や追加を行うことができます。

ビジュアライゼーションを追加する

デザイン マップを構築するときに、意図を明確にして実装をガイドするシンプルな視覚要素を追加することで、デザイン マップを強化できます。クイックスケッチ、サムネイル、または簡略化された画面ビューを使用して、各ステップでユーザーが体験する内容を示します。

視覚的な手がかり これにより、チームがユーザーのアクションをインターフェイスの動作と結びつけやすくなり、設計意図が開発に確実に反映されるようになります。追加する視覚的な詳細のレベルは、チームのニーズによって異なります。 スケッチ 必要なものすべてを伝達しますが、より忠実度の高い視覚化が必要な場合もあります。最も重要なことは、マップが、設計が実際にどのように機能するかを共有されたわかりやすいビューであり続けることです。

テイクアウェイ

デザインマップはすべてをまとめます。 誰が、何を、どのようにして デザインプロセスの重要性を高めるため、チームは ついに同じページにたどり着いた そして共有のビジョンに向かって構築します。あなたの ペルソナ 誰に向けてデザインしているのかを定義します。あなたの 使用の話 彼らが何を達成しようとしているのかを示します。そしてあなたの デザインアーティファクト、スケッチ、ワイヤーフレーム、プロトタイプなど、それらの旅に命を吹き込みます。

これらをチームのものと組み合わせると、 コメント、質問、アイデア、わかりやすく、誤解されにくい共有画像を作成します。インクルージョンを考慮してデザインすることを忘れないでください。色を慎重に使用し、 透明なラベルまたは図形を追加する したがって、全員が同じ認識を保つことができます。

デザイン マップは、プロジェクトをユーザーのニーズに基づいて維持し、コラボレーションを強化し、美しく機能するだけでなく、 構築しているすべての人にとって意味がある。なぜなら、チームが共通の目的を持ってデザインすると、自分の仕事の意味が増し、それが生み出す影響に誇りが持てるからです。

参考文献と詳細情報の入手先

デザイン マップについて詳しくは、John Pruitt と Tamara Adlin の著書をご覧ください。 ペルソナのライフサイクル。短いバージョンもあります 重要なペルソナのライフサイクル。タマラ・アドリンの作品をダウンロードできます PDF としてのデザインマップに関する章。

ユーザー ストーリー マップとデザイン マップの違いについて詳しくは、次の記事をご覧ください。 デザインにおけるユーザーストーリーマッピング。

ヒーロー画像: © Pruitt & Adlin、ペルソナ ライフサイクル、フェアユース。再描画者 インタラクションデザイン 財団。