Ana İçeriğe Geç

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

Divi: Kullanılacak en kolay WordPress teması

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. [Önerilen]

Ziyaretçileri dönüşüme yönlendirecek bir web sitesi oluşturmak için elinizden gelen her şeyi yapıyorsunuz. Analitik üzerinde çalışırken, yarattığınız kullanıcı yolculuğunun her seferinde ziyaretçileri tarafından desteklendiğini görmekten mutluluk duyarsınız. Ancak, dönüştürülmelerini engelleyen bir şey var.

İletişim formu, ziyaretçilerinizin yolculuğunun önemli bir parçasıdır. Bir web sitesinin sunabileceği neredeyse her şeye sahip olsanız bile, bir iletişim formu doğru kullanılmazsa deneyimi mahvedebilir. "Bozuk" düğmeler, kafa karıştırıcı 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.

BrainTraffic web sitesinde buna benzer bir form görebilir ve şöyle düşünebilirsiniz: Hmmm… ama bu doldurmak için biraz fazla 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, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

  • 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.

İş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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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").

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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ı ekran okuma araçları 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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
16 hisseleri
hisse8
cıvıltı1
Enregistrer7