Exempel på hierarki i en webbstruktur

Lägg ett företags organisationsschema bredvid en webbplatss layoutdiagram, och du kan hitta en anmärkningsvärd likhet mellan de två dokumenten. Företag, regeringar och andra enheter använder ofta samma hierarkiska layoutmönster som webbplatser gör. VD för ett företag kan till exempel sitta högst upp i en hierarkisk modell på samma sätt som en hemsida ligger längst upp på en webbplatsmodell. Effektivt utformade hierarkier skapar webbplatser som folk älskar att besöka.

Webbplatsstrukturer

Som författarna till "Web Style Guide" noteras, "framgången med organisationen av din webbplats kommer att bestämmas till stor del av hur väl din webbplats informationsarkitektur matchar dina användares förväntningar." Om människor tycker det är lätt att flytta runt på din webbplats, så kan spendera mer tid på att granska det. Ett sätt att göra det enkelt för dem att göra det är att ge webbplatsen en logisk och förutsägbar layout, så att besökare kan navigera via webbsidorna utan att konsultera webbplatsens hjälpdokumentation.

Pyramidmetoden

Det kan hjälpa till att tänka på en webbplats som en pyramid. På toppen av pyramiden är webbplatsens första nivå, hemsidan. En effektiv hierarki innehåller allmän information och länkar som pekar på andra webbsidor som innehåller mer detaljerad information. Dessa sidor visas under hemsidan och blir webbplatsens andra nivå i hierarkin. En grundläggande webbplats kan bara behöva två nivåer, och en hemsida kan helt enkelt ha länkar som pekar på sidor som "Om oss", "Produkter" och "Bli medlem." Det är alltid en bra idé att ge besökare ett sätt att komma tillbaka till hemsidan från vilken sida som helst, till exempel genom att inkludera en länk, knapp eller menyalternativ på varje sida som pekar på hemsidan.

Nivå tre och bortom

Whitehouse.gov är ett exempel på en webbplats som har flera nivåer som utgör en komplex hierarki. Hemsidan är enkel, men du kan komma till någon annan sida på webbplatsen från hemsidan. Denna typ av hierarki kan sträcka sig ner till många nivåer, där lägre nivåer ger mer detaljer än högre nivåer. Ett bra exempel på en hierarki på tre nivåer är en boköversikt. Hemsidan, på nivå ett, kan ge allmän information samt länkar som pekar på en recensioner sida. Den sidan som utgör den andra nivån kan innehålla en lista med böcker. När du klickar på en bok kan en annan sida med namnet "Krig och fred" visa en recension för den boken. Den här sidan skulle sitta på webbplatsens tredje nivå. Om du diagramerar denna hierarki så som du skulle skapa ett orgdiagram, skulle du rita en ruta överst och skriva "Startsida" i den. Du kan sedan rita din "Recensioner" rutan under rutan "Startsida" och lägg till rutan "Krig och fred" under rutan "Startsida".

Använda rubriker för att visa hierarki

Förutom att organisera sidor på en webbplats kan du organisera en sidans innehåll för att visa hierarkiska relationer. Rubriker gör det möjligt för människor att presentera information i en konturform som är lätt att smälta. HTML innehåller flera rubrikkoder, t.ex. h1, h2 och h2, som kan hjälpa dig att lägga till hierarki på en webbsida. Du kan till exempel använda en stor h1-tagg som sidans huvudrubrik och en mindre h2-tagg för en sektion med namnet "Produkter". Du kan sedan lägga till en h3-tagg under Produkter för att skapa en underavdelning som beskriver dina produkter. Du har också möjlighet att lägga till punktlistor på din sida. Genom att kombinera alla dessa element skapar du en visuell bild som besökare kan förstå vid en blick.