Mükemmel bir WordPress İletişim Formu Oluşturma: İhlal edilemeyen 6 Kural
Ziyaretçileri dönüşüme yönlendirecek bir web sitesi oluşturmak için elinizden gelen her şeyi yaparsınız. Analitik öğrenirken, kullanıcının yaptığınız yolculuğun ziyaretçi tarafından tekrar tekrar alındığını görmekten mutluluk duyarsınız. Ancak, dönüştürmelerini engelleyen bir şey var. Bu Gelişmiş İletişim Formu Kılavuzu’nda neler içerdiğini öğrenin. İletişim formu, ziyaretçinizin yolculuğunun önemli bir parçasıdır. Web sitesinin sunulduğu her şeye etkili bir şekilde satmış olsanız bile, iletişim formu gerçekçi olarak, düzgün bir şekilde gerçekleştirilmezse deneyime zarar verebilir.
Kırık düğmeler, kafa karıştırıcı alanlar, çok fazla adım, düzensiz arayüzler … heck, iletişim formlarının yerleştirilmesi bile kullanıcının deneyimine müdahale edebilir. Yanlış olabilecek birçok şey var ve bu makalede, bu şeylerden nasıl kaçınabileceğiniz konusunda sizi eğitmek için elimizden geleni yapacağız. Daha spesifik olarak, size mükemmel bir iletişim formu oluşturmak için 6 kural veriyoruz ama bir dakika bekleyin, PSA önce hızlı … daha ileri gitmeden önce, bunun WordPress iletişim formları dünyasına sürekli bir görünüm olduğunu bilmelisiniz. Basit bir giriş istiyorsanız, yazı iletişim formumuzla başlamak için doğru yerdir.
Ardından, siteniz için daha fazla iletişim formu yapmanız gerektiğini bildikten sonra, bir sonraki adım hayatı kolaylaştırmak için doğru iletişim formu eklentisini seçmektir. Bu şeyleri yaptıktan sonra, aşağıda daha fazla bilgi (heh) için hazır ve hazır olacağınızı düşünüyoruz. Hareketli … Kullanıcı Giriş. Üyelik kaydı. E-Posta Aboneliği. Teklif isteği. Anket. Destek talebi. Rezervasyon ve ödeme formları. WordPress sitesinde iletişim formunu kullanmanın birçok farklı yolu vardır. Bununla birlikte, değişmeyen şey, iletişim formunun düzgün çalışmasını istiyorsanız itaat etmeniz gereken kuraldır. 2014’te yayınlanan bir Google Göz İzleme çalışması, formun tasarımı için en temel kullanımını takip etmenin gelişeceğini göstermektedir. Kullanıcı önemli ölçüde deneyimi. Özellikle, iletişim formu tüm kurallara uyduğunda, kullanıcıların% 78’i bunları bir deneyde tamamlayabilir ve gönderebilir. Ancak, temas formu kuralları ihlal ettiğinde, bunu tek bir çabada sadece% 42 yapabilir. Bu kuralların ne olduğunu merak ediyor musunuz? Sonra okumaya devam edin. Kurallar #1: Buradaki bazı kurallarda göreceğiniz gibi uyum üzerine odaklanın, insanlar genellikle temas formunun uzunluğu konusunda endişelidir, bu da genellikle kötü tasarım seçeneklerine neden olur.
Örneğin uyum problemleri alır. Braintraffic web sitesinde böyle formlar görebilir ve “Hmmm … ama doldurmak için çok uzun değil mi?”
Bu sadece BrainTraffic web sitesinde güzel bir şekilde oluşturulan bir iletişim formudur.
Bu göz izleme testinden, uyuma dikkat etmediğimizde ziyaretçilere ne kadar iş verdiğimiz açıktır.
Birçok bulguları arasında, etiketle düz sol formun daha iyi bir kullanıcı deneyimi üretmek için her alanın üzerine yerleştirildiği sonucuna vardılar. İletişim formunuzun bu basit hizalama kurallarına uymasını istiyorsanız, yapmanız gereken budur:
Tüm etiketlerin, alan alanlarının ve davet düğmelerinin soldaki sola doğru hareket eder.
İlgili alanları asla yatay olarak uyumlu hale getirmeyin. Formları mantıksal olarak düzenleyebilirsiniz, ancak her soru veya alan dikey olarak istiflenmelidir.
Çoktan seçmeli sorusu olan herhangi bir alan (altıdan az seçeneği olan), ısıtılan menüde değil, dikey nokta noktasında veya onay kutusunda görüntülenmelidir. Örnekler, hücresel temasın hizalanmasından ve tasarımından çok iyidir. WPMU Dev.
Sadece bu tasarım kullanıcı deneyimi için iyi değil, aynı zamanda sitenizin masaüstü ve hücresel deneyimler arasındaki boşluğu kapatmasına yardımcı olacaktır (özellikle sitenizi Google’ın hücresel önceliklendiren dizin için güncellemeye çalıştığınızda önemlidir).
Kurallar #2: İlgili tüm alanları ekleyin İletişim formları tasarlarken, daha kısa olanın daha iyi olduğunu düşünebilirsiniz, değil mi? Bu aslında her zaman olmaz. En önemli şey, kullanıcılara gerekli ve ilgili tüm alanları sağlamanızdır. Michael Aagaard, Incounce için üst düzey dönüşümü optimize eden 2015 yılında bu soruyu cevaplayan bir sunum yaptı. O ve ekibi, bu iletişim formunu kısaltırlarsa ne olacağını bilmek istiyor: Garip bir şekilde, daha kısa bir şekil daha uzun sürmez.
Gördüğünüz gibi, formu doldurma biçimini kolaylaştırmak için gereksiz bir alan olarak inandıklarını siliyorlar.
Bununla birlikte, testi tamamladıktan sonra, daha kısa formlarda dönüşümde% 14 azalma buldular. Bundan sonra, hangi alanların temas formunda en yüksek ve en düşük etkileşime sahip olduğunu incelediler. Daha uzun bir orijinal tasarım kullanarak, ne tür bilgilere ihtiyaç duyulduğunu açıklığa kavuşturmak için alanı yeniden düzenler ve etiketi güncellerler. Testleri yeniden düzenliyorlar ve etiketli ve yeniden düzenlenmiş eski sürümlerle beklentilerde% 19’luk bir artış görüyorlar: Unnouce, daha uzun temas formlarını artırmanın anahtarının formun uzunluğu değil etikette olduğunu buldu. Bu test her zaman böyle başarılı değildi.
Örneğin Expedia, “şirket” için iletişim formunda müşterileri karıştıran bir alan olduğunu buldu. Bu isteğe bağlıdır, ancak kullanıcılar her zaman anlamaz ve sonuçta satın alımlarının reddedilmesine neden olan yanlış bilgileri doldurur. Expedia sorunu fark ettiğinde, alanı kaldırdılar ve ertesi yıl 12 milyon dolarlık bir ek gelir gördüler. Kendi iletişim formunuzu oluştururken, QuickBooks’un burada yaptıkları gibi temel alanla başlayın:
QuickBooks’a kaydolurken yalnızca en önemli alanlar dahildir. Dönüşümün beklentilerle uyumlu olmadığını görürseniz, analitik öğrenin ve hangi alanların kullanıcının formu tamamlamasını durdurup durduramayacağını belirleyip belirleyemeyeceğinizi görün.
Kurallar #3: Girdi basitleştirin, kullanıcınızın bir masaüstü veya mobil cihaz kullanarak iletişim formunuza dahil olup olmadığına bakılmaksızın veya bunu yapmalarına yardımcı olmak için yardım teknolojisine ihtiyaç duyup duymadıklarına bakılmaksızın, giriş işlemini basitleştirmek için formun tamamlanması gerekir. Bilmeniz gereken bazı teknikler: Masaüstü kullanıcıları ve erişilebilirlik sorunları olanlar için sekme, iletişim formunuzun mantıksal sekme sırasını etkinleştirdiğinden emin olun. Kullanıcıları belirli bir alanın biçimlendirilmesini istediğinizi tahmin etmeye zorlamak yerine giriş maskesi, kullanıcı türü olduğunda otomatik olarak biçimlendiren bir giriş maskesi ile kodlayabilirsiniz.
Bu tür otomatik biçimlendirme ayrıca daha az tıklama üretir (özellikle telefon numaraları veya kredi kartları gibi alanlar birkaç alana ayrılırsa) ve formların daha hızlı tamamlanması. Giriş Türleri HTML girişi türleri kullanıcıların cep telefonlarına yazdıklarında doğru klavye seçeneğini görmelerine yardımcı olur, bu nedenle her şeyi en başından yazmaları gerekmez (e -posta için “.com” gibi). Elluminati temas formunun altındaki klavyenin seçilen alana göre nasıl değiştiğini unutmayın.
Google’ın her bir alanı, karşılanması gereken standartlara göre otomatik olarak biçimlendirecek şekilde kodlamak yerine otomatik olarak bütünlüğü, otomatik şarjı Google adresinin otomatik eksiksizlik eklentisi ile etkinleştirin.
Bu sadece doğru biçimlendirilmeyen yanlış büyü ve adreslerle uğraşmak zorunda kalmanıza yardımcı olmayacak, aynı zamanda ziyaretçilerinizin bu bilgilerin çoğunu yazmanın gerekliliğini önleyecektir.Koşullu Mantık İletişim formunuzun uzunluğu konusunda endişeleniyorsanız – özellikle farklı kullanıcı türlerini hedefliyorsa ve çeşitli hedefleri yerine getiriyorsa – kısa kalmasını sağlamak için koşullu mantığı kullanabilirsiniz.Kullanıcı özel “koşullarını” seçtikten sonra, yalnızca ilgili form bölümü ortaya çıkar. Son alanı seçtikten sonra, kullanıcılara istekleriyle en alakalı olarak doldurulacak ek alanlar sunulur. Birçok iletişim formu eklentisi bunun için uzantı ile birlikte gelir.Örneğin, bu forminatör içindir.
Forminatörü kullanarak koşullu mantıkla bir form oluşturun. Ekmek ekmek unu ekmek veya temas formları için ilerleme çubuğu her zaman formu doldurma biçimini basitleştirmekle ilgili değildir. Ancak, kalan adımlar açıkça tanımlandığı için kullanıcıları bitirmeye teşvik etmeye yardımcı olur. Bir kez daha, bu, sayfa oluşturma unsurunu kullanarak ilerlemenin bir örneğidir: Formu doldurma biçiminde kullanıcılara daha kolay yardımcı olmak için ilerlemeyi forma ekleyin. Kurallar #4: Bu kuralın minimalistin arkasındaki temel ilkelere aykırı olacağını fark etsem de her şeyi hecelemek, gereksiz ziyaretçilerinizin hayal kırıklığından kaçınabilmeniz için dikkat etmeniz gereken bir şeydir. Açıklayayım: Oldukça basit görünen bir iletişim formunuz var. Kullanıcınız, etiketin önerdiğine göre doldurur ve gönderim düğmesine basar. Sonra kötü kırmızı mesajı aldılar: “Doğru yapmıyorsun! Geri dönün, formu düzeltin ve yeniden kızdırın! ” Bunu bir kullanıcı olarak deneyimlemiş olabilirsiniz ve özellikle bir hata oluştuğunda girdiğiniz bazı bilgiler kaybolursa, ne kadar sinirli olduğunu bilirsiniz. Bu nedenle, kullanıcıların neyin geliştirilmesi gerektiğini ve nasıl geliştirilmesi gerektiğini tahmin etmesine izin vermek yerine, bunu o noktaya bırakmayın. Yol boyunca heceleyin: Kullanıcıların formları doldurma sürecinde tam olarak nerede olduklarını bilirler, böylece bir alan odağı (özellikle hücresel olarak) verin. Otomatik biçim alanları için giriş maskeleri kullanmıyorsanız, biçimlendirme gereksinimlerini yazın.
Bir alan “isteğe bağlı” olduğunda açıkça durum (Kırmızı Benior işaretini değil, kelimeyi kullanın). Kullanıcılara girdiklerinde şifre alanını görüntüleme veya gizleme olanağı verin.
Kullanıcı bir alanla ilgilendiğinde hata mesajlarını gösterin. Bunu yapmak için sonuna kadar beklemeyin.
HubSpot, iletişim formundaki hata mesajlarını işlemenin doğru yolunu gösterir.Yukarıda belirtilen Google Göz İzleme çalışmasında, testi alan ve biçimlendirme eksikliğinin genellikle şikayet olarak adlandırıldığını bulmuşlar. Google, tüm formlar ve çok görünür hata mesajları hakkında açık yönergeler sağlamayı önerir. Ayrıca, bu etiket sadece standart kırmızı yazı tiplerinde olmamalıdır. Tarif edilmeli, renkli ve kalın olmalıdırlar. Kurallar #5: Talimatlardan uzak dur, iletişim formundaki talimatlar şöyle görünüyor: Hedef, saha alanındaki talimatların kullanımı ile ilgili birkaç sorunu geliştirmiş olsa da, erişilebilirlik sorunları olan kullanıcılar için yine de yeterli olmayabilir.
Sahaya etiket yerleştirmenin hedefinin nasıl olduğunu görüyor musunuz? Birkaç iletişim formunda, kullanıcı bir alanda tıkladığında etiket/talimatlar kaybolur. Bunu işleme hedefi biraz farklıdır ve bunun yerine etiketi alan kutusunun üstüne kaydırır (bkz. “E -posta Adresi”). Bunun nasıl ele alındığı dışında, kullanımda olan uzmanlar – Nielsen Norman Group gibi – bunun kötü bir tasarım uygulaması olduğunu söyleyecektir, çünkü:
Bu, birçok görev yapan, rahatsız olan veya bir sonraki alana çok hızlı giren kullanıcılar için sorunludur.Talimatlar ortadan kalktığında, kullanıcı gerekenleri yeniden keşfetmek için sahadan çekilmelidir. Eksik gösteri, kullanıcının aşağıdaki ne olduğunu görmek için yanıtı tamamen silmeden çalışmalarını kontrol etmek veya hataları düzeltmek için formuna geri dönmesini yasaklar.
Yer tutucu talimatları için kullanılan daha parlak gri metin, kolayca okunmak için ideal değildir.
Talimat metni olan alanlar, verilerle doldurulmuş alanlarla karıştırılabilir, kullanıcıların görmezden gelmesini, formları göndermesini ve hata mesajları almasını sağlayabilir.
Bazı ekran okuyucuları yer tutucunun talimat metnini okuyamaz. NNG’ye göre, kullanıcılar Boş alanları talimatlar içerenlerden daha çekici bulurlar. Etiketi veya tanımlayıcıyı alanın üzerine yerleştirmek için formunuzun daha uzun görünmesine rağmen, kullanımı artıracaktır. Kurallar #6: WPMU Dev düğmenizin zaten daha iyi bir düğme tasarlamak için harika bir kılavuz var, bu yüzden tekrar etmeyeceğim. Bunun yerine, iletişim formu düğmenizi geliştirmek için yapabileceğiniz birkaç şeye odaklanmak istiyorum. Yeni başlayanlar için, mantıksız görünse de, her zaman ana CTA’yı saha alanı ile hizalayın. Örneğin, “bir sonraki” ve “dönüş” düğmeleri varsa, “sonraki” en solda görünecektir, çünkü bu çoğu kullanıcı tarafından yapılacak eylemdir. Ayrıca, “Sıfırla”, “Clear” veya “İptal” düğmesini kullanmamaya çalışın. Birçok kullanıcı formun altına girer ve gönderme düğmesi olduğunu düşünerek gördükleri ilk düğmeyi otomatik olarak tıklar. Tüm cevapları kaybederlerse, düğmeye yanlış basarlarsa, yeniden yapmak istemediklerini hissedebilirsiniz. A/B’yi bu beceriksizden test ederken, değere dayalı kopyanın (daha uzun olsa bile) kullanıcıları dönüştürmede daha başarılı olduğunu buldular. CTA metinleri daha uzun olabilir, ancak kullanıcılar çok daha fazlası olan değerlerle yönlendirilen mesajlara yanıt verebilir. pozitif.
Güncellenmiş kopyalar, orijinal mesajdan% 31’den fazla dönüşüm alır. Son olarak, mantıklı olduğunda iletişim formu düğmeniz etrafında bir güven belirtisi kullanın. Coschedule’in kredi kartı gerekmeyen ifadesi bunun için iyi bir örnektir: Genel olarak, kullanıcıları tereddüt etmeden tıklamaya teşvik eden “güven belirtileri” metnini kullanarak çalışmayı iyi yapan harika görünen bir form. Ancak dikkatli olun.İhtiyaç duyulmadığında bir güven belirtisi kullanırsanız, kullanıcıları aslında bu davranmanın A/B testi ile gösterildiği gibi, hassas bilgileri göndermeleri gerektiğine inanmaları yanlış yönlendirebilir:
Bir Truste Trust belirtisinin dönüşümü artırmaya yardımcı olacağını varsayacaksınız, ancak bu durumda böyle değil.
Sürüm B, A sürümünden neredeyse% 13 daha fazla gönderim alır, çünkü güvenlik mühürleri kullanıcıları sonunda web sitesi aracılığıyla ödeme veya diğer hassas bilgiler göndermeleri gerektiğine inanır. (Form) ASI iletişim formuna kayıt olmanın zamanı geldi. Her web sitesinin (ve web sitesinin arkasındaki işin) farklı hedefleri vardır ve bu nedenle BT’taki iletişim formunun bu hedeflere ulaşmaya yardımcı olmak için özellikle çalışması gerekir. Bu hedefe doğru çalışırken yukarıdaki kuralları doğru bir şekilde çalıştırmak istiyorsanız, iki seçeneğiniz vardır. Özel bir WordPress iletişim formu oluşturmanıza yardımcı olacak bir WordPress eklentisi bulabilirsiniz veya kendiniz yapabilirsiniz. WPMU Dev’s Forminator gibi bir eklenti size iki dünyanın en iyisini (ve ücretsiz!) Verir. Eklentiyi yükleyin ve başlamak için bir şablon seçin, ardından çeşitli sofistike özelleştirme seçenekleri ve ayarlarıyla özel ihtiyaçlarınıza uygun bir form oluşturun. Ne karar verirseniz verin, kullanıcıların her zaman uzun iletişim formlarından korkmadıklarını unutmayın, bu daha çok onlar için formda deneyimler yarattığınızla ilgilidir. Web sitenizde El Kodu iletişim formunu kullanmayı tercih ediyor musunuz veya bir WordPress olup olmadığı mı? Herhangi bir zamanda kullandığınız güvenilir eklenti? Neden? Niye?
