Konu Başlıkları
Yükleniyor...

Duygusal Bağ Kuran Arayüz Tasarımı

Tasarımda Duygu: Kullanıcı Sadakati Nerede Oluşur

Bir arayüzü tekrar açmanızın sebebi çoğu zaman özellik listesi değildir. Kullanıcı, ürünü kullanırken kendini nasıl hissettiğini hatırlar: rahatlamış mı, aptal yerine mi konmuş, aceleye mi getirilmiş. Duygusal tasarım bu hissin nereden geldiğini anlamak ve onu tesadüfe bırakmamaktır.

Duygu tek parça değil

Bir arayüzün uyandırdığı hisleri tek bir kutuya koymak işi zorlaştırır. Donald Norman'ın ayrımı burada işe yarar ve birbirinden ayrı üç katmandan söz eder:

  • İçgüdüsel katman: ilk birkaç saniye. Boşluk, kontrast, tipografi, hizalama. Kullanıcı henüz hiçbir şey yapmadan bir yargıya varır.
  • Davranışsal katman: kullanım anı. Butonun beklediğiniz yerde olması, formun hatayı gönderdikten sonra değil yazarken söylemesi.
  • Düşünsel katman: sonrası. Kullanıcının o ürünü başkasına anlatırken kurduğu cümle.

Bu üçü aynı yönü göstermeyebilir. Görsel olarak etkileyici bir ekran ikinci katmanda yorucu çıkarsa geriye kalan his hayal kırıklığı olur. Tersi de görülür: sade, hatta çirkin bir araç yıllarca sadakat toplar, çünkü işi aksatmaz.

Animasyon duygu üretmez, zaman harcar

Duygusal tasarım tavsiyeleri genelde iki şeyi yan yana söyler: hız memnuniyet getirir, mikro etkileşimler haz verir. Bu ikisi aynı bütçeden harcar.

Kademeli giriş animasyonu iyi bir örnek. Yirmi öğelik bir listede öğe başına 50 ms gecikme verirseniz son öğe ekranda 950 ms sonra belirir. Kullanıcı listeyi taramaya başlamadan önce bir saniyeye yakın bekler, üstelik listeyi her açışında.

Bir arayüzün sıcak hissettirmesini animasyon sayısına bağlamam. Hareketin görevi bilgi taşımaktır: bir öğe nereden nereye gitti, hangi panel neyin içinden açıldı. Bilgi taşımayan hareket süslemedir, süsleme de her tekrarında biraz daha pahalıya gelir.

Genel eğilimler ve karşınızdaki kullanıcı

Bazı şeyler herkes için geçerlidir: okunur metin, tahmin edilebilir gezinme, geri alınabilir işlem. Bunlar tabanı kurar, farkı yaratmaz.

Fark, hedef kitlenin kendine has koşullarında ortaya çıkar. Titreyen eliyle telefon kullanan biri için dokunma hedefinin boyutu, panik halinde form dolduran biri için hata mesajının netliği, zayıf bağlantıda gezinen biri için ilk anlamlı çizimin ne zaman geldiği. Aynı ürün, aynı tasarım, çok farklı duygular.

Erişilebilirlik tarafında somut bir tutamak var: prefers-reduced-motion medya sorgusunu dinlemek. Vestibüler rahatsızlığı olan bir kullanıcı için akıcı geçiş hoş değil, rahatsız edicidir. Bu kontrolü eklemek birkaç satır CSS, atlamak ise o kullanıcıyı ürünün dışında bırakmak.

Güven mikro etkileşimde değil, hata ekranında kurulur

Sadakat üzerine yazılan metinler genelde olumlu anları sayar: hoş karşılama ekranı, tamamlanma animasyonu, teşekkür mesajı. Oysa kullanıcıyla aranızdaki bağın sınandığı yer işlerin ters gittiği andır. Ödeme reddedildi, dosya yüklenmedi, oturum düştü.

Bütçeniz sınırlıysa parayı buraya harcayın. Neyin yanlış gittiğini söyleyen, ne yapılacağını gösteren ve kullanıcının girdiği veriyi silmeyen bir hata ekranı, on tane mikro etkileşimden daha fazla güven biriktirir. Boş durum ekranları da aynı sınıfta: ilk kez giren kullanıcı orada ya yolunu bulur ya da sekmeyi kapatır.

Kaynaklar