Tasarım ajansımı biliyorsunuz. İstanbulDijital. Geçtiğimiz günlerde IHH dan sevgili Adem abi şirketimize e-mail ile ulaşıp mevcut bağış sistemlerinin insanları daha az telaşlandıracak , hiç bilgisayarla uğraşmamış kimselerin dahi rahatça doldurabileceği bir hale getirmemizi istedi.
Bir usability projesi anlayacağınız. Mantıkta birkaç input öğesi ile kolayca halledilebilecek bir iş. Fakat bilgisayara aşina olmayan birinin gözünden bakıldığında hiçte öyle değil. Renkler, kullanılan ikonlar, açıklamanın yeterliliği o kadar önemli ki onun için.
Arkadaşlarla oturduk, iki bölümde ele aldık projeyi. Programlama değildi işimiz mevcut olanı kullanılabilir hale getirmek, verimi arttırmaktı.
Birkaç layout denendi önce en zevklisi seçilip proje sahibine gönderildi. Beğeni alındıktan sonra başlandı kodlanmaya.
İki günlük bir sürenin ardından http://www.insaniyardim.org adresinden inceleyebileceğiniz bağış sistemi çıktı ortaya.
Kullandığım tricklerle ilgili resimlerle birkaç detay vereceğim burada. Geçenlerde bir arkadaş iletişim bölümünü kullanarak bana ulaşıp ders yazıp yazmayacağımı sormuştu, tam olarak ders denmese de keyifli bir yazı ile başlamış olalım o seriye 
Giriş Ekranı
 |
Kullanıcının doldururken tedirgin olmaması için daha sıcak renkler kullanmak gerekiyordu. Bizde form doldurmayı daha eğlenceli daha anlaşılır bir hale getirmeye çalıştık. Başlıklarımızda ve hatta form öğelerimizin içinde ikonlar kullandık. |
Bilgilendirme Kutucukları
 |
Kullanıcılarımıza sisteme dair tüm öğretici bilgiyi düz bir metinle sunmak mantıklı olmazdı. Hem kullanıcı hangi bölümde ne okuyacağını bulamaz buda başarısız denemelere sebebiyet verirdi. Basit bir formu bölümlere böldük ve hepsinin nasıl doldurulacağıyla ilgili, neden istendiğiyle ilgili bilgi kutucukları yerleştirdik. Projelerinizde mutlaka deneyin, işe yarıyor. |
Daha Basit
 |
Daha büyük ve okunabilir başlıklar. Sanırım kimileri buna web2.0 usulü tasarım da diyor(sanki yemek ismi gibi oldu). Gördüğünüz gibi css kullanarak zorunlu boşlukların içerisine şirin birde ünlem koyduk.Aklınızda bulunsun form tasarlarken mutlaka input öğelerinize biraz padding verin ve rahat okunabildiğinden emin olun. |
Biraz CiddileÅŸelim
 |
Ziyaretçimizi hiç sıkmadan ondan iletişim bilgilerini almayı başardık şimdi sıra geldi işin en civcivli kısmına kredi kartıyla ziyaretçimiz bağış yapacak. Burada biraz ciddiyeti arttırmak gerekiyor. Tamam tüm işlemlerimiz 256bit ile şifreleniyor ama yeterli değil bunu ziyaretçimize sunmalıyız değilmi? Daha elit ve güven verici bir tasarımla, yer yer keskin çizgilerle kredi kartıyla ödeme sayfamızı da yapıyoruz..Bilgilendirici kutucuklarımız yine rol almalı burada. Kredi kartıyla ilk defa işlem yapan bir insan dahi kolayca bu formu doldurup insanlığa bağış yapabilmeli. |
Yabancı Kalmayın
 |
Web’i olabildiÄŸince kullanılabilir bir teknoloji haline getirmek için kiÅŸileÅŸtirme de yapmak mümkün. Send veya basti bir submit butonunu Bağışla diye deÄŸiÅŸtirmek de kimi zaman iÅŸ görebiliyor.Bu ekranda saÄŸ tarafta kullanıcı bilgileri doldururken aklına gelebilecek muhtemel sorular, kredi kartı bilgilerinin güvenliÄŸi, bağışının nereye ve ne ÅŸekilde ulaÅŸtırılacağı gibi soruların olduÄŸu mini bir faq bölümü yer alıyor. |
İnsanlığa yardımı ile herkesin bildiği IHH ile çalışmak bizim için cidden zevkliydi. Web konusunda araştırma yapan arkadaşlara da minik bir bilgilendirme gibi sunmak istedim baştan sona bu projeyi. Faydalı olabilirsem ne mutlu.
7 Yorum
ben baktım çok güsel olmuş sonra rabiaya söledim oda baktı.. sonra dedik ki bu sinan ne güsel yapmış dedik.. en son da dedik dedik dinnetemedik
ÅŸimdi geçen gün bakıyodum sinan abimin sitesine…bi baktım ÅŸule ablamda bakıyo…soora dedik:
-Allah!Bu sinandan adam olur!
Merhaba Sinan Bey.
Yalnız bir-iki eleştirim olacak izninizle.
Gerçekten formu çok güzel tasarlamışsınız. Görür görmez insanın gerçekten formu doldurası geliyor
1. Formun kullanılabilirliği fevkalâde fakat erişebilirliği için aynı şeyi söyleyemeyeceğim. Sayfanın CSS kodlarını kapattığınızda bunu daha iyi görebilirsiniz. Css kapalı iken dağınık bir hali var formun.
2. TABINDEX etiketi kullanmadığınızı gördüm.
3. LABEL ve FIELDSET gibi bir form için son derece önemli etiketleri es geçmişsiniz.
4. Formu boÅŸ olarak göndermek istediÄŸimde JavaScript devreye giriyor. “Lütfen ad ve soyad alanını doldurunuz.” diyor. Tamam çok güzel ama kullanıcıyı, doldurulması gereken alana yönlendirmiyor ne yazık ki. JavaScript içerisinde mutlaka FOCUS yöntemi kullanılmalıydı.
Dediğim gibi tasarıma tek bir lafım yok. Mükemmel tasarlamışsınız. Ama kodlama bölümüne biraz daha dikkat edilebilirdi. Gerçi kodlamayı biz yapmadık diyorsunuz. Bu durumda siz üzerinize düşen görevi fevkalâde yerine getirmişsiniz. Tebrik ederim
teşekkür ettim kızlar B)
sinan ben bu yazıları uzun olduğu zaman göremiyorum kenarlıklar yazıları kapatıyo nedeeennn???
harbi harbi ben bağış yaparım bu form ile. çok çekici ve güven verici çizgilere sahip. Teşekkürler Sinan Ata
@eburhan
yalnızca tasarım ve kullanılabilirlik bize ait. katılıyorum label kullsansam daha saÄŸlam olabilirdi. Programlamasına çok dokunmak istemedim açıkçası. Focus yöntemini seviyorum. Rails’de default geliyor oyüzden çok hoÅŸlanmıştım.
İlerleyen zamanlarda programlaması da bize ait çalışmalarda daha sağlıklı iş çıkarırız inşallah.
@miraç
estaÄŸfurullah.
RSS Beslemesi (Yorumlar) · URI'nin geri izlemesini yap.
Bir yorum yazın!
Konular
Arkadaşlarım
Son Yazılarım
Son Yorumlar
Çok Tutulanlar
Sinan Ata kişisel web ve tecrübe paylaşım platformudur. Altyapı olarak Wordpress kullanmaktadır. Kaynak belirtilerek alıntı yapılabilir.