Isi
- 01. Tetapkan kepribadian
- 02. Gunakan RiveScript
- 03. Hasilkan otak bot Anda
- 04. Mendesain suara
- 05. Meminta pengajuan
- 06. Jangan takut dengan chatbot
Pada pertengahan 2000-an, agen virtual dan chatbot layanan pelanggan menerima banyak pujian, meskipun mereka tidak terlalu komunikatif, dan di baliknya mereka hanya terdiri dari pertukaran data dengan server web.
Saat ini, meskipun ada sejumlah besar contoh 'AI lemah' (termasuk Siri, Alexa, mesin pencari web, penerjemah otomatis, dan pengenalan wajah) dan topik lain seperti desain web responsif yang memonopoli pusat perhatian, chatbots masih menyebabkan kehebohan. . Dengan investasi besar dari perusahaan besar, masih ada banyak peluang untuk meretas antarmuka percakapan di masa depan.
- Cara mendesain pengalaman chatbot
Terkadang mereka mendapatkan reputasi buruk, tetapi chatbots bisa berguna. Mereka tidak perlu merasa seperti pengganti dasar untuk formulir web standar, tempat pengguna mengisi kolom masukan dan menunggu validasi - mereka dapat memberikan pengalaman percakapan.
Intinya, kami meningkatkan pengalaman pengguna agar terasa lebih alami, seperti bercakap-cakap dengan pakar atau teman, alih-alih gerakan arahkan-dan-klik browser web atau gerakan seluler. Tujuannya adalah dengan memberikan tanggapan empatik dan kontekstual, teknologi ini akan tertanam langsung dalam kehidupan masyarakat.
Tonton video di bawah ini atau baca terus untuk menemukan cara praktis merancang dan membangun chatbot, berdasarkan aplikasi asupan proyek nyata dalam praktik desain layanan.
01. Tetapkan kepribadian
Karena praktik ini melayani lebih dari 110.000 anggota secara global, tujuannya adalah untuk menyediakan antarmuka yang cepat, nyaman, dan alami sehingga pemangku kepentingan internal dapat meminta layanan digital yang efektif, alih-alih harus mengisi formulir yang membingungkan.
Langkah pertama adalah membangun kepribadian chatbot, karena ini akan mewakili suara tim desain layanan kepada pemangku kepentingannya. Kami membangun karya penting Aarron Walter pada persona desain. Ini sangat membantu tim kami mengembangkan ciri-ciri kepribadian bot, yang kemudian menentukan pesan untuk salam, kesalahan, dan masukan pengguna.
Ini adalah tahap yang rumit, karena mempengaruhi cara pandang organisasi. Untuk memastikan kami memiliki informasi sebanyak mungkin, kami segera menyiapkan lokakarya pemangku kepentingan untuk memastikan kepribadian, warna, tipografi, citra, dan aliran pengguna yang sesuai saat terlibat dengan bot.
Setelah kami mendapatkan semua persetujuan yang diperlukan - termasuk mencari penasihat hukum - kami mulai mengubah formulir permintaan kuno menjadi serangkaian pertanyaan bolak-balik yang meniru percakapan antara pemangku kepentingan dan perwakilan tim layanan desain kami.
02. Gunakan RiveScript
Kami tahu kami tidak ingin terlalu mendalami bahasa markup AI untuk bagian pemrosesan - kami hanya perlu cukup untuk memulai pengalaman.
RiveScript adalah API chatbot sederhana yang cukup mudah dipelajari dan cukup untuk kebutuhan kita. Dalam beberapa hari kami memiliki logika untuk mengambil permintaan proyek dari bot, dan menguraikannya dengan logika bisnis yang cukup untuk memvalidasi dan mengkategorikannya sehingga dapat dikirim melalui layanan JSON REST ke antrean penugasan proyek internal yang sesuai.
Agar chatbot dasar ini berfungsi, buka repo RiveScript, klon, dan instal semua dependensi Node standar. Dalam repo Anda juga dapat merasakan interaksi yang dapat Anda tambahkan dengan berbagai cuplikan contoh.
Selanjutnya, jalankan folder klien web, yang mengubah bot menjadi halaman web dengan menjalankan server Grunt dasar. Pada titik ini Anda dapat meningkatkan pengalaman sesuai dengan kebutuhan Anda.
03. Hasilkan otak bot Anda
Langkah selanjutnya adalah menghasilkan 'otak' bot kita. Ini ditentukan dalam file dengan ekstensi .RIVE, dan untungnya RiveScript sudah hadir dengan interaksi dasar di luar kotak (misalnya, pertanyaan seperti 'Siapa nama Anda?', 'Berapa umur Anda?' Dan 'Apa nama Anda? warna kesukaan?').
Saat Anda memulai aplikasi klien web menggunakan perintah Node yang tepat, file HTML diperintahkan untuk memuat ini.MEMBELAH file.
Selanjutnya kita perlu membangkitkan bagian dari otak chatbot kita yang akan menangani permintaan proyek. Tujuan utama kami adalah untuk mengubah pilihan pertanyaan asupan penugasan proyek menjadi percakapan biasa.
Misalnya:
- Halo, ada yang bisa kami bantu?
- Bagus, seberapa cepat kita harus mulai?
- Bisakah Anda memberi saya gambaran kasar tentang anggaran Anda?
- Ceritakan lebih banyak tentang proyek Anda ...
- bagaimana Anda mendengar tentang kami?
Formulir web biasa yang dapat diakses akan terlihat seperti ini:
form action = ""> fieldset> legenda> Jenis Permintaan: / legenda> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label untuk = "option- one "> opsi 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label untuk =" option-two "> opsi 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label untuk = "option-three"> opsi 3 / label> br> / fieldset > fieldset> legenda> Garis waktu: / legenda> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 bulan / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 bulan / label> br> input id = "four-plus-months" type = "radio" name = "request- timeline" value = "four-plus-months"> label for = "four-plus-months"> 4+ bulan / label> br> / fieldset> br> label for = "request-budget"> Informasi Anggaran / label> br> textarea id = "request-budget" name = "request-budget-text" lines = "10" cols = "30"> / textarea> br> label for = "request-description"> Deskripsi Proyek / label> br> textarea id = "request-description" name = "request- description-text" baris = "10" cols = "30"> / textarea > br> label for = "request-reference"> Referensi / label> br> textarea id = "request-reference" name = "request-reference- text" row = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>
Dengan formulir web, kami sangat memahami pola tertentu: Anda mengklik tombol Kirim, semua data formulir dikirim ke halaman lain tempat permintaan diproses, dan kemungkinan besar akan muncul halaman Terima kasih yang nakal.
Dengan chatbot, kami dapat berinteraksi dengan mengirimkan permintaan, dan membuatnya lebih bermakna.
04. Mendesain suara
Untuk mengubah formulir ini menjadi antarmuka pengguna percakapan yang disajikan di klien web chatbot RiveScript, kita perlu mengubah arsitektur informasi dari kaku menjadi cair; atau label bidang menjadi string UI.
Mari pertimbangkan beberapa label bidang yang dapat diakses, dan nada pertanyaan terkait:
- Permintaan: Bagaimana kami dapat membantu? Tidak yakin? Apakah Anda keberatan jika saya mengajukan beberapa pertanyaan?
- Linimasa: Seberapa cepat kita harus memulai?
- Informasi anggaran: Bisakah Anda memberi saya gambaran kasar tentang anggaran Anda?
- Deskripsi Proyek: Oke, dapatkah Anda memberi tahu saya ringkasan masalah yang harus diselesaikan?
- Referensi: Juga, siapa yang merujuk Anda ke kami?
Selanjutnya kita perlu mengonversi kode formulir web menjadi skrip AI, mengikuti logika pemrosesan RiveScript yang sangat dapat dipelajari untuk percakapan dua arah:
- Bagaimana kami bisa membantu? + *% bagaimana kami dapat membantu - mengatur area = varSure, Apakah Anda keberatan jika saya mengajukan beberapa pertanyaan? + *% yakin apakah Anda keberatan jika saya mengajukan beberapa pertanyaan - Seberapa cepat saya harus memulai permintaan ini? + *% seberapa cepat saya harus memulai permintaan ini - tetapkan when = varDapatkah Anda memberi saya gambaran kasar tentang anggaran Anda? + *% dapatkah Anda memberi saya gambaran kasar tentang anggaran Anda - tetapkan anggaran = varOK, dapatkah Anda memberi tahu saya ringkasan masalah yang harus diselesaikan, komponen dan lingkungan yang terpengaruh, atau deskripsi keseluruhan? + *% ok dapatkah Anda memberi tahu saya ringkasan masalah yang harus diselesaikan komponen dan lingkungan yang terpengaruh atau deskripsi keseluruhan - set project = varJuga, siapa yang merujuk Anda kepada kami? + *% juga yang merujuk Anda ke kami - tetapkan referal = vargreat inilah yang saya dapatkan sejauh ini: n Layanan yang dibutuhkan: dapatkan area> n Perlu memulai: dapatkan ketika> n Anggaran kasar: dapatkan anggaran> n Tentang proyek Anda: dapatkan proyek> n Dirujuk oleh: dapatkan rujukan> n dan akan segera menghubungi Anda, adakah hal lain yang bisa saya bantu hari ini? hubungi> dapatkan area> dapatkan saat> dapatkan anggaran> dapatkan proyek> dapatkan referensi> / hubungi>
05. Meminta pengajuan
Berbeda dengan variabel bentuk standar yang dikirim ke halaman atau layanan lain untuk diproses, chatbots dapat memvalidasi dan mengirimkan informasi yang dimasukkan oleh pengguna di jendela obrolan (atau diucapkan) dengan segera, yang berarti pengguna juga dapat mengunjungi kembali nilai yang dimasukkan sebelumnya dengan mudah.
Kami perlu mengirim permintaan pengguna yang dimasukkan di UI chatbot melalui JSON REST API ke server penugasan proyek eksternal.
Di RiveScript-js kami bebas menggunakan file XMLHttpRequest objek untuk mengirimkan permintaan hampir secara bersamaan, karena data dimasukkan oleh pengguna:
> asupan objek javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "area"); var b = rs.getUservar (rs.currentUser (), "when"); var c = rs.getUservar (rs.currentUser (), "budget"); var d = rs.getUservar (rs.currentUser (), "project"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "area =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (params); http.open ("POST", url, true); http.setRequestHeader ("Jenis konten", "application / x- www-form-urlencoded"); http.setRequestHeader ("Sambungan", "tutup"); http.onreadystatechange = function () {// Panggil fungsi saat status berubah. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); obyek
06. Jangan takut dengan chatbot
Dalam waktu dekat, cara interaksi saat ini dengan komputer untuk mendapatkan informasi akan menyerah pada teknologi berbasis AI seperti chatbots, di mana orang hanya membuat perintah suara sederhana, seperti yang telah kita lihat dengan teknologi seperti Amazon Echo dan Google Home.
Komunitas desain web tidak perlu takut - kita semua harus merangkul nilai tambah dari teknologi baru ini.
Ini bisa menjadi pengubah permainan bagi perusahaan tempatnya bekerja, menawarkan layanan pelanggan yang dapat diskalakan sepenuhnya dan meningkatkan kecerdasan pelanggan.
Artikel ini pertama kali ditampilkan dimajalah net, majalah terlaris di dunia untuk perancang dan pengembang web. Berlangganan di sini.
