Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Forms of Bot

Design Forms of Bot

2018/06/19 【東京】Bot Developers Meetup - LINE Bot開発者の勉強会
https://line.connpass.com/event/90486/

デモ動画
https://youtu.be/iVGXsUaNf-U

525c91be370a79cab50579086a70b3d7?s=128

Niishi Kubo

June 19, 2018
Tweet

Transcript

  1.   “Botにおける入力フォーム” @n11sh1

  2. About Me 1 合同会社WVVU(ビジネスディレクター)メイン 「食 × IT」のひよっこベンチャー。設立1年目 株式会社ZYYX(エンジニア)サブ Webシステム/アプリ開発の受託会社。設立25年目 株式会社坂ノ途中(エンジニア)サブ

    京都にある野菜の流通会社。設立9年目 @n11sh1
  3. • 農家とバイヤーの受発注のやり取りにLINE Botを導入した話 • メール/電話/FAX → Botに置き換えて業務改善 • “Botにおける入力フォーム”を試行錯誤した過程とその結果 Overview

    連絡手段 農家 バイヤー 受発注システム 2
  4. 3 品目 / 品種 / サイズ / 価格 / 数量

    / 出荷可能日 例. トマト / 桃太郎トマト / 1玉200g / ¥105 / 50玉 / 月,木 入力項目
  5. 4 メッセージやり取り形式 Thinking

  6. 5 メッセージやり取り形式 入力項目・回数が多いため、煩雑になる ※ユーザーの行動パターンが限られている場合は有効 (一部データ変更・データ取得など) Thinking

  7. 6 Webフォーム形式 Thinking

  8. 7 Webフォーム形式 悪くは無いが、LINE Botの良さがあまり出ない Thinking

  9. 8 DEMO Thinking

  10. 9 • “Botを導線 / フォームはWeb”という選択肢も有りだと思う。 • フォームもBotの一部と錯覚させるような 親和性 を持たせる。 •

    デザイン • スマホらしいUI / Chatっぽい見た目 • シームレスな画面遷移 • 全画面モーダル / SPA(Single Page Application) • 入力の手間を省けるようにフロントエンドフレームワーク(Vue)活用 • 登録完了後は、PUSH通知などでLINEアプリに戻してあげる。 Summary