Opret mega -menu, der er venlig med SEO og UX på webflow.

Rigtige problemer i livet: Smukt websted ... men kunder kan ikke finde noget!

Forestil dig ... du er dedikeret til både penge, og når du opretter et smukt webflow -websted. Moderne design, moderne animation er glat og imponerende. Men så en trist historie ... kunder kommer ind og "forvirrede"! De kan ikke finde den side, du ønsker, ved ikke, hvad din tjeneste er, eller finde en side "Kontakt os", ikke fundet. Til sidst skal du klikke for at lukke det desværre. Dette problem er som om du bygger et indkøbscenter, der er elegant. Men der er ikke noget klart tegn, som kunden gik ind og mistede vejen, indtil de blev modet. Og gå derefter ud til bare hænder ... dette er mareridt for alle webfolk, ikke?

Kilden til dette problem er ofte skjult i den såkaldte "navigationsmenu" eller navigationsmenuen på webstedet. Især det websted, der har en masse information, der er mange tjenester, mange kategorier, der bruger en normal dropdown -menu, der er stablet i lag, det ikke svarer mere. Fordi det både skjuler vigtige oplysninger og skaber frustrerende oplevelser for brugerne

Spørg om illustrationer: Brugerbilledet er rynket. Forvirret foran computeren med en kompliceret webmenu. Med en linje, der forbinder frem og tilbage som en labyrint, formidler følelsen af "tabt" på hjemmesiden

Hvorfor skete problemet: fælden med "almindelig menu" den dag, hvor nettet vokser

Problemet med kompleks navigation forekommer ikke naturligt. Men det er forårsaget af "væksten" på det websted, der mangler "planlægning" mange gange i begyndelsen. Vi har måske kun et par sider. Men da virksomheden udvider øget produkt/service, blev artiklen skrevet hver uge ... vores menu begyndte at "hævelse" og "rod" mere som et skab, der fyldte alt uden at organisere. De vigtigste årsager forårsaget af:

• Manglende informationsarkitektur (IA): Vi har en tendens til at tilføje nye ansigter til menuen, som du ønsker. Uden at tænke på det samlede billede om, hvordan brugeren finder information for at forstå, hvilken informationsarkitektur er, så er det det vigtigste udgangspunkt.
• Hold dig til den originale dropdown: traditionel menu, der kræver, at brugerne gradvist svæver musen for at jage en efter en. Det er ikke egnet til websteder, der har en masse information. Fordi det skjuler vigtige muligheder, der får brugeren til ikke at se alle overblik
• Overse brugerens perspektiv: Vi designer menuen fra synspunktet om "webejer", som ved, hvad der er her, men vi glemte at tro, at den "nye bruger", der kom i første gang, ikke ville forstå, at de vil have "kort", der er klare og lette at forstå.

Når dit websted er større og mere kompliceret, handler menuen ikke kun om skønhed. Men det er et spørgsmål om "overlevelse" i digital forretningskonkurrence

Spørg om illustrationer: Sitemap -billeder (sitemap), som der først er et par kasser, der er forbundet på en ordnet måde. Og et andet billede, der blev et stort kort, der forbundet sammen, formidler en planlægning, der mangler planlægning

Hvis det er tilbage, hvordan vil det påvirke: den usynlige katastrofe for UX og SEO.

At have en dårlig navigationsmenu er ikke kun "irriterende", men det er "forsvinder. Stille", der har en direkte indflydelse på dine forretningsmæssige mål og SEO -rækker. Se på disse skræmmende effekter:

• Obligationsrate er høj: når brugerne ikke kan finde de ønskede oplysninger inden for få sekunder. De trykker øjeblikkeligt på knappen. Dette signal sender til Google, at dit websted "ikke er nyttigt"
• Konverteringsfrekvens dang: Uanset om du køber produkter, udfylder formularen eller kontakter ... Hvis brugeren ikke når disse målsider, vil konvertering aldrig ske.
• Bryde brugeroplevelsen (brugeroplevelse (UX): Dårlige oplevelser skaber dårlige minder med dit brand. Muligheden for dem at komme tilbage igen er næsten nul.
• Alvorligt påvirker negativt. GoogleBot bruger en menu og en linkstruktur til at forstå og oprette et websted (gennemsøgning og indeksering). Hvis din menu er kompliceret, og et link til vigtige sider er vanskeligt, vil Google ikke se disse sider, hvilket resulterer i placeringerne på Google.
• Tab af markedsføringsbudgetter: Du kaster muligvis en masse penge for folk at komme ind på nettet. Men hvis de kommer ind og går tabt lig med dig "Burning Money"

Ser du, at små ting som "menu" har indflydelse på en kæde, der er mere skræmmende, end du tror? UX -strukturforbedring er meget vigtig. Især med websteder, der har brug for høj troværdighed som investorrelationer

Spørgsmål om illustrationer: 3 Grafbilleder viser effekt: Den første "Bounce Rate" Rush, den anden "konverteringsfrekvens" falder ned, og den tredje bar "SEO rangerer" faldt med et trist ansigtsikon.

Er der nogen løsning? Og hvor man skal starte: "Mega Menu", en hvid ridning af ridder for en masse information

Løsningen til dette problem, der er blevet accepteret internationalt og er meget kraftfuld, er ** "Mega Menu" **! Mega -menu er en stor navigationsmenu, der udvides, når Hover -brugeren eller klik for at vise alle navigationsmuligheder på forskellige niveauer. På samme tid er det ikke kun en dropdown, der har en lang liste, men det er et "kontrolpanel", der er godt organiseret. Hjælper brugeren med at se alle de samlede billeder og straks krydse til den ønskede del.

Ifølge Nielsen Norman Group, World -Class UX -lederen, fungerer MEGA -menuen meget godt, fordi det hjælper med at løse problemet med den traditionelle menu direkte.

Og hvor skal det starte?

Nøglen er ikke at hoppe ind i webflowen med det samme, men er ** "ia) ** ** først:

1. Saml alle oplysninger: Liste, alle websider, du har.
2. Grouping (Grouping): Organiser en gruppe, der er relevant for hovedkategorien, der er rimelig for "brugere" (ikke for os), såsom "service", "branche -løsninger", "om os", "videnlager"
3. Opret hierarki: I hver gruppe skal du prioritere linkene. Hvad er det link, som folk vil se først?
4. Brug et klart ord (mærkning): Navngiv menuen og links. Med ord, som folk generelt forstår, let og ligetil

Når du har en klar "Blueprint", vil oprettelsen af mega -menu i webflowet blive let og har øjeblikkeligt en god retning. Den gode IA -plan er det fundament, der direkte påvirker både SEO og UX på webstedet .

Spørg om illustrationer: Sammenligningen mellem den gamle dropdown -menu, der overlapper flere lag med mega -menu, der er spredt med et emne med ikon. Ser ren og let ud

Eksempler fra den rigtige ting, der plejede at få succes: Da B2B Tech -webstedet har ændret menuen, steg føringen med 200%.

For at være klarere vil jeg gerne løfte sagen om et B2B -teknologiselskab, der har stødt på dette problem. Deres hjemmeside har mange softwareprodukter, der er mange industrielle løsninger (økonomisk, detailhandel, produktion) og har et stort videnopbevaring (artikel, casestudier, hvid). Deres originale menu er en 3 -etagers dropdown -menu, der "finder noget", indtil salgsteamet begynder at klage, men kunderne kan ringe for at stille, men de grundlæggende spørgsmål kan findes fra Internettet.

Hvad skal man gøre: Holdet har besluttet at "gennemgå" alle nye navigationsmenuer ved hjælp af Mega -menu på WebFlow.

• Menu "Produkter": Vis alle softwarenavne med korte forklaringer og betydningen af betydningen
• Menuen "Løsninger": Løsningsgruppen i henhold til "industrien" og "forretningsstørrelse" tydeligt.
• Menuen "Ressourcer": opdelt i "blog" -kolonner ", casestudier" og "downloads" med de nyeste artikler eller interessante sager som højdepunkter.

Resultater: Efter at have frigivet en ny menu i kun 3 måneder, er det, der skete, afgrænset, reduceret med 40%, når brugeren på nettet (tid på stedet) steg fordoblet. Og vigtigst af alt, "kvalitetsledning" fra forskellige løsninger steg med mere end 200%, for i sidste ende "opdagede kunden", at virksomheden har en løsning, der virkelig imødekommer deres behov. Dette er kraften i en stor navigation, der ændrer sig. "Besøgende" bliver virkelig "målkunder".

Spørg om illustrationer: Bear & After Screen -billedet af webstedet. Hjemmesiden er en gammel og vanskelig at bruge. Efter er en ren mega -menu og en klar kategori. Med en stanggraf, der viser den højere bly

Hvis du vil følge, hvad skal jeg gøre? (Kan bruges med det samme): Opret mega -menu på en hånd -shake webflow webflow.

Klar til at oprette en mega -menu, der ændrer dit websted, ikke? Selvom WebFlow ikke har en komponent med navnet "Mega Menu" direkte, kan vi bruge de grundlæggende værktøjer i webflowen til at skabe den fleksibel og kraftfuld. Lad os se trinnene:

Trin 1: Struktur i Navigator

Begynd med at bruge NAVBAR -komponenten i WebFlow. Inde inde tilføjer 'NAV -menu''en' dropdown 'til den' dropdown -liste ', der åbnede, er det område, som vi opretter vores mega -menu.

Trin 2: Brug gitter eller flexbox til at arrangere kolonner.

Slet det 'dropdown -link', der er knyttet til den 'div Blocku til' dropdown -listen 'i stedet for' div -blok ', dette vil være din mega -menu's hovedcontainer. Hjælper dig med at organisere indholdet let og i forhold

Trin 3: Indtast indhold og links.

I hver gitterkanal kan du begynde at sætte indholdet med det samme. Den anbefalede måde er:

• Gruppetitel: Brug 'overskrift' (såsom H4 eller H5) til navnet på kategorien (såsom "vores service", "industrielle løsninger") får det til at se udestående, men ikke et link.
• Linkliste: Under gruppemålet skal du placere `linkblokering eller tekstlink 'for hver lille side.
• Tilføj interesse (visuals): Du kan tilføje `` Imagey eller `` `` `lille 'i siden for at hjælpe med at formidle mening. Eller måske den sidste kolonne til det fremragende promoveringsbillede, ifølge designprincipperne, som Smashing Magazine anbefaler

Trin 4: Tilpas smuk og venlig til UX.

Brug kraften fra WebFlow Designer til at tilpasse stil til at matche dit brand. Glem ikke at lægge en polstring for at have et behageligt rum (hvidt rum) og helt klart bestemme farven på linket .

Trin 5: Lav lydhør på mobil (meget vigtigt!)

Mega -menu viser kun de fulde resultater på skrivebordet. Når du skifter til tablet- eller mobilvisning, skal menuen kollapses tilbage i en normal menu (Hamburger -menu). Du kan skjule Mega Menu Div (`Display) på mobil og bruge standard NAV -menuen ', der er forberedt. For den bedste oplevelse af mobilbrugere

Hvis du har brug for en ekspert til at tage sig af denne del, webflow -webstedsudviklingsteam klar til at hjælpe.

Spørgsmål om illustrationer: WebFlow Designer -skærm, der viser Navigator -panelet, ser strukturen af dropdown, gitter og overskrift tydeligt og har en pil i hvert trin.

Spørgsmål, som folk har en tendens til at undre sig, og de svar, der er ryddet

Spørgsmål: Mega -menu, vil nettet downloade langsommere?
Svar: Overhovedet ikke, hvis det oprettes korrekt på webstrømmen, fordi vi bruger grundlæggende element som div, gitter og link, der allerede er let og effektivt. Så længe du ikke lægger et stort billede eller en video i menuen, har ikke betydelig indflydelse på hastigheden

Spørgsmål: Er mega -menu virkelig god for SEO? Google er forvirret?
Svar: Meget godt! På den anden side hjælper det Google med at forstå din webstedsstruktur bedre. Fordi det skaber en klar intern forbindelse til forskellige vigtige sider. Det øverste niveau hjælper med at distribuere "linkkapitalen" eller "SEO -juice" til disse sider bedre. Og hjælper også med at øge brugerengagementssignaler (såsom reduktion af afvisningshastighed, tilføjelse af opholdstid), hvilket er en stor positiv faktor for placering.

Spørgsmål: Hvordan skal mobiltelefonen vise mega -menu?
Svar: Vis ikke den fulde mega -menu på mobil! Det vil straks ødelægge brugeroplevelsen. Den bedste måde at få det til at kollapse tilbage som en standard mobilmenu (hamburgermenu), som når det klikker, viser det lodrette link (lodrette liste), kan gøres til en harmonika (den sub -menu, der presses og udvides) for forskellige links. Til ordre

Spørgsmål: Skal vi sætte hver side på nettet i mega -menuen?
Svar: Ikke nødvendigt. Bør kun vælge vigtige opgaver og kun gavne brugerens rejse (brugerrejse). At bære for mange links vil forårsage menuen og manglen på fokuspunkter. Skal vælge pligten som en "hoveddør" til forskellige dele af webstedet er nok

Spørg om illustrationer: Billedikon, et stort spørgsmålstegn (?) Med et lille ikon, der repræsenterer "hastighed", "SEO" og "mobil", der omgiver for at besvare hvert spørgsmål.

Resume for at være let at forstå + vil prøve at gøre

På dette tidspunkt tror jeg, at du ser, at Mega -menu ikke kun er en smuk "designtrend", men det er et "strategisk forretningsværktøj", der er meget kraftfuld på webstrømmen. Det hjælper med at løse de klassiske klassiske problemer på webstedet, der "smukke, men mistede" grundigt med et klart "kort" til brugere. Får dem til at finde, hvad de hurtigt og nemt vil have

Investeringen er stærk med planlægning og oprettelse af en mega -menu. Det er en investering, der giver to -per -til -en retur: ** En er en fremragende brugeroplevelse (UX) **, der imponerer og loyalitet over for mærket og ** er en stærk SEO -struktur **, som hjælper Google med at elske dit websted og give bedre rækker som præmier.

Lad ikke den rodede navigationsmenu som en "flaskehals", der hindrer din forretningsvækst længere. Det er tid til at ændre den normale menu. At blive en stor dør, der åbner kunder og guider dem til succes med dig.

Prøv at gå tilbage og udforske din webflow -webstedsmenu nu. Er det et svar på brugere og SEO'er? God nok? Hvis det stadig er ... er det tid til at bygge "Mega Menu"! Og hvis du har brug for en professionel, der forstår både UX og SEO, skal du hjælpe med at skabe den perfekte menu. Vision X Brain Team er altid klar til rådgivning!

Spørg om illustrationer: Brugerbilledet smiler lykkeligt og tilfreds, mens du bruger et websted med smuk og klar mega -menu på computerskærmen. Med hjerteformede symboler og grafer, der stiger ved siden af

‍