En iyi web siteleri, kullanıcılar düşünülerek tasarlanır. Etkileşimli web siteleri özellikle kullanıcı merkezli tasarımda başarılıdır. Yalnızca kişiselleştirilmiş ve eğlenceli değiller, aynı zamanda kullanıcılara deneyimleri üzerinde kontrol sağlıyorlar ve onları istedikleri bilgilere doğru yönlendirmeye yardımcı oluyorlar.
Etkileşimli web sitelerindeki ziyaretçiler kaydırmaya, gezinme öğelerine tıklamaya, portföy öğelerini görüntülemeye ve başka şekillerde katılmaya davet edilir. Sonuç, daha etkileşimli ve akılda kalıcı bir kullanıcı deneyimidir.
Bu gönderide, kendi web tasarımınıza ilham verebilecek bir düzineden fazla etkileşimli web sitesine göz atacağız. Ardından, sitenizi etkileşimli hale getirmek için atabileceğiniz bazı uygulanabilir adımları inceleyeceğiz.
Etkileşimli Web Siteleri
Etkileşimli web siteleri ya bir kullanıcının etkileşimine yanıt verir ya da büyüleyici animasyonlar, videolar ve diğer etkileşimli öğelerle (bu ana sayfada olduğu gibi) kullanıcı yolculuğuna rehberlik eder. Bu tür web siteleri, kullanıcıları memnun etmekten daha fazlasını yapar – siteyle daha uzun süre meşgul olmalarına yardımcı olur. İşte etkileşimli tasarımın en iyi örneklerinden bazıları.
Önerilen makale: sosyal medya çeşitleri hakkında bilgi almak ve güncel sosyal medya haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
1. Eğreltiotu
Fern, animasyon, illüstrasyon ve hikaye anlatımı konusunda uzmanlaşmış, Atlanta merkezli bir animasyon ve tasarım stüdyosudur. Web siteleri, ziyaretçilerin yatay kaydırma, animasyonlu metin, GIF’ler ve video arka planları dahil olmak üzere etkileşimde bulunmaları için birçok yol sunar.
Arşivlerine indiğinizde en benzersiz etkileşimli öğelerden birini bulacaksınız. Ajansın çalıştığı markanın adının ve projenin kısa bir açıklamasının olduğu basit bir tablo gibi görünüyor. Ancak bu isimlerden veya açıklamalardan birinin üzerine geldiğinizde, imleç temelde projenin bir fragmanı olan kısa bir animasyon klibi gösterir. Etkileşimli ve bilgilendiricinin mükemmel birleşimidir.
2. Sekoya ile Dünya Ayı
Redwood With A Redwood, Redwood Empire Whiskey için bir mikro sitedir. Affinity Creative tarafından tasarlanan ve geliştirilen amacı, müşterileri Redwood Glamping Experience Çekilişlerine katılmaya teşvik etmek ve eğitmekti.
Redwoof ile Dünya Ayı, kullanıcıları siteyle etkileşime davet etmekle kalmaz, aynı zamanda bunu gerektirir. Ana sayfaya geldiğinizde, “tohumunuzu ekmeye” davet edilirsiniz. Sitenin geri kalanının kilidini açmak için dönen öğeyi camın içine kaydırmanız gerekir. Bunu yaptığınızda, arka plan elle çizilmiş bir harita ile değiştirilecektir. En altta, kendi şansınızı artırmak için sizi çekilişlere katılmaya veya Facebook ya da Instagram’da paylaşmaya davet eden kayan bir başlık göreceksiniz. Afişin üzerine geldiğinizde, kaydırmayı durdurur. Kaydırdıkça, pek çok ek etkileşimli öğe fark edeceksiniz.
3. Eamonn Günü Lavelle
Eamonn Day Lavelle, basit bir etkileşimli portföy web sitesinin mükemmel bir örneğini sunar. “Projeleri Görüntüle”yi tıklarsanız, otomatik olarak onun projelerinin listesine kaydırılırsınız. Herhangi bir projeye tıklarsanız, daha kapsamlı bir açılış sayfasına yönlendirilirsiniz. Yavaş yavaş geçiş efekti sayesinde, sayfa yavaş yavaş açılır ve yükleme sürecini görsel olarak göstermek için arka plan rengini değiştirir.
Bu sitenin en iyi yanı, performans için optimize edilmiş olmasıdır. HTML5 ve CSS3 ile kodlanan ve 8 MB’tan daha hafif olan site, inanılmaz derecede hızlı yükleniyor. Bu, etkileşimli tasarım ve web sitesi performansının değiş tokuş edilmesi gerekmediğini kanıtlıyor.
4. Beyaz Tahta
Whiteboard, diğer sorumlulukların yanı sıra stratejiyi yönlendiren, markaları tasarlayan, web siteleri geliştiren, uygulamalar oluşturan ve kampanyalar başlatan bir yaratıcı ajanstır. Web sitesi, bir etkileşim hazinesidir. Paralaks kaydırma, içeri girme animasyonları, fareyle üzerine gelme animasyonları ve çok daha fazlasını bulacaksınız.
Örneğin, sayfayı aşağı kaydırırsanız, resimlerle bir kolaj panosuna benzeyen benzersiz bir portföy bölümü bulacaksınız. Tek tek resimlerden herhangi birinin üzerine gelirseniz, resim, marka adının ve projeyi görüntüleme davetinin bulunduğu beyaz bir metin kutusuna dönüşür ve arka plan, vaka çalışmasından tam genişlikte bir resim olur.
5. Foot Locker’ın Ev Oyunu
Foot Locker’s Home Game, CTHDRL tarafından tasarlanmış ve geliştirilmiş bir mikro sitedir. Amacı, ziyaretçileri Twitter’da sanal bir basketbol ve spor ayakkabı yarışmasına katılmaya teşvik etmekti. Hayranlar, özel spor ayakkabılar, ürünler ve deneyimler kazanmak için sosyal medyayı takip etmek ve ardından zorlu mücadelelere girmek zorunda kaldı.
Site, ziyaretçinin dikkatini çekmede ve sürdürmede mükemmeldi. Ziyaretçilerin gördüğü ilk şey, biraz basketbol sahasına benzeyen renkli bir arka plan. Basketbol potalarının, spor ayakkabılarının ve Foot Locker hediye kartlarının kağıt kesikleri gibi görünen öğeler ekranda sürekli olarak yağar. Sayfa boyunca kullanıcıları “Takip Etmeye” teşvik eden CTA düğmeleri vardır. Bu düğmeler, kullanıcılar üzerlerine geldiğinde farklı bir renge dönüşür ve döner. “The Drops” adlı bölümde gezinirken, okuyucu kaydırdıkça hangi ödüllerin mevcut olduğunu gösteren kartlar görünür.
6. TİCARETE UYGUN DEĞİL
(UN)TRAFFICKED, Hindistan’daki çocuk kaçakçılığı krizine dikkat çekmek için oluşturulmuş etkileşimli bir dijital hikayedir. Kendi maceranı seç formatına dayanan bu etkileşimli site, kullanıcıların 13 yaşındaki bir kızı hayatını değiştiren bir hafta boyunca takip etmelerini ve hikayenin sonucunu etkileyecek kararlar vermelerini sağlıyor. (Örneğin, kıza bir isim vererek başlıyorsunuz.) Baştan sona kızın kalbinin nasıl kırıldığını duyabileceğiniz bir film müziği ve Hindistan’daki çocuk işçiliği ve cinsel istismarın durumuna ilişkin güncel istatistikler baştan sona yer alıyor. Oyunu “oynadıktan” sonra, kullanıcılar taahhüdü imzalayarak ve sosyal medyada paylaşarak harekete geçmeye teşvik edilir.
Hindistan’da çocuk sömürüsünü sona erdirmek için Kailash Satyarthi Çocuk Vakfı ve Çocuk Yatırım Fonu Vakfı tarafından yürütülen büyük ölçekli bir kampanyanın dijital merkezinde yer alan (UN)TRAFFICKED, etkileşimli web tasarımının ne kadar güçlü olabileceğini gösteriyor.
7. Siklemon
Cyclemon, iki Fransız tasarımcı tarafından oluşturulan etkileşimli resimli bir web sitesidir. Bu web sitesi, kullanıcıların farklı kimliklerle eşleştirilmiş farklı bisiklet modelleri arasında geçiş yapmasına (anladınız mı?) olanak tanır: gezgin, tuhaf, yenilikçi ve havalı bunlardan sadece birkaçı. Kendilerine uygun bir açıklama veya model gördüklerinde kaydırmayı durdurabilirler. Paralaks kaydırma, diğerlerinin yanı sıra bir otel, eğlence parkı ve feribot gibi arka planda farklı yerlerde seyahat etme yanılsaması verir.
İşin püf noktası: bisikletler aslında satılık değil. Ama tasarımlar öyle.
8. Övünmek
Bragg – Bragg Live Foods’ın kısaltması – her bireyin daha iyi yemesine, daha iyi hissetmesine ve daha sağlıklı ve canlı bir hayatın tadını çıkarmasına yardımcı olmaya kendini adamış bir sağlıklı gıda şirketidir. Bragg, bu kişiselleştirilmiş yaklaşımı web sitesine de taşıyor.
Kullanıcılar farklı öğelerin üzerine geldikçe renkleri değiştirir veya sayfada hareket eder. Örneğin, kullanıcıları kuruluş tarihinden başlayarak şirketin tarihindeki önemli dönüm noktaları hakkında bilgi edinmeye davet eden etkileşimli bir zaman çizelgesi var. Sonra bir ürün kaydırıcı var. Bir kullanıcı ürünlerden birinin üzerine geldiğinde, kayan animasyon sayesinde ürün adı, yıldız derecelendirmesi, beden kullanılabilirliği ve fiyatı dahil olmak üzere daha fazla bilgi görünür. Kullanıcı mevcut başka bir boyuta tıklayabilir ve fiyat otomatik olarak değişir.
9. Menekşe
Violet, kendini kültürel olarak yetkin sağlık hizmetlerini tüm topluluklar için erişilebilir kılmaya adamış bir şirkettir. Web sitesi, cesur renkler ve tipografi, animasyonlar ve resimlerle karakterizedir.
Sayfayı aşağı kaydırdığınızda, siz onları kaydırdıkça öğelerin döndüğünü veya arka plan renginin değiştiğini fark edeceksiniz. Kitaplık bölümüne yaklaştığınızda, dikey kaydırma yatay kaydırmaya dönüşür. İmleci üzerlerine getirdiğinizde her bir kaynağın resimli simgeleri de büyüyecektir. Tasarımın genel etkisi, şirketin tüm toplulukların sağlık sisteminden alabileceğini umduğu gibi, kişiselleştirilmiş bir kullanıcı deneyimidir.
10. Decatur Dan
Daha çok Decatur Dan olarak bilinen Dan Hall, artık Nike ve Beats by Dre gibi markalar için görsel hikayeler yaratan ünlü bir müzik video yönetmeni. Yine CTHDRL tarafından geliştirilen portföy sitesi, görsel hikaye anlatma becerilerinin bir örneğidir. Kullanıcıları daha büyük, daha büyük ve daha iyi olana olan bağlılığını paylaşmaya davet eden web sitesi, kullanıcıların sayfadaki tüm öğeleri sürükleyip yeniden boyutlandırmasına olanak tanır. Sonuç olarak, kullanıcılar onun çalışmasını kendi düzenlerine göre yeniden düzenleyebilirler.
11. Delve Mimarları
Delve Architects, mimari tasarıma kaygısız ve cana yakın bir yaklaşım getirmeyi amaçlayan, Londra merkezli bir şirkettir. Bu iki değer, web sitesinin tasarımına yansıtılmıştır.
Renk paleti çoğunlukla açık pastellerden oluşuyor. Ana sayfa etkileşimlidir, böylece kullanıcı sitede nasıl gezineceğini seçebilir. Renk bloklarından birine tıklandığında bir resim ve kategori ortaya çıkar, böylece kullanıcılar projelerini görüntüleyebilir, uygulamaları hakkında daha fazla bilgi edinebilir, bloglarını okuyabilir veya soruları için onlarla iletişime geçebilir.
12. Döngü Gladyatörü
Cycles Gladiator, kadınlara ilham vermeye ve onları güçlendirmeye adanmış Kaliforniya merkezli bir şarap şirketidir. Bu etkileşimli tek sayfalık web sitesi, kullanıcıları yakınlarda şarap satan bir perakendeci veya restoran bulmaya, kar amacı gütmeyen Do More Art grubuyla ortaklıkları hakkında daha fazla bilgi edinmeye ve posta listelerine katılmaya davet ediyor. Bu harekete geçirici mesajların her biri, ince bir fareyle üzerine gelme animasyonuna sahip bir düğme içerir. Sayfanın alt kısmında, kullanıcıların her seferinde bir şişe (veya kutu) şarap koleksiyonlarını görebilmeleri için bir kaydırıcı vardır.
13. Daniel See
Daniel See, Deloitte Digital Australia’nın Baş Ulusal Kreatif Direktörüdür. Yirmi yılı aşkın bir süredir dijital sektörde çalıştığı için sergileyecek pek çok projesi var. Görüntüleme deneyimini daha basit ve daha etkileşimli hale getirmek için, kullanıcı sayfayı kaydırdıkça projeleri birer birer ortaya çıkarmak için sonsuz kaydırma ve uçma animasyonları kullanılır.
14. Dosya Gecesi
Portföy Gecesi, AKQA Amsterdam tarafından, gelecek vadeden yaratıcıları etkinliklerine katılmaya davet etmek için oluşturulan bir mikro sitedir. Site, etkinliğin hedefleri göz önünde bulundurularak tasarlanmıştır: biri, AKQA Amsterdam ekibiyle yolları kesişecek hevesli yaratıcılar için ve ikincisi, portföyleri hakkında pratik ve eyleme geçirilebilir geri bildirim almak için. Bu yüzden ana sayfada portföylerden oluşan projelerden oluşan bir “solucan” var. Kullanıcı ekranı kaydırdıkça, solucan döner ve ekran boyunca yayılır, böylece sürekli olarak kullanıcının yolundan geçer. Kullanıcı üzerine geldiğinde de hareket eder.
Bu, etkileşimli bir portföy bölümünün gerçekten benzersiz bir örneğini sağlar.
15. Prometheus Yakıtları
Prometheus Fuels, okuyucularını şirketlerinin havadan nasıl yakıt ürettiğini öğrenmek için etkileşimli bir hikayeye dalmaya davet ediyor. Temelde kısmen web sitesi, kısmen video oyunu. Kullanıcılar fareyi arka planın üzerine getirdiğinde, araba sanki oyun kumandası tarafından hareket ediyormuş gibi hareket eder. Boşluk çubuğunu tutarlarsa, arabanın hızlandığını görecek ve duyacaklar. Kullanıcı kaydırdıkça ve araba hızlandıkça, hikayenin parçaları ortaya çıkacak.
1. Bir yükleme animasyonu oluşturun.
Animasyonları yüklemek, kullanıcının dikkatini hemen çekmenin ve tutmanın harika bir yoludur. Kullanıcılara sayfanın yüklendiği konusunda güvence vermekle kalmaz, aynı zamanda marka kişiliğinizi sergileyebilir ve kullanıcıları memnun edebilir. Birçok yükleme animasyonu, sayfanın yüklenmesinin ne kadar süreceğini gösterir, bu da bekleme süresinin daha kısa görünmesini sağlar ve kullanıcıların hemen çıkma olasılığını azaltır.
Aşağıda basit ve etkili bir örnek verilmiştir.
2. Kaydırmayı eğlenceli hale getirin.
Kullanıcıların sitenize göz atmasını ve içeriğinizi keşfetmesini mümkün olduğunca eğlenceli hale getirmek istiyorsunuz. Kaydırma desenleri yardımcı olabilir. Aşağıdaki en popüler seçenekleri kısaca gözden geçirelim:
Yatay kaydırma: Bu kaydırma modeli, kullanıcının daha geleneksel bir yönlendirme olan yukarı ve aşağı yerine pencerenin veya kabın kenarlarından içeriği ortaya çıkarmak için sola ve sağa kaydırmasına olanak tanır.
Sonsuz kaydırma: Bu tür uzun kaydırmada, kullanıcı sayfanın en altına ulaştığında içerik sürekli olarak yüklenir. Pinterest, bu kaydırma modelini kullanmak için en iyi bilinen sitelerden biri değilse de biridir.
Paralaks kaydırma: Bu kaydırma deseni bir derinlik yanılsaması yaratır. Temel olarak, bazı öğeler ya yerinde sabitlenir ya da sayfadaki diğer öğeler normal şekilde kaydırılırken daha yavaş kaydırmaya ayarlanır. Bu, bazı öğelerin diğerlerinin önünde hareket ediyormuş gibi görünmesini sağlayarak 3B hareketi simüle eder.
İşte bir portföy sitesinde dinamik kaydırma örneği:
3. Vurgulu animasyonlardan yararlanın.
Ziyaretçilerinizi memnun edebilecek bir başka animasyon türü de fareyle üzerine gelme animasyonlarıdır. Bir kullanıcı, örneğin bir düğme gibi animasyonlu bir öğenin üzerine geldiğinde, onu nasıl kodladığınıza bağlı olarak rengini değiştirebilir, büyüyebilir, küçülebilir, dönebilir ve daha fazlasını yapabilir. Yükleme animasyonları gibi, fareyle üzerine gelme animasyonları da ziyaretçi için eğlencelidir ve onlara sitenizin çalıştığından emin olur.
İşte birincil CTA’yı daha tıklanabilir hale getiren harika bir fareyle üzerine gelme animasyonu örneği.
4. Video ekleyin.
Pek çok kullanıcının metinden çok videoları oynatması, paylaşması ve bunlarla etkileşime girmesi daha olası olduğundan, videoları dahil etmek web sitenizi etkileşimli hale getirmenin kolay ve etkili bir yoludur. Ayrıca dönüşümleri artırmaya yardımcı olabilir. Aslında, video pazarlamacılarının %83’ü videonun olası satış yaratmalarına yardımcı olduğunu söylüyor.
Etkileşimli web tasarımını yepyeni bir seviyeye taşıyan Nikolaj Juhlsen, ziyaretçilere gezintiye çıkmanın nasıl bir his olduğunu tam anlamıyla göstermek için videoyu kullandı.
5. Karuseller ekleyin.
Döngü veya döngü kaydırıcısı, bir dizi içeriğin sunulduğu bir slayt gösterisidir. Doğru yapıldığında, bir döngü kaydırıcısı, seri içeriği veya resimler gibi birden fazla, ayrı içerik parçasını düzenlemenin harika bir yoludur. Ayrıca, özellikle mobil cihazlarda ziyaretçilerin bu içerikte hızlı ve kolay bir şekilde gezinmesine olanak tanıyarak kullanıcı katılımını artırabilir ve daha iyi bir deneyim sağlayabilir.
Aşağıda, kullanıcı etkileşimini teşvik eden bir ürün döngüsü örneği verilmiştir:
Web siteniz ziyaretçilerle nasıl etkileşime girecek?
Etkileşimli web siteleri, çevrimiçi tüketicilere daha eğlenceli, kişiselleştirilmiş ve ilgi çekici bir deneyim sağlayabilir. İyi haber şu ki, sitenize hemen daha fazla etkileşim eklemek için atabileceğiniz uygulanabilir adımlar var. Beceri setinize ve hedef kitlenize bağlı olarak bir video ekleyebilir, bir ürün teşhirini bir döngüde yeniden düzenleyebilir veya bir yükleme animasyonu oluşturabilirsiniz.
Pazarlama Uygulamaları 