Hatasız Form Olmaz

Web projelerinin kullanıcı deneyimi tasarımında yapılan en yaygın hata, tüm deneyimi wireframe üzerinde planlamaya çalışmaktır. Oysa wireframe dökümanları, tasarlanan dijital deneyimin sadece görünen parçalarını -yani arayüz tasarımını- içerir. Kullanıcı deneyimi tasarımı sadece görüneni değil, algılanan, yaşanılan ve sonrasında da hissedilen tüm deneyimin planlanmasını kapsar. Bir e-ticaret sitesinin ödeme sayfası fonksiyonları, müşteri hizmetleri elemanının ses tonu, kargolanan paketlerin tasarımı gibi her detay deneyim tasarımını oluşturan parçalardır. Bir web projesinin en başında planlanan kullanıcı deneyimi tasarımı, müşteri hizmetleri yetkilisi, kargo elemanı ya da yazılım ekibi insiyatifleri ile yeniden şekillendirilmemelidir.

Bir çoğumuz web’de dolaşırken hata gösteren sayfalarla karşılaşmışızdır. Bazı hatalar, alt yapı kaynaklı sistemsel sorunlardır. Bazı hatalar ise iyi tasarlanmamış deneyimin kullanılabilirlik hatalarıdır. Hiç biri kullanıcı kaynaklı hata değildir. (iddalı bir cümle ama böyle kabul etmemiz gerekiyor)

Hata Mesajları ve Form Yönlendiricileri

Kullanıcı deneyimi tasarımcısının öncelikli görevlerinden biri, minimum hata ile ilerleyen anlaşılabilir ve kullanılabilir bir deneyim haritası çizmektir. Web sayfalarında bulunan formlar ise bu haritaların kavşak noktalarıdır. Kullanıcının hangi yola sapacağı ya da sapamayacağı önceden planlanmalı ve yönlendiriciler içermelidir. Web formlarının yönlendiricileri; hata mesajları, form etiketleri, tooltip’ler ve açıklama metinlerinden oluşur. Yönlendiriciler, anlaşılabilir, çözüm odaklı ve pozitif olduğu sürece formlarda karşılaşılan hata oranları minimuma düşecektir.

Anlaşılabilir yönlendiriciler

Form sayfaları, kullanıcının web sitesi ile diyalog kurduğu sayfalardır. Soru-Cevap şeklinde ilerleyen bu diyalogun içindeki tüm sorular, karşı tarafın anlayabileceği şekilde hazırlanmalıdır.

Bazı kullanıcılar “CVV2 kodu” yerine “Güvenlik numarası” kelimesini daha anlamlı bulmaktadır. Bazıları ise istenilen numaranın kredi kartının neresinde olduğunu dahi bilmemektedir. Bir çoğumuz formlarda karşılaştığımız ‘Adres satırı 1’ ve ‘Adres satırı 2’ diye etiketlenen kutuların neden birbirinden ayrı olduğunu bilmiyoruz. Form alanlarının doğru etiketlendirilmesi için bu alanların da taksonomi çalışması içerisine dahil edilmesi gerekir.

Formlarda kullanılan etiketler kadar, kullanıcıların cevaplarına verilen geribildirimler de önemlidir.

Kullanıcı tarafından eksik ya da hatalı girilen bilgiler net bir şekilde metinsel olarak ifade edilmelidir. Uzun bir formu doldurup, gönder butonuna tıkladıktan sonra ‘Lütfen bilgilerinizi kontrol ediniz’ mesajı ile karşılaşmışsınızdır. Hata mesajlarını hatalı alanın yanına yazmak hatta konrolü bilgi girişi sırasında gerçekleştirmek çok daha doğru bir yoldur.

Çözüm odaklı hata mesajları

Yönlendiriciler, istenilen bilgi girişi formatını göstermek için çok yararlıdır. “Şifreniz en az 6 haneli olmalıdır” demek için en uygun zaman kullanıcının şifreyi belirlediği andır. Böylece 4 hane olarak girilen şifre için hata mesajı görüntülenmemiş olur. Formda istenilen bilgilere neden ihtiyaç duyulduğu, hangi formatta istendiği gibi yardımcı bilgiler form yönlendirmeleri (açıklama kutuları, tooltip’ler vs.) sayesinde verilebilir. Böylece kullanıcının kafasında oluşan soru işaretleri önceden giderilmiş ve güven ortamı sağlanmış olur. TC kimlik bilgisi, kredi kartı numarası gibi özel bilgilerin istendiği kutular, mutlaka açıklayıcı bilgiler içermelidir. Telefon numarası alanı gibi farklı formatta yazılabilecek bilgiler örnek yazım formatı ile birlikte istenmelidir.

Yönlendirme ya da hata mesajlarının işe yaraması için kolay görünebilir, dikkat çeken bir formatta hazırlanması gerekir. Renk, font ve animasyonlarının hesaba katılarak planlanması gerekir. Açıklama metinlerinin küçük olması ya da form alanlarının en üstünde olması grafik tasarım açısından hoş görünebilir ama kullanıcı bunları okuyamıyorsa işe yaramıyor demektir.

Hatalı bilgi girişleri sonunda verilen hata mesajları, kullanıcıya hangi bilginin yanlış olduğunu ve nasıl düzeltileceğini söylemelidir. “E-posta adresini eksik yazdınız”, “Telefon numaranızı başında 0 olmadan 10 haneli giriniz” gibi…

Pozitif geri bildirimler

E-posta adresi, telefon numarası, doğum tarihi, kredi kartı numarası, parasal değerlerin yazım formatı heryerde aynı değildir. Oysa formlar, sadece önceden belirlenmiş formata uygun bilgi girişlerini kabul ederler. Formlarda oluşan bir çok hata, bilginin hatalı girilmesinden değil, formların teknik kapasiteleri yüzünden meydana gelir. Dolayısıyla gösterilen hata mesajlarının mütevazi, pozitif bir ton içermesi gerekir. “Hatalı giriş yaptınız”, “Yanlış yazdınız” gibi suçu kullanıcıya yükleyen bir tavır içermemelidir.

Bir web projesinin deneyim tasarımı hata vermeyecek şekilde tasarlanmalıdır. İdeal olanı kullanıcının ulaşmak istediği hedefe kesintiye uğramadan erişmesini sağlamaktır. Makineler kusursuz çalışabilir ama insanlar her zaman hata yaparak öğrenir. Onlara hata yapmamayı öğretmek, yapılan küçük hatalara rağmen başarıya ulaşabileceğini göstermek tasarladığınız deneyimin bir parçası olsun. Doğru yer ve zamanda görüntülediğiniz çözüm odaklı hata mesajları hiç hatasız bir deneyim kadar pozitif algılanan bir izlenim bırakacaktır.

Originally published at blog.designedbysherpa.com on May 20, 2015.