Bu gezinme tasarımı sayesinde web sitesinde kaybolmayacaksınız Inspiration Early Reading
İyi ürünler, belki çok şey görmüşsünüzdür. Ancak pek çok insan iyi ürünlerin arkasındaki keşif ve düşünceyi bilmiyor.
Inspiration Morning Reading'te "ürün insanlarının" nasıl yarattığını, daha iyi bir kullanıcı deneyimi sağladığını ve binlerce insanın hayatını nasıl etkilediğini öğreneceksiniz.
Size özel bir ürün perspektifi sağlamak için yüksek kaliteli içerik seçiyoruz. İyi bir makale öneriniz varsa veya katkıda bulunmak istiyorsanız, lütfen appsolution@ifanr.com ile iletişime geçin.
Bu ilk ilham okuması 5 makale
Giriş : Artık çevrimiçi dünya renkli ve renkli olduğuna ve herkesin ilgisinin daha kısa olduğuna göre, kullanıcıları web sayfanızda nasıl daha uzun süre tutabilirsiniz? "Kırıntı gezinti çubuğu" anahtarlardan biridir.
Bu makale, AppSo (WeChat appsolution), kullanıcılara daha iyi bir web deneyimi sunmanıza olanak tanıyan web tasarımı "kırıntı gezinme çubuğu" nun 3 W'sini paylaşır.
Breadcrumb navigasyon (veya kırıntı izleri) bir yardımcı navigasyon sistemi olarak, kullanıcıya web sitesindeki veya web uygulamasındaki konumunu söyleyebilir. Bu terim, Hansel ve Gretel'in (Candy House olarak da çevrilir) masalından gelir ve kahramanın, onu evine geri götürmek için bir yol oluşturmak için yol boyunca kırıntıları bıraktığı yer.
Bir peri masalının kahramanı gibi Web sitesi kullanıcılarının, gerektiğinde doğrudan üst düzey sayfalara göz atabilmeleri için web sitesi hiyerarşisindeki konumlarını da bilmeleri gerekir. .
Bu makalede, içerik haritası gezinme uygulamalarını ve en iyi uygulamalarını tartışacağız: içerik haritası navigasyonu nedir (Ne), içerik haritası navigasyonu ne zaman kullanılır (Ne zaman) ve içerik haritası navigasyonu nasıl tasarlanır (Nasıl).
1. İçerik haritası gezintisinin kullanımı nedir?
Breadcrumb navigasyonu, kullanıcılara web sitesi hiyerarşisindeki konumunu söyleyebilen etkili bir görsel yardımdır. Bu özellik, kullanıcılar için önemli bir bağlamsal bilgi kaynağıdır , Kullanıcıların aşağıdaki sorulara yanıt bulmasına yardımcı olabilir:
-
Neredeyim? Kullanıcılara, genel site hiyerarşisindeki konumunu söyleyin.
-
Nereye gidebilirim? Kullanıcılar, alakalı web sitesi sütunlarını ve sayfalarını daha iyi bulabilir. Menü çubuğu ile karşılaştırıldığında, kullanıcılar açık ve sezgisel içerik haritası gezintisi yoluyla web sitesinin yapısına daha kolay aşinadır ve anlar.
-
Oraya gitmeli miyim? Breadcrumb gezinme, web sitesinin içerik değerini yansıtır ve kullanıcıları web sitesine göz atmaya devam etmeye teşvik edebilir. Örneğin, bir kullanıcı bir e-ticaret sitesinin bir ürün sayfasını açtığında, ürün istediği ürün olmayabilir, ancak kullanıcı diğer benzer ürünlere göz atmak isteyebilir. Kırıntı gezintisi yoluyla, web sitesinin genel hemen çıkma oranı buna göre azaltılabilir.
1. Kullanıcı eylemlerinin sayısını azaltın Uygulanabilirlik açısından, Breadcrumb gezinme, kullanıcıların önceki sayfayı ziyaret ettiklerinde sahip olması gereken davranışların sayısını azaltır . Önceki sayfaya dönmek için tarayıcının "geri" düğmesini veya web sitesinin ana gezinmesini kullanmanın yanı sıra, kullanıcılar ayrıca kırıntı gezintisini de kullanabilir. 2. Minimum sayfa alanı kaplayın
Kompakt yapı çok fazla sayfa alanı kaplamaz ve içerik haritası gezintisi yatay bir metin bağlantısıdır. Avantajı, aşırı içerik varsa, olumsuz etkinin minimum olmasıdır.
3. Breadcrumb navigasyonu, kullanıcılara sıfır sıkıntı getirir
İnsanlar bu küçük tasarım unsurunu umursamayabilir, ancak kimse kırıntı navigasyonunu anlamıyor ve kimse kırıntı navigasyonunu kullanmıyor.
2. Gezinme için kırıntıları ne zaman kullanmalıyım?
Web sitesinin içerik haritası navigasyonundan yararlanıp yararlanmayacağını test etmenin iyi bir yolu Sitenin gezinme yapısı için bir site haritası veya diyagram oluşturun Ardından, içerik haritası gezintisinin kullanıcıların aynı kategoride veya farklı dizinlerde gezinme yeteneklerini geliştirmelerine yardımcı olup olamayacağını analiz edin.
-
Hesapta görüntülenen yeri gösteren gezinmeyi kullanmanız gereken temel nokta şudur: Web sitesi sınıflandırma dizininde doğrusal veya hiyerarşik bir yapıya sahip büyük miktarda içerik vardır. . Sözde kategori kataloğu, web sitesinin içeriğinin kategoriler halinde sunulabileceği ve bu kategorilerin daha fazla alt kategoriye ayrılmaya devam edebileceği anlamına gelir. Tipik bir örnek, çok sayıda ürünü makul bir şekilde sınıflandıran bir e-ticaret web sitesidir.
-
Tek seviyeli ve makul bir yapıya veya sınıflandırmaya sahip olmayan web siteleri için, içerik haritası gezintisi önerilmez.
Üçüncüsü, kırıntı gezintisinin sınıflandırılması
Breadcrumb navigasyonu basabilir durum , yol ile Öznitellikler 3 kategoriye ayrılmıştır. 1. Konum kırıntıları Konum kırıntı navigasyonu yansıtır Site yapısı . Kullanıcıların web sitesinin hiyerarşik yapısını anlamalarına ve birden çok seviyeli (genellikle iki seviyeden büyük) bir web sitesinde gezinmelerine yardımcı olabilir. Bu, başka yerlerden (arama motoru sonuçları gibi) web sitesinin derin sayfalarına bağlanırlarsa, kullanıcılar için çok yararlıdır.
Konum kırıntı navigasyonu. Resim kaynağı: marketingland
Aşağıdaki şekilde Best Buy durumunda, her metin bağlantısı, web sitesinin mevcut sayfasından önceki sayfaya sağdan sola bir sayfayı işaret edebilir.
En İyi Satın Alma (BestBuy) Konum Breadcrumb Navigasyonu 2. Yol kırıntıları Yol kırıntıları ("tarihsel izler" olarak da bilinir), kullanıcının belirli bir sayfaya göz attığı tüm sayfa yollarını gösterir . Bu tür kırıntı gezinti bağlantıları genellikle dinamik olarak oluşturulur.
Bazen, yol kırıntıları kullanışlıdır, ancak çoğu zaman kafa karıştırıcıdır - çünkü siteye göz atan kullanıcılar aniden bir sayfadan diğerine çok rahat geçebilirler.
Bu tür düzensiz göz atma yolu kullanıcılara pek yardımcı olmaz, ancak tarayıcı "geri" düğmesi ile kolayca değiştirilebilir. Buna ek olarak, bir kullanıcı doğrudan bir web sitesinin derin bir sayfasına girerse, ekmek kırıntıları yolu da işe yaramaz.
Aşağıdaki resim, hedef sayfaya giden iki yolu gösteren bir yol kırıntıları örneğidir.
Yol kırıntı gezintisi. Resim kaynağı: Oracle 3. Özellik Kırıntıları Öznitelik kırıntıları, çok sayıda sayfayı belirli sayfalara göre veya daha genel olarak ürün kategorilerine göre sınıflandıran e-ticaret web siteleri için çok kullanışlıdır. . Bu tür içerik haritası gezintisi, kullanıcıların çeşitli ürünler arasındaki ilişkiyi anlamalarına yardımcı olabilir ve ayrıca başka bir gezinme yöntemi sağlar.
Özellikler kırıntı gezintisi. Görsel kaynağı: pazarlama alanı Örneğin, TM Lewin'in (bir beyefendi gömlek markası) resmi web sitesinde, İçerik haritası gezintisi, belirli bir web ürününün özelliklerini gösterir .
Bu sayfa "Slim Fit" niteliklerini karşılayan tüm kıyafetleri gösterir. Resim kaynağı: T.M. Lewin 4. Hiyerarşik yapı veya göz atma geçmişi?
Kırıntı gezintisinin temel kuralı, kullanıcı tarama geçmişini değil, web sitesi hiyerarşisini göstermektir. bu nedenle Yol kırıntı navigasyonu yerine konum kırıntı navigasyonu veya öznitelik kırıntı navigasyonu kullanılması önerilir .
Dördüncü olarak, içerik haritası gezinme tasarımının en iyi uygulaması
Kırıntı navigasyonu tasarlarken aşağıdaki noktaları unutmayın:
1. Ana gezinmeyi içerik haritası gezintisi ile değiştirmeyin Breadcrumb gezinme ek bir özellik olarak kullanılmalıdır, aksi takdirde yararlı olan ana gezinme menüsünün yerini alamaz. . Unutmayın, içerik haritası gezintisi kullanışlı bir işlev, yardımcı bir gezinme yöntemi ve web sitesinde gezinmenin başka bir yöntemidir.
Apple, kırıntı navigasyonu aracılığıyla ana navigasyonu destekler
2. Mevcut sayfanın içerik haritası gezintisinin bağlantı eklemesine gerek yoktur Kırıntı gezintisinin son öğesinin (kullanıcının mevcut konumu) görüntülenmesi gerekmez Görüntülenmesini istiyorsanız, tıklanamayacağından veya çalıştırılamayacağından emin olun. Kullanıcı zaten mevcut sayfada olduğundan, içerik haritası gezintisine bir bağlantı eklemek gereksizdir. 3. Sınırlayıcıları kullanın Metin bağlantılarının içerik haritası gezinme düzeylerini ayıran en dikkat çekici sembol "büyüktür ( > ) .
Genellikle işaretten büyük olan ( > ) Hiyerarşiye atıfta bulunmak için kullanılır, tıpkı ana dizin gibi > Alt dizinler için bu tür biçim. Kullanılabilecek diğer semboller sağ ok (), çift başlık numarası (») ve eğik çizgidir (/). Hangi sembolün seçileceği, web sitesi tasarımının estetiğine ve kullanılan içerik haritası gezinme türüne bağlıdır.
Resim kaynağı: Dribbble
Resim kaynağı: Dribbble 4. Doğru boyutu ve iç kenar boşluğunu seçin Tasarım yaparken hedef boyutu ve iç kenar boşluklarını dikkatlice değerlendirin. İçerik haritası gezintisi, tüm metin düzeyleri arasında yeterli boşluk bırakmalıdır , Aksi takdirde kullanıcılar kullanımı zor bulabilir. Aynı zamanda, kırıntı gezintisi sayfada baskın bir rol oynayamaz, bu nedenle ana gezinme menüsünden daha belirgin olamaz. 5. Tasarımın odak noktası olmasına izin vermeyin
Süslü yazı tipleri veya parlak renkler kullanmayın, çünkü sizi bunaltacaktır, sonuçta, kırıntı gezintisinin temel amacı o değildir.
İçerik haritası gezintisinin boyutunu ve stilini belirlerken, Temel kural, kullanıcının sayfaya girdikten sonraki ilk odak noktasının içerik haritası gezintisi olmamasını sağlamaktır. .
Aşağıdaki resimdeki kırıntı gezinti tasarımı çok kötü değil, biraz süslü ve kullanıcıların dikkatini sayfanın ana gezinme ve ana içeriğine dikkat etmekten alıkoyabilir.
Resim kaynağı: Dribbble
Google'ın içerik haritası gezintisi hiç de süslü değildir, ancak kullanıcılar kolayca kullanabilir ve bulabilir.
6. Mobil cihazlarda kırıntı navigasyonu kullanmayın Bir mobil cihazda ekmek kırıntıları arasında gezinmeniz gerekirse, arızalanacağını görebilirsiniz. Kırıntı navigasyonu ve cep telefonundaki ilgili işletim ortamının kullanılması açısından olası sebep şudur: Sitenin aşırı karmaşıklığı (Site hiyerarşisi çok derin). Bu sorunu çözmek için, önce nasıl basitleştireceğinizi düşünmelisiniz, ardından kırıntı navigasyonuna ihtiyacınız yoktur. son sözler Breadcrumb gezinme, kullanıcıların tüm web sitesine daha rahat bir şekilde göz atmalarına yardımcı olabilir, ancak esas, web sitesinin içeriğinin ve genel yapısının makul bir şekilde yapılandırılmasıdır. Uygulanabilirliği ve kullanıcı konforunu artırabilen birkaç basit işlevden biridir. Tasarım söz konusu olduğunda, sayfada yalnızca bir satır kaplar, ancak getirdiği katkı yeterince büyüktür.
Teşekkür ederim!
Yazar | Nick Babich, yazılım mühendisi, UI ve UX'e odaklanıyor.
Orijinal bağlantı şeklindedir ve çeviri yetkilendirilmiştir.
Tercüman | Jorri
Bu makale, cep telefonlarını daha kullanışlı hale getiren AppSo tarafından üretilmiştir. WeChat hesap uygulama çözümüne dikkat edin ve başarılı bir şekilde dikkat çeken web sitesi banner'ları hakkında neyin doğru olduğunu size anlatmak için "banner" a yanıt verin.
"Ekmek kırıntıları" nın çevirisi oldukça ilginç.
