Ana İçeriğe Geç

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

Divi: Kullanılacak 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 temel bileşenidir. Genel olarak basit olsa da, müşteri adayları toplamak ve kullanıcılarınızla iletişim kurmak 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 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ıyla ilgileniyor olacaksınız:

iletişim formu.png örneği

Abonelik formları da oldukça popülerdir çünkü e-posta toplamanıza ve kampanyalar sırasında onları hedeflemenize izin verir:

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

Bununla birlikte, formlar her türlü başka amaç için kullanılabilir. Örneğin, kullanarak bilgi toplayabilirsiniz. çevrimiçi anket veya anket Bu durumda kullanıcıların cevapları girmelerine 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 veya başka şekilde kullanır. Bu nedenle, formlarınızın kullanımının kolay olması önemlidir (ziyaretçilerinize sinir bozucu bir deneyim sunmak istemiyorsanız).

Bir masaüstü veya dizüstü bilgisayardan formları kullanmak genellikle çok basittir. Bir fareniz ve tam bir klavyeniz olduğundan, kullanmak istediğiniz alanı seçmek ve veri girmek bir sorun olmamalıdır. Ancak, web’i akıllı telefonunuzdan veya başka bir kompakt cihazdan taramak karmaşık bir işlemdir.

Parmaklarınızla küçük bir ekranda çalışırken, formlarla etkileşmek, kötü tasarım kararları nedeniyle bazen acı verici olabilir. Bu, kendi tasarımlarınızda sakınmanız gereken bir şey. Sonuçta, mobil kullanıcılar formlarınızla etkileşime giremezse, dönüşümleri, potansiyel müşterileri veya sadece sinir bozucu ziyaretçileri kaybetme riskini alırsınız.

Mobil trafiğin, masaüstü kaynaklardan daha önemli olmasa da, şimdi önemli olduğunu anlamak da önemlidir. Aslında, mobil trafik son yıllarda ikincisini çoktan aştı. Bu, mobil bir web sitesi tasarlamanın, yeni bir proje başlatırken 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, sadece bazı temel ilkeleri 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

Formunuzda ne kadar çok alana sahipseniz, mobil cihazlarda o kadar zor olur. Nitekim, mobil formların kullanımı sadece daha karmaşıktır. Formlarınızda yer alan alanların veya bölümlerin sayısını azaltarak, ziyaretçilerin bunları doldurma şanslarını en üst düzeye çıkarabilirsiniz.

İşte cep telefonunuzda gerekmeyen fazladan birkaç alana sahip bir iletişim formuna hızlı bir örnek:

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

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

mobile.png'de gerekli olmayan alanlar

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

Sonunda, formun sayısı ne kadar az olursa, mobil ziyaretçilerin bunları kullanması o kadar kolay olacaktır. Sonuçta, dokunmatik ekran kullanarak bir alan seçmek, iyi bir şekilde tasarlanmış olsa bile, kullanıcıların gerçekleştirmesi gereken atlama sayısını en aza indirmek için zor olabilir.

Bu noktada amacınız sitenizin mevcut formlarına bakmaktır. Bölümlerinin her birini gözden geçirin ve yukarıda belirtilenler dışında ek alanlara gerçekten ihtiyacınız olup olmadığını belirleyin. Gereksiz bir alan varsa, basitçe silin.

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

Birçoğumuz mobil cihazlara yazı yazmak ve dokunmatik ekranları kullanmak için rahatız. Ancak, bir arkadaşınıza SMS göndermek ve bir iletişim formu doldurmak çok farklı iki deneyimdir. Bunlarla birlikte, eğer çok fazla bilgi yazmanız gerekirse, hayal kırıklığına uğrama ihtimaliniz yüksek.

Mobil ziyaretçinizin hayatını kolaylaştırmanın yollarından biri, sitenizin öğeleriyle ilgili yapması gereken seçimleri basitleştirmektir. Size neden bahsettiğimiz hakkında bir fikir vermek için, önceki restoran rezervasyon örneğimizden yararlanalım:

booking.png yapmak

Rezervasyon yapmak için, muhtemelen bir isim, e-posta, telefon et Bir zamanın yanı sıra mevcut insan sayısını belirtin. Rezervasyon zamanını doğrulamak için iki yolla 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ı 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şağı açılır menülerle değiştirebileceğiniz alanlar içerip içermediğini görmek için bir fikir. Adları veya e-postaları toplamak için açılır menüleri kullanamadığınız için bu her zaman geçerli olmayacaktır, ancak diğer seçenekler de kullanılabilir.

Kullanım durumlarından bağımsız olarak, açılır menülerinizin mobil cihazlardan seçmesi kolay seçenekler içerdiğinden emin olmak istersiniz. Başka bir deyişle, menünün yeterince büyük olduğundan emin olun, böylece birisinin doğru seçeneği seçmesi için gagalaması gerekmez.

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

Bu ipucu oldukça basit, ancak bahsedilmeye devam ediyor. 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üğmesini tıklatmak dünyadaki en doğal şeydir. Ancak, mobil cihazlarda bir düğmeye basmanın daha zor olduğu bazı formlarla karşılaştık.

Ziyaretçileriniz girdiğiniz bilgileri formlarınıza gönderemezse, tüm çabalarınız boşuna olacaktır. Buna ek olarak, hiçbir şey bir düğme kadar profesyonelce görünmüyor göndermek beklendiği gibi çalışmaz.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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 onlara düzgün şekilde dokunmaz.
  3. Düğmelerinizi vurgulayın, örneğin zıt renkler veya yaratıcı tipografi kullanarak.

Tüm bunlara ek olarak, sitenizi yayınlamadan önce düğmelerinizi test etmek isteyeceksiniz. Bir dakika içinde nasıl yapılacağı konusunda daha derinlere 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 ihtiyacımız olduğu değil. Gerçek şu ki çoğu insan yavaş web sitelerini sevmiyor, bu da mantıklı.

İnternet hızıyla daha hızlı, 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 çeşitlilik gösterir. Bu, eğer bu kullanıcıları mutlu etmek istiyorsanız, herkesin internete erişimi olmayacak (yani hızlı bir şekilde) olmayacaksa, web sitenizin mobil cihazlar için yüksek düzeyde optimize edilmesi gerektiği anlamına gelir.

Bu özel ipucu web sitenizin tamamı için geçerli olabilir, ancak formlarınızı gösteren mobil sayfalar için de önemlidir. Sitenizin bu bölümlerinin yüklenmesi çok uzun sürerse, 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 limiti aştığınızda, hemen çıkma oranları çarpıcı bir şekilde artar, bu da sizin için korkunç bir haberdir. Mobil navigasyonun doğası gereği, bu süreyi en üst düzeye çıkarmak en uygunudur. .

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 geçebilir, hız için optimize edilmiş duyarlı bir tema kullanabilir ve resimlerinizi sıkıştırın. Tabii ki, bunlar tüm kullanıcılara yardımcı olacak, ancak daha küçük cihazlar kullananlar için özellikle faydalı 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üne alındığında, yayınlanmadan önce bunları dikkatlice test ettiğiniz mantıklı olur. WordPress ile bu işlem oldukça basittir. Formlarınızı görüntülemek için devam edebilir ve belirli sayfalar tasarlayabilir ve bunları tam olarak test edinceye kadar yayınlayamazsınız.

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

Hızlı bir örneği inceleyelim. Chrome kullanıyorsanız, devam edin ve test etmek istediğiniz formu içeren sayfayı önizleyin. Ardından, bu sayfada herhangi bir yeri sağ tıklayın ve seçeneği seçin denetlemek . Chrome, sayfanın kaynak kodunu incelemek ve düzenlemek için sağa ve sola düzenleyebileceğiniz bir dizi araç görüntüler; görünümünün bir önizlemesini bir mobil cihazdan 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 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 fazla cihazda kontrol etmeniz gerekir. Aşağıdaki örneği ele alalım - form mükemmel çalışıyor, ancak olması gerektiği gibi uymadığı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ı

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Ücretsiz]

Bu sorunu önlemenin bir yolu, ilk ipucunda söylediğimiz gibi formlarınızı basit tutmaktır. Aşağıdaki örnekte, formda birden fazla açılır liste kullanılı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 uyarlanmalıdır:

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

Formlarınızdan biriyle sorunlarınız 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 olmasını sağlamak, trafiği sürdürmek ve ziyaretçilerinizi rahatsız etmemek için çok önemlidir. Özellikle, mesajları kaçırmak veya değerli müşteri adayları toplamak istemiyorsanız, mobil cihazlarda formlarınızın 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.
Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

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