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.

Le İletişim formu ziyaretçilerinizin yolculuğunun önemli bir parçasıdır. Bir web sitesinin sunabileceği hemen hemen her şeye sahip olsanız bile, bir İletişim formu doğru kullanılmazsa deneyimi mahvedebilir. “Kırık” tuşlar, kafa karıştırıcı alanlar, çok fazla adım, düzensiz bir arayüz… İletişim formu kullanıcı deneyimini bozabilir.

Yanlış giden birçok şey var.

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

2014'te yayınlanan bir Google göz izleme çalışması, tasarım için en temel kullanım yönergelerini izlemenin formlar kullanıcı deneyimini önemli ölçüde iyileştirecektir. Spesifik olarak, bir iletişim formu tüm kuralları karşıladığında, kullanıcıların %78'i bu formu tek seferde doldurup gönderebiliyor. Bununla birlikte, bir iletişim formu bu kuralları ihlal ettiğinde, yalnızca %42'si bunu tek bir denemede yapabilmektedir.

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

Kural 1: Hizalamaya odaklanın

Buradaki diğer kurallarda da göreceğiniz gibi, insanlar genellikle sürenin uzunluğundan endişe duyarlar. formlar genellikle zayıf tasarım seçimlerine yol açan temas. Örneğin uyum konusunu 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.

eğer istersen formlar kişiler hizalama standardını karşılıyorsa yapmanız gerekenler şunlardır:

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

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