Mikro etkileşimler bir web sitesinin küçük, neredeyse önemsiz ayrıntıları gibi görünse de, aslında UX’in son derece önemli bir parçasıdır. Bu küçük animasyonlar, göz atma deneyimini geliştirir, belirli şeylerin nasıl çalıştığını netleştirir ve kullanıcılara geri bildirim sağlar. Ayrıca bir sitedeki her şeyin daha doğal ve daha canlı görünmesini sağlarlar. Onlar olmasaydı, web siteleri durağan ve sıkıcı bir metin ve resim koleksiyonu olurdu ve kullanıcılar kendilerini aktif katılımcılar yerine yalnızca gözlemciler gibi hissederdi.
Günümüzde, mikro etkileşimler web tasarımının büyük bir parçasıdır. Hem tasarımcılar hem de geliştiriciler, bunları mükemmelleştirmek ve olabildiğince yaratıcı ve benzersiz kılmak için çok zaman harcıyorlar. Bu durum aşırı cilalanmış, hatta belki de fazla tasarlanmış görünen çok sayıda web sitesine yol açtı. Fakat doğru yapıldığında, mikro etkileşimler bir web sitesinin estetiğini güçlendirir ve bize her ayrıntının dikkatlice düşünüldüğü hissini verir. Aşağıdaki 10 web sitesi tam da bunu yapıyor – mikro etkileşimlere ilham verici ve benzersiz bir şekilde yaklaşıyorlar ve bu zar zor fark edilen animasyonların genel tarama deneyimine ne kadar katkıda bulunabileceğini gösteriyorlar.
1. MA Gerçek Esrar
Listemizdeki ilk örnek, neredeyse hiçbir öğenin statik görünmediği bir web sitesidir. MA True Cannabis’in ana sayfasını ziyaret ettiğinizde, büyük, animasyonlu bir ürün ve birkaç yüzen 3D işlenmiş nesne ile karşılaşacaksınız. Fareyle üzerine geldiğinizde, bu öğelerin her birinin farklı bir şekilde canlandırıldığını ve eğlenceli bir mesajın onları çevrelediğini fark edeceksiniz.
Fakat tasarımcılar ve yaratıcı ön uç geliştiriciler, bu kahraman bölümüne gösterdikleri kadar mikro etkileşimlere de dikkat ettiler. Bir bakışta her şey sezgiseldir. Bir bağlantının üzerine geldiğinizde, metnin tıklanabilir olduğunu size bildiren bir solma animasyonu oluşur. CTA düğmeleri, dikkatleri kendilerine çeken kısa bir altı çizili animasyona sahiptir. Kaydırıcı gezinme, gereksiz oklar, çizgiler veya sayılar olmadan gerçekleştirilir. Bunun yerine, etkin slaydın her bir kenarında akıcı, tek renkli bir şekil vardır. Şeklin üzerine geldiğinizde, şekil büyür ve daha hızlı hareket etmeye başlayarak sizi tıklamaya davet eder. Bunu yaptığınızda, renk tüm ekranı doldurur ve bir sonraki slayda geçer. Ek olarak sol alt köşedeki madde işareti gezintisi, bir sonraki slaytta ne görmeyi bekleyebileceğimizi bize bildirir – başka bir ürün.
Madde işaretlerinin animasyon stili, akıcı kaydırıcı gezinme stilini tamamlar. Bir merminin üzerine geldiğimizde veya bir sonraki slayda geçtiğimizde, küresel arka plan sorunsuz bir şekilde yer değiştiriyor ve bitişik mermiye dönüşüyor.
2. Alban Mezino
Yaratıcı ön uç geliştirici Alban Mezino’nun web sitesi, esasen oldukça basit ve minimalisttir. Her şey tipografi ile ilgili, gerçekten. Bununla birlikte bu web sitesi, ifadelerle ve bir bağlantının veya simgenin üzerine geldiğimizde rastgele bir emojiye dönüşen bir imleçle güzel bir şekilde zenginleştirilmiştir.
Sitedeki tipografi de ustalıkla işlenmiştir. Bazı kelimeler kalın, diğerleri kırmızıdır. Bu durum metnin en önemli parçacıklarına dikkat çekmek için kasıtlı olarak yapılır. Sayfanın üst kısmında, yazarı ve projelerini tanımlayan bir dizi büyük, değişken anahtar kelime gösteriliyor.
Tüm bu unsurlar tutarlı bir resim oluşturmak için bir araya gelir. İfadeler ve metin birbirini tamamlar ve Bay Mezino ve onun yaratıcı çalışması hakkında eğlenceli ama profesyonel bir izlenim yaratır.
3. Küresel Spire
Spire Global, havacılık, hava durumu ve deniz analitiği ve takibi sağlamak için uyduları kullanan bir şirkettir. Web siteleri, mikro etkileşimler açısından ilginç çözümler sunmasıyla tanınan Locomotive adlı çok başarılı bir yaratıcı ajansın eseridir.
Ana sayfa yüklenirken edindiğiniz ilk izlenim, web sitesinin estetiğinin Spire Global gibi şirketlerin günlük işlerinde kullandıkları son teknoloji arayüzlere benzediğidir. Bu belirgin şekilde yüksek teknoloji atmosferi, büyük ölçüde dikkatle yürütülen mikro etkileşimlerden kaynaklanmaktadır. En üstte, yörüngeden gelen veriler ve analizlerden bahsedildiği yerde, metne, veri çizelgelerininkine benzeyen, animasyonlu, tamamen dekoratif kıvrımlı bir çizgi eşlik ediyor. Metnin üzerinde, hızla hareket eden saat ibrelerine sahip bir saat de var. Çizgi ve saat, başlıkların yüklenme biçimi ve görüntülerin nasıl göründüğüyle birleşerek süreklilik ve ilerleme havası yaratıyor. Web sitesine göz atmaya devam ettikçe, sanki önemli bir eylemi gerçekleştirmenin ortasında olan bir programa erişmişiz gibi hissetmeye başlıyoruz.
Metin bağlantısının gezinmesi ve yapışkan Bize Ulaşın bölümünden hızlı yüklenen açılır menülere kadar mikro etkileşimler harika bir şekilde ele alındı. Sayfayı aşağı kaydırırken, Verilerle Tanışın bölümüne ulaştığınızda, fare imleci, sizi imleci sola ve sağa hareket ettirmeye davet eden Sürükle mesajını içeren büyük bir daireye dönüşür. Bu eylem, şirketin odaklandığı projeler hakkında daha fazla bilgi edinmenizi ve örnek verileri indirmenizi sağlar.
Her ayrıntıya gösterilen olağanüstü dikkat, bu web sitesini, Spire Global’in işlerinde kullandığı programlar kadar akıcı hissettiriyor.
4. Elivi Hotels Skiathos
İmleç, bir web sitesinde neyin tıklanabilir olduğunu göstermek için mükemmel bir araçtır. Daha da iyisi, bir düğme veya bağlantı tıklandığında ne olacağına dair ipucu vermek için kullanılabilir. İmleçleri yenilikçi şekillerde kullanan birkaç web sitesini listemize ekledik. Fakat en ilginç olanlardan biri, Skiathos’taki lüks Elivi otelinin online sunumu.
Başlangıçta küresel olan reaktif imleç, üzerinde gezdirildiği şeye bağlı olarak şeklini değiştirir. Bu durum sitedeki tam olarak hangi öğelerin etkileşimli ve tıklanabilir olduğunu göstermeye yarar. Örneğin imlecimizi basit, metinsel bir düğmenin üzerine getirdiğimizde küre bir çizgiye dönüşür. Diğer bağlantıların üzerine geldiğinizde de aynı şey olur.
İmleci kaydırıcının altındaki yuvarlak çapa bağlantısının üzerine getirdiğimizde imleç küresel kalır ancak büyür. Öte yandan, bir menü simgesi, gezinme ve belirli düğmelerin (Şimdi Ayırt düğmesi gibi) üzerine geldiğimizde bir kareye dönüşür.
5. Femme ve Şiddetli
Femme & Fierce, uluslararası bağımsız markaların kıyafetlerini satan bir moda perakendecisidir. Şirket, canlı renkleri, yüksek sesli baskıları ve çağdaş tasarımlarıyla tanınıyor ve web siteleri de bunu yansıtıyor. 70’ler havası veren serif yazı tiplerini ve mizanpajlara hakim olan pembe ve kırmızı renk kombinasyonunu seçtiler. Fakat web sitesinin yazarlarından alıntı yapmak gerekirse, etkileşimlerdir:
“Femme ve Fierce’ın parlayan yıldızları, akılda kalıcı bir kullanıcı deneyimini tamamlayan küstah kopyalarla kişilik çantalarını ekliyor.”
Ve gerçekten parlıyorlar. Ürünün havada gezinmesinin sitede gezinmeyi nasıl daha eğlenceli ve ilginç hale getirdiğine bir bakın. Her öğenin üzerine geldiğinizde, onu farklı açılardan görebilirsiniz. Ayrıca fotoğrafın etrafında büyüleyici küçük grafik öğeler (öpücükler, rujlar, gözler, lolipoplar vb.) belirerek tüm web sitesinin daha canlı ve eğlenceli görünmesini sağlar.
Bir satın alma işlemi yapmaya karar verdiğinizde, bir öğe eklediğinizde sepet simgesinin de canlandığını fark edeceksiniz.
6. Püre Maison
Purée Maison, harika bir web sitesine sahip Parisli bir yaratıcı ajans. Ön yükleyici tek başına güçlü bir izlenim bırakıyor. Bu durum web sitesi yüklendiğinde bizi neyin beklediğine dair ipuçları veren güzel bir şekilde canlandırılmış bir karalamadır – geniş, parlak alanlar arasında temiz tasarım ve tipografi.
Kahraman kaydırıcısındaki bağlantı sabit değildir. Bunun yerine, ön yükleyicinin titreşimini koruyarak hafifçe sallanır.
Etkileşimli bağlantıların üzerine geldiğinizde aynı titreşim devam eder. Animasyonlu bir karalama harfleri kaplar ve etkileşimli bağlantının yanında ilgili içeriğe sahip bir liste görünür. Tüm bunlar, hiçbir koşulda tehlikeye atılmaması gereken web sitesinin işlevselliğini geliştirmeye hizmet eder.
Resimlerin üzerine geldiğinizde, etraflarında hareketli, zıplayan bir çizgi belirir, böylece kullanıcılar ana sayfada aşağı kaydırırken bir saniye bile sıkılmaz.
En altta bir soru var: Bir projeniz var mı? Fareyi üzerine getirdiğinizde, ön yükleyiciyle aynı stilde bir karalama görünür. Merhaba diyor! – Burada gerçekleştirebileceğiniz işlemin, yani ajansla iletişime geçmenin açıkça duyurulması.
7. Ultranoir
Bir web sitesindeki mikro etkileşimleri büyük ölçüde vurgulayabilen bir başka unsur da sestir. Sesi görsel öğelerden ve animasyonlardan ayırmanız gerekmez. Aslında, tüm bu unsurlar simbiyoz halinde çalışabilir ve birbirini tamamlayabilir. Ultranoir web sitesi bunun mükemmel bir örneğidir.
Site yüklendiğinde duyduğunuz ilk şey mistik, neredeyse rahatsız edici bir ses. Daha sonra hareket ettirdikçe sayfanın yüzeyini hareket ettiren küçük bir imleç fark edersiniz. Ekranın altında bir mesaj var: tıklayın ve basılı tutun. Mesajın size söylediğini yaparsanız, ses biraz kısılır ve bir proje listesine yönlendirilirsiniz. Ama sadece geçici olarak. Fare düğmesini bıraktığınız anda aktif proje yüklenir ve ürkütücü ses geri döner.
Reaktif imleç, yaptığınız eylemlere yanıt olarak şeklini de değiştirir (düz bir noktadan daha büyük bir anahat dairesine). Ve her eylemin kendisine eşlik eden farklı bir sesi vardır.
Bu durum menü simgesinin, sosyal simgelerin, ses açma/kapama anahtarının, menü öğelerinin vb. üzerine geldiğinizde olur. Ayrıca bu öğelerin her birine tıkladığınızda yeni bir ses duyarsınız.
8. Sinerjik
Synerg’hetic, web sitelerinde bazı çok yaratıcı mikro etkileşimler bulunan Fransa’dan bir dijital ajanstır. Örneğin ana sayfanın alt kısmında etkileşimli ifade biçiminde bir CTA düğmesi bulunur. Düğmeye ne kadar yaklaşırsanız, emojideki gülümseme o kadar büyük olur ve bunun tersi de geçerlidir. İmleç uzaklaştıkça emoji gülümsemesini kaybeder ve duygusuzlaşır.
Düğmenin üzerine geldiğinizde emojinin yüzünde kocaman bir gülümseme beliriyor ve emoji de size göz kırpıyor. Her şey çok sezgisel ve emojinin sizden bir tür etkileşim beklediği oldukça açık.
Üzerine tıkladığınızda, İletişim sayfasına yönlendirileceksiniz. Fakat gülen yüzü çevreleyen mesajı okumadan bile bir tıklamanın sizi İletişim sayfasına götüreceğini tahmin edebilirsiniz, çünkü emojinin üzerine geldiğiniz anda doğrudan size bakarak iletişim kurar.
9. Buda Pizzası
Buddha Pizza web sitesi oldukça farklı. Tamamen karikatürize, aptalca bir tarzda yapılır. Sitenin her yerine dağılmış çok sayıda simge vardır (soldaki menüde, kategoriler bölümünde, CTA düğmelerinde), her birinin kendine özgü, farklı bir fareyle üzerine gelme animasyonu vardır.
Sitedeki ana grafik öğe olan iri gözlü bir pizza dilimi de etkileşimlidir – göz, imlecinizin hareketini takip eder. Alışveriş sepeti de aynı derecede ilginç. Hangi pizzayı alacağınıza karar verip satın al düğmesine tıkladığınızda, pizzanızın küçük bir resmi sepete kayar.
Mikro etkileşimler son derece yaratıcı bir şekilde ele alındı, fakat bu web sitesinin ana işlevi olan pizza teslimatını hiçbir şekilde gölgeleyemezler.
Buddha Pizza web sitesinin kendine has özelliği birkaç kez ödüllendirildi. CSS Tasarım Ödülleri’nde Özel Tebrikler ve Awwwards’ta Mansiyon Ödülü aldı.
10. Jonny McLaughlin
Listemizi kapatıyoruz, Jonny McLaughlin’in web sitesi önceki örneklere pek benzemiyor. Tam olarak mikro etkileşimlerle dolu değil. Bir CTA düğmesinin, bir bağlantının veya başka herhangi bir tıklanabilir öğenin üzerine geldiğinizde bunları görmezsiniz. Fakat ekranda herhangi bir yere tıkladığınızda aniden bir kaplan pençesi beliriyor ve önüne çıkan her şeyi paramparça ediyor. Kelimeleri, grafikleri ve bağlantıları karıştırıp her yere saçıyor. Sayfaya ne kadar çok tıklarsanız, o kadar çok kaos ortaya çıkar. İçerik olduğu gibi büyüleyici, fakat bu tür bir etkileşim, kullanıcılara sitede gezinirken oyun oynuyormuş gibi hissettiriyor.
Burada içerik aslında etkileşime tabidir, bir cevaptır…