Sohbet robotu arayüzü nasıl oluşturulur

Yazar: Randy Alexander
Yaratılış Tarihi: 2 Nisan 2021
Güncelleme Tarihi: 16 Mayıs Ayı 2024
Anonim
Diyarbakır Adliyesi - Güldür Güldür Show 252.Bölüm
Video: Diyarbakır Adliyesi - Güldür Güldür Show 252.Bölüm

İçerik

2000'lerin ortalarında, sanal temsilciler ve müşteri hizmetleri sohbet robotları, çok konuşmasalar da çok fazla övgü aldılar ve başlık altında sadece web sunucuları ile veri alışverişinden oluşuyorlardı.

Günümüzde, çok sayıda 'zayıf AI' örneği (Siri, Alexa, web arama motorları, otomatik çevirmenler ve yüz tanıma dahil) mevcut olsa da ve duyarlı web tasarımı gibi diğer konular ilgi odağı oluştursa da, sohbet robotları hala bir kargaşaya neden oluyor. . Büyük şirketlerin yaptığı büyük yatırımlarla, geleceğin konuşma arayüzlerini kesmek için birçok fırsat var olmaya devam ediyor.

  • Sohbet robotu deneyimi nasıl tasarlanır

Bazen kötü bir itibara sahip olurlar, ancak chatbot'lar faydalı olabilir. Kullanıcının giriş alanlarını doldurduğu ve doğrulama için beklediği standart bir web formunun yerine geçecek gibi hissetmelerine gerek yoktur - bir konuşma deneyimi sağlayabilirler.


Esasen, web tarayıcısı işaretleyip tıklamaları veya mobil hareketler yerine, bir uzmanla veya bir arkadaşla sohbet etmek gibi daha doğal hissettirmek için kullanıcı deneyimini geliştiriyoruz. Amaç, empatik, bağlamsal yanıtlar sağlayarak, bu teknolojinin doğrudan insanların yaşamlarına gömülü hale gelmesidir.

Bir hizmet tasarım uygulamasında gerçek bir proje giriş uygulamasına dayalı bir sohbet robotu tasarlamanın ve oluşturmanın pratik bir yolunu keşfetmek için aşağıdaki videoyu izleyin veya okumaya devam edin.

01. Bir kişilik belirleyin

Bu uygulama dünya çapında 110.000'den fazla üyeye hizmet verdiğinden, amaç, kafa karıştırıcı formları doldurmak yerine dahili paydaşların etkili dijital hizmetler talep edebilecekleri hızlı, kullanışlı ve doğal bir arayüz sağlamaktı.

İlk adım, hizmet tasarım ekibinin paydaşlarının sesini temsil edeceği için sohbet robotunun kişiliğini oluşturmaktı. Aarron Walter’ın tasarım personaları üzerine ufuk açıcı çalışması üzerine inşa ettik. Bu, ekibimizin botun kişilik özelliklerini geliştirmesine büyük ölçüde yardımcı oldu ve ardından selamlar, hatalar ve kullanıcı geri bildirimleri için mesajları belirledi.


Bu, organizasyonun nasıl algılandığını etkilediği için hassas bir aşamadır. Mümkün olduğunca fazla bilgiye sahip olduğumuzdan emin olmak için, botla etkileşim kurarken uygun kişiliği, rengi, tipografiyi, görüntüleri ve kullanıcı akışını belirlemek için derhal paydaş atölyeleri kurduk.

Yasal danışman aramak dahil gerekli tüm onayları aldıktan sonra, arkaik talep formlarını, paydaşlar ile tasarım hizmetleri ekibimizin bir temsilcisi arasındaki bir sohbeti taklit eden bir dizi ileri geri soruya dönüştürmek için yola çıktık.

02. RiveScript kullanın

İşleme kısmı için yapay zeka biçimlendirme diline çok fazla inmek istemediğimizi biliyorduk - sadece deneyimi hızlı bir şekilde başlatmak için yeterince ihtiyacımız vardı.

RiveScript, öğrenmesi kolay ve ihtiyaçlarımız için yeterli olan basit bir sohbet robotu API'sidir. Birkaç gün içinde, bottan bir proje talebini alma ve bunu doğrulamak ve kategorize etmek için yeterli iş mantığıyla ayrıştırmak için mantığımız vardı, böylece JSON REST hizmetleri aracılığıyla uygun dahili proje görev kuyruğuna gönderilebilir.


Bu temel chatbot'u çalıştırmak için RiveScript deposuna gidin, onu klonlayın ve tüm standart Node bağımlılıklarını kurun. Depoda, çeşitli örnek parçacıklarla ekleyebileceğiniz etkileşimlerin tadına bakabilirsiniz.

Ardından, temel bir Grunt sunucusu çalıştırarak botu bir web sayfasına dönüştüren web istemcisi klasörünü çalıştırın. Bu noktada deneyimi ihtiyaçlarınıza göre geliştirebilirsiniz.

03. Botunuzun beynini oluşturun

Bir sonraki adım, botumuzun "beynini" oluşturmaktır. Bu, .RIVE uzantılı dosyalarda belirtilmiştir ve neyse ki, RiveScript zaten kutudan çıktığı gibi temel etkileşimlerle birlikte gelir (örneğin, 'Adınız nedir?', 'Kaç yaşındasınız?' Ve 'Sizin favori renk?').

Doğru Node komutunu kullanarak web istemcisi uygulamasını başlattığınızda, HTML dosyasına bunları yüklemesi talimatı verilir..RIVE Dosyalar.

Daha sonra, chatbotumuzun beyninin proje talepleriyle ilgilenecek kısmını oluşturmamız gerekiyor. Ana hedefimiz, bir dizi proje görevi alım sorusunu düzenli bir konuşmaya dönüştürmektir.

Yani mesela:

  • Merhaba, nasıl yardımcı olabiliriz?
  • Harika, ne kadar çabuk başlamamız gerekiyor?
  • Bana bütçeniz hakkında kabaca bir fikir verebilir misiniz?
  • Bana projenizden biraz daha bahsedin ...
  • bizden nasıl haberin oldu?

Erişilebilir tipik bir web formu şöyle görünür:

form action = ""> fieldset> legend> İstek Türü: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- bir "> seçenek 1 / etiket> br> giriş id =" seçenek-iki "type =" radyo "name =" istek-türü "value =" seçenek-iki "> etiket için =" seçenek-iki "> seçenek 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "seçenek-üç"> seçenek 3 / etiket> br> / fieldset > fieldset> lejant> Zaman çizelgesi: / legend> input id = "bir aylık" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 ay / label> br> input id = "one-three-months" type = "radio" name = "request- zaman çizelgesi" value = "one-three-month"> label for = "one-month"> 1-3 ay / label> br> input id = "dört artı-ay" tür = "radyo" adı = "istek zaman çizelgesi" değer = "dört artı ay"> etiket = "dört artı-ay"> 4+ ay / label> br> / fieldset> br> label for = "request-budget"> Bütçe Bilgileri / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Proje Açıklaması / etiket> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> label for = "request-reference"> Referans / etiket> br> textarea id = "request-reference" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > giriş türü = "gönder" değer = "Gönder"> / form>

Web formlarında, belirli kalıplara çok aşinayız: Gönder düğmesini tıklarsınız, tüm form verileri, isteğin işlendiği başka bir sayfaya gönderilir ve ardından büyük olasılıkla arsız bir Teşekkürler sayfası açılır.

Chatbot'larla, istek gönderme etkileşimini alıp daha anlamlı hale getirebiliyoruz.

04. Bir ses tasarlayın

Bu formu RiveScript’in sohbet robotu web istemcisinde sunulan etkileşimli bir kullanıcı arayüzüne dönüştürmek için, bilgi mimarisini katıdan sıvıya dönüştürmemiz gerekir; veya alan etiketlerini UI dizelerine yerleştirin.

Bazı erişilebilir alan etiketlerini ve bunlarla ilgili soru tonlarını ele alalım:

  • İstek: Nasıl yardımcı olabiliriz? Emin değil? Birkaç soru sormamın sakıncası var mı?
  • Zaman çizelgesi: Ne zaman başlamamız gerekiyor?
  • Bütçe bilgileri: Bana bütçeniz hakkında kabaca bir fikir verebilir misiniz?
  • Proje Açıklaması: Tamam, bana çözülecek sorunun bir özetini söyleyebilir misiniz?
  • Referans: Ayrıca, sizi bize kim yönlendirdi?

Daha sonra, RiveScript’in iki yönlü konuşmalar için çok öğrenilebilir işleme mantığını izleyerek web formunun kodunu AI komut dosyasına dönüştürmemiz gerekiyor:

- Nasıl yardımcı olabiliriz? + *% nasıl yardımcı olabiliriz - alanları ayarla = varSure, Birkaç soru sormamın sakıncası var mı? + *% Birkaç soru sormamın sakıncası var mı - Bu isteği ne zaman başlatmam gerekiyor? + *% Bu isteği ne zaman başlatmam gerekiyor - ne zaman ayarlayın = varC Bana bütçeniz hakkında kabaca bir fikir verebilir misiniz? + *% bana bütçeniz hakkında kabaca bir fikir verebilir misiniz - bütçe belirleyin = varOK, bana çözülecek sorunun, etkilenen bileşenlerin ve ortamların bir özetini veya genel bir açıklama söyleyebilir misiniz? + *% tamam, etkilenen bileşenlerin ve ortamların çözülmesi gereken sorunun bir özetini veya genel bir açıklamayı söyleyebilir misiniz - set project = varAlso, sizi bize kim yönlendirdi? + *% sizi bize yönlendiren de - referal = vargreat olarak ayarlayın şu ana kadar aldım: n Gerekli hizmetler: alanları alın> n Başlamam gerekiyor: ne zaman alın> n Kaba bütçe: bütçeyi alın> n Projeniz hakkında: proje alın> n Yönlendiren: tavsiye alın> n ve kısa süre içinde iletişime geçecek Bugün size yardımcı olabileceğim başka bir şey var mı? çağrı> alım alanları al> ne zaman al> bütçe al> proje al> tavsiye al> / çağrı>

05. Gönderme talebi

İşlenmek üzere başka bir sayfaya veya hizmete gönderilen standart form değişkenlerinin aksine, sohbet robotları, kullanıcı tarafından bir sohbet penceresine (veya sözlü olarak) girilen bilgileri hemen doğrulayabilir ve gönderebilir, bu da kullanıcıların önceden girilen değerleri kolayca yeniden ziyaret edebilecekleri anlamına gelir.

JSON REST API aracılığıyla chatbot kullanıcı arayüzüne girilen kullanıcının isteğini harici bir proje görevlendirme sunucusuna göndermemiz gerekiyordu.

RiveScript-js'de bir XMLHttpRequest veriler kullanıcı tarafından girildiği için talebin neredeyse aynı anda gönderilmesine itiraz edin:

> nesne alımı javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "alanlar"); var b = rs.getUservar (rs.currentUser (), "ne zaman"); var c = rs.getUservar (rs.currentUser (), "bütçe"); var d = rs.getUservar (rs.currentUser (), "proje"); var e = rs.getUservar (rs.currentUser (), "yönlendirme"); var url = "http: // localhost: 3000 / gönder"; var parametreler = "alanlar =" + a + "& ne zaman =" + b + "& bütçe =" + c + "& pro ject =" + d + "& referal =" + e; console.log (parametreler); http.open ("POST", url, doğru); http.setRequestHeader ("İçerik türü", "uygulama / x- www-form-urlencoded"); http.setRequestHeader ("Bağlantı", "kapat"); http.onreadystatechange = function () {// Durum değiştiğinde bir işlevi çağırın. eğer (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (parametreler); nesne

06. Sohbet robotundan korkmayın

Yakında, bilgi almak için bilgisayarlarla etkileşimde bulunmanın mevcut yolları, Amazon Echo ve Google Home gibi teknolojilerde gördüğümüz gibi, insanların sadece basit sesli komutlar verdiği sohbet robotları gibi yapay zeka tabanlı teknolojiye dönüşecek.

Web tasarım topluluğunun korkmasına gerek yok - hepimiz bu yeni teknolojinin katma değerini benimsemeliyiz.

Tamamen ölçeklenebilir müşteri hizmetleri ve gelişmiş müşteri zekası sunarak çalıştığı şirketler için oyunun kurallarını değiştirebilir.

Bu makale ilk olarak şurada yayınlandı:net dergi, web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi. Abone olun.

Bugün Patladı
Tahmin edilemeyen bir dünyada başarılı olmak için 5 önemli ipucu
Daha Fazla Oku

Tahmin edilemeyen bir dünyada başarılı olmak için 5 önemli ipucu

Birleşik Krallık'ta Brexit ve ABD'de Trump için şok zaferlerle birçoğumuzun yaşayacağı en değişken dönemin başlangıcına işaret ediyor, endişeli hi etmek doğal. Web endü tri...
Kendi tasarım ajansınızı kurmak: 10 önemli ipucu
Daha Fazla Oku

Kendi tasarım ajansınızı kurmak: 10 önemli ipucu

Kendi tüdyonuzu kurmayı mı düşünüyor unuz? Kendi kendinizin patronu olmayı hayal ediyor mu unuz? Öyley e, dikkate alınma ı gereken çok şey var. abah yataktan kalkmaktan b...
Steampunk tarzı güzel tipografik kolajlara ilham verir
Daha Fazla Oku

Steampunk tarzı güzel tipografik kolajlara ilham verir

Bu proje fikri, ben başka bir brifing için alıntıları araştırırken ortaya çıktı. 'Zaman ve gelgit kim eyi bekleme' özüne ra tladım ve hemen ona çekildim. Bunu bir Po t...