AIが明確に見えるようにする：ダッシュボードデザインのケーススタディ

人工知能（AI）は、今日多くの業界で懸命に働いています。 これは、小売業者が在庫を管理し、需要を予測するのに役立ち、医師が肺スキャンで癌を特定しやすくし、車が自分で運転できるようにします。

しかし、AIを活用した自動化は進化を続けており、依然として人間の介入が必要です。 このダッシュボードデザインのケーススタディでは、人間のオペレーターがAI認識プロセスを改善するのに役立つUIをどのように開発したかについて詳しく説明します。

クライアント

クライアントは米国の新興企業であり、顧客が複数の業界のAI画像認識エラーをリアルタイムで解決するのを支援しています。 それが提供するソリューションは、地形マッピング、植物分類、小売製品の識別、バーコードスキャンなどを可能にする自動システムを改善します。

AI画像認識システムは、視覚入力を認識して解釈し、「見る」ものに基づいて決定を下すように訓練されています。 ただし、これらのシステムで例外が発生することがあります。これは、オブジェクトの外観が予期しないために処理できない画像です。 例外により、AIシステムが重要な情報を識別できなかったり、見たものを誤認したりする可能性があります。 たとえば、食料品スキャナーは、コンテナーが変更されたため、または自動運転の農場ロボットが障害物によって混乱したために、オレンジジュースのカートンを認識しない場合があります。 このような問題は、ビジネスの運営に遅延や混乱を引き起こす可能性があります。

これらの問題を解決するために、クライアントのソフトウェアは顧客のAIシステムと統合され、人間のオペレーターが認識の問題をリアルタイムで確認して解決できるようにします。 しかし、オペレーターは例外を解決するだけでなく、次に似たようなものに遭遇したときにAIシステムに何をすべきかを教えます。 これにより、より広範囲の画像を識別するための設備が整ったAIシステムが実現します。

ブリーフ

2か月の間に、私はクライアントと協力して、オペレーターダッシュボードとカスタマーダッシュボードのデザインを提供しました。 また、これらの成果物に付属するコンポーネントライブラリとスタイルガイドも用意しました。

私のアプローチは、調査、ブレーンストーミング、忠実度の低いプロトタイピング、忠実度の高いプロトタイピング、およびユーザーテストを含むデザイン思考プロセスに従います。 私は常に、時間、資本、および人員の可用性に基づいてこのプロセスを適応させます。

プロジェクトの間、私はクライアントの創設チームおよびフロントエンド開発者と緊密に協力し、毎日の更新を共有して、すべての人が私の進捗状況を常に把握できるようにしました。 また、日々の業務に貴重な洞察を提供してくれた2人のオペレーターとも協力しました。

オペレーターダッシュボードの改善

クライアントの製品の中心は、AIスペシャリストが画像認識の問題を解決するために使用するインターフェースであるオペレーターダッシュボードです。 AIシステムで画像の識別に問題がある場合、その画像はオペレーターのダッシュボードに送信されます。 オペレーターは、各オブジェクトにマークを付け、「人間」、「木」、「大きな障害物」などの所定のラベルに基づいて画像を分類することにより、画像に手動でラベルを付けます。

クライアントのオペレーターにインタビューしたところ、彼らが使用しているソフトウェアの現在の状態を教えてくれ、彼らが仕事をしているのを観察することができました。 この最初の調査から、設計に役立つ洞察、問題点、および改善の機会を収集しました。

重要な機能が不足していて、特定のタスクが不必要に複雑で、インターフェイスが使いにくいことを発見しました。 たとえば、画像にラベルを付けるために、オペレーターは、選択、ラベル付け、レビュー、および送信を行うたびに、ツールバーと画像の間を行ったり来たりする必要がありました。 同様に、アクションを元に戻したりやり直したりする機能もありませんでした。つまり、オペレーターは、ミスをしたときにタスクを繰り返すか、追加の手順を実行する必要がありました。

もう1つの懸念は、インターフェイスがほとんど既製のコンポーネントの組み合わせに依存していたため、統一されたルックアンドフィールを備えていなかったことです。 これらの不整合により、特定の要素や機能を見つけたり使用したりするのが困難になりました。

これらの改善の機会を念頭に置いて、私は初期の概念をブレインストーミングし、ワイヤーフレームを作成し、それを2人のオペレーターと共有しました。 毎日、1週間にわたって、私はオペレーターにワイヤーフレームを提示し、仮想フィードバックセッションを通じて彼らの第一印象について話し合いました。 セッションは非常に協力的で、ダッシュボードを改良するためのアイデアをまとめるのに役立ちました。

フィードバックセッション中に浮かび上がった興味深い点の1つは、右側のツールバーに表示される情報の量であり、オペレーターがアクションを選択しました。 私の元のデザインは、非常にミニマリストな解決策を提案しました。それは、アイコンだけを表示する狭いパネルに折りたたむことができるツールバーです。 これにより、中央の画像に焦点を合わせることができると私は信じていました。

しかし、アイコンの意味や主なアクションが一目でわかりづらかったため、オペレーターはこのアイデアを気に入らなかった。 その重要な洞察により、私は単純な方が常に良いとは限らないことに気づきました。 この場合、より多くの情報を表示したままにしておくと、オペレーターがより効率的に作業するのに役立ちました。

最初のワイヤーフレームを改良して改良した後、私はFigmaでインタラクティブで忠実度の低いプロトタイプを作成し、それをオペレーターと利害関係者に送信してテストできるようにしました。 彼らのフィードバックを受け取ったら、みんなが満足するまでデザインを繰り返しました。

前述したように、元のダッシュボードは既製のUIコンポーネントを組み合わせて作成されており、製品内のエクスペリエンスは全体を通して一貫していませんでした。

ただし、時間と予算の観点から、利害関係者は可能な限り既製のコンポーネントを保持したいと考えていました。 そこで、フロントエンドの開発者と協力して、ボタン、フォームとフィールド、その他のUI要素を含む既存のコンポーネントをカスタマイズして、新しいダッシュボードのルックアンドフィールに一致させました。 これらの調整は、色、書体、間隔、およびその他の詳細に影響を与えました。 ライブビューの進行状況アニメーションなど、既存のコンポーネントを更新できない場合は、新しいコンポーネントを作成しました。 オペレーターダッシュボードのほとんどは、この方法でゼロから構築されました。

次に、色と、オペレーターがソフトウェアで通常見る写真の種類を組み込んだ、ナビゲート可能で忠実度の高いプロトタイプを作成しました。 また、長方形、鉛筆、ポリゴンなどの選択ツールを含め、画面の下部に、オペレーターが画像を強調できるパネルを追加しました。 最後に、After Effectsでアニメーション化されたマイクロインタラクションの仕様とともに、プロトタイプをフロントエンド開発者に送信して、ダッシュボードを作成できるようにしました。

ゼロからの顧客ダッシュボードの設計

プロジェクトの第2フェーズは、AIシステムの所有者が解決中の問題の進捗状況を観察できるようにするカスタマーダッシュボードでした。 クライアントは、より多くの顧客に製品を発売する前に、このエクスペリエンスを改善したいと考えていました。

当初、クライアントの顧客は電子メールで進捗レポートを要求する必要がありました。 各レポートは、どの例外が解決されたか、またはまだ進行中であるかを示すPDFまたはCSVファイルでした。 クライアントは、顧客が各例外のステータスを一目で確認できる方法を必要としていました。

私が設計したダッシュボードを使用すると、顧客はログインして、各例外の進行状況をリアルタイムで監視できます。 入ってくる画像、レビュー中の画像、およびすでに解決されている例外を見ることができます。 また、各ソリューションの詳細を表示して、問題がどのように解決されたかをよりよく理解することもできます。

ダッシュボードは、顧客が総エンゲージメントや総解像度などの要約データをよりよく理解するのに役立つグラフと視覚化を備えています。 顧客は、支払い方法やログイン情報など、アカウントのビジネス面に簡単にアクセスして管理することもできます。

カスタマーダッシュボードのプロトタイプでは、After Effectsでアニメーションを作成して、特定のUI要素がどのように動作するかを示しました。 たとえば、レビューで例外を表示する進行状況アニメーションを作成しました。これは、例外が解決されたときにチェックマークになります。 また、プロジェクトがライブであるときに表示するパルスドットを設計しました。

Figmaでのコンポーネントライブラリの構築

スケーラブルで保守が容易な製品を設計する際の重要な側面の1つは、コンポーネントライブラリとスタイルガイドを作成することです。 標準化された再利用可能な設計コンポーネントを使用することで、デジタル製品に機能をスケーリングおよび追加する際の一貫性と速度の両方が保証されます。

クライアントのライブラリをFigmaに格納することを選択しました。これにより、コンポーネントを簡単に変更したり、デザインのどこに表示されていても更新したりできるからです。 すべてのコンポーネントとスタイルは、8ポイントグリッドを使用して文書化されました。 ライブラリには、メニュー、サイドバー、タブ、入力アイコン、ボタンなどのコアコンポーネントが含まれ、スタイルガイドには、タイポグラフィ、色、アイコン、間隔、グリッドなどの要素が含まれていました。

将来的には、コンポーネントライブラリは本格的な設計システムに進化する可能性があります。 しかし今のところ、それは製品を成長させるための基盤として、そして将来のデザイナー、彼らが社内スタッフ、フリーランサー、または代理店の専門家のための参照として機能します。

ユーザー調査事項

このプロジェクトは、複数の業界の自動システムを強化し、AIが世界を解釈する方法を形作るデジタル製品を改良する機会を与えてくれたので、やりがいがありました。 また、ユーザー調査と直接観察の重要性を強化しました。 オペレーターが仕事をしているのを見て質問できることは、オペレーターがより効率的かつ効果的に作業できるようにするダッシュボードを提供するために不可欠でした。 設計者は、最初に自分の経験を理解するまで、誰かの働き方を改善することはできません。

Toptalブログでさらに読む：

• ダッシュボードの設計–考慮事項とベストプラクティス
• 一貫性が鍵– FigmaDesignSystemを構築する方法
• UXリサーチテクニックとその応用
• ユーザー調査の価値
• UXの真のROI：エグゼクティブスイートを説得する