ALTI ÜSTÜ TASARIM – Mehmet Doğan

Form Tasarımı Hakkında Birkaç Tavsiye

19 Ocak 2007

Her kim olursanız olun, nerede yaşarsanız yaşayın, ne iş yaparsanız yapın, hepimizin mutlaka yapmak zorunda olduğu bir şey var: form doldurmak. Askerlik formu, kredi kartı başvuru formu, üyelik formu ve daha bir dolu gerekli/gereksiz form.

İnternet hayatımızdaki birçok kağıt gerektiren işi elektronik hale getirdi. Mektup, e-postaya dönüştü; ansiklopediler, websitesine. Fakat değişmeyen bir şey var ki o da form doldurmak. Elektronik bile olsa. Sıkıcı, uzun, zaman zaman sinir bozucu ve çoğu kez zamanımızı çalan bu işlemi hepimiz bir şekilde, bir yerde gerçekleştiriyoruz.

Formlar bir website için en önemli araçlardan biri. Formlar, kullanıcıların, sitenize geliş amacını gerçekleştirmelerine yardımcı olan bir gereksinim. Buna rağmen hiçbir web ziyaretçisi, bir siteye sırf form doldurmak için gelmiyor. Onlar, kredi kartı almak için geliyor, sitedeki yazıları okumak ya da sitedeki yazılara katkıda bulunmak isteğiyle geliyor, bilgi almak, bilgi vermek, işe girmek için geliyor. Ya da o çok istedikleri bir ürünü, kitabı, hizmeti almak için geliyor. Nedeni ne olursa olsun, bu isteklerini gerçekleştirmek, hedeflerine ulaşmak için o sitede onlara sunulan formu doldurmaları gerekiyor.

Formlar, site sahipleri içinde vazgeçilmez öğeler. Bu formlar sayesinde, ziyaretçilerimizden istediğimiz bilgileri alıyor ve hem onların hem de bizlerin ulaşmak istediği hedeflere ulaşıyoruz. Fakat bütün bunlara rağmen, form tasarımı, belki de bir website içinde en göz ardı edilen, kullanılabilirliğine ve kullanıcı deneyimine en az zaman ve caba harcanan kısımlar. Çoğu kez, formlar, göz korkutucu, sinir bozucu, karmaşık ve kullanıcıdan, onların istediğinden daha fazla çaba sarf etmelerine neden olacak şekilde tasarlanıyor.

"Mikrodalga fırın" bir cağda yaşıyoruz. Herkes, istediği her şeyin çabucak gerçekleşmesini istiyor. Herkes, her şeye çabucak sahip olmak istiyor. Bu özellikle web için çok daha geçerli. Eğer bir şeyleri gerçekleştirmek zamanımızı ve çabamızı sarf ediyorsa, anlam içermiyorsa, o zaman istediğimizi bulmak için, bir başka yere, başka bir siteye bakınmaya başlıyoruz. Bu nedenle, kullanıcılarımıza sunduğumuz formların kullanılabilirliğine zaman harcamak ve kullanıcının hedeflerini gerçekleştirmesine yardım edecek şekilde tasarlamak gerekiyor.

Web içindeki formlar, bilgi ve değer alışverişinin başladığı yerler. Eğer kullanıcınız, sitenizin içindeki formu doldurmak için zaman harcıyorsa, bunun karşılığında siz de ona bir şeyler vermeli, onları bu çabasına karşılık değer katmalısınız. Peki site sahibi olarak neler yapabiliriz?

Kullanıcılar, onlara sunulan formu doldurmanın ne kadar zaman alacağını bilmeli

Geleneksel kağıt formlar içinde, bir formu doldurmak için geçebilecek zamanı tahmin edebiliyoruz ya da formun kaç bölümden oluştuğunu kolayca görebiliyoruz. Fakat birçok web formu, çeşitli bölümlere ayrıldığından, aynı lükse, websitelerinde sahip değiliz. Bu nedenle, kullanıcılara, çeşitli ipuçları ve görsel öğeler ile doldurmakta oldukları formun büyüklüğü, uzunluğu hakkında bilgi vermek gerekiyor. Bunun güzel bir örneğini Sigortam.net sitesinde görebiliyoruz: "En ucuz fiyata ulaşmanız için sadece 3 adım kaldı!"

 

Kullanıcıda belirli bir beklenti oluşturmalı ya da beklentileri karşılanmalı

Eğer kullanıcıdan, onların ve sizin hedeflerinize ulaşmak için, belirli bir bilgiyi almak istiyorsanız, onlara bu bilgiyi nasıl kullanacağınızı ve bu bilgi sayesinde ne gibi bir fayda elde edileceğini, onlara anlatmanız gerekiyor. Bilgilere kim sahip olacak ve nerede kullanılacak? bu bilgiler sayesinde ne gibi çıkar elde edilecek? gibi soruları, bu bilgileri istemeden önce ya da isterken cevaplamak, kullanıcıların formu doldurup, bitirmelerine yardımcı olacaktır. Ayrıca bu bilgiler verildikten sonraki oluşacak işlemi kullanıcıya anlatmakta fayda var. Örneğin "Bu formu doldurduktan 24 saat içinde, şirketimizden bir uzman, sizinle temasa geçecek" gibi. Bilgi detayları ile ilgili güzel bir örneği Volvo Türkiye sitesinde bulabilirsiniz.

Beklentiler, formun bulunduğu ortama göre değişebiliyor. Örneğin e-ticaret sitelerinde, kullanıcıların birçok beklentisi var. Bunlardan biri ise, ödeme bilgileri. Birçok web kullanıcısı, bir ürün satın aldığında, bu ürüne ödeyecekleri toplam fiyatı bilmek istiyor. Bundan birkaç sene üzerinde çalıştığımız bir e-Ticaret sitesinde bu hata yapılıyordu. Site istatistiklerine bakınca açıkça görülüyordu ki birçok müşteri, fiyatı pahalı olan mobilyayı alışveriş sepetine koyuyor, adres bilgilerini giriyor fakat kredi kartı bilgilerine gelince, işlemi yarıda bırakıyordu. Kullanıcılara nedenini sorduğumuzda ise, mobilya gibi ağır bir ürününün kargo fiyatını, kredi kart bilgilerini vermeden önce görmek istediklerini söylediler. Böylesine bir beklentiyi karşılamayan şirket sahibi ise birçok müşteriyi ellerinden kaçırmış oldu.

Gereksiz, anlamsız ya da herkese uymayan sorular sorma

İnternet'in en güzel taraflarından birisi, belirli bir ülkeye ya da bölgeye sahip olmaması. Sitemize, dünyanın dört bir köşesinden ziyaretçiler gelmekte. Peki onlara sunduğunuz formlar buna hazır mı? Birçok form tasarımı, lokal mantık ile hazırlandığından, bu gerçeği unutabiliyor. Örneğin yurtdışında yaşayan bir kişiden yaşadığı il ve cep telefonu bilgileri istemek gibi. Ya da birçok e-devlet sitesinde gördüğümüz "bilgi alma" formundan bilgi almak isteyen yabancı uyruklu bir kişiye T.C. Kimlik numarası sormak ve bunu zorunlu kılmak gibi. Bu konuda Erinç, Elma Suyu sitesinin kayıt formu ile ilgili harika bir yazı yazdı. Okumanızı tavsiye ederim.

Formu hazırlarken su soruları kendinize sorun:

1. Bu soruyu neden soruyorum?
2. Sorduğum bu soru, kullanıcı ile kurmak istediğim ilişkinin bulunduğu aşamaya uygun mu?
3. Sorduğum sorunun cevabını daha sonra edinebilir miyim?
4. Sorduğum sorunun cevabını kullanıcı geneli cevaplayabilir mi?

Ukala, çok bilmiş ve çok akıllı olma. Anlamlı ön-eleme, ön-test ve hata mesajları ver

Bunu size birkaç örnekle açıklayacağım:

1. Flickr sitesinin kurucularından biri olan Caterina Fake, Facebook sitesine kayıt olmak için sitede bulunan formu gerçek bilgileriyle dolduruyor. Caterina'nın soyadı Fake. Fake'in anlamı ise "sahte". Facebook, Caterina formu doldurup "gönder" düğmesine basınca, hata mesajı ona soyadının yanlış (ya da sahte) olduğunu ve bunu düzelterek "gerçek" soy isim yazmasını söyleyen "akıllı" bir mesaj veriyor. Ön-eleme yaparken, herkesin kotu niyetli olduğunu düşünmek yerine, herkesin iyi niyetli olduğunu düşünmek ile başlayın.
2. Cep telefonunu hizmetlerini kullandığım şirketin bir web sitesi var ve geçenlerde bana bir email geldi ve bu emailde bu şirketin, web sitesinde bazı güvenliği geliştiren çalışmalar yaptığını ve benim sitelerine gidip, bu hizmetten yararlanmamı istediklerini yazıyordu ve ayrıca Güvenlik olarak benim şifremi değiştirmemi ve ayrıca güvenlik sorusunu cevaplamamı istiyorlardı. Güvenlik sorusu, hepinizi iyi bildiği şu bir güvenlik sorusu seçip, kendi cevabini yazmaktan oluşan bir çalışma idi. Listeden Annenizin kızlık soyadı, Beğendiniz Renk, Yakın Arkadaşınızı Doğum Tarihi gibi sorular vardı. Ben bu sorulardan "Çocukluk döneminde beslediğiniz ev hayvanının adı?" sorusunu seçip, cevabını sorunun aşağısında bulunan kutuya yazdım: Pisi. Gönder tuşuna bastım ve bir hata mesajı ile karşılaştım: "Güvenlik sorusunun cevabı en az 6 karakter olmalıdır". Nasıl yani? Peki o zaman niye bana bırakıyorsun soruyu ve cevabını? Kedimin ismini mi değiştireyim senin "akıllı" sistemin için?

Sizin yapabileceğiniz işlemi, kullanıcınızdan yapmasını istemeyin! Ya da onlara açık ve detaylı bir şekilde anlatın.

Belirli bir format içinde bir forma sahip olmanız, siz, site sahibinin amacı fakat kullanıcının umurunda bile değil. Bunu en çok, belirli bir bilgiyi, belirli bir kısma girerken görüyoruz. Örneğin telefon numaraları, kredi kartı numaraları, posta kodu gibi bilgiler girerken kullanıcıdan istenen format.

Geçen yıl, HepsiBurada.com'dan birkaç ürün alma teşebbüsünde bulundum. Eğer HepsiBurada.com'da bir şeyleri almak, bırakın almayı, bir ürünü, alışveriş sepetine koymak istiyorsanız, siteye üye olmanız gerekiyor. Grrrr... Ben de tavsiyelerine uyup üyelik linkine tıklayıp, istenilen bilgileri doldurmaya başladım. İstenilen bilgilerden biri benim ev telefon numaramdı. Birçok sitede olduğu gibi, telefon numaramı aşağıda görüldüğü gibi girdim:

 

Hata mesajı, telefon numaramın yalnızca "rakam"lardan oluşabileceğini belirtti. Halbuki girdiğim telefon numarası rakamlardan oluşuyordu. Belki de numaraların arasında kullandığım "–" işaretinin rakam olarak algılanmadığını düşünüp, "–" simgesini aşağıda görüldüğü gibi sildim:

 

Buna rağmen, hata mesajı benim telefon numaramın rakamlardan oluşması konusunda ısrarlı olduğunu gösterdi. Eğer yukarıda ki ekran görüntüsüne göz atarsanız göreceksiniz ki benim numaram yalnızca rakamlardan oluşuyor. Bu sefer, rakamlar arasında ki boşlukları silip, yeniden "kaydet" düğmesine basınca, hata mesajı yok oldu ve her şey yoluna girdi:

 

Bir telefon numarasını yazmanın, 3 hata mesajına mal oldu. Her seferinde, telefon numarasını ve daha önce yazdığım şifreyi yeniden girmek zorunda kaldım ki bu benim için kötü bir sanal deneyimdi. Halbuki, telefon numarasının istendiği yerin hemen yanına "örnek: 50612345 – boşluk ve harf kullanmayınız" yazılsaydı, ben 3 defa aynı telefon numarasını ve şifre bilgilerimi yazmayacaktım ya daha da iyisi birkaç küçük programcılık hilesi ile kullanıcının girdiği çeşitli formatlar, arka planda istenilen şekle dönüştürülebilir ve böylece kullanıcı, telefon numarasını nasıl girerse girsin, hata mesajı vermezsiniz.

Bir başka örnek ise İş Bankası'ndan. Eğer İş Bankası'na, kredi kartı almak için başvuru yapmak isterseniz ve İş Bankası müşterisi değilseniz, banka size çalışmak istediğiniz şubenin kodunu soruyor. Yardım tuşu ise bize bir dolu şehir ve şube ismi veriyor (örneğin İstanbul). Acaba bu işlem daha kolay hale getirilebilir miydi? Ya da bu bilgi, otomatik olarak verdiğim bilgilere göre daha sonra elde edilebilir miydi? Acaba en efektif yol bu mu?

Hata mesajlarına DİKKAT!

Eğer ODTÜ BIDB'ye is başvurusunda bulunuyorsanız ve form içinde "doldurulması zorunludur" diye açıklanmamış olan bölümlerden birinin doldurmaz ve formu gönderirseniz, size anlamsız, yabancı dil ile yazılmış hata mesajı veriyor. Acaba "activities" kısmı nerede benim doldurduğum form içinde?

Form içinde bulunan sorular, kullanıcıya yardım eden küçük ipuçları ve hata mesajlarında kullanılan dil, o formu doldurmak isteyen kullanıcıya yardımcı olurken, sizin, kullanıcıdan almak istediğiniz bilgilere de kolayca ulaşmanızı sağlayacaktır. Yukarıdaki örnek içinde, kullanıcıyı, doldurulan formdan uzak bir başka sayfa hata mesajı görüntülemek için göndermek yerine, istenilen bilgiyi ve ipucunu işaretleyen bir mesaj gösterilebilirdi. Örneğin Kangurum websitesi, benim hangi kısımları bos bıraktığımı açıklıyor ve ne yapmam gerektiğini anlatıyor.

 

Hatayı önlemenin en önemli yolu, bu hataya sebep olacak unsurları ortadan kaldırmaktır. Yani "olasılık tasarımı". Bunun yapmak ise kullanıcıya form doldurma işlemi sırasında yardımcı olmak ile baslar. Citibank, genel başvuru formunda istenen bilgilerin nereden toplanacağı konusunda kullanıcılara yardım bilgileri vermesi buna en güzel örnek sanırım:

 

Web form için oluşan standartları bozma!

Web formları içinde oluşmuş belirli bir standart vardır. Örneğin bizler * (asteriks) işaretini gördüğümüzde, bunun doldurulması zorunlu kısım olduğunu biliriz ya da böyle bir model, önceki deneyimlerden dolayı oluşmuş bir kavramdır. Eğer, bizler bu standartları bozarsak, kullanıcının hata yapmasına neden oluruz. Bu konuya bir başka örnek ise AVIS şirketinin rezervasyon sitesinde görülebilir. Bundan birkaç sene önce, AVIS sitesinde bulunan rezervasyon formunda doldurulması zorunlu OLMAYAN kısımlar * ile işaretlenmişti:

 

Başka bir standart ise formu dolduran kişinin "gönder" düğmesine basması ile birlikte, bu formun otomatik olarak isleme konması. Eğer Anadolu Cetelem sitesindeki is başvuru formunu doldurup, "gönder" tuşuna basacak olursanız, "gönder" tuşunun bu formu otomatik olarak isleme koyması yerine, size bos bir email ekranı açtığını göreceğiniz. Onca zaman harcayıp, bu formu doldurmuş olan bir kullanıcının o anda hissettiklerini (ya da ağzından çıkanları) tahmin edebiliyor musunuz? Deneyin, siz karar verin!

Başka nelere dikkat etmeli?

Bu konuda yazılmış birçok makale var. İşte size bunlardan birkaçı:

• Sensible Forms: A Form Usability Checklist
• Forms, usability, and the W3C DOM
• 7 Steps to Useable Forms
• Usable Forms
• Usability and HTML Forms
• More Form usability
• Better Accessible Forms