Okuyucuların Seçimi
Popüler Makaleler
Renkle çalışmak, herhangi bir web tasarımcısı için temel bir beceridir. Doğru kullanımı siteye başarı getirebilir ve gamayı oluştururken yapılacak küçük bir hata bile gelecekte çok fazla sorun getirecektir. Bu yazıda, bir web sitesinde renklerle çalışırken tasarımcıların yaptığı 10 hatayı inceleyeceğiz ve bunlardan nasıl kaçınacağınızı anlatacağız.
Örneğin, portakal harika bir alışveriş motivasyonudur. Çevrimiçi mağazalar için uygun olan harekete geçirici mesajları mükemmel bir şekilde iletir.
Yeşil güveni simgeler ve konu gıda olduğunda güvenden daha önemli ne olabilir?
Bir siteyi gerçekten beğenmiş olsanız bile, "tamamen aynı, ancak ürünlerim hakkında" sipariş vermeden önce iki kez düşünün.
Renk paleti seçerken en az bir renk çarkı kullanmanızı tavsiye ederiz. Onunla renk seçerken, bitişik renklerin ve zıt renklerin birbirleriyle iyi bir şekilde kombinlendiğini hatırlamanız gerekir.
Ayrıca özel siteler kullanmanızı öneririz. Burada kendi aralığınızı oluşturabilir veya hazır olanlardan birini kullanabilirsiniz.
İlk örnekte, metni süslemek için 3 renk, ikincisinde sadece iki renk kullanılmıştır. Daha iyi görünen ikinci seçenektir ve üzerindeki metnin okunması daha kolaydır.
Örneğin, aynı sitede aynı amaca sahip iki buton. Kötü bir karar.
Bu iki moda trendi genellikle uyumsuzdur. Siteniz görüntülendiğinde aynı duyguları yaratmıyorsa, duygulara dayalı satış yapamazsınız.
Ancak bu, satan bir duygusal açılış sayfasının gökkuşağının tüm renkleriyle parlaması gerektiği anlamına gelmez.
Alışkanlıklarımız ve pazarlamacıların yöntemleri süpermarketlerden İnternet'e göç ediyor, örneğin siyah renkte yapılmış bir mücevher şirketinin web sitesi zarif ve pahalı görünüyor:
Düşük fiyat segmentinde hizmet veriyorsanız veya ucuz mal satıyorsanız sitede arka plan olarak çok fazla siyah kullanmamalısınız. Ziyaretçilerin site hakkındaki izlenimleri, satış teklifinizle eşleşmeyecektir.
Vizyonunuz istediğiniz kadar güzel olabilir, ancak bırakın tasarımcı kendi vizyonunu sunsun. Birkaç denemeden sonra tasarımcı hala beğendiğiniz bir şeyi gösteremezse, ancak o zaman renk seçiminde ona katı bir çerçeve koymaya değer.
Başka bir istisna: renk şemanızın iyi düşünüldüğünden eminseniz ve bu seçimi kendinize haklı çıkarabilirsiniz. Kural olarak, müşteriler tasarımcının neyi hesaba kattığını dikkate almaz - metnin okunabilirliği, düğmelerin yeterli parlaklığı ve optimum renk sayısı.
Örneğin, Aviasales.ru'nun ilk ekranını bulanıklaştırdık - 1, 2 ve 3 numaralı element blokları dikkat çekiyor. kullanıcı için doğru beklentilerin oluşturulması, o (kontrast kurallarını hatırlayın) parametreleri ve harekete geçirici mesajı seçmek için gerekli unsurlara bakacaktır.
Ve ostrovok.ru sitesindeki ana eylemin bulanık bir arka plana karşı ne kadar net öne çıktığına bakın.
Arayüzleriniz bu tür testleri bir patlama ile geçerse, kullanıcı psikolojisi anlayışına dayalı olarak daha fazla site iyileştirmesi yapılmalıdır, yani. gerçek kullanıcılardan gelen geri bildirimleri analiz etmek. Şuna benzer sorularla: "İlk olarak nereye baktınız: sitenin hangi 3 öğesi ve hangi sırayla? İlk önce nereye tıklamak istiyorsunuz ve neden?” AskUsers'da yalnızca kullanıcıların dikkatinin nasıl dağıldığını değil, aynı zamanda kullanıcıların neden belirli öğelere baktıklarını da anlayabilirsiniz. Bu bilgi, mevcut arayüzdeki bir takım sorunları tanımlamaya ve bunları çözmek için en iyi seçenekleri bulmaya yardımcı olacaktır.
Formun içeriği takip ettiğini unutmayın. Renk tasarımı, kullanıcının dikkatini kullanıcı ve site sahibi için önemli olan bilgilere odaklamak için bir araç olarak hizmet eder.
HTML kullanarak, bir sayfadaki tüm bağlantıların renklerini ayarlayabilir ve tek tek bağlantıların renklerini değiştirebilirsiniz.
Bağlantı renkleri, etiket özellikleri olarak ayarlanır
. Nitelikler isteğe bağlıdır ve belirtilmemişse varsayılan değerler kullanılır.bağlantı - web sayfasındaki bağlantıların rengini tanımlar (varsayılan renk mavidir, #0000FF).
vlink - zaten ziyaret edilen bağlantıların rengi. Varsayılan renk mor, #800080.
HTML'de renkler genellikle #rrggbb biçiminde onaltılık basamaklar olarak belirtilir; burada r, g ve b sırasıyla kırmızı, yeşil ve mavi bileşenleri temsil eder. Her renge 00 ila FF arasında onaltılık bir değer verilir, bu da ondalık olarak 0 ila 255 aralığına karşılık gelir. Bu değerler daha sonra # sembolünden önce gelen tek bir sayı halinde birleştirilir (örnek 1).
Örnek 1: Bağlantı Renklerini Ayarlama
site içeriği
Rengin onaltılık biçimde belirtilmesi gerekmez, anahtar sözcükler de kullanılabilir. Bu örnekte, web sayfasının arka plan rengi siyah, bağlantı rengi kırmızı olarak ayarlanmıştır.
Bağlantıların rengini değiştirmek için CSS kullanmak daha uygundur. Bir web sayfasındaki tüm bağlantıların rengini ayarlamak için, A seçicisine eklenen aşağıdaki sözde sınıflar kullanılır.
ziyaret edilen - Ziyaret edilen bağlantının stili.
aktif - Aktif bağlantı için stil. Tıkladığınızda bağlantı aktif hale gelir.
Örnek 2, stiller kullanılarak bir web sayfasındaki bağlantıların renginin nasıl değiştirileceğini gösterir. Bunu yapmak için, color özelliğini kullanıyoruz, belirli metnin rengini, bu durumda bağlantıların rengini ayarlar.
Örnek 2. Stiller aracılığıyla ayarlanan bağlantıların rengi
site içeriği
Yukarıdaki renk ayarlama yöntemi, bir web sayfasındaki tüm bağlantılar için çalışır. Ancak bazen farklı renkleri aynı anda kullanmak gerekebiliyor. Örneğin, bir web sayfasının koyu alanları için açık renkler ve açık olanlar için sırasıyla koyu renkler. Bunun için stilleri de kullanabilirsiniz.
Bir bağlantının rengini değiştirmek için etikette style="color: #rrggbb" niteliğini kullanın , burada #rrggbb onaltılık renktir. Ayrıca renk adlarını kullanabilir veya şu biçimde bir renk belirtebilirsiniz: rgb (132, 33, 65) . Parantez içinde kırmızı, yeşil ve mavinin ondalık değerleri vardır (örnek 3).
site içeriği
İnternet pazarlamacılığı
kullanılabilirlik
Bu örnek, stilleri kullanarak renk ayarlamanın üç farklı yolunu gösterir.
Hangi düğme renginin en yüksek dönüşüme sahip olduğu, birçoğunun cevabını bildiği eski bir felsefi sorudur. "Kırmızı" - acemi pazarlamacılar cevap verecektir. "Zıt" - deneyimli pazarlamacılar cevap verecektir. Bu konuda 21.666 kullanıcıyı test ettik. Ve oldukça ilginç sonuçlara vardılar.
Makalenin başına dikkat çekmek için entrika ve rahatsız edici gerçekleri eklemeniz gerekiyor. Bu tavsiyeye dayanarak pratikte buton renginde basit bir değişiklikle %65'e varan bir dönüşüm artışı elde ettiğimizi söyleyebilirim. Bu yazımızda sonuçlarından ve nasıl yapılacağından bahsedeceğiz.
Size dönüşüm yönetimi için sihirli bir hap icat ettiğimizi söylemeyeceğim. Artan dönüşüm durumlarında, basit bir sonuca vardım. Her zaman ve herkes için işe yarayacak yüzde yüz ifadeler mevcut değildir. Sihirli haplar da. Daha önce "Ücretsiz" kelimesinin bazı durumlarda dönüşümü nasıl azalttığı hakkında yazmıştık. Diğer "yüzde yüz" gerçekler hakkında ne söyleyebiliriz.
Peki, sadece düğme renklerini değiştirerek dönüşümleri ne kadar artırabilirsiniz?
%65'e varan dönüşüm oranı artışı sağladık. Testlerdeki en yüksek puan %65 idi. Ortalama değer %11 seviyesindeydi. Ancak dönüşümdeki böyle bir artış bile çok iyi bir sonuçtur. Bunun, düğmenin rengini değiştirerek elde edilebileceği göz önüne alındığında.
Birçok uzman testi, kırmızı renkli düğmenin en yüksek dönüşüm oranına sahip olduğunu söylüyor. Niye ya? Her rengin kendine özgü çağrışımları olduğunu ve belirli duygular uyandırdığını biliyoruz. Kırmızı, dur, tehlike ve tutku anlamına gelir. Ve çoğu durumda (inanıldığı gibi) İnternet pazarlamasında daha iyi sonuçlara yol açar.
A / B testleri oluşturmak için algoritma aşağıdadır:
1. Yapıcıda bir pencere öğesi oluşturma
Bir widget oluşturmak için kurucuya kayıtlı olmanız gerekir.
Oluşturma süreci 3 adımdan oluşur:
Widget oluşturma ile ilgili bu videoyu izleyebilirsiniz. Her aşama burada ayrıntılı olarak tartışılmaktadır. Widget oluşturmak için metin talimatları bulunur.
Yapıcıda ayarlar için çok daha fazla seçenek olduğunu belirtmek isterim. Örneğin, belirli sayıda sayfayı görüntülerken haftanın gününe, başvuru kaynağına, görüntüleme sıklığına ve çok daha fazlasına göre gösteriliyor. Ama önce temel ayarları kullanmanızı ve ardından ek ayarlarla denemenizi öneririm.
Bir widget oluşturduktan sonra onun bir kopyasını oluşturmanız gerekir. Yeni widget'ta değişiklik yapmak ve onu bir A / B testine sokmak için. Bunu yapmak için oluşturulan widget'taki "Kopyala" simgesine tıklayın.
Sitede otomatik olarak etkinleştirilir. Şimdi düzenlenmediği için kapatmamız gerekiyor. Bunu yapmak için durumu değiştirin.
Şimdi "Düzenleyiciye" simgesine tıklayarak ayarlarına gidin.
Burada test etmek istediğiniz öğeyi değiştirin. Örneğin, bir düğmenin rengini değiştirelim. Bu tek tıklamayla yapılır. Sadece farklı bir düğme rengi seçmeniz gerekiyor.
"Düğme Rengi" üzerine tıklayın ve istediğinizi seçin.
Bundan sonra widget'ı kaydediyoruz. 4. adımda, önceki widget'ın ayarlarından çıkmak için hiçbir şeyi değiştiremezsiniz. Bunu yapmak için "Kaydet" düğmesini tıklamanız yeterlidir.
Artık farklı düğme renklerine sahip 2 widget'ınız var. Bir A / B testi oluşturmaya geçebilirsiniz. Kolaylık sağlamak için, yalnızca ikinci widget'taki adı değiştirmek kalır.
3. Bir A/B testi oluşturun
Test oluşturmak için "A / B testleri" menüsüne gitmeniz gerekir. Ve "Test Oluştur" düğmesine tıklayın.
Burada ihtiyacınız var:
Bir site seçin - testin adını yazın
Test türünü seçin
Testin türü ile ilgili. KEPLER LEADS'de 2 farklı A/B testi türü vardır: Klasik ve Bireysel. Aradaki fark, geri gelen ziyaretçilere widget'ların gösterilmesidir. Geri dönen bir ziyaretçinin widget'ın yeni bir varyasyonunu görmesini istiyorsanız Klasik Test'i seçin. Geri dönen kullanıcıya widget'ın başka bir sürümünün gösterilmemesini istiyorsanız (gösterilen ilki hatırlanır ve ekran ayarlarına bağlı olarak yalnızca her zaman çalışır), ardından Bireysel'i seçin.
Test türünü seçtikten sonra "Ekle" düğmesini tıklayın. Son adım kalır - test için widget'ları seçmek. Bunu yapmak için, "Widget'lar" hücresine tıklayın ve seçin.
Widget'ları seçtikten sonra hepsinin aktif olup olmadığını kontrol edin. Etkin olmayan widget'lar varsa, onları buradan etkinleştirebilirsiniz.
Her şey! Test oluşturuldu. Tüm sonuçları test istatistiklerinde görebilirsiniz. Bunu yapmak için, test adının sağındaki "Görüntüle" simgesine tıklayın. 1.000 gösterimden gelen toplam trafik üzerinde test yapılmasını önerir (bu, Görüntülemeler sütununda görülebilir). Bundan sonra, bir sonraki testi çalıştırmaya karar verin.
İşiniz burada bitmiyor. Şimdi sonuçları izlememiz gerekiyor ve önemli verilere ulaştıktan sonra (1000 ziyaretçiden tavsiye ediyoruz), diğer hipotezleri test edin. Bunlar manşetler, harekete geçirici mesajlar, değer önermeleri, görseller vb olabilir. Diğer A/B testleri hakkında aşağıdaki yazılarda yazacağız. Bize yorumlarda sonuçlarınızdan bahsedin.
Geniş ve uçsuz bucaksız bir dünyadan ilginç ve bence faydalı haberler yayınlamaya devam ediyorum. SEO. Bugün site tasarımının renklerinden bahsedeceğiz... Evet, evet, renk şemaları ile ilgili. Pekala, başlayalım. Site tasarımının rengi (boyama) ABD'deki Oxford Üniversitesi'nden psikologlar, reklamların tıklanabilirliğini etkilediğine inanıyor.
Amerikalı bilim adamları, sıradan bir kullanıcının bir İnternet portalında yaklaşık 2 dakika harcadığını hesapladı. Bunlardan son 4-7 saniye biz - seo uzmanları için belirleyicidir, ancak bu tasarımcılar için de geçerlidir. bu süre zarfında kullanıcı web sitesini terk eder veya kendisine sunulan reklama tıklar. Seçim bağlıdır site ve reklam birimi renkleri. En "kötü" (istenmeyen ve tıklanamayan) seçenek site tasarım düzeni- Bu siteyi gri veya kırmızı renklerde tasarlamak içindir. Trafik sıfıra yaklaşacak (tıklama oranı), İnternet kaynağına yerleştirilen reklamların etkinliği de. Beyazın hakim olduğu sitelerde kullanıcılar tarafından rahatlık ve huzur yaşanır. Afişlere iyi tıklarlar, içeriğe dayalı reklamcılık, yalnızca başlıklar beklenmedik (çok) parlak ve yüksek kontrastlıysa ve metin ve URL maksimum boyuttaysa onları çeker. Yeşil tasarımlarda hemen hemen aynı şey olur.
Mavi tasarıma ve düzene sahip siteler güven verir (sosyal ağlar VKontakte ve Facebook hemen akla gelir). İlginç bir şekilde, reklam beyaz bir arka plan üzerinde bulunuyorsa burada çalışır ve başlıklar 2 ton daha koyu renkte yazılır (ve yine bu bizim favori VKontakte ve Facebook'umuza uyar). En Çok Kazanan web sitesi tasarım rengi, İngiliz psikologlara göre sarı. Birçok İnternet kullanıcısı aynı anda 2-3 reklam görüntülediğinden, ziyaretlerin tıklamalara oranı 1 ila 2,5'tir. Ancak tüm sarı sitelerdeki afişler etkisizdir. Reklam birimlerinin ve afişlerin tıklandığı portalları tasarlamak için bir başka iyi renk, kontrast oluşturmayan bir kahverengidir. Burada afiş reklamcılığının sonucu 3 ziyaret başına 1 tıklamadır, içeriğe dayalı reklamcılık için yaklaşık 1 ila 2'dir.
not. Özetleyelim. Öncelikle, teste tabi tutulan kitlenin Rusça konuşmaması elbette utanç verici, farklı bir zihniyete sahibiz. Aynı şekilde, BDT sakinleri Amerika veya Avrupa sakinleri değildir. Rus siteleri, kısıtlı Avrupa ve Amerikan İnternet kaynaklarının aksine, tasarımda her zaman gökkuşağı renkleri ve gölgeleriyle ayırt edildi (Apple'ın sitesi canlı bir örnektir). İkincisi, bununla bağlantılı olarak, ülkemizdeki reklamlara da “tıklıyorlar” (kendi gözleminiz) parlak ve zıt. Sarı siteler ve portallar konusunda hemfikir olunamaz - küçük çocuklar hariç (bununla birlikte) yerel ağ kullanıcıları arasında güven uyandırmazlar (büyük sarı portal hakkında hemen söylemeyeceğim - birden fazla akla geliyor). benim fikrim)! Genel olarak, muhtemelen "deneyler" bölümünde bahsedeceğim küçük bir test yapmak gerekli olacaktır.
Ziyaretçilerin tıklama olasılığının daha yüksek olduğu reklamların renk şemasını tahmin etmeye çalışmanıza gerek yok. Reklamları farklı renklerde görüntülemeyi denemeniz gerekir. Ve sonuçlarına göre, sitenize gelen ziyaretçilerin tercihlerini öğreniyoruz. Ancak, 21. yüzyılın pencerelerinin dışında. Bu nedenle, bizim için her şeyi yapacak küçük bir senaryo yazacağız.
Denememde üç ana renge karar verdim: mavi, kırmızı ve yeşil. Her birini farklı bir parlaklık derecesi ile aldı. Ve onlara bir renk daha ekledim - sitemdeki bağlantıların rengi. Böylece denememe yedi renk katılacak.
Temel olarak, bana Profit-Partner CSP tarafından verilen YAN (Yandex Advertising Network) reklamlarını görüntülemek için komut dosyasını alıyorum. Buna otomatik bir renk değişikliği ekleyelim. Renklerin her biri için benzersiz bir etiket oluşturalım. Böylece gelecekte bu bölümleri kullanarak sitenizdeki hangi renk reklamların ziyaretçiler için daha çekici olduğunu analiz edebilirsiniz.
Komut dosyasını çalıştıralım ve veri toplamaya başlayalım. Komut dosyamız tarafından oluşturulan dilimler istatistiklerde görünecektir.
Deney en az bir hafta boyunca günün her saatinde yapılmalıdır. Hafta sonları ve iş günlerinin tüm zaman bağımlılıklarını ve özelliklerini dikkate almak. Her renk şemasının en az 1000 kez gösterilmesi önemlidir.
Üç ana renkten birini seçerseniz, sitemde net bir lider yok. Yüzde birkaç fark, bir hatadan kaynaklanabilir. Ancak genel eğilim, Profit-Partner CSC uzmanlarının tavsiyeleriyle örtüşüyor - daha tıklanabilir renk kırmızı.
Yedi rengin hepsini ayrıntılı olarak ele alırsak, aşağıdaki grup ziyaretçiler arasında tercihlere neden olur: koyu kırmızı (#990000), açık yeşil (#00CC00) ve koyu mavi (#000099).
İstatistiklerime bakmamanızı, ancak Yandex reklam ağındaki reklamlar için renk seçimi konusunda kendi denemenizi yapmanızı tavsiye ederim.
Birkaç siteniz varsa, her site için kendi denemenizi yapmanız gerekir.
Tasarımı değiştirdiyseniz, tekrar deneyin.
Benim gibi birkaç reklam biriminiz varsa, her bir reklam birimi için kendi denemenizi de yapmanız gerekir. Şaşıracaksınız ama benim sitemde yazının ortasındaki ve sonundaki reklam birimlerinde kullanıcı tercihleri farklılık gösteriyor.
Deney en az 7 gün boyunca günün her saatinde yapılmalıdır.
İlgili Makaleler: | |
Bir sembol oluşturmak. PCD'yi sıfırdan öğrenmek. Bir sembol oluşturma p cad'in en son sürümü
Eh, ağzımdan köpürdüğümü nasıl kanıtladığımı hatırlıyorum ... Pasif ton kontrolleri
TEMBROBLOC ŞEMA VE HESAPLAMASI Oynatma kalitesinin değerlendirilmesi... Noel ağacı anahtarı
İki çelenkin başka bir anahtarının şeması, Şek. P-12. onun içinde... |