Vytvořte mega menu, které je přátelské k SEO a UX na WebFlow.

Skutečné problémy v životě: Krásný web ... ale zákazníci nemohou nic najít!

Představte si ... jste oddaní oběma penězům a při vytváření krásného webu WebFlow. Moderní design, moderní animace je hladká a působivá. Ale pak smutný příběh ... zákazníci přicházejí a „zmatení“! Nemohou najít požadovanou stránku, nevědí, jaká je vaše služba, nebo najít stránku „Kontaktujte nás“, nenalezená. Nakonec klikněte a bohužel jej zavřete. Tento problém je, jako byste postavili nákupní centrum, které je elegantní. Neexistuje však jasný znak, do kterého zákazník vešel a ztratil cestu, dokud se nezranil. A pak vyjít do holých rukou ... to je noční můra všech webů, že?

Zdroj tohoto problému je často skrytý v „Navigační nabídce“ nebo v nabídce navigace. Zejména web, který má mnoho informací, existuje mnoho služeb, mnoho kategorií používající normální rozbalovací nabídku, která je naskládána ve vrstvách, na které již neodpovídá. Protože to skrývá důležité informace a vytváří pro uživatele frustrující zážitky

Výzva pro ilustrace: Obrázek uživatele je zamračen. Zmatený před počítačem s komplikovanou webovou nabídkou. S linií propojující sem a tam jako bludiště sdělujte pocit „ztraceného“ na webových stránkách

Proč k tomuto problému došlo: past „obyčejného menu“ v den, kdy roste web

Problém složité navigace se nevyskytuje přirozeně. Je to však způsobeno „růstem“ webu, který na začátku mnohokrát chybí „plánování“. Můžeme mít jen několik stránek. Když však podnik rozšíří zvýšený produkt/službu, byl článek napsán každý týden ... naše menu začalo „otok“ a „nepořádek“ spíše jako skříň, která plnila všechno bez organizace. Hlavní příčiny způsobené:

• Nedostatek informační architektury (IA): Máme tendenci přidávat do nabídky nové tváře, jak si přejete. Aniž by přemýšlel o celkovém obrazu o tom, jak uživatel najde informace, aby pochopil, co je informační architektura, takže je to nejdůležitější výchozí bod.
• Držte se původního rozbalovacího seznamu: Tradiční menu, která vyžaduje, aby uživatelé postupně vznášeli myš, aby honili jeden po druhém. To není vhodné pro webové stránky, které mají mnoho informací. Protože to skrývá důležité možnosti, které uživatel nevidí veškerý přehled
• Přehlížet perspektivu uživatele: Navrhneme nabídku z pohledu „vlastníka webu“, který ví, co je kde, ale zapomněli jsme si myslet, že „nový uživatel“, který přišel poprvé, by nechápal, že chtějí „mapy“, které jsou jasné a snadno pochopitelné.

Když je váš web větší a komplikovanější, struktura nabídky není jen o kráse. Ale jde o „přežití“ v soutěži o digitální obchodní obchodní

Výzva pro ilustrace: SITEMAP Images (SITEMAP), které je zpočátku připojeno několik krabic řádně. A další obrázek, který se stal velkou mapou, která spojila společně, vyjadřuje plánování, které postrádá plánování

Pokud to odejde, jak to ovlivní: neviditelná katastrofa UX a SEO.

Mít špatné navigační menu není jen „nepříjemné“, ale je to „zmizel. Tichý“, který má přímý dopad na vaše obchodní cíle a řady SEO. Podívejte se na tyto děsivé efekty:

• Míra dluhopisů je vysoká: když uživatelé nemohou najít požadované informace během několika sekund. Okamžitě stisknou tlačítko Zpět. Tento signál pošle Googlu, že váš web „není užitečný“
• Míra konverze Dang: Ať už nákup produktů, vyplnění ve formě nebo kontakt ... Pokud uživatel nedosáhne těchto cílových stránek, nikdy se nestane.
• Break The User Experience (User Experience (UX): Špatné zkušenosti vytvoří s vaší značkou špatné vzpomínky. Možnost, aby se znovu vrátili, je téměř nulová.
• Vážně negativně ovlivňuje. GoogleBot používá nabídku a strukturu odkazů k porozumění a vytvoření webu (procházení a indexování). Pokud je vaše nabídka komplikovaná a odkaz na důležité stránky je obtížný, Google tyto stránky neuvidí, což by mělo za následek hodnocení na Googlu.
• Ztráta marketingových rozpočtů: Můžete hodit spoustu peněz pro lidi, aby vstoupili na web. Ale pokud přijdou a ztratí se rovnou vám „spalování peněz“

Vidíte, že malé věci jako „menu“ mají dopad na řetězec, který je děsivější, než si myslíte? Zlepšení struktury UX je velmi důležité. Zejména u webových stránek, které vyžadují vysokou důvěryhodnost, jako jsou vztahy s investory

Výzva pro ilustrace: 3 obrázky grafů ukazují efekt: První spěch „Míra opuštění“, druhá „konverzní rychlost“ klesá a třetí lišta „SEO hodnocení“ se propadne ikonou smutné obličeje.

Existuje nějaké řešení? A kde začít: „Mega Menu“, bílý rytíř na koni pro spoustu informací

Řešení tohoto problému, které bylo přijato na mezinárodní úrovni a je velmi silné, je ** „Mega Menu“ **! Mega nabídka je velká navigační nabídka, která je rozšířena, když uživatel vznášejícího se zobrazí nebo kliknutím zobrazíte všechny možnosti navigace na různých úrovních. Současně to není jen rozbalovací nabídka, která má dlouhý seznam, ale je to „ovládací panel“, který je dobře organizovaný. Pomáhá uživateli vidět všechny celkové obrázky a okamžitě překročit požadovanou část.

Podle skupiny Nielsen Norman, vůdce World -třídy UX, Mega Menu funguje velmi dobře, protože to pomáhá přímo vyřešit problém tradičního menu.

A kde by to mělo začít?

Klíčem není okamžitě skočit do webflow, ale je ** "ia) ** ** Nejprve:

1. Shromažďujte všechny informace: Seznam, všechny webové stránky, které máte.
2. Seskupení (seskupení): Organizujte skupinu, která je relevantní pro hlavní kategorii, která je rozumná pro „uživatele“ (nikoli pro nás), jako je „služba“, „průmyslová řešení“, „o nás“, „znalostní sklad“
3. Vytvořit hierarchii: V každé skupině upřednostňujte odkazy. Jaký je odkaz, který lidé chtějí vidět jako první?
4. Použijte jasné slovo (označování): Pojmenujte nabídku a odkazy. Se slovy, kterým lidé obecně rozumějí, snadné a přímé

Pokud máte jasný „Blueprint“, vytvoření mega mega v webflow se stane snadným a okamžitě má dobrý směr. Dobrý plán IA je základem, který přímo ovlivňuje SEO i UX webu .

Výzva pro ilustrace: Porovnání staré rozbalovací nabídky, která se překrývá s více vrstvami s mega nabídkou, která je rozprostřena s tématem s ikonou. Vypadá čistě a snadno pochopitelný

Příklady ze skutečné věci, která bývala úspěšná: Když webová stránka B2B změnila nabídku, náskok se zvýšil o 200%.

Abych byl jasnější, chtěl bych zvednout případ technologické společnosti B2B, která se s tímto problémem setkala. Jejich webové stránky mají mnoho softwarových produktů, existuje mnoho průmyslových řešení (finanční, maloobchodní, výroba) a mají velký znalostní sklad (článek, případové studie, bílá). Jejich původní nabídkou je rozbalovací nabídka 3 -skvrny, která „najde cokoli“, dokud se prodejní tým nezačne stěžovat, ale zákazníci si mohou zavolat, ale základní otázky naleznete z webu.

Co dělat: Tým se rozhodl „přepracovat“ všechny nové navigační nabídky pomocí mega nabídky na webflow.

• Nabídka "Products": Zobrazit všechna jména softwaru s krátkými vysvětleními a významem významu
• Nabídka „Řešení“: Skupina řešení podle „průmyslu“ a „velikosti podnikání“ jasně.
• Nabídka „Zdroje“: Rozdělená do sloupců „Blog“, „Případové studie“ a „Stahování“ s nejnovějšími články nebo zajímavými případy jako zvýraznění.

Výsledky: Po vydání nové nabídky po dobu pouhých 3 měsíců je to, co se stalo, snížena o 40%, když se uživatel na webu (čas na webu) zvýšil. A co je nejdůležitější, „vedoucí kvality“ z různých řešení se zvýšil o více než 200%, protože nakonec zákazník „objevil“, že společnost má řešení, které skutečně vyhovuje jejich potřebám. Toto je síla velké navigace, která se mění. „Návštěvníci“ se skutečně stali „cílovými zákazníky“.

Výzva pro ilustrace: Obrázek na obrazovce před a po webu. Web je starý a obtížně používán. After je čistá mega nabídka a jasná kategorie. S grafem tyče zobrazující vyšší vedení

Pokud chcete následovat, co dělat? (Lze použít okamžitě): Vytvořte mega nabídku na ruce -rozbíjející webflow webflow.

Jste připraveni vytvořit mega nabídku, která změní váš web, že? Ačkoli WebFlow nemá komponentu s názvem „Mega Menu“ přímo, můžeme použít základní nástroje WebFlow k vytvoření flexibilního a výkonného. Podívejme se na kroky:

Krok 1: Struktura v navigátoru

Začněte pomocí komponenty NavBar WebFlow. Uvnitř, `nav menu 'přidává„ rozbalovací nabídky “do„ rozevíracího seznamu “, který byl otevřený, je oblast, kterou vytvoříme mega nabídku.

Krok 2: Pro uspořádání sloupců použijte mřížku nebo flexbox.

Smažte „rozbalovací odkaz“, který byl připojen k „div bloctu k“ rozevíracímu seznamu “místo` div block` to bude hlavní kontejner mega mega mega. Pomůže vám snadno a úměrně uspořádat obsah

Krok 3: Zadejte obsah a odkazy.

V každém kanálu mřížky můžete začít obsah okamžitě. Doporučený způsob je:

• Název skupiny: Použijte „nadpis“ (například H4 nebo H5) pro název kategorie (například „naše služba“, „průmyslová řešení“), aby vypadala vynikající, ale nikoli odkaz.
• Seznam odkazů: V rámci tématu skupiny umístěte pro každou malou stránku `Blokování odkazu nebo odkaz na text.
• Přidat zájem (vizuální): Můžete do strany přidat `` Imagey nebo `` `` `` `` `Small`, abyste pomohli zprostředkovat význam. Nebo možná poslední sloupec pro vynikající propagační obrázek, podle principů návrhu, které Smashing Magazine doporučuje

Krok 4: Přizpůsobte si krásné a přátelské UX.

Pomocí síly WebFlow Designer přizpůsobujte styl tak, aby odpovídal vaší značce. Nezapomeňte dát polstrování, abyste měli pohodlný prostor (bílý prostor) a jasně určete barvu odkazu .

Krok 5: Reagovat na mobily (velmi důležité!)

Mega nabídka zobrazí pouze úplné výsledky na ploše. Při přechodu na tablet nebo mobilní zobrazení musí být nabídka zhroucena zpět do normální nabídky (Hamburger Menu). Můžete skrýt mega nabídku Div (`displej) na mobilu a použít standardní Nav nabídku, která je připravena. Pro nejlepší zážitek mobilních uživatelů

Pokud potřebujete odborníka, aby se postaral o tuto část, tým pro vývoj webových stránek WebFlow je připraven pomoci.

Výzva pro ilustrace: Obrazovka WebFlow Designer zobrazující panel navigátoru vidí strukturu rozbalovací sítě, mřížky a směřování jasně a v každém kroku má šipku.

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Otázka: Mega Menu, bude stahování webu pomaleji?
Odpověď: Vůbec ne, pokud je vytvořen správně na webflow, protože používáme základní prvek jako Div, mřížka a odkaz, který je již lehký a efektivní. Pokud do nabídky nevkládáte velký obrázek nebo video

Otázka: Je mega menu pro SEO opravdu dobré? Google je zmatený?
Odpověď: Velmi dobře! Na druhou stranu pomáhá Googlu lépe porozumět struktuře vašich webových stránek. Protože vytváří jasné vnitřní odkaz na různé důležité stránky. Nejvyšší úroveň pomáhá lépe distribuovat „kapitál propojení“ nebo „Seo Juice“ na tyto stránky. A také pomáhá zvyšovat signály zapojení uživatelů (jako je snížení míry okamžitého opuštění a přidávání doby přetržení), což je skvělý pozitivní faktor pro hodnocení.

Otázka: Jak by měl mobilní telefon ukázat mega nabídku?
Odpověď: Nezobrazujte úplné mega nabídky na mobilu! Okamžitě zničí uživatelský zážitek. Nejlepší způsob, jak se zhroutí zpět jako standardní mobilní nabídka (nabídka hamburger), která při kliknutí zobrazí vertikální odkaz (vertikální seznam), může být vytvořen do akordeonu (sub -menu, která je stisknuta a rozšířena) pro různé odkazy. Pro objednávku

Otázka: Měli bychom umístit každou stránku na web v mega nabídce?
Odpověď: Není to nutné. By si měl vybrat pouze důležité povinnosti a prospěch pouze na cestu uživatele (cestu uživatele). Nošení příliš mnoho odkazů způsobí nabídku a nedostatek ohniskových bodů. Měl by si vybrat povinnost jako „hlavní dveře“ do různých částí webu, je dost

Výzva pro ilustrace: Ikona obrázku, velký otazník (?) S malou ikonou, která představuje „rychlost“, „SEO“ a „mobilní“ obklopující, aby odpověděla na každou otázku.

Shrnutí, které má být snadno pochopitelné + chtějí to zkusit udělat

V tomto okamžiku se domnívám, že vidíte, že mega menu není jen krásným „trendem designu“, ale je to „strategický obchodní nástroj“, který je velmi silný na webflow. Pomáhá řešit klasické klasické problémy webu, které „krásně, ale prohrály“ s jasnou „mapou“ pro uživatele. Nutí je najít to, co chtějí rychle a snadno

Investice je silná s plánováním a vytvářením mega menu. Je to investice, která poskytuje dva -per -to -one návratnost: ** Jeden je vynikající uživatelský zážitek (UX) **, který zapůsobí a loajalita ke značce a ** je silná struktura SEO **, která Google pomáhá milovat váš web a poskytovat lepší řady jako ceny.

Nedovolte, aby chaotický navigační menu jako „úzký profil“, který už brání růstu vašeho podnikání. Je čas změnit normální nabídku. Stát se velkými dveřmi, které otevírají zákazníky a vede je k úspěchu s vámi.

Zkuste se vrátit a prozkoumat nabídku webu WebFlow. Je to odpověď na uživatele a SEO? Dost dobrý? Pokud je stále ... pak je čas vytvořit „Mega Menu“! A pokud potřebujete profesionála, který chápe UX i SEO, přijďte vytvořit perfektní menu. Tým Vision X Brain je vždy připraven na radu!

Výzva pro ilustrace: Obrázek uživatele se šťastně usmívá při používání webu s krásnou a jasnou mega nabídkou na obrazovce počítače. Se symboly a grafy ve tvaru srdce, které stoupají vedle

‍