Bir Chatbot Arayüzü Nasıl Yapılır

Jan 19, 2026

Nasıl Yapılır

2000'li yılların ortalarında, sanal ajanlar ve müşteri hizmetleri chatbotları, çok konuşma olmasa da ve kaputun altında, yalnızca Web sunucuları ile veri alışverişlerinden oluşuyorlardı.

Günümüzde, çok sayıda 'zayıf AI' örneği var olsa da (Siri, Alexa, Web Arama Motorları, Otomatik Tercümanlar ve Yüz Tanıma dahil) ve diğer konular gibi Duyarlı Web Tasarımı Limelight'ı sallıyorlar, chatbotlar hala karışmaya neden oluyor. Büyük şirketlerden büyük yatırımlarla, geleceğin konuşma arayüzlerini kesmek için bol miktarda fırsat kalıyor.

Bir chatbot deneyimi nasıl tasarlanır

Bazen kötü bir üne sahipler, ancak chatbotlar yararlı olabilir. Kullanıcının giriş alanlarını doldurduğu ve doğrulamayı beklerken standart bir web formu için temel bir değiştirme gibi hissetmeleri gerekmezler - konuşma deneyimi sağlayabilir.

Temel olarak geliştiriyoruz kullanıcı deneyimi Web tarayıcısı nokta ve tıklamalar veya mobil hareketler yerine bir uzman veya arkadaşınızla görüşmek gibi daha doğal hissetmek. Amaç, empatik, bağlamsal tepkiler sunarak, bu teknoloji doğrudan insanların hayatlarına gömülecektir.

Bir servis tasarımı uygulamasında gerçek bir proje alım uygulamasına dayanan bir chatbot tasarımı ve oluşturmanın pratik bir yolunu keşfetmek için aşağıdaki videoyu izleyin veya okuyun.

01. Bir Kişilik Ayarlayın

It’s important to ensure the chatbot’s personality reflects the company it’s representing — Chatbot'un kişiliğinin temsil ettiği şirketi yansıtmasını sağlamak önemlidir.

Bu uygulama küresel olarak 110.000'den fazla üyeye hizmet ettiği gibi, amaç, kafa karıştırıcı formları doldurmak yerine, iç paydaşların etkili dijital hizmetler talep edebileceği hızlı, kullanışlı ve doğal bir arayüz sağlamaktı.

İlk adım, chatbot'un kişiliğini belirlemek, çünkü bu hizmet tasarım ekibinin sesini paydaşlarına temsil edecektir. Aarron Walter'ın seminal çalışmalarını üzerine kurduk Tasarım personeli . Bu, ekibimizin botun kişilik özelliklerini geliştirmesine büyük ölçüde yardımcı oldu, bu da selamlar, hatalar ve kullanıcı geribildirim 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 ilgi duyduğunuzda uygun kişiliği, renk, tipografi, görüntü ve kullanıcının akışını çivilemek için derhal paydaş atölyelerini kurarız.

Biz gerekli tüm onayları kazandıktan sonra - Hukuk Danışmanı Aradığımızdan - Arkaik istek formlarını, paydaşlar ile tasarım hizmetleri ekibimizin bir temsilcisi arasındaki konuşmayı taklit eden bir dizi geri dönüşüme dönüştürmek için yola çıktık.

02. RIVESCRIPT kullanın

This simple scripting language provides everything you need to design and build a chatbot POC — Bu basit komut dosyası dili tasarlamak ve bir chatbot poc oluşturmak için ihtiyacınız olan her şeyi sağlar

İşleme parçası için AI Markup Dili'ne çok derin olmak istemedik diye biliyorduk - deneyimini atlamak için yeterince ihtiyacımız var.

RiveScript, ihtiyaçlarımız için öğrenebilecek ve yeterli olan basit bir chatbot API'dir. Birkaç gün içinde, bottan bir proje isteği almak için mantık vardı ve bunu doğrulamak ve kategorize etmek için yeterli iş mantığı ile ayrıştırdık, böylece JSON REST Services aracılığıyla uygun Dahili proje görev sırasına gönderilebilir.

Bu temel chatbot çalışmasını sağlamak için, RIVESCRIPT REPO , klonlayın ve tüm standart düğüm bağımlılıklarını takın. Repo'da, çeşitli örnek parçacıklarla ekleyebileceğiniz etkileşimlerin tadını da kazanabilirsiniz.

Sonra, BOT'u temel bir homurdanma sunucusu çalıştırarak bir Web sayfasına dönüştüren Web-Client klasörünü çalıştırın. Bu noktada ihtiyaçlarınıza uygun deneyimi geliştirebilirsiniz.

03. Botun beynini oluştur

Bir sonraki adım, botumuzun 'beynini' oluşturmaktır. Bu, .Rive uzantılı dosyalarda belirtilmiştir ve neyse ki Rive Rivesicript zaten kutunun dışında temel etkileşimler ile birlikte gelir (örneğin, 'adınız nedir?', 'Kaç yaşındasınız?' Ve 'sizin nedir? favori renk?').

Düzenli düğüm komutunu kullanarak Web-Client uygulamasını başlattığınızda, HTML dosyasının bunları yüklemeleri istenir. .Rive Dosyalar.

Daha sonra, proje istekleri ile ilgilenecek Chatbot'un beynimizin bir bölümünü oluşturmamız gerekiyor. Başlıca hedefimiz, bir seçim projesi göreviyle ilgili olarak düzenli bir konuşmaya dönüştürmektir.

Yani mesela:

Merhaba, nasıl yardımcı olabiliriz?
Harika, ne kadar zamanda başlamalıyız?
Bana bütçeniz hakkında kaba bir fikir verebilir misiniz?
Bana projeniz hakkında daha fazla bilgi verin ...
Bizi nasıl duydunuz?

Tipik erişilebilir bir web formu şöyle görünür:

 & lt; form eylem = "" & gt;
& lt; fieldet & gt;
& LEGEND & GT; İstek türü: / LEGEND & GT;
& lt; giriş id = "Seçenek-ONE" Type = "Radyo" adı = "Talep tipi" değeri = "Seçenek-One" & gt;
<"" OPTION-ONE "& GT; seçenek 1

Web formlarıyla, belirli kalıplara çok aşinayız: Gönder düğmesine tıklayın, tüm form verileri isteğin işlendiği başka bir sayfaya gönderilir ve daha sonra büyük olasılıkla arsız bir teşekkür sayfası açılır.

Chatbots ile, bir istek göndermenin etkileşimini alabiliyoruz ve daha anlamlı hale getirebiliriz.

04. Ses tasarlayın

Bu formu RiveCript'in chatbot web istemcisinde sunulan bir konuşma kullanıcı arayüzüne dönüştürmek için, bilgi mimarisini sertten sıvıya dönüştürmemiz gerekir; veya UI dizeleri içine alan etiketleri.

Bazı erişilebilir alan etiketlerini ve ilgili soru tonunu göz önünde bulunduralım:

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

Sonra, Web Formunun kodunu AI komut dosyasına dönüştürmemiz gerekiyor, ardından RiveScript'in çok öğrenilebilir İşleme mantığı İki yönlü konuşmalar için:

- Nasıl yardımcı olabiliriz?

+ *
% nasıl yardımcı olabiliriz
- & lt; set alanları = & gt; elbette, birkaç soru sormamın sakıncası var mı?

+ *
Birkaç soru sormamın sakıncası var mı? Bu isteği ne kadar yakında başlamam gerekiyor?

+ *
Bu talebi ne kadar yakında başlamam gerekiyor?
- & lt; ne zaman = & gt; & gt; bütçeniz hakkında zor bir fikir verebilir misiniz?

+ *
% Bütçeniz hakkında zor bir fikir verebilir misiniz
- & lt; bütçe = & gt; Tamam; Tamam, bana çözülecek sorunun bir özetini, bileşenlerin ve ortamların etkilenmesi veya genel bir açıklamasını söyleyebilir misiniz?

+ *
% Tamam, çözülmesi gereken sorunun bir özetini, etkilenen bileşenlerin ve ortamların bir özetini veya genel bir açıklamayı söyleyebilir misiniz?
- & lt; set projesi =

05. Talep gönderme

Standart form değişkenlerinin aksine, başka bir sayfaya veya hizmete gönderilecek şekilde, chatbotlar, kullanıcılar tarafından hemen girilen bir sohbet penceresinde (veya konuşulan) tarafından girilen bilgileri doğrulayabilir ve gönderebilir, bu da kullanıcıların daha önce girilen değerleri kolayca tekrar ziyaret edebilirler.

Kullanıcının isteğini, JSON REST API'sine CHATBOT UI'ye girilen harici bir proje görev sunucusuna göndermemiz gerekiyordu.

İçinde Rive cript-js Birini kullanmak için özgürüz Xmlhttprquest Veriler kullanıcı tarafından girildiğinde, talebi neredeyse eşzamanlı olarak göndermek için nesne:

 & gt; Nesne alımı javascript
 var http = yeni xmlhttprquest ();

 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 (), "referans");

 var url = "http: // localhost: 3000 / Gönder";

 var params = "ALANLAR =" + A + "& AMP; ne zaman =" + b + "& amp; budget =" + c + "& amp; pro ject =" + d + "& amp; referans =" + e;
 console.log (params);

 http.open ("Post", URL, DOĞRU);

 http.setrequestheader ("İçerik tipi", "Uygulama / X- www-form-urlencoded");
 http.setrequestheader ("bağlantı", "Kapat");
 http.onreadystateChange = fonksiyon () {// Durum değiştiğinde bir işlevi çağırın.
  if (http.readystate == 4 ve amp; & amp; http.status == 200) {
    Uyarı (http.responsetext);
  }
 }
 http.send (params);

& lt; Nesne

06. Chatbot'dan korkmayın

Yakında, bilgi edinmek için bilgisayarlarla etkileşime girmenin güncel yolları, insanların Amazon Echo ve Google Home gibi teknolojiyi gördüğümüz gibi basit sesli komutlar yaptıkları gibi, chatbots gibi AI tabanlı teknolojiye verecektir.

Web Tasarım Topluluğu Korku İhtiyacı - Hepimiz bu yeni teknolojinin katma değerini kucaklamalıyız.

Tamamen ölçeklenebilir müşteri hizmetleri sunan ve müşteri zekasını geliştiren şirketler için bir oyun değiştirici olabilir.

Bu makale başlangıçta bulundu net dergisi , Dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Abone olun .

İlgili Makaleler:

Chatbots nasıl öğreniyor - Giles Colborne ile görüşme
Akıllı web etkileşimlerimizi nasıl değiştirecek?
Konuşma arayüzleri, bankacılığı nasıl yenilik yapıyor?

Bir Chatbot Arayüzü Nasıl Yapılır

01. Bir Kişilik Ayarlayın

02. RIVESCRIPT kullanın

03. Botun beynini oluştur

04. Ses tasarlayın

05. Talep gönderme

06. Chatbot'dan korkmayın

Nasıl Yapılır - En Popüler Makaleler

Karakter sanatınızı nasıl geliştirilir

InDesign'da özel baskı işlemi oluşturun

Jump Start'ı Expo ile Yerel Reaksiyona Girdi

Animasyonlu bir bölünmüş ekran açılış sayfası oluşturun

Zbrush'da gerçekçi anatomi heykel

Daha Hızlı Web Siteleri Nasıl Yapılır

Sinema 4d'de gerçekçi bitkiler yapmak

Master Kullanıcı Deneyimi Stratejisi

Kategoriler