Mikro Etkileşimler

Sercan Er
Garanti BBVA Deneyim Tasarimi
4 min readAug 20, 2020

Gün içerisinde mobil uygulama ve web sitelerini kullanırken arayüz ile etkileşime geçeriz, farkında olmasak da birçok döngü içine girer ve arayüzün bize ilettiği geri bildirimlerle karşılaşırız. Biz farketmeden mikro etkileşimler bizi yönlendirir ve bilgilendirir.

Microinteractions are the feel.

O’reilly Media’dan çıkan Micro Interactions kitabının yazarı Dan Saffer Mikro etkileşimlerin hisler olduğunu vurguluyor.

Mikro etkileşimlerin kökeni 1970’lere dayanır. O dönemde sosyolojik bir terim olarak kullanılmıştır. Sosyolojideki kullanımı toplumu oluşturan bireylerin arasındaki beden dili, jest ve mimikler olarak karşımıza çıkar. Beden dilimiz karşımızdaki kişi ile olan etkileşimde nasıl hissettiğimizi yansıtır.

İnsanların dışında kediler ve köpeklerde de mikro etkileşim kullanımını gözlemleyebiliriz. Kediler ve köpekler kuyruk hareketleriyle bize çok şey anlatırlar. Örnek olarak bir kedi kuyruğunu sallıyorsa içinde bulunduğu durumdan rahatsız olduğunu belirtir, köpeklerde bu hareket tam tersine memnuniyet göstergesidir.

Arayüz tasarımında mikro etkileşim nedir sorusuna dönecek olursak Mikro etkileşimler, kullanıcı ve tasarımın etkileşime girdiği küçük anlardır. İyi tasarlandıklarında, deneyimi geliştirir. İyi tasarlanmadıklarında, deneyime zarar verebilirler.

https://dash.readme.io/login

Mikro etkileşimler 4 temel unsurdan oluşur:

1- Tetikleyici; kullanıcı tarafından ya da sistem tarafından yapılabilir. Tetikleyici ile mikro etkileşim başlar. Kullanıcı tarafından tetiklenirse kullanıcının aksiyon alması gerekir. Sistem tarafından tetiklenecek yazılım kullanıcının belirli nitelikleri karşıladığını algılar ve eylem başlatır.

2- Kurallar; mikro etkileşim tetiklendikten sonra ne olacağını belirler. Mikro etkileşimin tamamlandığında ne olur, herhangi bir hata durumunda nasıl bir tepki oluşur gibi detayları içerir.

https://dribbble.com/shots/7112021-Order-confirm-animation

3- Geribildirim; kullanıcıların neler olduğunu bilmelerini sağlar. Bir mikro etkileşimde kullanıcının gördüğü, duyduğu veya hissettiği her şey geri bildirimdir.

4- Döngüler ve Modlar; mikro etkileşimin meta kurallarını ve koşullar değiştiğinde mikro etkileşime ne olacağını belirler.

Ne zaman kullanılmalıdır?

  • Bir görevi tamamladığımızda,
  • Bluetooth üzerinden cihazları eşlerken,
  • Sıcaklık değeri, müzik sesi gibi bir ayar yaparken,
  • Durum mesajı gibi küçük bir içerik parçasını görüntülerken veya oluştururken,
  • Bir özelliği veya işlevi açıp veya kapatırken kullanılabilir.
https://dribbble.com/shots/3127832-Device-Pairing

Nasıl Kullanılır?

Tasarımlarımızda mikro etkileşimleri etkin şekilde kullanmak için ürünlerimizin detaylarına odaklanmalıyız. İhtiyaçlar bir kullanıcıyı ürüne ulaştırır, ancak kullanıcının iyi bir deneyim yaşaması ayrıntılara bağlıdır. Başarılı mikro etkileşimler genellikle kullanıcılar tarafından fark edilmez. İyi bir animasyonun görünmez olması gibi bir iyi bir mikro etkileşimi fark etmemeniz gerekir.

Nelere Dikkat Etmeliyiz?

  • Kullanıcınızın sıkılmasına sebep olmamalıyız.
  • Basit olmalı; bu yüzden mikro etkileşimler olarak adlandırılırlar.
  • Sayfa veya durum değişiklikleri için animasyon kullanıyorsanız, iki görsel arasında geçiş yapmak açık, zahmetsiz olmalıdır.
  • Tahmin edilebilir olmalı. Kullanıcılar bir dizi davranış biçimine ayarlanmıştır. Mikro etkileşimler, yerleşmiş davranış kalıplarını değiştirmeye çalışacak yerler değildir.
  • Mikro etkileşimlerin bir amacı olmalı, yapmış olmak için yapmamalıyız.

Örnek Kullanımlar

https://dribbble.com/shots/4825044-Add-to-shopping-bag-microinteraction

Buradaki etkileşimde kullanıcıya sepete ürün eklendiğine dair geri bildirim yapılıyor.

https://dribbble.com/shots/3121019-Connecting-and-error-state-Wi-Fi-animation

Bu örnekte wifi araması ve bağlantı denemesinin hata ile sonuçlanması başarılı bir şekilde kurgulanmış.

https://dribbble.com/shots/4555454-Melting-Pot-Notification-Interaction

iOS notification dan başlayan bir etkileşim. Bu etkileşim mikro diyebileceğimiz seviyenin üzerine çıkıyor olsa da başarılı bir örnek.

https://dribbble.com/shots/5235990-Automotive-Search-Interaction

Leb demeden leblebiyi anlayan etkileşimi görüyoruz.

https://dribbble.com/shots/6248267-Password-Input-Microcopy

Kullanıcıya doğru bilginin geri bildirimi ve hata geri bildirimi yaratıcı bir şekilde veriliyor.

https://dribbble.com/shots/3690844-Password-Strength-Option-1

Kullanıcıya seçtiği şifrenin güvenilirliği anlık olarak gösteriliyor.

https://dribbble.com/shots/6719212-Upload-Button-Animation

Aksiyon aldıktan sonra bir yükleme ve bilgi mesajı vereceksek bunu 3 ayrı ekran yerine tek bir mikro etkileşimle çözebiliriz.

Emojilerin etkileşimi

Mikro etkileşimler günlük hayatımızda yukarıdaki örneklerdeki gibi karşımıza çıkıyor. Bunların yanı sıra günlük hayatımızda sık sık karşılaştığımız ve yazışmalarımızın olmazsa olmazı olan emojiler yer alıyor. Artık emojiler de bizimle etkileşime geçmeye başladı.

giphy.com

Facebook paylaşılan içeriklere verilen tepkileri emojilerle destekliyor. Beğenme butonu çıkacağı söylentileri başladığında kullanıcılar arasında olumsuz durumlar yaşanabileceği tartışılıyordu fakat Facebook hareketli emojiler kullanarak günlük hayattaki duygularımızı içeriklere yansıtmayı başardı. Buradaki hareketler görsel ile hissedilen duyguyu pekiştiriyor. Günlük yazışmalarda sıklıkla kullandığımız ve konuşmamızın bağlamını oluşturan emojiler etkileşime geçtiğinde duyguları daha net bir şekilde yansıtmamıza yardımcı oldu.

giphy.com

Sonrasında tüm emojiler hareketlendi; anomoji olarak da bildiğimiz bu kullanımın yanı sıra Apple hayatımıza memoji’yi soktu. Memoji ile kendi görüntünüzü oluşturup kamera yardımıyla fiziksel dünyada kullandığımız jest ve mimikleri dijitale yansıtabiliyoruz. 1970’lerde sosyolojide beden dili için kullanılan bu terim önce dijitale girdi, şimdi de beden dilimizi dijitale yansıtan bir noktaya erişti. Yazışmalarda bu kullanımlar karşıdaki kişiye duygularımızı aktarmada büyük rol oynuyor hatta kullanılmadığında ilişkilerde krizlere yol açabiliyor.

Son bir mikro etkileşim örneği görmek için aşağıdaki alkış ikonuna defalarca tıklayabilirsiniz :)

--

--