kun432's blog

Alexaなどスマートスピーカーの話題中心に、Voiceflowの日本語情報を発信してます。たまにAWSやkubernetesなど。

〜スマートスピーカーやVoiceflowの記事は右メニューのカテゴリからどうぞ。〜

Voiceflow新機能発表イベント 『#VFV2』まとめ③ Prototyping and User Testing

f:id:kun432:20210223110448p:plain

Voiceflowの新機能発表イベント「VFV2」のまとめ、その3です。 今回はPrototyping and User Testingについて。新機能(現時点でリリースされているものもあれば今後リリースされるものも含みます)についてはNew!をつけています。

Prototyping and User Testing

  • プロトタイピングは、デザインの延長線上で、デザイナーやチームが会話に命を吹き込むフェーズ

f:id:kun432:20210224212130p:plain

  • 開発に移る前にオリジナルのアイデアをテスト、学習、反復することができるフェーズ

f:id:kun432:20210224222625p:plain

  • Voiceflowは、Alexa、Google アシスタント、IVR、チャット、カスタム アシスタンスなど、可能な限り実際に近い設計を支援する。

f:id:kun432:20210224222634p:plain

  • キャンバスの各ステップは、実際のコードを表している。
  • これにより、デザイナー自身、チームメイト、ユーザーの誰でもが、実際の製品であるかのようなプロトタイプを体験することが可能。

f:id:kun432:20210224222643p:plain

  • プロトタイピングは、デザインと開発の間の単なる1フェーズではなく、すべてのデザイナーの基本的なツールキット。

f:id:kun432:20210224223212p:plain

f:id:kun432:20210224223513p:plain

  • プロトタイプのメリット
    • 行動におけるアイデアを実際に聞いて、
    • 必要なエッジケースと修復パスをすべて発見し、
    • 可能性のあるすべてのパスを試して、
    • ワンクリックで素早く変更、数秒で繰り返し試すことができるので、ワークフローを迅速化する。

f:id:kun432:20210224223522p:plain

  • プロトタイプのメリット
    • リリース前にユーザーテストを行って、そのフィードバックをデザインに反映できる
    • ユーザと一緒のライブプロトタイピングなら、より貴重なフィードバックや問題点を発見可能
    • Voiceflowなら、フェイス・ツー・フェイスでも、リモートでも、可能
    • よりステークホルダーの要望に近い体験が得られ、アイデア、コンセプト、デザインをチームに伝えることができる。

f:id:kun432:20210224223530p:plain

  • プロトタイプは開発者への受け渡しが容易になる。

f:id:kun432:20210224223538p:plain

  • 開発者が必要とする情報がプロトタイプには含まれており、すでにテスト済みの状態で開発者に渡せる
    • 会話デザインの対話モデル
    • ユーザーの状態
    • コンテキスト
    • ロジック

f:id:kun432:20210224223548p:plain

  • プロトタイピングは優れた会話デザインのための触媒
  • 音声と会話デザインの可能性に挑戦していくために、エンドユーザー体験を具現化するためのツールと、それを構築するためのプラットフォームが必要

f:id:kun432:20210224230938p:plain

  • 変更を加えるたびに、デザインと開発ワークフローの間のギャップを埋めることで、チームが一元化されたソースを構築できる
  • これらを可能にする哲学と機能を紹介する

f:id:kun432:20210224230947p:plain

  • デザインがコーディングになる
    • 技術的な背景を問わないノーコード環境により、誰でも簡単に実際に動作するコードをデザインから構築可能
    • つまり、実際に動く形でアプリのデザインを伝える事ができるため、開発へかんたんに受け渡すことが可能

f:id:kun432:20210224230957p:plain

f:id:kun432:20210224231005p:plain

  • コードをデザインに反映する
    • より高度なユーザーや開発者には柔軟性やカスタマイズが必要になることがあり、そのためにVoiceflowはカスタマイズ可能な機能やブロックを備えている
      • API にアクセスする必要がある場所にコードを追加
      • それぞれのワークフローに適したファイルフォーマット(JSON形式の.vfファイル)にエクスポート

f:id:kun432:20210224231015p:plain

f:id:kun432:20210224231023p:plain

f:id:kun432:20210224231033p:plain

  • デザイン環境と開発環境のパイプライン
    • デザインをコードに変換するということ=2つの環境間のパイプラインをサポートする必要がある
    • 各プロジェクトごとに、ホスト先(開発及び実行環境)とデザイン環境(Voiceflow)間のパイプラインが簡単に作成可能
    • ホスト先が、Alexa開発者コンソールであれ、独自環境であれ、コードが動作することを保証する

f:id:kun432:20210224231043p:plain

f:id:kun432:20210224231052p:plain

  • インタラクティブな対話モデル

f:id:kun432:20210224231102p:plain

  • プロトタイプ自身がインタラクティブ、それをそのまま渡せば良い
  • 限定的な静的アセットや要件を開発チームに共有する必要はない
  • より開発者にデザインを理解してもらえる

f:id:kun432:20210224231111p:plain

  • インタラクションモデル、ダイアログマネージャ、レスポンスコンテンツを共有することで、デザイナーと開発者間の受け渡しを高速化、簡素化

f:id:kun432:20210224231118p:plain

  • デザインとテストのシームレスな切り替え
    • 会話デザインの品質は、実際の体験がないと評価しにくい
    • Voiceflow のテストは、デザインチームが作成した体験について、可能な限り多くのコンテキストを提供する

f:id:kun432:20210224234531p:plain

  • ユーザーが利用可能な入力と出力をあらゆるモーダルでテストできるようにしたい
    • 会話体験はますますマルチモーダル化している
  • うまく行かない場合に、診断を行い、間違っている点を理解し、どのように修正すればよいかを見つけるためのツールが必要
  • それがVoiceflowのテストツール

f:id:kun432:20210224234546p:plain

f:id:kun432:20210224234556p:plain

  • テストツール
    • デザインからテストへはすぐに切り替えれる
      • 右上のテストボタンをクリック or キーボードショートカット(t)で、最初からテスト
      • ブロックの再生ボタンで、そこからテスト

f:id:kun432:20210225221313p:plain

  • テスト開始後は、対話の途中で、発話を繰り返し聞いたり、巻き戻しして別の発話を試したりが可能

f:id:kun432:20210225221657p:plain

  • サジェスチョンチップをクリック、テキスト入力、音声入力、など色んな方法でユーザの入力をシミュレート可能

f:id:kun432:20210225222210p:plain

  • 新たにビジュアルをサポート
    • 音声とテキストだけでなく、マルチモーダルなユーザ体験のテストが可能に!New!
    • カスタムアシスタント向けモックアップ、Alexa向けAPLのどちらも可能

f:id:kun432:20210225222610p:plain

  • テスト時に変数を設定して、いろんなユーザ状態を想定したテストが可能

f:id:kun432:20210225222822p:plain

  • デバッグモードを有効にすると、バックエンドのロジックや処理状況が表示される。エラー発生時のデバッグに有効。

f:id:kun432:20210225223100p:plain

  • スマートプロトタイピング
    • テストツールにNLP/NLUが追加された
    • 対話モデルで設計したすべてのデータ(インテント、発話、スロット、スロット値など)を学習することによりインテリジェントで柔軟な対話テストが可能に。
    • 対話モデルを更新したら、再トレーニングが通知される。ワンクリックで再トレーニングが可能。

f:id:kun432:20210225223212p:plain

  • ワンクリックアップロード
    • Alexa開発者コンソール、Googleアクションコンソールへのアップロードもワンクリックで。
    • プラットフォーム独自のNLP/NLUや開発ツールを使うことで、より忠実度が高いテストが可能

f:id:kun432:20210225223710p:plain

f:id:kun432:20210225223808p:plain

  • プロトタイプの共有
    • 音声 or テキスト入力、マルチモーダル有無の組み合わせを切り替えて、共有が可能に!New!
    • Alexa向け、IVR、アプリ内チャット、ウェブサイトチャットなど、いろんなチャネルにあわせたプロトタイプ体験を提供可能

f:id:kun432:20210225224402p:plain

  • 例えばAlexa向けなら、音声入力+テキスト表示

f:id:kun432:20210225224534p:plain

  • 例えば、アプリ内チャットなら、音声入力+ビジュアル表示
    • 会話の各ターンにおける画面遷移を実現するために、Visual Stepが追加されたNew!
    • モバイルデバイスで開くと全画面で表示され、実際に近いアプリ体験を提供できる

f:id:kun432:20210225225100p:plain

  • 例えば、Webサイト内チャットなら、テキスト入力+テキスト表示
    • ユーザーの入力や、サジェスチョンチップを使った、チャットボット体験

f:id:kun432:20210225225415p:plain

  • 例えば、IVRなら、音声入力+ビジュアル表示
    • 電話体験に近づけるために、ダイアルパッドの画像やサウンドを使用、ここでもVisual Stepが役に立つ
    • 電話を通じた1対1に近い体験

f:id:kun432:20210225225555p:plain

f:id:kun432:20210225225606p:plain

  • これらにより、
    • 現実の体験に非常に近いかたちでモックを簡単に作成することが可能
    • ユーザがビジョンを理解しやすくなる
    • ユーザの実際の反応やデータを収集しやすくなる

f:id:kun432:20210225225834p:plain

f:id:kun432:20210225225844p:plain

f:id:kun432:20210225225854p:plain

まとめ

Prototyping and User Testingのまとめでした。実はVoiceflowで昨年もっとも活発に機能が追加されたり改修されたのはこのプロトタイピングではないかなという印象があります。

元々、Voiceflowのテストツールは、AlexaやGoogle向け音声アプリを作るという目的からすると、それぞれのプラットフォームが提供するテストツールとは動きが微妙に違うということもあり、あくまでも簡易なロジック検証を行う程度のもの、という印象でした。

それがAlexaやGoogle以外のカスタムアシスタントへの対応を発表したことにより、大きく位置づけが変わってきています。また、ここまでの説明にもある通り、Voiceflowはプロトタイプで提供できる「ユーザ体験」というものをとても重要視しています。マルチモーダルへの対応も含めて、これまでの単なるAlexa・Google向けノンコーディングアプリ開発ツールではなく、あらゆる音声アプリに対応した柔軟かつスピーディーなプロトタイピングツールとして生まれ変わってきているのではないかという気がしますね。

もちろん開発ツールとしても進化しています。それについては次回ご紹介します。

Voiceflow新機能発表イベント 『#VFV2』まとめ② Design and Documentation

f:id:kun432:20210223110448p:plain

Voiceflowの新機能発表イベント「VFV2」のまとめ、その2です。 今回はDesign and Documentationについて。新機能(現時点でリリースされているものもあれば今後リリースされるものも含みます)についてはNew!をつけています。

Design and Documentation

  • 多くのデザイナーにとって、フローチャートやExcelシートなど、ツールが分散していると、クリエイティブなプロセスを遅らせてしまう。

f:id:kun432:20210223175759p:plain

  • 車内カスタムアシスタンス、会話のドライブスルー、最新のIVRシステム、モバイル音声バンキング、カスタムなエンドツーエンドのアシスタンスなど、膨大な数のユースケースと可能性があるが、私達はまだ何が可能なのか、を探しているフェーズにいる。

f:id:kun432:20210223184238p:plain

  • デザイナーが求めているのは同じもの。
    • 魅力的で文脈に沿った会話をデザインできるツール
    • より広いチームワークフローを考慮したツール
    • 読みやすさと共有性を備えた、文脈に沿ったデザインを考慮したツール
  • 新しいデザインとドキュメンテーションの体験を提供する。

f:id:kun432:20210223184658p:plain

  • 会話体験が一般的になるに連れ、ユーザは日常の体験からさらに自然なインタラクションと機能を期待している。

    • 自分のデバイスともっと自然に話したい。
    • また、インテントの途中で関係のない質問をしても、コンテキストを失うことなく、会話を続けたい。
    • 最も重要なのは、様々な会話において、ユーザーは理解されることを望んでいる。
  • デザイナーが求めているは、ワークフローやクリエイティブな作業は複雑にすることなく、デザインに複雑性を追加できるツール。

    • フラットな二次元のデザインや、複数のツールの組み合わせでは実現できない。
    • カスタマイズされたデザイン
    • レイヤー化されたコンテキストのデザイン
    • 複数の環境、複数のチャンネル、マルチモーダルへの対応
    • リニアとノン・リニアなフローへの対応
    • デザインだけでなく、チームとのコミュニケーションを円滑にする

f:id:kun432:20210223183924p:plain

  • Voiceflowは、あらゆるチャネルやマルチモーダルに対応した会話体験のプロトタイプをビジュアルで設計・作成するためのコラボレーションツール。
  • 会話AIのためのFigmaのようなもの。Figma とは異なるのは、 Voiceflowでは会話体験をデザインしている裏で実際のコードが生成される。
  • これにより、デザイナーと開発者がさらに作業を迅速に進めることができる。
  • デザインにおいて、忠実度の高いプロトタイプのJSONファイル、Dialogflowのようなプラットフォーム用の対話モデルのエクスポート、さらにはプロダクションレベルで利用可能なコードベースを、一行のコードを書くことなく、デザイナーが生成することができる。

f:id:kun432:20210223200551p:plain

  • Voiceflow Canvas
    • 高い忠実性
    • マウスとトラックパッドで操作性を変えれる
    • 直感的なドラッグアンドドロップ

f:id:kun432:20210223202436p:plain

  • キャンバスのカスタマイズ
    • ステップをつなげる線を曲線と直線から選択できるNew!

f:id:kun432:20210223202608p:plain

f:id:kun432:20210223202620p:plain

  • リアルタイムコラボレーション
    • 複数人で同時に編集が可能
    • ユーザを招待でき、権限の設定が可能(編集可能 or 閲覧のみ)

f:id:kun432:20210223202737p:plain

f:id:kun432:20210223202915p:plain

  • タグ&コメント
    • メンバーをタグ付けしてコメント
    • リアルタイムではない、非同期なやり取り向け

f:id:kun432:20210223203116p:plain

  • 今回のサンプルのオンライン音声バンキングアプリの完成形
    • テンプレートで利用可能になる予定
  • これを使ってより進んだ機能を紹介

f:id:kun432:20210223203156p:plain

  • フローと再利用可能なコンポーネント
    • 「フロー」という再利用可能なコンポーネントを作成可能
    • 「フロー」が必要なところで呼び出すだけで使える

f:id:kun432:20210223203359p:plain

f:id:kun432:20210223204240p:plain

f:id:kun432:20210223204252p:plain

f:id:kun432:20210223204441p:plain

  • 修復パス
    • ハッピーパスから始めて、会話が1回で済むことは稀
    • ユーザが意図しない発話そした場合に、そのコンテキストに応じたリプロンプトを作成することが可能。
    • ユーザからの発話がない場合にも、リプロンプトの作成が可能。

f:id:kun432:20210223225556p:plain

f:id:kun432:20210223225608p:plain

  • 自動ダイアログ
    • 必要な情報をユーザに一度に与えずに、情報を取得するための正しいプロンプトを与えて収集できる。
    • エンティティ(スロット)を作成して「必須」のフラグを建てるだけ。あとはアシスタントが勝手に収集してくれる。
    • ダイアログマネジメントを使えば、面倒なステート管理をせずに、デザインに集中できる。
    • どのエンティティを最初に確認するか?の優先度も決めれる。

f:id:kun432:20210223230135p:plain

f:id:kun432:20210223230143p:plain

  • Canvas Markup
    • 他のデザイナーや開発チーム、外部のステークホルダーと効果的にコミュニケーションができるかどうかが重要。そのため、デザインには機能的に存在するもの以外のより多くの文脈が必要になる。
    • キャンバス マークアップ
      • 可読性とデザインのドキュメント化ができる。
      • ラベル画像やハイパーリンクをキャンバス上のデザインに追加することで、より読みやすく、共有しやすいものにできる。
      • ブラウザベースなので、常に最新のデザインにアクセスが可能

f:id:kun432:20210223230247p:plain

f:id:kun432:20210223230550p:plain

  • コンテキストのデザイン
    • コンテキストのデザインは会話デザインの柱の一つ
    • Voiceflowのコンテキストデザインは他のどのプラットフォームよりも最先端
    • 4つの会話コンテキスト
      • ダイアログコンテキスト
      • コンテキストのスイッチ
      • ネストされたコンテキスト
      • シチュエーショナルなコンテキスト

f:id:kun432:20210223230947p:plain

  • ダイアログコンテキスト
    • Voiceflowはダイアログコンテキストを可能にする。
    • 現在の会話状態=コンテキストに応じたダイアログのレイヤー化が可能。
    • 例:ユーザが「ヘルプ」といった場合
      • メインフローにいる場合は一般的なヘルプメッセージを応答
      • 支払いフローにいる場合は、支払いに関するヘルプメッセージを応答
  • コンテキストのスイッチ
    • リニアな一本調子の会話を好む人はいない。
    • Voiceflowでは、オープンダイアログとクローズダイアログの両方をデザインすることで、コンテキストの切り替えが可能。
      • アカウントの残高をチェックしている最中に、いつでも利用可能な別のトップレベルのインテントに切り替え。
  • ネストされたコンテキスト
    • ユーザにコンテキストの切り替えを許可したいけど、目的を達成したら元の会話のコンテキストに戻したい。
    • Voiceflowでは「コマンド」を使うことで実現可能。
      • 支払いの最中に、一番近い支店を知りたい
      • 一番近い支店を教えたあとで、元の支払いコンテキストに戻って続きを行える
  • シチュエーショナルなコンテキスト

    • ユーザ個別の状況に応じた応答ができる
      • 何曜日か?
      • 初めての利用か?2回目以降の利用か?
      • 言語はなにか?
    • Conditionによる条件・ロジックで可能
    • 更に進んだ使い方
      • カスタムなJavaScriptコード
      • APIを使った最新データの取得
      • スプレッドシートからのデータの取得
  • 共有ワークスペース

    • チームの一員として、多くのプロジェクトを進行するケースも。
    • 共有ワークスペースを使えば、すべてのプロジェクトのステータスを一目で確認でき、「カンバンシステム」を組み込んだワークフロー管理が可能。
    • ステークホルダーやクライアントを、閲覧・コメントのみのコラボレーターとして招待したり。
    • コンポーネントやテンプレートライブラリを共有して、全てのプロジェクト間で一貫したデザイン管理が可能
    • 大規模な組織では、複数のチーム用にワークスペースを管理することも可能
    • チーム独自のワークフローに合わせた柔軟な設定が可能

f:id:kun432:20210223235329p:plain

f:id:kun432:20210223235739p:plain

f:id:kun432:20210223235751p:plain

  • Voiceflowからのエクスポート
    • デザインができたら、ステークホルダーへ受け渡してレビューしてもらったり、開発チームに受け渡したり。
    • エクスポートにはいくつかのオプションがある。
      • PDF/PDF
        • キャンバスマークアップも含まれる
      • .vfファイル
        • プロジェクトの保存・ダウンロード
        • JSONファイルになっており、コンテキスト構成やレスポンスなど、全てのデザインが含まれる

f:id:kun432:20210224000256p:plain

f:id:kun432:20210224000549p:plain

まとめ

Design and Documentationにはあまり目新しい機能はなかったように思いますが、デザイナーが音声アプリの設計を効率的に行えるだけでなく、デザインや開発、さらには顧客も含めた、チームでの開発をやりやすくする機能が充実しているのが改めてわかりますね。

次回は「Prototyping and User Testing」です。

Voiceflow新機能発表イベント 『#VFV2』まとめ①

f:id:kun432:20210223110448p:plain

今日早朝に開催されたVoiceflowの新機能発表イベント「VFV2」!眠い目をこすりながら見ている方もいらっしゃったかもしれませんが、目が覚めるぐらいに本当に多くの機能が紹介されました!数回に分けて、イベントの模様と新機能をご紹介していきます!

オープニング

開始時間直前にカウントダウンが始まりました。いやがおうにも盛り上がりますね!

f:id:kun432:20210223110513p:plain

はじまりました!

f:id:kun432:20210223110654p:plain

世界中のVoiceflowユーザの紹介です!実は私も写っていたりしますw

f:id:kun432:20210223111427p:plain

最初はVoiceflowのCEO、Bredanさんからの挨拶です。

  • 1000人以上の参加者
  • 日本のコミュニティは朝の4時から参加してくれている!
  • Voiceflowは2年前に子供向けにお話を読み聞かせてくれるAlexaスキルから始まった。
  • そのデザインやプロトタイプを作る過程で、フローチャートや、Wordドキュメント、スプレッドシートなどの既存のツールは、デザイナーやディベロッパーが集まった小さなチームでは便利ではなかった。そこでVoiceflowを開発した。

f:id:kun432:20210223111647p:plain

  • 今では55000ユーザが登録し、1年で2億回のインタラクション、7000ものAlexaスキル/Googleアクションをホストしている、最も大きな開発プラットフォームの一つ。
  • 過去半年でユーザ増加率は4倍で成長している。

f:id:kun432:20210223112735p:plain f:id:kun432:20210223112739p:plain f:id:kun432:20210223112748p:plain

  • 昨年は働き方を変える大変な一年だった。キャンバスマークアップ、リアルタイムコラボレーション、コメントシステム、ワークスペースの共有など、同じ場所にいなくても音声アプリをチームで開発できる機能を追加してきた。
  • その中でも重要だったのは、AlexaとGoogle以外にもチャネルを用意したこと。
  • ずっと考えてきたのは、Voiceflowがあらゆるチャネル向けの音声アプリ開発のハブとなることだった。そのために、新たに設計し直したのがV2。

f:id:kun432:20210223114003p:plain

  • V2では、新たなプロフェッショナル向けのデザイン・プロトタイプ機能を追加したが、同時に、IVR・メッセージング・ウェブチャット・音声アシスタント・カスタムアシスタントなどあらゆる種類のチャネルへの対応を増やした。
  • Voiceflowのゴールは、FigmaやAdobeXDがビジュアルデザインの中心的ハブであるように、あらゆるチャネルにおける会話デザインのハブになること。

f:id:kun432:20210223114104p:plain

  • V2は、4つの主要エリアに力を入れている。

    • Design and Documentation
    • Prototyping and User Testing
    • Designer/Developer Hand-off
    • No Code Capabilities to All
  • Design and Documentation

    • 会話デザインは、コンテキストモデルやダイアログ管理などの高い忠実性が求められるが、同時にデザインの読みやすさやドキュメントの基準が求められる。
    • フローチャートは見やすいが物足りない、プロトタイプツールはパワフルだが読みにくい。Voiceflowはそのちょうどよいバランスを目指した。

f:id:kun432:20210223115621p:plain

  • Prototyping and User Testing
    • 会話体験のプロトタイプは、ハッピーパスから始めて、複雑なものは後で付け足していく。素晴らしいユーザテストで高い忠実性を持った1対1の体験を得られる。これがVoiceflowのゴール。
    • 音声体験やチャット体験だけなく、マルチモーダル体験もV2では得られる。

f:id:kun432:20210223115634p:plain

  • Designer/Developer Hand-off
    • デザインチーム・開発チーム間のギャップを橋渡しする。
    • デザイナーのビジョンを効果的に伝えるための成果物をコードとともに開発チームに受け渡し、そこから開発チームが必要なものを選択することで、マーケットに素早く提供する。

f:id:kun432:20210223115642p:plain

f:id:kun432:20210223123833p:plain

  • No Code Capabilities to All
    • ノーコードで公開までできる柔軟性をすべての音声プラットフォームへ。
    • コードを書くことなく、プロトタイプをデザインし、あらゆる音声チャネル向けにアプリを立ち上げる。

期待が高まりますね!

このあとはカスタムな音声銀行アプリを題材に、各テーマごとに新しい機能などを紹介していきます。

続きは次回。