Diyalog Tasarımı — İnsan Cihaz Etkileşiminin Son Evresi

Geçtiğimiz günlerde Kolektif House Maslakta her ay gerçekleştireceğimiz IOX, Userspots ve Kolektif işbirliğiyle yaptığımız Dual Talks:Innovation Talks kapsamındaki etkinliğin ilkini gerçekleştirdik. Konumuz “Diyalog Tasarımı” idi. Bu yazıda da sunumda konuştuğumuz konuları anlatmak istiyorum.

Diyalog Tasarımı Nasıl Yapılır?

Diyalog tasarımına gelmeden önce dijital ortamda insan cihaz etkileşiminin gelişimine bu ihtiyacın oluşma sebeplerine ve onun evrimine bakmamız gerekiyor. İnsan makina etkileşimi dediğimiz alanda makinaya ilettiğimiz belli inputlar ve makinanın de bize bazı bilgileri verdiği ses, ekran gibi sistemler var. Bu sayede makinalar ile etkileşime geçiyoruz. İnsan-cihaz etkileşimini anlamaya çalışan makalelerinin 1900'lü yılların başında 1.Dünya Savaşı öncesinde Almanya’da yoğun bir şekilde yapıldığını görüyoruz.

İnsan- makina etkileşimi çalışmaları “Ergonomi” ve endüstriyel ürün tasarımı alanlarınının doğmasını da sağladı. Görünümün fonksiyonu takip ettiği (aka. Form Follows Function) o günlerde ürün ile insan etkileşiminin test edilmesi ve kullanılabilirliğin ölçülmesi kavramları da ön plana çıktılar.

Xerox laboratuvarlarında grafiksel arayüz ve fareyi keşfeden bilim insanları sayesinde; insan-makine etkileşimi, insan-bilgisayar etkileşimine evrildi. Bu evrimle hayatımıza yerleşecek olan “Masaüstü” fenomeni ortaya çıktı. Kişisel bilgisayarı tasarlarken tasarımcılar kendilerinine şu iki soruyu sorarak bir ofis çalışanının çalışma ortamı ile birebir aynı olan “Masaüstü” fenomenini icat etmiş oldular;

  • Bilgisayarı kim kullanacak?
  • Nerede kullanacaklar?

İlk arayüzü tasarlayan kişiler bu iki sorunun cevabını arayıp aşağıdaki arayüze ulaştılar. Bilgisayarı ofis çalışanları daktilonun yerine ve ofis masalarının üzerinde kullanacaklardı, ilk arayüzün de bu dünyaya yakın olmasına çalışıldı. Dosyalar, klasörler, çöp kutusu gerçek hayattan dijitale aktarılan yapılar.

Hala devam eden “masaüstü” fenomeninin başlangıç noktaları…

Bu konseptin aslında bir adı var, kendisine skeuomorphism deniyor. (Doğru söyleyemeyen tasarımcı değildir gibi bir espri de yapabilirsiniz burada) Fiziksel dünyadaki yapıları dijital dünyaya aktarmayı özellikle de bir geçiş dönemindeyken sık sık kullanıyor tasarımcılar.

Benzer şekilde dokunmatik ekranlar ile hayatımıza yeni etkileşimler girerken, tasarımcılar yapılan arayüz tasarımlarında kullanıcının ortamını birebir taklit etmeyi tercih ettiler. Dergilerinizin olduğu kitaplık gerçek bir kitaplıktı, ses kaydı aldığınızda Zeki Müren mikrofonu görünümlü bir mikrofon ile sesi kaydederdiniz. Çünkü kullanıcının arayüzü kullanırken yabancılık çekmemesi asıl amaçtı.

Daha sonra Metro UI ve Flat design hayatımıza girdi ve arayüz tasarımı fiziksel dünya objelerinden ve üçüncü boyuttan farklı bir yapıya kaydı. Bu alandaki ilk derli toplu çalışmanın Microsoft tarafından yapılması da enteresandır aslında. Metro UI isim haklarıyla ilgili yaşanan sıkıntı, her ekranın dokunmatik olacağı varsamıyla yapılan masaüstü tasarımların son kullanıcı tarafından “Başlat” menüsü bulunamadığı için benimsenememesi gibi durumlar nedeniyle “Flat Design” konseptini yayamadılar/yayan şirket olarak anılamadılar. Tarihin en hızlı yazılım update’inin yaşandığı (1 hafta içinde IOS6 kullanıcılarının %70'i 7'ye geçmişti, geçmeyeni aforoz ediyorlardı) IOS6/IOS7 değişimi ile Flat yapının öncüsü olarak Apple anılmaya başlandı.

IOS6 vs. IOS7, Ive vs. Marshall, Skeuomorphism vs Flat

İnsan-İnsan Etkileşimi — Diyalog Örnekleri

Etkileşim tarihinin öne çıkan noktalarından bahsettikten sonra gelelim yazının konusuna. Konumuz etkileşimde devrim yaratma sırası olan diyaloglarda. Makine etkileşimi artık insan-insan etkileşimine evrilme noktasında.

Burada ufak araya gireyim, evrilmesini istediğimiz insan-insan etkileşimi yapısının şu an ne kadar doğru bir etkileşim olduğundan çok da emin değilim. Temel olarak birbirimizi dinlememek ve bilgi aktarımımızın çok zayıf olması gibi problemlerimiz var. Bir çok diyalogda karşımızdakini dinliyor taklidi yaparken söyleyeceğimiz şeyi düşünüyor ve konuşma fırsatı bekliyoruz. Biz anlatırken de karşımızdaki aynı şeyi bize yapıyor. Her filmindeki gibi işletim sistemler filmdeki anlama seviyesine ulaştıklarında onlarla çok yakın olmamız -hatta sevgili bile olmamız- gerçekten çok olası geliyor.

Mevcut durumdaki insan makina diyaloglarına dönersek de bu etkileşimin de büyük problemleri var. Makinalar bizi hem anlamıyorlar, hem de diyalog ikinci veya taş çatlasa üçüncü kırılıma geçtiğinde Kayıp Balık Nemo’daki unutkan balık Dory’ye dönüşüyorlar.

Unutkan Balık Dory

Şimdilik bu eksik noktaları göz ardı ederek, teknolojinin gelişme hızı nedeniyle yakın zamanda neredeyse bütün işlemlerimizi diyaloglar ile çözeceğimizin tahminini yapabiliriz. Hatta şimdiden bir çok güzel örneğe de sahibiz. Örnek yapıların şöyle de bir güzelliği var, çoğu örnekte karşınızda bir chat bot veya fiziki bir asistan olmasına da gerek yok. Bu sadece konuşuyormuş taklidi yapan bir arayüz bile olabilir; önemli olan sizinle konuşuyormuş gibi yapması. Hatta bu “Mış gibi yapan” sistemlere baktığınızda sizi anlamaya çalışıp anlayamayan mobil asistanlardan daha başarılı olduğunu görebilirsiniz.

Buna örnek olarak; Lemonade’in sigorta satış sürecinde form alanını incelediğinizde sizinle konuştuğunu göreceksiniz. Formun etkileşimine bakacak olursak. Girişte ismi Maya olan birisi sizi karşılıyor ve adınızı öğrendikten sonra artık size isminizle hitab etmeye başlıyor. Ayrıca bir bilgiyi isterken karşı tarafı neden istediği konusunda mutlaka bilgilendiriyor. Bu da kullanıcıda güven hissini oluşturuyor. Diyalog tasarımında dikkat edilmesi gereken unsurları toplarlarsak; daha samimi, daha güvenilir ve kullanıcının dilini konuşan bir tasarım her zaman kazanıyor. Diyalogları kısıtlayın, kontrol sizde olsun.

Sigorta Asistanı Maya!

Benzer şekilde Ada Health de sağlık problemlerinizi anlamaya çalışırken diyalog temelli bir arayüz sunuyor ama aslında arkada uzun bir form doldurmaktan farklı bir şey yapmıyorsunuz.

Ada — Kişisel Sağlık Asistanı

Bu iki sisteme baktığımızda yapacağım tavsiye şudur, bulunduğumuz bağlamın her türlü fırsatını kullanmalıyız; bu etkileşim noktasında sadece cümleler göstermek zorunda değilsiniz. E-ticaret sitesinde bir ürün, biletleme şirketinde bir boarding pass vb. her şeyi kullanabilirsiniz. Bu konuda Intercom’un chat arayüzü akışın chat penceresi içinde kalması için bir çok farklı etkileşimi sunuyor.

Intercom — Chat Deneyimi

Bir diğer güzel örnek olarak Typeform’da yazılan etkileşimli bir makalesini gösterebiliriz. Bu makaleye ikinci, üçüncü kez geldiğinizde size “tekrar hoşgeldin” diyerek size isminizle hitap ediyor. Bu küçük detay sayesinde bu makale Typeform’un en çok okunan makalelerinden biri oldu.

Typeform — Diyalog Odaklı Blog Yazısı

Facebook Messenger botları özellikle KOBİ’lerin randevu ve müşteri ilişkilerini yönetmeye odaklanmıştı, FB Messenger da neredeyse bütün örneklerinde chatbot’un diyalogda kişinin cevaplaması için açık bir alan bırakmak yerine seçenekler sunuyor ve diyalogu kontrol ediyor.

KLM Facebook Messenger Bot

Fizikselde diyalog tasarımını kullanan cihazlara çok klasik örnekleri verebiliriz. Siri, Google Home, Alexa, vb. sistemler daha çok yeni olduğu için hala sıkıntıları mevcut, anlama ve diyalogun devam etmesi noktasında Tabii ki geliştirilerek hayatımızın bir parçası olacaklarını ön görüyoruz.

Etkileşimde Diyalog işini outsource edebileceğimiz yenilik Google Duplex’i de hepimizi şaşırtan yapısıyla aşağıda izleyebilirsiniz. Hemen aklıma “Arayan kişinin bir robot olup olmadığını anlayan” servis fikri geldi. Bu noktada kendimize şunu sorabiliriz, hangi diyalogları outsource edelim? Bayramda ve kandillerde tanıdıkları arama, iş başvurularında ön görüşmeleri yapma IOX ofisinden çıkan ilk fikirler :)

Diyalog tasarımının yanında insanı bir input olarak almak da benzer şekilde yükselişte. “Human As Input” olarak isimlendireceğimiz yapıyla sadece diyalog kurmak değil; parmak izi, retina ve yüz okuma sistemleri gibi biyometrik datamız da etkileşimimize katılmaya başladı. Bu da başka bir yazının konusu olsun, şimdi diyalog tasarımı alanda neler yaptığımızdan bahsedelim.

IOX Digital İnovasyon Kamp Projesi

IOX Digital olarak İnovasyon kampında geliştirdiğimiz bir kişisel asistan fikrimiz var. Kişisel asistanınızın size özel personası olduğunu hayal edin; isterseniz bir Şef, bir İngilizce öğretmeni veya Darth Vader asistanınız olabilir.

Teaser 1:

Teaser 2:

Projeyi geliştirmeye devam ediyoruz, adım adım ileteceğiz tüm gelişmeleri. Şimdi ise başka bir projedeki çalışma prensibimiz üzerinden Diyalog Tasarımı yaklaşımımızı anlatalım.

Diyalog Tasarımı — Akış Çizmekten Ötesi

IOX Digital olarak bir projemizdeki deneyimlerimizi yol gösterici olacağını umarak sizlerle paylaşmak istiyoruz. Bu projedeki diyalog tasarımı sürecini 4 aşamaya bölmüştük, adımlar temel olarak şöyle: Prensipleri Belirleme, Personaları Oluşturma, Diyalog Yapısı Tasarlama ve Diyalog Haritası Oluşturma

1.Prensipler

Cooperative Principle

Her alanda bazı prensipler olduğu gibi “Diyalog Tasarımı” alanında da uyabileceğimiz bazı prensipler bulunuyor. Paul Grice’ın diyalogda iki tarafın da işbirliği içinde olması için metinlerin şu 4 temel maddeyi içermesi gerekiyor: Nicelik, Nitelik, Bağlantı ve Tarz

Grice’e göre, nicelik (quantity) ilkesi, sağlanacak bilginin miktarı ile ilgili olup şu kuralları içermektedir: 1: Konuşmada istenen bilgi verilmelidir. 2: Gerekli olandan fazla bilgilendirici olunmamalıdır.

Nitelik (quality) ilkesi, “Katkınız gerçek olmalı.” başlığında iki kural içermektedir: 1: Yanlış olduğuna inanılan bir bilgi söylenmemelidir. 2: Eksik bilinen bir şey söylenmemelidir.

Bağlantı (relevance) ilkesi, bağlama uygunlukla alakalıdır. Konuşmada konu dışına çıkılmamalı, karşıdakinin söylediğiyle alakasız sözler söylenmemelidir.

Tarz (manner) ilkesi ise, ne söylendiğinden çok nasıl söylendiğiyle alakalıdır. Bu ilke de “Açık olun” başlığında dört kuralı kapsamaktadır: 1: Anlatımın belirsizliğinden, kapalılığından kaçınılmalıdır. 2: Bulanık ifadelerden kaçınılmalıdır. 3: Açık, kısa ve öz konuşulmalıdır. 4: Belli bir sıra takip edilmelidir.

Ayrıca sistemin ihtiyacına göre farklı prensipleri de belirleyebilirsiniz:

Örneğin:

“Asistan asla 10 saniyeden fazla konuşmamalı.”

“Asistan mecaz kullanmamalı”

Özellikle Grice’ın bahsettiği 4 madde doğru iletişimin temelini oluşturan prensipler. Tüm etkileşim bu prensipler doğrultusunda oluşsaydı etkileşimler fazlasıyla sıkıcı olurdu. Etkileşimi bu sıkıcılığa mahkum etmemek için tavırda bir takım yeniliklere gitmeyi hedefleyerek asistanımıza karakterler oluşturmaya yoğunlaşıyoruz.

2. Persona

Karakter oluşturma safhasında personalar devreye girdi. Personaları, sürekli ciddi ve mesafeli bir etkileşim gerçekleştirmek yerine, işlemi tamamlamadan önce veya tamamladıktan sonraki tavrında bir farklılık yaratılabilir veya sadece bilgi almak istediğinizde daha samimi bir tavırla etkileşime geçebilir düşüncesiyle ele aldık.

Aslında insan-insan ilişkisinde de bu yapı mevcut, örnek olarak yöneticinizi düşünebilirsiniz. Bir satış toplantısında, beraber direktöre bir sunum , öğle yemeğinde veya happy hour’da size farklı şekillerde davranabilir ama bu onun aynı insan olduğu gerçeğini değiştirmez. Tarzı aynı olmak kaydıyla farklı yerlerde farklı tonlarda davranış gösterebiliriz.

Asistan’ın tarzları — Persona bu değil evet :)

3. Diyalog Yapıları

Diyalog tasarımında ise çeşitliliği ve verimi arttırmak için cümleleri; karşılama, tanışma, açıklama, soru ile kapanış şeklinde bölümlere ayırdık ve her bölüm için alternatifler oluşturduk. Sabah saatlerinde etkileşime geçildiğinde “Günaydın” ile karşılama yaparken, akşam karşılamayı “İyi akşamlar” ile yapan yada ikinci kez etkileşime geçildiğinde “Tekrar Merhaba” ile etkileşime başlayan bir yapının daha samimi ve sıkıcılıktan uzak olacağını fark ettik.

Bu yapıyla bir cümleyi 625 farklı şekilde kurabilirsiniz.

Tasarımı tamamladıktan sonra sıradaki adım Diyalog kodlaması oldu. Diyaloğu etkileyen 5 parametre mevcut. Persona, İfade/Tavır, Animasyon, Ekran/Arayüz ve Koşul Cümleleri. Bu parametrelerin kütüphanede kategorize edilmesi; gelen etkileşime göre belirlenen yönlendirme veya seçenek sunma konusunda büyük bir kolaylık sağladı.

Diyalog işaretlemesi

Örnek Tablo:

Diyalog yapılarının kodlanması…

4. Diyalog Haritası

Akışın son adımı olarak Diyalog Haritası oluşturduk. Bunu tüm akış yolunun çizilmesi olarak özetleyebiliriz.

Küçük bir diyalog haritası…

Diyalog Tasarımı Tavsiyeleri

Bu yolculukta edindiğimiz tecrübeler doğrultusunda vermek istediğimiz tavsiyeler ise şunlar:

Tekdüze ve Sıkıcı Olma. Farklı cümleler kur.

Hep aynı cümlelerle aynı şekilde karşılamak veya cevap vermek yerine biraz yaratıcı olabilir ve farklı cümle kalıplarını kullanabilirsiniz.

Önce sen kapat! Diyalogların kontrolü hep sen de olsun.

Diyalog tamamen asistanın kontrolünde olmalı ve son kullanıcıdan olabildiğinde çoktan seçmeli sorular ile cevapları alarak ilerlemeye çalışmalısınız. Dili anlamlandırma seviyesi hala yeterli bir noktada değil.

Mecaz kulanma. Olabildiğinde yalın ve kullanıcının dilinde kal.

Yalın, basit anlaşılabilir olmak, gündelik konuşma dilinde kalıp başka anlamlara gelecek ifadeler kullanmamak önemli.

Kontrolü elden bırakma. Bağlama hakim ol, bağlamda kal.

Kullanıcı ile etkileşime girilen alanda her işlem tamamlanmalı. Bir link verip “Aradığınız bilgi/ürün bu sayfada” demek yerine işleme diyalog ile devam etmeye çalışmalıyız.

404 sayfası yok. Hatayı kontrol altına al.

Kullanıcının veya asistanın anlamadığı durumlar için ne yazık ki bir 404 sayfası şansımız yok, hataları olabildiğinde kontrol altına alıp çıkış noktalarını tasarlamalıyız.

Bu alanla ilgileniyorsanız ve eklemek istedikleriniz varsa lütfen yorum yapın, tecrübelerinizden faydalanmayı çok isteriz.

Yenilikleri ve etkinlikleri takip etmek için: