NộI Dung
- 01. Đặt tính cách
- 02. Sử dụng RiveScript
- 03. Tạo bộ não cho bot của bạn
- 04. Thiết kế giọng nói
- 05. Yêu cầu gửi
- 06. Đừng sợ chatbot
Vào giữa những năm 2000, các đại lý ảo và chatbot dịch vụ khách hàng đã nhận được rất nhiều lời khen ngợi, mặc dù chúng không mang tính trò chuyện nhiều và ẩn sâu bên trong chúng chỉ đơn thuần là trao đổi dữ liệu với các máy chủ web.
Ngày nay, mặc dù rất nhiều ví dụ về 'AI yếu' tồn tại (bao gồm Siri, Alexa, công cụ tìm kiếm web, trình dịch tự động và nhận dạng khuôn mặt) và các chủ đề khác như thiết kế web đáp ứng đang thu hút ánh đèn sân khấu, chatbots vẫn đang gây xôn xao . Với sự đầu tư lớn từ các công ty lớn, vẫn còn rất nhiều cơ hội để hack các giao diện trò chuyện trong tương lai.
- Cách thiết kế trải nghiệm chatbot
Đôi khi họ bị mang tiếng xấu, nhưng chatbot có thể hữu ích. Họ không cần phải cảm thấy giống như một sự thay thế cơ bản cho một biểu mẫu web tiêu chuẩn, nơi người dùng điền vào các trường đầu vào và chờ xác thực - họ có thể cung cấp trải nghiệm trò chuyện.
Về cơ bản, chúng tôi đang nâng cao trải nghiệm người dùng để cảm thấy tự nhiên hơn, chẳng hạn như trò chuyện với chuyên gia hoặc bạn bè, thay vì trỏ và nhấp trên trình duyệt web hoặc cử chỉ trên thiết bị di động. Mục đích là bằng cách cung cấp các phản hồi đồng cảm, theo ngữ cảnh, công nghệ này sẽ được nhúng trực tiếp vào cuộc sống của mọi người.
Xem video bên dưới hoặc đọc để khám phá cách thiết kế và xây dựng một chatbot thực tế, dựa trên một ứng dụng thu nhận dự án thực tế trong thực tiễn thiết kế dịch vụ.
01. Đặt tính cách
Vì hoạt động này phục vụ hơn 110.000 thành viên trên toàn cầu, nên mục tiêu là cung cấp giao diện nhanh chóng, thuận tiện và tự nhiên, qua đó các bên liên quan nội bộ có thể yêu cầu các dịch vụ kỹ thuật số hiệu quả, thay vì phải điền vào các biểu mẫu khó hiểu.
Bước đầu tiên là thiết lập tính cách của chatbot, vì điều này sẽ thể hiện tiếng nói của nhóm thiết kế dịch vụ đối với các bên liên quan. Chúng tôi đã xây dựng dựa trên công trình thiết kế của Aarron Walter. Điều này đã giúp nhóm của chúng tôi phát triển đặc điểm tính cách của bot, sau đó xác định thông điệp về lời chào, lỗi và phản hồi của người dùng.
Đây là một giai đoạn tế nhị, vì nó ảnh hưởng đến cách tổ chức được nhìn nhận. Để đảm bảo rằng chúng tôi có nhiều thông tin nhất có thể, chúng tôi ngay lập tức thiết lập các hội thảo về các bên liên quan để xác định tính cách, màu sắc, kiểu chữ, hình ảnh và luồng người dùng phù hợp khi tương tác với bot.
Sau khi chúng tôi đã đạt được tất cả các phê duyệt cần thiết - bao gồm cả việc tìm kiếm cố vấn pháp lý - chúng tôi bắt đầu chuyển đổi các biểu mẫu yêu cầu cũ thành một loạt các câu hỏi qua lại mô phỏng cuộc trò chuyện giữa các bên liên quan và đại diện của nhóm dịch vụ thiết kế của chúng tôi.
02. Sử dụng RiveScript
Chúng tôi biết rằng chúng tôi không muốn tìm hiểu quá sâu về ngôn ngữ đánh dấu AI cho phần xử lý - chúng tôi chỉ cần đủ để bắt đầu trải nghiệm.
RiveScript là một API chatbot đơn giản, đủ dễ học và đáp ứng đủ nhu cầu của chúng ta. Trong vòng vài ngày, chúng tôi đã có logic để nhận yêu cầu dự án từ bot và phân tích cú pháp nó với đủ logic nghiệp vụ để xác thực và phân loại nó để có thể gửi nó thông qua các dịch vụ JSON REST đến hàng đợi tác vụ dự án nội bộ thích hợp.
Để chatbot cơ bản này hoạt động, hãy truy cập repo RiveScript, sao chép nó và cài đặt tất cả các phụ thuộc Node tiêu chuẩn. Trong repo, bạn cũng có thể tìm hiểu các tương tác mà bạn có thể thêm bằng các đoạn mã ví dụ khác nhau.
Tiếp theo, chạy thư mục web-client, thư mục này biến bot thành một trang web bằng cách chạy một máy chủ Grunt cơ bản. Lúc này bạn có thể nâng cao trải nghiệm để phù hợp với nhu cầu của mình.
03. Tạo bộ não cho bot của bạn
Bước tiếp theo là tạo ra ‘bộ não’ của bot của chúng tôi. Điều này được chỉ định trong các tệp có phần mở rộng .RIVE và rất may RiveScript đã đi kèm với các tương tác cơ bản ngay lập tức (ví dụ: các câu hỏi như 'Tên bạn là gì?', 'Bạn bao nhiêu tuổi?' Và 'Bạn là gì màu sắc yêu thích?').
Khi bạn khởi chạy ứng dụng web-client bằng lệnh Node thích hợp, tệp HTML sẽ được hướng dẫn để tải các.RIVE các tập tin.
Tiếp theo, chúng tôi cần tạo phần não của chatbot để xử lý các yêu cầu dự án. Mục tiêu chính của chúng tôi là chuyển một loạt các câu hỏi tuyển chọn nhiệm vụ dự án thành một cuộc trò chuyện thông thường.
Ví dụ:
- Xin chào, chúng tôi có thể giúp gì?
- Tuyệt vời, chúng ta cần bắt đầu sớm như thế nào?
- Bạn có thể cho tôi biết sơ bộ về ngân sách của bạn được không?
- Cho tôi biết thêm về dự án của bạn ...
- Bạn đã nghe về chúng tôi như thế nào?
Một biểu mẫu web có thể truy cập điển hình sẽ trông như thế này:
form action = ""> fieldset> chú giải> Loại yêu cầu: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- một "> tùy chọn 1 / label> br> input id =" option-hai "type =" radio "name =" request-type "value =" option-hai "> label for =" option-hai "> tùy chọn 2 / label> br> input id = "option-ba" type = "radio" name = "request-type" value = "option-ba"> label for = "option-three"> option 3 / label> br> / fieldset > fieldset> chú giải> Dòng thời gian: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 tháng / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 tháng / label> br> input id = "four-plus-months" type = "radio" name = "request- timeline" value = "four-plus-months"> label for = "four-plus-months"> 4+ tháng / label> br> / fieldset> br> label for = "request-Budget"> Thông tin Ngân sách / label> br> textarea id = "request-Budget" name = "request-Budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Project Description / label> br> textarea id = "request-description" name = "request- description-text" rows = "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 = "Gửi"> / biểu mẫu>
Với biểu mẫu web, chúng tôi rất quen thuộc với một số mẫu nhất định: bạn nhấp vào nút Gửi, tất cả dữ liệu biểu mẫu sẽ được gửi đến một trang khác nơi yêu cầu được xử lý và sau đó, rất có thể một trang Cảm ơn táo bạo sẽ bật lên.
Với chatbots, chúng tôi có thể tương tác với việc gửi một yêu cầu và làm cho nó trở nên có ý nghĩa hơn.
04. Thiết kế giọng nói
Để chuyển đổi biểu mẫu này sang giao diện người dùng trò chuyện được phục vụ trong ứng dụng web chatbot của RiveScript, chúng tôi cần chuyển đổi kiến trúc thông tin từ cứng nhắc sang linh hoạt; hoặc nhãn trường thành chuỗi giao diện người dùng.
Hãy xem xét một số nhãn trường có thể truy cập và giọng điệu câu hỏi liên quan của chúng:
- Yêu cầu: Làm thế nào chúng ta có thể giúp đỡ? Không chắc? Bạn có phiền không nếu tôi hỏi một vài câu hỏi?
- Mốc thời gian: Chúng ta cần bắt đầu sớm bao lâu?
- Thông tin ngân sách: Bạn có thể cho tôi một ý tưởng sơ bộ về ngân sách của bạn?
- Mô tả dự án: OK, bạn có thể cho tôi biết tóm tắt về vấn đề cần giải quyết không?
- Tài liệu tham khảo: Ngoài ra, ai đã giới thiệu bạn với chúng tôi?
Tiếp theo, chúng ta cần chuyển đổi mã của biểu mẫu web thành tập lệnh AI, tuân theo logic xử lý rất dễ học của RiveScript cho các cuộc hội thoại hai chiều:
- Làm thế nào chúng ta có thể giúp đỡ? + *% chúng tôi có thể trợ giúp như thế nào - set area = varSure, Bạn có phiền không Nếu tôi hỏi một vài câu hỏi? + *% chắc chắn bạn không phiền nếu tôi hỏi một vài câu hỏi - Tôi cần bắt đầu yêu cầu này sớm bao lâu? + *% tôi cần bắt đầu yêu cầu này bao lâu nữa - đặt khi nào = var Bạn có thể cho tôi biết sơ bộ về ngân sách của bạn không? + *% bạn có thể cho tôi biết sơ bộ về ngân sách của bạn - set ngân sách = varOK, bạn có thể cho tôi biết tóm tắt về vấn đề cần giải quyết, các thành phần và môi trường bị ảnh hưởng hay mô tả tổng thể không? + *% ok, bạn có thể cho tôi biết tóm tắt vấn đề cần giải quyết các thành phần và môi trường bị ảnh hưởng hoặc mô tả tổng thể - set project = varAlso, ai đã giới thiệu bạn với chúng tôi? + *% cũng là người đã giới thiệu bạn với chúng tôi - set referal = vargreat đây là những gì tôi nhận được cho đến thời điểm này: n Dịch vụ cần: nhận khu vực> n Cần bắt đầu: nhận khi nào> n Ngân sách hạn hẹp: lấy ngân sách> n Giới thiệu về dự án của bạn: nhận dự án> n Được giới thiệu bởi: nhận được giới thiệu> n và sẽ sớm liên hệ với bạn. Hôm nay tôi có thể giúp gì khác cho bạn không? cuộc gọi> nhận khu vực tiếp nhận> nhận khi nào> nhận ngân sách> nhận dự án> nhận giới thiệu> / cuộc gọi>
05. Yêu cầu gửi
Trái ngược với các biến biểu mẫu tiêu chuẩn được gửi đến một trang hoặc dịch vụ khác để xử lý, chatbots có thể xác thực và gửi thông tin do người dùng nhập trong cửa sổ trò chuyện (hoặc bằng giọng nói) ngay lập tức, có nghĩa là người dùng cũng có thể truy cập lại các giá trị đã nhập trước đó một cách dễ dàng.
Chúng tôi cần gửi yêu cầu của người dùng đã nhập trong giao diện người dùng chatbot qua API JSON REST tới máy chủ tác vụ dự án bên ngoài.
Trong RiveScript-js, chúng tôi có thể tự do sử dụng XMLHttpRequest đối tượng để gửi yêu cầu gần như đồng thời, vì dữ liệu được nhập bởi người dùng:
> nạp đối tượng javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "khu vực"); var b = rs.getUservar (rs.currentUser (), "khi"); var c = rs.getUservar (rs.currentUser (), "ngân sách"); var d = rs.getUservar (rs.currentUser (), "dự án"); 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 ("Loại nội dung", "ứng dụng / x- www-form-urlencoded"); http.setRequestHeader ("Kết nối", "đóng"); http.onreadystatechange = function () {// Gọi một hàm khi trạng thái thay đổi. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); vật
06. Đừng sợ chatbot
Chẳng bao lâu nữa, các cách tương tác hiện tại với máy tính để lấy thông tin sẽ phải nhường bước cho công nghệ dựa trên AI như chatbots, nơi mọi người chỉ thực hiện các lệnh thoại đơn giản, giống như chúng ta đã thấy với công nghệ như Amazon Echo và Google Home.
Cộng đồng thiết kế web không cần phải lo sợ - tất cả chúng ta nên đón nhận giá trị gia tăng của công nghệ mới này.
Nó có thể là người thay đổi cuộc chơi cho các công ty mà nó làm việc, cung cấp dịch vụ khách hàng có thể mở rộng hoàn toàn và cải thiện trí thông minh của khách hàng.
Bài báo này ban đầu được giới thiệu trongtạp chí net, tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và nhà phát triển web. Đăng ký tại đây.
