Mobil Uyumlu Formlar Tasarlamak İçin 5 İpucu

İletişim formları birçok web sitesinin önemli bir bileşenidir. İşlevleri genellikle basit olsalar da, potansiyel müşteri 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 masaüstü trafiğiyle ilgili bir sorun değildir, ancak bir mobil cihaz kullanıyorsanız formları kullanmak zor olabilir.

Bu yazıda, mobil uyumlu formlar tasarlamanın öneminden biraz bahsedeceğiz. Ardından, formlarınızın mobil cihazlarda mükemmel bir şekilde çalışmasını sağlamak için size beş ipucu vereceğiz.

Hadi çalışalım!

Formlarınızın Mobil Dostu Olması Neden Önemli?

Formlar tüm şekil ve boyutlarda gelir. En yaygın olarak, iletişim formlarıyla ilgileneceksiniz:

Kayıt formları (veya tercihler), kampanyalar sırasında e-posta toplamanıza ve onları hedeflemenize olanak sağladıklarından, oldukça popülerdir:

Ancak, formlar başka her türlü amaç için kullanılabilir. Örneğin, çevrimiçi bir anket veya test kullanarak bilgi toplamak isteyebilirsiniz; bu durumda, kullanıcıların yanıtları girmesi için formlara ihtiyacınız olacaktır.

Başka bir deyişle, formlar çok yönlüdür ve hemen hemen her site formları bir şekilde kullanır. Bu nedenle, formlarınızın kullanımının kolay olmasını sağlamak çok önemlidir (ziyaretçileriniz için sinir bozucu bir deneyim sağlamak istemiyorsanız).

Bir masaüstü bilgisayardan veya bir dizüstü bilgisayardan form kullanmak genellikle çok basittir. Bir fareniz ve tam bir klavyeniz var, bu nedenle kullanmak istediğiniz alanı seçmek ve veri girmek sorun olmayacaktır. Bununla birlikte, akıllı telefonunuzdan veya başka bir küçük form faktörlü cihazdan web'e göz atmak komplikasyonlara neden olur.

Küçük ekranda parmaklarınızla çalışırken, formlarla etkileşim bazen kötü tasarım kararları nedeniyle can sıkıcı olabilir. Bu, kendi tasarımlarınızda kaçınmanız gereken bir şeydir. Sonuçta, mobil kullanıcılar formlarınızla etkileşime geçemezse, dönüşümleri, olası satışları kaybedebilir veya ziyaretçileri tamamen rahatsız edebilirsiniz.

Ayrıca, mobil trafiğin artık masaüstü kaynakları kadar – hatta daha fazla – önemli olduğunu anlamak da önemlidir. Aslında, mobil trafik son birkaç yıl içinde ikincisini çoktan aştı. Bu, yeni bir proje başlatırken mobil uyumlu bir web sitesi tasarlamanın birincil hedefiniz olması gerektiği anlamına gelir.

Mobil Uyumlu Formlar Tasarlamak İçin 5 İpucu

Neyse ki, mobil uyumlu formlar tasarlamak sandığınız kadar zor değil. Çoğu durumda, tek yapmanız gereken bazı temel bilgileri akılda tutmak ve formlarınızı yayınlanmadan önce kapsamlı bir şekilde test etmektir. Nasıl yapılacağı hakkında konuşalım!

1. Gereksiz Bölümleri Kaldırın

Formlarınız ne kadar çok alan içeriyorsa, bunları mobil cihazlarda kullanmak o kadar zor olur. Bunun nedeni, ne kadar iyi tasarlanmış olsalar da, formları mobil cihazlarda kullanmak çok daha karmaşıktır. Formlarınızın içerdiği alan veya bölümlerin sayısını azaltarak, ziyaretçilerin bunları doldurma şansınızı en üst düzeye çıkarabilirsiniz.

İşte, birkaç ek alan olmadan yapabileceği bir iletişim formunun hızlı bir örneği:

Ç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, ne tür bir web sitesi çalıştırdığınıza ve potansiyel müşteri toplamaya çalışıp çalışmadığınıza bağlıdır.

Sonuç olarak, formunuz ne kadar az alan içeriyorsa, mobil ziyaretçilerin bunları kullanması o kadar kolay olur. Sonuçta, iyi tasarlanmış olsa bile dokunmatik ekran kullanarak bir alan seçmek zor olabilir, bu nedenle kullanıcıların yapması gereken 'atlama' sayısını en aza indirmek istersiniz.

Bu aşamadaki amacınız sitenizin mevcut formlarına bir göz atmaktır. Bölümlerinin her birini gözden geçirin ve daha önce bahsettiğimiz alanların ötesinde herhangi bir ek alana gerçekten ihtiyacınız olup olmadığını düşünün. Gereksiz bir alan varsa, basitçe kesin.

2. Mümkün Olduğunda Açılır Listeleri Kullanın

Çoğumuz mobil cihazlarda yazı yazmakta ve dokunmatik ekranları kullanmakta rahatız. Ancak, bir arkadaşa mesaj atmak ve bir iletişim formu doldurmak çok farklı iki deneyimdir. İkincisi ile, çok fazla bilgi yazmanız gerekiyorsa hayal kırıklığına uğrayabilirsiniz.

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

Rezervasyon yapmak için muhtemelen bir isim, e-posta, telefon bırakmanız ve bir saatin yanı sıra kaç kişinin katılacağını belirtmeniz gerekir. Rezervasyon zamanını doğrulamak için form alanı oluşturmanın iki yolu vardır:

1. Yalnızca sayısal girdileri kabul eden bir alan ayarlayın.
2. Bir rezervasyon için tüm müsait 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ıları yazmaları gerekmeyecek ve eklediğiniz seçeneklerden kendileri için en iyi olanı seçebilirler.

Formlarınıza bakmanız ve açılır menülerle değiştirebileceğiniz herhangi bir alan içerip içermediklerini görmeniz fikri. 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 bunların işe yarayabileceği başka seçenekler de vardır.

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ı gerekmeyecek kadar büyük yapın.

3. Gönderim Düğmelerinize Dokunmanın Kolay Olduğundan Emin Olun

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

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

Ziyaretçileriniz formlarınıza girdikleri bilgileri gönderemezlerse tüm emekleriniz boşa gidecektir. Ayrıca, hiçbir şey istendiği gibi çalışmayan Gönder düğmesi kadar amatörce görünmez.

Mobil cihazlar için daha iyi gönderim düğmeleri tasarlamak için, aklınızda bulundurmanız gereken üç hızlı ipucunu burada bulabilirsiniz:

1. Bir mobil cihaz kullanırken kolaylıkla basabilecek kadar büyük olduklarından emin olun.
2. Düğmelerinizi diğer öğelere çok yakın yerleştirmeyin, böylece kullanıcılar yanlış öğeye basmaz.
3. Düğmelerinizi kontrast renkler veya yaratıcı tipografi kullanmak gibi bir şekilde vurgulayın.

Tüm bunların yanı sıra, web siteniz yayınlanmadan önce butonlarınızı iyice test etmek isteyeceksiniz. Bir dakika içinde bunun nasıl yapılacağı hakkında daha derinlemesine gideceğiz. Şimdilik performanstan bahsedelim.

4. Formlarınızın Hızlı Yüklenmesini Sağlayın

Birkaç makalemizde web sitesi performansı hakkında çok konuşuyoruz ve bu hıza ihtiyacımız olduğu için değil. Gerçek şu ki, çoğu insan yavaş web sitelerini sevmez, ki bu kesinlikle mantıklıdır.

İnternet hızları arttıkça, bir web sitesinin yüklenmesini çok uzun süre beklemek bir angarya olabilir. Ayrıca, mobil internet hızları normal ev bağlantılarından çok daha fazla değişiklik gösterme eğilimindedir. Bu, tüm kullanıcıları uygun (yani hızlı) internet erişimine sahip olmayacağından, bu kullanıcıları mutlu etmek istiyorsanız, web sitenizin mobil cihazlar için yüksek düzeyde optimize edilmesi gerektiği anlamına gelir.

Bu özel ipucu genel olarak tüm web siteniz 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ürerse, ziyaretçilerinizle iletişim kurma fırsatlarını ve fırsatlarını kaybedersiniz. Genel bir kural olarak, bir web sitesinin yüklenmesi iki saniyeden uzun sürmemelidir. Bu çizgiyi geçtikten sonra, hemen çıkma oranları çarpıcı bir şekilde yükselme eğilimindedir, bu sizin için korkunç bir haber.

Mobil cihazlarda gezinmenin doğası gereği, bu süreyi mümkün olduğunca azaltmak bir nimettir. Bunu akılda tutarak, sitenizin genel performansını artırmanın birçok yolu vardır. Örneğin, daha iyi bir barındırma planına yükseltebilir, hız için optimize edilmiş duyarlı bir tema kullanabilir ve resimlerinizi sıkıştırabilirsiniz. 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 sitesi için çok önemli bir unsur olduğu düşünülürse, yayınlamadan önce kendinizinkini iyice test etmeniz gerekir. WordPress ile bu süreç yeterince basittir. Devam edebilir ve formlarınızı görüntülemek için belirli sayfalar tasarlayabilir ve bunları tam olarak test edene kadar yayınlamayabilirsiniz.

Tabii ki kullanmak istediğiniz eklenti veya tema size kalmış (mobil sitelerin geliştirilmesine yardımcı olabileceği sürece). Ancak, test aşaması devam ederken, işleri basit tutmanızı ve işi halletmek için Chrome Geliştirme Araçları gibi bir şey kullanmanızı öneririz.

Hızlı bir örnek üzerinden gidelim. Chrome kullanıyorsanız, devam edin ve test etmek istediğiniz formu içeren sayfayı önizleyin. Ardından, o sayfada herhangi bir yere sağ tıklayın ve İncele seçeneğini seçin. Chrome, sayfanın kaynak kodunu sağa ve sola gözden geçirmek ve düzenlemek için kullanabileceğiniz bir dizi araç gösterecek, bir mobil cihazdan nasıl görüneceğinin bir önizlemesini görebilirsiniz:

Ekranın üst kısmında, farklı çözünürlükler arasında geçiş yapmak için kullanabileceğiniz bir menü var. 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 birden fazla cihazda nasıl göründüğünü ve nasıl davrandığını kontrol etmelisiniz. Aşağıdaki örneği alın – form mükemmel çalışıyor, ancak gerektiği kadar iyi ölçeklenmediğini görebilirsiniz. Özellikle ekranın kenarlarına çok yakın olan metin ve simgelere çok dikkat edin:

Bu sorunu önlemenin bir yolu, ilk ipucunda belirttiğ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, her cihazda mükemmel şekilde ölçeklenmesi gerekir:

Formlarınızdan herhangi biriyle sorun yaşarsanız, bunları hemen düzeltmelisiniz. Aksi takdirde, ilk etapta kaçınmaya çalıştığımız şey olan mobil kitlenizi yabancılaştırma riskiyle karşı karşıya kalırsınız!

Çözüm

Web sitenizin mobil uyumlu olmasını sağlamak, trafiği tutmak ve ziyaretçilerinizi rahatsız etmemek için çok önemlidir. Özellikle, mesaj almayı veya değerli müşteri adayları toplamayı kaçırmak istemiyorsanız, formlarınızın mobil cihazlarda kullanımı kolay olmalıdır.

Mobil uyumlu formlar tasarlamaya gelince, işte hayatınızı kolaylaştıracak beş hızlı ipucu:

1. Gereksiz bölümleri kaldırın.
2. Mümkün olduğunda 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ı yüklenmesini sağlayın.
5. Formlarınızı yayınlamadan önce test edin.

Divi'yi kullanarak mobil uyumlu formların nasıl oluşturulacağı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde sorun!

Makale küçük resmi, Irina Adamovich / Shutterstock.com.