จับ UX/UI มาเป็น CJE เมื่อลองสร้าง แชทบอท (Chatbot) ครั้งแรก

NAWAPOL
2 min readJan 21, 2020

สวัสดีครับ เรียกได้ว่านี้เป็นการเขียนบทความครั้งแรกของผมเลย วันนี้ผมจะขอมาเล่าประสบการณ์ การเริ่มเป็น CJE ของ Botnoi และการสร้าง แชทบอท ให้อ่านกันครับ

Prisan Pimprasan , บอทน้อย Little bot

CJE คืออะไร ?

CJE ผมเชื่อว่าหลายๆ คน คงยังไม่รู้จักหรือคุ้นเคย กับคำนี้กันสักเท่าไหร่ครับ CJE ที่ว่านี้ มันก็คือชื่อย่อของคำว่า “Chatbot journey expert” แล้วมันหมายถึงอะไรละ แปลตรงตัวเลยครับ มันหมายถึง “ผู้คิดหรือสร้างการทำงานของแชทบอท” นั้นเอง หรือที่เรารู้จักกันโดยทั่วไปในอีกชื่อ ที่ว่า Chatbot UX นั้นแหละครั้บ

ใช่ครับผมได้เข้ามาทำหน้าที่ CJE ครั้งแรก เพราะก่อนหน้านี้หน้าที่หลักของผมก็คือ UX/UI Designer ของ Botnoi (ในส่วนนี้ทำเกี่ยวกับอะไรจะขอมาเล่าอีกครั้งในพาทร์หน้าแล้วกันครับ)

แล้ว CJE ทำอะไรบ้างละ ?

งานหลักๆ ของ CJE ของเราก็คือ วางแผน, คิดและสร้างการทำงานของ แชทบอท และการเลือกใช้ Object การแสดงผล ครับ

โดยปกติแล้วเครื่องมือที่ใช้สร้างแชทบอท มีอยู่หลายตัวให้เลือกใช้ในปัจจุบัน แต่ในครั้งนี้เราจะใช้ Botnoi chatbot tool กันครับ ซึ่ง tool ของ Botnoi นั้นมีลูกเล่นให้เล่นได้มากมาย อีกทั้งยังใช้งานง่ายในระดับหนึ่งเลยทีเดียว

โจทย์ที่เราได้ในครั้งนี้คือเราจะสร้าง แชทบอท ให้กับ BNK48 (อย่างไม่เป็นทางการ) ทีนี้เมื่อเราได้โจทย์มาแล้ว ก็ถึงคราว หน้าที่ CJE อย่างเราวิเคราะห์ปัญหา เพื่อนำมาสร้าง แชทบอทกันครับ

วิเคราะห์โจทย์

  • เราจะสร้าง แชทบอท ที่รวมเอาฟังก์ชันหลายๆ อย่างไว้ด้วยกัน เนืองจาก การติดตามดู BNK48 นั้นมีกิจกรรมหลายอย่าง ให้ได้ติดตาม ซึ่งกว่าจะไล่ดูครบทุก platform ก็เป็นปัญหาพอตัว ผมจึงได้ลองเอามาแบ่งเป็เมนูและเมนูย่อยต่างๆ ได้ตามนี้ครับ
เริ่ม วิเคราะห์ปัญหา และสิ่งที่เราอยากให้มีใน แชทบอท ของเรา
A. เมนูที่วิเคราะห์ออกมาได้
B. Chatbot tool ของ Botnoi

เมื่อวิเคราะห์เสร็จแล้ว ทีนี้เรามา เริ่มคิดการแสดงผล ต่อกันเลย chatbot tool ของ Botnoi มีฟังชันก์ การแสดงผลหลายรูปแบบมากครับ ไม่ว่าจะเป็น Image, Button, Carousel, Quick reply, Voice, Richmenu, Flex และอื่นๆ ที่กำลังจะมีมาให้ใช้เรื่อยๆเลยครับ

ซึ่งแต่ละส่วนเราสามารถ สร้างมันขึ้นได้ง่ายๆเลยครับ (ในครั้งนี้ผมคงยังไม่พูดถึงวิธีใช้ tool ตัวนี้นะครับ)

การแสดงผล
เนื่องจากเป็น แชทบอท บน LINE platform ผมจึงเลือกใช้ Rich menu เป็นส่วนการแสดงผลหลักของเราก่อน เพราะเมื่อผู้ใช้เข้ามาที่บอทของเรา ก็จะเห็น Rich menu ก่อนเป็นอันดับแรก

Rich menu เหมือนเป็นเมนูหลัก ของเรา การใช้ Rich menu จะช่วยเพิ่มลูกเล่น ทำให้ Chatbot ของเราดูมีความน่าสนใจมากขึ้น

เราสามารถสร้างสรรค์ Rich menu ออกมาให้มีความสวยงาม ได้หลากหลายรูปแบบมากกว่าการใช้ Button ธรรมดา

ในส่วนของเมนูย่อย เราควรเลือกการแสดงผลให้มีความสอดคล้อง กับการเรียกใช้งานครับ เพื่อความแตกต่าง และไม่น่าเบื่อกับผู้ใช้งาน

ในเมนูย่อยนี้ผมเลือกใช้ Flex เป็น การแสดงผล หลัก เนื่องจากข้อมูลในเมนูย่อยของเราก็มีความหลากหลาย นั้นทำให้ผมตัดสินใจใช้ Flex ซึ่งสามารถปรับแต่งได้อิสระมากกว่า

สามารถทำให้แชทบอทของเรา ดูมีความน่าสนใจน่าใช้มากขึ้นไปอีก แต่ Flex เองก็มีข้อจำกัดในเรื่องของ ขนาดไฟล์ JSON เพราะถ้าหากมีขนาดใหญ่เกินไปจะไม่สามารถ แสดงผลได้

D. ตัวอย่าง Flex แสดงเมนูย่อยของแชทบอท

แชทบอทของ BNK48 นั้นผมจะเน้นไปในทางของ Click bot ซะส่วนใหญ่ เนื่องจากตัวเมนูกิจกรรมที่ค่อนข้างเยอะ บวกกับกลุ่มผู้ใช้ไม่ได้ต้องการอะไรมากไปกว่าการดูข้อมูลหรือรูปภาพต่างๆ นั้นทำให้การใช้งานของแชทบอทตัวนี้เป็นสเต็ปง่ายๆ

E. ส่วนการแสดงผลแบบ อื่นๆ

จากภาพด้านบน เป็น เมนูย่อยในเมูย่อย ที่มีการใช้ การแสดงผลที่หลากหลายขึ้น อย่างเช่น ตัวอย่างสินค้า ที่ใช้เป็น Carousel แทน ส่วนอีกทั้งสองภาพด้านข้างผมเลือกใช้ Flex อีกเช่นเดิม จะเห็นได้ว่า Flex สามารถปรับแต่งได้หลายแบบตามที่เราต้องการเลย

ครับบทความนี้ไม่มีอะไรมากครับ แค่อยากอธิบาย หลักการออกแบบแชทบอทแบบพื้นฐานง่ายๆ แบบให้เห็นภาพรวมให้ฟังครับ ในพาร์ทหน้าเราจะมาเจาะเทคนิคแต่ละส่วนของการสร้างแชทบอทกันครับ

สามารถลองกดเข้าไปเล่นแชทบอทของผมได้ที่นี้เลยครับ

https://lin.ee/adAwp52

สำหรับใครที่สนใจอยากสร้างแชทบอท สามารถติดต่อได้ที่นี้เลยครับ
http://www.botnoigroup.com/

หรือกดไลค์เพจนี้ไว้เลยครับ เพราะตอนนี้กำลังมองหา CJE หน้าใหม่ผู้ที่จะมาร่วมสร้าง แชทบอทให้กับบอทน้อย พร้อมรางวัลมากมาย อีกด้วย
https://www.facebook.com/botnoigroup/

-ขอบคุณครับ-

บทความอื่นๆ

อ่าน

--

--

NAWAPOL

UX/UI designer and chatbot journey expert (CJE). At Botnoi consulting | Email:nawapoly@botnoigroup.com