Ana İçeriğe Geç

Mobil formları tasarlamak için 5 ipuçları

Divi: kullanımı en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

İletişim formları, birçok web sitesinin önemli bir bileşenidir. Genelde basit olmakla birlikte, potansiyel müşterileri toplamak ve kullanıcılarınızla iletişim halinde olmak için kullanımı kolay olduğundan emin olmanız gerekir. Bu genellikle ofis trafiğinde bir sorun değildir, ancak bir mobil cihaz kullanıyorsanız formları kullanmak zor olabilir.

Bu derste, mobil uyumlu formlar tasarlamanın önemi hakkında biraz konuşacağız. Formlarınızın mobil cihazlarda mükemmel çalıştığından emin olmak 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ı ile ilgileniyor olacaksınız:

iletişim formu.png örneği

Abonelik formları da çok popülerdir çünkü e-postaları toplamanıza ve bunları kampanyalar sırasında hedeflemenize olanak tanır.

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

Ancak, formlar her türlü başka amaçlarla kullanılabilir. Örneğin, kullanarak bilgi toplayabilirsiniz çevrimiçi anket veya anket Bu durumda, kullanıcıların cevapları girmesine izin vermek için formlara ihtiyacınız olacaktır.

Başka bir deyişle, formlar çok yönlüdür ve neredeyse tüm siteler formları bir şekilde kullanır. Bu nedenle, formlarınızın kullanımının kolay olması (ziyaretçilerinize sinir bozucu bir deneyim sunmak istemediğiniz sürece) önemlidir.

Bir masaüstü veya dizüstü bilgisayardaki formları kullanmak genellikle çok basittir. Bir fareniz ve tam bir klavyeniz var, bu yüzden kullanmak istediğiniz ve veri girmek istediğiniz alanı seçmek sorun olmaz. Ancak, akıllı telefondan veya diğer kompakt cihazdan web'e göz atmak karmaşıktır.

Parmaklarınızla küçük bir ekranda çalışırken, formlarla etkileşimde bulunmak, kötü tasarım kararlarından dolayı bazen ağrılı olabilir. Bu kendi tasarımlarınızda kaçınmanız gereken bir şey. Sonuçta, mobil kullanıcılar formlarınızla etkileşimde bulunamazsa, dönüşümleri, potansiyel müşterileri veya sadece rahatsız edici ziyaretçileri kaybetme riskiyle karşı karşıyasınız.

Ayrıca, mobil trafiğin artık masaüstü kaynaklardan daha önemli olmadığını anlamak önemlidir. Aslında, son yıllarda trafik trafiği çoktan geçti. Bu, yeni bir proje başlatırken, 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 hayal edebileceğiniz kadar zor değil. Çoğu durumda, bazı temel prensipleri aklınızda bulundurun ve formlarınızı hizmete sokmadan önce dikkatlice test edin. Nasıl yapılacağı hakkında konuşalım!

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

Formunuzdaki daha fazla alan, cep telefonunuzda kullanmak daha zor olacaktır. Gerçekten de, formların mobil cihazlarda kullanımı daha karmaşıktır. Formlarınızda yer alan alanların veya bölümlerin sayısını azaltarak, ziyaretçilerin bunları doldurma olasılığını en üst düzeye çıkartabilirsiniz.

Mobil cihazlarda ihtiyaç duyulmayan birkaç ek alanla iletişim formunun hızlı bir örneği:

Elementor ile Web Sitenizi Kolayca Oluşturun

Elementor kolayca profesyonel bir görünüm ile herhangi bir web sitesi tasarımı oluşturmanıza olanak sağlar. Kendiniz için yapabileceğiniz şeyler için çok fazla ödeme yapmayı bırakın. [Ücretsiz]

mobile.png'de gerekli olmayan alanlar

Çoğu durumda, mükemmel bir iletişim formu için gereken her şey bir isim, bir e-posta ve almak istediğiniz mesajın gövdesidir. Diğer her şey, kullanmakta olduğunuz web sitesinin türüne bağlıdır ve potansiyel müşteriler toplamaya çalışıyorsanız.

Sonuçta, formun sahip olduğu daha az form, mobil ziyaretçilerin bunları kullanması daha kolay olacaktır. Sonuçta, bir dokunmatik ekran kullanarak bir alan seçmek, iyi tasarlanmış olsa bile, kullanıcıların yapması gereken atlama sayısını en aza indirmek için zor olabilir.

Bu noktada amacınız sitenizin mevcut formlarına başvurmaktır. Bölümlerinden her birini gözden geçirin ve yukarıda belirtilenlerden başka ek alanlara ihtiyacınız olup olmadığını belirleyin. Gereksiz bir alan varsa, onu silin.

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

Çoğumuz mobil cihazlarda rahatça yazarak ve dokunmatik ekranlar kullanıyoruz. Ancak, bir arkadaşınıza SMS göndermek ve bir iletişim formu doldurmak iki farklı deneyimdir. Bunlarla birlikte, çok fazla bilgi yazmanız gerektiğinde, sinirli olmanız için iyi bir şans var.

Mobil ziyaretçileriniz için hayatı kolaylaştırmanın yollarından biri, sitenizin öğeleri hakkında yapması gereken seçimleri basitleştirmektir. Ne hakkında konuştuğumuz hakkında bir fikir vermek için, daha önceki restoran rezervasyonu örneğimizden yararlanalım:

rezervasyon yaptırmak

Rezervasyon yaptırmak için muhtemelen bir isim, bir e-posta, bir telefon bırakmanız gerekecektir. et Bir zamanın yanı sıra mevcut insan sayısını belirtir. Bir rezervasyon süresini doğrulamak için iki yolla bir form alanı oluşturabilirsiniz:

  1. Yalnızca sayısal girişleri kabul eden bir alan yapılandırın.
  2. Rezervasyon için 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ı dostu. Bu yaklaşımla, sayı girmeleri gerekmez ve içerdikleri seçenekler arasından en uygun olanı seçebilirler.

Formlarınıza bakmanız ve açılır menülerle değiştirebileceğiniz alanlar içerip görmediğinize dair fikir. İsimler veya e-postalar toplamak için açılır menüler kullanamazsınız, ancak diğer seçenekler kullanılabilir, çünkü bu her zaman böyle olmaz.

Kullanım durumları ne olursa olsun, açılır menülerinizin mobil cihazlardan kolay seçim seçenekleri içerdiğinden emin olmak istersiniz. Diğer bir deyişle, menünün yeterince büyük olduğundan, birinin doğru seçeneği seçmek için uğraşması gerekmediğinden emin olun.

3. Gönderim düğmelerinizin kolayca erişilebilir olduğundan emin olun

Bu bahşiş oldukça basit, ancak belirtilmek üzere kalır. Tasarladığınız her form, kullanıcıların girilen verileri göndermek istediklerini onaylamalarının bir yolunu içermelidir. Çoğu durumda, bu bir gönderme düğmesi oluşturmak anlamına gelir:

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

Envato'dan en iyi WordPress eklentilerini ve temalarını indirin ve web sitenizi kolayca oluşturun. Zaten 49.720.000'den fazla indirme. [ÖZEL]

bir submit button.png oluşturmak

Normal bir bilgisayar kullanırken, gönder düğmesine tıklamak dünyanın en doğal şeyidir. Ancak, bir tuşa basmanın çok daha zor olduğu bazı mobil biçimlerde karşılaştık.

Ziyaretçileriniz formlara girmiş oldukları bilgileri veremezlerse, tüm çabalarınız boşuna olacaktır. Ayrıca, hiçbir şey profesyonel olmayan bir şey gibi görünmüyor göndermek Bu beklendiği gibi çalışmıyor.

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

  1. Mobil cihazı kolayca itecek kadar büyük olduklarından emin olun.
  2. Düğmelerinizi diğer öğelere çok yakın yerleştirmeyin, böylece kullanıcılar bunlara doğru şekilde dokunmaz.
  3. Düğmelerinizi vurgulayın, örneğin zıt renkler veya yaratıcı tipografi kullanın.

Tüm bunlara ek olarak, siteniz yayına girmeden önce düğmelerinizi de test etmek isteyeceksiniz. Bir dakika içinde nasıl yapacağımıza daha da derine ineceğiz. Şimdilik, performans hakkında konuşalım.

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 bunun nedeni hıza ihtiyaç duymamız değil. Gerçek şu ki çoğu insan, oldukça mantıklı olan yavaş web sitelerini sevmiyor.

İnternetin hızı daha hızlı olduğu için, bir web sitesinin çok uzun süre yüklenmesini beklemek zor olabilir. Ayrıca, mobil İnternet hızları normal ev bağlantılarından çok daha fazla değişme eğilimindedir. Bu, bu kullanıcıları mutlu tutmak istiyorsanız, web sitenizin mobil cihazlar için son derece optimize edilmiş olması gerektiği anlamına gelir, çünkü herkes İnternet'e erişemez (yani hızlıca).

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 bir kural olarak, bir web sitesinin yüklenmesi iki saniyeden fazla sürmemelidir. Bu sınırı aştığınızda, hemen çıkma oranları önemli ölçüde artar ve bu da sizin için korkunç bir haberdir. Mobil navigasyonun doğası göz önünde bulundurulduğunda, bu süreyi maksimum seviyeye indirmek en iyisidir. .

Bunu düşünerek, sitenizin genel performansını iyileştirmenin birçok yolu vardır. Örneğin, daha iyi bir barındırma planına geçebilir, 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 daha küçük cihazlar kullanan kişiler için özellikle yararlı olacaktır.

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

Formların çoğu web sitesinin önemli bir parçası olduğu göz önünde bulundurulduğunda, bunları yayınlamadan önce bunları dikkatle test etmeniz mantıklıdır. WordPress ile bu işlem oldukça basit. Formlarınızı görüntülemek için belirli sayfaları tasarlayıp ilerleyebilir ve tam olarak test edinceye kadar yayınlamayın.

Elbette, kullanmak istediğiniz eklenti veya tema size aittir (mobil sitelerin geliştirilmesine yardımcı olabildiği ölçüde). Ancak, test aşamasıyla ilgili olarak, işleri basitleştirmenizi ve araçları gelişme krom işi yapmak için.

Hızlı bir örneği inceleyelim. Chrome kullanıyorsanız, devam etmek ve test etmek istediğiniz formu içeren sayfayı önizlemek. Ardından, bu sayfadaki herhangi bir yere sağ tıklayın ve seçeneği belirleyin. denetlemek . Chrome, sayfanın kaynak kodunu gözden geçirmek ve düzenlemek için kullanabileceğiniz bir dizi araç gösterecek ve bir mobil cihazdan görünümünün ö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, birçok popüler mobil cihaz için ayar 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 fazla cihazda kontrol etmeniz gerekir. Aşağıdaki örneği ele alın - form mükemmel çalışır, ancak gerektiği kadar uymadığını da görebilirsiniz. Özellikle ekranın kenarına çok yakın olan metin ve simgelere özellikle dikkat edin:

Online Mağazanızı Kolayca Oluşturun

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

mobile.png için form tasarımı

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

Ölçekleme sorunları olmayan bir form örneği.

Formlarınızdan birinde sorun varsa, bunları hemen çözmelisiniz. Aksi takdirde, ilk önce kaçınmaya çalıştığımız mobil kitlenizi yabancılaştırmaya riskiniz var!

Sonuç

Web sitenizin mobil cihazlarla uyumlu olmasını sağlamak, trafiği korumak ve ziyaretçilerinizi rahatsız etmemek açısından çok önemlidir. Özellikle, iletilerinizi kaçırmak veya değerli potansiyel müşteriler toplamak 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çılan listeleri kullanın.
  3. Gönderim düğmelerinizin basılması 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.
Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Zorunlu alanlar ile gösterilir *

Bu site spam'i azaltmak için Akismet kullanıyor. Geri bildirim verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin.

Başa dönüş
2 hisseleri
hisse1
cıvıltı
Enregistrer1