UX, kullanıcıların markalarımızla nasıl etkileşime girdiği ve markalarımızı nasıl algıladığı konusunda çok önemlidir. Kullanıcılarımız hakkında ne kadar çok şey anlarsak, onlara ihtiyaç duydukları şeyleri istedikleri ve bekledikleri şekillerde vermemize o kadar çok olanak sağlar. Teknoloji ilerledikçe, sağlayıcılardan müşteri yolculuğunu her aşamada daha basit ve daha keyifli hale getirmeleri bekleniyor ve çoğu zaman kullanıcı farkında olmadan, bu küçük etkileşim tasarımı ayrıntıları kabul edilebilir veya işlevsel bir ürün ile harika bir ürün arasındaki farkı yaratıyor.
Mikro Etkileşimler Nedir?
Nielsen Norman Group'a göre,
Mikro Etkileşimler (1) tetikleyicinin bir kullanıcı eylemi veya sistem durumundaki bir değişiklik olabileceği; (2) geri bildirimin tetikleyiciye dar hedefli bir yanıt olduğu ve kullanıcı arayüzündeki küçük, yüksek bağlamsal (genellikle görsel) değişiklikler yoluyla iletildiği tetikleyici-geri bildirim çiftleridir.
Mikro etkileşimler, dijital uygulamaları daha ilginç, sezgisel, ilgi çekici ve verimli hale getiren (genellikle) küçük, ince animasyonlardır. Kullanıcı deneyiminin kalitesini yükseltirler, eylemlere doğrulama eklerler ve genellikle marka gücünü artıran eğlence sunarlar.
Bunlar her zaman görsel animasyonlar değildir; dokunsal veya ses odaklı olabilirler. Spor saatiniz bir dönüşe yaklaştığınızda veya farklı bir kalp atış hızı bölgesine girdiğinizde vızıldayabilir veya bildirimleriniz belirli mesajlaşma uygulamaları, e-posta hesapları veya başarılarla ilişkilendirdiğiniz tanınabilir sesler çalabilir.
Mikro Etkileşimlerin Faydaları
Yaratıcının biraz "hava atmasını" sağlayan küçük dokunuşlar gibi görünse de, faydaları çoktur ve gerçek değerdedir. Günlük hayatımız boyunca çoğu zaman farkına varmadan bu küçük dokunuşlardan yüzlercesiyle karşılaşırız.
- Katılımı teşvik edin
- Kullanıcı memnuniyetini artırın
- Hayal kırıklığını azaltın
- Sistem geri bildirimi sağlayın
- Kullanıcıları gerçek zamanlı olarak bilgilendirin
- Sistem veya süreç durumunu görüntüleme
- Kullanılabilirliği artırın
- Ürünleri daha sezgisel ve etkileşimli hale getirin
- Kullanılabilirlik kusurlarını azaltın
- Daha akıcı kullanıcı arayüzü etkileşimleri sunun
- Müşteri yolculuğunu hızlandırın
- Kullanıcı hatalarını önleyin
- Karmaşık görevleri basitleştirin
- Süreçleri oyunlaştırarak daha eğlenceli, yapışkan ve ilgi çekici hale getirin ve elde tutma oranını artırın
- Marka temasını, sesini ve tonunu uygular
Mikro Etkileşim Tasarımında En İyi Uygulamalar
Kullanıcının Problemini Tanımlama ve Anlama
Her iyi ürün, deneyim veya hizmet bir sorunu çözmek için tasarlanmıştır. Mikro etkileşimler tasarlarken, bu sorunları tanımlamak ve nasıl çözüleceğini ele almak açık olabilir, ancak kullanıcı araştırması sırasında ortaya çıkma olasılıkları daha yüksektir.
Mikro Etkileşimleri Doğal Tutun
Tasarımcılar süreci karmaşıklaştıran veya kafa karıştıran garip animasyonlardan kaçınmalıdır. Mikro etkileşimler doğal ve akıcıdır, basit görsel geri bildirim sağlar ve sürece değer katar. Asla aşırı karmaşık olmamalı, gerçek odak noktasından uzaklaşmamalı veya gereksiz ayrıntılar içermemelidir. En önemlisi, tek bir göreve odaklanmalıdırlar.
Kullanıcı Araştırmasından Elde Edilen Bulguları Test Edin ve Yineleyin
Kullanıcı araştırması aşaması, sorunları ve fırsatları tespit etmek ve en iyi sonuçları elde etmek için ideal bir fırsat yaratır. UX araştırma uzmanları olarak, UX sürecinin bu kısmının ne kadar önemli olduğunu vurgulayamayız.
Mikro Etkileşim Tasarımının Yapısökümü
Mikro Etkileşim Yapısı
Nielsen Norman Group'un mikro etkileşimlerin iki aşamalı bir sistem olduğunu öne süren önceki tanımına rağmen, her etkileşimin dört önemli bölümü vardır.
- Tetikleyiciler ? İster kullanıcı ister sistem tarafından tetiklensin, kullanıcıyı önemli bir araç, eylem veya bilgi konusunda uyaran sürecin ilk kısmıdır. A kullanıcı tarafından başlatılan tetikleyici ima edildiği gibi, tıklama, kaydırma veya başka bir şekilde bir kullanıcı talebi ile başlatılır. A sistem tarafından başlatılan tetikleyici yazılım belirli niteliklerin karşılandığını tespit ettiğinde devreye girer.
- Kurallar ? Kural, ilk tetikleyiciden sonra ne olacağını belirler. Kullanıcı tıklarsa, kaydırırsa, dokunursa veya konuşursa, bir animasyon oynatılacak mı, yardımcı bir işlem başlatılacak mı, bir hatırlatıcı ayarlanacak mı veya bir öğe sepete eklenecek mi?
- Geri bildirim ? Kullanıcıları bilgilendirmek, kendilerini güvende hissetmelerini ve taleplerinin işleme alınmasını sağlar. Doğrulama ve güvenlik, kullanıcı deneyiminde büyük psikolojik oyunculardır, bu nedenle herkesi her aşamada bilgilendirmek, sistem durumu hakkında bir güncelleme ve kullanıcıları mutlu eden küçük dopamin vuruşu sağlar.
- Döngüler ve Modlar ? Son aşama, eylemin tekrarlanabilir mi yoksa tek seferlik bir işlem mi olduğunu belirler. Döngüler ve modlar her bir mircrointeraction'ın meta-kurallarını belirler: bir sayfayı yeniden yüklemek için kaydırmak veya Siri'den sorularınızı yanıtlamasını istemek gerektiği kadar çok kez gerçekleştirilebilir (döngüler), oysa bir ürünü sepete eklemek yalnızca bir kez gerçekleşir (elbette, ?başka bir tane satın al? veya ?satın alma ayrıntılarını düzenle? seçeneği eklemediğiniz sürece).
Mikro Etkileşim Örnekleri
Seçtiğimiz örnekler hiçbir şekilde kapsamlı değildir; sadece bir dizi yaygın kullanımdır. Bunlar, çevrimiçi deneyiminize değer katan ancak çoğu zaman hafife alınan, her gün karşılaşmanız muhtemel dijital unsurlardan bazılarıdır.
Kaydırma Çubuğu
İnternetin ilk yıllarında kaydırma çubuğunun fiziksel bir işlevi vardı: sayfa içinde gezinmek için tutup hareket ettirmek. Şimdi ise sayfanın neresinde olduğumuzu ve sayfanın ne kadar daha içerik içerdiğini gösteren animasyonlu bir özellik.
Animasyonu Yenilemek için Çekin
Akıllı telefonlarda yaygın bir özellik olan yenilemek için çek mikro etkileşimi bir sayfayı yeniden yükleyebilir, yeni e-postaları çekebilir, hava durumu tahminlerini güncelleyebilir ve daha fazlasını yapabilir. Dönen bir çark, markalı gif veya ilerleme çubuğu, talebimizin fark edildiğini ve işlendiğini bilmemizi sağlar.
Kaydırmalı Animasyon
Flört uygulamalarının meşhur kaydırma hareketi olmasaydı ne olurdu? Bir çarpı işaretinin, bir tik işaretinin veya bir kalp çarpıntısının canlandırılması, kararlarımız hakkında gerçek zamanlı geri bildirim sağlar.
Dijital Alarm
Sistem tarafından başlatılan bir tetikleyiciye verilen işitsel yanıta bir örnek: belirli bir zamanda alarmınız çalacaktır. Bununla birlikte, akıllı telefonunuzda, tabletinizde veya bilgisayarınızda, görevin tamamlanması için bir yanıt talep eden görsel geri bildirim ile desteklenir.
Bildirim
Aynı şey bildirimler için de geçerlidir. Sesli ve görsel geri bildirimler, talep edilen etkinlikler, seçenekler veya promosyonlarla ilgili güncellemeler ve uyarılar sunar (ve genellikle kaydolduğunuzu düşünmedikleriniz için!), bağlantısız bir kullanıcıyı geri çekmek için tasarlanmıştır.
Şifre hatası
Giriş alanlarını tekrar tekrar doldurmanızı gerektiren yeni bir hata sayfasına atlamak yerine, satır içi doğrulama zamandan ve hayal kırıklığından tasarruf sağlar. Ayrıca, doğru harf, rakam ve özel karakter sayısının sağlanması gibi satır içi parola hatası geri bildirimi ile yeni hesapların oluşturulması kolaylaştırılabilir.
İşe alım noktaları
Yeni bir yazılımı veya platformu keşfederken öğrenilecek çok şey vardır. İster titreşen küçük bir nokta isterse iyi yerleştirilmiş bir konuşma balonu olsun, kullanıcı sistem tarafından başlatılan bu öğreticiyi nasıl takip edeceğini anında bilir. Sayfada aynı anda çok fazla animasyon olması bunaltıcı ve beceriksizce olacaktır, bu nedenle yeni kullanıcılar belirli bir yolu izleyerek özelliklerde nasıl gezineceklerini ve bunları mümkün olan en kolay şekilde, teker teker nasıl sindireceklerini öğrenirler.
Çevrimiçi sohbet ve mesajlaşma durumu
Mesajlaşma uygulaması kullanıcılarına görsel geri bildirim vermek, bir uygulamanın nasıl yapışkan hale getirilebileceğine dair harika bir örnektir. Zıplayan üç nokta ile alıcının mesajımızı okuduğunu ve yanıt verdiğini hemen anlarız. Alternatif olarak, örneğin WhatsApp'ta görsel geri bildirim sayfanın en üstünde yer alıyor ve alıcının çevrimiçi, uzakta ya da yazıyor olduğunu gösteriyor. Sevin ya da sevmeyin, bu çift mavi tik işaretleri mesajınız hakkında anında bilgi verir.
Birçok web sitesinde paylaşılması gereken çok miktarda bilgi vardır ve bu da gezinmesi kolay, iyi yapılandırılmış bir bilgi mimarisi gerektirir. Bu kadar çok bilgi ve yalnızca bir, genellikle küçük, ekran mevcutken, hepsini tanınabilir bir simgenin (hamburger olarak bilinen üç yatay çizgi) arkasına düzgün bir şekilde sıkıştırmak, istediğimizi bulmayı basit ve anlaşılır hale getirmek için kullanıcı her kategoriye tıkladığında görüntüye kayacak şekilde canlandırılabilir.
Form doldurma ve ödeme süreçlerini daha verimli hale getirme
Beklenmedik bir hata mesajı almak inanılmaz derecede sinir bozucu olabilir, bu nedenle birçok form ve çevrimiçi ödeme işlemi, hataları önlemek ve süreçlerini basitleştirmek için kullanıcı tarafından tetiklenen mikro etkileşimlere sahiptir. İster e-posta formatları için satır içi doğrulama, ister gerekli alan önerileri, ister kesin tarihleri belirtmek için takvim kutuları olsun, bunların her biri gözden kaçırmış olabileceğimiz hataları düzeltmek için geri dönmeden bitiş çizgisine ulaşmamızı sağlamak için tasarlanmıştır. Bu teknik aynı zamanda hesap oluşturma sürecini de kolaylaştırarak kaydolma işlemlerini kolaylaştırır ve kullanıcıların siteyi terk etme olasılığını azaltır.
Mouseover efektleri ve imleç değişiklikleri
Tıklanabilir olup olmadıklarını test etmek için resimlerin, bilgi kutularının ve slaytların üzerinde gezinmeye alışkınız, ancak bir talimatın animasyonlu olması? "iletişim sayfamızı ziyaret etmek için tıklayın?" veya "seçeneklerinizi yeniden sıralamak için basılı tutun ve hareket ettirin?" etkileşimde bulunan kullanıcıya tam olarak aradıkları geri bildirim türünü verir.
Arama kutusu genişletme
Önceden tanımlanmış seçeneklere sahip genişleyen bir arama kutusu veya siz yazdıkça otomatik olarak sunulan öneriler, ürünlerinizin ve kullanıcılarınızın UX'ine işlev ve değer katmanın bir başka harika örneğidir.
Sohbet kutusu insancıllaştırma
Daha duygusal bir sohbet kutusu deneyimi yaratmak için, yanıtının animasyonu verimli olacak ve aynı zamanda insan davranışını temsil edecek şekilde zamanlanmıştır. Bir kullanıcı bir soru veya istek gönderdikten sonra, yapay zeka yanıtı olmasına rağmen birisinin yazdığını gösteren üç zıplayan nokta görecektir. Sohbet kutunuza bir insan avatarı vermek, bir insan için hissedeceğiniz aynı duygusal bağı sağlar.
Animasyonu Kullanmanın Akıllıca Yolları
İlerleme çubuklarınız genişledikçe, döndükçe veya ekranda zıpladıkça bekleme ekranlarına bilgi, promosyon veya bilgi eklemek kullanıcılarınız için değer katar. Bu, alışveriş yapanlara, kullanıcılara veya üyelere keşfetmemiş olabilecekleri ürünler hakkında üst satış yapmak veya onları eğitmek için harika bir fırsattır.
Markanıza uygunsa, tuhaflık veya bir şaka eklemek (hepimiz bizi gülümseten zevkli ve eğlenceli bir 404 sayfası görmüşüzdür) kullanıcı ziyaretinize hemen bir şey katmayabilir ancak kullanıcı ilişkinizi güçlendirerek müşteri sadakatini artıracaktır.
Size İlham Verecek Başarılı Mikro Etkileşim Örnekleri
Hepimiz hangi web sitesi ve uygulama öğelerinin bizi en çok etkilediğini, etkileşimlerimizi daha kolay, daha eğlenceli ve nihayetinde daha ödüllendirici hale getirerek deneyimlerimize değer kattığını biliyoruz. İşte dijital ürünlerimizi kullanma şeklimizi önemli ölçüde değiştiren birkaç tanesi.
Facebook React Özelliği
Facebook beğen butonunu basit bir başparmakla onaylama seçeneğinden, orijinal ikona basılı tutarak tepki verme seçeneğine dönüştürdüğünde, her yeni duygusal seçeneğin kendine özgü küçük bir ikonu ve animasyonu vardı. Kuşkusuz bu, başkalarına nasıl hissettiğimizi mümkün olan en hızlı ve en basit şekilde bildirme şeklimizi değiştirdi.
Apple ve Google'ın Sesli Kontrol Çözümü
Hem Apple hem de Google'ın kullanıcılara sesli kontrol taleplerinin yerine getirildiğini bildirmesi gerekiyordu. Tüm süreç minimal ama basit ve akıllı bir görsel geri bildirimle gerçekleştiriliyor.
Siz isteğinizi iletirken, Google Asistan'ın sizi dinlediğini bildirmek için yüzen noktalar beliriyor; siz konuşurken sesinizi algıladığını bildirmek için noktalar ses dalgalarına dönüşüyor ve yanıtıyla birlikte geri bildirimde bulunuyor. Siri de aynı şeyi yapıyor, ancak soyut marka imajıyla, sesinize kilitlendiğini göstermek için titreşiyor ve şekil değiştiriyor.
Özet
Hayal kırıklığını azaltan ve kullanıcıların bir durumdan veya aşamadan diğerine sorunsuz bir şekilde akmasını sağlayan sorunsuz etkileşimler oluşturmak, ideal kullanıcı deneyimi için çok önemlidir. İyi tasarlanmış ve sunulmuş mikro etkileşimler tam olarak bunu sağlar.
UX araştırmacıları olarak, mikro etkileşimler tasarlayanlar için ideal sürümü belirlemek bizim rolümüzdür. Kullanıcı araştırması ve testleri, A-B ve prototip testleri ile en iyi performans gösterenleri belirlememizi sağlar. Kullanıcı araştırması aşaması, form gönderimlerimizde ve ödeme süreçlerimizde yer alan mikro etkileşimlerin birçoğunun yaptığı gibi, sunumdaki kusurları azaltır.
Mikro etkileşim ve kullanıcı deneyimi tasarımınızı geliştirmek için yenilik fırsatlarını ortaya çıkarmanıza yardımcı olabilecek kullanıcı araştırması hakkında daha fazla bilgi edinmek isterseniz bize e-posta gönderin hello@ux247.com.
[...] yakın zamanda UX tasarımında mikro etkileşimleri inceleyen bir sayfa yayınladı, çünkü kullanıcı [...]
[...] Onay animasyonları ve belirli mikro etkileşimler [...]