BotにおけるUI/UX設計ノウハウ

by Niishi Kubo

Slide 1

Slide 1 text

Bot ʹ͓͚Δ UI/UX ઃܭϊ΢ϋ΢

Slide 2

Slide 2 text

• Bot ։ൃ࣮੷ • UI/UX ઃܭϊ΢ϋ΢ • ͳͥઃܭ͕ඞཁͳͷ͔ʁ • ͲͷΑ͏ʹઃܭ͢Δ͔ʁ • Ͳ͏΍ͬͯϓϩτλΠϓΛ࡞Δ͔ʁ • ৘ใऩू TIPS ΞδΣϯμ

Slide 3

Slide 3 text

• ߹ಉձࣾWVVUʢ͏ʔͿʣ • ৽نࣄۀͷ্ཱͪ͛ • גࣜձࣾZYYXʢ͡ʔ͘͢ʣ • WebγεςϜ/ΞϓϦͷडୗ։ൃ • גࣜձࣾࡔϊ్த • ژ౎ͷ໺ࡊͷྲྀ௨ձࣾ • ੜଉ஍ • େࡕɺژ౎ɺ౦ژ • ΤϯδχΞാग़਎Ͱɺࠓ͸ϏδωεدΓͷࣄ ͯ͠Δਓ ࣗݾ঺հ @n11sh1

Slide 4

Slide 4 text

• ϓϥοτϑΥʔϜ • LINE • ໨త • ೶Ո͕Էઌͷྲྀ௨ۀऀʹग़ՙ৘ใΛڞ༗ ͢ΔͨΊʢि1ճʣ • ػೳ • ग़ՙ৘ใͷొ࿥ʢex. τϚτ10kgΛ݄,ਫ, ۚʹग़ՙͰ͖Δʣ • גࣜձࣾࡔϊ్தʹͯՔಇத ໺ࡊग़ՙ৘ใڞ༗ Bot

Slide 5

Slide 5 text

• ϓϥοτϑΥʔϜ • Slack • ໨త • *OnboardingͰ໎ࢠʹͳΓ͕ͪ ͳͷͰɺϦʔυΛͭ͘Δ • ػೳ • ৽نϝϯόʔʹɺඞਢ৘ใˍ λεΫͷ௨஌ • طଘϝϯόʔʹɺؔ࿈͢Δα ϒλεΫͷ௨஌ Welcome Bot * Onboarding ૊৫ͷҰһ΍αʔϏεͷϢʔβʔͱͯ͠৽͘͠Ճೖͨ͠ ϝϯόʔʹख΄Ͳ͖Λߦ͍ɺ׳Εͤ͞Δϓϩηεͷ͜ͱ

Slide 6

Slide 6 text

ίΠϯૹۚ גՁ ͦͷଞ

Slide 7

Slide 7 text

͖ΐ͏࿩͢಺༰ UI/UX ઃܭϊ΢ϋ΢ ॻ੶ ࣮ମݧ

Slide 8

Slide 8 text

ͳͥઃܭ͕ඞཁͳͷ͔ʁ “transparent” user experience ҹ৅ʹ࢒Βͳ͍  ࢖ͬͯ΋Β͑ͳ͍ * Amir, Shevat. : “Designing Bots: Creating Conversational Experiences”, 2017, No.673 ex. ϒϩοΫ͞ΕΔެࣜLINEΞΧ΢ϯτ

Slide 9

Slide 9 text

ͲͷΑ͏ʹઃܭ͢Δ͔ʁ શମ૾Λଊ͑Δ ࡉ෦ʹ໨Λ޲͚Δ • ϓϥοτϑΥʔϜͷಛ௃ʢར༻Ϣʔ βʔ, ఏڙAPI ͳͲʣ • ໨తˍػೳͷ໌֬Խ • ϩΰ΍໊শ • ϢʔβʔͱBotͷձ࿩ϑϩʔ • ίϯςϯπʢςΩετ, ը૾, ಈը, Ի੠, Ґஔ৘ใ, Ϙλϯʣ • AIʢࣗવݴޠॲཧʣͷಋೖɹͳͲ

Slide 10

Slide 10 text

໺ࡊग़ՙ৘ใڞ༗ Bot • ϓϥοτϑΥʔϜ • LINE • ໨త • ೶Ո͕Էઌͷྲྀ௨ۀऀʹग़ՙ৘ใΛڞ༗ ͢ΔͨΊʢि1ճʣ • ػೳ • ग़ՙ৘ใͷొ࿥ʢex. τϚτ10kgΛ݄,ਫ, ۚʹग़ՙՄೳͰ͢ɻʣ • גࣜձࣾࡔϊ్தʹͯՔಇத

Slide 11

Slide 11 text

Welcome Bot * Onboarding ૊৫ͷҰһ΍αʔϏεͷϢʔβʔͱͯ͠৽͘͠Ճೖͨ͠ ϝϯόʔʹख΄Ͳ͖Λߦ͍ɺ׳Εͤ͞Δϓϩηεͷ͜ͱ • ϓϥοτϑΥʔϜ • Slack • ໨త • *OnboardingͰ໎ࢠʹͳΓ͕ͪ ͳͷͰɺϦʔυΛͭ͘Δ • ػೳ • ৽نϝϯόʔʹɺඞਢ৘ใˍ λεΫͷ௨஌ • طଘϝϯόʔʹɺؔ࿈͢Δα ϒλεΫͷ௨஌

Slide 12

Slide 12 text

ઃܭ͢Δ ̑ষҎ߱ʹॻ͍ͯ͋Δ͔ΒಡΜͰʂ ͩͱऴΘͬͯ͠·͏ͷͰ…

Slide 13

Slide 13 text

ઃܭ͢Δ 1. Branding, personality, and human involvement 2. AI 3. The Conversation 4. Rich interactions 5. Context and memory 6. Discovery and installation 7. Engagement methods 8. Monetization * Amir, Shevat. : “Designing Bots: Creating Conversational Experiences”, 2017, No.673

Slide 14

Slide 14 text

ձ࿩ͷछྨ λεΫओಋͷձ࿩ τϐοΫओಋͷձ࿩ • ͠ΓͱΓͳͲҙਤͷͳ͍ձ࿩͕ϝΠϯ • ਖ਼֬ੑ͸ෆཁɺΉ͠Ζ༧૝֎ͷฦ౴͕ ٻΊΒΕΔ • ϧʔϧԽͮ͠Β͘AIͳͲ͕ඞཁ • C޲͚ίϯςϯπ͕ଟ͍ • ഑ୡঢ়گͷ֬ೝ, डऔ೔࣌ͷมߋ, ࠶഑ ୡґཔ • ਖ਼֬ੑ͕ٻΊΒΕΔ • ձ࿩ΛϧʔϧԽͰ͖Ε͹AIͳͲ͸ෆཁ • B޲͚, C޲͚ͲͪΒ΋

Slide 15

Slide 15 text

Onboarding ͲͪΒ͕ ࢖͍͍ͨʁ

Slide 16

Slide 16 text

Onboarding Ͳ͏ΞΫγϣϯͯ͠ྑ͍ͷ͔෼͔Βͳ͍ ʮ࠶഑ୡґཔʯͱςΩετೖྗʁ ͱΓ͋͑ͣԡͨ͠Β࣍΁ਐΊͦ͏ ࣍ճΞΫηε࣌΋࢖͑Δ

Slide 17

Slide 17 text

Onboarding νϡʔτϦΞϧಈըϦϯΫΛఴ෇ LINEΞϓϦ಺ͰYouTube࠶ੜ

Slide 18

Slide 18 text

ϧʔϧϕʔεͷձ࿩ STEP1 ૹΓঢ়൪߸Λ͖͘ STEP2 ر๬഑ୡ೔࣌Λ͖͘ STEP3 ࠷ऴ֬ೝ STEP4 มߋ׬ྃ

Slide 19

Slide 19 text

ϧʔϧϕʔεͷձ࿩ STEP3 ࠷ऴ֬ೝ STEP4 มߋ׬ྃ • ૹΓঢ়൪߸ͱر๬഑ୡ೔࣌Λಉ࣌ʹೖྗ͞ΕͨΒʁ • ഑ୡ೔࣌ʹʮຊ೔ʯ΍ʮ໷ʯͱೖྗ͞ΕͨΒʁ • ૹΓঢ়൪߸ͱر๬഑ୡ೔࣌Λٯʹೖྗ͞ΕͨΒʁ STEP1 ૹΓঢ়൪߸Λ͖͘ STEP2 ر๬഑ୡ೔࣌Λ͖͘

Slide 20

Slide 20 text

ࣗવݴޠཧղͱձ࿩ͷ؅ཧ ࣗવݴޠཧղʢNatural Language Understandingʣ Ϣʔβʔೖྗ͔ΒҙਤʢIntentʣͱΩʔϫʔυʢEntityʣΛநग़͢Δɻ ex. Intentɿ࠶഑ୡґཔ EntityɿૹΓঢ়൪߸, ر๬഑ୡ೔࣌ʢຊ೔ʹ8݄3೔ɺ໷ʹᶃ18࣌ʙ20࣌ᶄ19࣌ʙ21࣌ʣ ձ࿩ͷ؅ཧʢConversation Managementʣ நग़ͨ͠Entity͕λεΫ׬ྃͷ৚݅Λຬ͍ͨͯ͠Δ͔Ͳ͏͔ɻ ex. ر๬഑ୡ೔͔࣌͠Ϣʔβʔೖྗ͞Ε͍ͯͳ͍৔߹͸ɺૹΓঢ়൪߸ͷೖྗΛଅ͢ɻ

Slide 21

Slide 21 text

վྑޙͷձ࿩

Slide 22

Slide 22 text

Dialogﬂow https://dialogﬂow.com

Slide 23

Slide 23 text

ͦͷଞ Watson Assistant https://www.ibm.com/watson/jp-ja/developercloud/conversation.html LUIS https://www.luis.ai Amazon Lex https://aws.amazon.com/jp/lex/

Slide 24

Slide 24 text

LINE Bot Designer https://developers.line.me/ja/services/bot-designer/

Slide 25

Slide 25 text

Flex Message Simulator https://developers.line.me/console/fx/

Slide 26

Slide 26 text

Botsociety https://botsociety.io

Slide 27

Slide 27 text

Cacoo https://cacoo.com

Slide 28

Slide 28 text

৘ใऩू TIPS Chatbots Magazine https://chatbotsmagazine.com UX Collective - Bots https://uxdesign.cc/tagged/bots The UX of Chatbots http://uxofchatbots.com BotList https://botlist.co botwiki https://botwiki.org

Slide 29

Slide 29 text

·ͱΊ • ҹ৅ʹ࢒Δˍ࢖ͬͯ΋Β͏ͨΊʹઃܭ͢Δ • શମ૾Λଊ͑Δ • ద੾ͳϓϥοτϑΥʔϜΛબ୒͢Δ • ໨తˍػೳΛ໌֬ʹ͢Δ • ࡉ෦ʹ໨Λ޲͚Δ • Onboarding͕ॏཁ • ϦονίϯςϯπͰϢʔβʔΤϯήʔδϦϯάΛߴΊΔ • AIʢࣗવݴޠॲཧʣ͸MUSTͰ͸ͳ͍͕ɺUXͷ޲্ʹܨ͕Δ • Bot༻ϓϩτλΠϐϯάπʔϧͰ։ൃޮ཰UPʂ

Slide 30

Slide 30 text

Thank U