Posts tagged ‘web’

Televidyon.com’un yeni arayüzüyle ilgili bir Not

April 1st, 2010

Televidyon.com sevdiğim sitelerden biri. İçeriklerini ve gösterdikleri özeni takdir ettiğim bir çalışma. Yeni tasarımlarıyla henüz karşılaştım. İlk dikkatimi çeken daha önceden de sitede en çok kullandığım arayüz oldu : üst menü.

Bu türden menüler, web işinde arayüzlerin ayrılmaz parçalarıdır. İçeriğe çok yakın yerlerde,  görülmenin yüksek olduğu bölümlerde, bütün içeriği sınıflandıran aynı zamanda onlara erişim sağlama iddiası olan işlevler sunmakla yükümlüdürler.

Ammaa…İçeriklerin ya da işlevlerin çok farklı kanallarda gruplandığı sitelerde, bu ana menüler dallanmalar içermek zorundadır. Bu dallanmalar, kullanıcının istediği içeriğe veya işleve gitmesini kolaylaştırmak için çoğunlukla hiyerarşik olarak sunulurlar. Önemli olanın hızlı erişim işlevi olmasına rağmen, genelde bu öğeler içerik ve işlev kataloğunun hızlıca gözden geçirilebilmesi işini de üstlenirler.

Ve birbiriyle kimi durumlarda çelişen görevler yüklenen her fonksiyonel yapı gibi

sıkıntılara yok açarlar.

Bu sıkıntılardan birincisi arayüzden beklenen görevlerin kimi zamanlarda çelişmesinden kaynaklanır. Bu türden kırılgan bir menü; içerik ve işlev bölümlerinin okunulup anlaşılmasını sağlayacak kadar uzun görüntülenmelidir. Fakat hızlı gezinmeye imkan verecek şekilde de tutarlı ve çabuk olmaları gerekir.

Televidyon.com’daki gibi bir menü, kullanıcı fare işaretçisini üzerinde tuttuğu sürece altındaki dallanmaları gösterir. Üstelik kullanıcı birbiriyle aynı seviyedeki dallanmalar arasında gezinebilir.

Bruce Tognazzini‘nin şöyle yazmış :

Hiyerarşik menülerin tıkandığı nokta nedir ve bu darboğazı aşmak için Macintosh’ta, Windows’ta olmayan hangi teknik kullanılmıştır? Uygulanabilecek başka teknikler düşünebiliyor musunuz?

Buradaki sorun birinci ve ikinci seviye menüler arasındaki geçiştir. Windows’ta kullanıcı açılan menüye geçerken aşağıdaki menüye kaymamaya dikkat etmek zorundadır.

Mac hiyerarşik menü algoritmasını tanımlarken, V şeklinde bir tampon bölgeye gerek duymuştum. Öyle ki, kullanıcı açılan menüye yaklaştıkça, istemediği bir menüye atlama korkusu yaşamadan, gittikçe artan bir hata payı ile hareket edebilsin. Ortalamada birkaç piksel fazla gitse bile menü yine de açık kalsın. Apple hiyerarşik menüleri, yine de tek seviyeli menülerden daha az verimlidir, ama en azından ortalama bir video oyunundan daha az karışıktır.

Bunun yerine Windows aşağıya geçmeden önce, hiyerarşik meüyü yarım saniye kadar açık bırakır. Böylece, işletim sisteminin birçok başka bölümünde yaptığı gibi, Mac’i anlamadan taklit etmeye çalışır. Neden ve sonuç ilişkisini 1/2 saniye ile birbirinden koparır, ki bu süre insan-bilgisayar etkileşiminde uzun, çok uzun bir zaman sayılır. O yarım saniyede hiyerarşik menüye ulaştıysanız, Windows davranışı Mac’inkinden ayırt edilemez. Aksi halde, çok az kullanıcının çözebileceği anlaşılmaz bir davranış olur.[1]

Televidyon.com’da kullanılan menüde de benzer bir durum söz konusu.

Kullanıcının Mizah > AlkışlarlaYaşıyorum menüsünden, Sektör > Savunma Sanatı menüsüne gitmek istiyorum. Aslında beklediğim yönelim şu şekilde :

Turing Test

Fakat menüden çapraz yada kavisli şekilde bir hareketle çıktığımda bütün hiyerarşik menü kayboluyor. Tekrar kök menüye imlecle gidip, kök kısmından açıp yatay bir imleç hareketiyle baştan başlamam gerek. Yada aşağıdaki şekildeki gibi, önce yukarı kök menüye kadar hareket edip sonra yatay sonrada dikey fakat aşağı yönlü bir rota izlemeliyim.

Turing Test

Bu şekilde davranan menülerin, tekrarlı harcanan zihinsel efor yanında bir başka dezavantajı daha var: ergonomi. Konu insan yapısına dayanıyor. Fareyi elimizle (genelde – ayağımla kullandığım olmadı değil- :) kullanıyoruz ve bileğimizi bir yere yaslayarak hareket ediyoruz. Buna “pivot hareket” deniyor. Bir noktanın etrafında hareket eden manasında. Doğru çizgiler çekmek yerine eğriler çizmeye daha yatkın bir anatomiye sahibiz. Fakat bu türden menülerin buna uygun davranmadığını çok sık görüyorum.

Bunu düzeltmek için bir çok çözüm bulunabilir sanırım. Bruce Tognazzini‘nin Apple’in ilk dönemlerinde Mac için arayüz tasarlarken kullandığı yöntem düşünülebilir.[1] Günümüz web teknolojilerinde html, javascript, css  vb ile uygulamak çok zor olmaz herhalde. jQuery gibi nefis arayüzler varken üstelik.

Bu arada Bruce Tognazzi’ye referans verdim sürekli: kendisi bu konuda epey kariyerli bir abi.  Kendisi Apple’da Mac için arayüz tasarlamış ve 14 yıl çalışmış, sonra Sun Microsystem’de görev almış ,şimdi de  Norman Nielsen Group (ki bir tasarım, kullanılabilirlik ve test danışmanlığı firması) ortaklarından birisi.

—-

[1] http://www.asktog.com/columns/022DesignedToGiveFitts.html (6.soru)

Etiketler, kategoriler ve arayüzler II

March 16th, 2010


Etiket bulutlarını niye sevmiyorum ?

Özellikle web 2.0 uygulamalarında, veri sınıflandırması etiketler üzerinden yürütüldüğü için , kullanıcıya ilgili içerikleri görebilmesi için bir etiket listesi gösterilir. Bu etiket listesi muhtemelen tüm içerikler için tanımlanmış etiketlerin listesidir. Çoğu zaman bu listede etiketler, o sitenin verileri içindeki ağırlıklarına göre farklı görüntülenirler. Daha çok kullanılan etiket daha büyük, daha az kullanılan küçük gösterilir. Böylece kullanıcı ilk bakışta o sitenin hangi kavramlarla (daha doğrusu kelimelerle) ilişkin olduğunun ayırdına varabilir.

Bu ilk öğrenmeden sonra, kullanıcı bu listede herhangi bir etikete tıklayarak, içeriklerin o etikete göre filtrelendiği başka bir sayfaya gider genellikle.

Etiket bulutuna eleştiriler

Şimdi doğrudan bu arayüze eleştirilerimi sıralamak istiyorum. En temelde yatan eleştirim etiket listelerinin ve özelde etiket bulutlarının navigasyon (yönelim) açısından çeşitli sıkıntılar barındırdığı yönünde.

  • 1. Etiket bulutları hızlı görsel algılamayı sağlasa da, bir sonraki aşama için kısıtlayıcı oluyor. Büyük kelimelerin yanında nitelik olarak aynı sayılacak küçük kelimelerin algılanması güçleşiyor.
  • 2. Etiket listelerinin içinde aradığınız şeyi bulmak çoğu zaman mümkün değil, çünkü genelde sıralı olmaktansa rasgele ya da en son girilen etikete tarihine göre sıralanıyorlar. Bu da rasgele bir içeriğe navigasyon anlamına geliyor.
  • 3. Etikete tıklayıp bir sayfaya gittiniz diyelim. Çok az içerik sadece tek bir etiketle nitelenir. Bu yüzden o anda bulunduğunuz etiket , o içeriği çok az niteliyor olabilir.
  • 4. Bu tip etiket listeleri genellikle “tek tıklamayla” çalışır. Çoklu seçme şansınız olmadığı için o andaki etikete gidersiniz ve başka türlü bir filtreleme yapamazsınız. Hele ki tıkladığınız etiket bir haber sitesindeki “Haber” etiketiyse!
javascript ve asp.net ‘in ikisini birden içeren bir yazıya nasıl gideceksiniz?

Bu sakıncaları düşündükten sonra aklıma başka bir arayüz geldi. Temel olarak şunlar olmalıydı :

  • 1. Çoklu seçme özelliği
  • 2. Etiketlerin alfabetik ya da başka türden “mantıksal” sıralaması
  • 3. Seçim yapılıp içeriği getirme işlevi çağrıldığında, seçilenlerin etiketlerin vurgulanması

Aşağıdaki çalışmayı yaptım akabinde bu konuları çözümlemek için. Çalışan bir örneğine şuradan ulaşabilirsiniz  : Multi-check Tag DEMO

Bunun sadece bir örnekleme olduğunu hatırlamak lazım. Etiketler seçilir. Filter tuşuna basılır. Filtrelenen etiketler farklı bir stille görüntülenir. Etiket bulutu-listesi sistemine göre 1 adet daha fazla tıklama gerektirmesine rağmen, çoklu etiketle filtreleme işlevine izin vermesi nedeniyle bir çok durumda daha kullanışlı olduğunu düşünüyorum.

Yukarıdaki demo jquery (1.3.2) ile yazdığım basit bir script ve css ile çalışıyor.  Buradan indirebilirsiniz.

Etiketler, kategoriler ve arayüzler

March 16th, 2010

“Etiket” dediğimiz şey, son yıllarda bilgi sınıflandırması alanında internet ile birlikte öne çıkan bir şey.

Wikipedia ‘da

In online computer systems terminology, a tag is a non-hierarchical keyword or term assigned to a piece of information…

olarak tanımlanıyor. Yani etiket; hiyerarşik olmayan ve bir bilgi parçasını nitelemek üzere atanmış kelime ya da kelime öbeği.

Bu tanımı matematiksel olarak formelize edeyim :


0.0 Pozitif doğal sayılar kümesi N+ ile tanımlansın.

0.1 d bir veri parçacığı , D verilerin evrensel kümesi olsun. d elemanıdır D.

1. W evrensel kümesi dünyadaki bütün kelimelerin elemanı olduğu küme olsun.

2. w elemanıdır W.

3. $W , W ve bütün alt kümelerinden oluşan kümeyi kapsayan evrensel küme olsun.

4. $w elemanıdır $W.

5. $w = {w1 ve w2 ..... ve wn} | n elemanıdır N+ olarak seçilebilir.

6. Cebirsel işlem tanımına uygun biçimde tanımlanan ve kümede hiyerarşi (büyüklük,küçüklük,bağlılık,kapsamalık vs tüm operatörler için); her $w elemanıdır $W için, $w[k] = $w[n] | n ve k elemanıdır N+.

7. #f fonksiyonu, $w etiketinin nitelediği bilgiyi getiren fonksiyon olsun:
#f($w[1],$w[2],...,$w[n]) = #f($w[1]) A #f($w[2]) A .... #f($w[n])

8. #f fonksiyonu :
#f($W) = d[1],d[2],...,d[n] | n elemanıdır N+ olacak şekilde bir veri kümesi üzerinde tanımlıdır.

9. #f ve #g fonksiyonu için :
#f($w[k]) = S1{d[1],d[2],...,d[x] };
ve
#f($w[n]) = S2{d[1],d[2],...,d[y] } iken n<>k olmak koşulu ile S1 = S2 => #f($w[k])=#f($w[n]) denir.

Şimdi bu temeller üzerinde devam edebiliriz

Etiket(ler) ilişkide bulundukları bilgi parçasını tanımlayan “metadata“lardır. Etiket kullanımının temel amacı; nitelenmek istenen bilgi parçacığıyla etiket kelimesi arasında özgür bir ilişki kurmaktır. Burada verinin, “metadata”sı belirlenirken taxonomy yerine folksonomy geçmektedir.

Bilgi parçacığıyla karşılaşan ya da bilgiyi üreten her birey için, veriye bir veya birden çok “metadata” ilişkilendirme imkanı sağlanmasıyla birlikte, kategorizasyonun rijid, katı yapısı ve içerme / içinde olma mantığı yerine etiketlemenin ilişkilendirme, tanımlama mantığı, kategorizasyonlu sistemlerin gerektirdiği zihinsel eforu azaltmaktadır.

Bir başka avantajı ise etiketlemenin, herhangi bir veriye sürekli olarak uygulanabileceğidir. Böylelikle verinin sınıflandırması işinin de sürekli güncellenmesi sağlanmış olur. Kategorizasyon güncellemeleri ise ancak fasılalar halinde önceden planlanarak yapılabilir.

Veri sınıflandırmasını, bir arama problemi olarak düşünürsek

Kategorizasyon (hiyerarşik sınıflandırma), en genel ve yaygın yöntemiyle sonuca ulaşmak için sadece bir gidiş yolu sunar. Etiketlemede ise :

#f($w[k]) = #f($w[n]) olan iki etiket bulabiliriz. Yani iki farklı etiket aynı bilgi parçacığına gidiyor olabilir. Buna “synonym” denir. Öte yandan #f($w[k]) birden fazla veriyi de gösteriyor olabilir. Buna da “homonym” denir.

Modern web veri sistemlerinde (örneğin yazdığım bu blogda) , bu iki durum da gerçekleşir. Örneğin “web 2.0″ etiketi altında hem birden fazla yazı vardır , hem de web 2.0 yazılara ulaşan birden fazla etiket vardır.

$w1 = "web 2.0"
ve
$w2 = "web" => #f($w1) < #f($w2)
olabilir örneğin. Ama etiketlemenin hiyerarşik olmayan doğasından ötürü,
#f($w1) elemanları #f($w2) in elemanlarını içeriyor da olabilir.

Bu tamamen etiketlenen veri yığınının özelliklerine bağlıdır ve etiket semantik bir içerik taşımadığı için bilgi sınıflandırılmadan önce öngörülemez.

Ki burada etiketlemenin dezavantajlarına geliyoruz

Etiketlerin semantik bir özellik taşımaması nedeniyle veri (D) ve onun alt kümeleri ($D) hakkında sınıflandırma yapmamız mümkün değildir. Sadece $D ‘lerden yola çıkarak D hakkında fikir sahibi olabiliriz.

Yanlış yazımlar da işin ayrı ve uygulamadaki bir boyutu. Aslında “folksonomy” kavramı içinde yanlış yazım olmaması , zaman içinde güncellenen bir “metadata” nın içinde hataların minimize olması beklenirken, uygulamada genelde bu olmaz. Çünkü verilerin etiketleri, metadatayı oluşturan toplulukça sürekli güncellenmez.

Bu karakteristikleri aslında etiketlemeyi aynı zamanda güçlü kılan özellikler

Bu yüzden, gittikçe kullanımı artan (özellikle web 2.0 trendiyle birlikte) , “collobrative tagging” ile topluluğun hep birlikte bir veriyi anlamlı kılması ile uygulama alanlarını pekiştiren bir yöntem etiketleme. Özellikle de 2012 yılında dijital veri miktarının 2008 e göre 5 kat artış olacağını düşünürsek çok ta önemli. Çünkü önümüzdeki yılların işi bu: veriyle uğraşmak, onu sınıflandırmak vesaire.

Web 2.0 uygulamalarla birlikte, bir çok arayüz çıktı tabi web için. Bu altyapıyı edindikten sonra yazının II. bölümünde o işe bakacağım. Bazı durumlarda yeterli gelmeyen şeyler var gördüğüm, onları paylaşmak istiyorum.