Modaya uygun feda etmemeniz gereken en iyi uygulama web tasarımı

Tasarım trendleri internette yangın gibi yayıldı. Aktif olarak aramasanız bile, son birkaç yıldır vahşi doğada yüzlerce hamburger menü ve paralaks arka planı gördüğünüzden eminiz. Bu etki, WordPress bazlı web sitelerinde oldukça şiddetlenir, çünkü çoğu bu eğilimi bir satış değeri olarak kullanmak için birleştiren premium temalar kullanır. Yine de, web tasarımındaki en son gelişmeleri her zaman takip etmek için ‘yanlış’ bir şey yoktur. Asıl sorun, tasarımınız en son gereksiz eğilimleri birleştirmek için en iyi uygulamayı feda etmeye başladığında, kullanıcılarınız için daha kötü bir deneyim yarattığında ortaya çıkar.
Web tasarımının en iyi uygulamalarının bir listesini derlemek oldukça korkutucu bir görevdir, ancak trend için feda etmemeniz gereken altı faktörün kısa bir listesiyle denemeye hazırız. 1. Düşmek için en kolay tuzaklardan birinin dönüşümünü göz önünde bulundurarak, trendler için en iyi uygulamayı feda etmek, dönüşümü dikkate alarak tasarım yapmamaktır. Başka bir deyişle, hemen hemen her WordPress projesi bir hedef paylaşıyor, bu da kendilerini olabildiğince çok gözün önüne yerleştirecek ve hem ziyaretçi hem de geri dönen müşteriler olarak bağımlı hale getirecek. Bunu başarmak için, web tasarımcıları dönüşümü optimize etmek için sahip oldukları her aracı kullanmalıdır. Yeni bir tasarımla büyülenmiş olsanız bile, alternatif seçeneklerle çekildiğinde performansı görmek için bir test yapmanız gerekir.
A/B testi, hangi tasarımın daha iyi performans gösterdiğini belirlemek için önemli bir araçtır ve WordPress’te bu testi yapmanıza yardımcı olacak birçok araç vardır.Örneğin, Divi, Divi uçları adı verilen kapsamlı bir A/B test cihazı içerir ve Google Analytics deneyleri ve bir zamanlar popüler olan optimizasyon gibi başka güçlü alternatifler de vardır.Bu basit öneri sadece büyük bir tasarım değişikliği için değil, aynı zamanda WordPress sitenizin genel ekranını ve tonlarını oluşturan küçük parçalar için de geçerlidir-hangi resim paleti uygulanacak, hangi yazı tipi kullanılır. , Tata sitenizin navigasyonunun yeri vb.Tasarımınızı sayılar ve istatistikler etrafında şekillendirmek oldukça hoş görünebilir, ancak ziyaretçilerin daha yüksek bir katılım seviyesine sahip iyi bir tasarımı takdir edeceğinden emin olabilirsiniz.
Dönüştürmeye odaklanan somunları ve cıvataları derinlemesine görmek istiyorsanız, dönüşüm merkezli tasarım için Unbouce’ın ana kılavuzuna bakın. 2. Net ve özlü bir eylem çağrısı (CTA) kullanarak harekete geçme davetini kaldırın, WordPress sitenizdeki getirileri en üst düzeye çıkarmanın en basit, ancak en etkili yollarından biridir. İster bülteniniz, ekstra satışlarınız veya sadece eski kayıt için daha fazla e -posta arıyor olun, bazen sorunun cevabı insanlardan size bu şeyleri vermelerini istemek kadar basittir. Davetiye göre, tasarımınızı daha az görünür kılan herhangi bir tasarımdaki değişikliklerden kaçınmalısınız. Ayrıca, etkili olmak için, görülmeniz ve görülmesi için sitenizin etrafındaki önemli yerlere yerleştirilmeleri gerekir. Yeni bir web sitesini analiz ettiğinizde gözlerinizin genellikle nereye gittiğini düşünün – bir navigasyon çubuğunuz (genellikle üstte veya yanda bulunur), ekranın üst kısmı (mevcut haddeleme galerisini veya tam geniş başlığı görebilirsiniz) , vb. Tüm bunlar CTA yerleştirmek için iyi bir yerdir ve bu nedenle, ana web sitesinin gayrimenkul mülkünü feda etmenizi gerektiren trendlerin farkında olmalısınız. Konuma dayalı sorunun yanı sıra, rengi, boyutu, aynı zamanda dikkate almalısınız. Ve CTA’nızın şekli ve yeni tasarım trendlerinin nasıl uygulanacağı, ideal olarak yoğun ayrı testlere tabi tutulan bu ana faktörleri değiştirmenizi gerektirebilir. En etkili kombinasyonu bulmak için. Örneğin, animasyonlu bir arka plan, CTA’nızdan biriyle çekici olmayan bir kontrast oluşturabilir ve tıklamaların oranını azaltabilir.
Yukarıdaki web sitesi, üzerinde şeffaf CTA bulunan karanlık bir video arka planı kullanarak bu sorunun zarif bir şekilde üstesinden geliyor (hareket halinde görmek için yukarıdaki ekran görüntüsünü tıklamanız gerekiyor), kontrast beyaz bir çizgi ile. Ayrıca, animasyonun arka planının nasıl müdahale edebileceği göz önüne alındığında, bu yönde dikkat çekmek için gerekli olan arka planlarla kontrast başlıklarının nasıl kontrast başlıklarına dikkat edin. Belirli bir noktada kullanılabilecek arama kutusu, siteniz yeterince büyüyecek, böylece basit navigasyon menüleri kullanıcıların etrafta dolaşması ve geçmiş içeriği kolayca bulması için yeterli olmayacak ve burası girilen arama kutusunun yer aldığı yer. Bu işlevi WordPress sitenize uygulama şekliniz dışında, eklentiler, Google Arama vb. ‘İyi’ arama kutusunu tam olarak neyin oluşturduğu hakkında ayrıntılara girmeden önce, oldukça popüler olmayan bir ifadeyle başlayalım: Tüm web sitelerinin buna ihtiyacı yok. Şu anda, herhangi bir web projesinin kapsamından veya işlevinden ayrılması beklenen işlevlerden biridir, ancak bazı durumlarda aşırıdır. Örneğin, düzenli olarak güncellenmeyecek basit bir broşür web sitesi tasarlarsanız ve sahibi özellikle sosyal medya aracılığıyla iletişim kurarsa, anlamı nedir? Bu, sitenizin zaman zaman büyümesini bekliyorsanız, işlev kesinlikle birkaç noktada yararlı olacaktır.

Şimdi, basit bir arama kutusu iki basit bileşen içerir: giriş ve gönderme işlevi. Heyecanlı veya benzersiz olmaya gerek yok, çünkü sitenizin temel işlevlerinden biri olarak düşünülmelidir. Öyleyse, tasarımı değiştirip değiştirmeyeceğinizi değerlendiriyorsanız, aşağıdaki soruyu dikkate almalısınız: Bu, arama kutusunun genel tasarımınızla nasıl eşleştiğini değiştirecek mi?
Kullanım kolaylığını etkileyecek mi?
Yerleşimini etkileyecek ve bulmayı zorlaştıracak mı?
Web sitesinin diğer kısımlarıyla zayıf etkileşimi ve onu kullanmanın zorluğu nedeniyle, arama kutusunun kötü bir uygulaması olduğunu düşündüğümüz örneği kontrol edelim.
Yukarıda, seçildiğinde tüm sayfaları devralan ve kapatılamayan bir arama kutusu işlevi örneği göreceksiniz, bu nedenle kullanıcıların arama yapmamaya karar verirlerse son sayfaya manuel olarak dönmesini gerektirir. Yalnız düşünülürse, tam geniş arama çubuğu oldukça ince görünüyor, ancak daha önce bahsedilen eksiklikleri ve Gönder düğmesinin görünmediği gerçeğini düşündüğünüzde, arama işlevinin kötü bir şekilde uygulanmasını elde edersiniz. 4. Kullanımı kolay olan alışveriş sepetleri arama kutuları ile aynıdır, alışveriş sepetleri genellikle tasarım açısından göz ardı edilir, çünkü sadece işlevsel görünür. Ancak, bir E-Niaga site tasarımı üzerinde çalışıyorsanız, buna özel dikkat etmelisiniz, çünkü bu, müşterilerin projenizle etkileşime girecek ana yollarından biridir.
En iyi alışveriş sepeti türü, kullanıcılara kontrol etmedikleri veya toplam kaç öğe ekledikleri sürekli dostça bir hatırlatma olarak işlev görür, böylece mallarınızı keşfederken satın alımlarını izleyebilirler. Buna ek olarak, açıldıktan sonra, hangi öğelerin eklendiğini (fotoğraf öğesiyle birlikte) kısa bir özet vermeli ve toplam bir tahmin göstermelidir. Tasarım açısından, alışveriş sepetiniz sitenizin genel görünümüyle eşleşmeli ve kolayca tanımalıdır. Walmart alışveriş devi bu sorunu sevdiğimiz basit bir şekilde üstesinden gelmek – alışveriş sepetleri tanınabilecek bir simge ile işaretlenir ve öğe ekledikten sonra parlak turuncu daireler görünecek, içinde kaç ürün olduğunu gösterin. Bu, alışveriş sepetinin alışveriş yaparken müdahale etmemesini sağlar ve ödeme yapmaya hazır olduktan sonra tanınabilir. Buna ek olarak, üçüncü noktada tartıştığımız kriterleri karşılayan daha fazla uzatmadan arama kutularının hayranıyız. 5. Bilgilendirici Bakım ve Hata Sayfaları Birçok tasarımcı bakım sayfaları ve hatalarıyla eğlenmeyi seçer, bu da her şeyin yolunda gittiğini göz önünde bulundurarak yeterince anlaşılabilir, mümkün olduğunca az görülmelidir. Buradaki sorun, tasarımınızın bir parçası olarak bu sayfaya bilgi girmeyi unuttuğunuzda ortaya çıkar.
Örneğin 404 Airbnb hata sayfası alın.

Bu, her şeyi açıklayan başlığı olan oldukça basit bir tasarımdır;Bununla birlikte, size gerçekte ne olduğunu söylemek ve sizi ana siteye geri getirmek için size biraz ekstra bir rehber vermek de zaman alır.Sadece bilgilendirici değil, aynı zamanda iyi görünüyor, ancak orada pek bir şey olmasa da.Şimdi, diğer sitelerde bulunan sayfa 404 ile karşılaştıralım.
Hepsi bu – büyük bir 404 içeren bir animasyon. Animasyonun kendisi harika görünse de takım tasarım becerilerini gösterse de, bu en iyi uygulamanın üzerindeki eğilimlerin iyi bir örneği olarak işlev görür. 6. Tipografi okunabilen tipografi, birçok WordPress sitesine zarar vermesi için genellikle göz ardı edilen bir tasarım alanıdır, çünkü sağ yazı tipi (veya halı) tasarımı gerçekten birleştirebilir. Tasarımınız için doğru adayı seçerken, diğerini kapsayan bir faktör vardır: Okunabilir mi? Bir logo veya başlık tasarlarsanız, daha çarpıcı bir yazı tipi ile kaçabilirsiniz, ancak okuyucunun bir süre dikkat etmesini gerektiren bir şey içeriyorsa bu işe yaramaz. Doğru yazı tipini seçerken silahlarınıza ekleyebileceğiniz bazı basit hileler vardır – örneğin, çizgiyi tutarlı bir uzunlukta tutmak, okuyucuların metni daha az çaba ile izlemesine izin verir. Ayrıca Sans-Serif yazı tipinin başlık olarak daha iyi performans gösterme eğiliminde olduğunu, Serif yazı tipinin okunabilirliği arttırdığı söylenir. Sonuç, kullanım göz önüne alındığında tasarlanmaları gerektiğini düşünerek, web sitesine (web sitesi flaşının gazileri tarafından kanıtlanabileceği gibi) geldiğinde (web sitesi flaşının gazileri tarafından kanıtlanabileceği gibi) çok tehlikeli olan bir tuzağa düşmesi genellikle kolaydır. Dolayısıyla, web tasarımındaki en son trendlerden daha önce cazip geldiyseniz, mod veya kazanan olup olmadığını belirlemek için aşağıdaki kontrol listesini kontrol edin: Bunun dönüşümüm üzerinde olumsuz bir etkisi var mı?

Davetiyemi net bir şekilde hareket ettiriyor mu?
Arama işlevimi kullanamıyor mu? Bu alışveriş sepetimin işlevini etkiliyor mu?

Hata sayfamı daha az bilgilendirici mi yapıyor?

Sitemi okumayı daha az kolaylaştırıyor mu?
Web Tasarım Projesi’ne göre kişisel altın kurallarınız nelerdir?Aşağıdaki yorumlar bölümünde abone olun ve bizimle paylaşın!Makale Thumbnail Makalesi Toni Art / Shutterstock.com

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir