10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

生成AIAdvent Calendar 2024

Day 9

生成AIの待ち時間ってどうしてる?【生成AIサービスのUIを考える】

Posted at

みなさん,生成AIサービス作ってますか?

昨今では,生成AIの利活用は文章や画像の生成だけでなく,RAGによる検索システムなど幅広い分野で行われています.

一方で,生成AIをサービスへ組み込む場合にしばしば問題となるのが,生成AIによる待ち時間ではないでしょうか.

RAG等のシステムでは,既存の検索システムと比較すると検索に時間がかかる傾向にあり,ユーザー視点では下手すると単に"今までよりも遅いシステム"になりかねません.

また,待ち時間が数秒〜数十秒に及ぶ場合,適切なフィードバックが無いとユーザー視点では正常に稼働しているか判断が出来ず,待ち時間が非常に苦痛に感じることでしょう.

今回は,こうした問題を解決するために,既存の生成AIサービスにおけるローディングの工夫点をまとめてみました.

生成AIサービスにおける「良い待機時間」とは

(私はデザイナーではないので持論になりますが...)

従来よく見かけるローディングのUIといえば,やはりSpinnerタイプのものでしょう.

画面収録 2024-12-08 19.08.05.gif

参考:Material UI Progress

しかし,このUIは読み込み(=既存のものを取ってくる)のイメージが強い気がします.

対して,生成AIが行っているのは文字通り生成(=新しいものを作り出す)です.

そのため,時間がかかっていることをユーザに納得してもらうためには,如何にこの生成っぽさを伝えるかが鍵になるのでは無いかと考えています.

また,RAGやエージェントのように複数のステップを経由してタスクに取り組むタイプのシステムは,今何をやっているのかをユーザーに伝えることが,ユーザの待機に対する不安を和らげることに繋がると考えています.

Spinnerタイプのサービス

ELYZA LLM for JP デモ版

ELYZA LLMでは文章生成中にSpinnerのローディング表示が行われています.

画面収録 2024-12-08 19.14.47.gif
参考:ELYZA LLM for JP デモ版

Sinnerタイプは読み込みのイメージが強く生成AIに向かないと前述したものの,ELYZA LLMにおいては文章自体の生成速度が早いため,待機に対する不快感は感じません.

一方,昨今の生成AIサービスではアニメーションを多様したモダンなUIが多様されており,それと比較すると若干の物足りなさを感じます.

処理を逐次的に見せるタイプのサービス

最近のChatGPTの挙動がこれに該当します.(以下の例はChatGPT o1 Previewでの挙動です.)

画面収録 2024-12-08 19.34.02.gif
参考:ChatGPT

ThinkingConnecting the dotsRecalling past eventsTracing daily advancementsの順で処理が遷移していることがわかります.

通常であれば即時に生成が開始されますが,Web上の検索を必要とする場合など,一部の時間のかかる処理に対してはこのようなUIが表示されることがあるようです.

LLMが考えていることを端的に表している,生成AIらしいUIだと言えるでしょう.

(一方で,自分でこのようなUIを実装するのは少々めんどくさいかも...?)

スケルトンスクリーンタイプのサービス

perplexity

生成AIを用いた検索サービスperplexityでは一部スケルトンスクリーンが使われています.

画面収録 2024-12-08 19.42.04.gif
参考:perplexity

スケルトンスクリーンとは,コンテンツの読み込みや生成が完了するまでの間,仮のフレームだけを表示しておくUIの総称です.

perplexityでも,文字が表示されるであろう場所にあらかじめフレームを表示しておくことで,心理的には待機時間が比較的短く感じられます.

また,perplexityの場合は実際に表示される行の高さとスケルトンスクリーンとして表示される行?の高さが一致していないため,スケルトンスクリーンっぽいローディングアニメーションと言うことも出来るでしょう.

生成AIでは生成されるコンテンツの大きさがわからないことも多いので.あえて正確に大きさを一致させるよりも,ユーザから見たときの印象を優先してこのような実装になっているのかもしれません.

Gemini

Google製のLLMであるGeminiも,生成までの待機時間にスケルトンスクリーンを採用しています.

画面収録 2024-12-08 19.42.54.gif
参考:Gemini

こちらはperplexityと違い,スケルトンスクリーンと生成される行の高さが一致しているため,実際に生成している感が強い印象を受けます.

文章の表示も滑らかな表示アニメーションが入っているため,全体として非常に使い心地が良いUIに仕上がっていると思います.

おわりに

今回は簡単に生成AIサービスのローディングアニメーションを調べてみました.

現状でも様々な工夫が見られるローディングアニメーションですが,まだまだ改善の余地はあると考えています.

近年の生成AIの発展が凄まじいのでつい忘れてしまいがちですが,生成AIを活用したサービスが社会実装され世の中で使われ始めたのもつい最近のことです.

今後,生成AIの発展とともに,生成AIに適した様々なUIが作られることを期待したいですね.

10
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?