Daha Fazla Mobil Dönüşüm iç️in UX Form Optimizasyon Yöntemleri 📊➡📱➡ ️️️📈
Doğru yapıldığında, optimize edilmiş mobil formlar size dönüşüm oranlarının artmasından fazlasını sağlayabilir: Rakiplerinize göre size avantaj sağlayarak müşterileri sitenize çekmeye yardımcı olur ve satın alma işlemini daha kolay gerçekleştirmelerini sağlayabilirsiniz.
Luke Wroblewski’nin (2018 Kasım Google Dublin) mobil tasarım konusundaki konuşmasında da vurguladığı gibi, Hotel Tonight’ın rakiplerine kıyasla bir oda ayırtmak için gereken interaksiyon/etkileşimlerin sayısı Priceline ve Hotels’e göre büyük avantaj sağlıyor.
Hotel Tonight için mobil optimizasyon, biraz fazla ileri giderek form alanlarını iyileştirmek, gereksiz tüm alanları kaldırmak ve yüklenme hızlarını aşırı derecede minimuma çekmekti. En kısa conversion funnel’ına sahip olsanız bile, ihtiyaç duyulmayan alanları tekrar gözden geçirin ve kaldırmayı deneyimleyin. Hedef metriğiniz üzerinde etkisini göreceksiniz.(Funnel session duration, Bounce Rate, Conversion Rate)
Form alanlarının sayısını azaltmak genellikle işe yarasa da, her zaman “en iyi ürün” için asla bir garanti değildir. (Aslında, form alanlarını arttırmanın dönüşüm oranlarını arttırdığı zamanlar da olabilir.)
Mobil form optimizasyonu için sahip olmanız gereken farkındalıklar:
- Mobil ve masaüstü kullanıcılar arasındaki temel farklılıklar
- Form alanları konumlama
- Müşteri açısından Form inputları için uygun ekranlar/araçlar/teknolojiler
- Form performansını ölçmek için araçlar
1. Masaüstü ve Mobil cihaz kullanıcıları arasındaki temel farklar
Üç temel UI farklılığı ile mobil form tasarımında yaşanan zorluklar:
En-boy oranı: Akıllı telefon kullanımalarının yaklaşık % 90'ı dikey olarak gerçekleşmektedir, bu da kullanacağınız formlar için genişliği çok daha değerli hale getiriyor. Formlar için dikey/yatay boyutlarınızı ideal konumlandırmanız gerekmektedir.
Ek olarak mobil cihazların ekran boyutu, tabletlere ve masaüstü cihazlara göre daha küçük olduğundan dolayı, tüm formunuzu kaydırma yapmadan tek ekrana sığdırmak epey zordur.
Dokunmatik ekran navigasyonu: Dokunmatik ekranlar, elementlerin sayfada görünürlüğü için masaüstü cihazlara göre ekstra önem taşır. Faydalı/önemli bilgileri kullanıcıya aktarırken her tasarımcının kaçamak noktası olan, doğru kullanıldığında kullanıcıları gerçekten bilgilendirebilen hover özelliği, masaüstü cihazlarda kolaylıkla kullanılırken, dokunmatik cihazlarda hover olmadığı için verilmesi gereken bilgileri kullancıya aktarmak masaüstü cihazlara göre çok daha zordur.
Klavye kullanımı: Akıllı telefonların klavyelerinde masaüstü cihazlarınkine göre ekstra bir kısıt söz konusudur. Dokunmatik cihazlarda, hangi alan için hangi klavyenin gösterileceğini, otomatik büyük harf kullanımı, otomatik işlevlerin etkinleştirilip etkinleştirilmeyeceğini (devre dışı bırakılacağını), numerik klavyenin sayısal değer kabul eden formlar için otomatik açılması, OTP (One Time Password) kullanımı için gelen mesajdan otomatik kopyalama gibi özelliklerin dikkatle seçilmesi, mobil kullanıcılara büyük kolaylık sağlayacaktır.
Mobil kullanıcılar zaten hız odaklı, daha az toleranslı bir kullanıcı segmentini temsil ettiği için, mobil dönüşüm oranları, masaüstü cihazların epey gerisinde kalıyor.
Bu UI farklılıklarının farkında olmak, mevcut zorlukları mobilde aşmak için size fazlasıyla kolaylık sağlayacaktır.
2. Mobil form konumlamaları
Tek sütun tasarım
Yapılan bir araştırmada, tek sütunlu formların çok sütunlu formlara göre daha hızlı tamamlandığı ortaya çıkmıştır.
Çok adımlı formlar
Çok adımlı formlar, akıllı telefon ekranında kaydırma davranışına gerek duymadan bir form bölümünü tüm ekrana yerleştirerek sonraki ekranlarda devam eden formlardır.Mobil cihazlarda kaydırma davranışını tamamen ortadan kaldırma potansiyeline sahiptir.(Kesinlikle test edilmesi önerilir.)
Yazı Boyutu - Genişliği
16px yazı tipi boyutu, mobil cihazlarda font boyutunun standartlığı ispatlanmıştır. Daha küçük (veya daha büyük) yazı tipi boyutları, özellikle göz kusuru olan kullanıcılar için sorunlara neden olabilir.
MIT’nin yaptığı bir araştırmada, iki yazı tipi boyutunu (10px ve 8px) ve farklı harf genişlikleri kullanımını karşılaştırdı. Bulguları ise aşağıdaki gibi;
- 10px’den küçük font kullanmayın.
- Tüm karakterleri büyük harf kullanmaya dikkat edin.
- Karakterler arasındaki mesafeleri tüm kelimelerde koruyun.
Dokunulabilir alanların boyutu
Küçük butonlar, kullanıcının tıklamalarını gerçekleştirip gerçekleştiremediği konusunda problemler yaratır.
Steven Hoober bir araştırmasında, ekranın tam orta noktasından uzaklaştıkça, köşe ve kenarlarda büyük buton/iconlar kullansanız bile kullanıcının erişilebilirlik problemi yaşayacağını, dolayısıyla köşe ve kenarlarda daha büyük dokunulabilir elementler kullanmanız gerektiğini rakamlar ile bilimsel bir şekilde açıklamıştır.👏
Ekranın ortasında 7 mm.
Kenarlar boyunca 9 mm.
Köşelerde 12 mm.
Material Design Guideline da genel olarak buna benzer bir kullanımı tavsiye ediyor.
Form alanlarının sayısı
Form optimizasyonunda ilk akla gelen ve herkesin biraz yapmaya çalıştığı, gereksiz form alanlarının kaldırılma işlemidir. Daha az form alanının daha fazla dönüşüm sağladığını, çünkü her alanın kullanıcıya ekstra bir efor yarattığını hepimiz biliyoruz.
Websitelerinde yer alan bir formu doldurmak, mobil cihazlarda gerçekten büyük sorun ve kullanıcıları bu işlemleri tamamlamaktan vazgeçirmeye masaüstü cihazlara göre çok daha meyillidir.
Form alanlarını kaldırmanın genellikle tüm cihazlarda efektif olduğu gerçeği, aslında dokunmatik ekranlar için daha doğrudur. (Bu mantık sizi test etmeden kaldırmanıza teşvik etmesin, öncelikle her zaman test)
Hesap oluşturma(Sign up)
Satın alma davranışı için kesinlikle zorunlu tutulmaması gerekir. Ödeme sayfanızdan önce kullanıcıdan hesap oluşturma ya da zorunlu giriş istemek yerine başarılı ödeme sayfasına çok daha kolay bir şekilde hesap oluşturacağı (e-posta adresi otomatik getirilebilir) formlar yerleştirerek ve bu hesap oluşturma işlemini daha başarılı sağlayabilmeleri için ucuna havuç konularak (indirimlerden ilk siz haberdar olun vb.) gibi yöntemlerle üyelik sayınızı daha hızlı arttırabilirsiniz.
Kaçınmanız gereken Lead Form pop-upları
2017’de Google, “mobil sayfalarda bir içeriğin kullanıcı tarafından kolayca erişilemediği sayfaları” analiz etmeye başladı. Bu sayfalarda bulunan ve kullanıcının ulaşmak istediği içeriğe bariyer koyan, genellikle anasayfalarda bulunan mail toplama pop-up’lar olduğunu gördü.
Google, sadece aşağıdaki 3 bilgi için ekran üzerine ekran kullanımının kabul edilebilir olduğunu açıkladı
1.Çerez kullanımı hakkında verilen bilgi alanlar.
2.Yaş doğrulaması gerektiren alanlar.
3.Ekranların sadece çok ufak bir kısmını kapyalacak bilgilendirme metinleri.
Google’ın yapmış olduğu bu araştırma kurallarını dikkate almayan herhangi bir form optimizasyon çabası, dönüşüm oranlarına bakılmaksızın bu formları doldurmaları için kullanıcıların motivasyonlarını düşürecektir.
3. Form Yardımcıları
Otomasyon
Akıllı telefonların otomatik özellikleri bazı kolaylıklar ve beraberinde riskleri barındırır. Bazı HTML etiketleri, form giriş alanına göre otomatikleştirilmiş özellikleri açıp kapatır:
class="form-control" placeholder="Contact's email"
name="contact_email" ID="contact_email" title="Contact's email (format: xxx@xxx.xxx)"
type="email" TextMode="Email" validate="required:true"
pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >Otomatik düzeltme: Otomatik düzeltme, yanlışlıkla girilen alanlardaki (örneğin, isim, mail uzantısı, adres vb.) bilgileri otomatik düzeltebilir.
Otomatik büyük harf: Otomatik büyük harf kullanımı, kullanıcılara isim-soyisim ve adres alanları için harcadığı çabayı azaltabilir. (*parola alanları için devre dışı bırakılması gerekir.)
Otomatik tamamlama veya otomatik doldurma: Otomatik tamamlama, çoğunlukla kullanılan e-posta servisleri için kullanılabilir( @gmail.com ). Otomatik doldurmanın doğruluğunu artırmak için HTML üzerinde aşağıdaki örnek etiketleri kullanabilirsiniz;
address-line1 first line of street address
address-line2 second line of street address
address-line3 third line of street address
Otomatik doldurma özelliği, doğru kullanıldığında kullanıcılara fazlasıyla zaman kazandırabilir.
Otomatik algılama: Kredi kartı türünü kullanıcıdan istemek tamamiyle gereksizdir; otomatik algılama ile kredi kartlarını ilk dört hanesi girildikten sonra kart türünü algılar ve bu da formu dolduran kullanıcılara yanlış bilgi girmediğine dair güven hissiyatı verir.
Konum tespiti: Kullanıcının ülkesini (en azından), Google Place API veya başka bir konum API’sini kullanarak en yakın havaalanıi yakınımdaki restoranlar vb. gibi daha belirli bir yeri tanımlamanıza yardımcı olabilir.
Dropdown
Luke Wroblewski, dropdown kullanımları için “son çare UI” şeklinde atıfta bulunuyor. Yapılan araştırmalar, dropdown menülere sahip mobil formların tamamlanmasının daha uzun sürdüğünü gösteriyor. Bunun nedeni mobil dropdownların, daha fazla etkileşim gerektirmesi ve istemsiz kullanıcı seçimlerine sebep olması.
Dropdown menü kullanımı yerine aşağıdaki alternatiflere bir göz atabilirsiniz;
Stepper: +/– kontrolü ile seçim yaptırma. Stepper, otel veya havayolu websiteleri gibi misafir üst sınırı çok fazla olmayan alanlar için fazlasıyla kullanışlıdır. (otel ve havayolu websitesi tecrübelerime dayanarak)
Segmentler: Seçenekler sınırlı olduğunda(2 veya 3), bölümlere ayrılmış bir yapıda kullanılarak, kullanıcının mevcut tüm seçenekleri bir kerede görmesini sağlar
Slider: Mesafesi büyük aralıklar veya Min-Max değişkenine sahip olan alanlar için kullanılabilir.
Date Picker: Açılır menüde gün, ay ve yıl seçimi yerine bir takvim ile toplam dokunma sayısını azaltarak kullanıcılarınıza daha kolay bir deneyim sunabilirisiniz. (Doğum tarihi alanında kullanmadığınız sürece. Onca yıl geriye gitmek fazlasıyla zor olacaktır.)
Dropdown kullanımlarının kullanıcı üzerindeki etkilerini araştıran bir çalışmaya göre, aynı sürede daha az sayıda toplam etkileşim olmasına rağmen, tek bir datepicker’ın formun tamamlanmasını yavaşlattığını ortaya koymuştur. İki ayrı datepicker (check-in, check-out & departure, arrival date) görevlerin daha hızlı tamamlanmasını sağladı.
(Yukarıda yer alan araştırma sonuçları website ve kullanıcılara göre değişebilir. Bu kullanımları websitenizde test etmeniz kesinlikle önerilir.)
Form Maskeleme
Telefon veya keredi kartı numarası gibi birçok formata sahip olabilecek bir yanıt için uygun formatı görüntüleyerek hataları azaltmaya yardımcı olarak formun tamamlanmasını hızlandırabilir.(Ülke alan kodu ve 16 haneden farklı kredi kartı türleri için kontrolleri unutmayın)
Alan Etiketleri
Form alanı üzerinde bulunan (placeholder) ve kullanıcının o alana hangi veriyi gireceğini gösteren etiketlerdir.
Alana özgü klavyeler
HTML, 2014'teki sürümünden bu yana geliştiricilerin, bir kullanıcı alana dokunduğunda uygun bir mobil klavye dönüştürmek için giriş türlerini (örneğin, “e-posta”, “tel”, “tarih”, vb.) tanımlamalarına izin veriyor.
Klavye türleri belirgin (telefon numaraları için bir nümerik klavye) veya e-posta adresi girilen alanlarda açılan klavyelerin(e-posta adresleri için “@” sembolünün eklenmesi) için kişiselleştirmeler yapılabilir.
Anlık veri doğrulama
Çoğu mobil formda, kullanıcılar tüm formu göremez; tüm alanları görmek için kaydırma gereklidir. Anlık veri doğrulama ile birlikte kullanıcı eş zamanlı olarak giriş yaptığı form alanından ona doğru veri girişi yaptığına dair onay ya da hata mesajı döndürür.
Eğer kullanıcı uzun bir form alanı doldurmuş fakat ilerleyemiyorsa, sayfanın en üstüne tekrar çıkıp hatalı giriş yaptığı alanı bulup düzeltmesi ve sonra tekrar devam etmeye çalışması motivasyonu oldukça azaltacaktır.
4. Form performansını ölçmek için araçlar
Granüler ölçüm, formlardaki sorunlu bölgelerin belirlenmesine yardımcı olur:
- Kullanıcılar formun hangi bölümlerini en uzun sürede tamamlıyor?
- Kullanıcılar hangi noktada en sık formu terk ediyor?
Bu soruların cevabı ile birlikte websitenizdeki form alanlarında yapacağınız testler için hem kalitatif hem de kantitatif verilere sahip olabilirsiniz. Google Etiket Yöneticisi (GTM), 6 form değişkeni ile formların birçok yönünü izleyebiliyor:
- gtm.elementClasses
- gtm.element
- gtm.elementId
- gtm.elementTarget
- gtm.elementText
- gtm.elementUrl
Simo Ahava’nın, GTM aracılığıyla form gönderimlerinin nasıl takip edileceğine dair yazısına buradan ulaşabilirsiniz.
Ayrıca form ölçümlemeleri için Formissimo, Clicktale, Inspectlet ve Hotjar gibi araçları da kullanabilirsiniz.
Sonuç
Mobil formlar kullanıcı etkileşimlerini kısıtlar ancak bazı seçimleri kolaylaştırmak tamamiyle sizin elinizde. Yukarıda yer alan her form optimizasyonunun test edilmesi gerekmez. Uygun alana uygun klavyeyi vermek doğrudan uygulayabileceğiniz bir yöntemdir. Bu UX geliştirmeleri, sadece yüksek trafiğe sahip websiteleri için değil tüm websiteleri için geçerlidir.
Bu form optimizasyonlarına ek olarak her sene gelişen ve yenilenen Touch ID, yüz tanıma veya kredi kartları, kimlikler ve pasaportların kamera ile taramaları gibi birçok özellik mevcut. Bu özellikler mobil cihazlarda büyük bir kolaylık ve kullanıcıya hız vaadediyor.
