Yan tarafta yağmurlu bir İstanbul gününde çektiğim bir fotoğraf ve fotoğrafın üzerine yazdığım bir kaç kelimeyi görüyorsunuz. Bu gördüğünüz görüntüyü elde etmek için Photoshop veya Fireworks gibi programları kullanmak artık gereksiz, çünkü bu işlemi birkaç satır CSS kodu yazarak yapmak artık mümkün.
Aşağıda bu görüntüyü elde etmek için gerekli kodları bulabilirsiniz, kodları inceledikten sonra ufak bir deneme yapmanız sizin iyiliğinize olacaktır.
HTML:
-
-
<img src="images/defocu.jpg"/>
-
-
</div>
CSS:
-
.image {
-
position: relative;
-
width: 100%; /* for IE 6 */
-
}
-
-
h2 {
-
position: absolute;
-
top: 250px;
-
left: 0;
-
width: 100%;
-
}
-
-
h2 span {
-
color:#FFF;
-
font: bold 24px/45px Helvetica, Sans-Serif;
-
letter-spacing: -1px;
-
background: rgb(0, 0, 0); /* fallback color */
-
background: rgba(0, 0, 0, 0.7);
-
padding: 10px;
-
}
Smashingmagazine sitesinde rasladığım, sıradanın biraz dışındaki 404 hata sayfaları derlemesini gördükten sonra, bende kendi blogumun ilgili sayfasını yenilemeye karar verdim.
Biraz düşündükten sonra, bu sayfada ziyaretçileri karşılayacak birinin olması gerektiği fikrine vardım. Sonuç aşağıda.
Bir süredir, ziyaret ettiğim Tutsplus bir eğitim ağı. Bizdeki Pilli'yi andıran yapısıyla, bünyesindeki sitelerde Web Programlama (PHP, CSS, JQuery vb.) , Illustrator, Flash, Flex-ActionScript, Adobe After Effect, Ses gibi konularda gerçekten hoş eğitim dökümanları sunuyor.
Tutsplus'da her konuya ait farklı bir site olması, size bu büyük network'te kaybolmadan gezinme imkanı veriyor. Sitelerde ilgili konularda çeşitli makalelere ulaşabileceğiniz gibi makalelere iliştirilmiş örnek kodlara ve bir çok eğitim videosuna da ulaşacaksınız, bilginize...
Web Geliştiricileri İçin
Flash, Flex-ActionScript Meraklıları
Illustrator Dersleri
Tüm kanalların toplandığı sayfaya ulaşmak için tıklayın...
Daha önce "Web Siteleri İçin Kullanışlılık Testi" başlıklı yazımda kullanışlılık testlerinin ne olduğu hakkında bir bilgilendirme yapmıştım. Bugünse bu testleri yapmak için gerekli araç gereçten bahsedeceğim.
Büyük bir firmaysanız ve web siteniz sizin için önemliyse, bu testleri yaptırmak için dışarıdan bir firma veya kişiyle anlaşarak binlerce TL harcamanıza gerek yok esasında,
- 1 Kamera
- 1 Monitör
- 1 Mikrofon
- Dışarının sesinden izole edilmiş, sakin 1 veya 2 oda
- 1 Kullanışlılık Testi
- 1 Bilgisayar (Sitenizi ziyaret edebilmenize imkan sağlayan)
- 3-4 tane, sitenizi kullanma potansiyeli olan sıradan insan
- ve bu 3-4 kişiye işi ciddiye almaları amacıyla ödenecek bir miktar para (Adam başı 100-150 TL normal gibi)
kullanışlık testinizi yapmanız için yeterli. Şimdi bu ekipmanla neler yapmanız gerekiyor, kısaca anlatalım.
Yukarıda sözünü ettiğimiz 2 odadan birinde, sitemizi ziyaret edecek 3-4 kişiye sırasıyla kullanışlılık testindeki soruları yönelteceğiz. Tabi bu soruları denekler bilgisayar başında sitemizi ziyaret ederken cevaplayacaklar. Sorulara verilen cevapları ve ziyaretçilerin davranışlarını mikrofon ve kamera ile kayıt altına alacağız. Aynı anda diğer bir odayada, sitenin tasarımıyla ilgilenen ekibi yerleştirebilir ve ziyaretçilerin verdikleri tepkileri bir monitör vasıtasıyla onlara canlı olarak izletebiliriz. Böylece ekip sitedeki eksiklikleri gözlemleyip yorumlayabilirler.
ÖNEMLİ NOT: Kullanışlılık testine tabi tuttuğunuz insanlara, daha sonrasında yapılan kayıttan hak iddaa etmeyeceklerine dair bir yazılı belge imzalatmayı unutmayınız.
Amatörler için,
Eğer bu kadar ekipman sizi zorluyorsa, Camtasia veya Captivate (Masaüstü kayıt programları) gibi bir programla, teste tabi tuttuğunuz kişilerin davranışlarını kayıt altına alabilir. Ve daha sonrasında verilen tepkilere göre sitenizde gerekli ayarlamaları yapabilirsiniz.
Geriye örnek bir kullanışlılık testinde ne tip sorular olur, bunu öğrenmeye geldi. Bunuda önümüzdeki günlerde bir yazıyla anlatırız umarım.
Nedir?
Eskiden insanlar estetiğe önem vermezlerdi, çünkü daha önemli ihtiyaçları vardı. Sonra standartlar yükseldi ve estetik de insanlar için önemli bir ihtiyaç haline geldi. Sonraları estetiğin tek başına yeterli olmadığı farkedildi, bir obje estetik olduğu kadar, kullanışlı da olmalıydı. Ve sonunda o da oldu.
Bu süreç web dünyasında da aynı şekilde ilerledi.
- İlk önceleri web sitelerinin sorunsuz çalışması ziyaretçiler ve site sahipleri için yeterliydi.
- Sonrasında web sitelerini daha hoş göstermek için web tasarımcılarına gerek duyuldu.
- Günümüzdeyse, bir web sitesi sorunsuz bir şekilde çalışmalı, hoş bir tasarıma sahip olmalı ve ziyaretçi siteyi kullanırken hiç ama hiç zorlanmamalı.
İşte bu son söylediğimiz "ziyaretçi siteyi kullanırken hiç ama hiç zorlanmamalı" cümlesi sitenin "Kullanışlılık" düzeyiyle ilgili.
Web sitenizi ziyaret eden kişi, sitenizi kullanamıyorsa, web sitenizin ne kadar harika bir tasarım ve yazılıma sahip olduğunun bir anlamı yok. Bu nedenle web sitelerinizi tasarlarken, ziyaretçilerinizin düşüncelerine önem vermelisiniz.
Ziyaretçilerinizin düşüncelerine ulaşmanın en kolay yoluysa "Kullanışlılık Testleri"...
Bu testlerde 3-4 tane sıradan insandan sitenizi kullanmalarını isteyeceksiniz ve onların yaptıklarını gözlemleyerek, sorunlarınıza çözüm üreteceksiniz.
Bunu en iyi yapan web sitelerinden biri Amazon, zaten daha önce de "Amazon, Kullanıcı Dostu Sitelere Örnek" başlıklı bir yazımla bundan bahsetmiştim.
Sanırım hepinizin aklında "Kullanışlılık Testleri" hakkında bir iki şey oluşmuştur. Bu konu hakkında daha detaylı yazılar yazmaya çalışacağım. Beni izlemeye devam edin.
Sonraki muhtemel yazılar,
- Bir kullanışlılık testi yapabilmek için neler gerekli?
- Örnek bir kullanışlılık testi
Kaynak: Kullanışlı Web Siteleri Yaratma (Steve Krug)
İletişim için 
