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.

Kontain‘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.

İşleri sadeleştirmenin bir yolu, gelişmiş özellikleri gizlemek ya da perdelemektir. 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.

CollabFinder‘ı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.

2. Özelleştirilmiş Kontroller
Durum için doğru arayüz kontrollerini seçmek önemlidir. Farklı durumlar farklı şekillerle kontrol edilebilir ve bazı kontroller kendileri için tasarlanan görevlerde diğerlerinden daha iyidirler.

Backpack hatırlatıcı tarihi için kullanılan kompakt bir takvim tarih ve zaman seçicisine sahiptir.

Ö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 daha bilgilendirilmiş kararlar verebilmenizi sağlarlar.

MyBankTracker‘ı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.

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 daha kolay kullanımlı 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.

3. Basılı düğmeleri iptal etmek
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 aynı form girdisinin benzer kopyalarını oluÅŸturacaktır. 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.

Bu korumaya iki bağ bulunur: sunucu tarafı ve istemci tarafı. İş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.

Yammer “Güncelle” düğmesini yeni bir mesaj gönderildiÄŸinde otomatik olarak etkisizleÅŸtirir.

Ä°ÅŸin istemci tarafı çok daha basittir. Tek yapmanız gereken “Gönder” düğmesine tıklandığında onu etkisizleÅŸtirmektir. Bunu yapmanın en kolay yolu, “Gönder” düğmesine aÅŸağıdaki gibi basit bir JavaScript kodu dahil etmektir.

• <input type="submit" value="Submit" onclick="this.disabled=true" />

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.

• Çevirmen’in Notu: Kodaman‘da PHP’de güvenli form gönderimlerine yönelik bir dizi makale bulunmaktadır.

4. Modal Pencereler Çevresindeki Gölgeler
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 daha ön planda 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.

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.

Digg‘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.

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 bu (dialog.png). Kullandıkları kodlar ise aÅŸağıda:

(X)HTML:
<div id="container"> <div style="display: block; top: 236px; opacity: 1;" class="dialog"> <div class="body"> <div class="content"> ... </div> </div> </div> </div>

CSS:
.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; }

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.

Basecamp‘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.

5. Size ne yapmanız gerektiğinizi söyleyen boş alanlar
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.

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, biraz daha fazla yardımın kimseye zararı dokunmaz.

Campaign Monitor bir elektronik posta kampanyası hazırlamaya başlarken sizi doğru yöne yönlendirir.

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.

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.

Wufoo‘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.

6. Basılı düğme durumları
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 üzerine tıkladıkları zaman ilgili düğmenin “basılı” görünüme bürünmesini de içerir.

Bu aslında sadece görsel bir hile değildir. Kullanıcılara anında geribildirim vererek, uygulamanın daha duyarlı 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.

Basılı düğme durum efektlerini CSS’nin active alt sınıfını kullanarak oluÅŸturmanız mümkündür. ÖrneÄŸin eÄŸer baÄŸlantınız add_task_button sınıfına sahipse, onun basılı durumunu add_task_button:active ile stillendirebilirsiniz.

Highrise 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.

7. Kayıt Sayfasına Giriş Sayfasından Bağlantı Vermek
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.

Delicious hesabınız yok mu? Sorun değil, zira kayıt olabileceğiniz bağlantı giriş sayfası üzerinden verilmiş bile.

Goplan sitesinin üye girişi sayfasında bulunan güzel renklendirilmiş düğmesi sizi kayıt sayfasına yönlendiriyor.

GiriÅŸ sayfanıza kayıt olunabilecek bir baÄŸlantı yerleÅŸtirerek 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 araÅŸtırmaları 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).

8. İçerik/Durum hassaslığında navigasyon
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.

İç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 sadece kullanıcının ihtiyacı olan ÅŸeyleri göstererek, her ÅŸeyi tekrar tekrar göstermeyerek kalabalıklığı gidermeye yardımcı olacaktır.

Lighthouse 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.

9. Ana Özellikleri Vurgulamak
Tüm kontroller aynı öneme sahip deÄŸillerdir. Ö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.

Lighthouse ü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ü.

“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.

10. Video Kullanmak
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, bir ürünün özelliklerini göstermek için birer araç olarak kullanılırlar, ancak bu video kullanabileceğiniz tek yöntem değildir.

GoodBarry 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.

MailChimp acemi kullanıcılara yardımcı olmak için doğrudan yönetici paneli üzerinde yardımcı videolar içerir.

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ü algılaması bir sayfa metne oranla daha kolaydır ve ayrıca çok daha nettir, zira izleyici ne yapıldığını doğrudan görmektedir.

Daha önce kullanılırlık ile ilgili yazdığım diğer yazılar

• Kullanıcı Geribildirimleri Ä°le Sitenizin Kullanılırlığını Arttırmak
• Modern CSS’de Altın Oran
• Web Tasarımcıları İçin 10 Kullanılırlık Ä°pucu
• Web Tasarımında Altın Oran

Kaynak: Smashing Magazine