챗봇 인터페이스를 구축하는 방법

2000 년대 중반, 가상 에이전트와 고객 서비스 챗봇은 대화가별로 없었음에도 불구하고 많은 찬사를 받았으며 내부적으로는 웹 서버와의 데이터 교환으로 만 구성되었습니다.

오늘날에는 Siri, Alexa, 웹 검색 엔진, 자동 번역기 및 얼굴 인식을 포함한 수많은 '약한 AI'사례와 다음과 같은 기타 주제가 존재하지만 반응 형 웹 디자인 각광을 받고 있으며 챗봇은 여전히 ​​혼란을 일으키고 있습니다. 대기업의 대규모 투자로 미래의 대화 형 인터페이스를 해킹 할 기회가 많이 남아 있습니다.



때때로 그들은 나쁜 평판을 얻지 만 챗봇은 유용 할 수 있습니다. 사용자가 입력 필드를 채우고 유효성 검사를 기다리는 표준 웹 양식의 기본 대체물처럼 느껴질 필요가 없습니다. 대화 형 경험을 제공 할 수 있습니다.



기본적으로 우리는 사용자 경험 웹 브라우저의 포인트 앤 클릭이나 모바일 제스처 대신 전문가 나 친구와 대화하는 것처럼 더 자연스럽게 느껴집니다. 목표는 공감적이고 상황에 맞는 응답을 제공함으로써이 기술이 사람들의 삶에 직접적으로 포함되는 것입니다.

아래 비디오를 시청하거나 서비스 설계 관행에서 실제 프로젝트 접수 애플리케이션을 기반으로 챗봇을 설계하고 구축하는 실용적인 방법을 알아보십시오.



01. 개성 설정

챗봇의 성격이 대표하는 회사를 반영하는지 확인하는 것이 중요합니다.

챗봇의 성격이 대표하는 회사를 반영하는지 확인하는 것이 중요합니다.

이 관행은 전 세계적으로 110,000 명 이상의 회원에게 서비스를 제공하기 때문에 내부 이해 관계자가 혼란스러운 양식을 작성하지 않고 효과적인 디지털 서비스를 요청할 수있는 빠르고 편리하며 자연스러운 인터페이스를 제공하는 것이 목표였습니다.

첫 번째 단계는 챗봇의 성격을 확립하는 것이 었습니다. 이는 이해 관계자들에게 서비스 설계 팀의 목소리를 대변하기 때문입니다. 우리는 Aarron Walter의 중요한 작업을 기반으로 디자인 사람들 . 이는 우리 팀이 봇의 성격 특성을 개발하는 데 크게 도움이되었으며, 인사말, 오류 및 사용자 피드백에 대한 메시지를 결정했습니다.



이것은 조직이 인식되는 방식에 영향을 미치기 때문에 민감한 단계입니다. 최대한 많은 정보를 확보하기 위해 즉시 이해 관계자 워크숍을 구성하여 적절한 성격, 색상, 타이포그래피, 이미지 및 봇에 참여할 때 사용자의 흐름을 파악했습니다.

법률 자문을 구하는 것을 포함하여 필요한 모든 승인을받은 후, 우리는 구식 요청 양식을 이해 관계자와 설계 서비스 팀 대표 간의 대화를 모방 한 일련의 앞뒤 질문으로 변환하기 시작했습니다.

02. RiveScript 사용

이 간단한 스크립팅 언어는 챗봇 POC를 설계하고 구축하는 데 필요한 모든 것을 제공합니다.

이 간단한 스크립팅 언어는 챗봇 POC를 설계하고 구축하는 데 필요한 모든 것을 제공합니다.

우리는 처리 부분에서 AI 마크 업 언어에 너무 깊이 들어가고 싶지 않다는 것을 알았습니다. 경험을 바로 시작할 수있을만큼만 필요했습니다.

RiveScript는 배우기에 충분히 쉽고 우리의 요구에 충분한 간단한 챗봇 API입니다. 며칠 만에 봇에서 프로젝트 요청을 수신하고이를 검증하고 분류하기에 충분한 비즈니스 로직으로 구문 분석하여 JSON REST 서비스를 통해 적절한 내부 프로젝트 태스크 큐로 보낼 수있게되었습니다.

이 기본 챗봇이 작동하도록하려면 RiveScript 저장소 , 복제하고 모든 표준 노드 종속성을 설치하십시오. 저장소에서 다양한 예제 스 니펫으로 추가 할 수있는 상호 작용의 맛을 얻을 수도 있습니다.

다음으로 기본 Grunt 서버를 실행하여 봇을 웹 페이지로 바꾸는 웹 클라이언트 폴더를 실행합니다. 이 시점에서 필요에 맞게 경험을 향상시킬 수 있습니다.

03. 봇의 두뇌 생성

다음 단계는 봇의 '두뇌'를 생성하는 것입니다. 이것은 .RIVE 확장자를 가진 파일에 지정되어 있으며 고맙게도 RiveScript에는 이미 기본 상호 작용이 제공됩니다 (예 : 'What is your name?', 'What is your name?', 'What is your 좋아하는 색?').

적절한 Node 명령을 사용하여 웹 클라이언트 앱을 시작하면 HTML 파일이 .은행 파일.

다음으로 프로젝트 요청을 처리 할 챗봇의 두뇌 부분을 생성해야합니다. 우리의 주요 목표는 프로젝트 작업 접수 질문을 정규 대화로 전환하는 것입니다.

인디자인에서 분수를 만드는 방법

예를 들면 다음과 같습니다.

  • 안녕하세요, 무엇을 도와 드릴까요?
  • 좋습니다. 얼마나 빨리 시작해야합니까?
  • 예산에 대한 대략적인 아이디어를 주시겠습니까?
  • 프로젝트에 대해 자세히 알려주세요 ...
  • 우리에 대해 어떻게 알게 되었습니까?

액세스 가능한 일반적인 웹 양식은 다음과 같습니다.

Request Type: option 1
option 2
option 3
Timeline: 1 month
1-3 months
4+ months

Budget Information

Project Description

Reference

웹 양식의 경우 특정 패턴에 매우 익숙합니다. 제출 버튼을 클릭하면 모든 양식 데이터가 요청이 처리되는 다른 페이지로 전송 된 다음 건방진 감사 페이지가 나타날 가능성이 큽니다.

챗봇을 사용하면 요청을 제출하는 상호 작용을 수행하여보다 의미있게 만들 수 있습니다.

04. 목소리 디자인

이 양식을 RiveScript의 챗봇 웹 클라이언트에서 제공되는 대화 형 사용자 인터페이스로 변환하려면 정보 아키텍처를 고정에서 유동으로 변환해야합니다. 또는 필드 레이블을 UI 문자열로 변환합니다.

액세스 가능한 필드 레이블과 관련 질문 톤을 고려해 보겠습니다.

  • 의뢰: 어떻게 도와 드릴까요? 확실하지 않다? 몇 가지 질문을해도 될까요?
  • 타임 라인 : 얼마나 빨리 시작해야합니까?
  • 예산 정보 : 예산에 대한 대략적인 아이디어를 주시겠습니까?
  • 프로젝트 설명: 좋습니다. 해결해야 할 문제의 요약을 말씀해 주시겠습니까?
  • 참고: 또한 누가 우리를 추천 했습니까?

다음으로 RiveScript의 매우 학습 가능한 방법에 따라 웹 양식의 코드를 AI 스크립트로 변환해야합니다. 처리 논리 양방향 대화 :

- How can we help? + * % how can we help - Sure, Do you mind If I ask a couple of questions? + * % sure do you mind if i ask a couple of questions - How soon do I need to start this request? + * % how soon do i need to start this request - Can you give me rough idea of your budget? + * % can you give me rough idea of your budget - OK, can you tell me a summary of the problem to be solved, components and environments affected, or an overall description? +* % ok can you tell me a summary of the problem to be solved components and environments affected or an overall description - Also, who referred you to us? +* % also who referred you to us - great here is what I got so far: Services needed: Need to start: Rough budget: About your project: Referred by: and will get in touch shortly is there anything else i can help you with today? intake

05. 제출 요청

처리를 위해 다른 페이지 또는 서비스로 전송되는 표준 양식 변수와 달리 챗봇은 사용자가 채팅 창 (또는 음성)에 입력 한 정보를 즉시 확인하고 제출할 수 있습니다. 즉, 사용자는 이전에 입력 한 값을 쉽게 다시 방문 할 수도 있습니다.

JSON REST API를 통해 챗봇 UI에 입력 된 사용자의 요청을 외부 프로젝트 태스크 서버로 전송해야했습니다.

RiveScript-js 우리는 자유롭게 사용할 수 있습니다 XMLHttpRequest 사용자가 데이터를 입력하므로 거의 동시에 요청을 제출하는 객체 :

> object intake javascript var http = new XMLHttpRequest(); var a = rs.getUservar(rs.currentUser(), 'areas'); 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 = 'areas='+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('Connection', 'close'); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(params); < object

06. 챗봇을 두려워하지 마세요

머지 않아 정보를 얻기 위해 컴퓨터와 상호 작용하는 현재의 방법은 Amazon Echo 및 Google Home과 같은 기술에서 보았던 것처럼 사람들이 간단한 음성 명령을 내리는 챗봇과 같은 AI 기반 기술에 영향을 미칠 것입니다.

웹 디자인 커뮤니티는 두려워 할 필요가 없습니다. 우리 모두는이 새로운 기술의 부가 가치를 수용해야합니다.

완전히 확장 가능한 고객 서비스와 향상된 고객 인텔리전스를 제공하는 회사의 게임 체인저가 될 수 있습니다.

이 기사는 원래 넷 매거진 , 웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지입니다. 여기에서 구독 .

관련 기사:

  • 챗봇이 배우는 방법-Giles Colborne과의 인터뷰
  • 지능형 웹이 우리의 상호 작용을 어떻게 변화시킬 것인가
  • 대화 형 인터페이스가 뱅킹을 혁신하는 방법