見出し画像

AI要約機能におけるUIデザインの考え方 - SmartHR「従業員サーベイ」機能の場合

こんにちは、早くも酷暑が予想される初夏ですが、皆さまお元気でしょうか?エアコンの空調管理に悩まされるSmartHRのプロダクトデザイナーの@kgsiです。

つい先日「SmartHR AI活用ポリシー」策定のお知らせと、「従業員サーベイ」機能においてAIを利用した自由記述回答の要約機能が発表されました。これはSmartHR初の生成AIが使われた機能です。

今回自分が機能設計をデザイナーとして担当しましたが、この記事ではその開発過程で得られた、主にデザイン文脈におけるナレッジを紹介します。

生成AIに関連する記事はすでに多く出現していますが「プロダクトとしてAI機能をどう設計するべきか」「AI機能をどうやってデザインするか」といった観点での記事はまだ少ない印象なので、参考になれば幸いです。

何のデザインをしたのか?

「従業員サーベイ」機能は従業員に送付したサーベイを通して回答データを収集し、収集された結果の集計・表示や分析を行うツールです。
とてもシンプルに言うならば、従業員から収集されたデータ自体には手を入れず、集計した結果をもとに図やテーブルに表示している機能です。

では、今回リリースされた「従業員サーベイ」機能の要約機能がどんなものか、簡単にまとめると以下のような特徴を持っています。

  • 回答要約

    • サーベイで入力された自由記述の回答を、生成AIを通して自動で要約される機能

  • ポジネガ判定

    • サーベイの回答内容がポジティブ(肯定的・積極的・楽観的)かネガティブ(否定的・消極的・悲観的)かを自動で判定する

  • その他

    • 今回のAI機能で利用するデータは「自由記述の質問のコメント」のみ

    • APIはAzure OpenAI Serviceが提供するChatGPT API(gpt-3.5-turbo)を利用

AIにより実現した授業員サーベイの要約機能のキャプチャ画像

詳しい機能詳細はプレスリリースを参照してください。

AI要約機能におけるUI設計のポイント

生成AIを機能として落とし込むナレッジは実装面でもデザイン面でも過渡期にあります。通常の機能とは多少異なる観点、配慮が必要でした。気をもんだポイントをそれぞれ解説していきます。

プライバシーポリシーや個人情報保護

「従業員サーベイ」機能では「テスト中の機能」というカテゴリでAI機能を提供するものとしました。
以下のようなAI機能をOpt In/Outできる機能を実装することにより、意図せずAI機能を利用することがなく、情報の適切な管理が可能となる設計としています。

利用機能設定 > テスト中の機能の中に「AI機能」のチェック項目を用意した

なお念のための補足として、要約機能に使われているAPIは、送信される顧客データをAIの学習に利用させない仕様になっています。

実データとAIで生成したデータとの差

「従業員サーベイ」機能は従業員に送付したサーベイを通して回答データを収集し、収集された結果の集計・表示や分析を行うツールです。
とてもシンプルに言うならば、従業員から収集されたデータ自体には手を入れず、集計した結果をもとに図やテーブルに表示している機能です。

なお、ヘルプページからの引用ですが、AI要約の仕組み自体は以下の通りです。

・すべての回答を1つに統合した後、ランダムに2,500文字ずつのグループに分割する(例:グループ1、グループ2、グループ3)
・グループ1の回答を要約する
・グループ1の要約結果とグループ2をまとめて要約する(グループ1の要約結果と同じ文脈の意見は追加せず、差分のみを追加する)
・手順3を繰り返して、すべてのグループの回答を要約する
・コメントをポジティブとネガティブに振り分けて、結果を表示する

AI機能で回答を要約する#要約の仕組から参照
AIによる要約フロー。AI機能で回答を要約する#要約の仕組から参照

要約されたデータを既存のデータ表示と同じように扱った場合、「実体」のデータと錯覚してしまうことも想像できたので、UI上でも工夫する必要があると考えました。

そのため、要約機能はAIから生成した「疑似的」なデータであることを明示するために、通常のデータの表示とは異なる意匠を適用しました。

具体的にはSmartHR Design Systemの「よくあるテーブル」パターンの外側に格子状のタイルを敷き、通常のデータと異なるデータという示唆を与えるための意匠としています。

従業員の回答データ表示と回答から要約されたデータの比較

当初、ここまでの意匠設定が必要かどうかの議論もありましたが、今回がSmartHRとして初めてのAI機能かつ現状は実験的な機能であるため、異なる意匠をほどこすことによって、「擬似的なデータ」であることを強調する判断に落ち着きました。

生成時間

AIの生成にかかる時間はAIの性能に依存します。「従業員サーベイ」のAI要約機能では安価かつ高速とされるChatGPT APIのモデルgpt-3.5-turboが使われていますが、大量のデータをAPIを通して渡して処理する場合、現時点では想像以上に処理時間がかかります。

処理速度の向上といった根本改善は現時点では難しかったので、画面上で低コストかつクイックにできる対応を行ないました。

まず、プロダクトの文言においての対応です。
従業員サーベイにおいて時間がかかる処理は「〇〇中です。数秒後に画面を再読み込みしてください。」としていることが多かったですが、従来よりも時間がかかってしまうことはわかっていたので、「時間をおいて画面を再読み込みしてください」などに変更し、要約にかかる時間への期待値を調整しました。

ようやく表示エリアの中央に「回答を要約中です。時間をおいて画面を再読み込みしてください。」とメッセージが表示されている
回答要約中の画面

現状の状態を伝えやすくするための対応も行っています。
従業員サーベイの「結果」画面は回答結果が積み重なって表示されているため、縦に長いページとなりがちです。
長くなったとき、回答結果のいずれかが「要約中」かどうかユーザーが判別しにくいため、要約中のステータスが存在する場合は画面上部に要約中の回答へのショートカットリンクを表示し、すぐに気づきやすく、かつ設問に遷移しやすいようにしました。

画面最上部に要約中エリアへのショートカットリンクを追加している

課金対策

どんなサービスもお金がかかります。従来のAPI課金モデルでは1リクエストやトラフィックといった単位で課金が発生しましたが、ChatGPT APIの場合、「トークン」という単位で費用が発生します。

このトークン単位という言葉は聞き慣れないかと思いますが、一言で言うと「単語の断片」で、イメージとしては、「文字(Character)と単語(Word)の間の単位」です。
トークンの説明や計算については長くなってしまうため、以下の参考記事やトークンのシミュレーションができるサイトなどを参照してください。

課金対策

ChatGPT (gpt-3.5-turbo) $0.002(¥0.29)、GPT-4(8K コンテキスト) $0.09(¥13.04)、GPT-4(32K コンテキスト) $0.18(¥26.08)
※それぞれ1,000 トークンあたりの値段、GPT-4は入力 + 出力の合計値の値段
引用:https://azure.microsoft.com/ja-jp/pricing/details/cognitive-services/openai-service/

今回の「従業員サーベイ」の「AI要約機能」の場合、比較的簡単な自然言語処理タスクとなるので、圧倒的に価格が安く出力が高速なChatGPT (gpt-3.5-turbo)を使っています。しかし、安いモデルを使っているとはいえ、回数や入力する情報量が増えるとAPIの利用頻度に応じて当然高くなります、無制限に生成を許容することはできません。

したがって不用意に要約生成ができないよう、データがアップデートされていない場合は生成機能を無効化し、データを表示するだけの処理...といったUI上の配慮が必要でした。

要約一覧の上部に「前回の要約後、回答内容に変更がありました。最新の回答を反映するには再要約してください。」というメッセージが表示されている
要約エリアの上部にメッセージを表示。

このように、「従業員サーベイ」では回答データに新しくデータが追加されたり、内容が変更にあった場合にのみ再要約を許可する処理としています。

その他

細かい意匠上の設計ですが、今回のAI機能の組み込みに合わせて新たなアイコンをSmartHR UIに追加しています。

メッセージ「回答はまだ要約されていません。」の下に「回答を要約」ボタンが置かれている
ボタン「回答を要約」ラベルの隣にキラキラしたアイコンを設置

このアイコンは昨今のMiroやNotionなど、先行してAI機能を搭載するサービスにあえて合わせています。AIによる生成をキャッチーに表すであろう「メタファー」として採用しました。
これは、一過性の流行りの表現となる可能性はありますが、生成AI自体がまだ未知の領域であるため、あえて世間の認知に合わせた形で採用しました。

余談として、この「キラキラ」アイコンがいつ「AI」を意味するアイコンとして使われ出したのかはわかりませんが、視覚的なメタファーが、企業、製品を超えてリアルタイムで発展し、認知を得ていく様子は興味深いです。

Bardの初期状態のキャプチャ画像
Bardの出力画面。グラデーションカラーのキラキラアイコンが
テキストより右位置に表示されている
NotionAIの実行時のキャプチャ画像
NotionのAI機能。インプットエリアの先頭にキラキラアイコンが表示されている

おわりに

今回のAIによる「要約機能」を設計する上で難易度が高かったのは、回答データを如何に望むデータに加工し、出力できるか...でした。それこそプロンプトのデザインやAPIへのデータの受け渡し方、その後のQAなど...。プロダクトエンジニアやQAエンジニアの試行錯誤によって実現できた機能です。いずれそのあたりの詳細なノウハウ共有がされると思うので、楽しみに待っています。

プロダクトデザイナーとして画面設計を担当してわかりましたが、ユーザーの「回答」データから「要約」データを出力する流れで、頭をかかえるようなUI設計パターンはなかった一方、「実データとAIが出力したデータの違い」を演出したり、課金対策や生成時間への配慮など..これまで意識してこなかった対応を迫られることになりそうです。

唐突に現れた生成AIについては、まだどのように扱うべきかを模索している段階ですが、プロダクトデザイナーの働き方やプロダクトデザインのありかたさえ、根本的に変える可能性を秘めています。

そんな変化の時代で、プロダクトデザイナーは生成AIの本質を理解した上で、変化に適応した成果物と結果を出すことが求められるでしょう。ユーザーにとって有益となる機能を、開発者の一員として考えていきましょう!

価値あるソフトウェアを作りませんか?

生成AIについては現在社を上げて研究中です。ただ「生成AIを使う」という技術先行の発想ではなく「どのような使い方がユーザー課題を解決できるのか?」という視点を持ち、本質的な価値を探っています。

このような新しい活動も含め、SmartHRのプロダクトデザインに少しでも興味を持った方はご連絡ください!一緒に最高のプロダクトを作りませんか?


この記事が気に入ったらサポートをしてみませんか?