...
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Webbredaktör Central webbredaktör kan skapa och redigera. Webbredaktör och Central lättredaktör kan redigera. |
Note |
---|
Ska du redigera lokalt tillägg på en informationssida? Instruktioner om lokala tillägg finns på Lokalt innehåll på informationssida |
Sidans innehåll
Table of Contents | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Här kan du läsa om hur du arbetar med det universitetsgemensamma innehållet på informationssidor i Studentportalen, vad informationssidor är och när de ska ha lokala tillägg.
...
Om informationssida
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å layouter sektioner och komponenter att välja mellan. På Studentportalen har Informationssidorna skalats av, i jämförelse med hur de fungerar på externwebben http://gu.se .Designen
Designen för informationssidor på Studentportalen har tagits fram utifrån designstrategin “Mobile first”, som innebär att vi använder mobilen som 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 i för tablet och desktop.
Dynamiska informationssidor
De flesta informationssidorna 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
...
Informationen på denna sida vänder sig till dig som ska publicera universitetsgemensam information. Det finns även instruktioner för att publicera lokalt innehåll på informationssidor.
...
panelIconId | atlassian-question_mark |
---|---|
panelIcon | :question_mark: |
panelIconText | :question_mark: |
bgColor | #DEEBFF |
. Hur sidan ser ut ändras dynamiskt beroende på val av fakultet och institutioner som görs på Studentportalen.
Riktlinjer
Expand | ||
---|---|---|
| ||
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 studenportal@gu.se. |
Redigera en informationssida
Riktlinjer för konsekvent utformning av sidor
För en besökare på Studentportalen ska det upplevas som att vi talar med en röst, trots att vi är flera redaktörer som är ansvariga för den universitetsgemensamma informationen på Studentportalen. Den centrala redaktionen (som har ansvar för de flesta av sidorna i Studentportalen) har därför gemensamt tagit fram riktlinjer som ska hjälpa oss att utforma sidor.
Riktlinjer för konsekvent utformning av sidor
Navigera till sidan
...
Utforming av informationssidor
Expand | ||
---|---|---|
| ||
Använd herobilder (bilden längst upp på sidan) med eftertanke:
|
Expand | ||
---|---|---|
| ||
På informationssidor används sektions-layouten Information. På så vis har vi samma grundlayout som vi placerar innehåll i. |
Expand | ||
---|---|---|
| ||
Innehåll bör framför allt placeras i den vänstra spalten:
|
Expand | ||
---|---|---|
| ||
Använd linjen mellan introtext och efterföljande sektion (markerad i rött i bilden):
|
Expand | ||
---|---|---|
| ||
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:
|
Expand | ||
---|---|---|
| ||
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:
Exempel på bilder som inte är meningsbärande:
|
Expand | ||
---|---|---|
| ||
Vanliga frågor placeras som en sektion på sidan:
|
Expand | ||
---|---|---|
| ||
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
Expand | ||
---|---|---|
| ||
Texteditor som finns på Informationssidor används främst för att publicera text på sidan, med undantag för:
|
Expand | ||
---|---|---|
| ||
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:
|
Expand | ||
---|---|---|
| ||
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 passar det mindre bra att använda accordion?
Fördelar med accordion
Nackdelar med accordion
|
Expand | ||
---|---|---|
| ||
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:
|
Kontakt
Expand | ||
---|---|---|
| ||
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. |
Expand | ||
---|---|---|
| ||
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. |
Expand | ||
---|---|---|
| ||
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. |
Expand | ||
---|---|---|
| ||
I första hand ska vi alltid använda oss av kotnaktkort, personkort eller anpassat, för att lyfta fram olika kontaktuppgifter. |
Expand | ||
---|---|---|
| ||
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. |
Expand | ||
---|---|---|
| ||
Kom ihåg att det även går att använda ett kontaktkort för en reception eller servicedesk. |
Expand | ||
---|---|---|
| ||
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. |
Expand | ||
---|---|---|
| ||
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. |
Skapa en informationssida
Note |
---|
OBS! På Studentportalen är vi sparsamma med att skapa nya informationssidor. Om du har behov av en ny informationssida bör du första stämma av detta med huvudredaktören och den centrala redaktionen. |
Instruktioner kommer inom kort.
Redigera en informationssida
Navigera till sidan. Det kan du göra på två sätt:
Även om du är inloggad i redaktörsmiljön kan du navigera till sidan som om du vore en besökare. Antingen genom att söka efter sidan eller genom att klicka dig fram genom menyn.
Du kan även söka efter sidan i redaktörsgränssnittet genom att klicka på Innehåll i redaktörsmenyn.
...
När du är inloggad som redaktör ser du en redaktörsmeny ovanför innehållet på sidan
...
.
...
Visa: Visar sidan så som en besökare ser den.
Redigera: Här kan du redigera sidans titel, den inledande texten och lägga till en huvudbild. (Observera att vi är restriktiva med användningen av bilder på Studentportalen. En bild bör vara meningsbärande för att vi ska publicera den på en sida.)
Redigera lokalt innehåll: Används av redaktörer på fakultet och institution för att redigera de lokala tilläggen på sidor där den funktionen är påslagen.
Tabort: Raderar hela sidan. Obs! Det finns ingen papperskorg där sidan hamnar, väljer du att radera sidan försvinner den för alltid.
Layout: Här redigerar du övrigt innehåll på sidan genom en layout builder. I denna kan du skapa olika komponenter för textinnehåll flytta runt dessa. Mer info om detta under nästa rubrik.
Versioner: Här kan du se alla versioner du har publicerat av sidan och välja att publicera en tidigare version.
Översätt: Se vilka språk sidan finns på. Standard för Studentportalen är att alla sidor ska finnas på svenska och engelska.
Layout builder
I layout builder arbetar du med sektioner, som i sin tur består av komponenter.
...
Publicerad: Ändringarna sparas och visas för besökare.
Utkast: Ä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.
...
...
panelIconId | 1f5a5 |
---|---|
panelIcon | :desktop: |
panelIconText | 🖥️ |
bgColor | #E3FCEF |
Läs mer om informationssidor
Under webbprojektet när nya http://gu.se byggdes så togs konceptet för informationssidor fram. Här kan du i mer detalj se hur man tänkte då.
...