Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor.

için elinden gelen her şeyi yapıyorsun web sitesi oluştur Bu, ziyaretçileri dönüşüme yönlendirecektir. Analitiği incelediğinizde, oluşturduğunuz kullanıcı yolculuğunun ziyaretçileri tarafından defalarca desteklendiğini görmek sizi heyecanlandırıyor. Ancak, dönüştürülmelerini engelleyen bir şey var.

İletişim formu, ziyaretçilerinizin yolculuğunun önemli bir parçasıdır. Aslında neredeyse her şeye sahip olsanız bile web sitesi sunabilir, bir iletişim formu doğru kullanılmadığı takdirde deneyimi mahvedebilir. “Kırık” butonlar, kafa karıştıran alanlar, çok fazla adım, düzensiz bir arayüz… iletişim formunun yerleştirilmesi bile kullanıcı deneyimini bozabilir.

Yanlış giden birçok şey var.

Mükemmel iletişim formu oluşturmak için 5 kuralları

2014 yılında yayınlanan bir Google göz izleme çalışması, form tasarımı için en temel kullanım yönergelerini takip etmenin kullanıcı deneyimini önemli ölçüde iyileştireceğini göstermiştir. Özellikle, bir iletişim formu tüm kuralları karşıladığında, kullanıcıların% 78'i bunları doldurup tek denemede gönderebilir. Bir iletişim formu bu kuralları ihlal ettiğinde, ancak, yalnızca% 42'si bunu tek seferde yapabilir.

Bu kuralların ne olduğunu merak ediyor musunuz? Öyleyse okumaya devam edin.

Kural 1: Hizalamaya odaklanın

Buradaki diğer kurallarda göreceğiniz gibi, insanlar genellikle iletişim formlarının uzunluğuyla ilgilenirler ve bu da genellikle kötü tasarım seçimlerine yol açar. Örneğin hizalama sorununu ele alalım.

üzerinde böyle bir form görebilirsiniz. Site Web BrainTraffic'ten alın ve düşünün: Hmmm…ama bu doldurmak için biraz uzun değil mi?

form doldurun .png

Bu "sorunu" çözmeyi düşünmenin bir yolu, etiketleri sola taşımak ve yanıt alanlarını sağa yerleştirmektir. Bununla birlikte, UX uzmanları, formu tarama yeteneğini tehlikeye attığı için bunun büyük bir hayır-hayır olduğunu söyleyecektir. Aynı şey, alanları yatay olarak yan yana yerleştirmeyi düşündüğünüzde de geçerlidir.

İletişim formlarınızın uyum standardını karşılamasını istiyorsanız, yapmanız gerekenler:

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

  • Tüm etiketleri, form alanlarını ve birincil harekete geçirici mesaj düğmesini sola hizalayın.
  • İlgili alanları asla yatay olarak hizalamayın. Formu mantıksal olarak yapılandırabilirsiniz, ancak her soru veya alan dikey olarak yığılmalıdır.
  • Çoktan seçmeli sorular içeren (altıdan az seçenekli) herhangi bir alan, açılır bir menüde değil, dikey bir nokta veya onay kutusu listesinde gösterilmelidir.

2 Kuralı: İlgili tüm alanları dahil et

İletişim formları tasarlamaya gelince, ne kadar kısa olursa o kadar iyi olabilir, değil mi? Her zaman durum böyle değildir. En önemlisi, kullanıcılara gerekli ve ilgili tüm alanları sağlamanızdır.

Unbounce için Kıdemli Dönüşüm Optimize Edici olan Michael Aagaard, sunum 2015 yılında bu konuyu ele aldı. O ve ekibi, bu iletişim formunu kısaltırlarsa ne olacağını bilmek istedi:

iletişim formu örneği court.png

Gördüğünüz gibi, formu doldurma sürecini kolaylaştırmak için gereksiz alanlar olduğuna inandıkları alanları kaldırdılar. Bununla birlikte, testin sonunda, daha kısa formda dönüşümlerde% 14'lük bir düşüş buldular.

Kural # 3: Alanları Basitleştir

Kullanıcılarınızın iletişim formunuzla masaüstü veya mobil cihaz kullanarak etkileşime girip girmedikleri veya onlara yardımcı olacak yardımcı teknolojiye ihtiyaçları olup olmadığı önemli değildir, form donatılmalıdır. giriş sürecini basitleştirmek için.

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

İşte bilmeniz gereken bazı teknikler:

Listeleme
Masaüstü kullanıcıları ve erişilebilirlik sorunları olanlar için, iletişim formunuzda mantıksal sekme sıralamasının etkinleştirildiğinden emin olun.

Girilen maskeler
Kullanıcıları, belirli alanların nasıl biçimlendirilmesini istediğinizi tahmin etmeye zorlamak yerine, bunları otomatik olarak biçimlendiren giriş maskeleriyle ekleyebilirsiniz.

biçimlendirme alanları html.png

Google Otomatik Tamamlama
Her alanı kodlamak yerine biçimleri uyulacak standartlara göre otomatik olarak, Google adresleri otomatik doldurma eklentisini kullanarak otomatik doldurmayı etkinleştirin. Bu sizi yalnızca yazım hataları ve yanlış doldurulmuş adreslerle uğraşmaktan kurtarmayacak, aynı zamanda ziyaretçilerinizi bu bilgilerin çoğunu yazmaktan da kurtaracaktır.

Kural # 4: Tüm Çık

Bu kuralın minimalizmin temellerine aykırı olacağını fark etsem de, ziyaretçilerinizi gereksiz yere sinirlendirmemek için çok dikkat etmeniz gereken bir kuraldır.

Açıklayayım: Oldukça basit görünen bir iletişim formunuz var. Kullanıcılarınız bunu etiketlerin önerdiği şekilde doldurur ve gönder düğmesini tıklar. Sonra şu korkunç kırmızı mesajı alırlar: “Bunu doğru yapmadın! Geri dönün, formu düzeltin ve geri gönderin! " 

Muhtemelen bir kullanıcı olarak karşılaştınız ve bunun ne kadar sinir bozucu olabileceğini biliyorsunuz, özellikle de hata atıldığında girdiğiniz bilgilerden bazıları silinirse. Bu nedenle, kullanıcıları neyin nasıl düzeltilmesi gerektiğini tahmin etmeye bırakmak yerine, bu noktaya gelmesine izin vermeyin. Yolda her şeyi heceleyin:

  • Alanda (özellikle mobilde) bir odaklanma sağlayın, böylece kullanıcılar bir formu tam olarak nerede doldurduklarını bilsinler.
  • Alanları otomatik olarak biçimlendirmek için giriş maskeleri kullanmıyorsanız tüm biçimlendirme gereksinimlerini not edin.
  • Bir alanın "İsteğe Bağlı" olduğunu açıkça belirtin (kırmızı yıldız işaretini değil, kelimeyi kullanın).
  • Kullanıcılara, şifre alanını girdiklerinde gösterme veya gizleme seçeneği verin.
  • Kullanıcı bir alana girer girmez bir hata mesajı görüntüleyin. Bunu yapmak için sonuna kadar beklemeyin.

form wordpress.png hatası

Kural # 5: Tavsiyeyi Gizleme

Bir iletişim formundaki tahta metni şöyle görünür:

tips.png ile alan

Target'ın etiketleri alana nasıl yerleştirdiğini görüyor musunuz? Bazı iletişim formlarında, bu etiketler / göstergeler, kullanıcı bir alanı tıkladığında kaybolur. Hedef bunu biraz farklı bir şekilde ele alır ve etiketi alan kutusunun en üstüne taşır (bkz. "E-posta adresi").

Bunun nasıl kullanıldığı ne olursa olsun, grup gibi kullanılabilirlik uzmanları Nielsen Norman, bunun kötü bir tasarım uygulaması olduğunu söyleyeceğim çünkü:

  • Bu, bir sonraki alanda çoklu görev yapan, dikkati dağınık veya çok hızlı tempolu kullanıcılar için sorunludur. İpucu kaybolduğunda, kullanıcıların ihtiyaç duyduklarını yeniden keşfetmek için alandan ayrılması gerekir.
  • Kaybolan ipuçları, kullanıcıların çalışmalarını kontrol etmek için bir forma geri dönmelerini veya aşağıdakileri görmek için yanıtı tamamen silmeden bir hatayı düzeltmelerini de önler.
  • Yer tutucu ipuçları için kullanılan daha açık gri metin, kolay okuma için ideal değildir.
  • İpucu metni olan alanlar, verileri önceden doldurmuş alanlarla karıştırılabilir ve kullanıcıların bunları yok saymasına, formu göndermesine ve bir hata mesajı almasına neden olabilir.
  • bazı araçları ekran okuyucular ipucu metnini okuyamaz.

NNG'ye göre, kullanıcılar boş alanları ipucu metni içerenlerden daha çekici buluyor. Formlarınız bu etiketleri veya tanımlayıcıları alanın üstüne yerleştirmek için daha uzun görünse bile, kullanılabilirliği artıracaktır.

Bu ipuçları için bu kadar, umarım daha iyi iletişim formları oluşturmanıza yardımcı olurlar.

%d bu sayfayı beğendi blogcular: