a presentation material of UX JAM event https://medium.com/@yuheiwata/737fd5bd8fee チャットのマイクロインタラクションとボット

1. 2016/10/12(水) UX JAM 12 @ 株式会社オロ
Microinteractions
on chat UI
and 👽
Yuhey IWATA
2017/07/20(木) UX JAM 19 @ GMO Yours

2. みなさんチャット
好きですか？
2

3. チャットの目的が変わってきた
コミュニケーションであることに変わりはない
3https://techcrunch.com/2017/03/02/google-is-still-trying-to-make-allo-happen/

4. チャットの目的が変わってきた
コミュニケーションであることに変わりはない
4
👨 👩
👨
👩
👽
🐼
人 人
人
人
CPUキャラ
デバイス／Web
🏢 企業

5. チャットのUIをみてみましょう
5

6. よくあるチャットのUIと要素
コンテンツ
◆ テキスト
◆ 画像・動画等のメディア
◆ テンプレートに基づく付加情報
タイミング
◆ 返信がくるまでの時間
◆ タイピングしている時間
◆ 既読がつくまでの時間
ステータス
◆ 入力中表示
◆ 既読表示
◆ オンライン表示
6
ボタン／チケット／位置情報／etc.

7. コンテンツ
◆ テキスト
◆ 画像・動画等のメディア
◆ テンプレートに基づく付加情報
タイミング
◆ 返信がくるまでの時間
◆ タイピングしている時間
◆ 既読がつくまでの時間
ステータス
◆ 入力中表示
◆ 既読表示
◆ オンライン表示
ボタン／チケット／位置情報／etc.
よくあるチャットのUIと要素
7
機械学習でごりごり頑張られている

8. コンテンツ
◆ テキスト
◆ 画像・動画等のメディア
◆ テンプレートに基づく付加情報
タイミング
◆ 返信がくるまでの時間
◆ タイピングしている時間
◆ 既読がつくまでの時間
ステータス
◆ 入力中表示
◆ 既読表示
◆ オンライン表示
ボタン／チケット／位置情報／etc.
よくあるチャットのUIと要素
8こっちも頑張らないとバランス悪い

9. 👨 - 👩 特有のタイムラグ
入力中表示
9
既読表示

10. より人間らしさを強調できそう
10

11. サービス毎にどんな違いがあるか？
11

12. 既読表示あり
各チャットサービスの状況
12
※2017年7月時点
国内版の場合
入力中表示あり
入力中表示なし
既読表示なし

13. のBOTで実験してみる
13

14. Facebook Messengerで見せかける
14
Sender Actions
https://developers.facebook.com/docs/messenger-platform/send-api-reference/sender-actions
送信APIペイロードのsender_actionで色々できる

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. BOT👽に意思決定の時間を付与
各判断を遅延させると
それっぽくなる
16
入力するか？
既読するか？
送信するか？
未読スルー
既読スルー
焦らし系
既読スルー
Yes
Yes
Yes
メッセージ受信
メッセージ送信
No
No
No
mark_seen
typing_on
message

17. 被験者4名に対して実験してみた
日曜13時に渋谷デートの約束を取り付けたあなた。しかし当日より
によって寝坊し、待ちに待った約束に遅れそうだ！あなたは山手線
の遅延を理由に、1時間遅れることを相手に伝える。しかし相手か
らの返事はなかった…。
検証方法
17
👨「おはよう！ごめん…山手線遅延してて遅れております…🙏」
👽「おはようー！どのくらいになりそ？✨」
👨「14時くらいになりそう…ごめんね！！」
👽「りょ」
👽（既読して何かを入力しようとするが、書かない）
👨「ごめん…！なるべく急ぐね！💦」
👽（既読のみ）
1. 意思決定時間を付与せず、入力中も既読も表示しない（メッセージポスト時に自動的に既読）
2. 意思決定時間を付与しつつ、入力中も既読も表示する

18. 18

19. まとめ:場面に応じたBOT👽になろう
19
機能的 感情的
シリアスな場面では
より人間っぽく感じる
人間的な内容なのに
レス早すぎて気持ち悪いすぐに情報をくれる
読んでるところまで既読表示
よくあるBOT
より人間的な
BOT
尋常じゃない早さで既読つく
返信がものすごく早い
レス早くて嬉しい
一見ローディングと同じ役割で
入力中を表示する
どきどきする
こわかった
情報ほしいときにはウザい
微妙にレスが遅い
検証結果も含めて、機能面と感情面に対する効果をヒアリングベースでまとめました
※様々なコンテキスト
に対してより汎用的

20. Thank you :D
20
ご質問ご感想は まで! " #