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.

İletişim formları, birçok web sitesinin önemli bir bileşenidir. Genelde basit olsalar da, potansiyel müşteriler toplamak ve kullanıcılarınızla iletişim halinde kalmak istiyorsanız kullanımlarının kolay olduğundan emin olmanız gerekir. Bu genellikle ofis trafiğiyle ilgili bir sorun değildir, ancak bir mobil cihaz kullanıyorsanız formları kullanmak zor olabilir.

Bu eğiticide, mobil uyumlu formlar tasarlamanın önemi hakkında biraz konuşacağız. Daha sonra, formlarınızın mobil cihazlarda sorunsuz çalışmasını sağlamak için size beş ipucu vereceğiz.

Hadi işe koyulalım!

Formlarınızın mobil uyumlu olması neden önemlidir?

Formlar tüm şekil ve boyutlarda gelir. Çoğu zaman, iletişim formlarıyla ilgileneceksiniz:

iletişim formu.png örneği

Kayıt (abonelik) formları da çok popülerdir çünkü e-postaları toplamanıza ve kampanyalar sırasında bunları hedeflemenize izin verir:

campaign.png sırasında hedef e-postalar

Ancak formlar her türlü başka amaç için kullanılabilir. Örneğin, aşağıdakileri kullanarak bilgi toplayabilirsiniz: çevrimiçi anket veya anket , bu durumda kullanıcıların yanıt girmesine olanak tanıyan formlara ihtiyacınız olacaktır.

Başka bir deyişle, formlar çok yönlüdür ve neredeyse tüm siteler şu veya bu şekilde formları kullanır. Bu nedenle, formlarınızın kullanımının kolay olması çok önemlidir (ziyaretçilerinize sinir bozucu bir deneyim sağlamak istemiyorsanız).

Bir masaüstü veya dizüstü bilgisayardaki formları kullanmak genellikle çok kolaydır. Tam bir fareniz ve klavyeniz var, bu nedenle kullanmak istediğiniz alanı seçmek ve verileri girmek sorun olmamalıdır. Bununla birlikte, akıllı telefonunuzdan veya başka bir kompakt cihazdan web'de gezinmenin zorlukları vardır.

Küçük bir ekranda parmaklarınızla çalışırken, kötü tasarım kararları nedeniyle formlarla etkileşim bazen bunaltıcı olabilir. Bu, kendi tasarımlarınızda kaçınmanız gereken bir şey. Sonuçta, mobil kullanıcılar formlarınızla etkileşimde bulunamazlarsa, dönüşümleri, potansiyel müşterileri kaybedebilir veya yalnızca ziyaretçileri rahatsız edebilirsiniz.

Mobil trafiğin artık masaüstü kaynaklardan daha fazla olmasa da önemli olduğunu anlamak da önemlidir. Aslında, mobil trafik son birkaç yılda ikincisini çoktan aştı. Bunun anlamı, bir tasarımın Site Web Yeni bir projeye başlarken ana odak noktanız mobil uyumlu olmalıdır.

Kullanımı kolay mobil formların tasarımı için 5 ipuçları

Neyse ki, mobil uyumlu formlar tasarlamak tahmin edebileceğiniz kadar zor değil. Çoğu durumda, bazı temelleri aklınızda tutmanız ve formlarınızı kullanmadan önce iyice test etmeniz yeterlidir. Nasıl yapılacağı hakkında konuşalım!

1. Tüm gereksiz bölümleri sil

Formunuz ne kadar çok alan içeriyorsa, mobil cihazlarda kullanmak o kadar zor olacaktır. Nitekim, formların mobil cihazlarda kullanımı çok daha karmaşıktır. Formlarınızda yer alan alanların veya bölümlerin sayısını azaltarak, ziyaretçilerin bunları doldurma şansını en üst düzeye çıkarabilirsiniz.

İşte, mobil cihazlarda ihtiyaç duyulmayan birkaç ekstra alana sahip hızlı bir iletişim formu örneği:

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.

mobile.png'de gerekli olmayan alanlar

Çoğu durumda, harika bir iletişim formu için ihtiyacınız olan tek şey bir ad, e-posta ve almak istediğiniz mesajın gövdesidir. Diğer her şey türüne bağlıdır Site Web kullandığınız ve olası satışları toplamaya çalışıyorsanız.

Sonuçta, formda ne kadar az alan varsa, mobil ziyaretçilerin bunları kullanması o kadar kolay olacaktır. Sonuçta, ne kadar iyi tasarlanmış olursa olsun, dokunmatik ekran kullanarak bir alan seçmek, kullanıcıların yapması gereken atlama sayısını en aza indirmek için zor olabilir.

Bu noktada amacınız sitenizdeki mevcut formları incelemektir. Her bir bölümünün üzerinden geçin ve daha önce bahsedilenler dışında başka alanlara gerçekten ihtiyacınız olup olmadığını belirleyin. Gereksiz bir alan varsa, onu silin.

2. Mümkünse açılır listeleri kullanın

Çoğumuz mobil cihazlarda yazı yazmakta ve dokunmatik ekranları kullanmakta rahatız. Ancak bir arkadaşınıza mesaj atmak ve bir iletişim formu doldurmak çok farklı iki deneyimdir. Bunlarla, çok fazla bilgi yazmanız gerekirse hayal kırıklığına uğrama ihtimaliniz yüksektir.

Mobil ziyaretçiniz için hayatı kolaylaştırmanın bir yolu, sitenizin öğeleri hakkında yapmaları gereken seçimleri basitleştirmektir. Size neden bahsettiğimiz hakkında bir fikir vermek için, önceki örneğimizden yararlanalım. rezervasyon restoran:

booking.png yapmak

Yapmak rezervasyon, muhtemelen bir ad, e-posta, telefon bırakmanız gerekecek  et  bir zamanı ve mevcut insan sayısını belirtin. Bir rezervasyon zamanını doğrulamak için iki şekilde bir form alanı oluşturabilirsiniz:

  1. Yalnızca sayısal girişleri kabul eden bir alan yapılandırın.
  2. Rezervasyon için müsait tüm zamanları içeren bir açılır liste tasarlayın.

Tahmin edebileceğiniz gibi, ikincisi mobil kullanıcılar için daha kullanıcı dostudur. Bu yaklaşımla, sayı girmeleri gerekmez ve dahil ettiğiniz seçeneklerden kendileri için en uygun olanı seçebilirler.

Formlarınıza bakmanız ve açılır menülerle değiştirebileceğiniz alanlar içerip içermediğini görmeniz için fikir. Adları veya e-postaları toplamak için açılır menüleri kullanamayacağınız için bu her zaman geçerli olmayacaktır, ancak diğer seçenekler de kullanılabilir.

Kullanım durumları ne olursa olsun, açılır menülerinizin mobil cihazlardan seçilmesi kolay seçenekler içerdiğinden emin olmak istersiniz. Başka bir deyişle, menüyü, birinin doğru seçeneği seçmek için gagalamasına gerek kalmayacak kadar büyük yapın.

3. Gönderim düğmelerinizin dokunmasının kolay olduğundan emin olun

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

Bu ipucu oldukça basit, ancak yine de belirtilmesi gerekiyor. Tasarladığınız her form, kullanıcıların girilen verileri göndermek istediklerini onaylamaları için bir yol içermelidir. Çoğu durumda bu, bir gönder düğmesi oluşturmak anlamına gelir:

bir gönder butonu yaratın.png

Normal bir bilgisayar kullanırken, gönder düğmesine tıklamak dünyadaki en doğal şeydir. Ancak, mobil cihazlarda bir düğmeye basmanın çok daha zor olduğu birkaç formla karşılaştık.

Ziyaretçileriniz formlarınıza girdikleri bilgileri gönderemezlerse tüm çabalarınız boşa gidecektir. Artı, hiçbir şey bir düğme kadar profesyonel görünmüyor göndermek  beklendiği gibi çalışmaz.

Mobil cihazlar için daha iyi gönderim düğmeleri tasarlamak için, göz önünde bulundurmanız gereken üç ipucu:

  1. Bir mobil cihaza kolayca dokunabileceğiniz kadar büyük olduklarından emin olun.
  2. Düğmelerinizi diğer öğelere çok yakın yerleştirmeyin, böylece kullanıcılar onlara düzgün şekilde dokunmaz.
  3. Örneğin, kontrast renkler veya yaratıcı tipografi kullanarak düğmelerinizi vurgulayın.

Tüm bunlara ek olarak, siteniz yayınlanmadan önce düğmelerinizi de test etmek isteyeceksiniz. Bunu nasıl yapacağımızı bir dakika içinde daha derinlemesine inceleyeceğiz. Şimdilik performanstan bahsedelim.

4. Formlarınızın hızlı bir şekilde yüklendiğinden emin olun

Makalelerimizin çoğunda web sitesi performansı hakkında çok konuşuyoruz ve bu hıza ihtiyacımız olduğu için değil. Mesele şu ki, çoğu insan yavaş web sitelerinden hoşlanmıyor, bu da çok mantıklı.

İnternetin hızı arttıkça, bir web sitesinin çok uzun süre yüklenmesini beklemek zor olabilir. Ek olarak, mobil internet hızları normal ev bağlantılarından çok daha fazla değişiklik gösterme eğilimindedir. Bu, web sitenizin mobil cihazlar için yüksek düzeyde optimize edilmesi gerektiği anlamına gelir, eğer bu kullanıcıları mutlu etmek istiyorsanız, hepsinin internet erişimi olmayacaktır (yani hızlı).

Bu özel ipucu web sitenizin tamamı için geçerli olabilir, ancak formlarınızı görüntüleyen mobil sayfalar için de önemlidir. Sitenizin bu bölümlerinin yüklenmesi çok uzun sürüyorsa, sen dönüşümleri kaybet ve ziyaretçilerinizle bağlantı kurma fırsatları.

Genel olarak, bir web sitesinin yüklenmesi iki saniyeden fazla sürmemelidir. Bu sınırı aştığınızda, hemen çıkma oranları çarpıcı bir şekilde artma eğilimindedir ki bu sizin için korkunç bir haberdir ve mobil taramanın doğası göz önüne alındığında, bu süreyi mümkün olduğunca düşük tutmak en iyisidir. .

Bunu akılda tutarak, sitenizin genel performansını iyileştirmenin birçok yolu vardır. Örneğin, daha iyi bir barındırma planına yükseltme yapabilir, hız için optimize edilmiş duyarlı bir tema kullanabilir ve resimlerinizi sıkıştırın. Elbette bunlar tüm kullanıcılara yardımcı olacak ancak özellikle daha küçük cihazlar kullananlar için faydalı olacaktır.

5. Formlarınızı yayınlamadan önce test edin

Formların çoğu web sitesinin önemli bir parçası olduğu düşünüldüğünde, bunları yayınlamadan önce iyice test etmeniz mantıklıdır. WordPress ile bu süreç oldukça basittir. Formlarınızı görüntülemek için belirli sayfalar tasarlayabilir ve tam olarak test edene kadar yayınlayamazsınız.

Tabii ki kullanmak istediğiniz eklenti veya tema size kalmış (çünkü mobil sitelerin geliştirilmesine yardımcı olabilir). Ancak, test aşamasına gelince, işleri basit tutmanızı ve araçları gibi araçları gelişme krom işi yapmak için.

Hızlı bir örnek üzerinden geçelim. Chrome kullanıyorsanız devam edin ve test etmek istediğiniz formla sayfayı önizleyin. Ardından bu sayfada herhangi bir yere sağ tıklayın ve seçeneği seçin denetlemek . Chrome bir dizi görüntüleyecekaraçları Sağda ve solda sayfanın kaynak kodunu incelemek ve düzenlemek için kullanabileceğiniz, bir mobil cihazdan nasıl görüneceğini önizleyebilirsiniz:

Chrome geliştirme araçlarına genel bakış.

Ekranın üst kısmında, farklı çözünürlükler arasında geçiş yapmak için bir menü kullanabilirsiniz. Chrome, birkaç popüler mobil cihaz için ayarlar içerir, ancak özel bir çözünürlük de girebilirsiniz.

Bu noktada, iletişim formunuzun görünümünü ve davranışını birden çok cihazda kontrol etmelisiniz. Aşağıdaki örneği ele alalım - form iyi çalışıyor, ancak olması gerektiği kadar sığmadığını görebilirsiniz. Özellikle ekranın kenarına çok yakın olan metin ve simgelere özellikle dikkat edin:

mobile.png için form tasarımı

Bu sorunu önlemenin bir yolu, ilk ipucunda bahsettiğimiz gibi formlarınızı basit tutmaktır. Aşağıdaki örnekte, form birden çok açılır liste kullanır ve yalnızca üç alan gerektirir. Bu, kullanımı kolaylaştırır ve daha da önemlisi, form o kadar basittir ki, tüm cihazlara mükemmel bir şekilde uyması gerekir:

Ölçeklendirme problemi olmayan bir form örneği.

Formlarınızdan herhangi biriyle ilgili herhangi bir sorununuz varsa, bunları derhal çözmeniz gerekir. Aksi takdirde, öncelikle kaçınmaya çalıştığımız mobil kitlenizi yabancılaştırma riskiyle karşı karşıya kalırsınız!

Sonuç

Web sitenizin mobil cihazlarla uyumlu olduğundan emin olmak, trafiği korumak ve ziyaretçilerinizi sinirlendirmemenin anahtarıdır. Özellikle, mesaj almayı veya değerli potansiyel müşterileri toplamayı kaçırmak istemiyorsanız, formlarınızın mobil cihazlarda kullanımı kolay olmalıdır.

Mobil uyumlu formlar tasarlamaya gelince, hayatınızı basitleştirmek için beş ipucu:

  1. Tüm gereksiz bölümleri silin.
  2. Mümkünse açılır listeleri kullanın.
  3. Gönderim düğmelerinizin basılmasının kolay olduğundan emin olun.
  4. Formlarınızın hızlı bir şekilde yüklendiğinden emin olun.
  5. Formlarınızı yayınlamadan önce test edin.
%d bu sayfayı beğendi blogcular: