A List Apart’ta yayınlanan ‘Inline Validation in Web Forms‘ adlı makalenin konusu olan çalışmada  form alanlarını, kullanıcılar daha doldururken kontrol edip hata mesajlarını gösteren yöntem ile ‘Gönder’ butonuna ‘ bastıktan sonra kontrol edip hata mesajlarını gösteren yöntem arasındaki farklar ortaya çıkarılmış.

Kullanıcıların giriş yaptığı anda kontrol eden yöntem diğerine göre;

başarı oranını %22 artırmış,
hata sayısını %22 azaltmış,
memnuniyet oranını %31 artırmış,
formu tamamlama süresini %42 azaltmış ve
göz odaklanma sayısını %47 azaltmış.

‘Inline validation’ olarak adlandırılan bu yöntemin her form alanında değil de telefon numarası, kullanıcı adı, mail gibi kullanıcıların hata yapma olasılıklarının fazla olduğu alanlarda uygulanması   tavsiye ediliyor.

Makalede diğerinden daha başarılı olduğu ortaya çıkan bu yöntemin üç farklı şekilde uygulanabileceği belirtilmekte. Bu yöntemler kullanıcılar her bir alanı doldurup aşağıdakine geçtiğinde yapılan test, kullanıcı alanı doldururuken yapılan test ve kullanıcı alanın doldurmadan önce ve doldururken yapılan test olarak üçe ayrılıyor. Bu üç yöntem arasında da en başarılısı kullanıcılar her bir alanı doldurup aşağıdakine geçtiğinde yapılan test olmuş. Bu yöntemde kullanıcılar formu 7 saniye daha erken bitirmişler.

Jacob Nielsen’in “Stop Password Masking” yazısından sonra bu konuda neler yapılabileceğini Formlardaki Şifre Alanları yazısında bahsetmiştik. Nielsen yazısında şifre alanlarının yıldız ile gizlenmesinin kullanılabilirlik adına özellikle mobil uygulamalarda sıkıntı yarattığını belirtmişti.

Bu yazıdan sonra bahsedilen problemi çözmek adına sadece girilen son karakteri gösteren form uygulamalarını geliştirilmeye başlandı. Bu model şuan Iphone’larda kullanılmakta.Genellikle javascript kütüphaneleri ile oluşturulan bu çalışmalar şifre gizleme sorununu çözerken Internet Exploorer 6 gibi eski tarayıcı kullanıcılar içinse  sıkıntı yaratabilirler. Aşağıda yapılan 3 çalışmaya linkler bulabilirsiniz.

How to Mask Passwords Like the iPhone

An Alternative Approach to Password Confirmation

Iphone Like Password Fields Using Jquery

Jacob Nielsen son yazısında formlardaki şifre alanlarında girilen karakter yerine (*) gözükmesinin özellikle mobil araçlarda büyük kullanılabilirlik sorunu oluşturduğunu belirtmiş.

Benzer bir şekilde Kevin Vigneault’da form alanlarında iki kez şifre sorulmasının kullanıcılar tarafından kızgınlıkla karşılandığını yazmış.

Kevin Vigneault yazısında ayrıca yukarıdaki iki sorunu da çözme yolunda adım olacak şekilde alternatif form şifre alanları üretmiş.

Aşağıda örnek şifre alanları görebilirsiniz:

Çözüm 1:

Bu örnekte seçimi kullanıcıya bırakıyoruz.

Çözüm 2:

Bu örnekte kullanıcılar girdiği şifreyi butona basarak görebilirler. Mouse’u butondan çektiği anda şifre eski yıldızlı haline geri döner.

Çözüm 3:

Bu çözümde herhangi bir seçenek koymadan kullanıcılar şifrelerini yazdıkları gibi görebiliyorlar.

Bu çözümlere ek olarakta Stephen Lewis Javascript ile http://experienceinternet.co.uk/blog/archive/an-alternative-approach-to-password-confirmation/ adresinde bulabileceğiniz alternatif bir çözüm üretmiş.

Kullanıcıların kredi kartlarının bilgilerini girdiği sayfada bulunan formla ilgili birkaç tavsiyeyi aşağıda bulabilirsiniz.

1. Kullanıcıların bir bölümü 16 rakamdan oluşan kredi kartı numaralarını aralarında boşluk olarak girecektir. Kullanıcının boşluk kullanmasına izin verip arka planda 16 rakamı almak bir programcı için çok da zor değildir.

2. Son kullanma tarihlerini seçerken ayların ismini yazmak kullanıcılarda birkaç saniye olsa bile duraklama yaratacaktır. (Twitter’da bir serzeniş). Ayrıca ilk defa kredi kartı bilgisini verecek kullanıcı kredi kartı üzerinde yazan rakamların hangisinin ay hangisinin de yıl bilgisi olduğunu çıkaramayabilir. Bu yüzden kullanıcılar bu alanı aynen kredi kartının üstünde yazdığı gibi seçebilmelidir.

3. CVC2 (Kredi kartının arkasında bulunan 3 basamaklı güvenlik rakamı) yine çoğu kredi kartı kullanıcısı için çok fazla anlam ifade etmemektedir. Bu yüzden CVC2′nin nerede olduğu görsel bir şekilde anlatılmalıdır.

4. Kard tipi bölümü de Visa ve Mastercard ikonları ile daha anlaşılır halde sunulabilir.

Web sayfalarında kullanıcılara en fazla sıkıntı yaratan elementlerden biri olan formların daha kullanılabilir oluşturulmasının yollarını anlatan Web Form Design Best Practices kitabında birincil (genellikle Kaydet/Tamam) ve ikincil (genelde iptal) form butonlarının göz izleme cihazı ile analizi yapıldı.

Kullanıcılardan aşağıdaki 5 farklı yerleşim ve şekilde butonları olan formları doldurmaları istendi.

Yapılan test sonucunda A, B, C, D ve F seçeneklerinde kullanıcıların %100 başarıya ulaşmasına rağmen göz izleme sonucunda en iyi performansın B seçeneğindeki formdan alındığını görülmekte. B seçeneğindeki form doldurulurken oluşan odaklanma noktaları aşağıdaki gibi:

Test sonucunda ise kullanıcıların en beğendikleri seçeneğin A olduğu ortaya çıkıyor. A seçeneğindeki form doldurulurken oluşan sıcaklık haritası aşağıdaki gibi:

Submit (Kaydet), Cancel (İptal) butonlarının arasında tasarımsal farklılığın olması (ve Cancel seçeneğinin daha az dikkat çekici olması) kullanıcılar açısından daha yararlı olmakla birlikte yanlışlıkla basılacak bir İptal tuşunun olasılığını da azaltmakta.

Bu iki form butonunun yerleşimi konusunda web’de bir standart olmamakla birlikte işletim sistemlerinde bir farklılık bulunuyor. Windows’da the Windows Vista User Experience Guidelines da gördüğümüz gibi Tamam butonu solda İptal butonu sağda iken Macintosh da Apple Human Interface Guidelines da anlatıldığı gibi Tamam butonu sağda İptal solda bulunuyor. Mac’in bu tasarım kararının arkasında kullanıcıların okuma alışkanlıklarının olduğu belirtiliyor.