bildirgec.org

usability hakkında tüm yazılar

S60 Usability ve UI

Murat Kisakurek | 07 February 2011 16:23

s60 mobil cihazlar için 3 çeşit kullacı deneyimi standardı olduğunu söyleyebiliriz;

keypad tabanlı cihazlar.
numeric keypad tabanlı cihazlar(nokia 6120)
qwerty keypad tabanlı cihazlar
pda bar style keypad tabanlı cihazlar(nokia e71)
slide-out style keypad tabanlı cihazlar(nokia n95)

keypad ve dokunmatik tabanlı cihazlar.(nokia n97)
dokunmatik tabanlı cihazlar.
resistive(basınca duyarlı) tabanlı cihazlar(nokia 5800)
capacitive(elektriğe duyarlı) tabanlı cihazlar(nokia n8)

Bu makalede bütün s60 cihazlardaki kullanılan s60 kullanışlılığına odaklanmak istiyorum. s60 cihazlar için kullanışlılığı artıracak önemli bir çok madde vardır;

1- s60 cihazlar için standart pencere;

aşağıdaki figur bir uygulamada kullanılan standart penceredir.

Web Sitenizi Yayımlamadan Önce Yapmanız Gereken 15 Önemli Kontrol

pinkfloyd | 10 April 2009 09:45

Web sitenizin tasarımı hazır, içerik yönetim sistemi muhteşem çalışıyor, içerik siteye eklendi ve müşteriniz son derece memnun. Artık sitenizi yayımlamanın vakti geldi. Yoksa gelmedi mi? Bir web sitesini yayımlarken genellikle onu yayımlamak için duyduğunuz sabırsızlık nedeniyle birkaç önemli noktayı atlarsınız. Bu yüzden sitenizi dünyaya duyurmadan önce yapılması gerekenleri içeren bir kontrol listesi bulundurmanız ve onu her yeni web sitesini yayımlamadan önce kontrol etmeniz, sitenizin geleceği ve kalitesi açısından önemlidir.

Bu makalede, bir websitesi resmiyete kavuşmadan önce kontrol edilmesi gerekenlerin bir listesini bulacaksınız. Makale içerisinde genellikle unutulan küçük ayrıntılar yer alıyor ve bunlar zamanında yapıldığı taktirde hem sizin daha az zamanınızı alacaktır, hem de genel olarak kullanıcı deneyimine olumlu katkıları olacaktır.

1. Favicon

Favicon bir web sitesini sekme ya da pencre üzerinde tanıtmaya yardımcı olur. Faviconlar genellikle bir web sitesinin yer imlerine eklenmesi durumunda da adres ile birlikte istemci üzerine kaydedilir. Ancak bundan emin olmak için aşağıdaki kodu sitenizin head etiketleri arasına yerleştirmeniz gerekir.

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Eğer iPhone için bir favicon kaydetmek istiyorsanız, o zaman aşağıdaki kodu da eklemelisiniz.

<link rel="apple-touch-icon" type="image/x-icon" href="/favicon.ico" />

Web Tasarımcıları ve Geliştiricileri İçin 160 Rss Adres

filezza | 07 April 2009 21:35

160+ RSS Feeds For Web-Designers And Developers
160+ RSS Feeds For Web-Designers And Developers

Web tasarım konusunda kendinizi geliştirmek veya yeniliklerden haberdar olmak istiyorsanız. Web tasarım, grafik tasarım, css, html gibi ana konuların işlendiği, aşağıda listesi bulunan 160 rss besleme adresini takip edebilirsiniz.

Blog Theme Machine – Bloglar İçin Özel Tasarımlar

Blog Theme Machine

465 Berea Street – Web Standartları, Erişilebilirlik ve Kullanışlılık Makale ve Haberleri

465 Berea Street

CSS Newbie – Web Geliştirme Rehberleri, İpuçları ve Teknikleri

CSS Newbie

İyi Bir Kullanıcı Arayüz Tasarımı İçin 12 Kullanışlı Teknik

pinkfloyd | 27 March 2009 09:40

Bir süre önce, modern web uygulamalarındaki trendlere yönelik yazı dizisinin ilk bölümü olan 10 Kullanışlı Web Uygulama Arayüzü Tekniği yazısını yayımlamıştım. Diğer şeylerin yanısıra bu yazıda gömülü video blogları, özelleştirilmiş kontrol ve içeriğe göre değişen gezinti elementlerine dair bazı ipuçlarına yer vermiştim. Yazıda ayrıcı basılı düğmelerin durumu, modal pencerelerin çevresinde gölge kullanmak ve giriş sayfası üzerinden kayıt sayfasına bağlantı verilmesi gerekliliğinden de bahsetmiştik.

Bu yazı ise incelemenin ikinci bölümünü oluşturmaktadır: Web Uygulamalarında İyi Kullanıcı Arayüz Tasarımı İçin 12 Kullanışlı Teknik. Yazımızda ayrıca bu tekniklerin doğru bir şekilde kullanılması için uygulamalara nasıl entegre edilmesi gerektiğini de bulacaksınız. Eğer sizin de bu konuda paylaşmak istediğiniz görüşleriniz ve önerileriniz varsa yorumlarınızda belirtmekten çekinmeyin.

1. Önemli Değişiklikleri Belirtin

İyi kullanıcı arayüzü tasarımı için en önemli elementlerden birisi de sistem durumunun görünürlüğüdür. Kullanıcılar sitenin görünmeyen kısmında olan şeylerden ve eylemlerinin oluşturacağı sonuçlardan derhal haberdar olabilmelidirler. Daha sofistike bir sistem görünürlüğünü uygulamalarda kullanabilmek için web siteleri günümüzde, elbette, AJAX kullanmaktadırlar. Bildiğiniz üzere AJAX sayesinde kullanıcılar, web sayfalarının tamamını yeniden yüklemek zorunda kalmadan sadece belirli bölümlerinde değişiklikler yapabilmektedirler. AJAX, web uygulamalarının etkileşimliliğini ve yanıt verme yeteneklerini masaüstü uygulamaları ile neredeyse aynı seviyeye getirebilmektedir.

Yammer
Yammer, besleme üzerindeki yüm mesajlara bir değil üç adet efekt uygulamaktadır: Yavaşça belirme, aşağı kayma ve öne çıkarma.

Bu dinamik oluşumun anlamı, bir düğmeye tıkladığınızda sayfa yeniden yüklenmemesi ancak sayfada bir şeyin olmasıdır. Pek çok web sitesi halen AJAX’ı etkin bir şekilde kullanmamaktadır, bu sayede bazı kullanıcılar halen bir düğmeye tıkladıktan sonra bir şeyin olup olmayacağını ya da düğmelerin doğru şekilde tıklanıp tıklanmadığını bilememektedirler. Bu sorunun önüne geçebilmek için kullanıcı etkileşimlerinin her birine görsel geribildirim uygulamalısınız.

Buraya Tıklamayın! – Bağlantıları Doğru Kullanmak

pinkfloyd | 26 February 2009 16:38

Eğer bu makaleyi okumak istiyorsanız, buraya tıklayın

Aslında bu durum çok önemli bir kullanılabilirlik problemidir. Hiçbir anlam ifade etmeyen bağlantılar (link). Web sitenizde bağlantıları nasıl kullanıyorsunuz?

Ben, web sitelerindeki yazıların mümkün olduğu kadar kitaba benzemesi gerektiği fikrini sonuna kadar destekleyenlerdenim. “Buraya tıklayın” ya da “Yazının devamı” gibi bağlantılar, okunulabilirliği engellerler. Eğer bağlantılarınız yeteri kadar açıklayıcı ise, kullanıcıların ona tıklamaları gerektiği konusunda bilgilendirilmesi gerekmez.

Uzun bir yazı yazıp ardından “daha fazlası için buraya tıklayın” cümlesini yazının sonuna eklemek kolaydır. Her ne kadar bundan büyük bir suçluluk duysam da bu adım genellikle gereksizdir. Halihazırda uzun bir yazınız olduğuna göre bağlantı için ayrı bir cümle yazmaktansa neden o metni kullanmayasınız?

3 Sık Kullanılan Yaklaşım

Aşağıdaki üç farklı cümle kullanımını ve (etkin olmayan) bağlantıları inceleyin.

  1. Otomobil fuarında, yeni bir arabanın duyurusu yapıldı. Daha fazlası için buraya tıklayın.
  2. Otomobil fuarında, yeni bir arabanın duyurusu yapıldı (www.kaynakurlburaya).
  3. Otomobil fuarında, yeni bir arabanın duyurusu yapıldı.

Yukarıdaki cümlelerden hangisini bir kitapta görme olasılığınız yüksektir? Birinci ve ikinci öğeler çevrimiçi yazılarda sık kullanılan yöntemlerdir ve kolay anlaşılırlar, ancak diğer başka hiçbir yerde bu tip bağlantılar karşınıza çıkmaz.

facebook connect’in kullanıldığı 10 mükemmel örnek

pinkfloyd | 13 February 2009 09:40

Facebook Connect * çılgınlığı İnternet’i yıktı geçti. Sadece tek bir düğmeyi kullanarak sitenize kullanıcıları üye edebilmek varken neden sitenize özgü bir kayıt formu oluşturasınız? İşte Facebook Connect’in gücü de burada yatıyor. Bu servis sayesinde çeşitli web siteleri, yazılımlar ve hatta mobil cihazlar bile Facebook ile bütünleşerek iki yönlü olarak bilgi paylaşımında bulunabilirler.

Geçtiğimiz birkaç ay özellikle yazılım geliştiricileri için oldukça yoğun bir aydı zira geliştiricilerin pek çoğu, Facebook Connect servisini web sitelerine entegre etmeye çalıştılar. Ancak bunlarda bazıları diğerlerinden birkaç adım öne çıktı. İşte biz de bu yazımızda Facebook Connect servisini sistemlerine başarılı bir şekilde entegre eden sitelerin bir listesini oluşturmaya çalıştık.

1. Joost

Facebook Connect’i Nasıl Kullanıyor?: Joost bu servisi ilk kullananlardan biriydi ve bildirimleri, güncellemeleri, yorumları ve en sevilenler listelerini Facebook’a aktarmayı başardılar. Elbette Joost’a doğrudan Facebook hesabınızı kullanarak giriş yapabileceğinizi de söylemeden geçmeyelim.

Neden Başarılı?: Joost gerçekten Facebook ile etkileşimin nasıl verimli olabileceğine dair en güzel örnek, sorunsuz girişler, Facebook üzerinden web sitenizi güncelleyebilme ve arkadaşlarınızın göreceği haber besleme öğeleri bunlardan sadece birkaçı.

En İyi 10 Web Sitesi İçin Görsel Performans Optimizasyonu

pinkfloyd | 12 February 2009 09:26

Sizin de bildiğiniz üzere optimizasyon; Google, Yahoo! ve Live gibi popüler web siteleri için bile çok önemlidir. Bu makalede sadece basit araçlar kullanılarak bu çok ziyaret edilen web sitelerinin yanıt sürelerini nasıl daha çok kısaltabileceğimize ve daha az veri trafiğine yol açabileceklerini analiz etmeye çalışacağız. Bu basit adımlar herkes tarafından satın alınabilecek ücretli ve ücretsiz bazı araçlar kullanılarak yapılabilir. Bu testimizde inceleyeceğimiz web siteleri: Google, Yahoo!, MSN, Live, Wikipedia, Amazon, Facebook ve MySpace.

Testimizi Smushit uygulamasını kullanarak test edeceğiz ve bu sitelerin ana sayfalarından neler kazanabileceğimize bakacağız. Bu araç sitenizde kullandığınız ve dosya boyutu açısından optimize edilebilecek ancak kalitesinden ödün vermeyecek görselleri bulabilmenizi sağlıyor. Bunun yanısıra Yahoo!’nun performans ekibinin yaptığı bir analize göre Yahoo!’da ziyaret edilen sayfaların %20’si boş cache kullanılarak yapılıyor. Sayfa gösterim sayısından daha az olan ziyaret sayıları haricinde biz bu testimizde %5 kullanacağız ve ardından görsellerini optimize ederek ne kadar veri kazanabileceğimize bakacağız.

10 Kullanışlı Web Uygulaması Arayüzü Tekniği

pinkfloyd | 19 January 2009 19:02

Gün geçtikçe daha çok web uygulaması Web’e geçiş yapıyor. Platform sorunları ve kurulum gereksinimleri olmadan, bir hizmet olarak yazılım (software as a service) modeli oldukça çekici görünüyor. Web uygulama arabirimi tasarımı, özünde, web tasarımı iken, aslında daha çok üzerine tasarlandığı uygulamanın özelliklerine odaklanır. Masaüstü yazılımları ile yarışabilmek için web uygulamaları basit, yenilikçi ve karşılık veren kullanıcı arabirimleri sunabilmeli ve bunlar da, onları kullanan kullanıcıların ulaşmak istediklerine en kısa yoldan ve onları yormadan ulaşabilmelerine aracılık edebilmelidirler.

Geçmişte web uygulamalarını olması gerektiği kadar dikkate almıyorduk ancak şimdi, web uygulamalarını daha güzel ve daha kullanıcı dostu kılacak bazı tasarım çözümleri ve kullanışlı tekniklere bakmanın zamanı geldi. Bu makale, modern web uygulamalarında kullanışlı tasarım çözümleri ve tasarım öğelerine yönelik yaptığımız derinlemesine araştırmanın ilk bölümünü oluşturmaktadır. Yazının devamında, pek çok başarılı web uygulamasında kullanılan 10 kullanışlı arabirim tasarlama tekniklerini ve en iyi deneyim örneklerini bulacaksınız.

Lütfen yazıyı okuduktan sonra siz de kendinize özgü fikirlerinizi, yaklaşımlarınızı ve kodlama çözümlerinizi bizlerle paylaşmaktan çekinmeyin. Yazının ikinci bölümü de pek yakında yayınlanacaktır.

1. İsteğe Bağlı Arayüz Elementleri
Sadelik, kullanıcı arabirim tasarımında önemlidir. Ekranda ne kadar fazla kontrol elementi gösterirseniz, kullanıcılarınız onları anlamak için o kadar fazla zaman geçireceklerdir. Daha fazla seçenek olduğunda, kullanıcıların kullanabileceği seçenekler onlara daha belirgin gelecek ve onları taramaları daha kolay olacaktır. Bir arayüzü sadeleştirmek burada yazıldığı kadar kolay bir iş değildir, özellikle uygulamanızın özelliklerinden kısmak istemiyorsanız.

Kullanıcı Geri bildirimleri ile Sitenizin Kullanılırlığını Arttırmak

pinkfloyd | 19 January 2009 14:15

Ürününüzün ya da web sitenizin kullanılırlığını arttırmak yapılabilecek en iyi şeylerden birisi de kullanıcılardan geri bildirimler almaktır. Bu yazıda kullanıcılarınızın web sitenizde ne aradıklarını kaçırmadığınızdan emin olmanız için neler yapmanız gerektiğini anlatmaya çalışacağım. Bazen kullanıcılar, sitenize yorum bırakırlar ya da iletişim formları ile sizinle iletişim kurarlar, ancak kullanıcılarınızdan özellikle size geri bildirimde bulunmalarını isterseniz, o zaman daha doyurucu yanıtlar alacaksınızdır.

Körlüğünüzü giderin
Eğer bir web siteniz var ise ya da başka siteler için tasarımlar yapıyorsanız, o zaman tasarım körlüğü konseptinden haberdarsınızdır. Eğer bir tasarıma çok uzun bir süre bakar ve üzerinde çalışırsaız, bir süre sonra o tasarıma karşı tepkisiz hale gelirsiniz. Sitenizin farklı alanlarındaki kusurları gidermek için üçüncü bir göze ihtiyacınız olacaktır, o zaman neden aslında sitenizi kullanan kullanıcılardan yardım istemeyin?

Kendiniz yapın
Kullanıcılarınızdan geri bildirim almak için üçüncü parti bir servisi kullanmadan yapılabilecekleriniz vardır.

Video Klip Ekleyin
Eğer bir web kameranız varsa, kısa bir klip ekleyerek ziyaretçilerinize bir iki soru sorun. Videoyu kaydettiğiniz zaman onu yan çubuğunuza ya da sitenizin en çok ziyaret edilen sayfalarından birine yerleştirin, örneğin sitenizin ana sayfası gibi.Videonuz;

  • Ziyaretçilerinize sitenizi ziyaret ettikleri için teşekkür edebilir,
  • Onların geri bildirimlerine ihtiyacınız olduğunu belirtebilir ve buna yönelik bir iki soru içerebilir,
  • Siteniz üzerinden kullanıcıların nasıl geri bildirim gönderebileceklerini açıklayabilir, ve buna ait bağlantıyı gönderim sayfasının altına yerleştirebilirsiniz.

Web Tasarımcıları İçin 10 Kullanılırlık İpucu

admin | 05 January 2009 14:13

Basitçe, kullanılırlık, ziyaretçilerinizin web siteniz üzerinde ihtiyacı oldukları bilgiye ihtiyacı oldukları zamanda ulaşabilmelerini kolaylaştırır.

Kullanılırlık üzerine web şirketlerinin ortak yanılgısı, onun pahalı olduğu yönündedir. Evet, piyasada bazı uluslararası şirketler bulunuyor ve bu şirketler on binlerce dolar parayı kullanılırlık üzerine araştırma ve test yapılması için harcayabiliyorlar. Fakat küçük ve orta ölçekli işletmeler için kullanılırlık, alanında uzmanlık ve test için pahalı ekipman gerektirmeden ulaşılabilir.

Web tasarımcılarının günümüzde işi daha da kolay. Sadece bu ve bunun gibi makaleleri okuyarak bazı temel kuralları öğrenebilir ve onları kendi web sitelerinde uygulayabilirler.

1. Etiket Satırı (Tagline) Kullanın

Etiket satırı, şirketlerin ya da web sitelerinin filozofisini ya da görevini açıklayan söz öbekleridir. Web sitesinin ana sayfasındaki en dikkat çeken element olmalıdır ve web sitesini tek cümlede özetleyebilmelidir.

İstatistikler, bir web sitesinin, ziyaretçinin ilgisini çekebilmesi ve onu sitede tutabilmesi için 8 saniyesi olduğunu gösteriyor. Belirgin bir etiket satırı olmadan ziyaretçilerinizi sitenizde uzun süre tutmak ve onların alt sayfaları gezmesine önayak olmak oldukça zordur.