Mikrointeractions: Detaylar ile Tasarlama
“En iyi ürünler iki şeyi iyi yapıyor: özellikler ve detaylar. Ürününüze insanları çeken özellikler nelerdir? detaylar onları orada tutuyor ”diyor Dan Saffer. Detayların önemi aşırı vurgulanamaz. Ayrıntılar kullanıcıların bir uygulamayı veya web sitesini sevmesini veya nefret etmesini sağlar. Mikrointeractyonlar bu detaylardır. Küresel tasarım şemasında kolayca gözden kaçabilirler, ancak aslında tüm deneyimi bir arada tutuyorlar.
Bu yazıda neyin mikrointerakt olduğunu, neden önemli olduklarını ve bazı harika örnekler vereceğini anlatacağım.
Mikro birleşme nedir
Mikrointeractyonlar, tek bir görevi yerine getirirken ortalanmış ince anlardır. Çevremizdeki hemen hemen tüm uygulamalar mikrointeractions ile doldurulur.
Mikro-parçalamanın en iyi bilinen örneği bilgisayarların icat edilmesinden çok önce var olmuştur. Açma / kapama düğmesi çoğu zaman bir ürünle karşılaşan ilk mikro-parçadır.
Belirli mikrointeractyonların diğer bazı örnekleri şunlardır:
- Sessiz mod simgesiyle birlikte titreşim bildirimi, bir iPhone'u sessize aldığınızda görüntülenir.
- Yenilemek için UI modeli. Kullanıcının, ferahlatıcı eylem ile daha fazla içerik bulma isteğini birleştirerek deneyim daha sorunsuz hale gelir.
Resim kredisi: Ramotion
- Etkileşimli animasyonlar kullanarak değişiklikleri vurgulayan sosyal ağlarda 'beğen' düğmesi. Bu tür geri bildirimler, kullanıcıları gönderiyi sevenler listesinde olduklarını bildirir.
Resim kredisi: Dribbble
Neden Çalışıyorlar?
Kısaca, mikrointeractyonlar kullanıcı arayüzünü daha az makine ve daha fazla insan yaparak UX'i geliştirir. Bir çok kez bak ve hisset ve tasarımla nasıl bir ilişki kurduğunu düşünüyoruz. Mikrointeraksiyonları düşündüğümüzde, kullanıcıların ürün, hizmet veya marka hakkında ne hissettiklerini bir denge oluşturuyorlar. Mikrointeractions, insan merkezli tasarımı ince ayar:
- Anında geri bildirim sağlama - Görsel geribildirimler, kullanıcının doğal bildirim isteğine hitap eder. Kullanıcı hemen eylemlerinin kabul edildiğini biliyor ve görsel bir ödülle mutlu olmak istiyorlar.
- Etkileşim için kolaylaştırıcılar olarak hareket etmek - Mikrointeractions, kullanıcıları gerçekten etkileşimde bulunmaya teşvik etme gücüne sahiptir. Kullanıcıları uygulama ile nasıl çalışacakları konusunda yönlendirebilirler.
- Zevk getirme - Microinteractions, ana deneyimlerden uzaklaşmadan tasarımda biraz ekstra zevk için mükemmel bir fırsattır.
Ek yararlar
Mikro parçacıklar doğada kısa olduğundan, tekrar tekrar kullanılmak üzere tasarlanmalıdır. İyi tasarlanmış mikrointeractyonlar şunları oluşturabilir:
Alışkanlık döngüsü
Mikrointeractions, alışkanlık döngülerinin anahtar bileşenleridir. Alışkanlıklar, insanlar aynı eylemleri tekrar tekrar gerçekleştirdiğinde oluşur. Tipik alışkanlık döngüsü üç öğeden oluşur:
- İşaret - eylemi başlatan Tetikleyici
- Rutin - İşarete yanıt olarak, bir eylem gerçekleştirirsiniz
- Ödül - Rutini tamamlamadan elde ettiğiniz fayda, eylemi tamamlama nedeni
Ödül ne kadar güçlü olursa, alışkanlık o kadar güçlenir.
Facebook'un yeni arkadaşlık isteği ile ilgili bildirimi, alışkanlık döngüsünün iyi bir örneğidir: kırmızı rozet ve beyazlaştırılmış simge ( işaret ), kullanıcının yeni kişiyi ( rutini ) görmek için simgeyi ( rutini ) tıklatmasını sağlayan yeni bir istek olduğunu gösterir. Bir süre sonra, kullanıcılar kırmızı rozeti gördüklerinde otomatik olarak simgeye tıklarlar.
İmza anları
İyi bir şekilde yapılırsa, mikrointeractions müşteri sadakatini artıran imza anları olabilir. İmza anları, markanın bir parçası olmak için yükseltilmiş olan mikrointeraksyonlardır. Facebook'un Beğen düğmesi hakkında düşünün. Facebook arayüzünün doğal bir parçası haline gelir. Facebook aniden bu özelliği kaldırırsa, kullanıcılar bunu fark edecek ve uygulamanın bozulduğunu düşünecek.
Fırsatları belirleme
Mikrointeractyonların güzelliğinin bir kısmı, herhangi bir potansiyel aksiyon etrafında çeşitli yerlere yerleştirilebilmeleridir. Mikrointeractyonlar iyidir:
Vurgulanan değişiklikler
Mikrointeraksiyonlar kullanıcı dikkatini yönlendirebilir . Birçok durumda, kullanıcının dikkatini önemli ayrıntılara (yani bildirimlere) çekmek için animasyonlar kullanılır.
Resim kredileri: Dribbble
Kullanıcı çabasını en aza indirgemek
Otomatik tamamlama, büyük bir mikrointerasyon örneğidir. Yazmanın yüksek etkileşim maliyeti vardır; Tam bir klavyeyle (ve hatta daha çok dokunmatik ekranda) bile hataya yatkın ve zaman alıcıdır. Otomatik Tamamlama, kullanıcının doğru cevabı daha hızlı ve yazım hatası olmadan sağlamasına yardımcı olur. Her harfi yazarken, sistem bulmaya çalıştığınız kelimelerle ilgili en iyi tahminde bulunacaktır.
Resim kredileri: fancy.surge.sh
Nelerin başarıldığını göstermek için geri bildirim sağlama
Mikrointeraksiyonlar, kullanıcının gerçekleştirdiği eylemleri pekiştirebilir. “ Göster, anlatma” ilkesini uygulayarak , neyin başarıldığını göstermek için animasyonlu geri bildirimi kullanabilirsiniz. İçinde Şerit örneği Kullanıcı “Pay” a tıkladığında, uygulama başarı durumunu göstermeden önce bir spiker kısaca görünür. Checkmark animasyonu, kullanıcıların kolayca ödeme yaptıklarını hissettiriyor ve kullanıcılar bu kadar önemli detayları takdir ediyor.
Durum bilgisi sağlayın
Jakob Nielsen'in ilk kullanılabilirlik sezgisel ilkesi şunları söylüyor: Sistem, her zaman kullanıcılara neler olup bittiği hakkında bilgi vermelidir. Sohbette yazım göstergesi, durum bilgisi sağlayan mikrointeraksiyonların mükemmel bir örneğidir. Sohbet sırasında bir mesaj oluştururken arkadaşınızın ekranında görünür.
Resim kredileri: Dribbble
Kullanıcı verilerini doğrula
Form tasarımının en önemli ve çoğu zaman gözden kaçırılan en önemli kısımlarından biri hata işlemidir . Yine de hata yapmak için insan doğası ve formunuz muhtemelen insan hatası için muaf değildir. Kullanıcılar, sadece başvuruda bulunmak için bir form doldurma sürecinden geçtiklerinde hoşlanmıyorlar, bir hata yaptılar. Doğrulama mikrointeraksiyonunun oynadığı yer burası, kullanıcı dostu bir formda yer almaktadır. Gerçek zamanlı satır içi doğrulama, kullanıcıları sağlanan verilerin doğruluğu konusunda hemen bilgilendirir. Bu yaklaşım, kullanıcıların hataları görmek için gönder düğmesine basana kadar beklemek zorunda kalmadan yaptıkları hataları daha hızlı düzeltmelerine olanak tanır. Doğru yapıldığında, belirsiz bir etkileşimi net olana dönüştürebilir.
Sonuç
Tasarım detaylarda. Küçük detaylar bile dikkati hak ediyor, çünkü tüm bu küçük anlar bu hissi yaratıyor, güzel bir bütünsel ürün oluşturmak için bir araya geliyorlar.
“Sevdiğimiz ürünler ve basitçe tolere ettiğimiz ürünler arasındaki fark genellikle onlarla sahip olduğumuz mikrointeractiyonlardır.” - Dan Saffer
Kullanıcı deneyimini önemsiyorsanız, mikrointeraksiyonları önemsemelisiniz. Çünkü ürününüz, insanların sahip olduğu en küçük mikro parça kadar iyidir.