K. Andersson
Vad som ska inkluderas i en webbplatsöversikt
Webbplatsstruktur
Lägg upp din webbplats struktur innan du inkluderar den i din webbplats disposition. Håll det enkelt. Skissa på papper, i din anteckningsbok/anteckningsbok eller till och med en whiteboard. Alternativt kan du använda dessa verktyg: Microsoft Visio, whiteboard, Excel, OmniGiraffe eller Google Sheets.
Här är ett exempel på en enkel struktur:
Bildkälla: Neil Patel
Här är övervägandena när du lägger till din webbplatsstruktur i din disposition:
- Kategorisering – Kategorisera dina webbsidor. Gruppera funktionerna och objekten som är samma. När du kategoriserar, håll kategorierna mellan 2 och 7. Balansera ut underkategorierna. Om varje kategori har 5 underkategorier, se till att alla dina kategorier har 5 underkategorier.
- Sidnivåer/djup – Välj ett grunt siddjup. Tre nivåer är idealiska. Men om din webbplats behöver över tre nivåer, i branscher som e-handel, gå för det. Ju grundare djupet på sidnivåerna är, desto lättare är det att navigera på din webbplats.
- Har en global kategori – det här är den enda extra kategorin du behöver förutom de 7. Här placerar du saker som sekretesspolicyer, inloggningar och sökfunktioner. Objekten här ingår som en del av sidhuvudet eller sidfoten.
Varför din webbplatsstruktur är viktig
Din webbplatsstruktur avgör din användarupplevelse, genomsökning, vilka webbplatslänkar du sannolikt kommer att få och de interna länkar som din webbplats kommer att ha.
En webbplats med en fantastisk struktur resulterar i bättre användarupplevelser, vilket resulterar i lägre avvisningsfrekvens. Alla dessa signaler talar om för Google att din webbplats håller hög kvalitet, vilket bidrar till att din webbplats rankas högre i sökmotorernas resultat.
Sökmotorrobotar genomsöker din webbplats struktur för att indexera din webbsida. Hela din webbplats struktur måste sammanfattas och skickas till Google Search Console. Detta görs med hjälp av en XML webbplatskarta.
Utan rätt webbplatsstruktur finns det sidor och webbadresser som sökmotorrobotar aldrig kommer att upptäcka.
Lämplig webbplatsstruktur hjälper din webbplats att ha webbplatslänkar på sökmotorernas resultatsidor, som vårt exempel:
Webbplatslänkar gör det enklare för användare att välja den sida som kan vara mest relevant. Detta ökar din CTR (klickfrekvens), omvandlingsfrekvens och till och med försäljning. Din webbplats kommer sannolikt också att rankas högre än dina konkurrenter.
Här är vad Google hade att säga om vad som händer på webbplatslänken:
“Vi visar endast webbplatslänkar för resultat när vi tror att de kommer att vara användbara för användaren. Om strukturen på din webbplats inte tillåter våra algoritmer att hitta bra webbplatslänkar, eller om vi inte tror att webbplatslänkarna för din webbplats är relevanta för användarens sökfråga, kommer vi inte att visa dem.”
En webbplats med en bra struktur resulterar i att skapa interna länkar som hjälper till med användarnavigering. Det gör det också enklare för sökmotorer att identifiera relaterade sidor, minskar webbplatsdjupet och hjälper till att överföra länkkapital till andra sidor.
Här är en webbsida med mallar för webbplatskartor som du kan hämta inspiration från.
Webbplatslayout
Din webbplats struktur ger dig en skelettskiss av din webbplats. Det hjälper dig att veta hur många kolumner du behöver, till exempel. Du måste nu lista de objekt som kommer att bilda din webbplats layout. Börja med din målsida, eftersom det är den första plats som dina webbplatsbesökare sannolikt kommer att besöka.
Hemsida/målsida
Målsidan är vad användarna kommer att använda för att avgöra om de behöver spendera mer tid på din webbplats eller inte. Vad du ska tänka på här är att layouten kommer att hjälpa mycket med att göra användarnavigering enkel.
När du kommer med din målsidas layout, tänk på vad som ligger ovanför mitten och vad som går under mitten. Detta betyder vad som går före rullning (ovanför mitten) och vad som kommer efter rullning (under mitten).
Här är en bild som hjälper till att skilja mellan ovanför mitten och nedanför mitten:
Bildkälla: Performics
Ovanför vecket
Det här är vad du ska inkludera ovanför mitten i din webbplatsöversikt:
- Logotyp
- Rubrik
- Underrubrik
- Navigeringsfält
- Primär CTA (Call To Action)
Underkategori dessa objekt, till exempel, kategorisera logotypen under navigeringsfältet. Lägg till bilder eller bädda in en video beroende på din bransch.
Nedanför mitten
Här är vad du ska inkludera nedanför mitten i din webbplatsöversikt:
- evenemang
- Bloggartiklar
- Industritrender
- Förtroendeindikatorer
- Pressbevakning
- Platsinformation
- Fördelar och/eller funktioner
Beroende på din bransch, gruppera ovanstående poster ytterligare. Lägg till exempel platsinformation under sidfoten.
Här är en grafisk representation av de kategorier som ska läggas ovanför och under vecket.
Funktioner
Lista de funktioner du vill ha på din webbplats. Tänk bara på vad du måste ha för din webbplats? För att hjälpa dina kunder att få den information de behöver och agera utifrån den? Allt UI/UX, SEO och så vidare. Dessa inkluderar:
- CTA
- Blogg
- Vanliga frågor
- Forum
- Galleri
- säkerhet
- Nyhetsbrev
- Kommentarer
- Rekommendationer
- Blymagnet
- Registrera dig logga in
- Kundvagn
- Betalningen behandlas
- Sociala medier – dela knappar/länkar
Du kanske inte vet exakt var du ska placera dessa funktioner. Detta blir tydligt när du bygger din wireframe (som är en visuell representation av din webbplatskontur. Den visar din webbplats layout, navigering och innehåll. Läs mer om trådramar i den här artikeln.
Här är ett exempel på en trådram:
Bildkälla: Smartdraw
Stil guide
Stilguider och mönster är viktiga för att hjälpa webbdesignern att behålla strukturen och skapa upplevelser för vår publik för olika enheter.
Fördelarna med stilguider är många: de skapar ett gemensamt språk, gör testning enklare, sparar tid och ansträngning och skapar en användbar referens att återkomma till. Dessa inkluderar:
- Listor
- Knappar
- Rubriker
- Paragrafer
- Lyhördhet
- Länkar – aktiv/inaktiv/svävande
- Bakgrund – vit/svart/märkesfärger
- Lista de färger du vill använda. De ska vara i linje med ditt varumärkes färger.
I din disposition, sätt de relaterade stilarna för varje objekt inom parentes.
Resurser
Den främsta drivkraften bakom resurser är vad du kan göra för dem, vad har du gjort hittills, varför ska de välja, hur du kan hjälpa till. Tillsammans med stilguiden behöver du skapa dessa budskap över olika metoder som attraherar din publik bäst.
Lista de resurser som du behöver för att uppnå den funktionalitet du avser. Dessa inkluderar:
- Ikoner
- Teckensnitt
- videoklipp
- Rekommendationer/recensioner
- Illustrationer och grafik
- Marknadsföringskopia – vitböcker, pressmeddelanden
- Bilder och deras källor – företagsbilder/lager
I din disposition, sätt de relaterade resurserna för varje objekt inom parentes.
Navigering
Bestäm vilken navigering du vill ha baserat på din webbplatsstruktur, sidlayout och funktioner (både överst och nedanför mitten). Det kan vara topp, botten, sida eller mitt. Den kan också vara fixerad (statisk) – där den inte ändrar position med rullning – eller sticky (flyttar sig när användaren rullar).
Här är några navigeringsalternativ:
Toppnavigering
Det finns flera alternativ här.
Det här är en hamburgermeny som du sannolikt kommer att hitta på mobila enheter:
Bildkälla: Mall brödrost
Fast toppnavigering
Denna navigering ändrar inte position när användaren rullar. Här är en demo:
Bildkälla: WebFX
Skärmdumpen nedan visar navigeringen på vänster sida och stannar på samma plats även när användaren rullar.
Bildkälla: Template Toaster
Statisk bottennavigering
Här används sidfoten som huvudnavigering. Här är en skärmdump:
Bildkälla: Template Toaster
Varning
Du måste skapa en disposition för varje sida. Varje sida på din webbplats är olika. Även om funktioner som sidhuvud och sidfot förblir desamma, måste din målsida och om-sidor vara olika, även om de har samma utseende och känsla för konsekvens.
Mall
Här är en mall som sammanfattar alla ovan diskuterade detaljer. Byt ut beskrivningarna mellan hakparenteserna med ditt eget företags information.
Sammanfattningsvis
När du skapar en webbplatsöversikt, gå inte in på så mycket detaljer. Konturen är en guide som hjälper dig att hålla din webbdesign på rätt spår, strukturerad och tydlig. Lämna utrymme för anpassning och kreativitet.
