apeescape2.com
  • メイン
  • 設計プロセス
  • Webフロントエンド
  • 収益と成長
  • モバイル
Uxデザイン

マルチモーダルデザインの探索– Adob​​eXDチュートリアル

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

相互作用の複数のモードを使用することは何ですか マルチモーダルデザイン に基づいています。

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



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

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

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

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

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

マルチモーダルインターフェイスは、設計者がユーザーエクスペリエンスを向上させる機会を提供します。

ゲーム内アーチェリーに使用されているニンテンドースイッチコントローラーは、マルチモーダルインターフェイスの例です。 (( ゲームプレイのみ )

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

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

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

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

マルチモーダル設計で一般的に見られる他のいくつかの例を次に示します。

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

スマートウォッチは、マルチモーダルデザインの優れた例です。

Apple Watchは、マルチモーダルインタラクションデザインの優れた例です。 (( ジョン・シェロッド )

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

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

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

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

複雑なマルチモーダルデザインエクスペリエンス:健康

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

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

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

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

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 さまざまなモダリティを使用して製品のプロトタイプを作成するのが簡単になりますが、それらを一緒に使用することには芸術と科学があります。

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

•••

ApeeScapeデザインブログの詳細:

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

基本を理解する

マルチモーダルデザインとは何ですか?

マルチモーダル設計では、複数のモダリティを利用して、製品のユーザーエクスペリエンスを向上させます。これには、音声、テキスト、タッチ、タップによるフィードバックなど、コンピューターと人間、および人間とコンピューターの相互作用が含まれます。設計者は、これらのタイプのインタラクションを製品に統合し、それらを組み合わせてユーザーエクスペリエンスを向上させます。

Adobe XDは何に使用されますか?

Adobe XDは、設計プロセスのいくつかの段階で使用できる設計ツールです。プロトタイピングで最もよく知られています。ただし、ワイヤーフレーミング、モックアップ、および開発者と通信するための設計システムとして使用できます。

マルチモダリティが重要なのはなぜですか?

コンピュータと人間の間の相互作用であるマルチモダリティは、いくつかの相互作用メカニズムを導入することによってユーザーエクスペリエンスを向上させるため、重要です。複数のモダリティが機能しているため、ユーザーは製品を操作する際の選択肢が増えます。つまり、UXの「失敗」の可能性が少なくなります。

SketchはAdobeXDよりも優れていますか?

SketchとAdobeXDはどちらも優れたデザインツールです。スケッチは良くありませんし、AdobeXDも良くありません。シーンに新しく登場したAdobeXDは、Sketchに急速に追いついています。主な違いは、Sketchはプラグインを使用して機能を拡張するのに対し、AdobeはすべてをXD内にネイティブに含めようとしていることです。

AdobeXDはCreativeCloudの一部ですか?

Adobe XDは、AdobeのCreativeCloudスイートの一部です。 Create Cloudには、XDだけでなく他のAdobeアプリケーションも含まれており、クラウドストレージと自動更新が可能です。

コンサルタントツールボックス:あらゆるものを解決するためのフレームワーク

財務プロセス

コンサルタントツールボックス:あらゆるものを解決するためのフレームワーク
OpenCVとSwiftを使用したオブジェクト検出

OpenCVとSwiftを使用したオブジェクト検出

技術

人気の投稿
Vue3でのオンデマンドの反応性
Vue3でのオンデマンドの反応性
VanillaJSでのReactとJSXのエミュレート
VanillaJSでのReactとJSXのエミュレート
カスタムMagento2ウィジェットを作成する方法
カスタムMagento2ウィジェットを作成する方法
不和ボットの作り方:概要とチュートリアル
不和ボットの作り方:概要とチュートリアル
JavaScriptデザインパターンの包括的なガイド
JavaScriptデザインパターンの包括的なガイド
 
Google BigQueryを使用する意味があるのはいつですか?
Google BigQueryを使用する意味があるのはいつですか?
Pythonビデオストリーミングでポルノを20倍効率化した方法
Pythonビデオストリーミングでポルノを20倍効率化した方法
ディストレストM&A:バーゲン購入の機会の評価
ディストレストM&A:バーゲン購入の機会の評価
スニペットブラウジングパターンのAndroid開発者ガイド
スニペットブラウジングパターンのAndroid開発者ガイド
究極のUXフック– UXにおける予測的、説得力のある、感情的なデザイン
究極のUXフック– UXにおける予測的、説得力のある、感情的なデザイン
人気の投稿
  • 支払いページをバイパスする方法
  • gitフローとgithubフロー
  • java restapi認証の例
  • レスポンシブデザインの一般的な画面サイズ
  • プロジェクトマネジメントオフィス(pmo)
  • new date()。gettime()
カテゴリー
計画と予測 Webフロントエンド モバイルデザイン プロジェクト管理 人とチーム 革新 アジャイルタレント モバイル バックエンド アジャイル

© 2021 | 全著作権所有

apeescape2.com