Tasarım yönergeleri (Dialogflow)

Etkileşimli Tuval tasarımının iki ana yönü vardır:

  • Konuşmayı tasarlama
  • Kullanıcı arayüzünü tasarlama

Kullanıcılarınız, Asistan'la konuşarak veya kullanıcı arayüzüne dokunarak Etkileşimli Tuval kullanan İşleminizle etkileşimde bulunabilirler. Konuştuğunuz sohbetin ve kullanıcı arayüzünün birbirini tamamlamasını sağlamalı ve kullanıcıların İşleminizde ilerlemesini kolay ve heyecan verici hale getirmelisiniz. Bu bölümde, hem konuşmanın hem de kullanıcı arayüzünün en iyi kullanıcı deneyimi için nasıl tasarlanacağından bahsedeceğiz.

Etkileşimli Tuval, İşlemim için uygun mu?

Tasarlamaya başlamadan önce işleminizin Etkileşimli Tuval ile iyi çalışıp çalışmayacağını düşünün. Aşağıdaki durumlarda Etkileşimli Tuval'i kullanmayı düşünebilirsiniz:

  • İşleminiz tam ekran ve görsel açıdan zengin deneyimlerden faydalanabilir. Etkileşimli Tuval, ses odaklı etkileyici oyunlar gibi zengin görsellerden yararlanan tam ekran deneyimler için idealdir.
  • İşleminizin sezgisel bir sohbet akışı var. İşleminiz boyunca kritik yolda yalnızca sesli olarak gezinebilmelisiniz. Çizim uygulaması gibi uzamsal hassasiyet gerektiren bir İşlem, sezgisel bir sohbet akışı tasarlamak için zor bir deneyim sağlayabilir.
  • Mevcut bileşenler ve özelleştirme yeterli olmaz (örneğin, mevcut Asistan görsel bileşenlerinin ve özelleştirmesinin ötesine geçmek istiyorsanız). Etkileşimli Tuval, benzersiz görsel marka özelliklerinizi, dinamik öğelerinizi ve animasyonlarınızı sergilemek için idealdir. Ayrıca, kullanıcı görüşmede ilerledikçe tek bir görsel arayüze güncelleme sağlamak için Etkileşimli Tuval kullanılabilir.

Koşullar

Etkileşimli Tuval, aşina olduğunuz bir web geliştirme ortamı olsa da İşleminizi tasarlamadan önce dikkate almanız gereken bazı gereksinimler vardır.

Her tuval web uygulamasının üst kısmında markanızın adını içeren bir başlık bulunur. Bu ayrılmış alanın yüksekliği mobil cihazlar için 56 dp, Home Hub için 96 dp ve Akıllı Ekran için 120 dp'dir. Aşağıdaki başlık gereksinimine uyduğunuzdan emin olun:

  • Başlığın arkasına hiçbir önemli bilginin veya etkileşimli öğenin gizlenmediğinden emin olun. getHeaderHeightPx() yöntemi, üst bilginin yüksekliğini belirler.
Şekil 1. Başlığın çeşitli İşlemlerde nasıl göründüğüne dair örnekler.

Sınırlamalar

İşleminizi Etkileşimli Tuval ile tasarlamadan önce aşağıdaki kısıtlamaları göz önünde bulundurun:

  • Veriler yerel olarak depolanmaz. İşlemin çerezleri depolamasını ve Web Storage API'ye erişmesini engelleriz. Bu kısıtlamalara göre, İşleminizin webhook'taki durumu yönetmesini ve kullanıcı verilerini kaydetmek için AppRequest'in userStorage alanını kullanmasını öneririz.
  • Pop-up veya kalıcı iletişim pencereleri olmamalıdır. İşlemin pop-up pencereler veya kalıcılar göstermesini engelleriz. Ayrıca, klavyeler ve sayfalara ayırma gibi web uygulamalarında genellikle gördüğünüz diğer standart gezinme kullanıcı arayüzü öğelerinin kullanılmasını da kesinlikle önermeyiz.

Konuşmanızı tasarlayın

Öncelikle İşleminizin görüşmesini tasarlamanız gerekir. Etkileşimli Canvas deneyimleri hâlâ sesli çalışır. Bu nedenle, görüşmenizin kullanıcıyı İşleminiz sırasında etkili bir şekilde yönlendirmesi önemlidir. Etkileşimli Tuval'i kullanan bir İşlemi, faydalı görseller içeren bir sohbet olarak düşünebilirsiniz. İleti dizilerini tasarlama hakkında daha fazla bilgi için Sohbet Tasarımı sitesinin Başlarken sayfasına bakın.

Yönergeler

En iyi kullanıcı deneyimi için şunları yapmalısınız:

  • Sohbet tasarımı sitesindeanlatılan konuşma tasarımı sürecini ve en iyi uygulamaları takip edin. Bu, diğer hususların yanı sıra şunları yapmanız gerektiği anlamına gelir:

    • İşlem deneyiminizin görüşme için iyi çalıştığından emin olun
    • Bir marka karakteri oluşturun
    • Görüşmenizdeki hataları ele alma
    • Bir ekrandaki görüntünün nasıl görüneceğini karar vermeden önce yalnızca sesli bir deneyim

  • Dokunma ve ses yoluyla aynı özellikleri sağlamaya çalışın. Mümkünse, ekrana dokunarak yapabildiğiniz her şeyi, sesinizle de yapabileceğinizden emin olun.

  • İşleminizde sesli olarak kritik yolun mümkün olduğundan emin olun. Kullanıcılarınız İşleminizin ana yollarında yalnızca ses kullanarak gezinebilmelidir.

  • Kullanıcının işleminizi ses olmadan kullanabildiğinden emin olun. Mobil cihazlarda kullanıcı ses açamayabilir. Bu nedenle, kullanıcıyı yönlendirmek için İşleminize transkriptler ekleyebilirsiniz.

  • Bilişsel yükü dikkate alın. Kullanıcının bilişsel yükünü azaltmak için aşırı uzun sesli yanıtlardan kaçının.

Kullanıcı arayüzünüzü tasarlama

Sohbetinizi tasarladıktan sonra, kullanıcı arayüzünüzü de buna uygun şekilde tasarlayabilirsiniz. Tasarım yaparken diyalogların doğal bir şekilde, kullanıcıya sunduğunuz görsel arayüzü nasıl yönlendirebileceğini düşünün. Akıllı Ekranlar için tasarım yapıyorsanız Akıllı Ekranlar için Tasarlama bölümündeki özel noktalara bakın.

Yönergeler

En iyi kullanıcı deneyimi için şunları yapmalısınız:

  • Duyarlı tasarımlar oluşturun. Tasarımlarınızın hem yatay hem de dikey modda çalıştığından ve küçük telefonlardan büyük ekranlara kadar her yere dayandığından emin olun. Kullanıcılarınız her yüzey türü için kullanıcı arayüzünü kolayca okuyabilmelidir.
  • Bilişsel yükü dikkate alın. Kullanıcılarınızı bunaltmamak için ekranda sunduğunuz bilgi ve içeriği düzenli, temiz ve kısa tutun.
  • Ses çıkışını ekrana uyarlayın. Söylenenleri yüksek sesle yazmayın, sesi tamamlamak için görsellerinizi yaratıcı bir şekilde kullanın. Bir ekran kullanılabilir olduğunda ses çıkışı, ekran altyazıya kıyasla daha kısa ve öz olabilir.
  • Önemli bilgileri veya bileşenleri ekranın alt kısmına yerleştirmekten kaçının. Mobil cihazlarda, kullanıcı transkripti mikrofon plakasının üzerinde görünür ve birkaç satıra kadar büyüyebilir. Bu transkript geçici olsa da önemli içerikleri ekranın alt kısmına doğru yazmaktan kaçının. Öneri çiplerine benzer düğmeler, kullanıcı girişine alternatif olduğu için ekranın alt kısmında sorunsuz bir şekilde çalışır.
  • Görüşmenizdeki hataları görsel olarak ele alın. Kullanıcı yanıt vermediğinde, onu anlamadığınızda veya söylediklerini yerine getirmediğinizde hatalar ortaya çıkabilir. Bu hata istemlerinin kullanıcı arayüzünüzde nereye gittiğini bulun. Bu, ekran istemlerinizi yerleştirdiğiniz bir yer (ör. başlık) veya farklı bir şey (ör. gerektiğinde görünen özel bir içerik alanı) olabilir. Hata işleme hakkında daha fazla ipucu için Sohbet tasarımı sitesine bakın.

Akıllı Ekranlar İçin Tasarım

Yukarıdaki yönergeler geçerli olmaya devam etse de Akıllı Ekranlar için tasarım yaparken dikkat edilmesi gereken diğer noktalara dikkat etmeniz gerekir. Onlar için tasarlarken Akıllı Ekranları tablet gibi kullanmak cazip gelebilir. Ancak Akıllı Ekranlar iki nedenden dolayı tamamen farklı ve yeni bir cihaz kategorisidir:

  • Akıllı Ekranlar ses özelliklidir ve Google Asistan, işletim sistemidir.
  • Akıllı Ekranlar sabittir ve mobil cihazların aksine evde kullanılırken genellikle mutfağa veya yatak odasına yerleştirilir.

Bu özelliklerden dolayı, kullanıcılar bazen fiziksel olarak cihazın yakınında olmamaları ve Akıllı Ekranlarla yalnızca seslerini kullanarak etkileşimde bulunmalarıdır. Kullanıcılar, Akıllı Ekranları kullanırken de birden fazla işi aynı anda yapıyor olabilirler. Akıllı Ekranlar için tasarım yaparken bu kullanımları göz önünde bulundurmak önemlidir.

Yönergeler

Akıllı Ekranlarda en iyi kullanıcı deneyimi için şunları yapmalısınız:

  • Tasarım sürecinde ses odaklı tasarım. Etkileşimli Tuval İşleminizi sesli öncelikli olacak şekilde tasarlama Akıllı Ekranlar için daha da önemlidir. Mobil cihazdan farklı olarak, kullanıcınız odanın karşısında duruyor ve Akıllı Ekran'ıyla yalnızca ses yoluyla iletişim kuruyor olabilir. Bu nedenle, İşleminize devam etmesi için cihaza dokunan kullanıcıya her zaman güvenemezsiniz. Ayrıca kullanıcılarınızın, İşleminize ses kullanarak devam edebildiğinden emin olmanız gerekir.
  • Belirli bir görüntüleme mesafesini göz önünde bulundurarak tasarım yapın. İçeriğinizi Akıllı Ekran'da, uzaktan görüntülenebilecek şekilde tasarlayın. Odanın boyutuna bağlı olarak, akıllı ekranların tipik görüntüleme mesafesi 1 metre ile 3 metre arasında değişir.
    • Başlıklar gibi birincil metin için en az 32 punto yazı tipi boyutu kullanın. Açıklama veya metin paragrafı gibi ikincil metinler için en az 24 punto kullanın.
  • Tek seferde bir temas noktasına odaklanın. Bilişsel iş yükünü azaltmak ve içeriğin uzaktan okunabilmesi için aynı anda bir tür birincil bilgi veya görev görüntüleyin. Örneğin, kullanıcılar "Günüm nasıl?" diye sorduğunda Asistan hava durumu, takvim, işe gidip gelme ve haber içeriğiyle yanıt verir. Her içerik türü tüm ekranı kaplar ve hepsi ekranda aynı anda gösterilmek yerine sıralı olarak sunulur.

Kaynaklar

Etkileşimli Tuval kullanan bir İşlem tasarlama hakkında daha fazla bilgi için aşağıdaki kaynaklara göz atın: