Vägledningen 24-timmarswebben – få fler att använda er webbplats Magnus Burell och Peter Krantz, Verva

Källa: ”The Design of Everyday Things”, Donald Norman, SAS Coffee Pot: www.ergonomidesign.se

Nya krav Internationalisering Åldrande befolkning Högre förväntningar Tillgänglighet för alla

Internationalisering

Åldrande befolkning

Högre förväntningar

Tillgänglighet för alla

Tillgängligt och användbart - för alla! ” Myndigheternas elektroniska tjänster skall utformas och tillhandahållas på ett sådant sätt att de kan användas av alla och inte utestänger grupper av medborgare.” Regeringens skrivelse 2000/01:151 EU:s medlemsländer har enats om att 2010 ska alla offentliga webbplatser följa W3C:s riktlinjer för tillgänglighet WCAG. Riga-deklarationen 2006 och Handlingsplanen i2010 ” Kommuner och landsting skall behandla sina medlemmar lika, om det inte finns sakliga skäl för något annat.” Kommunallagen 1991:900, 2kap §2 ” Statliga myndigheter ska verka för att deras verksamhet, lokaler och information är tillgängliga för funktionshindrade”. Förordning 2001:526 och Handisams riktlinjer ”Riv hindren!

Få stöd i Vägledningen 24-timmarswebben Ca 150 riktlinjer för utveckling av webb och e-tjänster i offentlig sektor Extramaterial Skriven tillsammans med läsare och experter Myndigheter Kommuner och landsting Leverantörer/företag

Ca 150 riktlinjer för utveckling av webb och e-tjänster i offentlig sektor

Extramaterial

Skriven tillsammans med läsare och experter

Myndigheter

Kommuner och landsting

Leverantörer/företag

Varför använda vägledningen? Få ut mer av er investering i webbplatsen Nå fler - kan användas av fler personer Ge enklare och effektivare service – spar tid för medborgare och företag Bli tydligare beställare – få bättre leveranser Er information och tjänster blir lättare hittade, lästa och förstådda Bättre träffar i sökmotorer Går att använda oberoende av användarens val av utrustning

Varför använda vägledningen?

Få ut mer av er investering i webbplatsen

Nå fler - kan användas av fler personer

Ge enklare och effektivare service – spar tid för medborgare och företag

Bli tydligare beställare – få bättre leveranser

Er information och tjänster blir lättare hittade, lästa och förstådda

Bättre träffar i sökmotorer

Går att använda oberoende av användarens val av utrustning

Effektivare och bättre service Fler ska kunna använda er webbplats  Bygg och publicera rätt! Kunskap om olika förutsättningar Följ webbstandarder, plattformsoberoende Fler ska vilja använda er webbplats  Användarcentrera! Utgå från era målgruppers behov och språk Följ konventioner för layout och utseende Utvärdera med riktiga användare

Fler ska kunna använda er webbplats  Bygg och publicera rätt!

Kunskap om olika förutsättningar

Följ webbstandarder, plattformsoberoende

Fler ska vilja använda er webbplats  Användarcentrera!

Utgå från era målgruppers behov och språk

Följ konventioner för layout och utseende

Utvärdera med riktiga användare

Kapitel utifrån vägledningens målgrupper och webbplatsens livscykel Effektivare och bättre service Utvecklingsprocessen Standarder för webbplatser Webbplatsens innehåll och tjänster Håll webbplatsen levande Webbinnehåll för mobila enheter Publiceringsverktyg Hjälpmedel Extramaterial : Checklistor, exempel, kravdokument, testverktyg, argument

Effektivare och bättre service

Utvecklingsprocessen

Standarder för webbplatser

Webbplatsens innehåll och tjänster

Håll webbplatsen levande

Webbinnehåll för mobila enheter

Publiceringsverktyg

Hjälpmedel

Extramaterial : Checklistor, exempel, kravdokument, testverktyg, argument

Tydlig struktur och konkreta råd ” Gör så här”- rubrik Prioritet 1 till 3 Motiv: Vad och varför? Åtgärd: Hur gör jag? Exempel och teknisk lösning Mätbarhet: Hur testar jag? Fördjupning Prioritet: 1

” Gör så här”- rubrik

Prioritet 1 till 3

Motiv: Vad och varför?

Åtgärd: Hur gör jag? Exempel och teknisk lösning

Mätbarhet: Hur testar jag?

Fördjupning

2: Utvecklingsprocessen Definiera de förväntade effekterna med webbsatsningen Kartlägg och effektivisera organisationens processer Utgå från målgruppernas behov Arbeta med prototyper och scenarior Testa och utvärdera kontinuerligt

Definiera de förväntade effekterna med webbsatsningen

Kartlägg och effektivisera organisationens processer

Utgå från målgruppernas behov

Arbeta med prototyper och scenarior

Testa och utvärdera kontinuerligt

Vad vill er verksamhet uppnå med er webbplats? De önskade effekterna uppstår när webbplatsen används

De önskade effekterna uppstår när webbplatsen används

Förväntade effekter och uppföljning Vilken effekt vill vi uppnå med webbplatsen eller tjänsten? Fler ansökningar? Färre fel i ansökningar? Ökad kunskap hos våra målgrupper? Mer kvalificerade frågor via telefon och mail? Har vi lyckats? När är vi nöjda? Hur många fler? Till vilket datum?

Vilken effekt vill vi uppnå med webbplatsen eller tjänsten?

Fler ansökningar? Färre fel i ansökningar?

Ökad kunskap hos våra målgrupper?

Mer kvalificerade frågor via telefon och mail?

Har vi lyckats? När är vi nöjda?

Hur många fler? Till vilket datum?

Hantera gapet Verksamhetsnytta realiseras genom användning För att veta vilken design man behöver måste man förstå hur den ska användas Användbarhetsarbete handlar om att ta reda på detta innan tekniken finns Användbarhetsarbete kan användas som länk mellan verksamhet och teknik i systemupphandling Källa: Erik Markensten ”Mind the Gap” Verksamhetsnytta Användarnytta Användarvänlighet       Teknik      

Verksamhetsnytta realiseras genom användning

För att veta vilken design man behöver måste man förstå hur den ska användas

Användbarhetsarbete handlar om att ta reda på detta innan tekniken finns

Användbarhetsarbete kan användas som länk mellan verksamhet och teknik i systemupphandling

Utgå från era målgruppers behov Vem är användaren? Var och när sker användningen? Varför sker användningen? Besökaren har ett ärende att uträtta Behov och drivkrafter

Vem är användaren?

Var och när sker användningen?

Varför sker användningen?

Besökaren har ett ärende att uträtta

Behov och drivkrafter

Användarprofiler Användningsmål Behov Kompetens Drivkrafter Användningssituation Baserad på faktiska data Samlar all information om en användargrupp

Användningsmål

Behov

Kompetens

Drivkrafter

Användningssituation

Baserad på faktiska data

Samlar all information om en användargrupp

IT-system i ditt arbete Arbetsmiljölagen (1977:1160) ” Teknik, arbetsorganisation och arbetsinnehåll skall utformas så att arbetstagaren inte utsätts för fysiska eller psykiska belastningar som kan medföra ohälsa eller olycksfall.” ” Målet är att arbetet ska kunna upplevas som en meningsfylld och berikande del av tillvaron.”

Arbetsmiljölagen (1977:1160)

” Teknik, arbetsorganisation och arbetsinnehåll skall utformas så att arbetstagaren inte utsätts för fysiska eller psykiska belastningar som kan medföra ohälsa eller olycksfall.”

” Målet är att arbetet ska kunna upplevas som en meningsfylld och berikande del av tillvaron.”

Arbeta med prototyper Skisser som beskriver funktioner Fungerar som kommunikation mellan projektets olika intressenter Underlag för test med användare Fel kan upptäckas innan en rad kod är skriven www.verva.se/24timmarswebben/exempel

Skisser som beskriver funktioner

Fungerar som kommunikation mellan projektets olika intressenter

Underlag för test med användare

Fel kan upptäckas innan en rad kod är skriven

Andra ingångar Sverige och EU Lag och rätt Så fungerar offentlig sektor Nyckelord sök Situationer i livet Fjalkjflfkldsafkljsdkfjf. Kajfaklfkalsfjlkasflkja. Bla fla mompa fomf ah fjakjf jaflkj. Söka och byta arbete Gå i Pension Söka och byta arbete Gå i Pension Söka och byta arbete Gå i Pension Söka och byta arbete E-tjänster Med e-tjänster kan du få en service enkelt och bekvämt. Följa ärenden och räkna ut Räkna ut och jämföra Följa ärenden och räkna ut Räkna ut och jämföra Följa ärenden och räkna ut Kontaktuppgifter Här hittar telefonnummer, adresser… Myndigheter, bolag, organisationer Län, landsting, regioner Sveriges kommuner Utdrag av adresslistor Sverige.se

Andra ingångar

Sverige och EU

Lag och rätt

Så fungerar offentlig sektor

Nyckelord

Situationer i livet

Fjalkjflfkldsafkljsdkfjf. Kajfaklfkalsfjlkasflkja. Bla fla mompa fomf ah fjakjf jaflkj.

Söka och byta arbete

Gå i Pension

Söka och byta arbete

Gå i Pension

Söka och byta arbete

Gå i Pension

Söka och byta arbete

E-tjänster

Med e-tjänster kan du få en service enkelt och bekvämt.

Följa ärenden och räkna ut

Räkna ut och jämföra

Följa ärenden och räkna ut

Räkna ut och jämföra

Följa ärenden och räkna ut

Kontaktuppgifter

Här hittar telefonnummer, adresser…

Myndigheter, bolag, organisationer

Län, landsting, regioner

Sveriges kommuner

Utdrag av adresslistor

Fungerar er webbplats i faktisk användning?

Fungerar er webbplats i faktisk användning? Utvärdera med riktiga användare som får göra realistiska uppgifter Valda delar av befintlig webbplats, prototyper, skisser Avsätt resurser för att åtgärda problemen som hittas Öka er trygghet inför lanseringar

Utvärdera med riktiga användare som får göra realistiska uppgifter

Valda delar av befintlig webbplats, prototyper, skisser

Avsätt resurser för att åtgärda problemen som hittas

Öka er trygghet inför lanseringar

Exempel på användningstest Källa: Exempel på användningstest – Problem att betala, av Inuse AB

3: Bygg rätt från början – följ standarder Gör den enklare för fler Bygg struktur och navigation utifrån era användares förväntningar Ge god läsbarhet Färg, kontrast och typografi Separera innehåll från layout  Mer oberoende av utrustning Använd stilmallar – inte tabeller eller ramar Exempel: www.kungalv.se , www.su.se Bygg med relativa mått Förstora text Flytande layout

Gör den enklare för fler

Bygg struktur och navigation utifrån era användares förväntningar

Ge god läsbarhet

Färg, kontrast och typografi

Separera innehåll från layout  Mer oberoende av utrustning

Använd stilmallar – inte tabeller eller ramar

Exempel: www.kungalv.se , www.su.se

Bygg med relativa mått

Förstora text

Flytande layout

Tvinga inte er användare att tänka efter… 1. Visa tydligt vad som är klickbart/länkat 2. Visa tydligt vad som hör ihop 3. Följ konventioner om du inte har starka argument för att alternativet är bättre för er verksamhet och era målgrupper SÖK > Sök Sök Webbkarta

1. Visa tydligt vad som är klickbart/länkat

2. Visa tydligt vad som hör ihop

3. Följ konventioner om du inte har starka argument för att alternativet är bättre för er verksamhet och era målgrupper

Kräv inte extraprogram för grundläggande funktionalitet Till exempel: Javaskript eller Flash

Mätning – Örebro län okt 2007 2ggr per år: www.verva.se/24-timmarswebben/matning

4: Webbplatsens innehåll och tjänster Grundinformation Kontaktinformation Juridisk information Beskriv er verksamhet på ett begripligt sätt Sökning Få bättre rankning i sökmotorer Ge webbplatsen en begriplig sökfunktion Spridning av webbplatsens innehåll och tjänster Prenumeration Återanvända innehåll – krisinformation, bloggar, media Öppna databaser

Grundinformation

Kontaktinformation

Juridisk information

Beskriv er verksamhet på ett begripligt sätt

Sökning

Få bättre rankning i sökmotorer

Ge webbplatsen en begriplig sökfunktion

Spridning av webbplatsens innehåll och tjänster

Prenumeration

Återanvända innehåll – krisinformation, bloggar, media

Öppna databaser

5: Stöd skumläsning Vem är läsaren? Skriv enkelt och begripligt det viktigaste först tydliga och beskrivande rubriker våga vara lagom exakt Dela upp längre texter i stycken uppräkningar i listor Var konsekvent Begrepp Datum och tid enligt standard Undvik förkortningar Skriv datum och tid enligt standard Checklista för webbpublicering: www.verva.se/24-timmarswebben/checklistor

Vem är läsaren?

Skriv enkelt och begripligt

det viktigaste först

tydliga och beskrivande rubriker

våga vara lagom exakt

Dela upp

längre texter i stycken

uppräkningar i listor

Var konsekvent

Begrepp

Datum och tid enligt standard

Undvik förkortningar

Skriv datum och tid enligt standard

Beskriv meningsbärande bilder och grafiska objekt med textalternativ . Pröva 2 minuter som blind… 1) Lägg händerna avslappnat på bordet 2) Blunda

Beskriv meningsbärande bilder och grafiska objekt med textalternativ .

Samma sida för seende personer

5: Länkar och dokument Skriv självförklarande länkar Undvik länkar som klicka här , gå till… , läs mer Använd title-texter för att ge mer information Tala om när en länk öppnas i nytt fönster Ge dokument tydliga filnamn Inte 2003_56.doc Publicera i första hand dokument i (X)HTML Checklista för publicering av PDF:er

Skriv självförklarande länkar

Undvik länkar som klicka här , gå till… , läs mer

Använd title-texter för att ge mer information

Tala om när en länk öppnas i nytt fönster

Ge dokument tydliga filnamn

Inte 2003_56.doc

Publicera i första hand dokument i (X)HTML

Checklista för publicering av PDF:er

Alla länkar på sidan Läs mer Läs mer Finns här Läs mer Alla rubriker på sidan … 2. Fakta 3. Filmarbetarkatalogen 3. Matiné 3. Filmarkivet i Grängesberg Skumläsare Synskadade Sökmotorer

Alla länkar på sidan

Läs mer

Läs mer

Finns här

Läs mer

Alla rubriker på sidan

…

2. Fakta

3. Filmarbetarkatalogen

3. Matiné

3. Filmarkivet i Grängesberg

Uppföljning av användning och innehåll Mät mot uppsatta mål Kontrollera statistik och sökbeteende Följ upp hur webbplatsen används

Mät mot uppsatta mål

Kontrollera statistik och sökbeteende

Följ upp hur webbplatsen används

6: Webbinnehåll i mobila enheter Användningen ser annorlunda ut Bygg plattformsoberoende Stilmall för små skärmar Samma information eller mobilspecifika tjänster?

Användningen ser annorlunda ut

Bygg plattformsoberoende

Stilmall för små skärmar

Samma information eller mobilspecifika tjänster?

Specifik mobiltjänst eller vanliga webbplatsen i mobilen

7: Välja publiceringsverktyg Testa och ställa krav på: Grundkonstruktion Textformatering Stöd för redaktören Formulär och tabeller Bildhantering och länkar www.verva.se/24-timmarswebben/verktyg

Testa och ställa krav på:

Grundkonstruktion

Textformatering

Stöd för redaktören

Formulär och tabeller

Bildhantering och länkar

www.verva.se/24-timmarswebben/verktyg

Kapitel utifrån vägledningens målgrupper och webbplatsens livscykel Effektivare och bättre service Utvecklingsprocessen Standarder för webbplatser Webbplatsens innehåll och tjänster Håll webbplatsen levande Webbinnehåll för mobila enheter Publiceringsverktyg Hjälpmedel Extramaterial : Checklistor, exempel, kravdokument, testverktyg

Effektivare och bättre service

Utvecklingsprocessen

Standarder för webbplatser

Webbplatsens innehåll och tjänster

Håll webbplatsen levande

Webbinnehåll för mobila enheter

Publiceringsverktyg

Hjälpmedel

Extramaterial : Checklistor, exempel, kravdokument, testverktyg

Kom igång! STEG LADDA NER Avsätt resurser  argument, mätningar Utbilda medarbetare  checklistor, lästips Formulera mål  boktips Utvärdera webbplatsen  checklistor, testverktyg Planera åtgärder kort/lång sikt  prio 1-3, dela upp Kartlägg behov  boktips Skissa och prototypa  boktips Formulera tydliga krav  kravdokument, exempel Välj leverantör och system  ramavtal Producera innehåll  checklistor, exempel Testa leveranserna  mätpunkter, testverktyg Följ upp målen

STEG LADDA NER

Avsätt resurser  argument, mätningar

Utbilda medarbetare  checklistor, lästips

Formulera mål  boktips

Utvärdera webbplatsen  checklistor, testverktyg

Planera åtgärder kort/lång sikt  prio 1-3, dela upp

Kartlägg behov  boktips

Skissa och prototypa  boktips

Formulera tydliga krav  kravdokument, exempel

Välj leverantör och system  ramavtal

Producera innehåll  checklistor, exempel

Testa leveranserna  mätpunkter, testverktyg

Följ upp målen

Mer stöd från Verva Frågor om webbutveckling och förslag: [email_address] Intro-seminarium Erfarenhetsutbyte, utbildning och nyheter Nätverket 24-timmarswebben www.verva.se/natverk/24h Gratis, seminarier Lästips och Leverantörslistor Ramavtal

Frågor om webbutveckling och förslag: [email_address]

Intro-seminarium

Erfarenhetsutbyte, utbildning och nyheter Nätverket 24-timmarswebben www.verva.se/natverk/24h

Gratis, seminarier

Lästips och Leverantörslistor

Ramavtal

Tack! Ladda ner extramaterial – www.verva.se/24-timmarswebben Hör av dig – vägledningen utvecklas utifrån dina synpunkter! Magnus Burell, [email_address]

Ladda ner extramaterial – www.verva.se/24-timmarswebben

Hör av dig – vägledningen utvecklas utifrån dina synpunkter!

Magnus Burell, [email_address]