http://www.bildirgec.org/ tr-tr 40 bildirgec.org - takethislife - beğendikleri takethislife <p>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ı <strong>basit, yenilikçi ve karşılık veren kullanıcı arabirimleri</strong> 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.</p> <p>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 <strong>10 kullanışlı arabirim tasarlama tekniklerini ve en iyi deneyim örneklerini</strong> bulacaksınız.</p> <p>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.</p> <p><strong>1. İsteğe Bağlı Arayüz Elementleri</strong><br>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.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-01.png' alt="\"\"" border="0"><br></div> <p><!-- buradan kes --></p> <p><i><a href="http://www.kontain.com/">Kontain</a>'in arama kutusuna tıkladığınızda benzer bir açılır menü belirmektedir. Eğer arama kriterlerinizi daraltmak istiyorsanız, açılan bu menüyü kullanarak ilgilendiğiniz içerik kategorilerini seçebilirsiniz. Bu seçenekleri arama kutusu ile bütünleştirmek, arama kutusunu basitleştirmektedir.</i></p> <p>İşleri sadeleştirmenin bir yolu, <strong>gelişmiş özellikleri gizlemek ya da perdelemektir</strong>. Arayüzünüzde en çok kullanılan elementlerin hangileri olduğunu bulun ve geri kalanını ayıklayın gitsin. Bunu açılır menüler ve kontroller ile yapmanız mümkündür ki bu her iki yöntem de masaüstü uygulamalarında oldukça popülerdir. Örneğin, eğer arama kutunuz gelişmiş filtrelere sahipse, o zaman onları satırın sonunda özel bir açılır menünün ardına gizleyin. Eğer kullanıcıların bu filtrelere ihtiyacı varsa sadece birkaç fare tıklaması ile onları etkinleştirebilirler. Bunu söylemesine söylüyorum ama neyi gizleyip neyi gizlemeyeceğinize karar vermek kolay bir iş değildir ve her bir kontrolün ne kadar önemli olduğu ve ne kadar sık kullanıldığı ile doğrudan ilgilidir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-01-02.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.collabfinder.com/">CollabFinder</a>'ın arama bağlantısına tıkladığınızda başka bir sayfaya yönlendirilmezsiniz. Aksine, arama kutusu bir açılır menüyü kontrol ederek, sizin doğrudan bulunduğunuz sayfa üzerinden arama yapmanızı kolaylaştırır.</i></p> <p><strong>2. Özelleştirilmiş Kontroller</strong><br><strong>Durum için doğru arayüz kontrollerini seçmek</strong> önemlidir. Farklı durumlar farklı şekillerle kontrol edilebilir ve bazı kontroller kendileri için tasarlanan görevlerde diğerlerinden daha iyidirler.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-02-01.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.backpackit.com/">Backpack</a> hatırlatıcı tarihi için kullanılan kompakt bir takvim tarih ve zaman seçicisine sahiptir.</i></p> <p>Örneğin gün, ay ve yıl için ayrı ayrı açılır menüler kullanarak kullanıcıların seçmelerini sağlayabilirsiniz. Ancak açılır menüler çok verimli değildirler, özellikle seçmek istediğiniz tarihin üzerine doğrudan tıklayabilmenize olanak sağlayan takvim seçicileri ile kıyaslandığı zaman. Takvim seçicileri ayrıca sizin günleri, haftaları ve ayları (özellikle iş günlerini ve haftasonlarını) görebilmenize yardımcı olurlarken, sıradan açılır listelere kıyasla <strong>daha bilgilendirilmiş kararlar verebilmenizi</strong> sağlarlar.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-02-02.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.mybanktracker.com/">MyBankTracker</a>'ın yıllık gelir oranlarını hesaplamak için kullanılan bir hesaplayıcısı bulunmaktadır ve bu hesaplayıcı, kolay kullanımlı kayan kontrolleri kullanarak, farklı projeksiyonları kolayca deneyebilmenizi sağlamaktadır.</i></p> <p>Bir diğer güzel örnek ise kaydırma çubuklarıdır. Evet, numaraları her zaman el ile girmek mümkündür, ancak bazı özel durumlarda kaydırma çubukları ve buna bağlı kontrolörler çok daha iyi iş çıkarırlar. Bunlar sadece <strong>daha kolay kullanımlı</strong> olmakla kalmaz (sadece sürükle ve bırak), ayrıca seçiminizin izin verilen en düşük ve en büyük değerler arasında nereye denk düştüğünü görsel olarak algılamanıza da yardımcı olur.</p> <p><strong>3. Basılı düğmeleri iptal etmek</strong><br>Web uygulamalarının zorlandığı bir diğer problem de form gönderim işlemidir. Basit formlarla "Gönder" düğmesine iki ya da daha fazla kez çabucak basarsanız, form iki ya da üç kez gönderilebilir. Bu hiç şüphesiz bir problemdir, zira <strong>aynı form girdisinin benzer kopyalarını oluşturacaktır</strong>. Bu kopya girdilerin önüne geçmek zor bir işlem değildir, ancak pek çok web uygulamaları için kaçınılmaz bir işlemdir.</p> <p>Bu korumaya iki bağ bulunur: <strong>sunucu tarafı</strong> ve <strong>istemci tarafı</strong>. İşin sunucu tarafına burada değinmeyeceğiz zira bu kullandığınız programlama diline ve sizin altyapı mimarinize göre değişiklik gösterecektir. Her koşulda yapmanız gereken şey, verinin işlenişi sırasında gönderilen her ne ise onun halihazırda depolanan verinin bir kopyası olup olmadığını kontrol edecek bir mekanizmayı entegre etmek olmalıdır.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-03.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.yammer.com/">Yammer</a> "Güncelle" düğmesini yeni bir mesaj gönderildiğinde otomatik olarak etkisizleştirir.</i></p> <p>İşin istemci tarafı çok daha basittir. Tek yapmanız gereken <strong>"Gönder" düğmesine tıklandığında onu etkisizleştirmektir</strong>. Bunu yapmanın en kolay yolu, "Gönder" düğmesine aşağıdaki gibi basit bir JavaScript kodu dahil etmektir.</p> <ul> <li><code>&lt;input type="submit" value="Submit" onclick="this.disabled=true" /&gt;</code></li> </ul> <p>Elbette yukarıda da belirttiğimiz gibi istemci tarafının yanısıra sunucu taraflı bir kontrol mekanızmasını da uygulamanıza entegre etmeniz önerilir.</p> <ul> <li><strong><i>Çevirmen'in Notu:</i></strong> <a href="http://www.kodaman.org/">Kodaman</a>'da PHP'de güvenli form gönderimlerine yönelik bir dizi makale bulunmaktadır.</li> </ul> <p><strong>4. Modal Pencereler Çevresindeki Gölgeler</strong><br>Açılır menüler ve pencerelerin çevresindeki gölge efektleri sadece göze hoş gelmekle kalmaz, ayrıca efektin uygulandığı menünün ya da pencerenin, sayfanın diğer elementlerinden <strong>daha ön planda</strong> belirmesine de görsel olarak yardımcı olur. Bunun yanısıra efektin uygulandığı elementin ardındaki içeriğin oluşturması muhtemel görüntü kirliliğinin de, üzerine uygulanan karartıcı efektin de yardımı ile önüne geçer.</p> <p>Bu tekniğin kökeni, sıradan masaüstü uygulamalarına dayanmaktadır. Bu tekniğin kullanıldığı masaüstü uygulamalarında kullanıcının dikkati, en öndeki pencereye ya da diyaloğa çekilir. Pek çok modal pencereler masaüstü uygulamalarında olduğu kadar kolayca ayırt edilebilir olmadıklarından beri, gölge efektleri, onların, okuyucular tarafından daha kolay algılanabilir kılınmasına yardımcı olur, zira ilgili pencere, üç boyutlu gibi görünür ve sayfanın geri kalanının önüne geçer.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-04-01.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.digg.com/">Digg</a>'in giriş penceresinin çevresinde bulunan kalın gölge efekti sayesinde, ilgili pencerenin ardındaki içeriğin oluşturduğu görüntü kirliliğinin önüne geçilmiş olur.</i></p> <p>Bu efekte ulaşabilmek için tasarımcılar, saydam bir PNG imajı oluştururlar ve asıl içeriği de bu PNG dosyasını arkaplan imajı olarak kullandıkları kapsayıcının içerisine yerleştirirler. Kapsayıcının köşelerinde eşit oranlarda boşluk uygulanmas, içeriğin daha kolay seçilebilmesinin de önünü açar. Bir diğer seçenek ise saydam köşeler ile birlikte arkaplan imajı kullanarak, içeriği mutlak pozisyonlama ile yerleştirmektedir. Digg bu yöntemi kullanmaktadır - kullandıkları imaj ise <a href="http://digg.com/img/dialog.png">bu</a> (<code>dialog.png</code>). Kullandıkları kodlar ise aşağıda:</p> <p>(X)HTML:<br><code> &lt;div id="container"&gt; &lt;div style="display: block; top: 236px; opacity: 1;" class="dialog"&gt; &lt;div class="body"&gt; &lt;div class="content"&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></p> <p>CSS:<br><code> .dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001; } .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; } </code></p> <p>Bu yöntemlerin yanısıra JavaScript tabanlı lightbox çözümleri ile ya da CSS3 elementlerini kullanarak gölge efektlerini kullanabilirsiniz. Ancak CSS3'ün Internet Explorer tarafından desteklenmediğini unutmayın.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-04-02.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.basecamphq.com/">Basecamp</a>'in proje değiştirici penceresinin ardında geniş bir gölge efekti bulunuyor ve bu efekt, pencerenin, sayfanın diğer elementlerinden daha belirgin olmasını sağlıyor</i>.</p> <p><strong>5. Size ne yapmanız gerektiğinizi söyleyen boş alanlar</strong><br>Bir web uygulamasını tasarlarken, onu basit bir veri ile test etmek kadar, onun güzel görünmesi ve ortada henüz hiçbir veri yokken kullanıcısına yardımcı olmak da önemlidir. Boş alanları tasarlamanız gerekmektedir.</p> <p>Ortada henüz sayfa ya da komut için bir bilgi bulunmazken, kullanıcıya ne yapması ya da nasıl başlaması gerektiğini söyleyen bir mesaj o boş alana gidebilir. Örneğin bir proje yönetim uygulamasının ana sayfası, kullanıcının projelerini listeleyebilir, ancak eğer henüz orada bir proje bulunmuyorsa, o zaman proje oluşturulabilecek sayfanın bağlantısını oraya yerleştirmek yerindedir. Eğer orada bir düğme bulunuyor olsa bile, <strong>biraz daha fazla yardımın kimseye zararı dokunmaz</strong>.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-05-01.gif' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.campaignmonitor.com/">Campaign Monitor</a> bir elektronik posta kampanyası hazırlamaya başlarken sizi doğru yöne yönlendirir.</i></p> <p>Bu teknik, kullanıcıların sunulan servisi, kayıt olduktan hemen sonra denemeleri için teşvik eder. Kullanıcıya uygulamanız her adımında rehberlik ederek, onun uygulamanızın sunduğu avantajları anlamasına ve kendileri için kullanışlı olup olmadığını kavramasına yardımcı olur. Bu ayrıca kullanıcıya "sadece" en önemli veriyi sunar, zira onları gereksiz seçeneklerle daha ilk andan boğmanın bir anlamı yoktur. Unutmayın ki kullanıcılar genellikle kendilerine sunulan fikrin aşağı yukarı tümünü anlamak isterler ancak detaylarla ilgilenmek istemezler - zira buna ne zamanları ne de ilgileri olmayabilir.</p> <p>Boş alanları kullanarak kullanıcıları motive ederek ve uygulama adımlarını canlılaştırarak sıkılıp kaçan kullanıcıların önüne geçebilir ve potansiyel müşterilerin sisteminizin nasıl daha iyi çalıştığını anlamalarına yardımcı olabilirsiniz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-05-02.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.wufoo.com/">Wufoo</a>'nun formlar sayfasının geniş ve kullanıcı dostu bir mesajı bulunur ve bu mesaji herhangi bir form bulunmaması durumunda sizi yeni bir form oluşturmaya davet eder.</i></p> <p><strong>6. Basılı düğme durumları</strong><br>Pek çok web uygulamasının özel tasarlanmış düğmeleri bulunur. Bunlar ya linkler ya da girdi düğmeleri olup kendilerine atanmış arkaplanlar bulunur. Öntanımlı girdi düğmeleri bazı durumlar için elverişli olmayabilir ve metin bağlantıları bazen çok sade kaçabilir. Burada karşılaşılabilecek olan zorluk, bağlantılarınızı birer düğme gibi gösterdiğinizde onların birer düğme gibi davranmalarını sağlamaktır - ki bu kullanıcıların onların <strong>üzerine tıkladıkları zaman</strong> ilgili düğmenin <strong>"basılı" görünüm</strong>e bürünmesini de içerir.</p> <p>Bu aslında sadece görsel bir hile değildir. Kullanıcılara anında geribildirim vererek, uygulamanın daha <strong>duyarlı</strong> olmasının ve kullanıcının masaüstü uygulamalarında yaşadıkları deneyime en yakın deneyimi web uygulamaları üzerinde yaşamalarını da sağlar.</p> <p>Basılı düğme durum efektlerini CSS'nin <code>active</code> alt sınıfını kullanarak oluşturmanız mümkündür. Örneğin eğer bağlantınız <code>add_task_button</code> sınıfına sahipse, onun basılı durumunu <code>add_task_button:active</code> ile stillendirebilirsiniz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-06.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.highrisehq.com/">Highrise</a> sitesindeki düğmelerin üzerine tıklandığında düğmelere sanki gerçekten basılıyormuş hissi uyandırılır ve kullanıcı ilgili uygulamanın daha duyarlı olduğu hissine kapılır.</i></p> <p><strong>7. Kayıt Sayfasına Giriş Sayfasından Bağlantı Vermek</strong><br>Uygulamanız için kayıt olmamış bazı insanlar sürekli olarak sitenize halihazırda üye olmuş kullanıcıların giriş yapabilecekleri sayfa ile karşılaşırlar ancak acele ettiklerinden de olsa gerek kayıt sayfasını bulamazlar. Belki de sadece kayıtlı kullanıcıların kullanımına açık olan bir özelliğe erişmeye çalışmış olabilirler.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-07-01.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.delicious.com/">Delicious</a> hesabınız yok mu? Sorun değil, zira kayıt olabileceğiniz bağlantı giriş sayfası üzerinden verilmiş bile.</i></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-07-02.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.goplan.info/">Goplan</a> sitesinin üye girişi sayfasında bulunan güzel renklendirilmiş düğmesi sizi kayıt sayfasına yönlendiriyor.</i></p> <p><strong>Giriş sayfanıza kayıt olunabilecek bir bağlantı yerleştirerek</strong> bu işlemi onlar için kolaylaştırın. Eğer henüz bir hesabınız yoksa, kullanıcılar kayıt sayfasını bulmak için arama yapmamalıdırlar. Smashing Magazine'nin <a href="http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/">araştırmaları</a> gösteriyor ki sitelerin %18'i, üye girişi sayfası üzerinde bir kayıt formu ya da o forma giden bir bağlantıyı barındırmaktadır (örneğin YouTube, Reddit, Digg, Metacafe).</p> <p><strong>8. İçerik/Durum hassaslığında navigasyon</strong><br>Kullanıcıların karşı karşıya kaldığı her durumda onların neler görmeyi bekleyecekleri ve nelere ihtiyacı olabileceklerini düşünmek önemlidir. Aynı navigasyon kontrollerini her sayfada göstermenize gerek yoktur, çünkü kullanıcılarınızın her durumda onların tamamına ihtiyacı yoktur.</p> <p>İçweik hassaslığında kontrollere yönelik en güzel örneklerden birisi de Microsoft Office 2007'nin arayüzünde son dönemde yapılan bir değişikliktir. Şerit üzerinde bulunan her bir sekme, ilgili aktiviteye yönelik eylem düğmelerini listelemektedir, örneğin grafik düzenleme, gözden geçirme ya da basitçe yazı yazma gibi. Web uygulamaları da bunun gibi benzer içerik hassaslığında kontrollerin nimetlerinden faydalanabilirler zira bu tekniğin kullanıldığı kontroller, arayüz üzerinde <strong>sadece kullanıcının ihtiyacı olan şeyleri göstererek, her şeyi tekrar tekrar göstermeyerek</strong> kalabalıklığı gidermeye yardımcı olacaktır.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-08.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.lighthouseapp.com/">Lighthouse</a> artık alışık olduğumuz sekmeli navigasyon menüsünü kullanmaktadır, ancak, sekmeler içerisinde ikinci seviye menüler de yer almaktadır. Bu seviye görünümleri, sadece aktif sekmenin içeriği ile alakalı aktivitelere yönelik bağlantıları listelemektedir.</i></p> <p><strong>9. Ana Özellikleri Vurgulamak</strong><br><strong>Tüm kontroller aynı öneme sahip değillerdir</strong>. Örneğin, yeni bir öğe oluşturduğunuz bir öğe üzerinde sadece "Oluştur" ve "İptal" düğmeleri olabilir. "Oluştur" düğmesi daha önemlidir, zira kullanıcının ilgili sayfada genellikle yapacağı şey budur. Sadece bazı ender zamanlarda sayfayı iptal etmek isteyeceklerdir. O zaman eğer bu kontroller yan yana dizilirlerse, onlara aynı vurguyu yapmak istemeyebilirsiniz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-09.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.lighthouseapp.com/">Lighthouse</a> üzerindeki "Konu Oluştur" düğmesi. Onun hemen yanında "iptal" düğmesini görüyorsunuzdur, sadece salt metin olarak. Düğme yalnızca daha fazla önem kazanmakla kalmaz, ayrıca daha geniş tıklama alanına da sahip olup fark edilmesi daha kolaydır, sırf boyutundan ötürü.</i></p> <p>"Oluştur" düğmesi üzerindeki vurguyu arttımak için basitçe farklı stillemeler ve farklı kontrol yöntemleri kullanabiliriz. Bazı uygulamalar form girdi düğmelerini bir eylem oluşturmak için kullanırlar ve iptal düğmesini bir bağlantı olarak yansıtırlar. Bu "oluştur" düğmesi için daha fazla tıklama alanı oluşturmakla kalmaz, ayrıca kullanıcının o sayfada olma nedeni bu olduğu için onların ilgili düğmeyi kolayca fark etmelerini sağlar.</p> <p><strong>10. Video Kullanmak</strong><br>Resimler ve metinler kullanıcılarınızla iletişim kurmak ve uygulamanızın özelliklerinden bahsedebilmek için mükemmel bir yöntem olmasına rağmen eğer kaynaklarınız varsa video kullanmak daha da iyi bir alternatif olabilir. Özellikle son yıllarda web üzerinde videonun popülaritesi giderek artmaktadır. Web uygulamaları için videolar, genellikle, <strong>bir ürünün özelliklerini göstermek için</strong> birer araç olarak kullanılırlar, ancak bu video kullanabileceğiniz tek yöntem değildir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-10-01.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.goodbarry.com/">GoodBarry</a> sitesi ön sayfasında ürünü tanıtmak için bir video kullanır. Site ayrıca uygulama üzerinde kullanıcılara uygulamayı kullanmaya nasıl başlayabileceklerine yönelik yönergeler içeren videolar da içerir.</i></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/07-10-02.png' alt="\"\"" border="0"><br></div> <p><i><a href="http://www.mailchimp.com/">MailChimp</a> acemi kullanıcılara yardımcı olmak için doğrudan yönetici paneli üzerinde yardımcı videolar içerir.</i></p> <p>Bazı web uygulamaları doğrudan uygulamanın içerisinde, kullanıcıya uygulamanın nasıl kullanılabileceğini anlatan videolar kullanırlar. Videolar, uygulamanızın nasıl kullanılabileceğini gösterebilmek için muhteşem birer araçtır, çünkü <strong>algılaması bir sayfa metne oranla daha kolaydır</strong> ve ayrıca çok daha nettir, zira izleyici ne yapıldığını doğrudan görmektedir.</p> <strong>Daha önce kullanılırlık ile ilgili yazdığım diğer yazılar</strong> <ul> <li><a href="http://www.bildirgec.org/yazi/kullanici-geri-bildirimleri-ile-sitenizin">Kullanıcı Geribildirimleri İle Sitenizin Kullanılırlığını Arttırmak</a></li> <li><a href="http://www.bildirgec.org/yazi/modern-css-de-altin-oran">Modern CSS'de Altın Oran</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-10-kullanilirlik">Web Tasarımcıları İçin 10 Kullanılırlık İpucu</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasariminda-altin-oran">Web Tasarımında Altın Oran</a></li> </ul> <p><strong>Kaynak:</strong> <a href="http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/">Smashing Magazine</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/takethislife">takethislife</a> tarafından <a href=" http://www.bildirgec.org/yazi/10-kullanisli-web-uygulamasi-arayuzu ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Mon, 19 Jan 2009 17:02:00 GMT 192525@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/10-kullanisli-web-uygulamasi-arayuzu takethislife <div class="imajorta"><img src='http://www.bildirgec.org/imaj/mturkmen/acdcspreadsheet.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.clandillon.com">Phil Clandillon</a> ve Steve Milbourne "dünyanın ilk excel formatında videosu"nu AC/DC'nin Rock'N Roll treni isimli şarkısına hazırladılar. <br>İzlemek isterseniz excel formatı <a href="http://www.acdcrocks.com/excel/">AC/DC'nin sitesinden</a> excel dosyasını indirerek ya da YouTube videosu olarak <a href="http://www.youtube.com/watch?v=h9_YkXHCkgA">buradan</a> ulaşabilirsiniz. <p><a href="http://blog.wired.com/music/2008/10/acdc-music-vide.html">kaynak</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/takethislife">takethislife</a> tarafından <a href=" http://www.bildirgec.org/yazi/dunyanin-ilk-excel-formatinda-muzik ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sun, 02 Nov 2008 06:26:00 GMT 181427@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/dunyanin-ilk-excel-formatinda-muzik