Mobil Kullanıcıları Dönüştürmek İçin Yeni Başlayanlar Kılavuzu

Trendeyken, havaalanında otururken ya da sadece kanepede uzanırken akıllı telefonunuzda çevrimiçi bir form doldurmanız gereken bir zamanı düşünün. Mobil form tasarımına hiç dikkat ettiniz mi?

Muhtemelen fark etmemişsinizdir. Amaç, kullanıcılara formu sorunsuz bir şekilde doldurmalarını ve günlerine devam etmelerini sağlayan sezgisel bir deneyim sunmaktır.

Bu kılavuzda, tam da bunu yapmanın en etkili yollarını inceleyeceğiz. Burada, hantal veya yanlış hizalanmış olmayan, ancak dönüşümleri artırmaya ve harika bir kullanıcı deneyimi oluşturmaya yardımcı olan mobil formları nasıl tasarlayacağınızı öğreneceksiniz.

İçindekiler

Mobil ve Masaüstü Form Tasarımı

Bugün, web sitenizin ziyaretçileri masaüstü bilgisayarlarından yalnızca sitenize göz atmıyor, içeriğinizi görüntülemiyor ve formlarınızı doldurmuyor. Ayrıca bu görevleri mobil cihazlarından tamamlıyorlar.

Mobil cihazlar, Nisan'dan Haziran 2022'ye kadar küresel web sitesi trafiğinin yaklaşık %60'ından sorumluydu. Bu, formunuzun bir mobil cihaz aracılığıyla incelenip doldurulmasının ve gönderilmesinin basit olması için kritik önem taşıyor.

Mobil form tasarımı neden önemlidir?

En iyi mobil form tasarımı, bir müşteriye dönüşme ve geri gelen bir kullanıcı olma olasılığı daha yüksek olan mutlu bir web sitesi ziyaretçisi sağlayan olumlu bir kullanıcı deneyimi sağlar.

Mobil formlarınızın tasarımı, düzeni ve işlevselliği, web sitenizin genel kullanıcı deneyiminde büyük bir rol oynar.

Formlarınız mobil uyumlu değilse, daha az dönüşüm, mobil site trafiğinde kayıp ve mutsuz ve hüsrana uğramış müşteri sayısında artış yaşayabilirsiniz. Ve bunu kim istiyor?

Mobil form tasarımı neden masaüstü tasarımından farklı olmalıdır?

Ödüllü bir pazarlama etkileyicisi ve stratejisti olan Lilach Bullock, "Mobilde her şey farklı çalışıyor, bu nedenle pazarlamacıların web sitelerinin herhangi bir öğesinin her zaman mobil cihazlar için optimize edildiğinden emin olması gerekiyor" diyor.

"Ve buna elbette formlar da dahildir - özellikle de mobildeyken sürekli form doldurmanız gerektiğini düşündüğünüz için."

Spesifik olarak, boyutları genellikle 4,7 inç ile 6,7 inç arasında değişen Apple iPhone gibi bir mobil cihaz arasındaki ekran veya ekran boyutu farkını düşünün; ve boyutları genellikle 13" ile 24" arasında değişen bir Mac dizüstü veya masaüstü bilgisayar. Bir iPhone ekranına uyan bir formun bir masaüstü ekranına tam olarak uymayacağını varsaymak güvenlidir.

Mobil ziyaretçileriniz formunuzu kolayca okuyamaz, dolduramaz ve gönderemezse işlerini kaybedebilirsiniz. Bu nedenle, herhangi bir mobil cihazın ekranına sığan, mobil uyumlu bir form oluşturmak, ziyaretçileriniz üzerinde kalıcı bir izlenim bırakmak ve dönüşümleri artırmanıza yardımcı olmak için harika bir kullanıcı deneyimi oluşturmak açısından çok önemlidir.

Duyarlı web tasarımı nedir?

Mobil form tasarımını bir adım öteye taşımak ve web sitenizin tamamının her tür cihazda çalışır durumda olmasını sağlamak istiyorsanız, duyarlı bir web sitesi tasarımı uygulayabilirsiniz.

Duyarlı web tasarımı, kullanıcının ekran boyutunu, platformunu, yönünü ve ortamını dikkate alır. Bu, harika bir kullanıcı deneyimi yaratmanın basit ve etkili bir yoludur çünkü pek çok kişi sürekli olarak çeşitli cihazlarda farklı web sitelerini ziyaret eder ve bu web sitelerine göz atar.

Sitenizin duyarlı bir tasarıma sahip olduğundan emin olmanın birkaç yolu vardır. Örneğin, bir WordPress kullanıcısıysanız, sitenizi tasarlamak için yükleyebileceğiniz ve kullanabileceğiniz birkaç duyarlı WordPress teması vardır.

Ek olarak, sitenizi Squarespace gibi bir yazılımla oluşturuyorsanız veya oluşturduysanız, siteniz otomatik olarak duyarlı web tasarımıyla gelebilir.

Günümüzde, duyarlı web tasarımı, çeşitli farklı mobil cihazlar aracılığıyla web sitelerini ziyaret eden çok sayıda insan nedeniyle işletmeler için popüler bir seçimdir. Ancak şimdilik, mobil form tasarımını tartışmaya geri dönelim.

Mobil Form Tasarımı: 11 UX Yönergesi

"Mobil formlarınızı tasarlarken," diye açıklıyor Bullock, "işleri basit tutmak ve bunları olabildiğince hızlı hale getirmek önemlidir. [Formlar] mobil cihazlarda doldurulması daha zor ve her şey olması gerekenden daha uzun sürüyormuş gibi geliyor."

Diğer bir deyişle, son kullanıcı için en önemli şey basitliktir. Mobil uyumlu bir form oluştururken, ziyaretçilerinize mümkün olan en iyi kullanıcı deneyimini sağlamak için atmanız gereken bazı adımlar vardır. Bugün uygulamaya başlayabileceğiniz bu mobil form tasarımı en iyi uygulamalarından 11'ini inceleyelim.

1. Form alanlarının sayısını en aza indirin.

Hiç "az çoktur" sözünü duydunuz mu? Mobil formunuzu oluştururken tam olarak bunu düşünmeniz gerekir.

Bir mobil cihazın ekranının boyutu ve formunuza yerleştirmeniz gereken içerik miktarı arasında, kazara formunuzun karmaşık görünmesi çok kolaydır. Gereksiz tüyleri çıkarmayı unutmayın. Form alanlarını yalnızca kesinlikle ihtiyacınız olan bilgiler için saklayın.

Süreci kolaylaştırmak için ayrıca form alanlarınızı açık ve öz bir şekilde etiketlemek ve isteğe bağlı alanları "isteğe bağlı" olarak işaretlemek veya gerekli alanların yanına bir yıldız işareti eklemek isteyeceksiniz.

Görüntü Kaynağı

Amaç, formu doldurmanın mümkün olduğu kadar kolay hale getirilmesi ve böylece insanların formu doldurma şanslarının artmasıdır.

2. Mümkün olduğunda girişleri otomatikleştirin.

Açık adresinizi yanlışlıkla yanlış yazarsanız ve form sizin için yazımı düzeltirse, form yanıtınızı otomatik olarak düzeltir.

Gönderim adresinizi yazmaya başladığınızda, adresinizin geri kalanının yer aldığı ve form alanlarını kayıtlı adresinizle "otomatik olarak doldurmak" isteyip istemediğinizi soran bir kutu açılırsa, formunuz yanıtınızı sizin için otomatik olarak tamamlıyor demektir.

Mobil formlarınıza otomatik düzeltme ve otomatik doldurma özelliklerini uygulayarak, kullanıcıların ayrıntılarını girmelerini hızlı, basit ve anlaşılır hale getirerek kullanıcı deneyimini iyileştireceksiniz.

Aşağıdaki örnekte, bir kişi görünen küçük açılır pencereye tıklayarak bilgilerini kolayca otomatik olarak doldurabilir.

Görüntü Kaynağı

3. Tek sütunlu bir düzen kullanın.

Uzun veya çok adımlı bir form oluştururken, tüm içeriğinizi tek sütunlu bir düzende listeleyin.

Görüntü Kaynağı

Tek sütunlu form düzenleri şunlardır:

a. Okuması daha kolay.

Tüm form alanlarınızı tek sütun biçiminde yerleştirmek, ziyaretçilerinizin her seferinde yalnızca bir öğeye odaklanmasını sağlayarak formunuzun okunmasını kolaylaştırır.

b. Daha az yıldırıcı.

Bir forma, özellikle dar bir alanda bir mobil cihazda olduğu gibi bakarsanız ve büyük miktarda içeriğin bir araya geldiğini görürseniz, bunalmış hissedebilirsiniz. Bu nedenle, içeriğinizi satırlara göre ayırmak ve form alanlarınızı tek sütun biçiminde yerleştirmek, içeriğinizin daha az göz korkutucu görünmesini ve hissettirmesini sağlar.

c. Daha hızlı tamamlanır.

Çok adımlı formunuzu tek bir sütuna yerleştirdiğinizde, müşteri adayları formu çok sütunlu bir formdan daha hızlı tamamlayabilir. Bunun nedeni, biçimin formun okunmasını ve adım adım çalışılmasını kolaylaştırmasıdır.

Bir masaüstü veya dizüstü bilgisayardan görüntülendiğinde HubSpot web sitesindeki bu kayıt formuna bir göz atın.

Görüntü Kaynağı

Daha geniş ekranda çalışmak için çok fazla alan olduğundan, iki sütunlu düzen burada anlamlıdır. Şimdi bir mobil cihazdan görüntülendiğinde aynı formu kontrol edin.

Görüntü Kaynağı

Bu tek sütunlu düzen, kompakt mobil ekranda dağınıklığı önlerken gözün doğal bir şekilde akmasını sağlar.

4. Tutarlılık önemlidir (ve görünüş de öyle).

Dizüstü bilgisayarınızda bir klasörü veya açık bir sekmeyi nasıl kapatırsınız?

Sağ üst köşedeki 'x' düğmesine tıklayarak.

Peki ya düğme belirli bir uygulamada görünmezse? Pencereyi kapatmaya gittiğinizde nasıl hissedersiniz?

Kafası karışmış ya da sinirlenmiş olabilir. Uygulamayı nasıl kapatacağınızı bulmak için bir veya iki dakika harcayabilirsiniz.

Bu sadece geniş bir örnek ama tutarlılığın önemini göstermeye iyi hizmet ediyor. Daha fazla bilgi edinmek için bu videoyu izleyin.

Form tasarımındaki tutarlılık sadece stil (renkler, tipografi, logo vb.) için değil, insanların alışık olduğu genel kabul görmüş sözleşmeler için de geçerlidir.

Tutarlı bir deneyim sağlamak için bazı ipuçları:

• Formunuzun görünümünü ve verdiği hissi markanız ve web sitenizle eşleştirin.
• Formunuzun stilinin ve biçimlendirmesinin tutarlı ve tamamlayıcı olduğundan emin olun (hiçbir şey sarsıcı veya yersiz görünmemelidir).
• Form alanı girişlerinizi sola hizalayın.
• Her etiketi karşılık gelen giriş kutusunun üzerine yapıştırın ve sola hizalayın.
• Zorunlu soruları belirtmek için yıldız işareti kullanın.

Görüntü Kaynağı

İlk izlenimler kalıcı bir izlenim bırakır (hayatta ve işte). Bu, mobil formlarınız için geçerli. Kimse karanlık, okunması zor, dağınık ve çekici olmayan bir formu doldurmak istemez.

Mobil formunuz estetik olduğu kadar işlevsel de olmalıdır. Görünümü, okunabilirliğine ve olumlu kullanıcı deneyimine katkıda bulunmalıdır. Bunu başarmak için basit ve okunması kolay bir yazı tipi stili ve boyutu, bunaltıcı hissetmeyen bir renk paleti ve minimum form alanları kullanın.

5. Dokunma deneyimini unutmayın.

Mesajlaşırken telefonunuzu nasıl tuttuğunuzu düşünün.

Büyük olasılıkla, ekranla etkileşim kurmak için başparmaklarınızı kullanırken telefonu iki elinizle kavramaktır. Veya tek elle bile yapabilir veya işaret parmağınızı kullanarak yazabilirsiniz.

Akıllı telefonlarla bir dizüstü veya masaüstü bilgisayardan çok daha farklı bir şekilde etkileşim kuruyoruz (manifatura baş parmağını işaretleyin) ve mobil form tasarımı bunu yansıtmalıdır.

İşte akılda tutulması gereken bazı öneriler:

• Formu dağınık tutmak ve yanlışlıkla düğmeye basılmasını önlemek için yeterli boşluk bırakın.
• Düğmelerin mantıksal olarak konumlandırıldığından emin olun (örneğin, gönder düğmesi formun altına yakın olsun, böylece kullanıcılar onu bulmak için yukarı kaydırmak zorunda kalmasın).
• Metnin (yazı tipi boyutu ve stili) küçük mobil ekranda okunabilir olduğunu kontrol edin (hiç kimse metni okuyabilmek için ekranını sıkıştırıp yakınlaştırmak istemez).
• Form alanlarının ve düğmelerin parmakla rahatça dokunulabilecek kadar büyük olduğundan emin olun.
• Ulaşılmasını kolaylaştırmak için formun açılır penceresini ekranın alt kısmına doğru (mümkünse) yapın.

Görüntü Kaynağı

6. Girdi kısıtlamalarından yararlanın.

Giriş kısıtlamaları, bir kişinin form alanına girebileceği yanıt türünü kısıtlar. Bu, bir kelime sınırlaması (örneğin, bir iş başvuru formunu doldururken) veya yalnızca rakam girebilmeyi (telefon numarası söz konusu olduğunda) içerebilir.

Bu, bir kişi telefon numarasını girmeye gittiğinde sayısal bir klavyenin açıldığı aşağıdaki formda görülmektedir.

Görüntü Kaynağı

Girdi kısıtlamaları, istenmeyen hataları, gecikmeleri veya karışıklığı sınırlayarak form verimliliğini en üst düzeye çıkarır. Örneğin, birisi bir restoranda bir masa için rezervasyon yapmaya çalışırken yanlışlıkla geçmişteki bir tarihi seçerse, kısıtlama onların o tarihi fiilen seçip onaylamasını engelleyecektir.

Daha küçük ekranlar bilgilerin doğru bir şekilde girilmesini zorlaştırdığından, bu özellikle mobil cihazlar için tasarım yaparken çok önemlidir. Giriş kısıtlamaları ayarlayarak, form alanlarınızı doldururken insanlara zaman kazandıracak ve uzun soluklu veya geçersiz yanıtlar almanızı engelleyeceksiniz.

İşte başka bir giriş kısıtlaması örneği.

Görüntü Kaynağı

7. Net eylem düğmeleri oluşturun.

Düğmeler, mobil form tasarımının hafife alınan bir yönüdür. Bir düşünün: Yalnızca sağ düğmeye basıldıktan sonra bir form gönderimi veya dönüşümü alırsınız. Yani bu unsuru gerçekten göz ardı edemezsiniz.

Bu UI hile sayfası ve UX Planet blogu, etkili düğmeler tasarlamak için harika kaynaklardır. Mobil formlarınıza uygulayabileceğiniz, bahsedilen ilkelerden bazılarının hızlı bir şekilde gözden geçirilmesini burada bulabilirsiniz.

• Çok fazla düğme suyu bozar (tıpkı form alanlarında olduğu gibi, yalnızca temel düğmeleri saklayın).
• Düğmelerinizi tutarlı bir şekilde biçimlendirin ve etiketleyin (büyük harf kullanımı, biçimlendirme, hizalama vb.).
• Ana düğmenin (kullanıcının gerçekleştirmesini istediğiniz ana eylem) boyut veya renge göre öne çıkmasını sağlayarak odağın parlamasına izin verin.
• Sağ sağdır — mobil cihazlar için genel bir kural, ana düğmeyi sağ tarafa ve ikinci düğmeyi sola yerleştirmektir (ancak bu bireysel ihtiyaçlara göre değişebilir).
• Belirli etiketler neredeyse her zaman yanıttır ("Düzenle" yerine "Bu sayfayı düzenle").

Görüntü Kaynağı

8. Ödemeler için kart tarayıcıları sağlayın.

Akıllı telefonunuzdan kredi kartı bilgilerinizi bir forma girmeyi denediniz mi? Küçük bir klavyeyle küçük bir ekranda bir grup sayı yazmak sıkıcı bir süreç olabilir.

Microblink gibi kart tarama uygulamaları tam da bu nedenle giderek daha popüler hale geldi. Ziyaretçileriniz bir satın alma işlemi yaparken, onları mobil cihazlarının kamerasını kullanarak, ister lisans ister kredi kartı olsun, kartlarının ön ve arka yüzünün güvenli bir fotoğrafını çekebilecekleri bir ekrana götüren bir düğmeyi tıklayabilir.

Görüntü Kaynağı

Yalnızca birkaç resimle, müşteri adaylarınız mobil form tamamlama sürecinin en çok zaman alan bölümlerinden biriyle tamamlanacak ve ziyaretçilerinizi verimli, hayal kırıklığı ve hatasız tutacak.

9. Belirli bilgilere duyulan ihtiyacı açıklayın.

Basit bir e-posta kaydı veya kayıt formu doldururken, kayıt formuyla hiçbir ilgisi olmayan kişisel bilgilerinizi vermeniz istendi mi?

Bu, tüm form türlerinde (yalnızca mobil değil) yaygın bir durumdur. İhtiyacınızı açıklamadan birinden kişisel veya diğer hassas bilgileri istemek kabataslak görünebilir.

Ziyaretçinizin formu doldurma nedeni ile doğrudan ilgili olmayan bir soru sorarken, kişinin bu bilgiyi neden istediğinizi anlamak için tıklayabileceği bir özet kutusu (ek bilgiler içeren) oluşturmanız önemlidir.

Bu tür göstergeler, talimatlar hemen görünmediğinde bir form alanını doldurma konusunda ek rehberlik sağlamaya da yardımcı olabilir. Aşağıdaki resimde, bir kişi simgenin üzerine geldiğinde bir özet kutusu açılır.

Görüntü Kaynağı

Bu küçük ayrıntılar, formunuzu profesyonel ve düşünceli hissettirirken, kullanıcının yarı yolda bırakma olasılığını azaltır.

10. Doğrulama ve geri bildirim toplayın.

Kullanıcı deneyimi, iyi mobil form tasarımının merkezinde yer alır. Doğrulama ve geri bildirim, harika bir UX sağlamada önemli bir rol oynar.

Doğrulama, insanların girdikleri bilgilerin doğru olup olmadığını (veya olmadığını) bilmelerini sağlar. Aşağıdaki form alanlarındaki yeşil onay işaretlerine dikkat edin.

Görüntü Kaynağı

Ziyaretçileriniz mobil formları doldururken burada veya burada hata yapmaya mahkumdur. Form, kullanıcının bunları hemen düzeltebilmesi için bu hataları gerçek zamanlı olarak işaretlemelidir.

Örneğin, birisi sokak adresinin yanına yanlış posta kodunu eklerse, mobil form bir hata mesajı göstermelidir. Bu, anlaşılması kolay bir dilde hatanın yerini ve kişinin bunu nasıl düzeltebileceğini göstermelidir (aşağıdaki resimde görüldüğü gibi).

Görüntü Kaynağı

İnsanlara formu incelerken geri bildirimde bulunmak da çok önemlidir. Örneğin, uzun, çok adımlı formlardaki bir ilerleme çubuğu, kullanıcılara ne kadar ilerlediklerini ve tamamlamaları için ne kadar süreleri kaldığını göstererek form doldurma sürecini daha ilgi çekici hale getirebilir.

Görüntü Kaynağı

Yukarıdaki formu bir ilerleme çubuğu olmadan dolduran bir kişiyi düşünün. Formun ne zaman sona ereceği hakkında hiçbir fikirleri olmadan 'sonraki' düğmesine tıklayacaklar ve hatta hayal kırıklığı içinde son adımdan hemen önce formu terk edebilirler.

İnsanlar formlarını gönderdikten sonra, onları “Başarılı!” Gibi bir şey yazan başka bir ekrana veya sayfaya yönlendirmelisiniz. veya gönderimlerinin işe yaradığını bilmeleri için "Teşekkür ederim".

Bir kullanıcı ücretsiz bir Google Ads kiti almak için kaydolduktan sonra görüntülenen HubSpot'taki başarı sayfasına bir örnek aşağıda verilmiştir.

Görüntü Kaynağı

11. Formları erişilebilir yapın.

Erişilebilirlik, formunuzun kullanılabilirliği için esastır. Erişilebilirlik göz önünde bulundurularak tasarlanan formlar, görsel, fiziksel, duyusal ve bilişsel engelliler de dahil olmak üzere daha geniş bir insan yelpazesi tarafından kullanılabilir.

Burada, World Wide Web Konsorsiyumu Web Erişilebilirlik Girişimi, WebAIM ve A11Y Projesi Kontrol Listesi'nden erişilebilir formlar oluşturmak için bazı özel öneriler verilmiştir).

• Formunuzu yakınlaştırırken (daha iyi görselleştirme için) metnin pikselleşmediğini veya bulanıklaşmadığını kontrol edin.
• Form öğelerinizi, bir ekran okuyucu tarafından okunduğunda açıkça anlaşılabilecek şekilde etiketleyin.
• Formunuzun hem dikey hem de yatay modlarda erişilebilir olduğundan emin olun.
• İnsanlara yanıt vermeleri için yeterli süre tanımak için (mümkünse) bir süre sınırı kullanmaktan kaçının.
• Formunuzdaki herhangi bir video veya ses bileşeni için altyazı veya transkript ekleyin.
• Renk kontrastını aklınızda bulundurun. İşte bu konuda yardımcı olabilecek ücretsiz bir araç.
• Formunuzun yalnızca bir klavye ile tamamen kullanılabilir olup olmadığını kontrol edin.

Yukarıdaki tüm mobil form tasarım stratejilerinin kalıcı olmasını sağlamanın harika bir yolu, form tasarımında yapmamanız gerekenleri keşfetmektir. Aşağıdaki video, hem mobil hem de masaüstünde form tasarlarken yapılmaması gereken bazı örneklere bakıyor.

sana geri dön

Web sitenizin ziyaretçilerinin mobil cihazları aracılığıyla web formlarınızı doldurup gönderdikleri bir sır değil. Çoğu kişi her yerde yanlarında bir tür mobil cihaz taşıdığından, formlarınızın mobil uyumlu olması çok önemlidir.

Aksi takdirde, formlarınızın okunması, doldurulması ve gönderilmesi zor olacaktır ve bu da müşteri adaylarınızı hayal kırıklığına uğratabilir veya işlerini tamamen kaybetmenize neden olabilir.

Mobil form tasarımınızı göz önünde bulundurarak ve bu yönergeleri uygulayarak, mobil form kullanıcı deneyiminizi geliştirecek, potansiyel müşterileriniz ve müşterilerinizle olumlu ilişkiler kuracak ve dönüşümlerinizi artıracaksınız.

Editörün Notu: Bu gönderi ilk olarak Aralık 2018'de yayınlandı ve kapsamlı olması için güncellendi.