Mobil taramanın yükselişi, navigasyon tasarımı söz konusu olduğunda bazı önemli yenilikleri beraberinde getirdi. Sıkıştırma ve genişletme, kaydırma, çift dokunma ve benzeri çoklu dokunma eylemleri, günümüzde temel olarak mobil ortamlara özgüyken, masaüstünde eğlence veya sanatsal bir değer sağlamak için tasarlanmış web sitelerinde bulunma olasılığı daha yüksektir. Bunları oyunlarda ve oyun vitrinlerinde, oynanabilir web sitelerinde ve deneysel web projelerinde bulabiliriz. Fakat ticari web sitelerinde, online mağazalarda ve portföylerde de giderek daha fazla görüyoruz. Kaydırmanın yanı sıra en yaygın kullanılanlar arasında tıklama ve sürükleme etkileşimleri yer alır.
Sürükleme etkileşimleri, tasarımdaki skeuomorfik eğilimin bir parçası olarak görülebilir. Gerçek, fiziksel bir eylemi taklit etmek için tasarlanmıştır. Fare bir bakıma elimizin bir uzantısı görevi görüyor ve temelde ekrandaki bir nesneyi, öğeyi, bölümü, hatta bazen tüm ekranı alıp hareket ettirmek için kullanıyoruz. Nesneleri hareket ettirir, figürleri zıplatır, yükseltir, büyütür, küçültürüz. Eşyaları bir araya getiriyoruz ve ekranı yeniden düzenliyoruz. Tıpkı “gerçek hayatta” yaptığımız gibi.
Diğer hareket etkileşimleri gibi, sürükleme etkileşimleri de kullanıcı deneyimine heyecan verici, keşfedici bir dokunuş katar. Fiziksel ve sanal arasındaki kenarları harmanlayarak kullanıcıyı arayüzün daha derinlerine çekerler. Bu yüzden bir web sitesine muazzam bir değer katarlar. Fakat bir tasarıma sadece sürükle veya tut özelliğini eklemek yeterli değildir. Anlamlı ve sezgisel olması ya da açıkça belirtilmiş olması gerekir.
Her türlü web etkileşimini keşfetmek için çok zaman harcadık ve şunu söylememiz gerekiyor ki, orada gerçekten dikkate değer yaratımlar var. Yenilikçi ve ilham verici sürükleme etkileşimleri içeren en iyi web sitelerimiz şunlardır:
-
Body Shop Vücut Yağları
-
Spotify – Birlikte Dinlemek
-
Ben Buongiorno
-
Bocalayan Cehennem
-
Sabit Hatlar – Chrome Deneyleri
-
Wannabe Mağazası
-
nabız yapmak
Body Shop Vücut Yağları
Tasarıma verdiği aşırı özen ile tanınan Body Shop, 2021 body butter serisi için harika bir vitrin hazırladı. Duygusallık ve kadınsılığa güçlü bir vurgu ile sürükleyici ve karmaşık olan vitrin, aynı zamanda oldukça ilginç bazı etkileşimli öğelere de sahipti. Vitrinin anlatımı birkaç bölüme ayrılmıştır ve Her İnç Aşk bölümünde bir dizi video ve fotoğraf bulunur. Fakat burada bizi en çok ilgilendiren, düğmenin ziyaretçiye talimat verdiği şekilde sürüklenip aşağı çekilebilen bir üst bölümdür. Bu durum her türden vücut yağı kavanozlarıyla dolmaya başlayan, etrafta zıplayan, neredeyse köpüren, hepsi titrek ve eğlenceli olan yeni bir düzen katmanının görünmesini ister. Ziyaretçi bölümü kapatabilir ve daha sonra kendi başına var olan bir varlık gibi daha fazla vücut yağıyla dolu bulmak için bölüme geri dönebilir. Bu bölüm, Gezegeninizi Sevin bölümünde yine yeşil sekmeyi çekip sallanan çok sayıda vücut yağı kavanozunu ortaya çıkardığımız yerde tekrarlanır. Bu bölümde ayrıca sürdürülebilirlik ve kaydırıcıyı sola veya sağa sürükleyerek gezinilebilen yeni, tamamen geri dönüştürülmüş vücut yağı kavanozunun arkasındaki harika insanlar hakkında güzel bir anlatım yer alıyor.
Spotify – Birlikte Dinlemek
Spotify hakkında ne istediğinizi söyleyin. Fakat akış hizmeti kesinlikle olağanüstü bir dijital deneyim sunabilir. Mor web sitelerindeki yazımızda Spotify’ın Hayran Çalışması’ndan zaten bahsetmiştik ve bu sefer ortak dinlemenin bir kutlaması olan Birlikte Dinleme hakkında konuşmak istiyoruz. Konsept basit – Spotify’a göre her saniye aynı melodiyi aynı anda dinleyen 30.000’den fazla insan var. Spotify, dinlemenin başka türlü tanışmamış ve muhtemelen hiç tanışmamış insanları birbirine bağladığı gerçeğini kutlamak için, Dünya gezegeninin sürüklenip döndürülebilen ve bu noktalarda keyif alınan coğrafi etiketleri ve ilgili melodileri keşfetmek için döndürülebilen 3 boyutlu bir sunumuna odaklanan etkileşimli bir sunum oluşturdu. herhangi bir zaman. Etkileşim kusursuz ve deneyim sürükleyici ve eğlenceli, bu nedenle kendinizi bu web sitesinde işleri ertelerken yakalarsanız şaşırmayın.
Ben Buongiorno
Puglia bölgesindeki İtalyan şarap üreticilerinin web sitesi I Buongiorno, aile şaraplarının, misyonlarının ve hikayelerinin harika bir resimli vitrinidir. Web sitesinin tamamı, fotoğraf ve çizimleri birleştiren kolajlarla yatay gezinmeye dayanmaktadır. Ziyaretçiler, şarap seçimini veya şaraphane zaman çizelgesini keşfetmek için kaydırıcıyı sürüklemeye veya kaydırmaya davet edilir. Sayfanın üst kısmındaki yarım daire, herhangi bir anda yatay çizgide nerede olduğumuzun bir göstergesidir. Daire, web sitesinin görsel ana motifidir ve imlecin yanı sıra logoda, simgelerde, favicon’da bulunabilir. Etkileşim pürüzsüz ve sürükleyicidir ve ziyaretçiyi I Buongiorno’nun hikayesinin derinliklerine çekmeye yardımcı olur.
Bocalayan Cehennem
Bu günlerde, giderek daha fazla sayıda marka, şirket ve satış noktası, “geleneksel” düz web siteleri yerine sürükleyici hikaye anlatımı deneyimlerini tercih ediyor. Böyle bir girişim ve son derece etkileyici olanı da Viyana’daki Falter gazetesinin projesidir. Falter Inferno, her biri modern dünyada yaşadığımız belirli bir tür baskıyı gösteren bölümler aracılığıyla anlatılan kasvetli, karanlık ve depresif bir gerçeklik kontrolü sunuyor. Hikaye, karanlık bir arka plan üzerinde basit bir daireyi sürükleyip bırakmakla başlıyor, tıpkı bir perdeyi aşağı çekmek gibi. Anlatımın sonunda ziyaretçiden ekranın üst kenarından bir elini sürükleyip kavrama noktasına getirmesi ve alttaki eli çekmesi istenir. Sonra, bir girdapta her şey değişir ve modern insanın tüm tepkisel, konformist alışkanlıklarını ezerek ve gerçeği yüksek sesle ve net bir şekilde söyleyerek bizi özgürleştirmeyi amaçlayan bir figür olan Falter sayesinde tekrar yüzeye çekiliriz. Kısa, yoğun ve güçlü web sitesi, etkileşimli web tasarımı, animasyon ve illüstrasyonda bir şaheserdir ve markanın tanıtımında olağanüstü bir iş çıkarır.
Sabit Hatlar – Chrome Deneyleri
Chrome Deneyleri, diğer kodlayıcıların oynaması ve deney yapması için açık bir araç ve kaynak seti de içeren, teknolojinin sınırlarını zorlayan kodlayıcılar tarafından yapılmış bir dizi web yapımıdır. Sabit Hatlar, sürükleyerek veya fareyle çizerek keşfedilebilen Google Earth uydu görüntülerine dayalı bir deneydir. “Çiz” eylemi, kullanıcının çizdiği çizgiyle tam bir eşleşme bulurken, “Sürükle” sonsuz bağlantılı bir yol, kıyı şeridi ve nehir hattı oluşturur. Google Earth ile ilgili her şey gibi, inanılmaz derecede bağımlılık yapan bir deneyim çünkü çizim ve sürükleme etkileşimleri çok tatmin edici, hatta yatıştırıcı bir şekilde sonsuz bir dizi sonuç sağlıyor.
Wannabe Mağazası
Wannabe Store, oyuncak satmadığını ya da en azından sadece oyuncak satmadığını kanıtlamak için elinden gelen her şeyi yapan bir mağazadır – aksiyon figürleri, koleksiyon parçaları ve aksesuarlar, tüm meraklılar için gerçek bir zevktir. Şaşırtıcı derecede minimalist ve hatta yumuşatılmış bir tarza sahip olan web sitesi (belki böyle bir mağazadan daha gösterişli, daha gürültülü bir karakter beklenebilir), sürükleme eylemine dayalı etkileşimli bir bölümle açılıyor. Büyük sakallı bir kafatası, sayfanın ortasında 3 boyutlu bir nesne olarak gösterilir. Hemen anlamayanlar için, biraz aşağıda bir değişiklik başlatmak için kafatasının çekilmesi ve sürüklenmesi gerektiğini belirten bir metin var. Sürüklemeyi bıraktığımızda, kafatası biraz zıplar, döner, renk değiştirir ve – şapkasını değiştirir. Bu keyifli etkileşimin, alışveriş yapanları ağırlamaktan ve işe koyulmadan önce biraz eğlence sağlamaktan başka bir amacı yoktur – heykelcikler ve koleksiyon parçaları için alışveriş.
nabız yapmak
En iyi oynanabilir ve etkileşimli web siteleri listemizde bundan zaten kapsamlı bir şekilde bahsetmiştik. Fakat böylesine dudak uçuklatan bir tasarım kesinlikle tekrar ziyareti hak ediyor. makemepulse, etkileyici bir müşteri listesine ve içinde çalışan çok daha etkileyici bir yaratıcı kadrosuna sahip etkileşimli bir stüdyo ve reklam ajansıdır. 2018’de ajans, yeni yılı kutlamak için etkileşimli bir dijital deneyim yaratmaya karar verdi ve sonuçta, her yıl doğayla mükemmel bir simbiyoz içinde bir arada var olduğu yeni bir adaya seyahat eden bir kabilenin dijital ütopik hikayesi Nomadic Tribe ortaya çıktı. Böyle bir tema için, onu büyük Jean Giraud namı diğer Moebius’a bir saygı ya da hürmet olarak görsel olarak oluşturmaya karar vermek akıllıca bir seçimdi. Aslında, görseller Moebius’un stilini, özellikle de Edena serisini o kadar anımsatıyor ki, bazıları bunu ustanın kendisinin yaptığına inanmak için kandırılabilir – en azından sonuna kadar, ifşaya geldiğimizde. Bu projenin üstün estetik değerinden sonsuza kadar bahsedebiliriz ama bu kez etkileşim üzerine odaklanıyoruz. Hikaye, her biri bazı kullanıcı eylemleriyle başlayan bölümlere ayrılmıştır. Bölümlerin kendileri etkileşimlidir – bir çiçeği sürükleyip temelde “çekersiniz”, onu istediğiniz kadar büyük yapar ve istediğiniz yöne doğrultursunuz ve ayrıca görkemli kuşların hangi hızda hareket edeceğini belirlersiniz. kabileyi bir sonraki adaya taşıyacak. Animasyonlar kusursuz ve farenizi sürükleyerek güzel bir çiçeğe hayat verme yanılsaması garip bir şekilde tatmin edici bir his veriyor. Kullanıcı, deneyimin bir parçası olur, deneyimin bir parçası gibi hisseder ve umarım kendi yaşam kaynağına yabancılaşmış bir dünyada kendi yerini ve rolünü yeniden ziyaret eder.
Konunun Özeti
Sürükleme etkileşimleri, bir tasarıma canlılık katmanın harika bir yoludur. En büyük değerleri, kullanıcı ile arayüzü birbirine bağlamaya yardımcı olmaları gerçeğinde yatmaktadır. İkisi arasındaki ayrım artık kısıtlayıcı değil – tıkla ve tut, sürükle, çek ve kaydır gibi etkileşimler sayesinde web sitesi ziyaretçisi, artık sadece görüntüleme ile sınırlı olmayan deneyimde aktif bir katılımcı haline geliyor.
Sürükleme etkileşimleri ayrıca kodlama ve tasarım becerilerinizi sergilemenin mükemmel bir yoludur. Sihirlerini yapmak için, bu etkileşimlerin dikkatlice haritalanması ve bir aksaklık olmadan gerçekleştirilmesi gerekir. Bu yüzden onları çoğunlukla kusursuz UX, mümkün olan en temiz kod ve en yenilikçi tasarımla övünen web sitelerinde görüyoruz.
İlham verici, heyecan verici sürükleme etkileşimlerine sahip web sitesi seçimimizi beğeneceğinizi umuyoruz. Kendi favorileriniz varsa, bunları yorumlar bölümünde bizimle paylaştığınızdan emin olun!