プレースホルダーは使わない。リアルデータでデザイン作業を行う利点 | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

データドリブンのデザインには多くの利点があります。リアルなデータやコンテンツを作成中のデザインに用いれば、多くの時間を節約したり、チームメンバーや外部関係者とのコミュニケーションを改善できます。

Webとモバイルアプリ開発を業務とし、シリコンバレーに拠点を構えるImpekable社は、データドリブンのデザインに熱心です。Adobe MAXでのAdobe XD platform公開と同時期に、Google Sheetsからデータをデザインに適用できるXDプラグインを制作しました。

この記事では、Impekableのシニアデザイナー兼プロジェクトマネージャーのジャネット・リーから聞いた、プラグインが制作された経緯や、データをデザインの中で扱う際のベストプラクティスを紹介します。

Impekableが作成したAdobe XD用のGoogle Sheetsプラグイン

リアルデータを使う利点

データ主導で体験のデザインをする際は、データが何で、そのソースが何処なのかを理解することがとても重要になります。Impekableの作業は常にここが開始点です。どんなプロジェクトでも、最初にジャネットと彼女のチームはクライアントにデータの提供を求めます。入手するデータは、APIガイド、JSONファイル、コンテンツの一部のサンプルなど様々です。チームはデータを手にしたら、情報アーキテクチャ、フロー、レイアウトなどの作業を始めます。

もちろん、データやテキストが確定したものでない場合もあります。そうしたとき、Impekableは、クライアントが提供できるものから何でも利用できるものを探します。既存サイトやプラットフォームからの関連情報、製品やサービスや企業自体の情報も使います。

このページデザインには、ImpekableのクライアントForwardLaneのバックエンドシステムのAPIと、大規模アセット管理システムの、2つの主要なソースのデータが使われている

「私たちは競合や業界の調査も行います。デザインに現実的なデータを使用していることを確認するためです」とジャネット説明します。「私たちは、プレースホルダーのテキストでデザインすることはほぼありません。リアルで意味のあるコンテンツを早期のデザイン作業を進めるために使うことで、より明確で目的に適ったデザインをつくることができます」

データ主導で体験のデザインをする際のもう一つの課題は、異なる組み合わせのデータに対応して機能するデザインにすることです。これには異なる言語への対応も含まれます。Impekableは、実際にこの問題に直面しました。

「昨年、私たちはCentral Department StoreのEコマースサイトのリニューアルを行いました。タイの最も大きな小売店のひとつです」とジャネットは話しました。「私たちはレイアウトがタイ語と英語のどちらでもちゃんと機能するようデザインしなければなりませんでした。しかし、タイ語の多くのフレーズが英語に比べて長いため、それはとても困難な作業でした。この問題を確実に解決するため、デザインプロセス全体を通じて、主要な画面は両方の言語を使ったデザインを用意してテストを行いました」

ImpekableがCentral Department Storeのためにデザインしたタイ語の画面

ImpekableがCentral Department Storeのためにデザインした英語の画面

全く新規のプロジェクトやPOCなどで、既存のバックエンドがサポートしていない機能をデザインする場合でも、インターフェースに表示可能なこと、表示したいことを理解して、それに合わせてデザインすることは重要です。実際のデータまたは現実的なデータを使用することのみが、デザインしている体験が最終的に役立ち、最適化されたものになることを確実にします。さもなければ、後になって、いくつかの問題を招くことになるでしょう。

• 実装により、ページのデザインのクオリティが低下する
  例えば、仮テキストをページタイトルに配置したデザイン状態では問題が無くても、実際のヘッドラインがずっと長いと全体のレイアウトに影響が出る
• デザインが実際のデータソースとマッチしない
  例えば、オンラインのショッピングサイトをデザインする時、ユーザーレビューにシステムがサポートしない項目を含めてしまうなど。外部システムからデータを取得する場合、ユーザーが操作する画面を正確にデザインするには、取り出すデータを把握することが肝心

XDにリアルデータを持ち込むGoogle Sheetsプラグイン

Impekableのチームはデータドリブンのデザインが持つ力を固く信じています。彼らは日常的にグーグルのG Suiteを使い、コンテンツの管理に取り組んでいます。特にデザイナー以外の人にデザインリソースを扱わせるため、チームはデータを利用しやすくする方法を探していました。

これが、ImpekableをXD用のGoogle Sheetsプラグイン開発へと導きました。このプラグインは、デザインにリアルデータを取り込むことを可能にします。Google Sheetsに誰かがデータを入力したら、デザイナーはコンテンツを動的に更新できます。その際、フィールドを一つひとつ自分の手で更新する必要はありません。このワークフローは、コンテンツの変更が必要だったり、異なるコンテンツを使った複数のバージョンを用意するケースの効率を大きく改善します。

Impekableは、XDのリピートグリッドを念頭にこのプラグインを設計しました。そのため、グループ化されたオブジェクトにまとめてデータを適用できるだけでなく、リピートグリッドにより繰り返し配置された要素へのデータ更新にも対応します。

ジャネットは次のように説明しています。「Google Sheetsプラグインを効果的に使うには、シートのカラムごとに異なるカテゴリーのコンテンツを整理して、カラムの名前をデザインファイルのレイヤー名と正しく対応させることです」

リアルデータを使ってつくられた体験は、特にテストに有効です。ユーザに実際の利用状況を提供して、意味のあるフィードバックを引き出せるためです。「金融関連企業向けにAI」のAPIプラットフォームを提供するフィンテック企業ForwardLaneのために、Impekableが体験をデザインした時、ForwardLaneが行った作業のひとつは、Impekableが作成したコンセプトを顧客に見せて、彼らが新しい機能に価値を見出すかを調査することでした。異なるターゲットとテストを行うことになるだろうと予測したImpekableは、ForwardLaneがその場で自力でコンテンツをパーソナライズできるよう、Google Sheetsプラグインを使用しました。

ForwardLaneで戦略と事業開発の責任者を務めるピーター・リネスは次のように指摘しました。「クライアントに意味のあるデータをデザインに組み込んだことで、製品価値の市場性を大きく向上させることができました。企業を相手に、次世代の技術を売り込むのは困難です。交渉相手に私たちが提供する価値を素早く理解させ、社内で私たちの製品の実装を提案することを納得してもらわなければなりません。現実的なユースケースの提示は私たちのメッセージを理解させる助けとなり、製品の導入によって改善されることになる彼らの新しいワークフローにワクワクさせる結果となりました」

Impekableがデータドリブンの体験を構築して学んだもうひとつのことは、それがデザインファイルの命名や整理の規律を守るのに役立つということでした。彼らのプラグインは、レイヤー名を使って、デザイン内の要素にデータを組み合わせます。デザインファイルが適切に整理されてラベル付けされていなければ、プラグインを効果的に使うことはできません。

リアルデータや実際のコンテンツを使えば、デザイン作業を効率的に進められ、周囲とのやり取りも改善されます。Google Sheetsプラグインを使えば、最新状態への更新や、相手に合わせた状態の構築も容易です。チームメンバーはもちろん、クライアントやその顧客も、デザインが提供する価値をすぐに理解することができます。ひとたびリアルデータを使ったデザインを経験したら、決して以前のやり方に戻りたいとは思わないでしょう。

この記事はBest Practices for Creating Data-Driven Experiences（著者:Oliver Lindberg）の抄訳です