Page Comparison

På denna sida har vi samlat praktiska tips och råd, goda exempel, på hur du kan tänka när du bygger och designar dina sidor.

Goda exempel i Drupal

Innehållet på denna sida

• Välja genomgångssida eller informationssida

• Många puffar på begränsad yta - “Puffskog”

  • Avvikande puffen sticker ut

  • Bara använda sidans bild i puffen

  • Generella tips och råd om puffar

• Relaterad information i botten av informationssidor

  • Generella tips och råd om relaterad information i botten på sida

• Skapa en bra Inpage-naviering

Välja genomgångssida eller informationssida

Vilken mall du som redaktör ska välja är oftast enkelt, men kan ibland bli svårt. Som när sidan du ska presentera har en mängd information, samtidigt som den ska vara inbjudande, ett mellanting mellan informations- och genomgångssida.  

Här är ett exempel på vilka skillnader som blir mellan en informationssida och en genomgångssida.

Denna sida är till för att lyfta upp, visa framfötterna om Rektors strategiska samfinansieringar. Den känslan uppnås inte i samma grad via en informationssida. Genomgångssidan fyller detta behov bättre.

Puffhantering - många puffar på begränsad yta, ”Puffskog”

Att lägga in många puffar på en begränsad yta är problematiskt och gör att upplevelsen blir rörig för besökaren. Det gäller framför allt om det är många puffar som är lika stora. Och om de har samma utseende, antingen samma färg eller att alla är likadant bildsatta.

När det är många lika stora puffar på en begränsad yta är det inget innehåll som sticker ut. Allt tar lika mycket plats och uppmärksamhet. Du hjälper inte besökaren i vad hen i första hand borde fokusera på.

I exemplet har redaktören arbetat med bildsättning på alla utom en puff. Konsekvensen blir att den puff som inte är bildsatt blir den som sticker ut, där ögat fastnar först. Även om det inte var redaktörens avsikt.

Att blanda text och puff på detta sätt är inte heller bra ur ett tillgänglighetsperspektiv. Sektionsrubriken ”Universitetet och samhället” ramar in allt innehåll i sektionen. Men det finns inget som kopplar texten ”Etiska frågeställningar ger genomslag” med bildpuffen till Christian Munthe (som är den forskare som texten handlar om). Varje puff/innehållstyp ses som egen och även om en seende person kan identifiera att texten och bildpuffen hänger ihop (då de ligger sida vid sida), är det mycket svårare för en person som använder ett uppläsningsverktyg.

Bryt i så fall ut detta till två olika sektioner.

Avvikande puffen sticker ut

Här är ett annat exempel på hur färgade och bildsatta puffar påverkar läsupplevelsen. Vad du som besökare fokuserar på först.

Det blir därför viktigt för dig som redaktör att testa vad som funkar bäst på just din sida.

Bara använda sidans bild i puffen

Om du bara använder de bilder som man automatiskt får med när man länkar in en intern sida till en puff kan det få oönskade konsekvenser, om alla bilder har liknande innehåll. Där kan du som redaktör behöva gå in och aktivt arbeta med puffarna för att få en mer dynamisk och snyggare sida. 

I det här exemplet har redaktören bara använt de bilder som ligger på sidan (vänster). På denna Aktuellt-sida presenteras en mängd olika sidor och nyheter som är persondrivna och därmed har en bild på en person. Konsekvensen blir att alla pluggar ser likadana ut och besökaren möts av många stirrande blickar. Genom att istället byta ut några av porträttbilderna på puffen skapas en mer dynamisk sida (höger).

Generella tips och råd om puffar

Utifrån dessa exempel går det att dra några konkreta slutsatser

• Våga låta utvalt innehåll ta plats. Dra upp någon puff ordentligt större än andra.

• Ha inte många lika stora puffar på en liten yta.

• Den puff som avviker från normen är den som kommer få den största uppmärksamheten.

• Blanda inte text och puffar i samma sektion om de inte aktivt har med varandra att göra.

• Se över helheten på sidan så att inte alla puffar är likadana.

Det blir därför viktigt för dig som redaktör att testa vad som funkar bäst på just din sida.

Relaterad information i botten av informationssidor

Att ha relaterad information i botten av informationssidor kan ge ett mervärde för besökaren och öppnar möjligheter för redaktörer att koppla samman olika sorters innehåll.

Precis som på andra delar av webben blir det rörigt för besökaren om det är mycket information som presenteras på liknande vis på en liten yta. Exempelvis genom många pluggar av samma storlek och utseende.

I det här exemplet har redaktören valt att lyfta fram en puff som viktigast och störst. Sedan valt att lägga sex stycken likadana puffar (i färg och storlek). Det är bra att lyfta ut något som större och viktigare än det andra, men efter det blir informationen rörig. Vilket i detta fall till viss del beror på urvalet i vilken sorts information som länkas blir spretigt. Redaktören har försökt få med så mycket information som möjligt.

Ett annat exempel blir att använda många listningar i botten på en sida, för att få in mycket information. Avsikten är god, att vilja ge besökaren allt hen kan vilja veta. Men även här blir det svårt för besökaren att orientera sig och veta vad som är viktigt och inte.

Redaktören arbetade om sin sektion i botten på sidan och exemplet visar på fördelarna med att blanda listningar med puffar. Här dras ögat till den stora puffen och sedan listningarna. Redaktören väljer aktivt något som hen vill att besökaren ska uppfatta först, Utbytesstudier och utlandspraktik. Men ger också en listning på saker som är bra för presumtiva studenter att veta, både inom universitetet och utanför vår verksamhet.

Generella tips och råd om relaterad information i botten på sida

Utifrån ovanstående går det att dra några konkreta slutsatser

• Våga låta innehåll ta plats. Dra upp någon puff ordentligt större än andra.

• Ha inte många lika stora puffar på en liten yta

• Prioritera vad som ska finnas i botten, inte försöka få med ”allt”. Våga välja bort.

• Om du ska göra länklista, ha minst tre länkar per listning istället för många listor med få länkar.

• Jobba med att ha länkar i texten och inte ”spara” länken till en puff i botten.

• Jobba med andra typer av innehåll, exempelvis blanda puffar och länklista

Skapa en bra Inpage-navigering

Med färre och längre informationssidor blir Inpage-navigeringen ett bra stöd för besökarna att få en överblick över innehållet. Inpage består av ankarlänkar för att besökaren enkelt ska komma till den del av sidan som är relevant.

Inpage-navigeringen skapas automatiskt och består av de H2-rubriker som du som redaktör lägger in på sidan. Därför är det viktigt att som redaktör aktivt arbeta med mellanrubrikerna.

I exemplet finns det en nedkortad och enkel navigering, till vänster, och en mer utskriven och omfattande navigering, till höger. Att göra mellanrubrikerna mer beskrivande får stora konsekvenser på Inpage-navigeringen. Viljan att skapa beskrivande och bra mellanrubriker gör det svårare för besökaren att ta till sig av innehållet.

De långa rubrikerna skapar en rörig Inpage som är svår att överblicka. Det är speciellt när rubrikerna blir längre än två rader i navigeringen.

Generella tips och råd om Inpage-navigering

Utifrån exemplet kan vi dra några konkreta slutsatser

• Inpage-navigeringen är besökarens första överblick över sidan

• En bra mellanrubrik ska beskriva vad som finns under den

• Den ska inte vara för lång, maximalt två rader i Inpage

• En kort mellanrubrik är att föredra framför en lång

• Som redaktör är det viktigt att arbetar aktivt med mellanrubrikerna

• Som redaktör bör du se över hur dina mellanrubriker ser ut i Inpage-navigeringen, såväl som på sidan innan publicering