Web Sitesinde Form Dönüşümünü Artıran UX Düzenlemeleri

Bir formun dönüşümünü artırmak için yalnızca buton rengini değiştirmek yeterli değildir. Kullanıcıdan istenen bilgi miktarı, alanların anlaşılır olması, hata durumunun nasıl gösterildiği, mobil klavye davranışı ve gönderim sonrası geri bildirim aynı akışın parçalarıdır.

Formu iyileştirirken hedef "mümkün olan en kısa form" değil, kullanıcının gereksiz sürtünme yaşamadan doğru bilgiyi verebildiği form olmalıdır.

Önce formun amacını netleştirin

Aynı form hem ilk temas hem detaylı proje brifi toplamaya çalışırsa gereğinden ağır hale gelebilir.

Örneğin ilk iletişim için gerçekten gerekli bilgiler:

• Ad
• İletişim bilgisi
• Kısa ihtiyaç açıklaması

olabilir.

Bütçe, şirket büyüklüğü, hedef tarih, teknik altyapı ve uzun soru listesi satış sürecinin sonraki adımında toplanabiliyorsa ilk formda zorunlu olmayabilir.

Her alan için şu soruyu sorun:

Bu bilgi kullanıcıya geri dönüş yapabilmek veya talebi doğru yönlendirmek için şu anda gerçekten gerekli mi?

Alan etiketlerini placeholder yerine kullanın

Kullanıcı yazmaya başladığında placeholder metni kaybolur. Bu nedenle alan adını yalnızca input içinde göstermek, kullanıcının ne girdiğini kontrol etmesini zorlaştırabilir.

web.dev, form alanlarında gerçek <label> kullanmayı ve label ile input'u ilişkilendirmeyi önerir. Bu yaklaşım hem tıklama alanını büyütür hem ekran okuyucuların alan adını doğru duyurmasına yardımcı olur. web.dev: Sign-in form best practices

Örnek:

<label for="phone">Telefon</label>
<input id="phone" name="phone" autocomplete="tel">

Placeholder gerekiyorsa örnek veya format göstermek için yardımcı olarak kullanılabilir, alan adının yerine geçmemelidir.

Tarayıcının otomatik doldurma özelliklerinden yararlanın

Kullanıcı daha önce verdiği ad, e-posta, telefon veya adres bilgisini tekrar yazmak zorunda kalmamalıdır.

Doğru type, name, id ve autocomplete değerleri tarayıcıların alanı anlamasına ve otomatik doldurma sunmasına yardımcı olur. web.dev özellikle mobil formlarda uygun autocomplete değerlerinin kullanılmasını önerir. web.dev: Payment and address form best practices

Örneğin:

<input type="text" autocomplete="name">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">

Teknik uygulama formun türüne göre ayrıca test edilmelidir.

Doğru mobil klavyeyi açın

Telefon numarası girilecek alanda normal metin klavyesi, e-posta alanında uygun olmayan klavye kullanıcıya gereksiz yük getirir.

HTML input türleri ve inputmode gibi özellikler mobil cihazın daha uygun klavyeyi göstermesine yardımcı olabilir.

Ancak yalnızca klavye tipi yeterli değildir. Gerçek iOS ve Android cihazda şu akışı test edin:

1. İlk alana dokunun.
2. Klavye açıldığında aktif alan görünür mü?
3. Sonraki alana geçmek kolay mı?
4. Gönder butonu klavye altında kalıyor mu?
5. Hata mesajı görünür alana geliyor mu?

Hata mesajını kullanıcının düzeltebileceği şekilde yazın

"Geçersiz değer" zayıf bir hata mesajıdır.

Daha kullanışlı:

Telefon numaranızı alan koduyla birlikte girin.

Hata mesajı:

• Sorunun hangi alanda olduğunu göstermeli
• Ne yapılması gerektiğini söylemeli
• Girilen doğru verileri silmemeli
• Mümkünse kullanıcı gönder butonuna basmadan önce uygun zamanda gösterilmeli

web.dev form rehberi, yalnızca gönderim sonunda değil veri girişi sırasında uygun doğrulama yapılmasını önerir. web.dev: Form best practices

Zorunlu ve isteğe bağlı alanları açıkça ayırın

Kullanıcı hangi alanın gerçekten gerekli olduğunu tahmin etmemelidir.

Özellikle çok alanlı formlarda şu yöntemlerden biri tutarlı kullanılabilir:

• İsteğe bağlı alanları "(isteğe bağlı)" olarak işaretlemek
• Zorunlu alanları açık bir metinle belirtmek

Yalnızca yıldız işareti kullanılıyorsa anlamı formun yakınında açıklanmalıdır.

Buton kullanıcının yapacağı işi söylesin

"Gönder" çoğu zaman çalışır ama bağlama göre daha açık ifadeler tercih edilebilir:

• Teklif iste
• Randevu talebi gönder
• Başvuruyu tamamla
• Demo talebi gönder

Buton metni kullanıcının işlemden sonra ne olacağını anlamasına yardımcı olmalıdır.

Gönderim sırasında belirsizlik bırakmayın

Kullanıcı butona bastıktan sonra sistem birkaç saniye sessiz kalırsa tekrar tıklayabilir.

Gönderim akışında:

• İşlemin başladığını gösterin.
• Gerekirse butonu geçici olarak devre dışı bırakın.
• Başarı durumunu net gösterin.
• Hata olursa form verilerini koruyun.
• Kullanıcıya sonraki adımı anlatın.

web.dev, ödeme ve adres formlarında submit butonunun tıklama sonrasında tekrar gönderimi önlemek için devre dışı bırakılmasını önerir. web.dev: Payment and address form best practices

Form çevresindeki güven sorularını cevaplayın

Form kısa olsa bile kullanıcı "Bu bilgiyi neden istiyorlar?" diye düşünebilir.

İhtiyaca göre form yakınında şu bilgiler yararlı olabilir:

• Ne kadar sürede geri dönüş yapılacağı
• Telefonun hangi amaçla istendiği
• Dosyanın kimlerle paylaşılacağı
• Gizlilik politikasına bağlantı
• Zorunlu olmayan pazarlama izninin ayrı tutulması

Gerçek olmayan güven rozetleri veya doğrulanmamış "verileriniz yüzde 100 güvende" iddiaları eklenmemelidir.

Kopyalanabilir form UX kontrol listesi

FORM AMACI
[ ] Formun tek bir ana amacı var.
[ ] İlk temas için gereksiz detaylar zorunlu değil.

ALANLAR
[ ] Her alanın görünür etiketi var.
[ ] Zorunlu / isteğe bağlı ayrımı açık.
[ ] Telefon, e-posta ve diğer alan türleri doğru tanımlı.
[ ] Uygun autocomplete değerleri kullanılıyor.

MOBİL
[ ] Gerçek telefonda test edildi.
[ ] Klavye aktif alanı kapatmıyor.
[ ] Buton rahat dokunulabiliyor.
[ ] Doğru klavye tipi açılıyor.

HATA
[ ] Hata hangi alanda olduğunu söylüyor.
[ ] Hata nasıl düzeltileceğini açıklıyor.
[ ] Doğru girilmiş diğer bilgiler kaybolmuyor.

GÖNDERİM
[ ] Tekrar tıklama kontrolü var.
[ ] Yükleniyor durumu var.
[ ] Başarı mesajı açık.
[ ] Başarısız işlemde kullanıcı ne yapacağını biliyor.

ÖLÇÜM
[ ] Buton tıklaması ile başarılı gönderim ayrılmış.
[ ] Form başarı olayı Analytics / reklam ölçümünde test edilmiş.

Test sonucu nasıl yorumlanmalı?

Form değişikliğinden sonra yalnızca toplam form sayısına bakmayın. Trafik kaynağı, cihaz dağılımı veya kampanya yapısı aynı dönemde değiştiyse sonucu yalnızca UX düzenlemesine bağlamak doğru olmaz.

Mümkünse değişiklik öncesi ve sonrası:

• Form başlatma
• Hata
• Başarılı gönderim
• Mobil / masaüstü
• Trafik kaynağı

verilerini birlikte inceleyin.

Form UX çalışmasının amacı kullanıcıyı ikna etmeye zorlamak değil, zaten iletişim kurmak isteyen kişinin gereksiz engellerle karşılaşmasını azaltmaktır.