Πώς να δημιουργήσετε μια διεπαφή chatbot

Συγγραφέας: Randy Alexander
Ημερομηνία Δημιουργίας: 2 Απρίλιος 2021
Ημερομηνία Ενημέρωσης: 16 Ενδέχεται 2024
Anonim
Πώς να δημιουργήσετε το Chatbot για ιστότοπους με Builderall
Βίντεο: Πώς να δημιουργήσετε το Chatbot για ιστότοπους με Builderall

Περιεχόμενο

Στα μέσα της δεκαετίας του 2000, οι εικονικοί πράκτορες και οι συνομιλητές εξυπηρέτησης πελατών έλαβαν πολλές ερωτήσεις, παρόλο που δεν ήταν πολύ συνομιλητές, και κάτω από την κουκούλα αποτελούσαν απλώς ανταλλαγές δεδομένων με διακομιστές ιστού.

Σήμερα, παρόλο που υπάρχει ένας τεράστιος αριθμός παραδειγμάτων «αδύναμης τεχνητής νοημοσύνης» (συμπεριλαμβανομένων των Siri, Alexa, μηχανών αναζήτησης ιστού, αυτοματοποιημένων μεταφραστών και αναγνώρισης προσώπου) και άλλα θέματα όπως ο σχεδιασμός ιστοσελίδων ανταποκρίνονται στο προσκήνιο, τα chatbots εξακολουθούν να προκαλούν αναταραχή . Με μεγάλες επενδύσεις από μεγάλες εταιρείες, παραμένουν πολλές ευκαιρίες για να χαράξουν τις συνομιλίες του μέλλοντος.

  • Πώς να σχεδιάσετε μια εμπειρία chatbot

Μερικές φορές έχουν κακή φήμη, αλλά τα chatbots μπορεί να είναι χρήσιμα. Δεν χρειάζεται να αισθάνονται σαν βασική αντικατάσταση για μια τυπική φόρμα ιστού, όπου ο χρήστης συμπληρώνει πεδία εισαγωγής και περιμένει επικύρωση - μπορεί να προσφέρει μια εμπειρία συνομιλίας.


Ουσιαστικά, βελτιώνουμε την εμπειρία του χρήστη για να αισθανόμαστε πιο φυσικοί, όπως η συνομιλία με έναν ειδικό ή έναν φίλο, αντί των σημείων και των κλικ του προγράμματος περιήγησης ιστού ή των χειρονομιών για κινητά. Ο στόχος είναι ότι παρέχοντας ενσυναίσθηση, συμφραζόμενες απαντήσεις, αυτή η τεχνολογία θα ενσωματωθεί απευθείας στη ζωή των ανθρώπων.

Παρακολουθήστε το παρακάτω βίντεο ή διαβάστε για να ανακαλύψετε έναν πρακτικό τρόπο σχεδιασμού και δημιουργίας ενός chatbot, βάσει μιας πραγματικής εφαρμογής πρόσληψης έργου σε μια πρακτική σχεδιασμού υπηρεσιών.

01. Ορίστε μια προσωπικότητα

Καθώς αυτή η πρακτική εξυπηρετεί περισσότερα από 110.000 μέλη παγκοσμίως, ο στόχος ήταν να παρέχει μια γρήγορη, βολική και φυσική διεπαφή μέσω της οποίας οι εσωτερικοί ενδιαφερόμενοι θα μπορούσαν να ζητήσουν αποτελεσματικές ψηφιακές υπηρεσίες, αντί να πρέπει να συμπληρώσουν μπερδεμένες φόρμες.

Το πρώτο βήμα ήταν να καθοριστεί η προσωπικότητα του chatbot, καθώς αυτό θα αντιπροσωπεύει τη φωνή της ομάδας σχεδιασμού υπηρεσιών στους ενδιαφερόμενους. Χτίσαμε τη σπερματική εργασία του Aarron Walter σε design personas. Αυτό βοήθησε σημαντικά την ομάδα μας να αναπτύξει τα χαρακτηριστικά της προσωπικότητας του bot, τα οποία στη συνέχεια καθόρισαν τα μηνύματα για χαιρετισμούς, λάθη και σχόλια χρηστών.


Αυτό είναι ένα λεπτό στάδιο, καθώς επηρεάζει τον τρόπο με τον οποίο γίνεται αντιληπτός ο οργανισμός. Για να βεβαιωθούμε ότι είχαμε όσο το δυνατόν περισσότερες πληροφορίες, δημιουργήσαμε αμέσως εργαστήρια ενδιαφερομένων για να καλύψουμε την κατάλληλη προσωπικότητα, το χρώμα, την τυπογραφία, τις εικόνες και τη ροή του χρήστη όταν ασχολείστε με το bot.

Αφού αποκτήσαμε όλες τις απαραίτητες εγκρίσεις - συμπεριλαμβανομένης της αναζήτησης νομικού συμβούλου - ξεκινήσαμε να μετατρέπουμε τις φόρμες αρχαϊκών αιτημάτων σε μια σειρά ερωτημάτων που μιμούσαν μια συνομιλία μεταξύ των ενδιαφερόμενων μερών και ενός εκπροσώπου της ομάδας σχεδιαστικών υπηρεσιών μας.

02. Χρησιμοποιήστε το RiveScript

Γνωρίζαμε ότι δεν θέλαμε να εμβαθύνουμε στη γλώσσα σήμανσης AI για το μέρος επεξεργασίας - χρειαζόμασταν αρκετά για να ξεκινήσουμε την εμπειρία.

Το RiveScript είναι ένα απλό API chatbot που είναι αρκετά εύκολο να μάθει και επαρκεί για τις ανάγκες μας. Μέσα σε λίγες μέρες είχαμε τη λογική να πάρουμε ένα αίτημα έργου από το bot και να το αναλύσουμε με αρκετή επιχειρηματική λογική για να το επικυρώσουμε και να το κατηγοριοποιήσουμε, ώστε να μπορεί να το αποσταλεί μέσω των υπηρεσιών JSON REST στην κατάλληλη ουρά εσωτερικής εργασίας.


Για να λειτουργήσει αυτό το βασικό chatbot, κατευθυνθείτε στο repo RiveScript, κλωνοποιήστε το και εγκαταστήστε όλες τις τυπικές εξαρτήσεις κόμβων. Στο repo μπορείτε επίσης να αποκτήσετε μια γεύση από τις αλληλεπιδράσεις που μπορείτε να προσθέσετε με τα διάφορα αποσπάσματα παραδείγματος.

Στη συνέχεια, εκτελέστε το φάκελο web-client, ο οποίος μετατρέπει το bot σε ιστοσελίδα, εκτελώντας έναν βασικό διακομιστή Grunt. Σε αυτό το σημείο μπορείτε να βελτιώσετε την εμπειρία που ταιριάζει στις ανάγκες σας.

03. Δημιουργήστε τον εγκέφαλο του bot σας

Το επόμενο βήμα είναι να δημιουργήσουμε τον «εγκέφαλο» του bot μας. Αυτό καθορίζεται σε αρχεία με την επέκταση .RIVE και ευτυχώς το RiveScript διαθέτει ήδη βασικές αλληλεπιδράσεις (για παράδειγμα, ερωτήσεις όπως "Ποιο είναι το όνομά σας;", "Πόσο χρονών είστε;" και "Ποιο είναι το δικό σας; αγαπημένο χρώμα?').

Όταν ξεκινάτε την εφαρμογή web-client χρησιμοποιώντας την κατάλληλη εντολή Node, το αρχείο HTML καθοδηγείται να τα φορτώσει.ΞΕΚΟΛΛΩ αρχεία.

Στη συνέχεια πρέπει να δημιουργήσουμε το τμήμα του εγκεφάλου του chatbot που θα εξετάσει τα αιτήματα έργων. Ο κύριος στόχος μας είναι να μετατρέψουμε μια επιλογή ερωτήσεων πρόσληψης έργου σε κανονική συζήτηση.

Έτσι, για παράδειγμα:

  • Γεια σας, πώς μπορούμε να βοηθήσουμε;
  • Τέλεια, πόσο σύντομα πρέπει να ξεκινήσουμε;
  • Μπορείτε να μου δώσετε μια γενική ιδέα για τον προϋπολογισμό σας;
  • Πείτε μου περισσότερα για το έργο σας ...
  • Πως άκουσες για εμάς;

Μια τυπική προσβάσιμη φόρμα ιστού θα μοιάζει με αυτό:

form action = ""> fieldset> legend> Type Request: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label για = "option- one "> option 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"> label for = "option-three"> επιλογή 3 / ετικέτα> br> / fieldset > fieldset> legenda> Χρονολόγιο: / legenda> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 μήνα / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label για = "ένα μήνα"> 1-3 μήνες / label> br> id id = "four-plus-months" type = "radio" name = "request- timeline" value = "four-plus-months"> label για = "four-plus-months"> 4+ μήνες / label> br> / fieldset> br> label for = "request-budget"> Πληροφορίες προϋπολογισμού / ετικέτα> br> textarea id = "request-budget" name = "request-budget-text" σειρές = "10" cols = "30"> / textarea> br> label for = "request-description"> Περιγραφή έργου / ετικέτα> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> label για = "request-referensi"> Reference / label> br> textarea id = "request-referensi" name = "request-referensi- text" rows = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / φόρμα>

Με τις φόρμες ιστού, είμαστε πολύ εξοικειωμένοι με συγκεκριμένα μοτίβα: κάνετε κλικ στο κουμπί "Υποβολή", όλα τα δεδομένα φόρμας αποστέλλονται σε μια άλλη σελίδα όπου επεξεργάζεται το αίτημα και, στη συνέχεια, πιθανότατα εμφανίζεται μια αναιδής σελίδα Ευχαριστώ.

Με τα chatbots, μπορούμε να κάνουμε την αλληλεπίδραση της υποβολής ενός αιτήματος και να το κάνουμε πιο ουσιαστικό.

04. Σχεδιάστε μια φωνή

Για να μετατρέψετε αυτήν τη φόρμα σε μια συνομιλία διεπαφή χρήστη που εξυπηρετείται στο πρόγραμμα-πελάτη chatbot του RiveScript, πρέπει να μετατρέψουμε την αρχιτεκτονική πληροφοριών από άκαμπτη σε ρευστή. ή ετικέτες πεδίου σε συμβολοσειρές UI.

Ας εξετάσουμε μερικές προσβάσιμες ετικέτες πεδίου και τον σχετικό τόνο ερώτησής τους:

  • Αίτηση: Πώς μπορούμε να βοηθήσουμε? Δεν είστε σίγουροι; Σας πειράζει αν κάνω μερικές ερωτήσεις;
  • Χρονοδιάγραμμα: Πόσο σύντομα πρέπει να ξεκινήσουμε;
  • Πληροφορίες προϋπολογισμού: Μπορείτε να μου δώσετε μια γενική ιδέα για τον προϋπολογισμό σας;
  • Περιγραφή Έργου: Εντάξει, μπορείτε να μου πείτε μια περίληψη του προβλήματος που πρέπει να επιλυθεί;
  • Αναφορά: Επίσης, ποιος σας παρέπεμψε;

Στη συνέχεια πρέπει να μετατρέψουμε τον κώδικα της φόρμας ιστού σε σενάριο AI, ακολουθώντας τη λογική επεξεργασίας του RiveScript για αμφίδρομες συνομιλίες:

- Πώς μπορούμε να βοηθήσουμε? + *% πώς μπορούμε να βοηθήσουμε - ορίστε περιοχές = varSure, σας πειράζει αν θέσω μερικές ερωτήσεις; + *% σίγουρα σας πειράζει αν κάνω μερικές ερωτήσεις - Πόσο σύντομα πρέπει να ξεκινήσω αυτό το αίτημα; + *% πόσο σύντομα πρέπει να ξεκινήσω αυτό το αίτημα - set when = varΜπορείτε να μου δώσετε μια γενική ιδέα για τον προϋπολογισμό σας; + *% μπορείτε να μου δώσετε μια γενική ιδέα για τον προϋπολογισμό σας - set budget = varOK, μπορείτε να μου πείτε μια περίληψη του προβλήματος που πρέπει να λυθεί, τα στοιχεία και τα περιβάλλοντα που επηρεάζονται ή μια συνολική περιγραφή; + *% εντάξει μπορείτε να μου πείτε μια σύνοψη του προβλήματος που πρέπει να λυθεί και να επηρεαστούν τα περιβάλλοντα ή μια συνολική περιγραφή - set project = varΕπίσης, ποιος σας παρέπεμψε; + *% επίσης ποιος σας ανέφερε - ορίστε referal = vargreat εδώ είναι αυτό που έχω φτάσει μέχρι τώρα: n Απαιτούνται υπηρεσίες: get area> n Πρέπει να ξεκινήσετε: get when> n Rough budget: get budget> n Σχετικά με το έργο σας: λήψη έργου> n Παραπομπή από: λήψη παραπομπής> n και θα έρθω σύντομα σε επαφή με κάτι άλλο που μπορώ να σας βοηθήσω σήμερα; κλήση> περιοχές λήψης πρόσληψης> λήψη όταν> λήψη προϋπολογισμού> λήψη έργου> λήψη αναφοράς> / κλήση>

05. Αίτηση υποβολής

Σε αντίθεση με τις τυπικές μεταβλητές φόρμας που αποστέλλονται σε άλλη σελίδα ή υπηρεσία για επεξεργασία, τα chatbots μπορούν να επικυρώσουν και να υποβάλουν πληροφορίες που εισάγει ο χρήστης σε ένα παράθυρο συνομιλίας (ή προφορικά) αμέσως, πράγμα που σημαίνει ότι οι χρήστες μπορούν επίσης να επανεξετάσουν τις τιμές που είχαν εισαχθεί προηγουμένως εύκολα.

Χρειάστηκε να στείλουμε το αίτημα του χρήστη που έχει εισαχθεί στο περιβάλλον εργασίας του chatbot μέσω του JSON REST API σε έναν εξωτερικό διακομιστή εργασίας έργου.

Στο RiveScript-js είμαστε ελεύθεροι να χρησιμοποιήσουμε ένα XMLHttpRequest αντικείμενο να υποβάλει το αίτημα σχεδόν ταυτόχρονα, καθώς τα δεδομένα εισάγονται από τον χρήστη:

> αντικείμενο εισαγωγής javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "περιοχές"); var b = rs.getUservar (rs.currentUser (), "when"); 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 + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (params); 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) {ειδοποίηση (http.responseText); }} http.send (params); αντικείμενο

06. Μην φοβάστε το chatbot

Σύντομα, οι τρέχοντες τρόποι αλληλεπίδρασης με υπολογιστές για την απόκτηση πληροφοριών θα παραδοθούν σε τεχνολογία που βασίζεται σε AI, όπως chatbots, όπου οι άνθρωποι κάνουν απλές φωνητικές εντολές, όπως έχουμε δει με τεχνολογία όπως το Amazon Echo και το Google Home.

Η κοινότητα σχεδιασμού ιστοσελίδων δεν χρειάζεται να φοβάται - όλοι πρέπει να αγκαλιάζουμε την προστιθέμενη αξία αυτής της νέας τεχνολογίας.

Θα μπορούσε να είναι ένα παιχνίδι αλλαγής για τις εταιρείες στις οποίες εργάζεται, προσφέροντας πλήρως επεκτάσιμη εξυπηρέτηση πελατών και βελτιωμένη νοημοσύνη πελατών.

Αυτό το άρθρο εμφανίστηκε αρχικά στοκαθαρό περιοδικό, το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων. Εγγραφείτε εδώ.

Συναρπαστικές Θέσεις
Πώς να σχεδιάσετε τον ιστότοπό σας χρησιμοποιώντας Mental Models
Ανάγνωση

Πώς να σχεδιάσετε τον ιστότοπό σας χρησιμοποιώντας Mental Models

Η κατανόηση της διαδικασίας σκέψης ενός επισκέπτη ιστότοπου για τον τρόπο με τον οποίο αποκαλύπτει το περιεχόμενό σας και τη μελέτη των λόγων που κάνουν για να κάνει πράγματα στον ιστότοπό σας, είναι ...
5 τερατώδη αφιερώματα σχεδιασμού στο Godzilla
Ανάγνωση

5 τερατώδη αφιερώματα σχεδιασμού στο Godzilla

Η κυκλοφορία του Godzilla του Gareth Edward αυτή την εβδομάδα είναι εύκολα μια από τις πιο αναμενόμενες ταινίες 3D που θα κυκλοφορήσουν τους τελευταίους μήνες. Η ταινία έχει κερδίσει τεράστια κριτική ...
Πώς να δημιουργήσετε pin-up art
Ανάγνωση

Πώς να δημιουργήσετε pin-up art

Η προέλευση της τέχνης pin-up μπορεί να εντοπιστεί στα τέλη του 19ου αιώνα, αλλά έγινε πιο διαδεδομένη τη δεκαετία του 1940 και του 1950, συχνά εμφανίζεται σε αφίσες και ημερολόγια. Τα καθοριστικά χαρ...