【翻訳】「成果物ありき」でも「成果物なし」でも無いデザインプロセス(Rian van der Merwe, Smashing Magazine, 2015)

www.smashingmagazine.com

「成果物ありきのビジネスから手を引け」は、リーン・スタートアップやUXムーブメントにおいて、かなりのマントラとなっています。結局のところ、ワイヤーフレームを作るたびに、顧客にコードを出荷しているわけではないのです。

しかし、私は、最小実行可能プロダクト(minimum viable product)のコンセプトと同じように、私たちはこの健全なアドバイスを極端に受け止めてしまい、良いプロダクトを作る上で実際に傷つけてしまっているのではないかと心配しています。以下は、コミュニティとともにこの荒波を乗り越えてきた私自身の旅の記録です。

下の写真は、多くの人が史上初のワイヤーフレームと信じているものです。パオロ・ディ・ドーノ(またはパオロ・ウッチェロ)が1400年代半ばに描いたものとされています。

最初のワイヤーフレーム。(Image: McGill University) (View large version

当時、ワイヤーフレームは、日用品のデザインにおいて、非常に具体的な目標を達成するために使われていました:

  • 任意の地点からモデルを見る、
  • 標準ビューと補助ビューを作成する、
  • 透視図をより簡単に作成する、
  • 構造内の距離を分析する、
  • 公差や干渉のチェック、
  • 必要なプロトタイプの数を減らす、
  • モデルの編集。

ワイヤーフレームモデルは建築の世界では特に有用であるため、CADモデルを作成するためのソフトウェアにワイヤーフレームモデルが不可欠なのは当然のことです:

回転するワイヤーフレーム。(イメージ DanCad3D) (View large version

ワイヤーフレームは、もともと2つのプロダクトデザインの目標を達成するために使われていました: 手戻りを減らし、納期を早める。この言葉は、デザイナーやデベロッパーの耳をピクピクさせるでしょう。それを望まない人はいないでしょう。

しかし、いつの間にか、私たちはワイヤーフレームを全く違うものに水増ししてしまいました。最悪の場合、ワイヤーフレームは完成したPhotoshopファイルを元に、代理店のアカウントマネージャーが販売したプロジェクトの一部として「UXを担当する」ことになっていることを思い出した時点で作成された、逆エンジニアリングされた成果物です。せいぜい、優れたコミュニケーションツールとして歓迎される程度で、それ以上でもそれ以下でもないのです。私たちは、非常に有用なデザインツールを、私たちがTwitterで争うものにまで貶めてしまっています。そして、批判の的になっているのは、地味なワイヤーフレームだけではありません。ペルソナ。PSD。報告プレゼンテーション。どれも同じように軽蔑の目で見られています。

現実は、私たちが「成果物ありき」に浴びせる批判には多くの真実があります。リーンムーブメントは、成果物ありきのビジネスからの脱却の主な理由について正しいのです: 文書化することに費やす時間は、ものを作らないことに費やす時間であり、それは問題です。仮説を立て、それを素早く構築し、ユーザーとテストしてフィードバックを得て、反復する方がずっといいのです。私はそのアプローチに完全に同意します。

とはいえ、このアプローチには問題があります。それは、成果物を作るのをやめるという私自身の旅の中で、ますます悩まされるようになったことです。その問題とは、デザインはパスに依存するということです。デザインの初期に行う選択は、後に行う選択を制約します。ライアン・シンガーは、Quoraのスレッド「良いユーザー体験に集中すべきか、それとも素早く何かを押し出すべきか 」の回答で、このことを実にうまくまとめています。

最初の反復では、デザインの可能性は広く開かれています。デザイナーがいくつかの画面とワークフローを定義し、プログラマーがそれを構築します。次のイテレーションでは、デザインの可能性は広がりません。それは新しいデザインは既存のデザインにフィットしなければならないのです。

新しいコードは既存のコードに合わせる必要があります。古いコードを変更することは可能だが、すべてを破棄したくはないでしょう。すでにあるものを使い続けなければならないというプレッシャーがあります。

私たちの初期のデザイン決定は、繰り返し繰り返しその結果に耐えなければならない賭けのようなものです。そうである以上、初期の賭けには確実性を求める強い動機があります。言い換えれば、私たちは最初の反復における不確実性を減らしたいのです。

そこで、私がデザイン・プロセスから成果物を取り除く際にぶつかり続けた主な疑問がこれです: どこから始めればいいのか、どうすればいいのか?それだけでなく、私たちが皆、存在しないふりをしたいけれど、毎日対処しなければならないことについてはどうでしょう?ご存知、「S」の言葉です。利害関係者(Stakeholders)、何が起こっているのか、なぜ起こっているのかを知る必要のある人々です。成果物がなければ、私たちは頼るものもなく、その要素にさらされているようなものです。

何かを与えなければならないのです。そして、その何かとは、私たちがデザイン・開発プロセスの一部とする成果物なのだと思います。そこで私は考え始めた。

ジャレド・スプールが今年の初めに書いた「A Bias for Making(作ることへの偏見)」という素晴らしい文章について考え始めました:

作ることに偏るということは、チームが決して計画を立てないということではないのです。それどころか、計画はデザインプロセス全体を通して流動的に行われます。その違いは、チームが作るプロセスから学ぶことで進化していくということです。

そして、「 あなたは必要以上にコストを3倍から5倍かけている」にあるギフ・コンスタブルの言葉を考え始めました:

アジャイル/リーンは、人々が 「大々的な先行デザイン 」フェーズを否定するのに役立っているが、あまりにも多くの人がそれを何もしないことに置き換えています。

そして、このようなことを考え続けているうちに、私は、正しい成果物が実際に得意とすることがいくつかあることに気づき始めました。例えば:

  • 成果物は、ワイヤーフレームやプロトタイプのデザインを開始するためのより良いベースラインを提供することができます。
  • 成果物は、全員が同じビジョンを持ち、経営陣が実行計画を理解するためのコミュニケーションツールとして機能することで、チームの円滑な運営を助けることができます。
  • 必然的なリーダーシップの交代が起こっても、すべてが破棄され、全員が最初からやり直すことにならないようにするためです。

もちろん、次の明白な疑問は、「あなたの言う正しい成果物とは何か?」です。もし私たち全員が、lorem ipsumベースのワイヤーフレームと何百ものPSDはリーンの精神に反するということに同意しているのなら、代替案は何でしょうか?どうすれば「成果物なし」がもたらす問題を解決し、より良いプロダクト(これは私たち全員が共通して持っている最終目標です)を作るのに役立つ何かを考え出すことができるのでしょうか?

このような問題を解決する可能性のあります(現在進行形の)成果物として、私が取り組んでいるものが2種類あります:拡大カスタマージャーニーマップとコンテンツスライスダイアグラムです。それぞれを順番に見ていこいます。

拡張カスタマージャーニーマップ

ジャーニーマップは、調査を要約し、ユーザーのニーズと機会を強調し、優先順位をつけ、チームに共通のゴールを与える視覚的な表現です。(Adaptive Pathの優れた紹介「【エクスペリエンスマップの解剖】」を参照)。プロダクトのジャーニーマップが重要な理由はいくつかあります:

  • それは、ユーザーのニーズとゴール、そして、それらのニーズとゴールに対応するための戦略に関する共通の理解を確認するためです。
  • 全体像を見失うことなく、エクスペリエンスの最も重要な部分にまず焦点を当てることができるため、優先順位付けのツールとして優れています。
  • ワイヤーフレームやプロトタイピングに移ってからも、デザインの指針となります。デザインのアイデアが浮かぶたびに、ジャーニーマップを一目見れば、それが選択した戦略を達成する良いアイデアかどうかを把握することができます。
  • レスポンシブデザインのアプローチに完璧にフィットする、コンテンツファーストのデザインのための優れた導線です。

カスタマージャーニーマップは様々な方法で作成することができますが、顧客とのタッチポイントや感情を視覚的に表現したり、顧客がプロダクトを体験する中で重要なポイントを示したりするなど、共通している要素があります。しかし、それはある時点までしか役に立たないので、私たちはこのコンセプトを拡張し始めました。ペルソナ(ニーズ、ゴール、シナリオ)がすべての出発点、つまりすべてを結びつける接着剤の役割を果たします。

この新しいドキュメントは、ユーザーにとって最良のプロダクトをデザインするために必要なすべてのことをまとめたものです。以下の要素があります:

  • ユニーク・セールス・ポイントは、ウェブサイトが常に何を伝える必要があるかに集中するためのものです。これは、ペルソナのニーズとゴールから直接導き出されます。
  • ジャーニー・ステージとモデルは、プロダクトが人々の生活にどのようにフィットするか、そしてウェブサイト全体を通してどのような主要な行動喚起が必要かを思い起こさせます。このセクションは、顧客がそのプロダクトを必要とするかもしれないと気づいてから、そのプロダクトを使用したずっと後までの、顧客のジャーニーを視覚的に表したものです。これにより、プロダクトマネージャーはプロダクト全体を俯瞰し、それがユーザーの日常生活にどのようにフィットするかを把握することができます。
  • エスチョンは、ターゲットとなるペルソナがジャーニーの各フェーズで質問するであろうもので、各ページで提供するコンテンツのタイプに焦点を当てます。Eコマースで言えば、」この小売業者は信頼できますか?「や 」私の商品はいつ届きますか?"といった質問です。
  • 独自のセールスポイント、ジャーニーモデル、ユーザーの質問を要約し、デザインプロセス全体を通して念頭に置くべきデザインの決定やソリューションにどのように反映させるかを文書化します。
  • コンテンツプランは、ジャーニーの各フェーズと、そのフェーズでペルソナが尋ねる質問、そして各ページに掲載する必要のある具体的なコンテンツの意味をまとめたものです。コンテンツプランにないものはページに掲載しないのです。そして、そのコンテンツが役に立つと思われるペルソナを特定できなければ、リストに載せることはないのです。

Mr.デリバリーのリデザインのために作成した拡張ジャーニーマップ。(View large version

このような拡張カスタマージャーニーマップは、いくつかの点で非常に優れていることがわかりました:

  • それは、完全にデバイスにとらわれないことです。ペルソナとコンテンツから始まり、デザイン全体がそこに固定されます。
  • インタラクションをデザインし、プロトタイプを作成し始めると、デザインサイクルが速くなります。
  • ユーザーテストでは、ユーザビリティの問題が少なくなる傾向があります。
  • つまり、ボタンを青にするか黄色にするかで争うのではなく、そのデザインが合意した目標を達成しているかどうかで争うのです。

もちろん完璧なソリューションではないのです。どんなものにも欠点はあります。拡張ジャーニーの場合、私たちは以下のような課題を克服する必要があることがわかりました:

  • デザイン開始までのリードタイムが長くなることは否定できません。問題を考えるには時間がかかるからです。デザイン段階が始まれば、前述のようにその時間は十分に取り戻せますが、それでもクライアントや社内の利害関係者が思うように早く「絵」を見ることができないと、気まずい思いをすることがあります。
  • あなたがUXオタクなら、気が散りやすいものです。このようなことは、人によっては(OK、私にとっては)とてもエキサイティングなことなので、自分をチェックしなければ、何日もそのホワイトボードの前に立ち尽くすこともあり得ます。これは素敵なドキュメントを作るためではなく、より良いプロダクトを作るためなのです。ベストを尽くして、次に進もいます。分析麻痺に陥らないように。

コンテンツスライスダイアグラム

拡張カスタマージャーニーマップは素晴らしいが、それは物語の半分に過ぎないのです。これらのジャーニーマップは、ページのレイアウトに移る前にどのようなコンテンツが必要かを計画することを強います。しかし、ページにどんなコンテンツを載せるべきかを知ることと、そのコンテンツに最適なレイアウトをデザインすることの間にある溝を越えることは、まだかなり難しいのです。

必要なのは、ウェブサイト全体の一貫性を見失うことなく、すべてのページでコンテンツの階層を決定する効果的な方法です。コンテンツスライスダイアグラムは、3つの基本的なタスクを達成します:

  • ウェブサイト全体のコンテンツの概要を把握し、欠落がなく、レイアウトが適切なところで一貫していることを確認します。
  • ページ上の各コンテンツチャンクの適切なサイズと階層をデザインし、それがページ全体や関連ページにどのような影響を与えるかを確認します。
  • ライターがウェブサイトのコンテンツを作成する際に留意すべきガイドラインがあれば提示します。

コンテンツスライスダイアグラムが完成したら、デザイナーとライターは以下の情報を得る必要があります:

  • 各ページの階層を明確に理解し、モバイルファーストのレイアウトデザインにシームレスにつなげます;
  • 各チャンクに含まれるコンテンツの構造と性質。

これが、レイアウトに取り掛かるために必要なすべてです。例として、カスタマージャーニーマップの一部としてコンテンツプランに取り組んだとしましょう。そんなときに役立つのが、コンテンツスライスダイアグラムです。これは、Discover Africaのリデザインのために作成したものです:

拡大ジャーニーマップ。(View large version

上の画像にあるのは、左から右に進むページのリストで、長方形はページ上のコンテンツの塊を表しています。行動喚起やオプションのモジュールは、区別しやすいように別の色が付けられています。旅行サイトのためにこれを行ったとき、行動喚起が時々違う場所にあることに気づいたので、ページ間の一貫性を確立することができました。また、意味のある階層になるまで、コンテンツの塊を移動させました。

これがモバイル画面のレイアウトのように見えることにお気づきでしょう。これは本来の意図ではありませんでしたが、コンテンツスライスダイアグラムを作成することの副次的な効果として歓迎されることになりました: モバイルファーストデザインのための素晴らしい青写真です。

階層が決まったら、コンテンツガイドを作成して、ライターが書き始めるのに必要な構造的な情報を与えることができます:

コンテンツスライス。(View large version

前述したように、私は無駄な成果物は嫌いだが、より良いプロダクトをデザインするのに役立つ成果物はとても好きです。そして、コンテンツスライスダイアグラムは、デバイスにとらわれない、コンテンツファーストの体験をデザインするための、私たちが自由に使えるツールに加えられる素晴らしいものだと思います。

そしてポイントは?

さて、これで私たちはどうなるのでしょうか?確かに、成果物は私たちのペースを落とし、誰も読まないドキュメントを生み出す可能性があります。しかし、適切な成果物は、チームを統一されたプロダクトビジョンに固定し、プロダクトアイデアの早期検証を提供し、(適切な)意思決定活動をスピードアップさせます。これらは、私にとって欠点に値するものです。

覚えておいてほしいのは、成果物は悪いものではないということです。悪い成果物が悪いのです。