Mobil dostu formlar tasarlamak için 5 ipucu
İletişim formu birçok web sitesinin temel bir bileşenidir. İşlevi genellikle basit olsa da, potansiyel müşteriler toplamak ve kullanıcılarınızla temas halinde olmak istiyorsanız kullanmanın kolay olduğundan emin olmanız gerekir. Bu genellikle masaüstü trafiğinde bir sorun değildir, ancak bir mobil cihaz kullanıyorsanız bir form kullanmak karmaşık olabilir. Bu makalede, hücresel dostu formlar tasarlamanın önemi hakkında biraz konuşacağız. Ardından, formunuzun mobil cihazda iyi çalıştığından emin olmak için size beş ipucu ile rehberlik edeceğiz. Hadi çalışalım!
Formunuzun tüm şekil ve boyutlarda gelen hücresel dostu form olması neden önemlidir. En yaygın olarak, iletişim formuyla ilgileneceksiniz:
Masaüstü veya dizüstü bilgisayarlardan formlar kullanmak genellikle çok basittir. Tam bir fareniz ve klavyeniz var, bu nedenle kullanmak ve veri girmek istediğiniz alanı seçmek sorun olmamalıdır. Ancak, akıllı telefonunuzdan veya diğer küçük cihazlardan web’i keşfetmek komplikasyonlar sağlar. Parmaklarınızla küçük bir ekranda çalışırken, formlarla etkileşim kurmak, kötü tasarım kararları nedeniyle bazen zahmetli olabilir. Bu, kendi tasarımınızda kaçınmanız gereken bir şeydir. Sonuçta, hücresel kullanıcılar formunuzla etkileşime giremezse, dönüşümü, potansiyel müşterileri kaybedebilir veya ziyaretçileri hiç rahatsız edebilirsiniz. Hücresel trafiğin artık aynı olduğunu anlamak da önemlidir – masaüstü kaynaklarından daha önemli değilse. Aslında, hücresel trafik son birkaç yılı aştı. Bu, yeni bir proje başlatırken hücresel arkadaşlık web sitelerinin tasarlanmasının ana hedefiniz olması gerektiği anlamına gelir. Neyse ki mobil dostu formlar tasarlamak için 5 ipucu, hücresel dostu formlar tasarlamak tahmin ettiğiniz kadar zor değil. Çoğu durumda, ihtiyaç duyulan şey sadece bazılarını düşünmek ve formunuzu yayınlanmadan önce iyice test etmektir. Nasıl yapılacağından bahsedelim!
1. Formunuza dahil olan daha fazla alanın gereksiz kısımlarını silin, hücreselde kullanmak o kadar zor olur. Bunun nedeni, iyi tasarlanmış olmasına rağmen, bir cep telefonu üzerinde bir form kullanmak çok daha karmaşıktır. Formda bulunan alan veya parça sayısını azaltarak, ziyaretçilerin onu doldurma fırsatlarını en üst düzeye çıkarabilirsiniz. Aşağıda, onsuz yapılabilecek birkaç ek alan içeren bir iletişim formunun hızlı bir örneğidir: Çoğu durumda, çok iyi bir iletişim formu için ihtiyacınız olan her şey, almak istediğiniz mesajın adı, e -posta ve içeriğidir. Diğer her şey, çalıştırdığınız web sitesinin türüne ve potansiyel müşterileri toplamaya çalışırsanız bağlıdır.
Sonunda, formunuza ne kadar az alan dahil edilirse, hücresel ziyaretçilerin onu kullanması o kadar kolay olur. Sonuçta, bir dokunmatik ekran kullanma alanı seçmek, iyi tasarlanmış olmasına rağmen zor olabilir, bu nedenle kullanıcının yapması gereken ‘atlama’ miktarını en aza indirmek istersiniz. Bu aşamadaki amacınız, sitenizdeki formları görmektir. Her bir parçayı kontrol edin ve daha önce bahsettiğimizden başka bir ek alana ihtiyacınız olup olmadığını düşünün. Aşırı bir alan varsa, sadece kesin. 2. Mümkünse bir açılır liste kullanın, çoğumuz mobil cihazlarda yazarken ve bir dokunmatik ekran kullanarak rahat hissediyoruz. Ancak, bir arkadaşına SMS göndermek ve iletişim formunu doldurmak çok farklı iki deneyimdir. Son olarak, çok fazla bilgi yazmanız gerekiyorsa hayal kırıklığına uğrayabilirsiniz. Hücresel ziyaretçilerinizi kolaylaştırmanın bir yolu, sitenizin öğeleriyle ilgili ihtiyaç duydukları seçimleri basitleştirmektir.Size neden bahsettiğimiz hakkında bir fikir vermek için, önceki restoran rezervasyonumuzun bir örneğini oluşturalım: Rezervasyon yapmak için isim, e -posta, telefon ve zaman göstermeniz gerekebilir ve kaç kişinin olacağı Sunmak.Rezervasyon süresini doğrulamak için bir saha alanı oluşturmanın iki yolu vardır:
Sadece sayısal giriş alan bir alan hazırlayın.
Rezervasyon için mevcut her zaman dahil olmak üzere gerillerin bir listesi tasarlayın. Tahmin ettiğiniz gibi, sonuncusu hücresel kullanıcılar için daha kullanıcı dostudur.Bu yaklaşımla, numaraları yazmaları gerekmez ve dahil ettiğiniz seçeneklerden onlar için en uygun olanı seçebilirler.
Formunuzu görmeniz ve formun bir aşağı inen menü ile değiştirebileceğiniz alanı içerip içermediğine bakmanız fikri. Bu her zaman olmaz, çünkü isim veya e-postaları toplamak için Heed-of Heed menüsünü kullanamazsınız, ancak işlev görebilecek başka seçenekler de vardır. Hangi durumların kullanıldığına bakılmaksızın, höm daha menünüzün mobil cihazlardan seçim yapmak için kolay bir seçenek içerdiğinden emin olmak istersiniz. Başka bir deyişle, doğru seçeneği seçmek için bir kişinin geçmesi gerekmeyecek kadar büyük bir menü yapın. 3. Gönder düğmenizin dokunmasının kolay olduğundan emin olun Bu ucun oldukça kolay, 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önderim düğmesi yapmak anlamına gelir: sıradan bir bilgisayar kullandığınızda, gönderme düğmesine tıklamak dünyadaki en doğal şeydir. Bununla birlikte, cep telefonunda düğmeye basmanın olması gerekenden çok daha zor olduğu birkaç form bulduk. Ziyaretçileriniz formunuza koydukları bilgileri gönderemezlerse, tüm çabalarınız boşuna olacaktır. Ayrıca, gerektiği gibi çalışmayan nakliye düğmesi gibi hiçbir şey profesyonelce görünmüyor. Hücresel için daha iyi bir nakliye düğmesi tasarlamak için, hatırlamanız gereken üç hızlı ipucu:
Mobil cihazlar kullanırken boyutun kolayca basılacak kadar büyük olduğundan emin olun.
Düğmenizi diğer öğelere çok yakın koymayın, böylece kullanıcı düğmeye yanlış basmaz.
Düğmenizi kontrast renkler veya yaratıcı tipografi kullanmak gibi çeşitli şekillerde vurgulayın. Tüm bunların yanı sıra, web siteniz yayınlanmadan önce düğmenizi iyice test etmek istersiniz. Bir dakika içinde nasıl yapılacağı hakkında daha derin tartışacağız. Şimdilik performans hakkında konuşalım. 4. Formunuzun hızlı bir şekilde yayınlandığından emin olun, bazı makalelerimizde web sitesinin performansı hakkında çok konuşuyoruz ve bunun hıza ihtiyacımız olduğu için değil. Gerçek şu ki, çoğu insan çok makul olan yavaş web sitelerini sevmez. Daha hızlı internet hızı ile, web sitesini yüklemek için çok uzun süre beklemek bir görev olabilir. Ayrıca, hücresel internet hızları sıradan ev bağlantılarından çok daha çeşitli olma eğilimindedir. Bu, kullanıcıları mutlu etmek istiyorsanız, web sitenizin mobil cihazlar için yüksek oranda optimize edilmesi gerektiği anlamına gelir, çünkü hepsinin uygun İnternet erişimi (yani hızlı) olmayacaktır.
Bu özel ipucu genel olarak tüm web siteleriniz için de geçerli olabilir, ancak formlarınızı görüntüleyen hücresel sayfalar için de önemlidir. Site bölümünüzün yüklenmesi çok uzun sürerse, ziyaretçilerinizle iletişim kurma olasılıklarını ve fırsatlarını kaybedeceksiniz. Pratik bir kural olarak, web sitelerinin yüklenmesi iki saniyeden fazla sürmemelidir. Çizgiyi geçtikten sonra, oran önemli ölçüde artma eğilimindedir, bu da sizin için kötü bir haberdir. Cep telefonlarındaki keşif doğası göz önüne alındığında, mümkün olduğunca zaman azaltmak avantajdır. Bunu hatırlayarak, sitenizin genel performansını artırmanın birçok yolu vardır. Örneğin, hız için optimize edilmiş duyarlı temaları kullanarak daha iyi bir barındırma paketine yükselebilir ve görüntünüzü sıkıştırabilirsiniz. Tabii ki, bu tüm kullanıcılara yardımcı olacaktır, ancak daha küçük cihazlar kullananlar için çok yararlı olacaktır. 5. Formunuzu yayınlamadan önce test edin Formun çoğu web sitesi için anahtar bir unsur olduğunu göz önünde bulundurarak, yayınlamadan önce genel olarak test etmeniz mantıklıdır. WordPress ile bu süreç oldukça basit. Formunuzu görüntülemek için belirli bir sayfaya devam edebilir ve tasarlayabilir ve gerçekten test edene kadar yayınlayamazsınız. Tabii ki, kullanmak istediğiniz eklenti veya tema size bağlıdır (hücresel sitelerin geliştirilmesine yardımcı olabileceği sürece). Bununla birlikte, test aşaması çalıştıkça, basit kalmanızı ve çalışmayı tamamlamak için Chrome geliştirme araçları gibi bir şey kullanmanızı öneririz. Hızlı bir örneğe gidelim.
Chrome kullanıyorsanız, test etmek istediğiniz formu içeren sayfaları devam ettirin ve önizleyin. Ardından, bu sayfada herhangi bir yere doğru tıklayın ve inceleme seçeneğini seçin. Chrome, kod kaynağı kodunu sağa ve sola incelemek ve düzenlemek için kullanabileceğiniz bir dizi araç gösterecektir, mobil cihazın önizlemesini görebilirsiniz: ekranın üstünde, yapabileceğiniz bir menü var Çözünürlük arasında değişmek için kullanın. Chrome, birkaç popüler mobil cihaz için ayarlar içerir, ancak özel çözünürlükler de girebilirsiniz. Bu noktada, iletişim formlarınızın nasıl görüldüğünü kontrol etmelisiniz ve birkaç cihazda davranmalısınız. Aşağıdaki örneği alın – form mükemmel çalışır, ancak bunu olması gerektiği gibi bir ölçek olarak göremezsiniz. Ekran sınırına çok yakın olan metin ve simgelere çok dikkat edin:
Bu sorunu önlemenin bir yolu, ilk ipucunda tarif ettiğimiz gibi formunuzu basitleştirmektir. Aşağıdaki örnekte, form birkaç açılır liste kullanır ve yalnızca üç alan gerektirir. Kullanmayı kolaylaştırır ve daha önemli olan form çok basittir, bu nedenle her cihazda mükemmel bir şekilde boşaltılması gerekir:
Formlarınızdan biriyle sorun yaşıyorsanız, hemen düzeltmelisiniz. Değilse, başlangıçtan kaçınmaya çalıştığımız hücresel kitlenizi yabancılaştırma riski altındasınız! Sonuç Web sitenizin trafiği korumak için çok önemli hücresel dostu olmasını sağlamak ve ziyaretçilerinizi hayal kırıklığına uğratmaz. Özellikle, mesaj almayı veya değerli beklentiler toplamak istemiyorsanız, formunuzun mobil cihazlarda kullanımı kolay olmalıdır. Hücresel dostluk formları tasarlama açısından, hayatınızı kolaylaştırmak için beş hızlı ipucu: gereksiz parçaları silin.
Mümkünse bir açılır liste kullanın.
Gönderi düğmenizin tuşuna basmanın kolay olduğundan emin olun.
Formunuzun hızlı bir şekilde yüklendiğinden emin olun. Formunuzu yayınlamadan önce test edin. Divi kullanarak hücresel formların nasıl oluşturulacağına dair sorularınız var mı? Aşağıdaki yorumlar bölümünde sorun! Makale Küçük Resim Irina Adamovich / Shutterstock.com.
