11 Yolları Breadcrumbs Bolster UX Tasarım
Web sitesi kırıntıları kullanıcı deneyimini geliştirmek Kullanıcıları, sitenin hiyerarşisine daha derin girmeye teşvik ederken, aynı zamanda ziyaretçilere belirli bir sayfada tam olarak nerede olduklarını söyleme. Google'ın breadcrumb şeması ekmek kırıntılarını kurmak için başka bir değerli neden. Ancak tasarım faktörü her zaman zordur, bu yüzden örnekleri incelemeye ve fikir toplamaya yardımcı olur.
Bunlar benim en sevdiğim kırıntı stilleri ve yeni tasarım projeleri için güzel bir başlangıç noktası sağlamalı.
1. Wayfair
Wayfair'in web sitesi çok doğru ve tüm UX sayfalar için olağanüstü bir sayfa. Gerçekten sevdiğim bir şey onların kırıntı tarzıdır, çünkü çok büyük değil, aynı zamanda çok da küçük ve rahatsızlık vermez.
Bu kırıntıları ürün sayfalarında bulacaksınız. kategori sayfaları Bu yüzden tüm siteyi takip ediyorlar. Bu, herhangi bir ayrıntılı sayfadan bir kategori veya iki atlamaya izin verir.
Ve kırıntı çubuğu çubuğu farklı bir BG rengi ile navigasyon altında kendi küçük bölümünü alır. Tıknaz değil ama bulmak zor değil. Harika bir tasarım stili ve kişisel favorilerimden biri.
2. Google Desteği
Başka bir bariz söz Google olduğu için biliniyor inanılmaz UX çalışması . Çoğu Google ürününde, sayfalı sayfalara sahip kırıntılarını bulacaksınız. Google Desteği bir site.
Destek sayfaları şemadan analitik ve Search Console aracına kadar her konuda tavsiyede bulunur. Her sayfa kırıntılara sahiptir ve bu kırıntılar sayfa başlığıyla benzer bir alan kaplar ve böylece açıkça görünür olurlar.
Yine de bu linklerin sayfadan atlamaksızın nasıl güzelce karıştığını farkedin. Tasarımda çok doğal hissediyorlar ve bu her zaman ekmek kırıntılarınızla hedef olmalı.
3. MSDN Dokümanlar
İçinde gerçek bir benzersiz kırıntı özelliği var MSDN Dokümanlar gerçekten hoşuma gidiyor. Ok simgeleri ve kategorik bağlantılar gibi tüm tipik tasarım özelliklerine sahiptir, ancak zincirdeki son bağlantı, ekstra sayfalarla özel bir açılır kapanır.
Bunu herhangi bir kırıntı tasarımında daha önce hiç görmedim, ancak kullanıcı için inanılmaz derecede değerli. Genellikle, bu bağlantılara erişmek için başka bir gezinme menüsü gerekir, ancak Microsoft gibi bir site ile gitmek için çok fazla sayfa vardır.
Belgelere değinmekten çok karmaşık olamayacak olursak, bu durum, kırıntıları oluşturmak için en kolay şey değildir. Sitenizde karmaşık bir hiyerarşi varsa, bu teknik parlak ve iyi bir değerdir.
4. Apple
Apple web sitesinde, çevrimiçi mağaza sayfaları ve ürün sayfaları gibi birçok sayfada çok sayıda ekmek kırıntısı gördüm. Ama gözüme takılan küçük bir detay altbilgi bağlantı alanı Alt bağlantılarının üzerinde küçük bir kırıntı ile.
Apple, çok sayıda sayfa ve kaynağa sahip çok büyük bir şirkettir. Bu ekmek kırıntısı sayfanın üst kısmına da eklenmeye değerdi, ancak tabana yakın olmak kesinlikle incinmez.
Tasarımcıları bunu denemeye ve nasıl çalıştığını görmeye teşvik ediyorum. Alt başlık kırıntıları kesinlikle kural değildir ancak görsel gezinme konusunda yardımcı olurlar.
5. TechRadar
Bulduğum ekmek kırıntılarının çoğu genellikle şirket sitelerinde veya e-ticaret mağazalarında bulunur. Ancak bloglar genellikle kendi ekmek kırıntılarına da sahiptir ve iyi bir örnek de TechRadar makale sayfası .
Her ekmek kırıntısı, doğrudan başlık kategorisine bir bağlantı ve makalenin başlığının bir kopyasını içeren oldukça küçüktür. Bu tür bir blog için, bir hiyerarşi olmadığı için, kırıntıları haklı çıkarmak zor.
Ancak, makalenin kategorisini sayfaya eklemek için başka bir yeriniz yoksa bu özellik iyi çalışır.
6. TutsPlus
Çok daha ayrıntılı bir kırıntı tasarımı için TutsPlus blogu . Her makalede, sayfanın en üstünde, birincil ve ikincil kategoriler de dahil olmak üzere küçük bir kırıntı bulunur.
Bu tasarımı çok beğeniyorum çünkü sayfanın başlığına doğal olarak karışıyor. Bu nedenle, başlığı bir kırıntı işareti ve bir başlık etiketinde çoğaltmak yerine, bunu tümünü tek bir öğede birleştirir.
başlık, ekmek kırıntısının bir parçasıdır.
Not: Bu, uygun Google şemasını kullanmaz. Bu nedenle, aramada kırıntılarla birlikte görünmez. Ancak, CTR'yi zorlukla etkilediğimi düşünürsek, tasarım ve sayfa içi kullanılabilirlik, SEO avantajlarından (veya eksikliğinden) çok daha fazladır.
7. Coolspotters
Geleneksel ekmek kırıntıları genellikle eğik çizgi veya sağ ok köşeli ayraç (>) gibi birkaç metin sembolü ile yapışır. Bu çalışmalar onlarca yıldır kullanıldığından ve kullanıcılara aşina oldukları için.
Ama ben her zaman gibi diğer ekmek kırıntısı tasarım trendlerini görmek isterim Coolspotters . Bağlantı öğelerine yerleştirilmiş okları olan özel kırıntı bağlantılarını kullanırlar.
Bol bol bulabilirsiniz açık kaynaklı kırıntı stilleri Bunları kendi siteniz için olduğu gibi. Bu çok geleneksel sayfa öğesini canlandırmak için harika bir yol.
8. MarketWatch
Temel bilgilere geri dönüş, çevrimiçi haber sitesidir MarketWatch . Hepsi iç mesajlar sağa işaret eden ok simgeleri oldukça küçük metin ile özellik breadcrumb navs.
Bu durumda küçük metnin iyi çalıştığını düşünüyorum. Ekmek kırıntılarını kullanmak tam olarak zor değil, ancak sayfanın geri kalanından daha küçük ve daha az anlamlı görünmektedir.
Bloglar ve haber siteleri, daha küçük kırıntılarla daha iyi çalışır çünkü gerçek odak, içeriktir. Yine de onları bir yere sığdırmak güzeldir ve bu tasarım harika bir örnektir.
9. Amazon
Herkes büyük stokları ve ücretsiz gönderimiyle Amazon'u sever. Ama aynı zamanda harika bir siteye sahipler ve ekmek kırıntısı tasarımlarını aşmanın bir yolu yok.
çok ürün sayfaları En üstteki navigasyonun yakınında bir dizi ekmek kırıntısı var. Bu her zaman süper uzun çünkü Amazon'un kategorileri derinleşiyor. Bu, tüketicilerin hangi kategorilere göz atmaya değer olabileceğini ve tasarımcıların / web yöneticilerinin Amazon'un muazzam ürün yapısını incelemeleri için değerli olduğunu görmek açısından değerlidir.
Ancak, her ürün sayfasında aşağı kaydırdığınızda, en çok satanlar listelerine sahip bir "ürün bilgisi" veya "ürün ayrıntıları" bölümü bulacaksınız.
Bu özellik, ürünün en iyi ürünü nerede sattığını göstermek için kırıntı bağlantılarını kullanır ve ziyaretçileri ilgili kategorilere tıklamaya teşvik eder.
Amazon'un kırıntıları hayranlık uyandırıcı derecede uzun olduğundan, çok derin bir hiyerarşiye sahip bir siteniz varsa çalışmaya değer.
10. Etsy
Devasa çevrimiçi DIY / el sanatları e-ticaret sitesi Etsy, tasarımlarını sürekli olarak ilerletiyor. 2005 yılında kuruldu ve siteye bakarak şimdi son 10+ yılda büyük değişiklikler yaptığını görebilirsiniz.
Herhangi birisine bakarsanız kategori sayfası sol üst köşede küçük kırıntıları bulacaksınız. Bunlar, arama yapmanın birincil yolu gibi hissettiren kenar çubuğu navigasyonuna kıyasla belirgin değildir.
Ancak, güzel bir efekt, kategorinin içindeki toplam öğe listesidir. Etsy, siteye daha çok girdiğinizde, her alt kate'de kaç tane toplam ürünün satışa sunulacağını listeler.
Şikayet edeceğim bir şey ürün sayfalarında kırıntıların olmaması. Bu UI için gerçek bir gözetim gibi görünüyor ve umarım bunu ileriye katıyorlar.
11. LinuxInsider
Bu kırıntı tasarımı çok güzel değil ama dikkatimi çeken bir özelliği var.
Her birinin tepesine yakın bir “Sonraki makale” bağlantısını göreceksiniz. LinuxInsider yayını . Bu, doğrudan kırıntıların yanında görünür, bu nedenle gezinmenin bir parçası gibi görünür.
Ekmek kırıntılarıyla etkileşimde bulunan kullanıcılar, genellikle bu kırıntı kategorilerinde dolaşmak isterler. Linux yazılımı ile ilgilenen herkes, o kategorideki bir sonraki makaleye doğru atlamak isteyebilir.
