Web 2.0 Tasarım Rehberi – Navigasyon Model ve Teknikleri

w2tr.jpgWeb 2.0 bazlı tasarımlarda, sayfa planının en önemli elementlerinden biride navigasyon veya diğer daha bilindik tanımıyla menü yapısıdır.
Peki bu yeni trendde görsel öğeler nasıl şekil alıyor inceleyelim.

Öncelikle her zaman tekrarladığımız ve tekrarlayacağımız gibi, Web 2.0’da en önemli özellik olan, sadelik, basitlik, ve kolay anlaşılabilir olması, ortaya çıkaracağımız navigasyon yapısının temel taşlarını oluşturuyor olacak.

Bu trendde navigasyonun, genel tasarım kuralı geniş, kalın, temiz ve ayrıştırılabilir olması, aynı zamanda yazı içerisinde kullanılan linklerin normal yazıdan mutlaka farklı olması gerekmektedir. Konu ile ilgili 2 örnek tasarım aşağıda.

w2_menu.jpg
w2menulink.jpg


Navigasyonun Temel Taşları

Basit bir navigasyon uygulamasında dikkat edilmesi en önemli ayrıntılar

  1. Kullanıcının nerede bulunduğunu ifade etmesi.
  2. Bulunduğu yerden gidebileceği yerleri açıkça göstermesi.
  3. Bunların haricinde mevcut farklı opsiyonları sunması.

Alışveriş merkezlerini bilirsiniz, alışveriş merkezleri planlanırken en önemli ayrıntı sizi içine alarak gezdirmesidir. Doğru yapılanmış bir alışveriş merkezinde gezmeye başladığınızda, sonunda fark etmeden hemen hemen tüm mağazaların vitrinlerine bakmış olduğunuzu farkedersiniz. Ya da sık ziyaret ettiğiniz bu tip mekanlarda zaman zaman yürüyen merdiven yada asansörlerin yönlerinin değiştirilmiş olduğunu hiç fark ettiniz mi ? Tabiki amaç tüketiciyi daha çok gezdirip ürün almasını sağlamak.

Şüphesiz web sitelerinde ana amaç kullanıcının her sayfaya girip çıkmasını sağlamak değil, ancak doğru yapılanmış bir site haritası ve menü planı uygulayarak istediğiniz tüm verileri yada içeriği sitenize uğramış bir kullanıcıya kolayca okutabilirsiniz.

Görsel Elementler
Menümüzün görsel uygulamasında dikkat edilmesi gereken ayrıntılar

  1. Navigasyonun ana içerikten ayrı, kopuk bir şekilde sunulması.
  2. Navigasyonda farklı renk ve ton kullanımı ile dikkat çekmek.
  3. Geniş, kalın ve temiz yazı karakterleri kullanmak.

Navigasyona ait olan öğelerin ki bunlar ister link ister menü ister ikincil menü olsun mutlaka içerikten görsel olarak ayrıştırılması gerekmektedir.

Web 2.0 stilinde tasarımlarda korkmamanız gereken tek olgu tasarımlarınızdan gereksiz görsel öğeleri, gölgeleri, tamamlayıcı olduğunu düşündüğünüz bazı yardımcı grafik parçalarını, sadece görsel şenlik katmak için eklemiş olduğunuz elementleri tasarımdan söküp atmak olmalı.

w2menudy.jpg

Bunun için en iyi egzersiz eski stilde hazırlamış olduğunuz tasarımdan, sözünü ettiğimiz elementleri atarak, daha sade, anlaşılabilir ve kolay hale getirmeyi denemek olmalı. Bir kez deneyin ve aradaki farkı görün, o zaman yeni nesil tasarım trendlerine nekadar çabuk uyum sağladığınızı sizde farkedeceksiniz. Hemde sitenize güzellik kattığını düşündüğünüz bir sürü görsel öğeyi çöpe atarak!

w2_menutag.jpgBu arada Web 2.0 trendlerinden söz ettiğimizi unutmadan, sitenin içeriğinde sunulan verilere göre, bir etiket bulutu (Tag Cloud) şeklinde de navigasyon yapısı oluşturarak tasarımınıza interaktivite katabilirsiniz. Bu yöntem ile sitenizde karmaşık içeriğe, kullanıcıların ilgi alanlarına göre yönlendirme yapabilirsiniz. Web 2.0’ın önemli ayrıştırıcılarından biri olan etiket bulutları yeni dönem tasarımlarda çok önemli bir açığı kapamakta.

Ajax yada benzeri teknolojiler kullanarak açılır kapanır içerik ve navigasyon alanlarıda oluşturmak bazen tasarımlaranızda yaşayabileceğiniz olası yer darlığı problemlerine çözüm getirecek bir alternatif olarak aklınızda kalmalı.

w2menuacikkapali.jpg

Bu arada genel tasarım kriterleri olarak birkaç bilgi eklemek gerekirse unutmayın ki sitenizde her link ve ulaşılabilir bölümü belli noktalara sıkıştırmak zorunda değilsiniz. Örneğin iyi düzenlenmiş bir header (Üst Kısım) footer (Alt Kısım) ve yan kolon (Side Bar) ile kullanıcılarınıza iyi bir gezinti sistemi oluşturabilirsiniz. Örneğin piyasaya yeni çıkmış bir ürünün detay bilgilerini üst menüde oluşturacağınız ana başlıklarda, içerikten alacağınız parçaları ana sayfanın içerik bölümünde, firma bilgileri iletişim ve telif hakları gibi bilgileride alt kısımda oluşturacağınız bir menü bar’da sunmanız çok daha işlevsel olacaktır. Oysa tüm bu bilgileri üst veya yan menüde sıkışık olarak sunmak, tek bir amaca, oda kullanıcının sitenizde hiç biryeri ziyaret etmeden kaçmasına sebep olacaktır.

Web 2.0 Stilinde kullanabileceğiniz veya ilham alabileceğiniz bazı kaynaklar ise Dynamic Dirve, Css ShowCase, Free Css Nav, Free Vertical Menus.

Bu kaynaklara göz atarak sitenize uygulayacağınız menü tasarımları ve CSS tabanlı menüler hakkında fikir edinebilirsiniz.

Bu yazı için 13 yorum yapılmış

  1. 24 Mart 2007

    Hasan Bey Merhaba,

    Webrazzi Forumda, Arda Bey’in açtığı topic sayesinde haberdar oldum bloğunuzdan. Gerçekten başarılı ve çok faydalı bir yazı seri olacak inş.

    Başarılarınızn devamı dileğiyle…

  2. 24 Mart 2007

    Çok güzel bir yazı eline sağlık abi.

  3. superselo
    27 Mart 2007

    Merhaba, öncelikle bu muhteşem yazı dizisi için teşekkürler. Devamını bekliyoruz. Bir sorum olacak. Navigosyon menü için parlak yüzeyli grafikler kullanırken yazılarıda grafik olarak mı kullanmak lazım yoksa css ile yapılacak menüye grafikleri arkaplan olarak atamak daha mı mantıklı olur?

  4. hasanyalcin
    27 Mart 2007

    Bunu css uzmanlari daha iyi bilir suphesiz ancak her ikiside olabilir bence..

  5. superselo
    27 Mart 2007

    GEce çalışırken düşündümde her ikisinin kullanım yeride farklı aslında. Css ile Tab menü yapacaksak arka plan kullanmak gerek. Grafikler ile rollover menü yapacaksak metinleri grafik üzerine yazmak gerek.

  6. 3 Nisan 2007

    web2.0 akımını “sadece” grafik ve tipografik yenilikmiş gibi ele almak yanıltıcı. Trendler içinda kaybolmak istemiyorsanız bu tanıma dikkatle yaklaşın. Engin Erdoğan’ın “Web 2.0 için Deneysel Türkçe Tanım” başlıklı yazısını okumanızı tavsiye ederim.

  7. hasanyalcin
    4 Nisan 2007

    Rehberimizin giriş yazısında belirttiğim üzere, bu kaynağı tamamen, web 2.0 altyapılarından bağımsız, sadece tasarımsal anlamda yeni görsel trendleri değerlendirmek açısından hazırlıyorum.

  8. 5 Haziran 2007

    Teşekkürler…

  9. 22 Ağustos 2007

    Oldukça faydalı bir yazı..Teşekkürler..

  10. Pingback: Web 2.0 Tasarım Rehberi | katodivaihe

  11. 15 Ekim 2007

    gercekten cok aydınlatıcı bilgiler emeğine sağlık tesekkurler

  12. Pingback: Web 2.0 Tasarım Rehberi | Rasim Coşkun | Web Tasarım | Web Design

  13. 10 Nisan 2008

    yorumlarınız gerçekten çok aydınlatıcı teşekkürler

Siz de yorum yapın!

İlgili Yazılar

Warning: Invalid argument supplied for foreach() in /vhosts/hasanyalcin.com/http/wp-content/themes/hasanyalcin/unitpress/unit-functions.php on line 175