ユーザーエクスペリエンスデザインの初期の成果物をより視覚的にする

[編集者注] この記事の著者はBarnabas Nagyで、@C7210が翻訳しました。 Barnabas 氏は、UX デザイナー兼情報アーキテクトとして 6 年間の経験があります。ユーザー エクスペリエンス デザインの実現について、彼は 1 つの点を指摘しています。「パートナーがあなたの実現を理解しない可能性があります。」

デザインを理解しやすくするためには、優れた視覚的結果を提供することがよい選択です。

実際のユーザー エクスペリエンス デザイン作業では、デザイナーとしての出力の一部は、特にユーザー ロールの定義、情報アーキテクチャの分析、機能プロセスの計画を含むドキュメントなど、情報の提示とコミュニケーションの有効性の点で理想的ではありません。これらの成果物を直感的で分かりやすくし、より強力なコミュニケーション機能を持たせる方法についても、考えなければならない問題です。

テキストと単純な図形だけでは不十分

言葉については人によって考え方が異なります。 「リンゴが木から落ちた」という文章について尋ねられたとき、赤いリンゴを想像する人もいれば、青いリンゴを想像する人もいます。 「青リンゴ」という概念を情報の中で直接伝えることによってのみ、人々の心に赤いリンゴのイメージが浮かばないようにすることができます。それは非常に単純な真実です。

人によって形の解釈も異なります。長方形を人々のグループに見せると、それを単に長方形として解釈する人もいれば、紙切れやレンガだと考える人もいます。レンガを直接見せれば、誰もがそれが何であるかが分かります。したがって、最も単純な視覚イメージであっても、異なる方法で提示されると、理解の仕方が変わってきます。

したがって、職場では、さまざまなボックスと矢印で構成されたドキュメントやフローチャート、ワイヤーフレームのプロトタイプなどを、協力部門の同僚が正確に理解することを実際に期待することはできません。さらに、多くの場合、人々はこれらのことを真剣に読むつもりはありません。

視覚化の重要性

私たちの現実世界の観察と理解は主に視覚に基づいており、視覚的なコミュニケーション方法は人々が情報をより効果的に受け取るのに役立ちます。デザイナーとして私たちは日々、製品に関わる人々とコンセプトやアイデアを伝えていますが、その情報を伝えるメディアにも優れたデザインが求められます。優れた視覚情報メディアは、人々が概念やアイデアをよりよく理解するのに役立つだけでなく、情報自体に共感し、デザイン出力の影響力と説得力を高めるのにも役立ちます。

ユーザーエクスペリエンスデザインにおける視覚情報の例

英語版の原著者である私はクリエイティブデザインのバックグラウンドを持っています。そのため、その後のユーザーエクスペリエンスデザインに関わる仕事では、洗練されていない普通のドキュメントを見るといつも違和感を覚えました。これが、視覚的なプレゼンテーション方法について考え、試し始めた理由です。この間、UserInsight と Jason Travis が作成したユーザー ロールや、Hochschule Luzern が設計したユーザー フローなど、他のデザイナーによる事例も数多く見てきました。

UserInsight からのユーザー ロール設定

Jason Travis によるユーザーキャラクター設定

Hochschule Luzern のユーザーフロー設定

私はこれらの美しい「設計文書」に魅了されていますが、その一部はあまりにも乱雑で、補助的なグラフィック要素がメインの設計を覆い隠す傾向があり、必要なテキストの説明が欠けているものもあります。より優れた、より便利な方法を見つけることを期待して、実際の仕事、特にユーザーロールの作成、情報構造とフローの計画、ワイヤーフレームのプロトタイプの作成において、いくつかの異なるアイデアを試しました。私の目標はシンプルです。それは、需要者や関係するパートナーが、デザイナーが表現したいことをより迅速かつ正確に理解できるようにすることです。

吹き出しでユーザーペルソナを作成する

通常のコンテンツステートメントと比較して、対話形式は読者に強い対話感覚を与え、より深い印象を与えることができます。これを念頭に置いて、ユーザー ペルソナの吹き出しを使用してコンテンツを提示し、キャラクター (Jamie) が自分のストーリーを語っているかのように見せるようにしました。ジェイミーは、自分の世界観、自分に必要なものと不要なもの、自分の経験の一部、自分のやる気を引き出すものなど、自分自身に関する重要な情報を「語ります」。

私はジェイミーに独り言を言わせるだけでなく、「インタビュアー」も追加し、2人の間のコミュニケーションを通じて情報のインタラクティブな感覚をさらに高めました。 Jason Travis のケース スタディ (上の 2 番目の画像を参照) に触発されて、ユーザー キャラクターが所有するアイテムによって、そのユーザー キャラクターに関するより多くの情報を伝えることができると考えたため、レコード、家、犬、夢の休暇など、Jamie が所有しているものや入手したいと望んでいるものもいくつか追加しました。ジェイミーが尋ねるかもしれない質問もいくつか記載しました。完全なユーザー ロールの設定はここにあります。

関連記事: ユーザーエクスペリエンスの差別化戦略

注釈付きサイトマップ

サイトマップを作成していたとき、このドキュメントの外観、情報の表示方法、使用する視覚要素などについて多くのアイデアが頭に浮かびました。これらすべてのアイデアを書き留めたのは、一方では実際に作業を行うときに自分自身に思い出させるためであり、他方では将来デザインの背後にあるアイデアを忘れないようにするためです。

また、このドキュメントを読む他の人が構造を理解できるだけでなく、注釈を通じてより詳細な情報も得られるように、吹き出しを使用して情報構造に注釈を付けました。完全なサイトマップはここにあります。

会話形式でのユーザーフロー設定

最後に、以前のユーザー ペルソナとサイト マップを組み合わせて、読者にとってより人間的で文脈に沿ったユーザー フローを作成しました。このドキュメントでは、ジェイミーはプロセス全体を通して「声に出して考え」、各ステップでの目標と考えを説明します。この方法は没入感が強く、読者は製品のデザインとその背後にあるアイデアをより簡単に理解できます。完全なサイトマップはここにあります。

ビッグブラザーモデル

ワイヤーフレームのプロトタイプを作成しているとき、以前作成したユーザー ペルソナを忘れてしまいがちでした。この問題を解決するために、等身大の段ボール モデルをいくつか作成し、ユーザー ペルソナを表すために自分の横に置きました。まるで、以前の設定を常に思い出させてくれる兄貴のように。

このアプローチには確かに一定の効果はありますが、ビッグ・ブラザーのモデルとスクリーン上の世界は同じ次元にはなく、心理的な距離がまだ非常に遠いと常に感じています。したがって、**ユーザー ロールのイメージをプロトタイプに直接投入してみてください。

関連記事: ワイヤーフレームのプロトタイプをより伝わりやすくする 10 の方法

要約する

これらのちょっとした方法が、実際の仕事でアイデアをより良く表現し、関係者がより効率的かつ正確に情報を入手できるようになることを心から願っています。

翻訳者のブログ: BeForWeb

元のタイトル: ユーザーエクスペリエンスデザインの初期成果物をより視覚的にする

キーワード: ユーザー、体験、初期段階、配信、物理的な変更、視覚化、編集者、この記事、著者、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化