Webflow'da SEO ve UX'e dost olan mega menü oluşturun.

Hayattaki gerçek sorunlar: Güzel web sitesi ... ama müşteriler hiçbir şey bulamıyor!

Hayal edin ... Hem paraya hem de güzel bir webflow web sitesi oluştururken adanmışsınız. Modern tasarım, modern animasyon pürüzsüz ve etkileyici. Ama sonra üzücü bir hikaye ... müşteriler içeri giriyor ve "kafası karıştı"! İstediğiniz sayfayı bulamıyorlar, hizmetinizin ne olduğunu bilmiyorlar veya bulunmayan bir "bize ulaşın" sayfası bulamıyorlar. Son olarak, maalesef kapatmak için tıklayın. Bu sorun, zarif bir alışveriş merkezi inşa etmek gibi. Ancak, müşterinin içeri girdiği ve cesaretini kırana kadar kaybettiği açık bir işaret yok. Ve sonra çıplak ellere çıkın ... Bu tüm web halkının kabusu, değil mi?

Bu sorunun kaynağı genellikle SO -CONRED "Navigasyon Menüsü" veya Web Sitesinin Gezinme menüsünde gizlenir. Özellikle çok fazla bilgiye sahip web sitesi, birçok hizmet, artık cevap vermediği katmanlar halinde istiflenmiş normal bir açılır menü kullanan birçok kategori var. Çünkü hem önemli bilgileri gizlemek hem de kullanıcılar için sinir bozucu deneyimler yaratmak

İllüstrasyonlar istemi: Kullanıcı görüntüsü kaşlarını çatıyor. Karmaşık bir web menüsü ile bilgisayarın önünde kafası karıştı. Bir labirent gibi ileri geri bağlanan bir çizgi ile web sitesinde "kayıp" hissini iletir

Bu sorun neden meydana geldi: Web'in büyüdüğü gün "sıradan menü" tuzağı

Karmaşık navigasyon sorunu doğal olarak gerçekleşmez. Ancak, başlangıçta birçok kez "planlama" eksik olan web sitesinin "büyümesi" nden kaynaklanmaktadır. Sadece birkaç sayfamız olabilir. Ancak işletme artan ürün/hizmeti genişlettiğinde makale her hafta yazıldı ... menümüz, daha çok organize olmadan her şeyi dolduran bir dolap gibi "şişme" ve "karmaşaya" başladı. Aşağıdakilerin neden olduğu ana nedenler:

• Bilgi Mimarisi Eksikliği (IA): Menüye istediğiniz gibi yeni yüzler ekleme eğilimindeyiz. Bilgi mimarisinin ne olduğunu anlamak için kullanıcının nasıl bilgi bulacağı hakkındaki genel resmi düşünmeden bu yüzden en önemli başlangıç noktasıdır.
• Orijinal açılır tabaka: kullanıcıların fareyi yavaş yavaş kovalamasını gerektiren geleneksel menü, tek tek kovalamak için. Bu, çok fazla bilgiye sahip web siteleri için uygun değildir. Çünkü kullanıcının tüm genel bakışları görmemesine neden olan önemli seçenekleri gizler
• Kullanıcının bakış açısını göz ardı edin: Menüyü, nerede olduğunu bilen "Web Sahibi" açısından tasarlıyoruz, ancak ilk kez gelen "yeni kullanıcının" net ve anlaşılması kolay "haritalar" istediklerini anlamayacağını düşünmeyi unuttuk.

Web siteniz daha büyük ve daha karmaşık olduğunda menü yapısı sadece güzellik ile ilgili değildir. Ancak bu, dijital iş yarışmasında "hayatta kalma" meselesi

İllüstrasyonlar istemi: ilk başta düzenli bir şekilde bağlanan birkaç kutu olan site haritası görüntüleri (site haritası). Ve birbirine bağlanan büyük bir harita haline gelen başka bir görüntü, planlama eksikliği olan bir planlama ileten

Eğer bırakılırsa, nasıl etkilenecek: UX ve SEO'nun görünmez felaketi.

Kötü bir navigasyon menüsüne sahip olmak sadece "can sıkıcı" değil, aynı zamanda iş hedefleriniz ve SEO rütbeleriniz üzerinde doğrudan etkisi olan "kaybolur. Bu korkunç etkilere bir göz atın:

• Tahvil oranı yüksektir: Kullanıcılar istenen bilgileri birkaç saniye içinde bulamadıklarında. Hemen arka düğmeye basacaktır. Bu sinyal Google'a web sitenizin "Yararlı Değil"
• Dönüşüm oranı Dang: Ürün satın almak, formu doldurma veya iletişim olsun ... kullanıcı bu hedef sayfalara ulaşmazsa, dönüşüm asla olmaz.
• Kullanıcı deneyimini kırın (Kullanıcı Deneyimi (UX): Kötü deneyimler markanızla kötü anılar yaratacaktır. Tekrar geri dönme fırsatı neredeyse sıfırdır.
• Cidden olumsuz etkiler. GoogleBot, bir web sitesini anlamak ve oluşturmak için bir menü ve bağlantı yapısı kullanır (tarama ve dizinleme). Meniniz karmaşıksa ve önemli sayfalara bir bağlantı zorsa, Google bu sayfaları görmeyecek ve Google'daki sıralamalarla sonuçlanacaktır
• Pazarlama bütçelerinin kaybı: İnsanların web'e girmesi için çok para atabilirsiniz. Ama içeri girip size eşit kaybolurlarsa "para yakıyor"

"Menü" gibi küçük şeylerin düşündüğünüzden daha korkutucu bir zincir üzerinde bir etkisi olduğunu görüyor musunuz? UX yapısı iyileştirmesi çok önemlidir. yatırımcı ilişkileri gibi yüksek güvenilirliğe ihtiyaç duyan web sitelerinde

İllüstrasyonlar istemi: 3 grafik görüntüler efekti gösterir: ilk "hemen çıkma oranı" acele, ikinci "dönüşüm oranı" düşer ve üçüncü çubuk "SEO sıralaması" üzücü bir yüz simgesi ile düşer.

Herhangi bir çözüm var mı? Ve nereden başlamalı: "Mega Menü", çok fazla bilgi için beyaz bir at binicilik şövalyesi

Uluslararası kabul edilen ve çok güçlü olan bu sorunun çözümü ** "Mega Menü" **! Mega menü, çeşitli seviyelerde tüm gezinme seçeneklerini göstermek için Hover kullanıcısı veya tıkladığında genişletilen büyük bir gezinme menüsüdür. Aynı zamanda, sadece uzun bir listeye sahip bir açılır tabaka değil, aynı zamanda iyi organize edilmiş bir "kontrol paneli" dir. Kullanıcının tüm genel görüntüleri görmesine ve hemen istenen parçaya geçmesine yardımcı olur.

göre , mega menü çok iyi çalışıyor çünkü geleneksel menünün problemini doğrudan çözmeye yardımcı oluyor.

Ve nereden başlamalı?

Anahtar, hemen web akışına atlamak değil, ** "ia) ** ** İlk önce:

1. Tüm bilgileri toplayın: liste, sahip olduğunuz tüm web sayfaları.
2. Gruplama (Gruplama): "Hizmet", "Endüstri Çözümleri", "Hakkımızda", "Bilgi Deposu" gibi "kullanıcılar" (bizim için değil) için makul olan ana kategoriyle ilgili bir grup düzenleyin.
3. Hiyerarşi Oluştur: Her grupta bağlantılara öncelik verin. İnsanların önce görmek istediği bağlantı nedir?
4. Net bir kelime kullanın (etiketleme): menüyü ve bağlantıları adlandırın. İnsanların genellikle anladığı, kolay ve anlaşılır

Açık bir "planınız" olduğunda, web akışında mega menünün oluşturulması kolaylaşacak ve anında iyi bir yöne sahip olacaktır. , web sitesinin hem SEO'sunu hem de UX'ini doğrudan etkileyen temeldir .

İllüstrasyonlar istemi: Bir konu ile yayılan mega menü ile birden çok katmanla örtüşen eski açılır menü arasındaki karşılaştırma. Temiz görünüyor ve anlaşılması kolay

Eskiden başarılı olan gerçek şeyden örnekler: B2B Tech web sitesi menüyü değiştirdiğinde, olası satış%200 arttı.

Daha net olabilmek için bu sorunla karşılaşan bir B2B teknoloji şirketinin davasını kaldırmak istiyorum. Web sitelerinde birçok yazılım ürünü var, birçok endüstriyel çözüm var (finansal, perakende, üretim) ve büyük bir bilgi deposuna (makale, vaka çalışmaları, beyaz) sahiptir. Orijinal menüleri, satış ekibi şikayet etmeye başlayana kadar "herhangi bir şey bulmak" olan 3 dengeli bir açılır menüdür, ancak müşteriler sormak için arayabilir, ancak temel sorular Web'den bulunabilir.

Ne yapmalı: Ekip, web akışında mega menü kullanarak tüm yeni gezinme menülerini "elden geçirmeye" karar verdi.

• "Ürünler" menüsü: Kısa açıklamalar ve anlamın anlamı olan tüm yazılım adlarını gösterin
• "Çözümler" menüsü: "Endüstri" ve "iş büyüklüğü" na göre çözüm grubu açıkça.
• "Kaynaklar" menüsü: "Blog" sütunlarına, "vaka çalışmaları" ve en son makaleler veya ilginç durumlarla "indirme" olarak bölünmüştür.

Bulgular: Sadece 3 ay boyunca yeni bir menü yayınladıktan sonra, Web'deki kullanıcı (sitedeki zaman) arttığında, ne olduğu%40 oranında azaltılmıştır. Ve en önemlisi, çeşitli çözümlerden "kalite ipucu"%200'den fazla arttı, çünkü sonunda müşteri şirketin ihtiyaçlarını gerçekten karşılayan bir çözüme sahip olduğunu "keşfetti". Bu, değişen büyük bir navigasyonun gücüdür. "Ziyaretçiler" gerçekten "hedef müşteriler" olur.

İllüstrasyonlar istemi: Web sitesinin ekran görüntüsü. Web sitesi eski ve kullanımı zor. Sonra temiz bir mega menü ve net bir kategori var. Daha yüksek kurşun gösteren bir çubuk grafiği ile

Takip etmek istiyorsanız, ne yapmalı? (Hemen kullanılabilir): Bir elinde mega menü oluşturun -webflow webflow.

Web sitenizi değiştirecek bir mega menü oluşturmaya hazır değil mi? Webflow'un doğrudan "Mega Menü" adlı bir bileşeni olmasa da, esnek ve güçlü oluşturmak için web akışının temel araçlarını kullanabiliriz. Adımları görelim:

1. Adım: Navigatörde Yapı

Webflow'un NAVBAR bileşenini kullanarak başlayın. İçeride, `` nav menü 'ekler' `` açılır listesine '' ekliyor 'Mega menümüzü oluşturacağımız alandır.

Adım 2: Sütunları düzenlemek için Izgara veya FlexBox kullanın.

`` Div Block '' yerine 'div blokuna' div blocku'ya eklenen 'açılır bağlantıyı' silin. İçeriği kolayca ve orantılı olarak düzenlemenize yardımcı olacaktır

Adım 3: İçerik ve bağlantılar girin.

Her ızgara kanalında, içeriği hemen koymaya başlayabilirsiniz. Önerilen yol:

• Grup Başlığı: Kategorinin adı için 'Başlık' (H4 veya H5 gibi) kullanın ("Hizmetimiz", "Endüstriyel Çözümler" gibi) olağanüstü görünmesini sağlar, ancak bir bağlantı değil.
• Bağlantı listesi: Grup konusu altında, her küçük sayfa için `` bağlantı engelleme veya metin bağlantı '' yı yerleştirin.
• İlgi ekleyin (görseller): Anlamı iletmeye yardımcı olmak için `` görüntü veya `` `` `` küçük '' 'ekleyebilirsiniz. Smashing dergisinin önerdiği tasarım ilkelerine göre, olağanüstü promosyon görüntüsü için son sütun belki

4. Adım: UX ile güzel ve dostça özelleştirin.

Markanıza uygun stili özelleştirmek için Web Flow tasarımcısının gücünü kullanın. bağlantının rengini açıkça belirlemeyi unutmayın .

Adım 5: Mobil cihazlarda duyarlı olun (çok önemli!)

Mega menü yalnızca masaüstünde tüm sonuçların tamamını görüntüler. Tablet veya mobil görünüme geçerken, menü normal bir menüye (Hamburger menüsü) geri çökülmelidir. Mobil olarak mega menü div (`` ekran) 'ı gizleyebilir ve hazırlanan standart nav menüsünü kullanabilirsiniz. Mobil kullanıcıların en iyi deneyimi için

Bu bölüme dikkat etmek için bir uzmana ihtiyacınız varsa, webflow web sitesi geliştirme ekibimiz yardımcı olmaya hazırdır.

İllüstrasyonlar istemi: Navigatör panelini gösteren Webflow Designer ekranı, açılır, ızgara ve başlık yapısını açıkça görür ve her adımda bir ok vardır.

İnsanların merak ettiği sorular ve temizlenen cevaplar

Soru: Mega menü, web daha yavaş indirecek mi?
Cevap: Web akışında doğru bir şekilde oluşturulursa hiç değil, çünkü zaten hafif ve etkili olan div, ızgara ve bağlantı gibi temel öğeyi kullanıyoruz. Menüye büyük bir resim veya videoyu koymadığınız sürece hız üzerinde önemli bir etkiye sahip olmayacak

Soru: Mega menü SEO için gerçekten iyi mi? Google kafası karıştı mı?
Cevap: Çok iyi! Öte yandan, Google'ın web sitesi yapınızı daha iyi anlamasına yardımcı olur. Çünkü çeşitli önemli sayfalara açık bir dahili bağlantı oluşturur. Üst düzey, "bağlantı özkaynak" veya "SEO suyu" nu bu sayfalara daha iyi dağıtmaya yardımcı olur. Ayrıca, sıralama için büyük bir olumlu faktör olan kullanıcı katılım sinyallerini (sıçrama oranını azaltmak, bekleme süresi eklemek gibi) artırmaya yardımcı olur.

Soru: Cep telefonu Mega menü nasıl gösterilmeli?
Cevap: Mobile'da Mega Menü tam olarak göstermeyin! Hemen kullanıcı deneyimini yok edecektir. Standart bir mobil menü (Hamburger menüsü) olarak tekrar çökmesini sağlamanın en iyi yolu, tıklarken dikey bağlantıyı (dikey liste) çeşitli bağlantılar için bir akordeona (basılan ve genişletilen alt -menu) gösterebilir. Sipariş için

Soru: Mega menüsüne her sayfayı web'e koymalı mıyız?
Cevap: gerekli değil. Yalnızca önemli görevleri seçmeli ve yalnızca kullanıcının yolculuğuna (kullanıcı yolculuğu) yararlanmalıdır. Çok fazla bağlantı giymek menüye ve odak noktalarının eksikliğine neden olur. Web sitesinin çeşitli yerlerine "ana kapı" olarak görevi seçmelisiniz yeterlidir.

İllüstrasyonlar istemi: görüntü simgesi, "hız", "SEO" ve "mobil" i temsil eden küçük bir simgeye sahip büyük bir soru işareti (?) Her soruyu cevaplamak için.

Anlaması kolay olmak için özet + yapmaya çalışmak istiyorum

Bu noktada, mega menünün sadece güzel bir "tasarım trendi" olmadığını, aynı zamanda web akışında çok güçlü bir "stratejik iş aracı" olduğunu gördüğünüze inanıyorum. Web sitesinin klasik klasik problemlerini, kullanıcılara açık bir "harita" ile "güzel ama kaybolan" çözmeye yardımcı olur. Hızlı ve kolay istediklerini bulmalarını sağlar

Mega menü planlama ve yaratma ile yatırım güçlüdür. Bu, iki -to -bir dönüş sağlayan bir yatırımdır: ** biri, markayı etkileyen ve sadakat eden ve **, Google'ın web sitenizi sevmesine ve ödül olarak daha iyi sıralamalara yardımcı olan güçlü bir SEO yapısı ** olan mükemmel bir kullanıcı deneyimi (UX) **'dır.

Dağınık gezinme menüsünü artık iş büyümenizi engelleyen bir "darboğaz" olarak izin vermeyin. Normal menüyü değiştirme zamanı. Müşterileri açan ve onları sizinle başarıya yönlendiren büyük bir kapı olmak.

Geri dönmeye ve Webflow web sitesi menünüzü şimdi keşfetmeye çalışın. Bu kullanıcılara ve SEO'lara bir cevap mı? Yeterince iyi mi? Eğer hala ... o zaman "Mega Menü" oluşturma zamanı! Ve hem UX hem de SEO'yu anlayan bir profesyonele ihtiyacınız varsa, mükemmel menüyü oluşturmaya yardımcı olmak için gelin. Vision X Brain ekibi her zaman tavsiye için hazır!

İllüstrasyonlar istenmesi: Kullanıcı görüntüsü, bilgisayar ekranında güzel ve net mega menüye sahip bir web sitesi kullanırken mutlu ve tatmin oluyor. Yanında yükselen kalp şeklinde semboller ve grafiklerle

‍