AIチャットの機能設計とナビゲーション再設計（Shopify App）

ECサイト購入者がチャット上でキャンセルを申請し、条件を満たせばAIが自動で処理を完了させる機能です。キャンセル可能な条件を満たしていても、これまではチャット上で手続きが完結せず、購入者は店舗へ個別に連絡し、店舗はその一件ずつに人手で対応していました。同じ一件の負担が両側に発生する構造です。さらにキャンセルの可否条件は店舗ごとに異なり、条件分岐を店舗側が自分で設定できる仕組みが必要でした。

キャンセルが成立するケースは1つだけ。残りはすべて断るケースになります。つまりこの機能の体験を決めるのは、成功時のフローではなく失敗時の返し方でした。

2〜4の返信は、文面もボタンのラベルもリンク先も、店舗側が管理画面から設定できるようにしました。

もうひとつ、一覧に該当が見つからない場合の出口も用意しました。並べた中に探しているものがないと、そこで会話が止まります。一覧の下に「この中にキャンセルしたい注文がない」を常設し、押せば問い合わせ導線に切り替わる。AIが解決できないことを、ユーザー側から申告できる形です。

オンにして初めて、受付期間・除外商品・断り文の設定項目が開きます。あわせて、断り文が未入力のうちは保存できないようにし、「オンだが返信文が空」という状態を防いでいます。

宛先を事業者のログインアドレスに変更し、内容も「お客様へのお知らせ」から業務報告に書き換えました。注文番号・処理日・対象商品を並べ、返金や在庫連携の確認を促す構成です。同じ機能でも、誰に何を知らせるべきかは実装条件を確認しないと確定しません。自分の初期案を捨てた判断として残しておきます。

実装に渡す前に、うまくいく場合以外の挙動をすべて洗い出して仕様に落としました。

チャット側

• 入力エラー：メールアドレス未入力・形式不正でエラー表示、再入力を始めた時点でエラー文言と赤枠を解除
• 認証失敗：3秒で自動的に消え、再入力できる状態に戻る
• ローディング：認証に時間がかかる場合の待機表示
• 選択後の状態：選んだ注文と他の注文で、無効化の見え方を変える
• 情報量の可変：商品は1点のみ表示し、2点以上は「他n点」で展開。枠を超える場合は枠内スクロール
• スマートフォン：キーボード表示時にチャット枠を最大化、注文カードは横スクロールに変更

管理画面側

• 保存ボタンは変更がなければ無効。ホバー時にツールチップで理由を出す
• 未保存のままページを離れようとした場合は確認モーダル
• 文字数超過時は保存不可
• 「使う」→「使わない」に切り替えても、設定内容は保持する。再び「使う」にしたとき、以前の入力が戻る

最後の一点は、一度オフにしても、再びオンにしたときに前回の設定が残っているほうがよいと考えたためです。機能を使わないことと、設定を捨てることは別だと整理しました。

注文キャンセルのような機能を追加していくと、管理画面の項目数が増えていきます。新機能を足すこと自体が、別の問題を作るという状況でした。ページタイトルから何ができる場所かイメージしにくく専門用語に感じる、項目数が増えて判断しづらい、ナビの幅があり情報量の多い画面で見づらい——という課題です。

名前がそのまま機能の説明になっている状態を目指しました。

項目を並べ替えるのではなく、利用者の目的でまとめ直しました。チャットセッティング ／ チャットの公開 ／ チャットの確認。

実施のタイミングも設計に含めています。ユーザーが操作に慣れる前に直すと決めました。慣れた後の変更は、学習し直すコストを利用者に払わせることになるからです。