4 yaratıcı navigasyon tipi analizi ile kullanıcı deneyimi

4 yaratıcı navigasyon tipi analizi ile kullanıcı deneyimi

Siteniz ne kadar iyi olursa olsun, kullanıcılar yollarını bulamıyorlarsa bunun bir önemi yoktur. Navigasyon, bir web sitesinin yol haritası ve kılavuzudur. Ziyaretçinin web sitesi içinde kaybolmaması ve daha rahat işlem yapabilmesi için bu öğelerin kullanışlı olmasına dikkat edilmelidir.

Navigasyon, ziyaretçinin bulunduğu sayfa hakkında bilgi veren bir öğedir. Bağlantılar, başta menüler olmak üzere alt sayfalara verilen linkler ve harici web sitelerine verilen linklerdir. Büyük bir mağaza düşünün; içerisinde çok kaliteli ürünler var fakat hangi reyonun nerede olduğu belli değil. Bu mağazada dolaşmak sizin için ne kadar efektif olur? Olmaz tabii… Web sitesi için de benzer durum geçerli. Kişi kendini rahat hissettiği ve hâkimiyetinde olduğunu düşündüğü bir sitede gezmekten daha çok zevk alır.

UI-patterns-navigation-1

Pattern Tap

Web navigasyon ilkeleri

İlk ve en önemlisi, bir navigasyon her zaman basit olmalıdır. İyi bir navigasyon, kullanıcıya yolculuk boyunca rehberlik eden görünmez bir eli hissettirmelidir.

Sonraki, bir navigasyon sistemi görünür olmalıdır. Kullanıcı, A noktasından B noktasına nasıl gideceğini ilk bakışta görebilmeli.

UI-patterns-navigation-2

Awwwards / White Grontier Brewery

Kullanıcı, herhangi mevcut bir sayfadayken nerede olduğu görebilmeli ve önceki sayfalara geri dönebilmeli. Örn; Breadcrumb’ların veya Tab navigasyonunun olması gibi…

Son olarak, tutarlılık gereklidir. Anasayfa navigasyon sisteminin her sayfada olabildiğince aynı olması gereklidir.

Dilerseniz gelin, kullanıcının, etkinleneceği ve izleyebileceği 4 yaratıcı navigasyon örneklerini inceleyelim:

#1 Dikey navigasyon menü

Yatay menü kullanımını her web sitesinde görüyoruz. Yatay menü içeriğini alt alta yazarak, arkplanı dikey konuma getirip sağ veya sol tarafa konumlandırabiliriz. Dikey navigasyon menü, yatay menü kadar etkilidir.

UI-patterns-navigation-3

Awwwards / AIAIAI

Navigasyon sağ tarafta ise, kullanıcının gözünde tüm web sitesinin hissiyatı her zaman tek sayfa gibidir. Dikey navigasyonun daha detaylı analizini sağlamak için  Smashing Magazine makalesini okuyabilirsiniz.

#2 Sonsuz scrolling

Zengin görsel içeriğine sahipseniz ve bir hikaye anlatmak isterseniz, sonsuz scrolling hayat kurtarıcıdır.

Bu aynı zamanda olağanüstü görselleri, özellikle paralaks scrolling ile birlikte etkili kılar. One page site kurgunuzdaki siteniz, çok fazla içerik barındırıp, sonsuz scrolling’e sahipse, kullanıcının sayfanın hangi kısmında, hangi başlığında olduğunu anlayabilmesi için dot naviasyonu kullanabilirsiniz.

Dezavantajı ise; sipariş kontrolü gibi kullanıcı özgürlüğüne yönelik kısaltmalardır. Kullanıcıların scrolling deneyimi ile sadece istedikleri sayfalara atlamak yerine, navigsayon menü kullanımı daha etkili ve kullanışlı olacaktır.

UI-patterns-navigation-4UI-patterns-navigation-5

Awwwards / Better Coffee

Better Coffee web sitesinin bir kahve çekirdeğinin nereden geldiğini, nasıl öğütüldüğünü ve daha sonra makine ile sıcak kahvenin, bardakta nasıl servis edildiğini anlatıyor.

Kullanıcı aşağıya doğru scroll yaparken, kahve çekirdeği (ekranda sabit bir pozisyonda) kahve üretiminin farklı aşamalarına giderek değişiyor. Yol boyunca her aşamada “iyi bir kahve nasıl yapılır?”, gayet net bir akışla anlatılıyor. Hikayeleştirme, Better Coffee’yi çok basit bir dille kullanıcının scroll yapmasını sağlıyor.

#3 Tek seçenek anasayfa

Kullanıcıdan ilk seferde aksiyon almasını istiyorsanız evet, sadece bir seçenek var, anasayfa.

  • Başlık
  • Slogan
  • Açıklayıcı ama özlü tanıtıcı paragraf / değer önerisi
  • Anlamlı görsel içerik(Özelliği olan bir görsel)
  • Tek ve dikkat çekici call-to-action(Buton)

Genellikle, hamburger menü ve minimal arayüz, kullanıcıya daha fazla özgürlük vermek için kullanılır.

UI-patterns-navigation-6

Awwwards / Sonoran’s Valley

Deneysel site olan Sonoran’s Valley’in girişinde gizemli bir loading ve kullanıcıya anasayfasında tek bir seçenek (call-to-action) sunuyor. Yolculuk başlasın! Kullanıcı butona tıkladığında, daha fazla seçeneğe ulaşabileceğini call-to-action bilgisiyle anlıyor.

En nihayetinde, Hick’s Yasasına göre tek bir seçim en kolay seçimdir. Kullanıcılarınız bu basit ilk adımı gerçekleştirdiklerinde, devam etmeye de kararlı olurlar.

#4 Tam ekran navigasyon

Basitlik ve kullanım kolaylığı, bazen büyük olan daha kullanışlı ve anlaşılabilirdir.

Tam ekran boyutunda seçeneklerinizi sergilemek kullanıcılarınızın sitenizde nasıl dolaşabileceklerini görmelerini garanti altına alır ve yaratıcı görseller için de size alan yaratır. Bu pattern ile diğer içerikleri gösteremeyecek olsanız da, olaya tersten baktığımızda navigasyon menüsü de bir içeriktir, böylelikle ona eşlik eden imaj ve ikonlar daha büyük anlamlar içerir.

UI-patterns-navigation-7

Awwwards / KATVIG

KATVIG, çevreye duyarlı giyim hattı websitesidir. Duygusal bir fotoğraf hiyerarşisi ile birlikte ekranın 3’te 1’i navigasyon menüsü için ayrılmıştır. Anasayfa içeriği de call-to-action’lar şeklinde düşünülmüş ve belli alanları önemli mesajlar için ayırmışlar.

Her navigasyon menü öğesi, hikayeleştirilmiş ve anlamlı aksiyonlar ile ön plana çıkartılmış.

Adobe Creative Cloud aboneliklerinde öğrencilere ve öğretmenlere özel %60 indirim fırsatlarını kaçırmayın.

Makalenin derlenmesinde awwwards.com’dan yararlanılmıştır.

Bugün ilk makalen bizdendi.
Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol
SENİN İÇİN ÖNERİYORUZ
Akış şeması çizerken en sık yapılan 11 hata
Eser Teker

Akış şeması çizerken en sık yapılan 11 hata