Chatbot Platformumuz İçin Giriş Kullanıcı Arayüzü Öğeleri Oluşturma Konusunda Nasıl Çalıştık?
Yayınlanan: 2017-01-01Chatbotlar, bugün var oldukları gibi, doğal insan dilini anlamak için pek fazla yeteneğe sahip değiller. Ve bu, çoğu mesajlaşma uygulamasının (Messenger, Kik vb.) bot platformlarında grafik ve metin kullanıcı arabiriminin bir karışımına başvurmasının ana nedenlerinden biridir - yalnızca metin yanıtlarını değil düğmeleri, karuselleri, görüntü kartlarını düşünün.
Tars'ta, botların çalışması için kendi sohbet arayüzümüzü oluşturmak için tarayıcıyı bir platform olarak kullanıyoruz. Ve bu bize sahip olduğumuz tüm bileşenler konusunda tam bir özgürlük veriyor. Botlarımızdan herhangi birini denediyseniz (eğer denemediyseniz, önce burada ve burada deneyin), grafiksel UI + metin tabanlı yaklaşımı güçlü bir şekilde desteklediğimizi bilirsiniz. Bu düşünce sürecinin bir parçası olarak, farklı kullanıcı etkileşimlerini ve durumlarını kolaylaştırmak için ön uç arayüzümüzde bir dizi özel klavye girişi oluşturduk.
Messenger, Kik, Telegram, geliştiricilerin her gün yüzlerce bot dağıttığı devasa platformlardır. Hala bu mesajlaşma platformlarının, bir boomaker'ın zenginleştirici kullanıcı etkileşimleri oluşturmasına yardımcı olmak için ön uç bileşenlerde yeterince yapmadığını hissediyorum.
İşte bu yüzden, her özel kullanıcı arayüzünü nasıl oluşturduğumuz, her birinin neden anlamlı olduğu ve bunların eksikliğinin şu anda kullanıcı etkileşimlerini nasıl mahvettiği hakkında daha fazla konuşmak istedim.
İşte başlıyoruz:
Tarih ve Saat Kaydırıcısı
Bir kullanıcıya randevuyu ne zaman almak istediğini sormanız gereken bir senaryo düşünün? Aynı bilgiyi vermenin birden fazla yolu olabilir.
25 Kasım, 25 Kasım, 25 Kasım, 25/11, 25–11–2016, 11/25/16 — hepsi temelde aynı anlama gelir, ancak bir makinenin bu verileri anlaması zorlaşır.
Bu nedenle, kullanıcıların kadranları çevirebileceği ve tarih/saati seçebileceği bir tarih ve saat kaydırma çubuğu ekledik.

Şimdiye kadar bu kullanıcı arayüzünü sağlayan başka bir mesajlaşma platformu görmedim ve bir bot kullanıcıdan tarih veya saat istiyorsa bunun olması gerektiğini düşünüyorum.
Dikey Düğmeler
Bunları, aralarından seçim yapabileceğiniz sınırlı sayıda şeye sahip olduğunuz bir biçimde çoktan seçmeli seçenekler olarak düşünün. Düğmelere dokunmak etkileşimi hızlandırır ve ayrıca konuşmanın kapsamını sınırlı tutar.
Düğme tabanlı yaklaşım, bir sebze ve sebze olmayan pizza arasında seçim yapmanız gerektiğinde mantıklıdır, ancak aralarından seçim yapabileceğiniz 100 sigorta poliçeniz varsa, sahip olduğunuz en iyi kullanıcı arayüzü olmayabilir.
Dikey düğmelerle daha ne yapılabilir?
- görsel olarak daha çekici hale getirmek için her seçeneğin yanına bir resim ekleyin.
- Kullanıcının tek bir dokunuşa yanıt vermesine izin verebilir veya seçeneklerden herhangi birine dokunduktan sonra "Gönder"e tıklamasını sağlayabilirsiniz. İkincisi, kullanıcı belirli seçeneği yanlışlıkla seçmediyse yeniden onaylamaya yardımcı olur. Bir sohbet akışında geri dönmenin bir yolu yoktur ve bu yüzden bu özelleştirme mantıklıdır.
- ayrıntılı bilgi sağlamak ve karar verme sürecini daha iyi hale getirmek için her seçeneğe bir hızlı bilgi menüsü ekleyin.

Advance ve Basic Facial arasındaki farkı herkes bilmez. Her şeyin dahil olduğu ve fiyatlandırma hakkında ayrıntılar eklemek, kullanıcı deneyimini daha iyi hale getirir.
Button UI'yi kullanırken akılda tutulması gereken bir diğer önemli şey, sorunuzu doğru şekilde çerçevelemektir. Leszek'in buradaki makalesinde açıkladığı gibi, soruyu çok açık uçlu bir soru sormak yerine seçenekleri sınırlayan ve bağlamı belirleyen bir şekilde sormak daha iyidir.

Kullanıcı Girişini Kısıtlama
Bunun sohbet arayüzümüze yaptığımız en iyi şeylerden biri olduğunu düşünüyorum. Bir grafik giriş kullanıcı arayüzü sağladığımızda (düğmeler, karuseller vb.), kullanıcının metinde herhangi bir şey yazmasına izin vermeyiz.
Neden bunu yapıyorsun? Çünkü bir kullanıcı orada herhangi bir şey yazabilir ve botunuz buna hazır değil. Orada olana kadar, konuşmayı bölmek yerine basit ve kısıtlı tutmak daha iyidir.
Sizin için tavsiye edilen:
Yaptığımız şey şu:


Bu bizim sohbet arayüzümüz
Ve böyle bir şeye sahip olmadığınızda olan şey budur:

Bu, hızlı yanıtlarınız olduğunda kısıtlı metin girişine izin vermeyen Facebook Messenger'dır.
Bitti ve Geçti düğmesi
Bunlar, kodlamaya dayalı sohbet robotlarını her zaman formların bir evrimi olarak düşündüğümüz için dahil ettiğimiz çok küçük iki nüanstır.
Adresinizden mesaj gönderirken veya sohbet arayüzü üzerinden ayrıntılı bir geri bildirim verirken, genel davranış birkaç kelime yazdıktan sonra gönder düğmesine basmaktır ve tüm yanıt sonunda 3-4 ifadeye yayılır. “Bitti düğmesi” ile yazmaya devam edebilir ve tam yanıtı verdikten sonra buna basabilirsiniz.
Böyle bir seçeneğiniz yoksa, makinenin bir sonraki mesajı ilk örneğin kendisinden sonra gelir ve bu da eksik yanıtlara neden olur.

Birden fazla seçenek seçmeniz veya çok satırlı yanıtlar almanız gerektiğinde “Bitti” düğmesine sahip olun
Bir kullanıcının soruyu atlamak istediği durumlar da olabilir ve bunun için “Gönder düğmesi” yerine “Geçti düğmesi” var. Kullanıcı yazmaya başlar başlamaz Pass butonu Send butonuna dönüşür.

E-postanızı vermek istemiyor musunuz? Soruyu atlamak için “Geç”e dokunun.
Otomatik Tamamlama Önerileri
Bu, yazmaya başladığınız google aramadaki otomatik tamamlama işlevi gibidir ve olası seçenekleri önerir. Bu, özellikle uzun bir seçenek listeniz olduğunda ve dikey düğmelere sahip olmak uygun bir seçenek olmadığında kullanışlı olur. Uzun bir yer, şehir, araba modeli vb. listesi düşünün.

Yıldızlar ve Beğeniler
Kullanıcı geri bildirimi veya deneyimi istediğinizde özellikle yararlıdır ve yanıt daha nitelikseldir. Hatta simgeleri yıldızlar, beğeniler, kalpler, ifadeler olacak şekilde özelleştirebilirsiniz.

Görüntü Kartları
Bu, her bir öğe hakkında tek seferde birden fazla bilgiyi sergilemeniz gerektiğinde kullanışlıdır. Yemek sipariş sürecindeki bir burger veya alışveriş akışındaki bir gömlek olabilir. Tüm kartlar birbirine karşı istiflenir ve tüm seçeneklere bakmak için kaydırabilirsiniz.
Bu UI öğesinin 4 bölümü vardır - resim, başlık, açıklama ve alt bilgi. Orada ne göstermek istediğinize bağlı olarak bunları farklı şekilde kullanabilirsiniz.

Tüm bu giriş UI öğelerini test etmek isterseniz, sizi birer birer yönlendiren bir sohbet robotunun bağlantısı burada.
Yalnızca baloncuklar ve bir metin kutusu içeren minimalist bir arayüz olan sohbet, fazla kapsam sağlamaz. Ve mevcut öğeleri kullanarak ve sohbet arayüzüne yenilerini ekleyerek çeşitli etkileşimleri nasıl kolaylaştırabileceğimizi yeniden düşünmemiz gerektiğine inanıyorum.
Mesajlaşma arayüzüyle kendiniz mi oynuyorsunuz ve buna başka harika GUI öğeleri eklediyseniz, bilmek ister misiniz?
[Ish Jindal'ın bu gönderisi ilk olarak Medium'da yayınlandı ve izin alınarak çoğaltılmıştır.]






