เนื้อหา
- 01. กำหนดบุคลิกภาพ
- 02. ใช้ RiveScript
- 03. สร้างสมองของบอทของคุณ
- 04. ออกแบบเสียง
- 05. ส่งคำขอ
- 06. อย่ากลัวแชทบอท
ในช่วงกลางทศวรรษ 2000 ตัวแทนเสมือนจริงและแชทบอทฝ่ายบริการลูกค้าได้รับคำชมเชยมากมายแม้ว่าพวกเขาจะไม่ได้พูดคุยกันมากนักและภายใต้ประทุนพวกเขาเป็นเพียงการแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์
ปัจจุบันแม้ว่าจะมีตัวอย่างของ 'AI ที่อ่อนแอ' จำนวนมาก (รวมถึง Siri, Alexa, เครื่องมือค้นหาเว็บ, ตัวแปลอัตโนมัติและการจดจำใบหน้า) และหัวข้ออื่น ๆ เช่นการออกแบบเว็บที่ตอบสนองต่อการตอบสนองกำลังทำให้ไฟแก็ซแชทบอทยังคงก่อให้เกิดความปั่นป่วน . ด้วยการลงทุนครั้งใหญ่จาก บริษัท ใหญ่ ๆ ยังมีโอกาสอีกมากที่จะแฮ็กอินเทอร์เฟซการสนทนาในอนาคต
- วิธีออกแบบประสบการณ์แชทบอท
บางครั้งพวกเขาได้รับชื่อเสียงที่ไม่ดี แต่แชทบอทก็มีประโยชน์ พวกเขาไม่จำเป็นต้องรู้สึกเหมือนเป็นการแทนที่พื้นฐานสำหรับเว็บฟอร์มมาตรฐานโดยที่ผู้ใช้กรอกข้อมูลในช่องป้อนข้อมูลและรอการตรวจสอบความถูกต้อง แต่สามารถมอบประสบการณ์การสนทนาได้
โดยพื้นฐานแล้วเรากำลังปรับปรุงประสบการณ์ของผู้ใช้ให้รู้สึกเป็นธรรมชาติมากขึ้นเช่นการสนทนากับผู้เชี่ยวชาญหรือเพื่อนแทนที่จะใช้การชี้และคลิกบนเว็บเบราว์เซอร์หรือท่าทางสัมผัสบนมือถือ จุดมุ่งหมายคือด้วยการให้การตอบสนองตามบริบทอย่างเห็นอกเห็นใจเทคโนโลยีนี้จะฝังอยู่ในชีวิตของผู้คนโดยตรง
ดูวิดีโอด้านล่างหรืออ่านเพื่อค้นพบวิธีที่ใช้ได้จริงในการออกแบบและสร้างแชทบอทโดยอาศัยแอปพลิเคชันที่ได้รับจริงจากโครงการในแนวทางปฏิบัติในการออกแบบบริการ
01. กำหนดบุคลิกภาพ
เนื่องจากแนวทางปฏิบัตินี้ให้บริการสมาชิกกว่า 110,000 คนทั่วโลกเป้าหมายคือการจัดเตรียมอินเทอร์เฟซที่รวดเร็วสะดวกและเป็นธรรมชาติซึ่งผู้มีส่วนได้ส่วนเสียภายในสามารถร้องขอบริการดิจิทัลที่มีประสิทธิภาพแทนที่จะต้องกรอกแบบฟอร์มที่สับสน
ขั้นตอนแรกคือการสร้างบุคลิกภาพของแชทบ็อตเนื่องจากจะเป็นตัวแทนของทีมออกแบบบริการต่อผู้มีส่วนได้ส่วนเสีย เราสร้างขึ้นจากผลงานด้านการออกแบบของ Aarron Walter สิ่งนี้ช่วยให้ทีมของเราพัฒนาลักษณะบุคลิกภาพของบอทได้อย่างมากซึ่งจะกำหนดข้อความสำหรับคำทักทายข้อผิดพลาดและความคิดเห็นของผู้ใช้
นี่เป็นขั้นตอนที่ละเอียดอ่อนเนื่องจากมีผลต่อการรับรู้ขององค์กร เพื่อให้แน่ใจว่าเรามีข้อมูลมากที่สุดเท่าที่จะเป็นไปได้เราจึงจัดตั้งเวิร์กช็อปสำหรับผู้มีส่วนได้ส่วนเสียในทันทีเพื่อตอกย้ำบุคลิกสีตัวอักษรภาพและโฟลว์ของผู้ใช้ที่เหมาะสมเมื่อมีส่วนร่วมกับบอท
หลังจากที่เราได้รับการอนุมัติที่จำเป็นทั้งหมดรวมถึงการหาที่ปรึกษาทางกฎหมายแล้วเราได้กำหนดที่จะแปลงแบบฟอร์มคำขอเก่า ๆ เป็นชุดคำถามย้อนกลับซึ่งเลียนแบบการสนทนาระหว่างผู้มีส่วนได้ส่วนเสียและตัวแทนของทีมบริการออกแบบของเรา
02. ใช้ RiveScript
เรารู้ดีว่าเราไม่ต้องการเจาะลึกภาษามาร์กอัป AI สำหรับส่วนการประมวลผลมากเกินไปเราแค่ต้องการมากพอที่จะเริ่มต้นประสบการณ์นี้
RiveScript เป็น chatbot API แบบธรรมดาที่ง่ายพอที่จะเรียนรู้และตอบสนองความต้องการของเรา ภายในสองสามวันเรามีตรรกะในการรับคำขอโครงการจากบอทและแยกวิเคราะห์ด้วยตรรกะทางธุรกิจเพียงพอที่จะตรวจสอบและจัดหมวดหมู่เพื่อให้สามารถส่งผ่านบริการ JSON REST ไปยังคิวการกำหนดโครงการภายในที่เหมาะสมได้
หากต้องการให้ chatbot พื้นฐานทำงานให้ไปที่ repo RiveScript โคลนและติดตั้งการอ้างอิงโหนดมาตรฐานทั้งหมด ใน repo คุณยังสามารถรับรสชาติของการโต้ตอบที่คุณสามารถเพิ่มด้วยตัวอย่างต่างๆ
จากนั้นเรียกใช้โฟลเดอร์เว็บไคลเอ็นต์ซึ่งจะเปลี่ยนบอทให้เป็นเว็บเพจโดยเรียกใช้เซิร์ฟเวอร์ Grunt พื้นฐาน ณ จุดนี้คุณสามารถเพิ่มประสบการณ์ให้เหมาะกับความต้องการของคุณ
03. สร้างสมองของบอทของคุณ
ขั้นตอนต่อไปคือการสร้าง "สมอง" ของบอทของเรา สิ่งนี้ระบุไว้ในไฟล์ที่มีนามสกุล. RIVE และโชคดีที่ RiveScript มาพร้อมกับการโต้ตอบพื้นฐานนอกกรอบแล้ว (ตัวอย่างเช่นคำถามเช่น 'คุณชื่ออะไร', 'คุณอายุเท่าไหร่?' และ 'คุณอายุเท่าไร สีที่ชอบ? ').
เมื่อคุณเริ่มต้นแอปเว็บไคลเอ็นต์โดยใช้คำสั่ง Node ที่เหมาะสมไฟล์ HTML จะได้รับคำสั่งให้โหลดสิ่งเหล่านี้.RIVE ไฟล์
ต่อไปเราต้องสร้างส่วนของสมองของแชทบ็อตที่จะจัดการกับคำขอโครงการ เป้าหมายหลักของเราคือการแปลงคำถามเกี่ยวกับงานโครงการที่เลือกให้เป็นการสนทนาปกติ
ตัวอย่างเช่น:
- สวัสดีเราจะช่วยได้อย่างไร?
- เยี่ยมมากเราต้องเริ่มเร็วแค่ไหน?
- ช่วยบอกคร่าวๆเกี่ยวกับงบประมาณของคุณได้ไหม
- บอกข้อมูลเพิ่มเติมเกี่ยวกับโครงการของคุณ ...
- คุณรู้จักเราได้อย่างไร?
แบบฟอร์มเว็บที่สามารถเข้าถึงได้ทั่วไปจะมีลักษณะดังนี้:
form action = ""> fieldset> legend> Request Type: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> ตัวเลือก 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> ตัวเลือก 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> เลเบลสำหรับ = "option-three"> ตัวเลือก 3 / label> br> / fieldset > fieldset> ตำนาน> ไทม์ไลน์: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 month / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 เดือน / label> br> input id = "four-plus-months" type = "radio" name = "request- timeline" value = "four-plus-months"> ป้ายกำกับสำหรับ = "four-plus-months"> 4+ เดือน / label> br> / fieldset> br> label for = "request-budget"> Budget Information / label> br> textarea id = "request-budget" name = "request-budget-text" row = "10" cols = "30"> / textarea> br> label for = "request-description"> Project Description / label> br> textarea id = "request-description" name = "request- description-text" row = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" row = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>
ด้วยรูปแบบเว็บเราคุ้นเคยกับรูปแบบบางอย่างเมื่อคุณคลิกปุ่มส่งข้อมูลแบบฟอร์มทั้งหมดจะถูกส่งไปยังหน้าอื่นที่มีการประมวลผลคำขอจากนั้นจึงมีแนวโน้มว่าหน้าขอบคุณหน้าด้าน ๆ จะปรากฏขึ้น
ด้วยแชทบอทเราสามารถโต้ตอบในการส่งคำขอและทำให้มีความหมายมากขึ้น
04. ออกแบบเสียง
ในการแปลงแบบฟอร์มนี้เป็นอินเทอร์เฟซผู้ใช้แบบสนทนาที่ให้บริการในเว็บไคลเอ็นต์ chatbot ของ RiveScript เราจำเป็นต้องแปลงสถาปัตยกรรมข้อมูลจากแบบแข็งเป็นแบบไหล หรือป้ายชื่อฟิลด์ลงในสตริง UI
ลองพิจารณาป้ายกำกับช่องที่สามารถเข้าถึงได้และโทนคำถามที่เกี่ยวข้อง:
- คำขอ: เราจะช่วยได้อย่างไร? ไม่แน่ใจ? คุณรังเกียจไหมถ้าฉันถามคำถามสองสามข้อ
- เส้นเวลา: เราต้องเริ่มต้นเร็วแค่ไหน?
- ข้อมูลงบประมาณ: ช่วยบอกคร่าวๆเกี่ยวกับงบประมาณของคุณได้ไหม
- รายละเอียดโครงการ: โอเคคุณสามารถบอกสรุปปัญหาที่จะแก้ไขได้หรือไม่?
- อ้างอิง: นอกจากนี้ใครแนะนำคุณให้เรา?
ต่อไปเราต้องแปลงโค้ดของเว็บฟอร์มเป็นสคริปต์ AI ตามตรรกะการประมวลผลที่เรียนรู้ได้มากของ RiveScript สำหรับการสนทนาสองทาง:
- เราจะช่วยได้อย่างไร? + *% เราจะช่วยได้อย่างไร - ตั้งค่าพื้นที่ = varSure คุณรังเกียจไหมถ้าฉันถามคำถามสองสามข้อ + *% คุณแน่ใจหรือไม่หากฉันถามคำถามสองสามข้อ - ฉันต้องเริ่มคำขอนี้เร็วแค่ไหน? + *% ฉันต้องเริ่มคำขอนี้เร็วแค่ไหน - ตั้งเวลา = var คุณช่วยบอกงบประมาณคร่าวๆได้ไหม + *% คุณช่วยบอกคร่าวๆเกี่ยวกับงบประมาณของคุณได้ไหม - ตั้งงบประมาณ = varOK คุณช่วยบอกสรุปปัญหาที่จะแก้ไของค์ประกอบและสภาพแวดล้อมที่ได้รับผลกระทบหรือคำอธิบายโดยรวมได้ไหม + *% ตกลงคุณช่วยบอกข้อมูลสรุปของปัญหาที่จะแก้ไขส่วนประกอบและสภาพแวดล้อมที่ได้รับผลกระทบหรือคำอธิบายโดยรวม - set project = var นอกจากนี้ใครแนะนำคุณให้เรา? + *% และใครแนะนำคุณมาหาเรา - ตั้งค่า referal = vargreat นี่คือสิ่งที่ฉันได้รับจนถึงตอนนี้: n บริการที่จำเป็น: รับพื้นที่> n ต้องเริ่ม: รับเมื่อ> n งบประมาณคร่าวๆ: รับงบประมาณ> n เกี่ยวกับโครงการของคุณ: รับโครงการ> n อ้างอิงโดย: รับการอ้างอิง> n และจะติดต่อกลับในไม่ช้ามีอะไรที่ฉันสามารถช่วยคุณได้ในวันนี้หรือไม่? โทร> รับพื้นที่> รับเมื่อ> รับงบประมาณ> รับโครงการ> รับการอ้างอิง> / โทร>
05. ส่งคำขอ
ในทางตรงกันข้ามกับตัวแปรรูปแบบมาตรฐานที่ถูกส่งไปยังเพจหรือบริการอื่นเพื่อประมวลผลแชทบอทสามารถตรวจสอบและส่งข้อมูลที่ผู้ใช้ป้อนในหน้าต่างแชท (หรือพูด) ได้ทันทีซึ่งหมายความว่าผู้ใช้สามารถกลับมาดูค่าที่ป้อนก่อนหน้านี้ได้อย่างง่ายดาย
เราจำเป็นต้องส่งคำขอของผู้ใช้ที่ป้อนใน UI ของ chatbot ผ่าน JSON REST API ไปยังเซิร์ฟเวอร์ภารกิจโครงการภายนอก
ใน RiveScript-js เรามีอิสระที่จะใช้ประโยชน์จากไฟล์ XMLHttpRequest คัดค้านในการส่งคำขอเกือบจะพร้อมกันเนื่องจากผู้ใช้ป้อนข้อมูล:
> วัตถุไอดี javascript var http = XMLHttpRequest ใหม่ (); var a = rs.getUservar (rs.currentUser (), "พื้นที่"); var b = rs.getUservar (rs.currentUser (), "เมื่อ"); var c = rs.getUservar (rs.currentUser (), "งบประมาณ"); var d = rs.getUservar (rs.currentUser (), "โครงการ"); var e = rs.getUservar (rs.currentUser (), "อ้างอิง"); var url = "http: // localhost: 3000 / ส่ง"; var params = "พื้นที่ =" + a + "& เมื่อ =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (พารามิเตอร์); http.open ("POST", url, true); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("การเชื่อมต่อ", "ปิด"); http.onreadystatechange = function () {// เรียกใช้ฟังก์ชันเมื่อสถานะเปลี่ยนไป ถ้า (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (พารามิเตอร์); วัตถุ
06. อย่ากลัวแชทบอท
ในไม่ช้าวิธีการโต้ตอบกับคอมพิวเตอร์เพื่อรับข้อมูลในปัจจุบันจะมอบให้กับเทคโนโลยีที่ใช้ AI เช่นแชทบอทที่ซึ่งผู้คนสามารถสั่งงานด้วยเสียงง่ายๆอย่างที่เราเคยเห็นในเทคโนโลยีเช่น Amazon Echo และ Google Home
ชุมชนการออกแบบเว็บไซต์ไม่จำเป็นต้องกลัวเราทุกคนควรยอมรับคุณค่าที่เพิ่มขึ้นของเทคโนโลยีใหม่นี้
อาจเป็นตัวเปลี่ยนเกมสำหรับ บริษัท ที่ทำงานโดยนำเสนอบริการลูกค้าที่ปรับขนาดได้อย่างเต็มที่และปรับปรุงข้อมูลข่าวสารของลูกค้า
เดิมบทความนี้มีอยู่ในนิตยสารสุทธินิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบและพัฒนาเว็บไซต์ สมัครสมาชิกที่นี่.
