Kullanışlı arayüz tasarımında dikkat edilmesi gereken 10 konu

Posted: May 18th, 2010 | Author: B | Filed under: GUI-Arayüz, Makale, Web | 1 Comment »

1. Geç Kayıt (Lazy Registration): Kullanıcının sitenin sağladığı hizmetleri kayıt olmadan kullanmasına olanak verin. Kayıt kısmını olabildiğince geciktirin. Kullanıcının verdiğiniz hizmeti gerçekten kullanmaya karar verdiğinde kayıt yaptırmasını sağlayın. Bu;

- Hizmeti kullanmayacak kişinin bilgilerini gereksiz yere kayıt altına almamanızı sağlayacaktır.
- Hizmetinizi gerçekten faydalı bulup kullanmak isteyen kimsenin, hemen karşısına kayıt formu çıkartıp onu kaybetmenizi engelleyecektir.

Kullanıcı vermiş olduğunuz hizmeti kullanıp, yapmış olduğu çalışmayı kaydetmek istediği zaman onu siteye kayıt edebilirsiniz. Ya da, alışveriş sepetine ürünleri istediği gibi ekleyip çıkarmasına izin verin. Ödeme aşamasına geldiği zaman kayıt formuna yönlendirebilirsiniz. Böylelikle, kaydını tuttuğunuz kişiler hedef kitleniz içindeki gerçek müşterileriniz olacaktır. Aynı zamanda kararsız kalmış kişilere verdiğiniz bu serbestlik, onları kazanmanıza sebep olabilir.

2. Kademeli Gösterim (Progressive Disclosure): Elinizde varolan bilginin hepsi anlamlı olsa da ihtiyaç duyulmadan sergileniyor olması anlamını ve değerini yitirmesine neden olur. Daha da kötüsü, görüntü kirliliğine ve arayüzün gereğinden fazla bilgi ile dolması kullanım kolaylığını zedeleyecektir. Kullanıcıyı “daha fazla bilgi”, “devamı”, “gelişmiş özellikler” gibi bağlantılarla hizmetinizdeki detaylı bilgileri ihtiyaçları doğrultusunda talep etmelerine olanak verin. Böylece içeriğiniz hem doğru şekilde sunulmuş, hem de hizmetiniz fonksiyonel olarak tatmin edici olacaktır.

Youtube.com da bulunan bir videoyu kendi sitenize eklemek istediğinizde “Embed” kısmında olan kodu eklemeniz yeterli olacakken, kodun yanında bulunan düğmeye bastığınızda açılan panelden fon rengi, video oynatıcının kişiselleştirme ayarları gibi ek özelliklere ulaşabilmemiz, kademeli gösterime güzel bir örnektir.

Makele veya haberlerin altına yazılan yorumlara tek tek verilen cevapların ilk etapta görünmemesi, ilgi çeken yoruma verilen cevapların istenildiği takdirde görünür olması da, hem kullanım hem de fonksiyonel olarak güzel bir uygulama şeklidir.

3. Serbest Biçim (Forgiving Format): Arama kutularına kullanılacak girdileri olabildiğince serbest bırakın. Örneğin, bir şirketin kullanıcıları içinde arama yapacak iseniz, arama kutusuna yalnızca isim değil, aynı zamanda sicil numarası, adres bilgisi, doğum tarihi gibi kişi ile ilgili tutulan herhangi bir bilginin yazılmasına ve fonksiyonel olarak çalışmasını sağlayın. “ARAMA”, bu fonksiyonellikle gerçek bir arama olacaktır.

4. Öncelikli eylemleri belirginleştirin (Clear Primary Actions): Bir formun sonunda “Kaydet”, “Kaydet ve yayınla”, “Listele” gibi eylemler son derece açıklayıcı iken bazı durumlarda “iptal”, “geri dön”, “vazgeç” gibi ikincil eylemlere de ihtiyaç duyulabilmektedir. Bu gibi durumlar normal prosedürün dışına çıkmakla alakalı olup, kullanılması daha düşük ihtimalli eylemlerdir. Kullanıcınızın kafasını karıştırmamak adına birincil eylemleri yapacak bağlantı ve düğmeleri daha belirgin hale getirebilirsiniz. Bunu kontrast renkler, daha belirgin çerçeveler, daha iri fontlar kullanarak yapmak mümkündür.

5. Ekmek Kırıntıları (Breadcrumbs): Menü ile içerik arasına veya sayfanın en üst kısmında minimum alan kaplayan  navigasyon işaretleridir. Çok katmanlı bir menü yapısında bulunduğumuz sayfanın üst başlıklarını göstermekte, bir önceki (üst) içeriğe kolayca ulaşabilmemizi sağlamaktadır. Erişim ve kullanım kolaylığı açısından tavsiye edilir.

6. Hesap Açma (Account Registration): Sitenin daha detaylı hizmetlerinden yararlanmak, kullanıcının bulunduğu bölgeye göre verilen hizmetlerin çeşitlenmesi, kullanıcı bilgilerinin içerikde kullanılacak olması gibi durumlarda kullanıcı kayıtlarına ihtiyaç duyulmaktadır. Bu gibi durumlarda ilgili kayıt formunun kısa olması önemlidir. Yalnızca içeriğiniz için gereken bilgileri talep edin. Daha detaylı bilgiye ihtiyaç duyacağınız bölümlerde, 1.maddede bahsedilen “geç kayıt” konusunu uygulayabilirsiniz.

7. Doldurulması gerekli alanların işaretlenmesi (Required Field Marker): Bir formda doldurulması gereken alanları formu ilk sunarken işaretleyin. Böylece kullanıcı formu doldurup gönderdiğinde hata oluşma ihtimalini azaltırsınız.

8. İşlem akışı (Steps Left): Bir formu birkaç başlığa ayırıp, birkaç adımda doldurtacaksanız, o adımları listeleyin. Geride bırakılan, şu an bulunulan ve bir sonraki adımları biçimsel olarak farklılaştırın ve önceki adımlara tıklama ile geçilebilmesini sağlayın. Kullanıcının bir sonraki adımın olup olmadığı, şu an nerede olduğu ve bu işlemin ne kadar süreceği hakkında tahmini bilgi sahibi olması onun daha konforlu hissetmesini sağlayacaktır.

9. Abonelik seçenekleri (Subscription Plans): Farklı derinliklerde hizmet veren sitelerde kullanılan bu sunum şekli, kullanıcınızın daha kolay ve doğru karar vermesine yardımcı olacaktır. Hizmetin ismi, özellikleri, süresi, ücreti ve kayıt butonu tablo şeklinde karşılaştırmalı şekilde gösterilebilir, seçim yapılan paket veya yönlendirilmek istenilen paket renk, font değerleri gibi değişkenlerle farklılaştırılabilir.

10. Üzerine gelince beliren ve farklılaşan kontroller (Hover Controls): Değiştirilebilir ve güncellenebilir alanların üzerine mouse ile gelindiğinde aktif olacak bir “Güncelle” butonu hem görsel karmaşayı öneleycek, hem başka bir sayfaya gitmeden işlem yapılabilmesini sağlayacak, hem de kullanımı kolaylaştıracaktır. Aynı zamanda formlarda aktif “text box”ların çerceve ve fon renkleri farklışatırılırak odaklanmayı kolaylaştıracak ve işlem hızını artıracaktır.

Barış Öztekin
(kaynak: smashing magazine, a list apart)

---