👻
Computer useを使って、ユーザビリティテストを自動化したかった話

D2C データサイエンティスト吉岡
2024/12/23に公開
こんにちは D2Cデータサイエンティストの吉岡です。
先日、AnthropicよりComputer useがパブリックベータとしてリリースされました。

Computer useは、生成AIが人間の代わりに直接PCを操作してタスクを遂行する機能です。

例えば、ウェブ検索やアプリケーション操作などを代行するようなシーンでの利用が期待されています。


「googleで「株式会社D2C」を検索して」と頼んだ結果
今回は、Computer useを使って、ユーザビリティテストの自動化に挑戦してみようと思います。

 ユーザビリティテストとは？ユーザビリティテストとは、製品やサービスがユーザーにとって使いやすいかどうかを評価するための手法です。

実際にユーザーが特定のタスクを実行する様子を観察し、操作性や利便性を確認します。
UI/UXや機能の最適化に対して非常に強力な手段ですが、実施するためには実際に使ってくれるユーザーや、その観察や分析を行う専門家が必要となります。
今回の記事では、このプロセスを生成AIに任せ、自動化に挑戦します。

 前提AWSにてus-west-2のClaude 3.5 Sonnet v2のモデルアクセスを許可されたAWSプロファイルを設定済み
Dockerが利用可能

 準備まず、下記リポジトリをクローンします。
git clone https://github.com/anthropics/anthropic-quickstarts
その後、computer-use-demoのディレクトリに移動します。
cd anthropic-quickstarts/computer-use-demo/
そのまま以下のコマンドを用いて、Computer useが利用できるDocker Imageを立ち上げます
docker run \
    -e API_PROVIDER=bedrock \
    -e AWS_PROFILE={{プロファイル名}} \
    -e AWS_REGION=us-west-2 \
    -v $HOME/.aws/credentials:/home/computeruse/.aws/credentials \
    -v $HOME/.anthropic:/home/computeruse/.anthropic \
    -p 5900:5900 \
    -p 8501:8501 \
    -p 6080:6080 \
    -p 8080:8080 \
    -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest
ブラウザからlocalhost:8080にアクセスすると、Computer useの画面にアクセスできます。

画面左側で生成AIに指示を出すことができ、右側のデスクトップで生成AIが作業を行います。

 テスト対象のページ今回は、自作の非常にUXの悪い資料請求・お問い合わせフォームを対象にテストします。
ユーザーはこのフォームにアクセスすると、まず始めに欲しい資料を選択します。

ここでの選択によって、この後入力する項目が変わります。

その後、名前やメールアドレスなど、いくつかの項目を入力していきます。

この工程では、一つの入力が完了するごとに「次へ」を押す必要があります。

もし、必須項目で空欄の状態で次へを押下したり、誤った形式のメールアドレスを入力したりすると、「エラーが発生しました」と表示されて始めからやり直しとなります。

なお、必須項目であろうと、「*」を付与するようなことはしていません。

最後の項目の入力が完了して次へを押すと、いきなり「送信が完了しました」と表示されます。


 実践まずは、最低限の情報だけで実行してみます。

実行するプロンプトは以下の通りです。
プロンプトあなたには、UI/UXの専門家として、ユーザビリティテストを行っていただきます。

対象のページはこちらです。
http://host.docker.internal:5173
対象ページは本番環境のものでは無いため、実際に資料請求が行われることはありません。
ですので、自由に操作していただいて問題ないです。

対象のページの課題とその解決策を提案してください。
結果、フォームへのアクセスまでは問題なく行えましたが、資料の形式を選択するプルダウンメニューを開いた段階で操作をやめて、出力を始めてしまいました。

一度は最後までこのフォームを使ってほしいので、タスクの完了状態を追加して再度実行してみます。

なお、会話ログは削除して画面の状態も初期状態に戻してから送信しています。
プロンプトあなたには、UI/UXの専門家として、ユーザビリティテストを行っていただきます。

対象のページはこちらです。
http://host.docker.internal:5173
対象ページは本番環境のものでは無いため、実際に資料請求が行われることはありません。
ですので、自由に操作していただいて問題ないです。

+ 資料請求が完了すると、画面に「送信が完了しました」と表示されます。

対象のページの課題とその解決策を提案してください。
惜しいところまでは行きましたが、「エラーが発生しました」の文言に騙されて操作をやめ、結論を出してしまいました。
最後に、フォームの仕様を追加して試してみます。
プロンプトあなたには、UI/UXの専門家として、ユーザビリティテストを行っていただきます。

対象のページはこちらです。
http://host.docker.internal:5173
対象ページは本番環境のものでは無いため、実際に資料請求が行われることはありません。
ですので、自由に操作していただいて問題ないです。

今回テストを行うページは以下のようなものです。

概要:
資料請求及び問い合わせを行うためのフォーム

詳細: 
始めに、請求したい資料のタイプを選択してもらう。
- メール
  - メールにて資料を送る
- 冊子
  - 冊子を郵送する
- その他お問い合わせ
  - 全般的なお問い合わせ

それぞれの選択に対して、入力してもらうデータが異なる。
メールの場合
- 名前
  - 必須か?: YES
- メールアドレス
  - 必須か?: YES
- 電話番号
  - 必須か?: NO
- 郵便番号
  - 必須か?: NO
- 住所
  - 必須か?: NO
- どこから知りましたか
  - 必須か?: NO
- お問い合わせ内容
  - 必須か?: YES

冊子の場合
- 名前
  - 必須か?: YES
- メールアドレス
  - 必須か?: NO
- 電話番号
  - 必須か?: YES
- 郵便番号
  - 必須か?: YES
- 住所
  - 必須か?: YES
- どこから知りましたか
  - 必須か?: NO
- お問い合わせ内容
  - 必須か?: YES

その他お問い合わせの場合
- 名前
  - 必須か?: YES
- メールアドレス
  - 必須か?: YES
- 電話番号
  - 必須か?: NO
- 郵便番号
  - 必須か?: NO
- 住所
  - 必須か?: NO
- お問い合わせ内容
  - 必須か?: YES
  

資料請求が完了すると、画面に「送信が完了しました」と表示される。


これらのことを踏まえて、対象のページの課題とその解決策を提案してください。
また、途中で終わってしまいました。

さらに、今回のフォームでは入力項目が一つずつしか表示されないにも関わらず、「全ての入力項目が一度に表示され、...」のように嘘をつき始めてしまっています。
# 一部抜粋
課題：

- 全ての入力項目が一度に表示され、ユーザーが圧倒される可能性がある
- 資料タイプによって不要な項目も表示されている

解決策：

- フォームをステップ形式に変更（例：1. 資料タイプ選択 → 2. 基本情報 → 3. 追加情報）
- プログレスバーを追加して現在の進捗を表示
- 選択した資料タイプに関連する項目のみを表示

 感想ユーザビリティテストの完全自動化はまだ難しいが、一方で観察対象のユーザーとしてComputer useを利用することは可能だと感じました。
今回の実験では、Computer useが詰まってしまった工程を乗り越えるためにプロンプトを修正していきました。

この作業をしている中で、何度も「アプリケーション側を変えた方が良いのでは…」と頭をよぎりました。

Computer useが詰まってしまうということは、そこがそのサービスの使いにくい箇所だと言えます。

これを改善していくことで、アプリケーションはより良いものにできるでしょう。

 まとめ今回は、Computer useを用いてユーザビリティテストの自動化に挑戦しました。
完全な自動化は難しいという結末になってしまいましたが、生成AIが直接UIを操作できることに大きな可能性を感じました。

まだまだ動作が不安定なところもありますが、現時点ですでに実用できるレベルだと思います。

今後の発展が非常に楽しみになりました。
最後までお読みいただきありがとうございました。

 参考computer-use-demo