• Utgå från medborgarens behov; det som folk frågar efter och
behöver veta när dom ska utföra viss handling eller befinner sig i en viss situation.
• I första hand kort och enkel information så att de flesta kan förstå även helt utan förkunskaper.
Vad är struktur?
Webbplatsens struktur är hur vi sorterat och organiserat våra sidor i förhållande till varandra. En bra struktur gör det lätt att hitta och är användarcentrerad.
Funkas jämförelse:
• Stadens stadsplan gör det enkelt för invånarna att hitta.
• Webbplatsens informationsstruktur motsvarar stadens stadsplan
Vad är användarcentrering?
Användarcentrering innebär att vi lever oss in i användaren situation och publicerar det användaren vill ha och behöver, på ett sånt sätt så att användaren lätt kan förstå och hitta.
Vad är ”tillgänglighet” och ”design för alla”?
Principen är att det som funkar för dem som har det lite svårare, även gör det lättare för oss alla. Om vi har en webbplats som är lätt att använda så använder fler webbplatsen. Människan är bekväm.
En tillgänglig webbplats ur perspektivet ”Design för alla” innebär att:
• webbplatsen uppfyller vissa tekniska krav som gör den läsbar för
funktionshindrades hjälpmedel. Samma teknik gör att vi kan ansluta oss till andra avancerade tjänster.
• att webbplatsens innehåll, både när det gäller utseende, språk, disposition av text och strukturering av innehåll m.m. kan förstås av ”alla” (de flesta).
Klassiska exempel
Tycker du det är onödigt att anpassa webbplatsen till funktionshindrade? De flesta är ju ändå ”normala”, eller?
Du får själv ”funktionshinder” i form av sämre koncentrationsförmåga när du är stressad och sämre syn efter 40. Otroligt många av oss råkar ”kastar om bokstäverna lite” när orden blir långa osv.
Här är några klassiska exempel på hjälpmedel för funktionshindrade som nästan hela befolkningen använder idag - bara för att det är lättsamt:
• Kulspetspennan
• Kaffebryggaren
• Fjärrkontrollen
Nationell handlingsplan för handikappolitiken
En handlingsplan för handikappolitiken "Från patient till medborgare" antogs år 2000 och sträcker sig fram till år 2010 och involverar alla samhällsområden.
De nationella målen för handikappolitiken är:
• en samhällsgemenskap med mångfald som grund,
• att samhället utformas så att människor med funk- tionshinder i alla åldrar blir fullt delaktiga i samhällslivet,
• jämlikhet i levnadsvillkor för flickor och pojkar, kvinnor och män med funktionshinder.
Enligt handlingsplanen ska det handikappolitiska arbetet särskilt inriktas på:
• att identifiera och undanröja hinder för full delaktighet i samhället för människor med funktionshinder,
• att förebygga och bekämpa diskriminering mot personer med funktionshinder,
• att ge barn, ungdomar och vuxna med funktionshinder förutsättningar för självständighet och självbestämmande.
Kommunens Handikappolitiska program
Sundsvalls kommuns Handikappolitiska program anger att information ska vara tillgänglig för funktionshindrade.
Webbplatsens grundlayout
Högerspalt
Mittspalt Grundlayouten för en vanlig undersida består av två spalter; Mittspalten och Högerspalten.
• I Mittspalten finns själva innehållet och eventuell bild.
• I Högerspalten måste rubrikerna E-tjänster och Kontakt alltid finnas.
För Högerspalten finns också de valfria rubrikerna;
Fakta och Länkar.
Skapa ny sida
För att skapa en ny sida gör du så här:
Markera den sida du vill skapa en ny sida under – högerklicka - välj Ny – webbsida.
I den dialogruta som kommer upp ger du sidan ett namn och väljer en mall (vanligen Undersida).
Mall
Mallen ”Undersida” använder du nästan alltid när du skapar en ny sida.
Det är den vanligaste mallen på sundsvall.se. De inställningar som finns där för avstånd och dylikt är det som gäller för de flesta sidor.
Inställningar
Om du blir osäker på någon inställning på den sida du arbetar med kan du alltid skapa en ny sida bara för att kolla vad som gäller. Sidan kastar du sedan bort.
Sidans namn - samma som sidrubriken
Sidans namn i vänstermenyn ska vara samma som sidans sidrubrik (överst).
• Namnet ska vara tydligt och konkret. Får inte kunna tolkas på flera sätt.
Undantagsvis kan sidrubriken vara Konsumentrådgivning i Kulturmagasinet fastän sidan måste heta Konsumentrådgivning av utrymmesskäl i vänstermenyn. Det får inte råda några tvivel om att användaren kommit rätt.
Läs mer under:
Rubrikernas textformat och användningsområden /Sidrubrik.
Skapa flera sidor i strukturen/Hjälp, jag hittar inget bra menyord!
En textspalt i Mittenspalten
All text i Mittenspalten ska som grundregel ligga över hela Mittenspalten, utom när den ligger bredvid en bild, enligt mallen Undersida.
Se under nästa rubrik ”En vanlig sida”.
En vanlig sida
Här ser du den vanligaste typen av webbsida på webbplatsen sundsvall.se. Det är en sida som är gjord med mallen Undersida och har sidrubrik, ingress, bild och brödtext i Mittenspalten.
I högerspalten har man valt att behålla rubrikerna Fakta och Länkar, utöver de obligatoriska rubrikerna E-tjänster och Kontakt.
Redigeringsläge
Här ser du sidan i redigeringsläge. Den är gjord med mallen Undersida.
I rutan ”Navigator” ser du webbplatsens sidor i ett navigeringsträd.
Menyn ”Innehåll”
Under ”Innehåll” till vänster visas de två spalterna, Mittenspalt och Högerspalt, och deras moduler. Här visar jag Mittenspaltens innehåll.
Mittenspalten på sidan består av fyra delar:
• En textmodul som heter ”Rubrik” och innehåller sidans rubrik.
• En textmodul som heter ”Ingress” och innehåller sidans ingress på max 2,5 rader.
• En gul layout som heter ”Foto”. I layouten ligger ett foto (”Bild 1”) och en fototext (”Text”).
• En textmodul som heter ”Brödtext” och innehåller sidans brödtext.
Den gula layouten (vertikal) + brödtexten = ett set vertikal (stående)
Fler bilder på sidan
1. Gör ett nytt set för varje ny bild på sidan. (Under förra rubriken kan du se vad ett ”set” är för något.)
2. Välj om bilden ska sitta till vänster eller till höger genom att justera inställningarna för Layouten med bilden i.
OBS! Det är viktigt att komma ihåg att det är Layouten du sätter inställningarna på, inte själva bilden som ligger i Layouten. Se Layouten som en byrå med lådor, där du lagt bilden i en av lådorna och fototexten i lådan nedanför.
Så här gör du för att bestämma om din nya bild ska ligga till höger eller till vänster på sidan.
I menyn ”Innehåll”:
Markera Layouten– högerklicka – egenskaper.
Välj ”Utseende” till vänster i dialogrutan. Då ser du rubriken ”Övrigt”.
Under rubriken ”Övrigt” väljer du alternativet ”Flöde”.
Välj ”Flöda höger” eller ”Flöda vänster” beroende på vilken sida du vill ha bilden på.
Ställ in marginaler och padding för den nya Layouten på samma värden som för bilden i sidans mall, men växla sida på inställningarna för höger och vänster om du sätter bilden till vänster istället.
Skapa fler sidor i strukturen
Sortera sidorna i grupper som hör ihop - inte verksamhets-organisatoriskt
En bra struktur gör det lätt att hitta. Detta är det allra svåraste och det allra viktigaste. Strukturen ska nämligen vara - användarcentrerad.
Utgå från företeelser, situationer eller handlingar. Vad är det användaren frågar efter och behöver (veta) i en viss situation? Du inser snart att det inte behöver vara knutet till en viss förvaltning.
Vi kan som exempel utgå från situationen man befinner sig i när man vill bygga nåt.
Så här gör du för att skapa en bra struktur på webbplatsen:
1. Samla information:
- Användarnas behov och önskemål. Ta reda på:
- vem är användaren?
- i vilken situation ska användaren använda lösningen?
- vilka uppgifter behöver användaren lösa?
- vad tjänar användaren på användandet?
- hur ska användaren interagera (vad vill vi han/hon ska göra)?
- Organisationens mål och önskemål
- Vad finns redan publicerat? Fördelar, nackdelar?
- Vad saknas?
- ..men fastna inte…
En skiss gör det enkelt:
2. Gruppera – vilken information hör ihop? De här grupperna hittade vi i
3. Gruppera igen – kan de grupper vi fick fram, i sin tur, grupperas ihop?
Bygglov, sånt som rör tomter och rivningslov förekommer allihop endast vid någon form av byggande eller ändrande på en fastighet - det kan vi gruppera ihop och lägga under en gemensam menyrubrik – till exempel ”Bygga och ändra”.
”Vatten och avlopp” och ”Radon” däremot, kan vara aktuellt i många andra fall än när man bygger, så det kan vi inte lägga under ”Bygga och ändra”.
Kontaktuppgifter bör finnas på varje sida.
4. Prioritera
– vad används/läses/efterfrågas av många, ofta?
- vad är mitt emellan?
– vad används/läses/efterfrågas av få, sällan? (Publiceras inte eller kastas om det redan finns.)
Så här blev vår rangordning under ”Bygga och ändra”:
1) Bygglov
2) Sånt som rör tomter 3) Rivningslov
5. Rubricera - hitta bra namn på sidor (menyrubriker).
Tänk på att:
- Menyrubriken ska vara konkret och gärna sånt man gör.
- använda vardagliga ord och uttryck - får inte kunna tolkas på flera sätt
- testa om ordet är konkret och lättförståeligt, fråga ett barn.
- testa med olika personer - det är svårt att hitta rätt ord - det är viktigt att det blir rätt
- Läs mer under Hjälp, jag hittar ingen bra menyrubrik!
Så här rubricerade vi våra tre grupper:
> Bygglov > Tomter > Rivning
6. Vad ska ligga under och ovanför dessa sidor?
Bestämförst:
-vad ska ligga under dessa sidor.
- gruppera, prioritera osv…
Bestäm sedan:
- vad ska finnas ovanför dessa sidor? (I vårt exempel bör ”Vatten och avlopp”,
”Radon” finnas ovanför.) - gruppera, prioritera osv…
Så här gjorde vi under sidan Bygglov:
V Bygglov
Sedan gjorde vi så här ovanför sidan bygglov:
VBygga och ändra
• ”Bygga och ändra” - fick vara på nivån ovanför Bygglov och vara den rubrik som innehåller Bygglov, Tomter och Rivning.
• ”Vatten och avlopp” och ”Radon” – fick vara på samma nivå som
”Bygga och ändra”, d.v.s. också en nivå ovanför Bygglov utan att för den skull innehålla Bygglov.
”Vatten och avlopp” och ”Radon” kan ju även vara aktuella i andra fall än vid byggande.
Så här ser hela menystrukturen ut:
> Bygga och ändra
Tänk på:
• Lätt att hitta – viktigare än att det är få ”klick” till sidan.
• Överst i menyn - det som är viktigast för användaren och används/läses mest av flest, på webben.
•
Osäker, oense eller bara ambitiös? - Gör små ovetenskapliga undersökningar.Spara tid - gör en liten undersökning
Du behöver bara ställa några få frågor till 8-10 personer så får du ett tydligt mönster på hur många tänker.
Det går mycket fortare än att fundera och diskutera i flera veckor på kontoret.
Vilka ska jag fråga?
Fråga medborgarna, absolut inte anställda i verksamheten!
Du kan fråga:
• målgruppen som dina sidor riktar sig till.
• en allmängiltig grupp. Välj människor som inte är insatt i det du frågar om eller i den kommunala organisationen. Då får du verkligen fram om struktur och innehåll är tydligt, konkret och lättfattligt.
• Mellanstadiebarn. De är en väldigt bra grupp att testa på om man vill veta vad som är logiskt och konkret. Förstår och hittar dom så funkar det för de flesta.
Mall för frågeformulär
Mall för frågeformulär, hjälp och tips finns hos webbredaktören:
charlotte.strandlund@sundsvall.se
Fem sidor på varje nivå i menyerna syns bäst
• 7 (+- 2) sidor på varje menynivå rekommenderar Funka Nu.
• max 10 sidor i menyerna, har vi som absolut smärtgräns på sundsvall.se.
Hjälp, jag hittar ingen bra menyrubrik (namn på sidan)!
Om du inte hittar någon passande menyrubrik enligt principerna i lathunden, är det oftast fel tänkt i strukturen.
Då måste du gå tillbaka en nivå upp i strukturen och göra om grupperingarna under!
Annars blir det bara värre och värre för varje sida och nivå du skapar, i slutänden en enda röra där ingen hittar.
Om du har en bra struktur kan du, efter lite stötande och blötande, som regel hitta menyord som är tydliga och rättvisande.
Menyrubriker ska vara:
• Så konkreta som möjligt – testa på barn.
(använd aldrig ord som Fakta, Övrigt, Information, Instruktion osv.)
• Entydiga – kan inte tolkas på flera sätt
• Gärna sånt man gör. Det är lättare att fylla på med nya sidor med relaterad information under ett ord som ”Rivning” än under ”Rivningslov”. Under Rivningslov platsar ju endast fakta om själva rivningslovet och inte t.ex. var man slänger rivningsavfall, vad man behöver tänka på när man river osv.
Anta att vi under sidan Bygglov vill vi ha en sida som ger instruktioner om hur man söker bygglov.
Exempel på en bra menyrubrik:
> Bygglov
> Ansöka om bygglov
Exempel på en dålig menyrubrik:
> Bygglov
> Instruktioner
Gör navet och häng på relaterad information
• Gör först och främst en sida med lättförståelig, kort och enkel information som de flesta kan förstå. Se denna sida som ett nav.
• Bygg ”ekrar” kring navet av:
länkar till relaterade dokument, webbplatser, e-tjänster, fördjupningssidor, bakgrundssidor. De senare kan också ligga i vänstermenyn under din navsida.
Dolda sidor i menyn
Dolda sidor ska alltid ha en tillbakalänk till vänster längst ner. Kopiera tillbakalänken från en sida under Aktuelltspalten på förstasidan.
Klistra in tillbakalänken i en egen textmodul, längst ner i Mittspalten på sidan du tänker dölja. Den tillbakalänken pekar alltid på föregående sida oavsett vilken det var.
Dölj sedan sidan i menyn genom att:
Markera sidan i navigeringsträdet- högerklicka – välj Dölj i menyer.
Rubrikernas textformat och användningsområde
Det är viktigt att använda rubrikformat till text som är rubriker. Annars förstår inte funktionshindrades hjälpmedel att det är en rubrik de läser.
Formatet på en text ställer du in så här:
Dubbelklicka på textmodulen så att redigeringsrutan öppnas - markera den text du vill formatera - fäll ner rullgardinsmenyn längst upp i mitten på redigeringsrutan - markera det textformat du vill ha - klicka OK.
Gör inga radmatningar efter rubriker!
Alla rubriker har ett automatiskt avstånd efter sig. Avståndet syns inte i texten i redigeringsrutan, utan först när du klickat OK och tittar på texten på själva sidan.
Fetad brödtext ser likadan ut som Mellanrubrik/ingress men har inget automatiskt avstånd efter sig. Den kan inte heller tolkas som en rubrik av hjälpmedlen.
Sidrubrik
Sidrubrik är namnet på textformatet för sidans översta rubrik.
Sidans översta rubrik ska vara samma som sidans namn. D.v.s. om sidan heter Bygglov i vänstermenyn (menyrubriken) så ska sidans rubrik överst på sidan också vara Bygglov och vara skriven i formatet Sidrubrik.
Om namnet på sidan och sidrubriken är olika kan användaren bli förvirrad.
• Använd formatet sidrubrik endast och alltid överst på sidan, i en egen textmodul.
• Skriv korta rubriker så att inte namnen på sidorna blir långa i vänstermenyn.
Stor mellanrubrik
• Textformatet Stor mellanrubrik är näst störst och används bara när man har behov av en tredje rubriknivå mellan Sidrubrik och Mellanrubrik/Ingress.
Mellanrubrik/Ingress
• Textformatet Mellanrubrik/Ingress är det mest använda rubrikformatet på en sida. Används i de flesta mellanrubriker på sidan och i sidans ingress.
Underrubrik
• Textformatet Underrubrik används ytterst sällan och bara när du har behov av en fjärde rubriknivå. Kanske främst vid publicering av texter ur formella dokument.
Högerspaltens innehåll
E-tjänster och Kontakt måste finnas på varje sida. Övriga rubriker kan du ta bort och lägga till som du vill.
• Observera att du måste göra vissa justeringar om du tar bort och lägger till färgade rubriker i högerspalten. Se längre ner under ”Lägg till rubrik” och ”Ta bort rubrik”.
Ordningen på rubrikerna ska vara följande:
Fakta
• Skriv i formatet Brödtext.
• Eventuella rubriker ska vara i Mellanrubrik/ingress.
• Enradiga rubriker är att föredra.
• Tänk efter noga och var mycket sparsam med texten under Fakta. Helst bara 3-4 rader.
Länkar
• Skriv i formatet Brödtext.
• En radmatning mellan varje länk - Gör det lättare att undvika att två länkar får samma länkning när man gör länkningen. Plus att det är lättare att pricka rätt med muspekaren och att ser tydligare ut.
• Max 10 länkar på rad. 7 (+-2) syns bäst.
E-tjänster
• Synpunkt Sundsvalls logga ska alltid finnas under den gröna rubriken E-tjänster. Loggan ska vara länkad till Synpunkt Sundsvall.
• Om loggan fattas kopierar du den från en annan sida. Det gör du genom att:
Gå till sidan där loggan finns – I högerspalten (under Innehåll) markera bildmodulen med loggan i– högerklicka – kopiera.
Gå tillbaka till din sida där loggan fattades - Markera Högerspalt (under
Innehåll) – högerklicka – klistra in.
Loggan hamnar sist i högerspalten så du måste flytta på den. Det gör du genom att:
Markera loggans bildmodul (under Innehåll) – håll ner shift (pilen) – håll ner vänster musknapp på den markerade modulen och dra loggan till sin plats under rubrik e-tjänster. (Du ser ett grått streck som visar var den hamnar när du släpper musknappen.)
• Finns det fler e-tjänster som relaterar till det din sida handlar om? Då skriver du in länkar till dem OVANFÖR Synpunktsloggan. Glöm inte att ha en radmatning mellan varje länk.
Kontakt
Exempel:Sundsvalls kommun 851 85 Sundsvall Telefon: 060-19 10 00
För att lägga till en kontaktperson skriver du så här:
Birgitta Grahn Sundsvalls kommun 851 85 Sundsvall Telefon: 060-19 13 85
Eller:
Birgitta Grahn Byggavdelningen 851 85 Sundsvall Telefon: 060-19 13 85 Fax: 060-19 12 85
Gör e-postlänk av namnet
I högerspalten blir e-postlänkar med hela e-postadressen utskriven
(birgitta.grahn@sundsvall.se), oftast för långa och förskjuter hela högerspalten åt vänster.
Gör därför en e-postlänk av själva namnet istället och var noga med beskrivningen.
Exempel 1:
Birgitta Grahn Byggavdelningen 851 85 Sundsvall Besöksadress:
Norrmalmsgatan 4, vån. 4 Telefon: 060-19 13 85 Fax: 060-19 12 85 Telefon: 060-19 13 85 Fax: 060-19 12 85
E-postlänkens beskrivning:
E-post: byggavdelningen@sundsvall.se
Ta bort eller lägga till färgad rubrik
När du tagit bort eller lagt till en färgad rubrik i högerspalten måste du justera avståndet ovanför rubriken.
Ta bort
Så här gör du för att ta bort en färgad rubrik i högerspalten:
Markera rubrikmodulen (under innehåll) – högerklicka – Ta bort.
Lägga till
1. Kopiera rubriken från en annan sida.
Det gör du genom att:
Markera rubrikmodulen (under Innehåll) – högerklicka – Kopiera.
2. Klistra in rubriken på din sida.
Det gör du genom att:
Markera Högerspalt (under Innehåll) – högerklicka – klistra in.
3. Dra rubriken till sin plats.
Den inklistrade rubriken hamnar sist i Högerspalten så du får dra upp den till sin plats. Det gör du genom att:
Markera rubriken – håll ner shift (pilen) – klicka på rubriken och behåll musknappen nertryckt - dra rubriken med musen tills ett grått streck visas där du vill ha den – släpp musknappen.
Justera avstånd ovanför rubrikerna
• Kontrollera att den översta rubriken i högerspalten har 0 px marginal ovanför sig.
• Kontrollera att de övriga rubrikerna i högerspalten har 15 px marginal ovanför sig.
Det gör du genom att:
Markera rubrikmodulen (under Innehåll) – högerklicka – Egenskaper – fyll i antalet px ovanför.
Länkar
Genom att endast läsa det länkade ordet/orden, i t.ex. en A-Ö-lista, ska
användaren kunna förstå vart länken leder. Det kallas för ”beskrivande länkar”.
Tänk på att länkar:
• Oftast har en tom rad ovanför och under sig.
• Aldrig ska finnas i löpande text.
• Skrivs med brödtext (ej fetad)
Exempel:
Stadsvision Sundsvall
Så ska stadsvisionen fungera Seminarium om Stadsvisionen
Undantag: e-postlänk av namn i högerspalten – har inget avstånd till adressuppgifterna under.
Exempel på undantaget:
Birgitta Grahn Byggavdelningen 851 85 Sundsvall
Vilka ord ska jag länka?
Gör beskrivande länkar och ha alltid samma namn på länkar som leder till samma sida.
Exempel på en beskrivande länk:
Tider och lokaler för skolstart
Den kan stå helt för sig själv och man kan ändå förstå vad man hittar om man klickar där.
Exempel på en dålig länk:
Information om tider och lokaler
Tider och lokaler för vaddå? Den kan du bara förstå om du först läst igenom sidans text om skolstarten.
Förbjuden länkning
Inga länkar i löpande text.
Exempel på hur du ska länka:
Läs mer om Inre Hamnens detaljplan som byggavdelningen presenterade 6 juni:
Inre Hamnens detaljplan
Exempel på förbjuden länkning i löpande text:
Läs mer om Inre Hamnens detaljplan som byggavdelningen presenterade 6 juni.
Exempel på länkar som inte är begripliga när dom står för sig själva (inte beskrivande):
Läs mer här , Klicka här, här och liknande.
Om såna här länkar är listade i en A-Ö-lista, eller om dom läses upp av ett hjälpmedel för funktionshindrade så finns:
”Läs mer” under L
”Klicka här” under K osv…
Länkar till förklaringar
Länkar i form av en fråga funkar bra till sidor som förklarar något begrepp eller företeelse. T ex vad en detaljplan är för något.
Vad är en detaljplan?
För att fungera bra även i A-Ö listan bör den se ut så här:
Detaljplan – vad är det?
Länkbeskrivningar
Länkbeskrivningen är den text som visas i lilla gula skylten som kommer upp när du för muspekaren över länken (i online-läge och förhandsgranskningsläge).
• För att skapa en länkbeskrivning måste du fylla i en länkbeskrivningstext när du gör länken. Fyll i raden som syns längst ner i dialogrutan när du skapar en länk.
• Länkbeskrivningen läses upp av synskadades hjälpmedel och talsynteser.
• Beskrivningen kan också användas för att ge mer information om länken. Se nedanstående exempel med Socialnämndens politiker. Där lägger vi till i länkbeskrivningen att informationen finns i vårt Förtroendemannaregister.
Exempel på länkbeskrivningar Exempel 1:
Ansökan om bygglov
Ansökan om bygglov