マルチデバイスに対応できる有効なデザイン戦略を展開するには？ | アドビUX道場 #UXDojo

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

私たちが情報にアクセスする方法は、ここ数年で大きく変化し、その変化はさらに加速し続けています。スマートフォンやタブレットがユビキタス化し、その多様な画面サイズに対応するために、レスポンシブWebデザインが必要とされました。さらに音声UIが登場し、またしてもルールブックを書き換えようとしています。一方で、ユーザーの期待も同様な速さで高まっており、すべてのデバイスで機能する有効なUX戦略を展開することが、主要な課題となっています。

この記事では、Webアクセスに使用するデバイスやプラットフォームの境界がなくなった現在の状況で、業界をリードする専門家たちがどのようにUX戦略に取り組んでいるのかを探ります。

4Cフレームワークに従う

UXデザイナーのミカル・レビンは、マルチデバイス体験をデザインする実用的なフレームワークを作った

HanerinoでUXデザイナーを務めるパトリック・ヘイニーは、デバイス間の壁を超えたデザインの役に立つシンプルなフレームワークの使用を勧めています。

UXデザイナーのミカル・レビンが『Designing Multi-Device Experiences』で提唱した「3C」を基盤として、格別な体験を作りだすために、彼はさらにもう1つのCの追加を提案します。

Consistency (一貫性)

デザインの一貫性はブランド認知に重要なだけでなく、ユーザー体験においても重要です。「どのようにこれを使用するのか？と聞かれたときの答え方を考えてみてください」とパトリックは言います。「迷った場合は、ユーザーが学習した既存のパターンから外れないよう、デバイスに期待されているデザインパターンに従うとよいでしょう」

Continuity (連続性)

丁寧にデザイン体験を継ぎ目無く提供するには、カスタマージャーニー全体を見て計画を立て、デザインしなければなりません。パトリックは「ブランドと接するすべての人に、連続した道筋を作ることが重要です」と述べています。

Complementary (相補性)

今日のデバイスはタスクを片付けるだけでなく、他のデバイスとの連動も求められます。「大型テレビからフィットネストラッカーまで、ユーザーはデバイスを他のデバイスと併用しています。デザイナーは、特定のデバイスだけに焦点を当てるのではなく、このエコシステムを考慮する必要があります」とパトリックは話しています。

Contextual (文脈的)

画面のサイズが多様になると、いつどのように何を体験するのかという文脈がより重要となります。パトリックは、複数デバイスのエコシステムのデザイナーの仕事は、適切なものを適切なタイミングで適切なデバイスに届けることだと指摘します。

デザインシステムを使い、一貫したユーザー体験を作り出す

アドビのデザインエンジニアであるサラ・フェダーマンは、「多様なデバイスのユーザビリティに対応する最も簡単な方法は、一貫したユーザー体験の作成に専念すること」だと言います。

「私たちの製品との関わり方についてのユーザーの期待を設定し、それを維持することが必要です。そのために最適なツールは、デザインシステムです。デザインシステムはUIを再利用可能なパーツに分解し、デバイスをまたがってユーザーが認識可能なインタラクションの構造を作り出します。共有するための作業のような体験は、デバイス間だけでなく、エコシステム内のアプリケーション間でも一貫しているべきです。デザインシステムを使用することで、ブランド内のすべての製品の体験、そこにアクセスするすべてのデバイスにおける体験を含むエコシステムに注力できます」

デバイスは入口に過ぎない。中身が大事

一貫性を確保するには、視点を変えることも役に立ちます。Rewiredの創設者でUXリーダーのソフィア・プラーターは、「企業というものを、さまざまな機能が詰め込まれた道具の集合ではなく、価値あるもので満たされた環境と考える」ことを提案しています。

「Webサイト、アプリ、Alexa Skillsは成果物ではなく、コンテンツにアクセスするための入口です。入口ごとにインタラクションデザインを最適化する前に、UXデザイナーは、アプリ内のオブジェクトのモデル化から始めることができます。アクセスするポイントによらず、その中にあるオブジェクトは、価値があり、理解しやすく、ユーザーのメンタルモデルに一致するものであるべきです」

ソフィアはデルタ航空を例に挙げています。フライト、路線、空港、搭乗口、座席といったオブジェクトが詰まった環境です。「それぞれのオブジェクトは関連しています。路線はフライトで構成されており、フライトは空港の搭乗口から出航します。ユーザーはデルタのオブジェクトを操作して、おそらくフライトの予約や座席のアップグレードをしたいと望んでおり、まれな例を除けば、入口によってこうした事柄が変わることはありません」とソフィーは説明します。

つまり、有効なUX戦略を作るるためにソフィアが推奨しているのは、コンテンツを構成するオブジェクトの定義に加えて、オブジェクト間の関係を定義することです。「オブジェクトに対してユーザーが実行したいことと、それらのアクションが各デバイス上で現在どれほど効果的に行われているかについて、優先順位をつけたリストの作成から始めます。オブジェクト指向のUXを教える際には、これまでもずっと、この「マッピング」の作業から始めています。このやり方の効果は、ある顧客が1週間の間にチャットボット、キオスク、スマートウォッチを介してコンテンツにアクセスする場合に現れます。努力次第で、作り上げられた世界は、親しみ深くてわかりやすく、さらにはシームレスにさえ感じられるようにすることができます」

オブジェクトマップは、オブジェクトは何か？その構造はどうなっているか？オブジェクト間の関係性は何か？といった重要な問いの答えを見つけるのに役立つ

ユーザーの居場所で彼らに会う

クリス・リスドンとパトリック・カトルボームは、複雑な環境で製品やサービスを作成するのに苦難している人に向けた実用的なガイドを執筆している。

Getaroundのデザインディレクターであり、『Orchestrating Experiences』の共同著者であるクリス・リスドンは、マルチデバイス、複数のタッチポイント、異なる状況におけるユーザーインタラクションに向けて開発する際の普遍的な原則は、ユーザーの立ち場に合わせることだと述べています。

「ユーザーは自らのライフスタイルを変えようとは思っておらず、自分にあった製品が欲しいと考えています」と彼は言い、各デバイスがどのような環境でどのように使用されているのか、詳しく理解することを提案しています。「あるユーザーが特定のデバイスで製品を体験する際の共感図を作成しているとします。次に、異なる時間や別のデバイスにおける一連の共感図を並べてみましょう。時間の経過に伴う共感図からは、エクスペリエンスマップができあがります。体験を統合可能なパターンを見つけたり、特定の瞬間に体験を合わせるための参考になる相違点を見いだせるでしょう」

クリスは、すべてのデバイスは機会であり、同時に制約でもあると説明しています。それらを理解してモデル化し、代表的な利用状況と組み合わせれば、デバイスに左右されずどの体験にも通用するパターンが見つかります。また、相違点を見出せば、特定のデバイス向けの最適な体験を定義することもできます。これが、ユーザーの居場所に合わせる方法です。

アドビのデザインエンジニアのサラ・フェダーマンはこれに同意して、「デザイナーが見落とすことの多い大きな側面はパフォーマンスです」と言います。「デザイナーは大きな画面の利点を活かして見栄えの良い高解像度の画像と効果をつくりたがります。しかし、ユーザーのタスク完了を助ける代わりに、途上国ではダウンロードに3ドルかかったり、ホテルのWi-Fiで10分待たせるのならば、実際には誰の助けにもなっていません」

運転手が何を感じ、考え、行っているのか? Adaptive Pathによる、自動車保険会社のエクスペリエンスマップの例:

自身のユーザーを調査する

Design Academyで開発者を対象にデザインを教えているローラ・エリザベスは、Webサイトを使用する人々が置かれている様々な状況を理解することが重要だと考えています。

ローラはユーザー調査から着手することを勧めます。「ユーザーがどのようにWebサイトを体験しているのかを理解していなければ、良い体験をどのようにして作り出せるのでしょう？」

たとえば、高級レストランには次のような2種類のユーザーがいるかもしれません。

イベントの開催や特別な機会に利用する場所を探している。こうした人々は、PCやタブレットからアクセスしている可能性が高く、たくさんの画像やメニューや予約情報を見たがる傾向がある。この種の人々は閲覧している。
レストランに向かう途中で場所を見つけようとしているか、事前に何かをリクエストするため電話しようとしている。こうした人々は、モバイルデバイスを使用している傾向にある。この種の人々は、素早くタスクを完了したいと望んでいる。

「人々がなぜWebサイトにアクセスしているか、どのデバイスを使用しているかを知ることで、初めから質の良いUXの判断が下しやすくなります」とローラは言います。「この良い例はレストランの連絡先情報です。スマートフォンでは、レストランに素早く電話したい人々が多い事でしょう。メニューの奥やフッターに電話番号を配置する代わりに、ユーザーが簡単にタップして電話を掛けられる「お問い合わせ」ボタンの配置が考えられます。デスクトップでは、こうしたボタンは適切ではなく、画面サイズも大きくなるため、ボタンではなく電話番号にして、書き留めたり手元で電話をかけられるようにします」

このようにユースケースを定義することで、ユーザーがその時に達成しようとしているタスクに応じた、円滑な体験を得られるようにすることができます。ローラは、これは継続する作業であることを指摘し、次のように助言しています。

「Webサイトをゼロから作成している場合は、ユーザーがどこからなぜWebサイトを使用しているのか、最善の予測をすることになります。それでも、その予測を後から実施したユーザー調査と合わせて、仮説を証明または反証し、体験を修正して改善し続ける時間を別途設けることが重要です」

この記事はAsk a UXpert: How to Develop an Effective UX Strategy in a Multi-Device World（著者:Oliver Lindberg）の抄訳です