Central webbredaktör kan skapa och redigera. Central lättredaktör kan redigera.
Vissa inställningar kräver adminbehörighet.
Sidans innehåll
Key points
Vad: Den vanligaste sidtypen på Studentportalen.
När: Används för att informera studenter om olika frågor/ämnen i studievardagen, såsom studieadministration, stödfunktioner och olika system.
Språkhantering: Ska alltid ha en svensk och engelsk version
Informationssidor är, precis som namnet avslöjar, sidor där fokus är på att ge information till besökaren. De är textfokuserade och, till skillnad mot genomgångssidor, finns det få sektioner och komponenter att välja mellan.
Designen för informationssidor på Studentportalen har tagits fram utifrån designstrategin Mobile first. Detta innebär att mobilens layout med en enda spalt är utgångspunkt för hur informationssidorna ska se ut. Därefter arbetar vi oss uppåt i skärmstorlek, utifrån förutsättningarna för tablet och desktop.
Informationssidorna på Studentportalen är antingen statiska eller dynamiska:
Statiska informationssidor består av enbart universitetsgemensam information och ser likadana ut för alla besökare.
Dynamiska informationssidor består av universitetsgemensam information och lokala tillägg med information från institution, fakultet eller motsvarande. Hur sidan ser ut ändras dynamiskt beroende på val av fakultet och institutioner som görs på Studentportalen.
Lokala tillägg
När ska sidor ha lokala tillägg?
När en ny informationssida skapas behöver det alltid tas ett beslut om det ska vara möjligt att publicera lokala tillägg. Vanligast är att lokala tillägg aktiveras, men det finns undantag.
Diskutera med huvudredaktören innan du skapar en ny Informationssida. Huvudredaktören nås alltid via webbredaktion@gu.se.
Utforming av informationssidor
Herobild används endast om det lyfter innehållet
Använd herobilder (bilden längst upp på sidan) med eftertanke:
Använd herobild om det bidrar till att förtydliga/lyfta informationen på en informationssida.
På genomgångssidor kan det vara värt att lägga mer tid på att hitta passande hero-bild, då det snabbt och tydligt ger en förståelse för vilken information sektionen handlar om.
Undvik herobild om ni vill publicera en bild bara för att det går, eller om det enda som passar är en generisk genre-bild som inte bidrar till att lyfta informationen. (Exempel på bilder som inte lyfter informationen: händer på tangentbord, studenter tittar på dator, studenter står framför byggnader osv.)
Använd sektionen Information
På informationssidor används sektions-layouten Information. På så vis har vi alltid samma grundlayout som vi placerar innehåll i.
Högerspalten används sällan och med eftertanke
Innehåll bör framför allt placeras i den vänstra spalten:
Mittenspalten är informationsbärande. Här placeras brödtext, länkar och andra call to action, video, informationsbärande bilder etc.
Högerspalten används generellt inte, men det finns ett fåtal fall där kontaktuppgifter har placerats i högerspalt.
Tänk på mobiltelefoner! I mobiltelefon placeras moduler i högerspalten efter allt innehåll i mittspalten. Arbeta med sektioner för att säkerställa att innehåll i högerspalt och vänsterspalt hänger ihop i mobilläge.
Använd linje efter introtext (ingress) på sidan
Använd linjen mellan introtext och efterföljande sektion. Säkerställ att du INTE har kryssat i ‘Ingen marginal till ovanliggande sektion’ på sektionen direkt efter titel och sammanfattning (markerad i rött i bilden):
Grundregeln är att vi ska ha en linje mellan introtext och följande sektion.
Undantag bör undvikas, men kan göras om introtext och efterföljande brödtext väldigt tydligt knyter an till varandra.
Använd ny sektion med linje om du byter målgrupp eller “ämne inom ämnet”
Om du lägger till en ny sektion på en informationssida kan du välja att ha en linje innan den nya sektionen (genom att inte kryssa i Ingen marginal till ovanliggande sektion).
Använd en linje om du:
Vänder dig till en ny målgrupp, exempelvis Studentambassadör som har info till potentiella studentambassadörer och nuvarande studentambassadörer.
Byter ämne inom ämnet, exempelvis informationen om stipender som har tre olika ämnen inom ämnet; generella stipendier, stipendier vid filosofisk fakultet och stipendier vid fakultet.
Använd bilder i löptext om de förstärker ditt budskap
Som grundregel använder vi enbart bilder i löptext om de är meningsbärande, det vill säga tillför något till texten som bilder publiceras tillsammans med. Bilder som enbart är dekorativa tar bort fokus från ditt huvudsakliga innehåll.
Tänk på att Studentportalen främst är en informationsportal. Vi behöver inte vara säljare eller attraktiva, utan målet är att hjälpa studenterna till självhjälp. Om din text behandlar något som studenten behöver hjälp med kommer de läsa texten, bild eller inte.
Exempel på bilder som kan vara meningsbärande:
En skärmdump som kompletterar en instruktion för ett digitalt verktyg
En karta över våra lokaler
En bild på ett hus/en lokal som kan göra det enklare för studenten att snabbt hitta rätt när den kommit fram
Exempel på bilder som inte är meningsbärande:
FAQ / Vanliga frågor placeras långt ner på sidan
Vanliga frågor placeras som en sektion på sidan:
Frågor och svar-sektion placeras efter generell informationstext
Utformas helst i jagform; Jag vet inte, Hur gör jag för att osv.
Antal frågor: runt 6–8. Finns behov av fler frågor är det bra att försöka dela upp frågorna i naturliga grupperingar
Kontaktinformation placeras längst ner på sidan
Information om hur studenten kan komma i kontakt med oss placeras helst längst ner på sidan.
Antingen används ett kontaktkort eller en faktaruta (eller call to action?) som leder vidare till ett kontaktformulär.
Exempel på undantag är om sidans syfte är att presentera kontaktuppgifter eller om flera olika kontaktvägar presenteras på sidan, då kan det vara mer användarvänligt att placera kontaktkorten vid olika sektioner på sidan.
Textkomponenter
Editor används för text i de flesta fall
Texteditor som finns på Informationssidor används främst för att publicera text på sidan, med undantag för:
Knapp används sällan och för att lyfta extra viktiga länkar
Den orange knappen bör inte användas för mycket, då syftet med knappen är att hjälpa studenten att hitta extra viktiga länkar på sidan. För många orange knappar = länkarna står inte ut från varandra och studenten har svårt att hitta vilken länk som är viktig. Vid många länkar används vanlig länk i brödtext utifrån instruktionerna om länkar.
Knappen är bra att:
Placera högt upp på sidan, framförallt om du vet att många studenter snabbt vill hitta den sida knappens länk leder till
Använda för att lyfta länk till studiesystem eller andra digitala verktyg
Använda för att lyfta länkar som leder till webbplatser utanför studentportalen
Accordion (dragspel) för överskådlighet - men göm ingen viktig information
En accordion (ibland även kallad dragspelsfunktion) är en expenderbar sektion av en sida, där innehållet är dolt men kan visas genom att besökaren väljer att öppna den.
När passar det bra att använda accordion?
När mycket information ska rymmas på en sida, men du som redaktör vill göra sidans innehåll överskådligt (exempelvis för instruktioner)
När besökaren bara har behov av att läsa en viss del av innehållet på sidan för att få hjälp/hitta det hen sökte efter (exempelvis FAQ eller produktinformation)
När passar det mindre bra att använda accordion?
Fördelar med accordion
Det går att minimera skrollningsbehovet på en sida
Accordion kan fungera som en “mini-innehållsförteckning” och göra det enkelt för en besökare att få en uppfattning över vilken information som finns tillgänglig. Accoridon passar ofta bättre än in-page-navigation, dvs. istället för hyperlänkar som leder en sektion av samma sida
Genom att gömma visst innehåll i accordions kan sidan kännas mindre överväldigande och besökaren väljer att stanna kvar
Nackdelar med accordion
Du gömmer innehåll på sidan (Placera inte viktigt innehåll in accordion!)
Du tvingar besökaren att interagera med sidan, för att hen ska kunna läsa innehåll på sidan
För att läsa allt innehåll uppifrån och ner måste besökaren klicka upp alla accordion samtidigt
Faktaruta lyfter extra viktig / föränderlig info eller bryter av vid mycket innehåll
Faktarutan drar blicken till sig, och ökar sannolikheten att text kommer att läsas. Den är även bra på att markera att viss text hör ihop, och om det finns mycket text i en sektion kan faktarutan bryta upp textmassan och ge ett luftigare intryck.
Faktarutan är extra bra att använda för:
Text som är extra viktig att alla läser
Samla flera länkar, och visa att länkarna hör ihop
Samla datum som hänger ihop
Att lyfta en viss länk, när det behöver finnas förklarande text tillsammans med länken
📧 Kontaktuppgifter när kontaktkort inte går att använda (läs om kontaktuppgifter nedan)
Kontakt
Kontaktformulär när det går - annars kontaktkort
Det finns ett stort kontaktformulär som är kopplat till STIG. Huvudredaktören är huvudansvarig för kontaktformuläret, och centrala redaktörer är ansvariga för olika innehåll i formuläret.
Det finns ett redaktionellt arbete kopplat till formuläret, för att säkerställa att innehållet kompletterar informationssidorna.
Om du har kontakt till en funktion som finns i STIG är grundregeln att din kontakt ska in i formuläret, snarare än att använda dig av kontaktkort.
Länka till kontaktformulär med text och länk i faktaruta
I och med att ett anpassat kontaktkort kräver en e-post går det inte att använda kontaktkort för att länka till en sida i kontaktformuläret. Använd istället en faktaruta.
Länka till rätt plats i kontaktformuläret
Om kontaktvägen för en informationssida går via kontaktformuläret är det viktigt att de länkar till formuläret med rätt val förvalda.
Placera kontaktuppgifter till personer och funktionsadresser i kontaktkort
I första hand ska vi alltid använda oss av kotnaktkort, personkort eller anpassat, för att lyfta fram olika kontaktuppgifter.
Funktionsadresser? Använd anpassat kontaktkort.
Om du ska skapa ett funktionskontaktkort brukar ett anpassar kontaktkort fungera bäst. I övrigt finns inga rekommendationer kring utformning av kontaktkortet. Utgå från vilken information som du har behov av att lyfta, information om när funktionen ska kontaktas, öppettider, telefontider, alternativ kontaktväg etc.
Anpassat kontaktkort kan även användas för fysiska platser
Kom ihåg att det även går att använda ett kontaktkort för en reception eller servicedesk.
Faktaruta med kontaktinfo placeras i högerkant en sista utväg
Det finns ett fåtal tillfällen där kontaktuppgifter måste förkomma på flera sektioner av en informationssida. I undantagsfall behöver de då även placeras i högerspalt, för att skapa en överskådlighet för besökare som använder sig av en laptop. Ett exempel på detta är informationen om var student kan åka på utbytesstudier. Info om kontaktuppgifter placeras i olika sektioner för universitetsgemensam information respektive lokal information.
Behöver kontakt synas i Sidans innehåll? Skapa en H2-rubrik Kontakt ovan kontaktkort/faktaruta.
Rubriker i faktarutor kommer aldrig med i Sidans innehåll, inte heller om de markeras som en H2-rubrik. Om du bedömer det som viktigt att kontakt ska finnas med i innehållsförteckningen, gör en H2-rubrik Kontakt och placera faktaruta/kontaktkort under denna.
När du är inloggad som redaktör ser du en redaktörsmeny ovanför innehållet på alla informationssidor. Den består av ett antal flikar där du gör olika inställningar för innehåll, layout och språk.
När du har gjort ändringar på en informationssida behöver du spara dem. Ändringar du gör på en informationssida kan publiceras direkt eller senare.
Publicerad (Published): Ändringarna sparas och visas för besökare.
Utkast (Draft): Ändringarna sparas, men visas inte för besökare förrän du väljer att ändra till Publicerad.
Avpublicerat: Sidan finns kvar i redigeringsläget, men en besökare kan inte se den alls.
Innehåll i redaktörsmenyn (innehåll i menyn kan dock variera beroende på din behörighet):
'Visa' visar sidan så som en besökare ser den.
Om du är inloggad som redaktör och navigerar till sidan som en besökare är det denna flik i sidan redaktörsmeny som du landar på.
'Redigera' - redigera sidans grundinställningar
Här kan du bland annat uppdatera huvudbild, titel och sammanfattning.
Redaktörer med viss behörighet kan även ändra sidans placering i menyn.
'Redigera lokalt innehåll' leder till redigering av lokala tillägg (syns inte för alla)
Används av redaktörer på fakultet, institution och motsvarande för att redigera de lokala tilläggen på sidor där funktionen är påslagen.
Lokalt innehåll på informationssida
'Tabort' raderar hela sidan
Om du klickar på Tabort påbörjar du radering av hela sida. Du får dock en kontrollfråga “Är du säker på att du vill radera sidan”.
'Layout' - Redigera merparten av sidans innehål i en drag-and-drop layoutbuilder
Merparten av innehållet på sidan byggs upp i en layoutbuilder med drag-and-drop-funktion. Funktionen används för allt innehåll under sidans sammanfattning och ovan sektionen Information från fakultet och institutioner.
I Layoutbuilder arbetar du med sektioner som består av komponenter (till exempel texteditor, dragspel, faktaruta och knapp). Du kan använda dig av flera sektioner, men gör detta enbart om du vill dela upp informationen på sidan med ett streck, exempelvis om du byter målgrupp eller har olika “ämnen inom ämnet” eller har innehåll i högerspalt (rekommenderas inte) som behöver hamna rätt i mobilläge.
'Versioner' listar tidigare sparade versioner av sidan
Här kan du se alla versioner som publicerat av sidan inklusive vem som publicerat versionen.
Du kan också välja att publicera en tidigare version.
'Översätt' – Språkversioner av sidan
Se vilka språk sidan finns på och gör eventuella översättningar.
Överblick: Var redigerar du vilket innehåll?
I redaktörsmenyn klickar du på ‘Innehåll’.
Klicka på ‘Informationssida’.
Klicka på ‘+ Lägg till informationssida’.
Nu öppnas ett formulär upp där du fyller i sidans titel och sammanfattning.
Lokala tillägg: Per automatik är “Har lokalt innehåll” ikryssat. Tänk på att kryssa ur denna ruta om sidan ska vara statistisk och enbart ha universitetsgemensamt innehåll.
Välj ‘Spara som: Utkast’ och klicka på ‘Spara’. Då kan du arbeta med innehållet på sidan innan du publicerar den för besökare.
I redaktörsmenyn för sidan klickar du nu på ‘Layout' för att fylla sidan med innehåll.
När du är helt klar och vill publicera sidan väljer du ‘Ändra till: Publicerad’ och klickar på ‘Spara ändringar’.
Klickar du på ‘Översätt’ i redaktörsmenyn för den informationssida du ska översätta.
Du kommer nu till en ny sida som listar de översättningar som finns, och vilka som kan skapas. Studentportalen har bara stöd svenska och engelska, så det är dessa två som listas. Klicka på ‘Lägg till’ för att skapa en översättning.
Nu öppnas en sida där du kan ange översättningens titel och sammanfattning, bland annat.
Spara översättningen som ett utkast, så du kan arbeta med innehållet på sidan under ‘Layout’.
Navigera till informationssidan du ska redigera.
På sidans redaktörsmeny klickar du på ‘Tabort’.
Nu öppnas en sida där du raderar sidan. Klicka på ‘Tabort’ så raderas sidan direkt. Klicka på ‘Avbryt’ om du har ångrat dig.
Navigera till informationssidan du ska redigera.
På sidans redaktörsmeny väljer du ‘Redigera’.
Ändra texten under ‘Titel' respektive 'Sammanfattning’.
Spara sidan.
Navigera till informationssidan du ska redigera.
På sidans redaktörsmeny väljer du ‘Redigera’.
Under ‘Huvudbild / Film’ byter du ut bilden.
Spara sidan.
Navigera till informationssidan du ska redigera.
På sidans redaktörsmeny väljer du ‘Redigera’.
Under ‘Relaterat innehåll' gör du inställningar för:
Titel
Val av relaterat innehåll, måste vara sidor publicerade på Studentportalen.
Spara sidan.
Navigera till informationssidan du ska redigera.
På sidans redaktörsmeny väljer du ‘Layout’. Du kan nu:
Lägga till, redigera och ta bort sektioner. (Instruktioner nedan).
Lägga till, redigare och ta bort komponenter inom sektioner. (Instruktioner nedan).
När du är klar med dina ändringar sparar du sidan.
På informationssidor måste du lägga till sektioner för att kunna arbeta med sidans layout. En sektion fungerar som en behållare av olika komponenter, och har olika utseende (antal spalter till exempel) på olika sidor.
På informationssidor använder du alltid sektionen ‘Infomration’. Den består av tre spalter:
Vänsterspalt: Här finns den automatiskt genererade innehållslistan.
Mittspalt: Sidans huvudsakliga innehåll.
Högerspalt: Här kan i undatagsfall kontaktuppgifter eller faktaruta publiceras.
Instruktioner för att skapa, redigera och radera sektioner finns på sidan Sektion på Studentportalen
Navigera till informationssidan du ska redigera.
På sidans redaktörsmeny väljer du ‘Layout’.
Längst ner på den sektion där du vill lägga till en komponent klickar du på ‘Lägg till komponent’. Välj den komponent du vill lägga till.
Bild: En bild som sträcker sig längs med hela spaltbredden.
Dokument: En grå box som gör det möjligt att lyfta ett dokument så det blir extra synligt. Obs! Du kan även publicera dokument i den vanliga Texteditorn, vilket vi rekommenderar.
Dragspel: Ett utfällbart fält där besökaren bara ser en rubrik, och kan läsa all text genom att klicka på rubriken.
Editor: Studentportalens texteditor, den komponent som du rekommenderas att använda dig av främst.
Faktaruta: En grå ruta där du kan publicera text som du vill lyfta lite extra.
Knapp: En orange knapp som används för att lyfta länkar så de blir extra synliga.
Video: Länka in en video.
När du har valt komponent kan du lägga till innehåll i komponenten. Klicka därefter på ‘Spara’.
För att redigera en redan skapad komponent hovrar du över pennan på komponentens övre högra hörn. Du kan då välja:
‘Redigera komponent’ för att ändra komponentens innehåll. Gör dina ändringar i komponenten och klicka sen på spara.
‘Flytta komponent’ för att flytta komponentet. Enklast om du vill flytta komponenten är dock att använda dra-och-släpp-funktionen.
'Radera komponent' för att helt ta bort komponenten. Den går inte att återställa.
Kom ihåg att spara sidan när du är färdig med komponenterna.