כיצד לבנות ממשק צ'טבוט

תוֹכֶן

• 01. קבע אישיות
• 02. השתמש ב- RiveScript
• 03. צור את המוח של הבוט שלך
• 04. לעצב קול
• 05. בקש הגשה
• 06. אל תפחד מהצ'ט-בוט

באמצע שנות האלפיים סוכנים וירטואליים וצ'אט-בוטים בשירות לקוחות זכו להערצה רבה, למרות שהם לא היו מאוד משוחחים, ומתחת למכסה המנוע הם היו מורכבים רק מחילופי נתונים עם שרתי אינטרנט.

בימינו, למרות שקיים מספר עצום של דוגמאות ל'בינה מלאכותית חלשה '(כולל סירי, אלקסה, מנועי חיפוש באינטרנט, מתרגמים אוטומטיים וזיהוי פנים) ונושאים אחרים כמו עיצוב אתרים רספונסיביים מציפים את אור הזרקורים, צ'ט-בוטים עדיין מעוררים סערה . עם השקעה גדולה של חברות גדולות, נותרו שפע של הזדמנויות לפרוץ את ממשקי השיחה של העתיד.

• כיצד לעצב חווית צ'טבוט

לפעמים הם זוכים למוניטין רע, אך צ'ט-בוטים יכולים להיות שימושיים. הם לא צריכים להרגיש תחליף בסיסי לטופס אינטרנט סטנדרטי, שבו המשתמש ממלא שדות קלט ומחכה לאימות - הם יכולים לספק חווית שיחה.

בעיקרון אנו משפרים את חוויית המשתמש כדי להרגיש טבעית יותר, כמו לשוחח עם מומחה או חבר, במקום הצבעות-קליקים בדפדפן האינטרנט או מחוות ניידות. המטרה היא שעל ידי מתן תגובות אמפתיות והקשרתיות, טכנולוגיה זו תוטמע ישירות בחייהם של אנשים.

צפו בסרטון למטה או קראו הלאה כדי לגלות דרך מעשית לתכנן ולבנות צ'ט-בוט, בהתבסס על יישום ממש לקליטת פרויקטים בפרקטיקה של עיצוב שירות.

01. קבע אישיות

מכיוון שפרקטיקה זו משרתת יותר מ -110,000 חברים ברחבי העולם, המטרה הייתה לספק ממשק מהיר, נוח וטבעי באמצעותו יכולים בעלי העניין הפנימיים לבקש שירותים דיגיטליים יעילים, במקום שיהיה עליהם למלא טפסים מבלבלים.

הצעד הראשון היה לבסס את אישיותו של הצ'ט-בוט, מכיוון שזה ייצג את קולו של צוות עיצוב השירות בפני בעלי העניין שלו. בנינו על עבודתו המכוונת של אהרון וולטר על פרסונות עיצוב. זה מאוד עזר לצוות שלנו לפתח את תכונות האישיות של הבוט, שקבעו אז את המסרים לברכות, שגיאות ומשוב משתמשים.

זהו שלב עדין, שכן הוא משפיע על האופן בו הארגון נתפס. כדי לוודא שיש לנו מידע רב ככל האפשר, הקמנו מיד סדנאות של בעלי עניין כדי למסמר את האישיות, הצבע, הטיפוגרפיה, הדימויים והזרם המשתמשים המתאימים בעת העיסוק בבוט.

לאחר שקיבלנו את כל האישורים הנדרשים - כולל פנייה לייעוץ משפטי - יצאנו להמיר טפסי בקשה ארכאיים לסדרת שאלות הלוך ושוב המדמה שיחה בין בעלי העניין לנציג צוות שירותי העיצוב שלנו.

02. השתמש ב- RiveScript

ידענו שאנחנו לא רוצים להעמיק יותר מדי בשפת הסימון של AI עבור חלק העיבוד - היינו צריכים מספיק כדי להתחיל את החוויה.

RiveScript הוא ממשק API פשוט של chatbot וקל מספיק ללמוד ולספק לצרכים שלנו. תוך מספר ימים היה לנו ההיגיון לקלוט בקשת פרויקט מהבוט, ולנתח אותה עם מספיק לוגיקה עסקית כדי לאמת ולסווג אותה כדי שתוכל להישלח באמצעות שירותי JSON REST לתור המשימות הפנימי המתאים של הפרויקט.

כדי שהצ'ט-בוט הבסיסי הזה יעבוד, עבור אל ה- RiveScript repo, שיבט אותו והתקן את כל תלות הצומת הסטנדרטית. ברפיון תוכלו גם לטעום מהאינטראקציות שתוכלו להוסיף עם קטעי הדוגמה השונים.

לאחר מכן, הפעל את תיקיית לקוח האינטרנט, שהופכת את הבוט לדף אינטרנט על ידי הפעלת שרת Grunt בסיסי. בשלב זה תוכלו לשפר את החוויה שתתאים לצרכים שלכם.

03. צור את המוח של הבוט שלך

השלב הבא הוא ליצור את 'המוח' של הבוט שלנו. זה מצוין בקבצים עם סיומת .RIVE, ולמרבה המזל RiveScript כבר מגיע עם אינטראקציות בסיסיות מהקופסה (למשל, שאלות כמו 'איך קוראים לך?', 'בן כמה אתה?' ו'מה אתה צבע אהוב?').

כאשר אתה יוזם את אפליקציית לקוח האינטרנט באמצעות הפקודה הנכונה של Node, קובץ ה- HTML מורה לטעון אותם.לִבקוֹעַ קבצים.

בשלב הבא עלינו ליצור את החלק במוח הצ'ט-בוט שלנו שיעסוק בבקשות הפרויקט. המטרה העיקרית שלנו היא להמיר מבחר של שאלות על כניסת משימות לפרויקט לשיחה רגילה.

אז, למשל:

• שלום, איך אנחנו יכולים לעזור?
• נהדר, תוך כמה זמן אנחנו צריכים להתחיל?
• אתה יכול לתת לי מושג גס לגבי התקציב שלך?
• ספר לי עוד על הפרויקט שלך ...
• איך שמעת עלינו?

טופס אינטרנט טיפוסי נגיש ייראה כך:

טופס פעולה = ""> ערכת שדות> אגדה> סוג בקשה: / אגדה> קלט id = "option-one" type = "radio" name = "type-request" value = "option-one"> תווית עבור = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> option 2 / תווית> br> קלט id = "אפשרות שלוש" סוג = "רדיו" שם = "סוג בקשה" ערך = "אפשרות שלוש"> תווית עבור = "אפשרות שלוש"> אפשרות 3 / תווית> br> / ערכת שדות > ערכת שדות> אגדה> ציר זמן: / אגדה> קלט id = "חודש" סוג = "רדיו" שם = "בקשה-ציר זמן" value = "חודש"> תווית עבור = "חודש"> חודש / תווית> br> קלט id = "חודש ושלושה חודשים" סוג = "רדיו" שם = "בקשה - ציר זמן" ערך = "חודש ושלושה חודשים"> תווית למשך = "חודש"> 1-3 חודשים / תווית> br> קלט id = "ארבעה פלוס חודשים" סוג = "רדיו" שם = "בקשה- ציר זמן" ערך = "ארבעה פלוס חודשים"> תווית עבור = "ארבעה פלוס חודשים"> 4+ חודשים / label> br> / fieldset> br> label for = "request-budget"> מידע על תקציב / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> תיאור הפרויקט / תווית> br> textarea id = "request-description" name = "request- תיאור-טקסט" שורות = "10" cols = "30"> / textarea > br> תווית עבור = "בקשה-הפניה"> הפניה / תווית> br> textarea id = "request-reference" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > סוג קלט = "הגש" value = "הגש"> / טופס>

עם טפסים מקוונים אנו מכירים מאוד דפוסים מסוימים: אתה לוחץ על כפתור השליחה, כל נתוני הטופס נשלחים לעמוד אחר בו מעובדת הבקשה ואז קרוב לוודאי שצץ דף תודה חצוף.

בעזרת צ'אט בוטים אנו יכולים לקחת את האינטראקציה של הגשת בקשה ולהפוך אותה למשמעותית יותר.

04. לעצב קול

כדי להמיר טופס זה לממשק משתמש שיחתי המוגש בלקוח האינטרנט צ'אט-בוט של RiveScript, עלינו להמיר את ארכיטקטורת המידע מקשיחה לנוזל; או תוויות שדה למחרוזות ממשק משתמש.

בואו ניקח בחשבון כמה תוויות שדה נגישות, וטון השאלה שלהן קשור:

• בַּקָשָׁה: איך אנחנו יכולים לעזור? לא בטוח? אכפת לך שאשאל כמה שאלות?
• ציר זמן: תוך כמה זמן אנחנו צריכים להתחיל?
• מידע על התקציב: אתה יכול לתת לי מושג גס לגבי התקציב שלך?
• תיאור פרויקט: בסדר, אתה יכול לספר לי סיכום הבעיה שיש לפתור?
• התייחסות: כמו כן, מי הפנה אותך אלינו?

בשלב הבא עלינו להמיר את הקוד של טופס האינטרנט לסקריפט AI, בעקבות לוגיקת העיבוד המלומדת מאוד של RiveScript לשיחות דו-כיווניות:

- איך אנחנו יכולים לעזור? + *% איך אנחנו יכולים לעזור - להגדיר אזורים = varSure, אכפת לך שאשאל כמה שאלות? + *% בטוח אכפת לך אם אני שואל כמה שאלות - תוך כמה זמן אני צריך להתחיל בקשה זו? + *% תוך כמה זמן אני צריך להתחיל בקשה זו - הגדר מתי = var האם אתה יכול לתת לי מושג גס לגבי התקציב שלך? + *% האם אתה יכול לתת לי מושג גס לגבי התקציב שלך - הגדר תקציב = varOK, אתה יכול לספר לי סיכום הבעיה שיש לפתור, רכיבים וסביבות המושפעות, או תיאור כולל? + *% בסדר אתה יכול להגיד לי סיכום של הבעיה שיש לפתור רכיבים וסביבות המושפעות מהם או תיאור כולל - הגדר פרויקט = var גם מי הפנה אותך אלינו? + *% גם מי שהפנה אותך אלינו - הגדר הפניה = גדולה זה מה שקיבלתי עד כה: n שירותים נדרשים: קבל אזורים> n צריך להתחיל: קבל מתי> n תקציב גס: קבל תקציב> n על הפרויקט שלך: קבל פרויקט> n הפניה מאת: קבל הפניה> n ויצור קשר בקרוב האם יש עוד משהו שאוכל לעזור לך היום? שיחה> צריכת קבל אזורים> קבל מתי> קבל תקציב> קבל פרויקט> קבל הפניה> / התקשר>

05. בקש הגשה

בניגוד למשתני טפסים סטנדרטיים הנשלחים לדף או לשירות אחר לעיבוד, צ'ט-בוטים יכולים לאמת ולהגיש מידע שהוזן על-ידי המשתמש בחלון צ'אט (או דיבור) באופן מיידי, מה שאומר שמשתמשים יכולים גם לבקר מחדש בערכים שהוזנו בעבר בקלות.

היינו צריכים לשלוח את בקשת המשתמש שהוזנה בממשק המשתמש של צ'ט-בוט דרך ה- 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 / send"; var params = "areas =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& הפניה =" + e; console.log (params); http.open ("POST", url, true); http.setRequestHeader ("סוג תוכן", "application / x- www-form-urlencoded"); http.setRequestHeader ("חיבור", "סגור"); http.onreadystatechange = function () {// התקשר לפונקציה כאשר המצב משתנה. אם (http.readyState == 4 && http.status == 200) {התראה (http.responseText); }} http.send (params); לְהִתְנַגֵד

06. אל תפחד מהצ'ט-בוט

בקרוב, דרכים עכשוויות לאינטראקציה עם מחשבים להשגת מידע ייכנעו לטכנולוגיה מבוססת AI כמו צ'ט-בוטים, שם אנשים פשוט מבצעים פקודות קוליות פשוטות, כמו שראינו בטכנולוגיה כמו Amazon Echo ו- Google Home.

קהילת עיצוב אתרים לא צריכה לחשוש - כולנו צריכים לאמץ את הערך המוסף של הטכנולוגיה החדשה הזו.

זה יכול להיות מחליף משחק עבור החברות שהוא עובד עבורו, ומציע שירות לקוחות מדרגי לחלוטין ושיפור מודיעין הלקוחות.

מאמר זה הוצג במקור במגזין נטו, המגזין הנמכר ביותר בעולם עבור מעצבי אתרים ומפתחי אינטרנט. הירשם כאן.