Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Microinteractions on chat UI ( and chatbot ) / UX JAM 19 presentation

1,679 views

Published on

a presentation material of UX JAM event
https://medium.com/@yuheiwata/737fd5bd8fee

チャットのマイクロインタラクションとボット

Published in: Design
  • Be the first to comment

Microinteractions on chat UI ( and chatbot ) / UX JAM 19 presentation

  1. 1. 2016/10/12(水) UX JAM 12 @ 株式会社オロ Microinteractions on chat UI and 👽 Yuhey IWATA 2017/07/20(木) UX JAM 19 @ GMO Yours
  2. 2. みなさんチャット 好きですか? 2
  3. 3. チャットの目的が変わってきた コミュニケーションであることに変わりはない 3https://techcrunch.com/2017/03/02/google-is-still-trying-to-make-allo-happen/
  4. 4. チャットの目的が変わってきた コミュニケーションであることに変わりはない 4 👨 👩 👨 👩 👽 🐼 人 人 人 人 CPUキャラ デバイス/Web 🏢 企業
  5. 5. チャットのUIをみてみましょう 5
  6. 6. よくあるチャットのUIと要素 コンテンツ ◆ テキスト ◆ 画像・動画等のメディア ◆ テンプレートに基づく付加情報 タイミング ◆ 返信がくるまでの時間 ◆ タイピングしている時間 ◆ 既読がつくまでの時間 ステータス ◆ 入力中表示 ◆ 既読表示 ◆ オンライン表示 6 ボタン/チケット/位置情報/etc.
  7. 7. コンテンツ ◆ テキスト ◆ 画像・動画等のメディア ◆ テンプレートに基づく付加情報 タイミング ◆ 返信がくるまでの時間 ◆ タイピングしている時間 ◆ 既読がつくまでの時間 ステータス ◆ 入力中表示 ◆ 既読表示 ◆ オンライン表示 ボタン/チケット/位置情報/etc. よくあるチャットのUIと要素 7 機械学習でごりごり頑張られている
  8. 8. コンテンツ ◆ テキスト ◆ 画像・動画等のメディア ◆ テンプレートに基づく付加情報 タイミング ◆ 返信がくるまでの時間 ◆ タイピングしている時間 ◆ 既読がつくまでの時間 ステータス ◆ 入力中表示 ◆ 既読表示 ◆ オンライン表示 ボタン/チケット/位置情報/etc. よくあるチャットのUIと要素 8こっちも頑張らないとバランス悪い
  9. 9. 👨 - 👩 特有のタイムラグ 入力中表示 9 既読表示
  10. 10. より人間らしさを強調できそう 10
  11. 11. サービス毎にどんな違いがあるか? 11
  12. 12. 既読表示あり 各チャットサービスの状況 12 ※2017年7月時点  国内版の場合 入力中表示あり 入力中表示なし 既読表示なし
  13. 13.    のBOTで実験してみる 13
  14. 14. Facebook Messengerで見せかける 14 Sender Actions https://developers.facebook.com/docs/messenger-platform/send-api-reference/sender-actions 送信APIペイロードのsender_actionで色々できる
  15. 15. Facebook Messengerで見せかける 15 Facebook messenger API bot : “Typing bubble” “ indicator bubble” https://stackoverflow.com/questions/36887919/facebook-messenger-api-bot-typing-bubble-indicator-bubble { "recipient":{ "id":"USER_ID" }, "sender_action":"typing_on" // 20秒間入力中 } { "recipient":{ "id":"USER_ID" }, “sender_action”:"mark_seen" // 既読付ける } 送信APIにsender_actionを埋め込んでPOST するだけ 入力中にする 一番下まで既読にする
  16. 16. BOT👽に意思決定の時間を付与 各判断を遅延させると それっぽくなる 16 入力するか? 既読するか? 送信するか? 未読スルー 既読スルー 焦らし系 既読スルー Yes Yes Yes メッセージ受信 メッセージ送信 No No No mark_seen typing_on message
  17. 17. 被験者4名に対して実験してみた 日曜13時に渋谷デートの約束を取り付けたあなた。しかし当日より によって寝坊し、待ちに待った約束に遅れそうだ!あなたは山手線 の遅延を理由に、1時間遅れることを相手に伝える。しかし相手か らの返事はなかった…。 検証方法 17 👨「おはよう!ごめん…山手線遅延してて遅れております…🙏」 👽「おはようー!どのくらいになりそ?✨」 👨「14時くらいになりそう…ごめんね!!」 👽「りょ」 👽(既読して何かを入力しようとするが、書かない) 👨「ごめん…!なるべく急ぐね!💦」 👽(既読のみ) 1. 意思決定時間を付与せず、入力中も既読も表示しない(メッセージポスト時に自動的に既読) 2. 意思決定時間を付与しつつ、入力中も既読も表示する
  18. 18. 18
  19. 19. まとめ:場面に応じたBOT👽になろう 19 機能的 感情的 シリアスな場面では より人間っぽく感じる 人間的な内容なのに レス早すぎて気持ち悪いすぐに情報をくれる 読んでるところまで既読表示 よくあるBOT より人間的な BOT 尋常じゃない早さで既読つく 返信がものすごく早い レス早くて嬉しい 一見ローディングと同じ役割で 入力中を表示する どきどきする こわかった 情報ほしいときにはウザい 微妙にレスが遅い 検証結果も含めて、機能面と感情面に対する効果をヒアリングベースでまとめました ※様々なコンテキスト に対してより汎用的
  20. 20. Thank you :D 20 ご質問ご感想は    まで! " #

×