Bir şirketin her web sitesinin dört ana hedefi olduğu bir sır değil: marka sadakatini teşvik etmek, trafiği artırmak, hemen çıkma oranlarını azaltmak ve olası satışlara veya satışlara dönüşüm oranlarını artırmak! Burada çok şey sitenize gelen kullanıcıların kendilerini ne kadar rahat hissettiklerine bağlıdır.
Bu nedenle, bugünkü makalemizde, "rahat bir atmosfer" yaratıldığı için site navigasyonunun ne olduğu hakkında konuşacağız. Daha doğrusu, gelişimi sırasında yapılan en yaygın hatalar hakkında.
Hata 1: özel stil
Öyle oldu ki, kullanıcılar site navigasyonunu sayfanın üstünde veya solunda görmeye alışkındır, bu nedenle onları aramak için sitede dolaşmaya zorlamamalısınız, çünkü bu saklambaç oyunlarını sevmeyebilirler. dönüşüm oranlarını olumsuz etkileyecek ve hemen çıkma oranını artıracaktır.
Evet, sayfaların / sitelerin geliştirilmesinde yaratıcı bir yaklaşım her zaman teşvik edilir, ancak sitede gezinme açıkça hayal gücünüzü serbest bırakmanız gereken bir durum değildir. Bu tür deneylerle, kaynağın ana içeriğini değil, yeni bir gezinme stilini incelemek zorunda kalacak olan kullanıcıların dikkatini dağıtırsınız.
Hata # 2: genel menü öğesi etiketleri
Site navigasyonu yapmanın bir diğer altın kuralı da navigasyon menü etiketlerinin bilgilendirici olması gerektiğidir. Bu nedenle, örneğin, "Ürünler" veya "Hizmetler" menü öğelerinin kullanımı tüm şirketler için ortaktır ve bu tür adlar kullanıcılar için çok az şey ifade eder. İşte başka bir örnek: "Ne yapıyoruz" - aynı meçhul ifade.
Bu durumda, site navigasyonu nasıl geliştirilir? Gezinme menüsündeki her simge için en doğru etiketleri bulmaya çalışın ve bunların kullanıcılarla nasıl konuştuğunu göreceksiniz. Site ziyaretçileri, sorularına cevap aramak için size geldi, bu yüzden onları reddetmeyin şablon ifadeler ve kelimeler.
Müşterilerinizin soyut "Ürünler" veya "Hizmetler" aramadığını ve bu tür simgelerle gezinmenin sonuçlarda sitenin tanıtımını etkilemeyeceğini kabul edin. Arama Sonuçları... Kendini tanıdın mı? Yani iyileştirme zamanı! Site menüsü ve yapısı bir bütün olarak optimize edilmelidir. arama motorları ve hedef kitlenin anlayacağı bir dilde konuşun. Yazımızı sonuna kadar okuduktan sonra benzer bir sorunu kaç firmanın çözdüğünü göreceksiniz.
Hata # 3: açılır menü
Açılır menü, bir gezinme öğesi olarak son derece popüler hale geldi, ancak onu kullanırken dikkatli olmanız için iki iyi neden var.
Birçoğunuz muhtemelen bir açılır menüyü tam anlamıyla yakalamak zorunda kaldınız. Garip bir hareket - ve senden kaçıyor! Ve şimdi siz, gücünüzü topladıktan sonra tekrar arayın, tıklayın ve orada - bir sürpriz! - eylem için başka bir seçenek listesi. Bu tür yakalamalar çok can sıkıcı! Bir düşünün, belki de potansiyel müşterilerinizi bir kez daha sallamamalısınız?
Açılır menüden çıkmak için başka bir neden: düşük katılım takip eden sayfalar site veya görüntüleme derinliği. Düşük sayfa trafiğiyle ilgili bir sorununuz varsa Üst düzey, nedeni açılır menünün kullanımında yatıyor olabilir. Ancak her zaman kuralın istisnaları vardır. Bu durumda, istisnalar birçok bölümü olan büyük siteler için geçerlidir, çünkü burada böyle bir menü kullanılarak sitenin kullanılabilirliği önemli ölçüde iyileştirilir.
Hata # 4: çok fazla menü öğesi
Daha önce de böyleydi ama bugün acil ihtiyaç duymadan bu geleneğe bağlı kalmamalısınız, çünkü bazen 8 puan bile çok fazla olabiliyor. Kendinizi 5'i geçmemek üzere bunlardan daha azıyla sınırlamaya çalışın: ikincil noktalar ne kadar az olursa, kullanıcılar bunlara o kadar az rastlar ve en önemli olanlar o kadar yüksek sesle konuşur.
Bu kural, yalnızca gezinme için değil, tüm site içeriği için de geçerlidir. Kaldırılan her öğe, kalanları daha görünür hale getirir. Kısa gezinme SEO için de önemlidir. Çoğu zaman kullanıcılar bağlantıyı takip ettiğinden ana sayfa, açık değil iç sayfalar site, bu nedenle arama motorları için "yetkili". Navigasyonunuz bağlantılarla dolup taştığında, sitenin ana sayfası dahili olanlara kıyasla daha az yetkili hale gelir.
Hata # 5: menü öğesinin sipariş için uygun olmayan şekilde yerleştirilmesi
Psikoloji alanındaki araştırmalar göstermiştir ki, ilk ve son elementler ortasındaki öğeler yerine herhangi bir liste. Benzer bir eylem kullanıcılarla gerçekleşir. Bu fenomene "Seri Konum Eğrisi" denir ve bir grafik şeklinde açıkça ifade edilir:
Listenin başında (öncelik etkisi) ve sonunda (yenilik etkisi) dikkat yoğunluğu çok daha yüksektir. Bu yüzden en çok düzenlemek doğru önemli noktalar navigasyonun başında, küçük olanlar - merkezde. "İletişim" menü öğesi, en sağ köşedeki ÜST navigasyonun sonuna yerleştirilmelidir.
Bonus ipucu: sonsuza kadar bağlantı, düğmeler asla!
Web tasarım trendlerinin 8 yıl gerisindeyseniz ve hala metin bağlantıları yerine grafik gezinme düğmelerini kullanıyorsanız, işte alışkanlıklarınızı yeniden gözden geçirmeniz için 5 neden:
- Düğme metni arama motorları tarafından görülmez.
- Düğmeleri güncellemek, metin bağlantılarını güncellemekten daha zordur.
- Düğmeler daha yavaş yüklenir ve bu da onları mobil uygulamalar için kabul edilemez hale getirir.
- Düğmeler, konuşma ve metin tarayıcıları tarafından okunamaz.
- Örneğin TypeKit gibi araçlarla standart olmayan yazı tiplerini kullanmak isteseniz bile düğmeler gereksizdir.
Ve şimdi, söz verdiğimiz gibi: 5 hatasız web sitesi gezinme örneği.
Navigasyon - önemli yön herhangi bir site. Kullanıcının ilgili bilgileri kendisi bulup bulamayacağı ve geri dönmek isteyip istemeyeceği, web gezintinizin etkinliğine bağlıdır.
Navigasyon hiçbir şey tarafından düzenlenmez: şeffaf ve sezgisel veya çok seviyeli ve standart dışı hale getirilebilir.
Web sitesinde gezinmeyi mümkün olduğunca verimli hale nasıl getirebilirsiniz ve hangi tasarım sizin için doğru?
Bir web geliştirme şirketindetüm sorularınızın cevapları var.
Ama önce ilk şeyler.
NAVİGASYON NEDİR?
Site gezintisi veya web gezintisiKullanıcının sitede gezinmesine ve ihtiyaç duyduğu bilgileri bulmasına yardımcı olan bir yazılım ve görsel araçlar sistemidir.
NAVİGASYON PLANLAMASI
En etkili web navigasyonu 3 sütuna dayanmaktadır:
- Yapı
- Özlülük
- Tasarım
- Yapı:navigasyon detaylı bir çalışma ile başlar bilgi mimarisi (IA), siteye en uygun erişimi oluşturmanıza ve içeriği kullanıcının bakış açısından yapılandırmanıza olanak tanır. İdeal olarak, sitenin IA'sı minimum gezinme katmanından oluşur ve kullanıcının sadece birkaç tıklamayla istenen bölüme erişmesini sağlar. Aynı zamanda, bölümlerin bölünmesi açık, mantıklı ve öngörülebilir.
- Özlülük:pratik web navigasyonu her zaman basit ve sezgiseldir. Site menüsüne yalnızca etkili iletişim için gerekli olan öğeleri ekleyin. Başarının anahtarı, hata şansı bırakmayan minimum sayıda eşdeğer bölümden oluşan bir menüdür.
- Tasarım:Bir tasarım seçerken okunabilirlik, tutarlılık ve tutarlılığa odaklanın. Ortak gezinme öğelerini tercih edin. karmaşık sistem Özel simgeler, düğmeler ve etiketler kötü bir fikirdir ve sitenizin kullanılabilirliğini ve kullanılabilirliğini olumsuz etkileyebilir. Gereksiz aktif öğeler ne kadar az olursa, kullanıcılar o kadar memnun olur.
WEB NAVİGASYON TASARIM TRENDLERİ
Web navigasyon tasarımı inanılmaz derecede çok yönlüdür, ancak bazı öğeleri diğerlerinden daha fazla popülerlik kazanmıştır. Umbrella IT, hem bireysel hem de birbiriyle kombinasyon halinde çalışan en başarılı web gezinme tasarımlarından 10 örnek seçti. Her birinin kendi avantajları ve dezavantajları vardır ve hangisinin en iyisi size kalmış.
1. YATAY NAVİGASYON
Yatay navigasyon, rahatlığı işlevsellikle birleştiren klasik bir tasarımdır.
Artıları:
- Çoğu monitörün standart ekran yönlendirmesi için organik bir çözüm;
- Gezinme menüsünün tüm öğeleri aynı anda etkin ve kullanılabilir;
- Üzerine gelindiğinde veya tıklandığında açılır menüyü kullanarak bölümlerin listesini genişletme imkanı.
eksileri:
- Çok sayıda bölüm ve büyük bir açılır menü, önemli içeriğin üst üste binmesine neden olabilir;
- Yeni menü öğeleri eklemek zordur.
2. DİKEY NAVİGASYON
Dikey gezinme, sayfanın sol sütununda bulunan bir menü olan yatay gezinmeye doğrudan bir alternatiftir.
Artıları:
- Menünün düzenleme kolaylığı ve sınırsız genişletilebilirliği, karmaşık çok işlevli hizmetler ve e-ticaret için harika bir seçenektir;
- Farklı cihazlar için idealdir.
eksileri:
- Genişletilmiş içerik örtüşebilir;
- Alt gezinme öğeleri neredeyse hiç fark edilmez.
3. KESİM MENÜSÜ
Açılır menü veya slayt menüsü, tam işlevselliği ve ekran alanını korumanın bir yoludur. Menü, ekranın sol kenarının arkasına gizlenmiştir ve tıklama veya dokunma ile görüntülenir.
Artıları:
- Bir siteyi düzenlemenin en kompakt yolu;
- Tasarım, hamburger simgesiyle birlikte sitenin mobil sürümünün arayüzü için mükemmel bir seçenek olan duyarlı olabilir;
- Gizli menü, içeriğe güçlü bir vurgu yapmanızı sağlar;
- Sitenin herhangi bir yerinden menüye kolay erişim.
eksileri:
- Gizli gezinme, menüye erişimi zorlaştırır;
- Genişletildiğinde, menü içerikle örtüşür.
4. İNİŞ
Açılış sayfası, belirli amaçlar için optimize edilmiş, uzun veya sonsuz kaydırmalı tek sayfalık bir sitedir.
Artıları:
- Tıklamaktan daha hızlı kaydırma - haber hizmetleri, çevrimiçi mağazalar ve içeriği gerçek zamanlı olarak güncelleyen siteler için uygun bir seçenek;
- Sonsuz kaydırma, kullanıcının dikkatini çeker;
- Büyük miktarda görsel bilgi göndermeye izin verir;
- Mobil platformlar için uygun arayüz.
eksiler:
- Sınırlı kullanıcı özgürlüğü: Bilginin sırasını ve içeriğin sunulma şeklini kontrol etmek imkansızdır;
- Altbilgi kullanılamıyor;
- Sunuculardaki yükü artırır;
- SEO metriklerini azaltır.
5. SABİT MENÜ
Sabit veya "yapışkan" gezinme, menü çubuğunu statik olarak sayfanın belirli bir bölümüne sabitleyerek kullanıcıya kalıcı erişim menü seçeneklerine gidin.
Artıları:
- Sitenin her yerinden tüm bölümlere rahat erişim - en en uygun çözüm tek sayfalık siteler için;
- Başlıkta doğru şekilde sabitlenmiş bir logo ile marka bilinirliğini güçlendirmenizi sağlar;
- Site ziyareti başına görüntülenen sayfa sayısını artırarak analitiği iyileştirir.
eksileri:
- Aşırı yüklenmiş ve araya giren bir başlık, web'de gezinmeyi zorlaştırır ve içerikle örtüşür.
6. HAMBURGER MENÜSÜ
Hamburger menüsü, başlangıçta akıllı telefonlar için geliştirilmiş, ancak giderek dizüstü bilgisayar ekranlarında görünen bir gezinme menüsüdür. Çok çeşitli seçenekleri ve kategorileri gizleyen bir simgedir. Menü, adını ikonun hamburgere benzerliğinden almıştır - üç yatay menü çubuğu, ünlü sandviçin üç katmanını simgelemektedir.
Artıları:
- Hamburger simgesine sitenin herhangi bir yerinden tek bir tıklama veya dokunuşla erişilebilir;
- Sınırsız sayıda seçenek yerleştirmenizi sağlar;
- Mümkün olduğunca yerden tasarruf sağlar ve ideal olarak üzerinde görüntülenir. mobil cihazlar;
- Ekranı veya kullanıcıyı aşırı yüklemeden ikincil seçenekleri (örneğin geçmiş ve ayarlar) kompakt bir şekilde yerleştirmeye yardımcı olur.
eksileri:
- Yaygınlığına rağmen, gizli menüleri kullanıcıların bulması her zaman kolay değildir;
- Hamburger, Android platformunda söylenmeyen standart bir menüdür ve bunu iOs'ta kullanmak, temel gezinme öğelerinin bozulmasına ve gezinme çubuğunun aşırı yüklenmesine neden olur.
7. UYARLANABİLİR NAVİGASYON
Duyarlı navigasyon, farklı ekran genişliklerine ve mobil platformlara otomatik olarak uyum sağlayan değişken bir tasarımdır.
Artıları:
- Çapraz platform: site başlangıçta hem bilgisayarlarda hem de mobil cihazlarda yüksek kaliteli görüntüleme için tasarlanmıştır;
- Tek URL: Duyarlı gezinme ile sitenin mobil sürümünü oluşturmanıza gerek yoktur ve yönlendirmelerin olmaması arama motoru optimizasyonunu artırır.
eksileri:
- Sitelerin masaüstü sürümleri için tipik olan aktif öğeler (gömülü haritalar, video, animasyon), sitenin mobil cihazlarda yüklenmesini yavaşlatır;
- Tasarımın mobil versiyonu, mobil cihaz kullanıcılarının kural olarak daha dar bir site işlevselliği kullanması nedeniyle okunamaz ve aşırı yüklenmiş olabilir;
- Yokluk alternatifler: bağımsız olması durumunda mobil versiyon her zaman geri dönme fırsatı vardır tam versiyon alan. Uyarlanabilir tasarım Bu mümkün değildir: uyarlanmış yerleşim düzeni uygun değilse veya önemli bir gezinme öğesini gizliyorsa, tek seçenek bir dizüstü bilgisayar aramak veya bir rakibin web sitesine gitmektir.
8. MEGA-MENÜ
Mega Menü, üzerine gelindiğinde veya tıklandığında açılan kapsamlı bir gezinme çubuğudur. Mega menü, içeriği yalnızca metin biçiminde gruplar ve sütunlar halinde yapılandırmakla kalmaz, aynı zamanda çeşitli görsel yardımcıları da aktif olarak kullanır.
Artıları:
- Tüm seçenekler aynı anda mevcuttur: kullanıcının mümkün olan en hızlı yönü, çok çeşitli seçenekler, kategoriler ve hizmetler içeren çevrimiçi mağazalar ve siteler için büyük bir artıdır;
- İçerikten ödün vermeden üzerine gelindiğinde, tıklandığında veya dokunulduğunda genişler ve gizlenir.
eksileri:
- organizasyon ilkesinin ihlali navigasyonu zorlaştırabilir;
- mobil cihazlarda uygulanması zor.
9. GELİŞMİŞ ALT BİLGİ
Bir sitenin altbilgisi veya "altbilgisi", sayfanın altbilgisidir. Standart alt bilgi genellikle ek bilgiler içerir: kişiler, bağlantılar, telif hakkı bildirimi ve düğmeler sosyal ağlar... Bu verilere ek olarak, genişletilmiş alt bilgi, birincil veya alternatif navigasyon sistemi olarak kullanılabilecek tam teşekküllü bir navigasyon menüsü içerir. Genişletilmiş bir altbilgi, standart tasarımın ötesine geçmenin ve sitenizin işlevselliğini geliştirmenin kolay bir yoludur.
Artıları:
- Bir alternatif sunar veya ekstra menü Aradığı içeriği ana sayfada bulamayanlar için;
- Önemli içeriği yerleştirmenize izin verir, ancak ana sayfaların içeriğine sığmaz;
- Klasik altbilgideki ek seçenekler (yalnızca iletişim bilgileri) müşteri tabanınızı genişletmenize izin verir;
- Belirli bilgilere dikkati vurgular.
eksileri:
- Sıradan bir kullanıcı genellikle altbilgiyi okumaz.
10. TAM EKRAN NAVİGASYON
Burada sunulan tüm tasarım seçeneklerinin aksine, tam ekran gezinme, ekran alanından tasarruf etmeyi amaçlamaz. Buna karşılık, tam ekran gezinme, metni grafiklerle birleştirerek yüzde 100 giriş sayfasını kullanır.
Artıları:
- Net bir site yapısı sağlar;
- Görsel tasarım için geniş fırsatlar sunar;
- yoğunluk nedeniyle ana sayfa ana alt bölümler yalnızca ekran alanından önemli ölçüde tasarruf sağlayan içeriği içerir;
- Mobil platformlarda basit uygulama;
- Son derece uzmanlaşmış siteler için idealdir.
eksileri:
- İndirme hızında olası düşüş;
- Karmaşık bir navigasyon haritasına sahip siteler için mantıksız seçim.
Ve size her zaman daha fazlasını sunmaya hazır olan Umbrella IT'nin geleneksel bonusu - seçenek 11 - HAREKETLİ NAVİGASYON ELEMANLARI .
Animasyonlu öğelerin temel olarak rasyonel kullanımı veya ek fonlar navigasyon, muhafazakar tasarımı çeşitlendirmenize ve kullanıcıların dikkatini çekmenize olanak tanır.
Artıları:
- Kullanıcıların dikkatini çekin;
- Menüyü yapılandırın;
- Sitenin kullanılabilirliğini artırır ve kullanıcıyı yönlendirir.
eksileri:
- Aşırı görsel dağınıklık sitede gezinmeyi zorlaştırır;
- Web sitesi yükleme hızını yavaşlatabilir.
Bir web navigasyon tasarımı seçme ve geliştirme aşamasında, hangi seçeneğin kazanan olacağını tahmin etmek zordur. Her özel durumun başarısı bir dizi faktöre bağlıdır: iş amacı, sitenin amaçları ve hedefleri, içeriğin doğası, hedef kitle ve kişisel tercihleriniz.
Sunulan örnekler, modern web tasarımını uygulamanıza izin verenlerin sadece küçük bir kısmıdır.Hala sorularınız mı var?, Ve biz en cüretkar projelerinizi gerçeğe dönüştürmenize yardımcı olacağız.
Merhaba sevgili aboneler!
Bir sonraki projedeki çalışmayı yeni bitirdim. Ana menüye ek olarak, şunları da içeriyordu: navigasyon... Ve bu tür şeylerin sadece birkaç satır kodla nasıl yapılabileceğini size göstermenin güzel olacağını düşündüm. Ve bu sadece html ve css aracılığıyla yapılır.
Bu tür gezinme genellikle sitenin sol tarafına yerleştirilir. Gelişiminde karmaşık bir şey yoktur. Her gezinme öğesi bir etiket içine alınır
…
... İçine bir link konur.PSD maketi Bu öğenin eğitim için indirilebilir.
Bu ders şurada da mevcuttur: video versiyonu buradan indirilebilir:
Genel olarak, her şey! Şimdi koda bir göz atalım ve sonunda her şey netleşecek.
MERKEZ HAKKINDA
FOTOĞRAF GALERİSİ
FİYAT LİSTESİ
İLETİŞİM
Gerisini stiller ile yapacağız.
.bar-menu sınıfı için, bitişik blokların konumuna göre ihtiyaç duyulan stiller atanır. Örneğimde, sayfada bu gezinmeden başka bir şey yok, bu yüzden genişliği ona göre ayarlayacağım.
Metin ortalandığından, onu ortalamanın en kolay yolu etiketi ayarlamaktır.
metnin orta hizalaması.
Resimler kesilmiş hadi yazmaya başlayalım css kodu navigasyon için. Daha doğrusu navigasyon bağlantıları için! Stillerin geri kalanına zaten sahibiz.
yazı tipi ailesi: Tahoma;
yazı tipi ağırlığı: kalın;
Ve ne göreceğiz?
Nedenmiş? Gerçek şu ki Arkaplan resmi metin izin verdiği sürece bağlantıya tam olarak yerleştirilir. Yani, bağlantının genişliği ve yüksekliği, içinde bulunan metin tarafından belirlenir. Bu arada, bu açık bir işaret satır içi etiketler... Genişliği ve yüksekliği ayarlayalım:
arka plan: url (resimler / bg-menu-main.jpg) merkez merkezi;
yazı tipi ailesi: Tahoma;
yazı tipi ağırlığı: kalın;
genişlik: 190 piksel;
yükseklik: 27 piksel;
Hala hiçbir şey değişmedi.
arka plan: url (resimler / bg-menu-main.jpg) merkez merkezi;
yazı tipi ailesi: Tahoma;
yazı tipi ağırlığı: kalın;
Ekran bloğu;
Görünüşe göre navigasyon ihtiyacımız olan formu almaya başlıyor:
Bağlantıların her birinin altına dolgu ekleyin. Ayrıca bağlantıların her biri için üst dolgu ekleriz ve unutulmaz bir şekilde yükseklikten çıkarırız:
arka plan: url (resimler / bg-menu-main.jpg) merkez merkezi;
yazı tipi ailesi: Tahoma;
yazı tipi boyutu: 10 piksel; renk: # 056e04;
yazı tipi ağırlığı: kalın;
yükseklik: 21 piksel;
kenar boşluğu-alt: 10 piksel;
üst dolgu: 6px;
İhtiyacımız olanı alıyoruz:
Bar-menü h2 a : üzerine gelin{
arka plan: url (resimler / bg-menu.jpg) merkez merkez;
yazı tipi ailesi: Tahoma;
renk: #ffffff;
yazı tipi ağırlığı: kalın;
kenar boşluğu-alt: 10 piksel;
üst dolgu: 6px;
metin-dekorasyon: yok;
İşte navigasyon menümüz:
Umarım bu öğreticiyi faydalı bulursunuz. Andrey seninleydi. İlginiz için teşekkür ederiz. Sonraki derslerde görüşmek üzere!
İyi bir navigasyon sistemi gezinmenize yardımcı olacaktır. son derece önemlidir iyi sistem navigasyon, ağ nesnelerinde (siteler :)) baş ağrısı olmadan gezinmenize yardımcı oldu. Bazı istisnalar olsa da, çoğu web sitesi iyi sayfa yönetimi olmadan bozulur veya tamamen kaybolur.
Elinizde sitenizin bir planı var mı? Hadi kötü bir şey yapalım. dışarı çıkar ayrı pencere ve bu makaleyi okurken pencereyi açık tutun. Sayfa yönetim sisteminizi inceleme altına almanın zamanı geldi. Potansiyel kullanıcıları kaybedip kaybetmediğinizi, yanıltıcı ve yanıltıcı olup olmadığınızı öğreneceğiz.
Hazır? Bazı temel soruları yanıtlayarak sitenizi test edelim.
önemli sorular
Web sitesi sayfalarının düzeni için doğru gezinme stilini bulmak için ne kadar endişe ve endişe gerekiyor? Bir web sitesinin web kullanılabilirliğini tartışırken, muhtemelen etkili bir yönetim sisteminin bir kullanıcının sahip olabileceği bir dizi temel soruyu yanıtlaması gerektiğini duyacaksınız:
''Neredeyim?''
Ortalama bir web sitesi ziyaretçisi için bu soru önce gelir. Belki de saniyenin binde biri için görünür, çünkü bağlantıyı takip eden herkes her şeyden önce yolunu bulmaya çalışır. Bu nedenle, ana görevlerden biri navigasyon sistemi site sayfasında bu sorunun cevabının bulunduğu yere dikkat çekin.
Navigasyon sistemi ziyaretçiyi yönlendiremezse, utanması sitenin uygunluğunu sorgular.
Şimdi açık bir web sitesi olanlara bir soru: Mevcut sayfa, menünüzün öğelerinde işaretlenmiş mi?
Kullanıcının konumunu söylemenin en kolay yolu, ilgili menü öğesini işaretlemek veya düğmeyi farklı bir renkte vurgulamaktır.
Tekrarlama harikalar yaratır!
açık olsa bile geçerli sayfa bir başlık var, tekrarlama harikalar yarattığı için ilgili menü öğesini grafiksel olarak değiştirmek hiç de gereksiz olmayacak.
'' Neredeydim? ''
Ziyaret edilen bağlantıların renginin solması veya koyulaşması her zaman tek ve en önemli sorun değildir. En iyi yol görüntülenen sayfaları işaretleyin.
Galeta unu görevi mükemmel bir şekilde yerine getirin, böylece ziyaretçi sitedeki mevcut konumlarını kolayca ve hızlı bir şekilde belirleyebilir.
Wufoo sitesi, bunları tur sayfalarında en etkili şekilde kullanır:
Hiyerarşik gezinme ile yeni bir sayfa katmanı eklemek kolaydır. Sadece zincirin ucuna takılır. Büyük olasılıkla, bu tür bir navigasyon sistemini kullanarak bir siteyi kendiniz yazmayacaksınız. Ekmek kırıntıları, site nesneleri arasında gezinmekten çok bir yönlendirme aracıdır. Bunları ek bir öğe olarak kullanın, ancak daha az dinamik bir şey için ana navigasyon sisteminden çıkın.
'' Nereye gidebilirim? ''
Kullanıcının mevcut sayfadan nereye gidebileceğini bilmesi gerekir. Bu, özellikle ziyaretçiniz özel bir şey arıyorsa önem kazanır. Ve ziyaretçiyi siteden uzaklaştırmanın doğru yolu hayal kırıklığıdır.
''Bu bağlantıyı neden takip etmeliyim?''
Sadece menü öğelerini belirtmek her zaman yeterli değildir. ek bilgi her menü öğesine, kullanıcıya sayfanın içeriği hakkında bilgi verir. Ek ayrıntılar, alt metin biçiminde veya imleç herhangi bir menü öğesine hareket ettirildiğinde açılan bir ipucu satırı biçiminde olabilir.
Bir örnek SimpleBits.com'dur. SimpleBits öğesinin altında "son girişler" imzası olmasaydı, bu bağlantının blogları açtığını pek tahmin edemezdim:
Steve Krug'un kitapta yazdığı gibi Beni Düşündürme (Beni düşündürme) bu kullanılabilirlik her zaman aşırı açıklama anlamına gelmez. Ayrıca, ortalama bir İnternet kullanıcısının artık "" Buraya girin yazması gerekmediğini de belirtiyor. anahtar kelime"" arama alanını kullanması gerektiğinde. Burası kendini gösterdiği yer ortak çalışma standartlar ve anlaşmalar.
Herhangi bir karışıklıktan kaçının
Mystery Meat navigasyonu, belirsiz veya belirsiz menü tasarımlarına dayanır. Direksiyon simidi dönüşüyle aynı şekilde navigasyon sistemlerinin tasarımında da çeşitli yönler gelişiyor. Ve bu eğilim de bir nedenden dolayı ortaya çıktı. 'Gizemli et' 'menüsünü kullanırken, kullanıcının kendi başına gezinmesi, tahmin etmesi ve deney yapması gerekir. Sezgi ve zeka hiç gerekli değildir.
Gördüğünüz gibi, geleneğe bağlı kalmaya devam ederek yaratıcı olabilirsiniz. Ancak bu tür navigasyon her ikisinden de uzaktır:
Çözüm
Sitenize bir kez daha bakın. Artık, bir dizi belirli metriğe dayanarak sitenizin kullanışlılığını ölçebilirsiniz. Bir sayfanın bazı bölümleri ek netlikten yoksun mu?
Umarım bu makaleyi beğenmişsinizdir :) ve asla böyle siteler oluşturmayacaksınız: ve :)
not Resimler tıklanabilir;)
Geçen yıl boyunca, web tasarım dünyasında birçok yeni trend gördük. Bu yazıda, modern web tasarımcılarının siteyi sadece çekici değil, aynı zamanda ziyaretçiler için anlaşılır kılmak için uyguladığı site navigasyonuna odaklanacağım. Bu navigasyon trendleri aşağıdakiler için iyi sonuç verir: farklı şekiller Siteler. Ayrıca, bu tür menüler, ekranın farklı şekil ve boyutlarında iyi bir şekilde yansıtılır.
Bu çeşitliliğe bir göz atın ve sonraki projeleriniz için ilginç fikirler bulun!
Yapışkan gezinme
Navigasyon, kullanıcıların A noktasından sitedeki diğer tüm noktalara gitmelerine yardımcı olmak için tasarlanmıştır. Ve gezinme menüsünü sabit bir konumda tutmak, kullanıcıların sitede sayfanın herhangi bir yerinden gezinmesine olanak tanır. Birçok web sitesi ana navigasyonlarını ekranın üst kısmına "sabitler". Kullanıcı içeriği keşfetmek için aşağı kaydırdığında menü her zaman gözlerinin önündedir.
Bu, CSS ve jQuery eklentileri tarafından kolaylaştırılmıştır ve birçok web sitesi teması artık varsayılan olarak yapışkan bir gezinme çubuğu ile birlikte gelmektedir. Sabit gezinme, sitenin daha uzun ve daha ince olduğu mobil kullanıcılar için de harikadır.
Bunu nasıl kullanabilirim?
ile bir web siteniz varsa büyük miktar navigasyon elemanları - o zaman bu seçenek size uyacaktır. Bu, ziyaretçileri sitenizde daha uzun süre tutmanın ve genel sayfa görüntülemelerinizi artırmanın kesin bir yoludur.
Ancak, gezinme çubuğunun çok fazla yer kaplamadığından emin olun. Sayfa içeriğinin çoğunu engelleyecek kadar büyük olmamalıdır. US Magazine, gezinme çubuğunu küçülterek bu sorunu çözdü - bu, onu daha az müdahaleci hale getirdi.
mega menü
Magazin tarzı sitelerin artmasıyla birlikte mega menüler popüler hale geldi. Mega menüler, normal açılır menülerden farklıdır ve genellikle birden çok içerik sütunu içerir. Bu yöntem akıllıca kullanılırsa işe yarar, ancak her sitede işe yaramaz.
Neden onları kullanalım?
Ziyaretçiler, ilgili içeriği görüntüleyerek blogunuz veya web siteniz hakkında fikir edinebilir. Mega menüde daha fazla içerik sağlayabiliyorsanız, neden olmasın?
Ekranda yeterli alan olmadığı için bu trend mobil cihazlarda çalışmaz. Ancak birçok kişi hala internette geziniyor masaüstü bilgisayarlar ve dizüstü bilgisayarlar, bu nedenle mega menü için geniş bir izleyici kitlesi var.
Evrensel navigasyon
Bazı şirketler birden fazla markayı işletir veya sahibi olur ve tüm web sitesinde evrensel gezinme içerir. Örneğin Disney, tema parklarına sahiptir, oyunlar yaratır ve TV şovları ile birlikte filmler üretir. Dikkatleri diğer Disney ürünlerine çekmek için bu çok yönlü navigasyonu markadan bağımsız olarak her sayfada tutmak mantıklı.
Ve bu eğilim sadece holdingler veya holdinglerle sınırlı değil. Bazen New York Media'ya ait olanlar gibi web sitelerinin ağlarında kullanılır. Bir diğeri iyi örnek- markanın tüm uluslararası sitelerine bağlantı veren Mashable'ın başlığında.
Neden kullanalım?
Geniş bir ürün veya marka ağıyla çalışıyorsanız, birleşik bir marka kimliği oluşturmak için hepsini birbirine bağlamak yardımcı olabilir. Evrensel navigasyon, ziyaretçileri diğer ürünlere bakmaya teşvik edebilir.
Dikey Kayar Navigasyon
Artan sayıda web sitesi dikey gezinme kullanıyor ve bazı durumlarda gerçekten iyi çalışıyor. Bu, özellikle geleneksel web tasarımının sınırlarını aşan portföy siteleri veya yaratıcı ajanslarda popülerdir.
Yukarıdaki AWARD örneği, dikey navigasyon için harika bir kullanım örneğidir. Aynı zamanda, görünürlüğü herhangi bir zamanda kalır. Burada can sıkıcı bir hamburger yok - yanda net simgeler görebilirsiniz. Bu, gezinme tasarımına deneysel bir yaklaşımdır, ancak yaratıcı hedef kitlelere sahip web siteleri için işe yarayabilir.
Neden kullanalım?
Bu tekniği yalnızca geleneksel tasarımdan farklı bir tam ekran düzeni kullanmayı düşünüyorsanız deneyin.
Çalışan bir dikey gezinmeyi sıfırdan oluşturmak kolay değildir ve duyarlı projelerde çalışmasını sağlamak zordur. Ancak, denemekle ilgileniyorsanız ve yeni fikirleri deneme isteğiniz çok güçlüyse, dikey menüler iyi bir çözüm olabilir.
Gizli Menü
Her web tasarımcısı hamburger ikonlarını ve bunların responsive tasarımlarda nasıl kullanıldığını bilmelidir. Ancak insanlar hamburger simgesine yaklaştıkça, giderek daha fazla site navigasyonu sürekli olarak görüntüden gizliyor.
Biraz garip: hamburger, kullanıcı için hayatı hiç kolaylaştırmıyor, sitenin diğer sayfalarına hemen bağlantı açmasına izin vermiyor. Ancak, gezinmeyi görünümden kaldırarak ekran alanını temizler. Gizli menülerin, kullanıcıların çoğunluğu tarafından önerilmediğini gösteren çeşitli çalışmalar yapılmıştır. Ancak bu eğilim, akıllı telefon kullanan ve bu simgenin anlamını bilen daha fazla insanla değişebilir.
Neden kullanalım?
Gizli bir menü için en iyi komut dosyası, yüksek teknolojili bir izleyici kitlesidir. Bu ziyaretçiler hamburger simgesini tanıyacak ve "menüyü açmak için burayı tıklayın"ın ne anlama geldiğini anlayacaklardır. Dolayısıyla, bir teknoloji blogu tasarlıyorsanız veya bir B2B çevrimiçi ajansı oluşturuyorsanız, bu işe yarayabilir. Ancak değilse, bu yaklaşımı benimsemeden önce dikkatlice düşünün ve stil lehine kolaylıktan ödün vermediğinizden emin olun.
Duyarlı menüler
Bir web sitesi geliştirirken, mobil navigasyonu kullanmaktan kaçınmanın bir yolu yoktur - çünkü sitenizin mobil cihazlarda görüntülenme olasılığı %100'dür. Tasarımcılar genellikle bazı gezinme bağlantılarını şu şekilde gizler: cep telefonu menülerin küçük ekranlarda daha iyi çalışmasına yardımcı olmak için.
Ancak birçok site, tüm gezinme öğelerini açılır menüleri kullanarak tutma yönündeki yeni eğilimi takip ediyor. Bu genellikle açılır bağlantılar için geçiş simgelerine sahip bir hamburger simgesi gerektirir.
Bu tekniği yalnızca mobil ekranlar veya küçük tarayıcı pencerelerinde. Örneğin, Politico mobil sitesi, her bağlantının yanındaki alt menüleri belirtmek için artı işaretleri (+) kullanır.
Neden kullanalım?
Ziyaretçiler, hangi cihazı kullanıyor olurlarsa olsunlar, web sitesinin tamamını görüntüleyebilmelidir. Alt menüleri koruyarak daha fazla görüntüleme seçeneği sunabilirsiniz.
Her alt menünün bir simge, renk değişikliği veya görsel bir şeyle açıkça etiketlendiğinden emin olun. Ziyaretçiler, menünün bir bağlantıya tıklayarak mı açıldığını veya yeni bir sayfaya gönderilip gönderilmediğini bilmelidir.
atlıkarınca makaleleri
Bu eğilim, bloglar ve büyük haber sitelerinde giderek daha popüler hale geliyor. Bu sitelerin çoğu, her gün yüzlerce olmasa da düzinelerce yeni makale yayınlayabilir.
Sayfanın üst kısmına basit bir atlıkarınca eklemek, ziyaretçilere en son makalelere göz atma fırsatı verir. Bu hikayeler dinamik olarak güncellenebilir. Küçük resimler veya istediğiniz gibi oluşturulabilirler. Örnekleri herhangi bir Vogue makalesinde görebilirsiniz.
Neden kullanalım?
Bol içerikli bir blog geliştiriyorsanız, bu trend kullanıcı için mucizeler yaratmanıza yardımcı olacaktır. Ziyaretçiler en son makalelere göz atabilir ve bu menü, ziyaretçileri ziyaret başına birden fazla hikaye keşfetmeye teşvik eder. Sonuç olarak, bu sitedeki ortalama toplam süreyi artıracaktır. Çok fazla içerik yayınlayan çoğu blog daha fazla trafik almak ister ve atlıkarıncalar bunu yapmanın harika bir yoludur.
Google uzun okumaları sever ve yazarları daha fazla yayınlamaya zorlar ayrıntılı kılavuzlar neredeyse tüm konularda. Bu, web içeriği için harika çalışıyor, ancak okuma deneyimini mahvedebilir. İşleri basitleştirmek için bir içindekiler tablosu kullanın - en başta makalenin bölümlerine bağlantılar. En belirgin örnek, ToC'yi başından beri kullanan Wikipedia'dır.
Neden kullanalım?
İçindekiler tablosu kullanmanın temel nedeni, kullanılabilirliği geliştirmektir. Daha uzun makaleler norm haline geliyor, ancak kullanıcının 5000 kelimenin tamamını okuması gerekmeyebilir. Google, içindekiler tablosuna göre yönlendirme bağlantıları önerebildiğinden, bunlar SERP sıralamalarında da faydalıdır. Bu bir kazan-kazan yaklaşımıdır.
açısal bağlantılar
Bu ilginç bir navigasyon trendi ve hızla yayılıyor. Her başlangıç ve profesyonel işletme, hem sezgisel hem de simetrik bir gezinme oluşturmak için bu stili kullanıyor gibi görünüyor.
Yaygın olarak uygulanan stiller şunlardır:
- Küçük harfler
- Sans-serif yazı tipleri
- Ek yatay boşluk
- Beyaz veya çok açık gölge
Bu tasarım trendi, temiz, canlı ve profesyonel görünümlü navigasyon için kurumsal bir kimlik haline geldi.
Neden kullanalım?
Bu menü sadece profesyonel görünüyor; fark edilir ve göze batmaz ve bir güven duygusu uyandırır. Bir startup veya kurumsal web sitesi tasarlıyorsanız, bu trend muhtemelen navigasyonunuz için en iyi tasarım stilidir. Ancak dikkatli olun: site ruhsuz veya diğer projelerin bir kopyası gibi görünmemelidir.
Tek sayfa noktası gezinme
Tek sayfa web sitelerinin popülaritesindeki artış, birçok yeni trendi ateşledi. Bunlardan biri nokta navigasyonu: ekranın sol veya sağ tarafında bulunan bir dizi dairesel simge. Bu noktaların her biri sitenin farklı bir bölümünü temsil eder. Düzen uzun bir sayfa olduğundan, bu bağlantılar kullanıcının mevcut konumunu belirtmek için vurgulanır. Bu fikri gerçekten beğendim, ancak soru şu ki, insanlar bu noktaların ne anlama geldiğini ve nasıl kullanılacağını anlıyorlar.
Neden kullanalım?
Tek sayfa düzeni geliştiriyorsanız, yapışkan gezinme kullanmanızı öneririz. Bu, her slaydın ne olduğunu ve sayfada hangi bilgilerin olduğunu görmeyi kolaylaştırır.
Ancak üst gezinmeyi kullanamıyorsanız (veya istemiyorsanız), o zaman bu noktalar da iyi bir şeydir. Ya da daha iyisi: ikisini birleştirin! Hatta noktaların yanına metin ekleyin. Birçok seçenek var ve iyi çalışabilirler.
Ne tür navigasyon seversiniz?
