İ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 çok önemlidir. Aslında, mobil trafik son yıllarda bunu çoktan geride bıraktı. Bu, yeni bir projeye başlarken mobil uyumlu bir web sitesi tasarlamanın ana hedefiniz olması gerektiği anlamına gelir.

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 hızlı bir örnek İletişim formu mobil cihazlarda gerekli olmayan bazı ek alanlarla:

mobile.png'de gerekli olmayan alanlar

Çoğu durumda, harika bir deneyim için ihtiyacınız olan her şey İletişim formu almak istediğiniz mesajın adı, e-postası ve gövdesidir. Diğer her şey, kullandığınız web sitesinin türüne ve olası satışları toplamaya çalışıp çalışmadığınıza bağlıdır.

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ı yazmak ve dokunmatik ekranları kullanmak konusunda rahatız. Ancak bir arkadaşınıza mesaj atıp bir form doldurmak İletişim formu çok farklı iki deneyimdir. Bunlarla, çok fazla bilgi yazmak zorunda kalırsanız 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 orada bulunan kişi sayısını belirtin. Günün bir saatini doğrulamak için form alanı oluşturmanın iki yolu vardır. rezervasyon:

  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

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 plana yükseltebilirsinizhébergement, hız için optimize edilmiş duyarlı temayı kullanın 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.

Elbette, kullanmak istediğiniz eklenti veya tema size bağlıdır (mobil sitelerin geliştirilmesine yardımcı olabileceği sürece). Bununla birlikte, test aşamasına gelince, basit tutmanızı ve aşağıdaki gibi araçları kullanmanızı öneririz. 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, sayfanın kaynak kodunu gözden geçirmek ve düzenlemek için kullanabileceğiniz bir dizi araç görüntüler, sağda ve solda, bir mobil cihazdan görünümünün bir önizlemesini görebilirsiniz:

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.