Web Yapısında Hiyerarşi Örnekleri

Bir kurumsal organizasyon şemasını bir web sitesinin düzen şemasının yanına yerleştirin; iki belge arasında dikkate değer bir benzerlik bulabilirsiniz. İşletmeler, hükümetler ve diğer kuruluşlar genellikle web sitelerinin yaptığı aynı hiyerarşik düzen düzenlerini kullanır. Örneğin, bir şirketin CEO'su, bir ana sayfanın bir web sitesi modelinin en üstünde olduğu gibi hiyerarşik bir modelin en üstünde oturabilir. Etkili bir şekilde tasarlanmış hiyerarşiler, insanların ziyaret etmeyi sevdikleri siteler oluşturur.

Web Sitesi Yapıları

“Web Stil Rehberi” yazarlarının belirttiği gibi, “Web sitenizin organizasyonunun başarısı, büyük ölçüde sitenizin bilgi mimarisinin kullanıcılarınızın beklentilerine ne kadar iyi uyduğuna göre belirlenir.” İnsanlar sitenizde dolaşmayı kolay bulursa, Bunu incelemek için daha fazla zaman harcayabilir: Bunu yapmalarını kolaylaştırmanın bir yolu, siteye mantıklı ve öngörülebilir bir düzen sağlamaktır; böylece ziyaretçiler, sitenin yardım belgelerine bakmadan Web sayfalarında gezinebilirler.

Piramit Yaklaşımı

Bir web sitesini piramit olarak düşünmek faydalı olabilir. Piramidin en üstünde, sitenin ilk seviyesi olan ana sayfa yer alıyor. Etkili bir hiyerarşi, daha ayrıntılı bilgi içeren diğer Web sayfalarına işaret eden genel bilgileri ve bağlantıları içerir. Bu sayfalar ana sayfanın altında görünür ve sitenin hiyerarşideki ikinci seviyesi olur. Temel bir site yalnızca iki seviyeye ihtiyaç duyabilir ve bir ana sayfa yalnızca “Hakkımızda”, “Ürünler” ve “Katıl” gibi sayfalara işaret eden bağlantılara sahip olabilir. Site ziyaretçilerine geri dönmeleri için bir yol vermek her zaman iyi bir fikirdir. Ana sayfaya yönlendiren her sayfaya bağlantı, düğme veya menü öğesi eklemek gibi herhangi bir sayfadan ana sayfaya.

Seviye Üç ve Ötesi

Whitehouse.gov, karmaşık bir hiyerarşi oluşturan çoklu seviyelere sahip bir sitenin bir örneğidir. Giriş sayfası basittir, ancak sitedeki herhangi bir sayfaya giriş sayfasından erişebilirsiniz. Bu tür hiyerarşi, düşük seviyelerin daha yüksek seviyelere göre daha fazla ayrıntı sağladığı birçok düzeye kadar uzanabilir. Üç seviyeli bir hiyerarşiye güzel bir örnek kitap inceleme sitesidir. Birinci sayfadaki giriş sayfası, Genel Bilgiler ile Yorumlar sayfasına işaret eden bağlantılar sunabilir. İkinci seviyeyi oluşturan bu sayfa bir kitap listesi içerebilir. Bir kitabı tıkladığınızda, "Savaş ve Barış" adlı başka bir sayfa o kitap için bir inceleme gösterebilir. Bu sayfa sitenin üçüncü seviyesine oturmuş. Bu hiyerarşiyi bir org grafiği oluşturma şeklinize göre çizerseniz, üstüne bir kutu çizer ve içine "Ana Sayfa" yazarsınız. "Giriş Sayfası" kutusunun altına "Yorumlar" kutunuzu çizebilir ve "Giriş Sayfası" kutusunun altına "Savaş ve Barış" kutusunu ekleyebilirsiniz.

Hiyerarşiyi Göstermek İçin Başlıkları Kullanma

Bir web sitesinde sayfalar düzenlemenin yanı sıra, hiyerarşik ilişkileri göstermek için bir sayfanın içeriğini düzenleyebilirsiniz. Örneğin başlıklar, insanların bilgileri sindirimi kolay bir taslak biçiminde sunmalarını sağlar. HTML, bir Web sayfasına hiyerarşi eklemenize yardımcı olabilecek h1, h2 ve h2 gibi birkaç başlık etiketi sağlar. Örneğin, sayfanın ana başlığı olarak büyük bir h1 etiketi ve "Ürünler" adlı bölüm için daha küçük bir h2 etiketi kullanabilirsiniz. Daha sonra, ürünlerinizi tanımlayan bir alt bölüm oluşturmak için Ürünler'in altına bir h3 etiketi ekleyebilirsiniz. Ayrıca sayfanıza madde imli listeler ekleme seçeneğiniz de vardır. Tüm bu unsurları birleştirerek, site ziyaretçilerinin bir bakışta anlayabileceği görsel bir taslak oluşturursunuz.