Mikro etkileşim, bir web sitesinde kullanıcının yaptığı küçük bir eyleme verilen anlık ve küçük ölçekli geri bildirimdir; butonun basılınca renk değiştirmesi, formun gönderildiğini onaylayan işaret ya da yüklenme göstergesi gibi ayrıntılardır.
Mikro etkileşimler, arayüzün kullanıcıyla kurduğu küçük diyaloglardır. Dört parçadan oluşur: tetikleyici (kullanıcı butona basar), kural (ne olacağı), geri bildirim (buton kısa süre koyulaşır, onay işareti çıkar) ve varsa döngü ya da durum değişikliği. Örnekleri her yerdedir: alanın doğru doldurulduğunu gösteren yeşil işaret, sepete eklendiğinde sayacın artması, sayfanın yüklendiğini gösteren ince ilerleme çubuğu, menünün yumuşakça açılması. İyi bir mikro etkileşim fark edilmez ama yokluğu hissedilir.
İşletme sahibi için neden önemli
Kullanıcı bir şeye bastığında bir şey olduğunu görmezse tekrar basar, formu iki kez gönderir ya da sitenin bozuk olduğunu düşünür. Mikro etkileşimler bu belirsizliği ortadan kaldırır ve siteye özenli, güvenilir bir his verir. Formlarda anlık doğrulama, hataların gönderimden sonra değil yazarken fark edilmesini sağlar; bu hem kullanıcıyı hem de destek ekibinizi rahatlatır. Ölçüsü kaçırılmadığında marka kimliğinin bir parçası olur.
Örnek
Bir e-ticaret sitesinde sepete ekle butonuna basıldığında hiçbir görünür değişiklik olmuyor, kullanıcılar aynı ürünü birkaç kez ekliyordu. Butona basıldığında kısa bir onay animasyonu, üstteki sepet simgesinde sayı artışı ve butonun geçici olarak 'Sepette' yazısına dönmesi eklendi. Mükerrer eklemeler ve buna bağlı destek talepleri azaldı; ekip bunu sipariş kayıtlarından izledi.
Sık yapılan hata
Etkileşimi gösteriş için kullanmaktır: her kaydırmada uçuşan öğeler, uzun animasyonlar, sürekli hareket eden arka planlar. Bunlar dikkati dağıtır, telefonu yorar ve bazı kullanıcılarda rahatsızlık yaratır. İkinci hata, geri bildirimi yalnızca renkle vermek; renk körü kullanıcılar için metin ya da simge de gerekir. Üçüncüsü, hareketi azaltma tercihini (işletim sistemi ayarı) dikkate almamaktır.
Teklif alırken sorulacak soru
Form doğrulama, buton durumları ve yüklenme göstergeleri gibi geri bildirimler tasarımda tanımlanacak mı? Animasyonlar kullanıcının hareketi azaltma tercihine saygı gösterecek mi?
Sık sorulanlar
Mikro etkileşimler siteyi yavaşlatır mı?
Doğru uygulandığında hayır; CSS ile yapılan kısa geçişler çok hafiftir. Ağır betik kütüphaneleriyle yapılan karmaşık animasyonlar ise yük getirebilir.
Animasyon ile mikro etkileşim aynı şey mi?
Değildir. Mikro etkileşim kullanıcının eylemine verilen amaçlı geri bildirimdir; animasyon bunun araçlarından biridir ve amaçsız kullanıldığında yalnızca süs olur.