Indhold
En god opbygning af hjemmeside betyder, at både besøgende og Google kan se, hvad I laver, og finde den rigtige side med et eller to klik. Det kræver tre ting: en flad struktur, der er grupperet efter, hvordan jeres kunder tænker; en menu med få punkter i kundernes egne ord; og et hjemmeside layout på hver side, der går fra løfte til bevis til detaljer til én tydelig handling. Får I de tre på plads, er resten finjustering.
Her gennemgår vi hjemmesidens struktur, navigationen, layoutet på den enkelte side, skabeloner til de vigtigste sidetyper, mobilen og koblingen til SEO. Hvilke sider I skal have, står under hvad skal en hjemmeside indeholde. Denne artikel handler om, hvordan de hænger sammen og ser ud.
1. Strukturen: flad og grupperet efter kunderne
Hjemmesidens struktur er det hierarki, siderne står i: forside øverst, hovedsider under den, undersider under dem. For en servicevirksomhed er to niveauer under forsiden næsten altid nok. Nielsen Norman Group anbefaler flade hierarkier, når kategorierne er klare, fordi indhold, der ligger mange niveauer nede, er svært at finde, og brugerne giver op undervejs.
Den hyppigste fejl er at gruppere efter, hvordan virksomheden er organiseret, i stedet for hvordan kunden leder. Kunden tænker ikke “Afdeling for installation”; kunden tænker “ny varmepumpe”. Navngiv grupperne efter problemet eller ydelsen, og sorter efter, hvad flest efterspørger.
Er I i tvivl, så test det. Ved card sorting skriver I jeres sider på kort og beder kunderne om at lægge dem i bunker, der giver mening for dem. Nielsen Norman Group anbefaler mindst 15 deltagere, fordi folk sorterer meget forskelligt. Bagefter kan en tree test vise, om folk faktisk finder en bestemt side i den nye menu. Begge dele kan køres online i et testværktøj, så deltagerne løser opgaven hjemmefra. Planlægningen tager få timer, og svarene kommer typisk inden for et par dage. Har I allerede en side, viser jeres tracking, hvilke sider der bliver brugt mest. De skal højt op.
Eksempel: sitemap for et VVS-firma
| Side | URL | Placering |
|---|---|---|
| Forside | / | Logo |
| Ydelser (oversigt) | /ydelser/ | Hovedmenu |
| Ydelser › Badeværelse | /ydelser/badevaerelse/ | Undermenu |
| Ydelser › Varmepumpe | /ydelser/varmepumpe/ | Undermenu |
| Ydelser › Fjernvarme | /ydelser/fjernvarme/ | Undermenu |
| Ydelser › Akut VVS | /ydelser/akut-vvs/ | Undermenu og knap i toppen |
| Cases | /cases/ (én side pr. projekt) | Hovedmenu |
| Priser | /priser/ | Hovedmenu |
| Om os | /om-os/ | Hovedmenu |
| Kontakt | /kontakt/ | Hovedmenu som knap |
| Job, privatlivspolitik, cookiepolitik | /job/ osv. | Kun i footeren |
Fem punkter i menuen, en akutknap i toppen, to niveauer, og hver ydelse er kun ét klik fra forsiden via undermenuen. Det er hele strukturen for de fleste små virksomheder.
2. Navigationen: menu, footer og brødkrummer
Hovedmenuen skal være kort, typisk fem til syv punkter. Det er en tommelfingerregel, ikke en standard, men jo flere punkter, jo sværere er det at overskue dem. Brug kundernes ord: “Varmepumpe” frem for “Energiløsninger”, “Priser” frem for “Investering”. Nielsen Norman Group anbefaler velkendte, konkrete betegnelser uden intern jargon og med det vigtigste ord først. Kontakt hører til yderst til højre som en knap, ikke som et punkt blandt de andre.
Menuen skal stå samme sted og i samme rækkefølge på alle sider. Det er også et krav i tilgængelighedsstandarden WCAG, hvor gentaget navigation skal optræde i samme rækkefølge hver gang. Se mere under webtilgængelighed.
Footeren er sikkerhedsnettet for dem, der har scrollet til bunden. Ifølge Nielsen Norman Group hører kontaktoplysninger, privatlivspolitik og vilkår til i næsten alle footere, gerne sammen med en gentagelse af hovedkategorierne. Det er også her, sider som job, der ikke fortjener plads i menuen, kan stå.
Brødkrummer (“Forside › Ydelser › Varmepumpe”) viser, hvor man er. De giver mest mening på sider med mange niveauer, for eksempel en webshop eller en stor vidensdel. På en flad side med et eller to niveauer er de ifølge Nielsen Norman Group ikke nødvendige. Vis i stedet tydeligt, hvilken sektion siden hører til. Brødkrummer skal altid supplere menuen, ikke erstatte den.
Mobilmenuen ender som regel bag et hamburgerikon, fordi pladsen er der ikke. Men vær bevidst om prisen. I en undersøgelse med 179 deltagere fandt Nielsen Norman Group, at skjult navigation blev brugt i 27 % af tilfældene på computer mod 48 % for synlig navigation, og at skjult navigation gjorde indholdet over 20 % sværere at finde. Konsekvensen: På computer skal menuen være synlig. På mobil skal det vigtigste, typisk telefonnummer og kontaktknap, stå uden for hamburgeren.
3. Layoutet på den enkelte side
Et godt hjemmeside layout styrer øjet. Visuelt hierarki er ifølge Nielsen Norman Group at arrangere elementerne, så øjet ledes gennem dem i den rækkefølge, de er vigtige. Værktøjerne er størrelse, kontrast og afstand: Det største og mest kontrastfulde ses først, og det, der står tæt sammen, opfattes som noget, der hører sammen.
Det, der skal stå øverst
Den første skærmflade er stadig den mest sete. I Nielsen Norman Groups eyetracking på computer fra 2018 faldt 57 % af tiden på den første skærm og 74 % på de to første. Folk scroller altså, men kun hvis toppen giver dem grund til det. Øverst skal derfor stå, hvad siden handler om, hvem det er for, og den vigtigste handling.
Sådan læser folk
Det såkaldte F-mønster er ægte, men ofte misforstået. Nielsen Norman Group fandt, at folk skimmer i et F, når teksten er en uformateret mur, og de ikke er interesserede nok til at læse alt. Det er et tegn på dårlig formatering, ikke et layout at designe efter. Med tydelige mellemrubrikker skimmer folk i stedet i det, Nielsen Norman Group kalder et lagkagemønster, som er langt det mest effektive: overskrift for overskrift, ned til det, de leder efter. Z-mønsteret, som mange designguides nævner, er en tommelfingerregel for sider med lidt tekst. Det indgår ikke i Nielsen Norman Groups eyetracking-studier af, hvordan folk skimmer. Lær af begge dele: Det vigtigste ord først i hver overskrift, korte afsnit, punktlister og fed skrift på nøgleordene.
Én primær handling og fire sektioner
Hver side skal have én primær handling, som går igen: en knap i toppen, en midtvejs og en i bunden. Sekundære handlinger, som “Se cases”, må gerne være der, men som links, ikke som konkurrerende knapper.
Sektionerne følger samme rækkefølge på næsten alle sider:
- Løfte: Hvad I gør, for hvem, og hvad det giver. Overskrift, underoverskrift og knap.
- Bevis: En kundeudtalelse, en case, et tal eller kendte logoer. Hvordan det gøres troværdigt, står under tillid på hjemmesiden.
- Detaljer: Hvad det indeholder, hvordan det foregår, hvad det koster, og svar på de typiske spørgsmål.
- Handling: Knappen igen, med en formular eller et telefonnummer og et løfte om svartid.
4. Skabeloner til de vigtigste sidetyper
Små virksomheder har sjældent brug for mere end fem skabeloner. Når hver sidetype har sin faste opbygning, ser siden ens ud overalt, og nye sider er hurtige at lave.
| Skabelon | Opbygning i rækkefølge | Primær handling |
|---|---|---|
| Forside | Løfte, ydelser med link til hver, bevis, kort om jer, kontakt | Ring eller skriv |
| Ydelsesside | Løfte for ydelsen, bevis, indhold og forløb, pris, spørgsmål, kontakt | Få et tilbud |
| Case | Kunde og udfordring, løsning, resultat, udtalelse, lignende ydelse | Link til ydelsen |
| Artikel | Svaret først, mellemrubrikker, interne links, relateret ydelse | Læs videre eller kontakt |
| Kontakt | Telefon, mail, formular, svartid, adresse og åbningstider | Send formularen |
Hvordan formularen bygges, så den bliver udfyldt, står under kontaktformularer, der konverterer.
5. Mobilen først
Design layoutet til mobilen, og udvid det til computeren bagefter. Det er der to grunde til. For det første kommer en stor del af trafikken fra telefoner hos de fleste virksomheder; tjek tallene i jeres egen tracking. For det andet bruger Google mobilversionen af jeres indhold til indeksering og rangering. Det, der kun står på computerversionen, tæller ikke.
I praksis: Én kolonne. Løftet og knappen inden for den første skærm. Telefonnummeret som et link, man kan trykke på. Knapper store nok til en tommelfinger. Lange afsnit må gerne foldes sammen i harmonikaer, så længe indholdet er det samme som på computer. Google foreslår selv harmonikaer og faner, men teksten skal ligge i sidens kode fra start. Indhold, der først hentes, når man trykker, ser Google ikke. Og siden skal være hurtig på et almindeligt mobilnet, se hurtig hjemmeside.
6. Koblingen til SEO
SEO webdesign er ikke en særlig disciplin. En hjemmeside opbygning, der er logisk for mennesker, er som regel også logisk for Google. Fire ting skal dog være på plads:
- URL’er, der følger strukturen: /ydelser/varmepumpe/ fortæller både læseren og Google, hvor siden hører til. Google anbefaler læsbare ord på målgruppens sprog adskilt med bindestreg. Se URL-struktur.
- Interne links: Google skriver, at hver side, I gerne vil findes på, skal have et link fra mindst én anden side på sitet, med en linktekst, der siger, hvad siden handler om. Lad cases linke til ydelsen og artikler til den relevante ydelse. Se intern linkbuilding.
- Én H1 og logiske overskrifter: Én H1 pr. side, og H2 og H3 i den rækkefølge, indholdet har. Det er også her, semantisk HTML med header, nav, main og footer hjælper.
- Brødkrummer med schema: Har I brødkrummer, så markér dem med BreadcrumbList. Google viser dem i søgeresultaterne på computer, men ikke på mobil, hvor kun domænet står. Google anbefaler, at de viser en typisk brugers vej til siden frem for at kopiere URL’en.
Tjekliste
- Højst to niveauer under forsiden, grupperet efter det, kunderne leder efter.
- Sitemap skrevet ned, før der designes, med URL for hver side.
- Fem til syv menupunkter i kundernes ord, kontakt som knap.
- Samme menu, samme sted, i samme rækkefølge på alle sider.
- Footer med kontakt, CVR, politikker og hovedkategorierne.
- Brødkrummer kun på sider med mange niveauer, med BreadcrumbList.
- Hver side: løfte, bevis, detaljer, handling. Én primær handling.
- Mellemrubrikker med det vigtigste ord først, ingen tekstmure.
- Designet til mobil først, telefon og kontakt synlige uden for hamburgeren.
- Hver side har mindst ét internt link til sig og én H1.
En god opbygning er usynlig: Besøgende finder det, de leder efter, uden at tænke over hvorfor. Det er det, vi arbejder med, når vi laver webdesign og UX/UI: sitemap og skabeloner først, design bagefter. Skal I i gang med en ny side, så start med forberedelsen til en ny hjemmeside, og tag sitemappet med til første møde.
Kilder
- Nielsen Norman Group, Flat vs. Deep Website Hierarchies, nngroup.com.
- Nielsen Norman Group, Card Sorting: Uncover Users’ Mental Models for Better Information Architecture, nngroup.com.
- Nielsen Norman Group, Tree Testing: Evaluate Menu Labels and Categories, nngroup.com.
- Nielsen Norman Group, Menu-Design Checklist: 17 UX Guidelines, nngroup.com.
- W3C, Understanding Success Criterion 3.2.3: Consistent Navigation, w3.org.
- Nielsen Norman Group, Web Page Footers 101: Design Patterns and When to Use Each, nngroup.com.
- Nielsen Norman Group, Breadcrumbs: 11 Design Guidelines for Desktop and Mobile, nngroup.com.
- Nielsen Norman Group, Hamburger Menus and Hidden Navigation Hurt UX Metrics, nngroup.com.
- Nielsen Norman Group, Visual Hierarchy in UX: Definition, nngroup.com.
- Nielsen Norman Group, Scrolling and Attention, nngroup.com.
- Nielsen Norman Group, F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile), nngroup.com.
- Nielsen Norman Group, Text Scanning Patterns: Eyetracking Evidence, nngroup.com.
- Google, Mobile-first Indexing Best Practices, Google Search Central.
- Google, URL Structure Best Practices for Google Search, Google Search Central.
- Google, Link best practices for Google, Google Search Central.
- Google, How To Add Breadcrumb (BreadcrumbList) Markup, Google Search Central.
