実用性を最優先にデザインする!Adobe XDでつくる音声UIプロトタイプの使い方 | アドビUX道場 #UXDojo

Creative Cloud UI/UX & Web

何かをつくれるからといって、必ずしもそれをつくるべきとは限りません。では、音声UIをデザインする際、新しいアイデアやコンセプトを適切に検証して、成功の可能性を最大化しつつ無駄を最小化するにはどのようなアプローチがよいのでしょうか?実のところ、その答えは特に驚くようなものではないかもしれません。

まず音声の重要さに触れておきましょう。音声アシスタントは2018年の大きなトレンドのひとつでした。もし昨年と同等の成長率を維持できるなら、スマートスピーカーは2019年に世界中で最も急成長するネットワークに接続されたデバイスになることでしょう。アメリカの消費者の3人にひとりは、既に音声アシスタントを毎週使用しています(モバイル、PC、スマートスピーカー上で)。つまり、音声は既に大きな市場であり、さらに大きくなることが期待されています。

インターフェースデザインにおける他の主要なトレンドを考えてみても、これは理解できる状況です。例えば、アクセシビリティはますます大きな役割を演じるようになっています。音声は、視覚障害や運動障害を持つユーザーには重要なチャネルになり得ます。そして、AI、機械学習、自然言語処理の発展は、より現実的なシナリオへの音声の知的な利用を可能にしています。比較的新しい分野でありながら、音声アシスタントは、既に人々と技術の関わり方に大きな影響を与えつつあります。

ここまでは良いことずくめです。しかし、音声の急速な広がりに抵抗する要因も存在します。確かに音声利用の機会は膨大で、数えきれないほどのユースケースが存在しますが、スマートフォン所有者の大半(57%)はまだ音声アシスタントを使用していません。この数字は、タブレット(71%)やPD(81%)ではさらに増加します。また、2018年の音声デバイスの普及は、安売りのプロモーションに大きく助けられたと考えられています。

現在音声を利用する人の多くが、検索や音楽再生や電話の発信のような日々の作業を簡易化する目的で使用しています。音声がそのポテンシャルを発揮して、真にユニークで価値のある体験をつくるまでには、まだ道のりは長そうです。

本当に大事なのは実用性

音声を対象にデザインする時、有用で、創造性に富み、独創的な使い方を発見して明確に定義することが、最初の最も重要な一歩です。つまり、画面デザインと同じ2つの原則に支えられたデザインプロセスを辿ります。

  1. 正しいものをデザインする
  2. 正しい方法でデザインする

Amazon Alexa UIキットから利用可能な音声UIコンポーネントの一部のスクリーンショット

音声において異なる点は、これらの原則をテストする方法です。その例を示すために、今回Adobe XDを用いて音声プロトタイプを作成しました。音声サポートは、XDの2018年10月リリースで追加された機能で、素早く簡単に音声インタラクションをつくることができます。これは初期段階において、主にユーザーとコンセプトの可能性を確認し、会話の構成方法を理解するのに重要な特徴です。

XDの音声トリガーを利用することで、ユーザーへの呼びかけ方の構成の仕方、説明を理解可能に保つ手段、言葉遣いやトーンへのアプローチ、幅広いユーザーのニーズに対応しつつ一貫性を保つ方法などを理解できます。そして、何がユーザーを安心させたり不快にさせるのか、周囲の環境がどのように彼らの反応に影響するかを見つけ出し、ブランドのパーソナリティに沿った製品になるかを判断できます。さらに、人々にどう話して欲しいかだけでなく、彼らの話し方に合わせてデザインしていることをきちんと確認できます。

実際に音声UIをデザインしてみる

オフィスでちょっとした聞き込みをして、思いついたコンセプトは、Amazon Echo Show用の音声アシスト付きIkeaの説明マニュアルでした(つくりかけの家具に潜り込んだ状態での面倒なページめくりとはおさらばです)。このデバイスが選択されたのは、音声だけでなく視覚的な説明も必要なことからです。2種類のインターフェースの組み合わせが特別な価値を持つケースです。

この案は、ユーザーの手がふさがっているとき、音声アシスタントが一般的に有用であるという仮説に基づいて構築されています。同様の例には、車を運転中、赤ん坊を抱えている時、料理中などがあります。実際、こうした状況では、ユーザーは音声だけが頼りになることがしばしばあります。

Alexa UIキット

基本コンセプトを思いついた後は、ユースケースの実現性を確認するためにいくつかのワイヤーフレームをスケッチしました。アートボードが正しくEcho Show 2のサイズになるよう、そして素早く進行できるように、XD用のAlexa UIキットを使用しました。今回は、単純に、テストのためのいくつかの画面を作成しました。

ワイヤーフレームとプロトタイプ

XDでの音声プロトタイプの制作が単純なことは明らかです。私はゲリラ的にテストを行い、フィードバックを聞いて、その場でジャーニーと音声コマンドの更新を行うことができました。例えば、ユーザーはIkeaの製品名を発音するのに苦労していました。そこで、代わりに画面上の製品に対応する番号を答えさせるように変更しました。

音声トリガーと音声再生

音声UIで音声トリガーを使って音声再生を起動する方法を示すスクリーンショット

XDの音声トリガーを何回か使用してみると、ほんの短いフレーズでも、様々に解釈される様子を興味深く観察できます。良く寝られたコピーの重要性はUXの世界では広く認識されていますが、音声では発声という側面が加わり、これをさらに増幅します。デザインするときはできるだけ早い段階からこの要因に配慮するのが有効です。また、初めに、音声体験に関するブランディングやUXの情報源となるガイドの構築を行うことも推奨されます。

しかし、最も重要なフィードバックは、コンセプト自体の実用性でした。プロトタイプをテストした後、95%のユーザーが自宅でこの製品を使いたいと答えました。上手くいきそうなユースケースの兆候が見えただけではありますが、提案を正当化するには順調なスタートです。修正とテストをさらに繰り返せば、妥当性と修正項目のフィードバックを積み上げることができるでしょう。

ユーザーテスト

製品をテスト中のユーザーの写真

テストを通じて、ユーザージャーニー、音声トリガー音声再生、UIデザインの更新を行いました。下は最終結果のプロトタイプです。

私の重要なメッセージに戻りましょう。実際に使われる状況についての必要な検討をせず、単純に最新技術の採用や流行に乗って顧客体験を改善したいと願うのは、どの企業にもありがちな落とし穴です。実験や革新は重要ですが、製品の成功も重要です。これが初期のユースケースの検証が重要な理由です。早期から繰り返しテストすることを無視するのは、道を誤る手段のひとつです。この点は音声デザインでも変わりません。XDを使ったデザインは、この重要さを増す分野への、反復的なデザインプロセスの浸透を加速するでしょう。「ユーザーの声」は、今や全く新しい意味を持っています。


この記事はUtility Above All Else: Designing for Voice with Adobe XD(著者:Jeremy Williams)の抄訳です

POSTED ON 2019.04.25