マルチモーダルデザインの調査–AdobeXDチュートリアル

公開: 2022-03-11

自宅で夕食の準備をしている母親が、iPadまたはSmartTVで料理アプリを開きます。彼女はタッチと音声を使用してアプリを操作し、動画に一時停止、早送り、または特定のセクションの再生を指示します。必要に応じて、声を使わずに画面をタップすることもできます。

相互作用の複数のモードを使用することは、マルチモーダル設計が基づいているものです。

マルチモーダル設計を検討する前に、コンピューターから人間への相互作用と人間からコンピューターへの相互作用の2つのタイプの基本的な理解から始めましょう。これらの各インタラクションには、音声、タッチ、タプティックフィードバックなどのさまざまなモダリティが含まれます。

コンピューター-人間のモダリティ

コンピューター-人間（またはコンピューターから人間）のモダリティは、コンピューターがユーザーが何を望んでいるかを理解するのに役立ちます。最も一般的なコンピューターと人間のモダリティは、視覚、聴覚、および触覚の能力に依存しています。いくつかの例は、コンピューターグラフィックス、オーディオ再生、電話のバイブレーション、スマートウォッチのタプティックフィードバックです。

人間とコンピュータのモダリティ

私たちは、コンピューターと対話するためのいくつかの方法を発明しました。いくつかの例は、キーボード、マウス、タッチスクリーン、トラックパッド、および音声認識です。この場合、ユーザーはさまざまなメカニズムを使用してコンピューターと通信し、コンピューターにコマンドを送信します。

より複雑な例は、動きの検出に役立つ加速度計、ジャイロスコープ、磁力計です。コンソールでテニスのゲームをプレイし、ゲームパッドを使用してラケットの動きをエミュレートすることを考えてみてください。これにより、ユニークで魅力的な[マルチモーダル]ユーザーエクスペリエンスを作成する機会がさらに増えます。

マルチモーダルインターフェイスは、設計者がユーザーエクスペリエンスを向上させる機会を提供します。 — ゲーム内アーチェリーに使用されているニンテンドースイッチコントローラーは、マルチモーダルインターフェイスの例です。（ゲームプレイのみ）

マルチモーダルデザインを選ぶ理由

マルチモーダルデザインの背後にある考え方は、製品のユーザーエクスペリエンスを向上させるために、複数のモダリティを組み合わせることです。誰もがさまざまな方法でさまざまなコンテキストで製品を使用するため、ユーザーにはいくつかのフィードバックメカニズムが提供され、コンピューターと対話するための複数の方法が提供されます。

デザイナーは、さまざまなモダリティを通じてアクションを組み込み、自動化することで、ユーザーの生活を楽にします。モダリティメカニズムが1つしかない場合、ユーザーエクスペリエンスに悪影響を及ぼし、ユーザーの心の中でデザインが「失敗」します。

例として、カーインフォテインメントシステムがあります。これらのシステムのほとんどは、ユーザーが音声とタッチを操作できるようにします。運転中は、電話やナビゲーションに音声を使用するのが当然の選択ですが、駐車しているときは、タッチスクリーンまたはスクロールホイールを使用してシステムを操作する方が簡単です。

マルチモーダル設計でよく見られるその他の例を次に示します。

グラフィカルユーザーインターフェイスは、たとえばWebサイトやデジタルビルボードと対話するという私たちのビジョンに依存しています。
音声ユーザーインターフェイスは、聴覚機能に依存して対話します。これには、Alexa、Googleアシスタント、Siriなどの音声アシスタントが含まれます。
触覚、ジェスチャー、および動きは、相互作用をトリガーするために、タッチの知覚（触覚能力）に依存しています。メッセージを受信するか、左にスワイプして曲をスキップするのは2つの例です。

スマートウォッチは、マルチモーダルデザインの優れた例です。 — Apple Watchは、マルチモーダルインタラクションデザインの優れた例です。（ジョン・シェロッド）

マルチモーダル設計は、特定の制限や障害を持つ人々のために設計する場合にも役立ちます。

シンプルなマルチモーダル設計例：SmartHome

ロバートは長い一日の後に家に近づきます。彼がガレージから1マイル以内に入ると、彼のホームオートメーションシステムがトリガーされます。システムは彼が到着したことを認識し、一連の自動アクションを開始します。たとえば、ライトをオンにし、冷暖房を調整し、警報システムを非アクティブにします。

次に、ロバートはリモコンを使用するか、AI対応のアシスタントに侵入時に暖房を下げるように依頼することができます。

複雑なマルチモーダル設計の経験：健康

スマートデバイスを使用するユーザーからのより複雑な入力をキャプチャできるようになりました。ストレスレベル、心拍数、睡眠サイクル、水分摂取量、そして近い将来、血糖値などの入力を測定できます。

これらの入力が保存されると、Fitbitや赤十字社の応急処置などのデバイスやサービスが、振動アラート、手首のタプティック「タップ」、または可聴アラームの形で、命を救う貴重な警告を提供します。

入力と出力のバランスを正しく計算する必要があるため、これはマルチモーダル設計のより複雑な使用法です。設計は誤警報を出してはならず、ユーザーをパニックに陥らせる可能性があります。

単純なマルチモーダルエクスペリエンスを設計する場合でも、複雑なマルチモーダルエクスペリエンスを設計する場合でも、マルチモーダル設計をよりよく理解するための最良の方法の1つは、それを念頭に置いて設計を開始することです。 AdobeXDを使用してこれを実現する方法を見てみましょう。

AdobeXDでのマルチモーダルエクスペリエンスのプロトタイピング

人気のあるUXデザインツールであるAdobeXDは、最近、音声コマンドと再生をその機能の武器に追加しました。それらを利用することで、音声や音声の再生などのモダリティを追加して、マルチモーダルなユーザーエクスペリエンスを作成できます。

例として、料理アプリのモバイルジャーニーのプロトタイプを作成しましょう。シェフがステーキの調理方法を教えてくれます。人々はアプリに、音声やタッチを使用して一時停止、繰り返し、または続行するように指示できます。

まず、エクスペリエンスを説明するために必要なすべての画面のプロトタイプを作成します。

マルチモーダルデザインのプロトタイプを作成する方法に関するAdobeXDチュートリアル — Alexaスキルのすべての画面が設計され、マッピングされています。

次に、音声モダリティをエミュレートする音声コマンドを追加します。プロトタイプモードでは、最初の画面と2番目の画面を接続することから始めます。次に、トリガーの下で音声を選択し、コマンドの下で発話を書き出して、この遷移をトリガーします。 2つ以上の音声コマンドを追加する場合は、それぞれにコネクタを追加する必要があります。

音声トリガーを追加するAdobeXDプロトタイプ — AdobeXDプロトタイプモードでクッキングアプリに音声トリガーを追加します。

次の画面では、システムがユーザーに応答するようにします。これを行うには、タイムトリガーを作成し、アクションの下で音声再生を追加します。すぐに反応させたいので、時間を0秒に設定します。

プロトタイプモードと時間トリガーを示すAdobeXDチュートリアル — AdobeXDにタイムトリガーと音声再生モダリティを追加します。

従来のトリガーを追加することもできます。この例では、リストの2番目の要素にタップトリガーを追加します。ユーザーがこの要素をタップすると、アプリは次の画面に進みます。音声コマンドとタッチコマンドの両方を組み合わせることは、マルチモーダルデザインを使用して、より優れた、より思慮深いユーザーエクスペリエンスを提供する優れた例です。

タップコマンドを追加するAdobeXDプロトタイプチュートリアル — AdobeXDプロトタイプモードでタップモダリティコマンドを追加します。

次に、ユーザーがアプリ内でエクスペリエンスを一時停止して続行する方法を説明します。このアプリはAmazonEchoを念頭に置いて設計しているため、「Echo、pause」などの音声コマンドを追加します。

マルチモーダルデザインの動作を示すAdobeXDプロトタイプ — シナリオのこの段階では、ビデオ（静止画像で示されている）が一時停止されます。

ビデオを続行するには、音声コマンド「エコー、続行」を追加して同じアクションを実行します。

マルチモーダルデザインの動作を示すAdobeXDチュートリアル — シナリオのこの段階では、音声コマンドの実行時にビデオ（静止画像で示されている）が一時停止されなくなりました。

これは、音声トリガーを使用したマルチモーダル設計の基本的な例です。追加のトリガーには、タップ、ドラッグ、およびキーボードまたはゲームパッドを使用したプロトタイプの制御が含まれます。

トリガーが存在するという理由だけで、トリガーを使用するという罠に陥りがちです。マルチモーダル設計でより優れたユーザーエクスペリエンスを設計するために、設計者は、どのインタラクションが最も意味のあるものであり、いつであるかをテストして学習する必要があります。

マルチモーダルデザインとメンタルモデル

モダリティを使用して設計する場合、ユーザーは、相互作用がどのように発生するかについて、先入観のある一連の期待（メンタルモデル）を持っていることを覚えておくことが重要です。たとえば、ほとんどのユーザーは、トラックパッド上またはマウスのスクロールホイールで下にスクロールすると、画面が上に移動することを期待しています。

多くの場合、これらのメンタルモデルはまだ形成されていることに注意してください。電話を振るのは一例です。一部のベンダーはタイピングを「元に戻す」ために使用し、他のベンダーは曲をシャッフルするために使用するため、これはまだあいまいな相互作用です。

製品設計にどのモダリティを入れるかを選択するときは、これらのメンタルモデルに注意することが重要です。使い慣れたモダリティを使用すると、ユーザーエクスペリエンスを向上させることができます。まだ形成されているモダリティは、ユーザーを混乱させ、エクスペリエンスを低下させる可能性があります。

揺れるモダリティのマルチモーダルデザインメンタルモデルの例 — WeChatは、シェイクを使用して周囲の人を見つけたり、曲を識別したりします。

新たなモダリティ：会話デザイン

多くの注目を集めている2つのモダリティは、チャットボットと音声ユーザーインターフェイスです。会話型ユーザーインターフェイスと呼ばれることもあり、主な焦点はテキストと音声の相互作用です。

チャットボットは、インターフェイスを利用してテキストなどの入力を受け取ることができ、グラフィック、リンク、マップ、および会話型ダイアログを表示することができます。一部のチャットボットは、音声を介してコマンドを受け取り、結果をテキストまたは合成音声を使用して表示できます。

純粋な音声インタラクションも出現しています。ユーザーが何も入力せず、代わりに音声のみで完全に対話するスマートホームデバイスへのSiriまたはAlexaの拡張を考えてみてください。会話デザインのほとんどすべての経験はマルチモーダルなものであるため、これはデザイナーにとって重要です。

良い例は多分からのリリーです。中国語（およびその他の言語）を教え、さまざまなチャネルで動作するボット。会話は、アプリ上で、またはボットと話すことによって行うことができます。

会話デザインによる新たなマルチモーダルデザインの機会 — リリーは、さまざまなモダリティを使用して、さまざまなチャネルを通じてユーザーに新しい言語を教えます。

概要

マルチモーダルデザインは、音声、タッチ、テキスト、およびタップティックフィードバックを使用して、さまざまなモダリティを組み合わせて、より優れたユーザーエクスペリエンスを作成します。コンピューターと人間の相互作用と人間とコンピューターの相互作用を組み合わせて、独自の製品体験を構築することができます。

マルチモーダル設計は、設計者に新しい機会と課題ももたらします。 Adobe XDのようなツールを使用すると、さまざまなモダリティを使用して製品のプロトタイプを簡単に作成できますが、それらを一緒に使用するには芸術と科学があります。

その完璧なバランスをとることと、新しいモダリティの出現を組み合わせることで、デザイナーはユーザーエクスペリエンスの向上の水準を上げることができます。

•••

Toptal Designブログでさらに読む：

正確なデザイン–AdobeXDレビュー
デザイン思考批評の理由を探る
チャットボットUX–デザインのヒントと考慮事項
チャットのクラッシュ–チャットボットが失敗したとき
製品設計における人間中心の設計の重要性