Mikro etkileşimler: Harika bir kullanıcı deneyimi yaratan küçük bir cazibe.

Sadece güzel web siteleri yapmakla kalmıyor! Müşteri girdi. "Kafası karışmış". Düğmeye basın. "Nasıl sessizsin?

Hiç böyle hissettin mi? Web sitesini iyi tasarlamayı düşünüyorsunuz. Düzen mükemmel, mükemmel, ama diğerleri denediğinde. Bunun yerine, geri bildirim "Web sitesi hareketsiz görünüyor" diyor. "Bu düğmeye basın ve ne oldu? Emin değilim." Ya da daha da kötüsü, kullanıcı karışık hissediyor, bir an önce yaptığı eylemin başarılı olup olmadığından emin değil.

Bu sorun, birçok insanın göz ardı ettiği "dağları kaplayan saçlar" gibidir. Büyük bir genel resme adadık. Kullanıcının kullanıcı deneyiminin (kullanıcı deneyimi), başını sallama veya web sitesine yanıt vermeyi gerektiren bir konuşmadan oluşan küçük bir ayrıntıdan kaynaklandığını unutana kadar aynıdır. Sessiz ise, tepki yoktur. Duvarla konuşmaktan farklı değil, kullanıcının emin hissetmesine neden olur ve web sitenizi hemen kapatmak için tıklayabilir!

İllüstrasyonlar istemi: Karşılaştırma görüntüleri. Bir taraf hala görünümlü bir web sitesi ekranıdır. Canlı olun, kullanıcı karışıktır, düğmeye işaret eder. Diğer taraf aynı ekrandır, ancak basıldıktan sonra düğmede küçük bir animasyon oluşur. Kullanıcı mutlu bir şekilde gülümsedi.

"Güzel" web sitesi "sıkıcı" ve "kafa karıştırıcı" neden?

Web sitesinin güzel görünmesinin ana nedeni, "kuru" bir deneyim veya "kafa karıştırıcı" verir. "Etkileşimi (Etkileşimli)" unutana kadar "Veri Sunumu (Sunum)" a odaklanma eğilimindeyiz.

Hayal etmek:

• Yanıt eksikliği (geri bildirim eksikliği): Kullanıcı "Sepete Ürün Ekle" düğmesini tıklattığında hiçbir şey olmadı. Onay mesajı Yok Hareket eden veya artan sayılar sepet simgesi yoktur. Kullanıcının zihnindeki ilk soru "Eh ... Basıldım mı?" Ve belki tekrar tekrar bastırın. Veya daha kötüsü, web sitesinin kırıldığını ve sonra vefat ettiğini düşünerek
• Statik Tasarım: Web sitesi sadece "dijital broşür" olur, ancak canlı değil. Bilgileri, tıklamaları veya eylemleri görmek için kaydırın, kullanıcıların kalmasını veya tekrar geri dönmesini sağlayan cazibeden yoksun dondurulur
• Belirsiz Durum Değişiklikleri: Kullanıcı, dosyayı yüklerken olduğu gibi sistemin şu anda ne yaptığını bilmiyor. Yükleme çubuğu veya animasyonu yoksa ilerlemeyi anlatın. Kullanıcı, web sitesinin olağanüstü olduğunu düşünebilir ve daha sonra her şeyin kırılmasına neden olan yenileme bastırır!

mikro-inactions adı verilen ayrıntılara dikkat etmeyi unuttuk, normal web sitesini unutulmaz ve gerçekten kullanımı kolay bir deneyime dönüştürmenin anahtarıdır.

İllüstrasyonlar istemi: Basit Infographic görüntüleri, tasarımcının beynini bir tarafı sadece kaçırma düzeni, renk, yazı tipini (büyük resim) gösterir. Yükleme simgesi, checkmark simgesi gibi küçük simgelerle terk edilmiş diğer taraf, kıvılcımlarla simge gibi. Ama hafif bir gri haline getirildi, gözden kaçan

"Sessiz" web sitesinin devam etmesine izin verin ... Sonuçlar sadece "sıkıcı" dan daha korkutucu

Sadece kullanıcıyı sıkılmış hissettirmekle kalmayıp, aynı zamanda iş hedeflerinizi beklenmedik bir şekilde etkiler. Uzun süre bırakılırsa, bu sorunlar web sitenizi yemeye başlayacaktır:

• Boundce Oran (Geri Hızı) Yüksek: Kullanıcı geldiğinde, kafa karıştırıcı, şaşkın veya web sitesinin kullanımı zor olduğunu düşünün. Hemen geri düğmesine basmaya hazırlar. Bu sinyal, web sitenizin yeterince kaliteli olmayabileceği Google'a gönderilecektir.
• Dönüşüm Oranı (Hedef Hızı) Düşük: Müşterileri ziyaret etme fırsatı (üyelik, sipariş için başvuru gibi) azalacak, ödeme sürecinde biraz belirsizlik azalacaktır. Müşterilerin sepeti kolayca bırakmasına izin verebilir. Dönüşümü artırmak için web akışındaki UX/UI'nin güncellenmesi olağandışıdır.
• Markanın güvenilirliği azalır: sert görünen ve yanıt vermeyen bir web sitesi. Markanızın profesyonelce görünmesini sağlayın. Ayrıntılara dikkat etmemek ve tüketicilerin gözünde modası geçmiş görünüyor
• Kullanıcı tekrar geri gelmek istemiyor: kötü deneyim. Kullanıcı, web sitenizi yalnızca tekrar geri dönme fırsatı neredeyse sıfır olduğunda kullanarak sinirli hissediyorsa, normal deneyimden daha iyi hatırlanacaktır.

Görüyorsunuz, web sitesinin "sessizliği" performansınıza yüksek. Küçük detaylarla iyi bir deneyim yaratmak sadece "güzel şeyler" değil, aynı zamanda ihtiyaç duyulan "yatırım" dır.

İllüstrasyonlar istemi: Yüksek hemen çıkma oranına sahip "Sessiz Web" adı verilen ilk çubuğa kıyasla 2 grafik görüntüleri, "yanıt veren web sitesi" adlı başka bir düşük dönüşüm oranı, kaşlarını çatma ve gülümseyen bir yüz simgesiyle düşük bir çıkıntı oranı, dönüşüm oranına sahiptir.

Çözüm: Yaşamak için Web'i uyandırın. "Mikro-Uluslararası", harika bir küçük cazibe

, "Mikro-Uluslararası" (Mikro-Entegrasyon) olarak adlandırılan web siteniz için "Yaşam Ekleme" ve "Diyalog Yaratmak" olduğunu düşündüğünüzden daha basittir.

Mümkün olduğunca kolay açıklamak istiyorsanız, mikro etkileşimler küçük bir yanıttır. Bu, kullanıcı web sitesinde veya uygulamada hareket ettiğinde meydana gelir, eylemi onaylamaya, sistemin durumunu anlatmaya ve kullanıcıları doğal olarak gezinmeye yardımcı olan ayrıntılardır. Kullanımı daha pürüzsüz ve daha tatmin edici hale getirir

Nielsen Norman Group uzmanları bunu kullanıcılarla iletişimin kalbi olarak tanımladılar. Basit bir örnek hayal edin. Her gün buluştuğumuzu:

• Mesaj göndermek için "ting" sesiyle mobil titreşimler
• Sosyal medyada "gibi" bastığımızda yayılan kalp şeklinde animasyon.
• Bize "Yükleme, biraz bekle!"
• Yanlış bilgileri doldurduğumuzda titreşen geçiş kanalı

Bunlar sadece güzel animasyonlar değil, "geri bildirim". Önemli şey, sistemin karışıklığı azaltmaya ve muazzam bir güven oluşturmaya yardımcı olan "dinleme" ve "yanıt" olduğunu hissettiriyor. Web akışındaki UX/UI tasarımı, müşterileri tıklamayı ve satın almasını sağlayan tasarımı . Bu prensibi kalp olarak kullanın

İllüstrasyonlar istemi: Güzel Infographic, kalp atma simgesi, çapraz simge gibi mikro etkileşimlerin bir örneği olarak 4-5 simge gösterir, doğru bir işaret, açık kapalı bir simge, canlı bir yükleme çubuğu simgesi.

Gerçek Şeyden Örnekler: Her gün karşılaştığınız mikro etkileşimler (ama asla bilmiyor!)

Çoğu zaman mikro-uluslararası en iyi şey, nadiren fark edene kadar sorunsuz çalışmasıdır. Ama açıkça bir fark yaratıyor, örneğe bir göz atalım. Bu küçük cazibeyi kullanmada başarılı

1. Yenilemek için çekin: X (Twitter) veya Facebook gibi sosyal medyada, yemin üstünde olduğumuzda ve ekranı aşağı çekmek için parmağınızı kullandığımızda bir yükleme simgesi olacak. "Yeni Bir İçerik Yükleme" ve bir yerlerde Reef düğmesine tıklamak yerine beklerken iyi bir his yaratmak

2. "Like" tuşuna basılan animasyon: Beğen düğmesi sadece normal bir düğme değildir. Instagram'daki kalp düğmesine veya ortamdaki alkışlara bastığınızda, küçük bir animasyon olacaktır. Sevimli ve tatmin edici görünüyor, hemen kullanıcıların duygularını ödüllendirdi. Ve duygusal ifadenin daha canlı görünmesini sağlayın

3. Form Hatası Geri Bildirimi: Kırmızı mesaj yerine, yalnızca "yanlış doldurun". Birçok modern web sitesi. Örneğin, Framer , kanalın "Titreyi" yi doldurmasını önerir, sanki "Hey! Buraya bak ne var?" Bu çok zeki ve daha samimi bir yol.

4. Sepeti eklerken ekran: "Sepete Ekle" düğmesine bastığınızda önde gelen e-ticaret web sitesi. Düğme doğru bir işarete geçebilir. Veya sepetin sayılarıyla birlikte sepet simgesinde çalışan bir ürün resmi olan küçük bir animasyona sahip olun, bu net bir onay ve kullanıcıların "ürününüzün zaten sepette olduğunu. Alışveriş yapmaya veya ödemeye devam edebileceğini" sağlıyor.

Tüm bunların normal kullanımı pürüzsüz ve unutulmaz bir etkileşime dönüştürmeye yardımcı olan küçük bir ayrıntı olduğunu görecek

İllüstrasyonlar istemi: GIF görüntüleri veya 4 kısa video, örneğin Mikro-Uluslararası Tarih örneklerini gösteren, örneğin, ilk kanal yenilemek için çekilir, ikincisi bir animasyondur, basın, kanal üçü yanlış olduğunda sallanan formdur.

Takip etmek istiyorum, nasıl başlarsınız? Web sitenizi yaşamak için uyandırmak için basit kontrol listesi.

Burada okuyun Birçok insan denemek ister. Kendi web sitenizle kullanmak için mikro etkileşimler iyi haber, bir tanrı programcısı olmak zorunda değilsiniz, başlayabilirsiniz! Bu basit kontrol listesini kullanmayı deneyin. Web sitenizi keşfedin.

1. "Anahtar temas noktalarını tanımlayın): Kullanıcıların web sitenizde ne yapması gerektiğini listelemeye çalışın.
   • Düğmeyi tıklamak (çağrı -ila)
   • Doldurma ve Form Gönderme
   • Navigasyon
   • Sepete ürün ekleme (sepete ekle)
   • Veri Yükleme Bekliyor (Yükleme Durumları)
2. Kendinize "Ne bilmek istiyorsun?": Her temas noktasında kullanıcılar ne devam etmeye devam etmek istiyor?
   • Düğmeyi tıklarken: "Tıklayın" (renk değiştirme düğmeleri, gölgeler veya küçük animasyon gibi) onaylamak istiyorum
   • Formu gönderirken: "Başarılı bir şekilde gönderilen" veya "hatalar var" (yeşil bir onay mesajı veya çalkalama formu ve yanlış noktayı anlatmak gibi) bilmek istiyorum.
   • İndirmeyi beklerken: "Sistemin çalışmadığını" bilmek istiyorum. (Örneğin, yükleme spinner veya güzel ilerleme çubuğu)
3. Basit bir şeyle başlayın ve Basit ve İnce Başlayın: Hemen karmaşık animasyon oluşturmanıza gerek yok. Küçük değişiklik çok fazla fark yaratabilir
   • Hover Durumu: Düğmenin veya bağlantının rengi değiştirmesine veya kullanıcı fareyi oynattığında biraz hareket etmesine neden olmak
   • Başarı Mesajı: Kullanıcı bir form gönderdikten sonra teşekkür ederiz.
   • Odak Durumu: Dolgu kanallarının daha belirgin bir sınıra sahip olmasını sağlayın.
4. Doğru aracı kullanın: Karmaşık bir kod yazmak zorunda kalmadan bunları oluşturmanızı sağlayan üretimli bir araca sahip bir web akışı platformu. Ya da geliştiricilerle çalışırsanız, bu fikirleri gerçekleştirmek için bu fikirleri iletebilirler

Anahtar, her kullanıcının eylemlerinin "anlam" yanıtını almasını sağlamaktır. Bu, kullanıcı deneyimini muazzam bir şekilde geliştirmeye yardımcı olabilir.

İllüstrasyonlar istemi: Güzel kontrol listesi resimleri. Her öğedeki simgelerle 4 adımın özeti (fare simgesi, soru işareti simgesi, başlangıç roket simgesi, simge, araçlar)

İnsanların merak ettikleri sorular (ve cevap açık!)

Web sitesine hareket öğeleri eklemekten bahsederken, her zaman soru ve endişelerim var, mikro etkileşimlerle ilgili popüler bir soru topladım, burada kaybolmaya cevap verdim.

S1: Mikro etkileşimleri girin. Bu web siteleri web sitesini yavaşlatacak mı?
A: Her zaman değil. Doğru mikro etkileşimler yapılırsa, çoğu CSS animasyonları veya SVG ile oluşturulur, bu çok hafiftir ve neredeyse yük hızını hiç etkilemez. Sorun yalnızca büyük GIF dosyaları, ağır video dosyaları kullandığımızda. Veya gerektiğinden daha karmaşık bir senaryo, bu nedenle kalp doğru teknolojiyi seçmektir.

S2: İyi bir kod yazmak gerekir. Yapabilir misin?
A: Her zaman gerekli değil! Dediğim gibi, Webflow gibi kodsuz/düşük kodlu platformun güçlü ve kullanımı kolay bir etkileşim aracı var. Kod'a dokunmak zorunda kalmadan Hover efektleri oluşturabilir, kaydırma tetiklemeli animasyonlar veya animasyonları tıklayabilirsiniz. Ancak çok karmaşık bir şey istiyorsanız, UX/UI konusunda bir uzmana iyi bir seçimdir.

S3: Web'deki "animasyon" dan nasıl farklı?
C: Fark "hedefler". Genel animasyon sadece ileri geri hareket eden arka planlar gibi dekoratif (dekoratif) olabilir, ancak mikro-uluslararası her zaman bir "işlev" animasyon (işlevsel) olacaktır. "Tetikleyici" (kullanıcının eylemleri) yanıtında ve "geri bildirim" (yanıt) anlamına gelen anlamına gelir.

S4: Çok fazla giymek, daha iyi, değil mi?
A: Hayır! Mikro-uluslararası-çok veya daha fazla muhteşem kullanarak, kullanıcıların yoğunlaşmasını can sıkıcı ve rahatsız ediyor. Her kelimeye müdahale eden insanlar gibi, kurallar "incelik anahtardır" veya "zayıflık anahtardır". Deneyimi geliştirmeye yardımcı olmalıdır. Sahne için rekabet etmemek. UX için iyi olan karanlık mod tasarımı da aynı yumuşak çözünürlük ilkelerini kullanır.

İllüstrasyon istemi: 2 çizgi film karakteri konuşuyor. Birincisi sorular soruyor. (Kafanın üstünde bir işaret var mı) Diğer cevap güvenle. (Daha parlak bir lamba simgesi var). Arka plan, kod ve tasarım araçlarının bir sembolüdür.

Özet: Web sitenizi uyandırmanın zamanı geldi!

Mikro etkileşim dünyasında seyahat ettik, sadece "hile" veya "dekorasyonlar" değil, aynı zamanda iyi kullanıcı deneyiminin "ruhu" olduğu görülebilir. Küçük bir detay. Bu, web sitesi arasında "güzel ve unutulmaz" web sitesi ile "kullanan" bir fark yaratıyor

Mikro-Uluslararası'na dikkat etmek, kullanıcıya güven oluşturmaya yardımcı olduğu her ayrıntıyla "önemsediğinizi" göstermektir. Kullanıcıyı sorunsuz bir şekilde gezin ve kurak etkileşimi canlı bir sohbete dönüştürün, markanızın profesyonel ve modern görünmesini sağlayın.

Öyleyse bekleme! Geri dönelim ve web sitenizi keşfedelim. Bugün, hayat ekleyebileceğiniz küçük bir nokta bulun. Belki de tıklandıktan sonra "mesaj" düğmenizi biraz canlı olacak şekilde yapmaktır. Bu, kullanıcılar için bir gülümseme ve izlenim yaratmak için yeterlidir.

Web sitenizi "Sessiz Broşür" den "sohbet etmeye hazır bir asistan" olarak değiştirmenin zamanı geldi mi? Hadi yapalım!

İllüstrasyonlar istemi: Ona ilham veren son görüntü kullanıcının elidir. Ekrandaki düğmeyi tıklayın. Ve bu düğmeden çıkan bir güzel ışık çizgisi var, tek bir tıklamadan kaynaklanan harika bir deneyim sunuyor. Kısa bir mesajla "Her tıklama önemlidir."

‍