見出し画像

生成AI・LLMを用いて「あなた」にパーソナライズされたUIの実現を目指す「生成UI」の可能性

kagaya

生成AI・LLMを用いてユーザーのニーズ・コンテキストを踏まえて、リアルタイムにUIを生成することで、個人にパーソナライズされた体験の提供を標榜する生成UI（Generative UI）について考えてみます。

米TIME誌が2006年のPerson of the Yearに「You」を選んでから、20年弱の歳月が経ちましたが、UI/UXも「You」の時代、重要性が高まるかも知れないというよもやま話です。
(UはUserなので、個人にパーソナライズするインタフェースをそのままUIと呼ぶのか？とかも気になります)

私自身も絶賛思考・キャッチアップしてる所なので、関心のある方と雑談できたらうれしいです。

以下記事も。



サマリー

  • 生成UI（Generative UI）とは、AIがユーザーのニーズ・コンテキストに合わせてリアルタイムにUIを生成するものである

  • 生成UIは、ユーザーの意図やコンテキストをより深く理解し、パーソナライズされた体験を提供することが可能

  • 生成UIの事例はまだまだ心許ないが、フライト予約アプリ、アンケートフォーム、PerplexityのPro Search機能などを紹介

  • 生成UIにはテストと評価の困難さ、デザインの一貫性・統一性などの課題があると考えられる

  • 選択肢の自動生成等から始まり、徐々にUIコンポーネント自体の生成へと発展していくのではないか

生成UIの定義

まずは生成UIについて、Nielsen Norman Groupの記事の定義を取り上げます。

上記記事では、生成UIについて以下のように説明されています。

A generative UI (genUI) is a user interface that is dynamically generated in real time by artificial intelligence to provide an experience customized to fit the user’s needs and context.
ジェネレーティブUI（genUI）とは、人工知能によってリアルタイムで動的に生成され、ユーザーのニーズやコンテキストに合わせてカスタマイズされた体験を提供するユーザーインターフェースのことである。

https://www.nngroup.com/articles/generative-ui/

In the future, generative UI will dynamically create customized user interfaces in real-time. This shift will force an outcome-oriented design approach where designers prioritize user goals and define constraints (for AI to operate within), rather than design discrete interface elements.
将来、ジェネレーティブUIは、リアルタイムでカスタマイズされたユーザーインターフェースを動的に作成するようになるだろう。このシフトにより、デザイナーは、個別のインターフェイス要素をデザインするのではなく、ユーザーの目標に優先順位をつけ、（AIが動作するための）制約を定義する、結果指向のデザインアプローチを余儀なくされるだろう。

https://www.nngroup.com/articles/generative-ui/

生成UIとは、AIがユーザーのニーズやコンテキスト、行動履歴やプロファイルに合わせて、動的にインターフェイスを生成するものだと定義されています。

既にGalileo AIやUizard、v0 by Vercelのように、プロンプトでUIを生成してくれるAIサービスは数多く登場しています。
これらのAIサービスが、文字通りプロダクトに組み込まれていて、ユーザーの操作に合わせてリアルタイムでUIを生成してくれるイメージで捉えています。

引用: https://www.nngroup.com/articles/generative-ui/

ユーザーごとにUIの一部を変える、パーソナライズ自体は、既に存在してる概念・体験ではあります。

生成AI/LLMによりUIコンポーネント・インターフェイスの都度自動生成が現実的になりつつある、加えてLLMの読解力を活かして、コンテキストを踏まえることもできるという背景により、生成UIという概念が現実味を帯び始めたと捉えています。

生成UIの事例

具体的な事例はほぼなく、記事内でもExampleが一つ紹介されているのみです。
UI・インタフェース自体の自動生成が組み込まれたプロダクトの例はほぼ思い当たらないですが、私が知る限りの生成UIに近そうな体験について紹介します。

あくまで私自身が生成UIに近そうと判断した事例が含まれています。明らかにUI・インタフェース自体の自動生成ではなく、選択肢や値の生成に留まっている例も関連したコンセプトによるものとして取り上げています。
他に事例・アイディア等ご存知でしたら、ご教示いただける教授頂けると非常にうれし嬉しいです。

フライト予約アプリ

生成UIの定義で引用した記事で紹介されている例です。
読字障害のユーザーが、航空会社のアプリでフライト予約をするケースが説明されています。

  1. ユーザーの特性や嗜好に合わせたUI/UXの最適化

    • 読字障害のユーザーにとって、読みやすいフォントと配色が使用され

    • ユーザーは窓際の席を好むので、フライト検索結果で窓側席が上位に表示される

    • 深夜のフライトは利用しない傾向にあるので、検索結果の一番下に表示される

  2. AIエージェントによる自然な対話体験

    • ユーザーが「5月6日から10日までシカゴ行き」と音声でリクエストすると、AIエージェントが自宅近辺の空港からの出発を推測し、フライトを検索する

  3. 個人の行動履歴に基づく情報の最適化

    • ユーザーはコストと所要時間を重視する傾向にあるため、それらの情報がフライト検索結果で目立つように強調表示される

  4. リアルタイムの状況を考慮した付加情報の提供

    • その日程で大きなイベントがあり旅費が高くなることを天気やイベントデータから検知し、ユーザーに対して警告メッセージと早期予約をアドバイスする

ユーザーの個人的な特性や好み、状況に合わせてインターフェイスを最適化することで、ユーザー一人ひとりに合わせたUI・体験を提供する可能性を示しています。

テキストによる説明のみのため、AIがどのようなインターフェースを自動生成するかをクリアにとらえることは難しいですが、世界観や雰囲気は伝わります。

アンケートフォーム

個人的に考える生成UIのわかりやすい例の一つは、アンケート等のフォームを回答に応じて自動生成することです。

例えば、会社や業務についての満足度や不満を問うようなアンケートにおいて、「上司との関係が上手くいってない」と判断できれば、それに関する内容をより具体的に確認するフォームを次に生成する。
「何かわからないがあまり満足度や充実感が足りていない」と思われるのであれば、もしかしたらコーチング的に不満やモヤモヤを詳細化するようなフォームにすることで、より上手くアンケートを実施することができるかもしれません。

以前Xで回答結果に応じて次の設問が変化するアンケートフォームが話題になりました。このアンケートフォームの例では、ユーザーの回答内容をリアルタイムで分析し、次の質問を動的に生成しています。これは生成UIの一つの形と言えるでしょう。


PerplexityのPro Search

前述のフォームの例とほぼ同一ですが、PerplexityのPro Searchではコンテキストに応じて追加で情報を求めるUIが実装されています。

ユーザーの入力した内容に応じて、シンプルなテキストフォームだけでなく、選択式のフォームの値が自動生成され、優れた出力を生成するためのガードレールとして機能しています。

CognosysというAIエージェントツールにも同様のUIが実装されています。


JasperのDynamic Template

こちらもフォーム系です。自分が生成したい文書について入力すると、自動で入力欄が生成されて、そこに情報を埋めていくことが精度の高い文章が生成される体験になっています。

生成UIの課題

生成AIの問題は生成UIの問題でもあります。そのためハルシネーションや出力のコストやレイテンシー、個人情報等のプライバシー等々、生成AI/LLMの課題や特性となっているものは生成UIにおいても変わらず課題となるでしょう。

それ以外にも、毎回インターフェイスが変わってしまうことにより、ユーザーに混乱をもたらしてしまったり、学習コストが高くなることが考えられます。
動的に生成する程度にも依存しますが、毎回ボタンの位置やアクションが変わるなどはさすがにストレスを感じるでしょうし、ユーザーごとに大幅にインタフェースが異なれば、例えばユーザーマニュアルなども共有できないかもしれません。生成されるUIの幅によっては動作確認も大変です。

UIの一貫性や予測可能性を重視しすぎると生成UIのお題目であった個人・コンテキストにパーソナライズされた体験というのは形骸化してしまうかもしれません。
一方で大きく画面・レイアウトを変化させることが生成UIではなく、前述したPerplexity等の例も大枠のレイアウトが変わってるわけではありません。
この辺りのバランス、実際にどの程度自動生成の要素を入れるかの判断は、生成UIが広く浸透する上では重要になりそうです。

他にも以下の観点で検討が必要かもしれません。

  • テストと評価

    • 各ユーザー・コンテキストごとに生成されるUIが異なる場合、その動作確認のためのテストをどう行うか

    • 最適なUIであるかを人手で評価するには手間がかかるため、自動評価手法の確立も重要

    • Ferret-UIのようなUIを理解するLLMモデルを駆使して、評価・分析を行う必要があるかもしれない

  • 事前に体験をデザインしきることが難しくなる

    • 各個人に最適化されたUIを全て事前にデザインすることは現実的ではない

    • 達成すべきゴールやユーザー体験から逆算して、「インターフェースを生成するAI」がそこに到達できるよう、その振る舞いや制約条件を設計する必要性が高まるかもしれない

    • 大枠のUIフローやパターンは人手でデザインし、細かい調整はAIに任せるといったハイブリッド手法も考えられる

  • デザインの一貫性とブランディング

    • 動的に生成されるUIでは、デザインの一貫性やブランドアイデンティティを反映することが難しくなるかもしれない

    • デザインシステム、ガイドライン、コンポーネントライブラリなどを適切に設計し、AIがそれらのルールを遵守できるよう制御する必要がある

  • パーソナライゼーションと公平性のバランス  

    • 個人の嗜好や状況に合わせた過度のパーソナライズを追求すると、機能や情報へのアクセスに不均衡が生じかねない

    • 例えば、フライト予約の事例で、コストと所要時間を重視するユーザーにはそれらの情報が強調表示される一方、そうでないユーザーには安いフライトが表示されにくくなるといった情報アクセスの不均衡が起こり得るかもしれない

    • アルゴリズムのバイアスが公平性に影響を与える可能性

  • 説明可能性・再現性

    • なぜそのUIが生成されたのか、その根拠や理由を説明することが難しくなる

    • ユーザーからの問い合わせ時に、その時点のUIを再現できないと適切なサポートが提供できない可能性

どう作るのか？

選択肢はいろいろあると思いますが、今だとVercel AI SDKのGenerative UIを使うのが便利そうです。

Perplexityライクな質問・応答UIを提供するMorpfiyも、Vercel AI SDKで構築されています。

実装についてはまた別の機会・記事で掘り下げたいと思います。

所感

LLM時代のUI/UX、プロダクトのUI/UX改善にLLMを用いるのは、生成AI・LLMの台頭で特に面白くなる領域の一つだと思っています。
例えば、スマホ等のデバイス自体にAIエージェントが搭載されてる世界におけるプロダクトのUI/UXは、「良い」の定義自体が変わりうる可能性が高いため、新たな体験の発明は非常にやりがいがありそうです。

それもあり生成UIについて取り上げてみましたが、AI駆動のインターフェイス生成による個人にパーソナライズされた体験にはロマンを感じる一方で、課題も多そうです。

PerplexityやCognosysのように、コンテキストに応じて適切な選択肢や値が自動生成されるだけでも十分便利な体験になり得ると思っているため、これらのような使い方から徐々に広がっていくと考えています。
一方で、UIコンポーネント自体の自動生成がプロダクトに組み込まれている体験は、実際に採用するイメージをクリアに描けてはいないです。引き続き考えていきたいところです。

蛇足ですが、9月にドイツのハンブルクで開催されるprompt:UX 2024がとても楽しそうだなーと思っています。（ドイツ行きたい）

おわり

生成UIについて簡単にですが紹介しました。

ニールセンの記事では生成UIと合わせて、AI-Assisted Designも取り上げられていて、こちらも業務プロセスの変化可能性として面白いと思うので、興味がある方はぜひ記事をご覧になってください。

LLMプロダクトのUI/UXやLLM for UI/UXは、引き続き模索していければと思うので、改めてになりますが、この領域に関心のある方とぜひ雑談できたらうれしいです。

今回は以上です！


いいなと思ったら応援しよう！