Koncept för stockholm.se #1 – Kontraster

Postad av: Johannes Söderlund,

En del i vårt arbete med att ta fram guidelines för e-tjänster och byggandet responsiva stockholm.se var att definiera konceptet för stockholm.se på ett samlat och tydligare sätt. Detta för att förbättra kännedomen (för beställare och konsulter) om vad som fungerar från tidigare erfarenheter och kunskap, men också för att säkra användbarheten i utvecklingen framöver för oss själva.

Under våren har också stockholm.se granskats tillsammans med FunkaNu för att säkra tillgänglighetsaspekterna och då också de konceptuella delarna.

Nedan beskrivs konceptet med fokus på kontrasthantering i gränssnittet.

Hantering av kontraster i stadens webblösningar:

Det finns tre parametrar vi mäter kontraster på, skillnad i färg, skillnad i ljusstyrka, skillnad i ljusintensitet.

Riktlinjerna nedan är tolkade som just riktlinjer och inte som regler.

Skillnad i färg

  • Vi strävar alltid mot ett gränsvärde på 500 eftersom det är W3C riktlinjer.
  • Vi tillåter aldrig kontrastvärden under 400.
  • På viktiga textytor som huvudmenyer, startsida och brödtexter gäller riktlinjen 500 eller i närheten av 500.
  • Ett värde under 450 fungerar inte för sådana texter.
  • För andra texter, t.ex. kontraster på en hovereffekt eller mycket stora texter i en kampanjyta (där innehållet också kan nås på andra sätt t.ex. genom navigation eller sök) kan i undantagsfall lägre kontraster accepteras, t.ex. 420.
Den färgpalett som tagits fram har säkrats utifrån detta:
1. Blå 2. Ljusblå Färgkoder för 1. Blå och 2. Ljusblå 1. RGB	0/110/191 2. RGB	214/237/252 1. HEX	#006ebf 2. HEX	#d6edfc 1. Lila 2. Ljuslila Färgkoder för 1. Lila och 2. Ljuslila 1. RGB	93/35/125 2. RGB	241/230/252 1. HEX	#5d237d 2. HEX	#f1e6fc 1. Rosa 2. Ljusrosa Färgkoder för 1. Rosa och 2. Ljusrosa 1. RGB	196/0/100 2. RGB	254/222/237 1. HEX	#c40064 2. HEX	#fedeed 1. Grön 2. Ljusgrön Färgkoder för 1. Grön och 2. Ljusgrön 1. RGB	0/134/127 2. RGB	213/247/244 1. HEX	#00867f 2. HEX	#d5f7f4 1. Orange 2. Ljusorange Färgkoder för 1. Orange och 2. Ljusorange 1. RGB	221/74/44 2. RGB	255/215/210 1. HEX	#dd4a2c 2. HEX	#ffd7d2

Skillnad i ljusintensitet

  • Vi följer alltid W3Cs riktlinje om skillnad i ljusintensitet enligt nivå AA för texter under 18 punkter (1:4.5)
  • Vi följer alltid W3Cs riktlinje om skillnad i ljusintensitet enligt nivå AA för texter över 18 punkter och några steg uppåt i textstorlek (1:3)
  • Vi kan i undantagsfall frångå W3Cs riktlinjer om skillnad i ljusintensitet för riktigt stora texter t.ex. 72 punkter. Eftersom storleken påverkar läsbarheten också och det inte finns någon riktlinjer från W3C för riktigt stora textstorlekar.

Det verktyg som använts för att mäta skillnad i ljusintensitet (kontraster) finns på: http://www.paciellogroup.com/resources/contrastAnalyser, samt skillnad i färg: http://snook.ca/technical/colour_contrast/colour.html

Exempel på fonthantering:

 

Kategori: Design


Medeltidsmuseet lanseras på nya stockholm.se-plattformen

Postad av: Johannes Söderlund,

Medeltidsmuseets gamla webbplats var byggd någon gång i början på 2000-talet och nu har den, precis som en del andra webbplatser gjort tidigare under året, flyttat in i den nya stockholm.se-plattformen.

Det innebär bland annat att den använder ett gemensamt responsivt ramverk och den modulhantering som tagits fram för att stödja olika typer av innehållskombinationer.

 

Medeltidsmuseets webbplatsBesök nya webbplatsen

Se även andra webbplatser i samma ramverk:
Stockholm International
Stadsmuseet
Open Stockholm

 

 

Kategori: Okategoriserad



Testa nya Hitta service

Postad av: Johannes Söderlund,

Nu har då en första testversion av Hitta service (se tidigare inlägg om utvecklingen av Jämför service) lanserats. De första områdena är Vård- och omsorgsboende och Hemtjänst inom äldreomsorgen, men på sikt så kommer den nya lösningen att ersätta den befintliga.

Hitta service - beta

Du kan själv kolla in hur det ser ut just nu på: http://hittaservice-beta.stockholm.se/

 

Kategori: Okategoriserad


Stadens e-tjänster blir mobilanpassade

Postad av: Johannes Söderlund,

Förra året togs en ny grund fram för hur stadens e-tjänster ska se och också utvecklas framöver. Alla nya e-tjänster som har utvecklats sedan dess och även de som uppgraderats ingår alltså i det nya ramverket.

Fördelen blir att nu när ramverket blir mobilanpassat så kommer de flesta av dessa tjänster enkelt att kunna uppgraderas för detta. Nedan syns två bilder, från exempeltjänster, i testmiljön. En av e-tjänsterna som redan är ute med det responsiva gränssnittet är geoarkivet.

 

Exempeltjänst 1

Exempeltjänst 1

Exempeltjänst 2

Exempeltjänst 2

 

Kategori: Okategoriserad


Ny e-tjänst för skyltlov på stockholm.se

Postad av: Johannes Söderlund,

Nu har den första versionen den nya bygglovstjänsten lanserats skarpt. En sak som blir tydligare nu när allt fler tjänster utvecklas kontinuerligt är att det vore bra med en typ av klassificering som visar på vilken version tjänsten är i för närvarande och vilka förbättringar som planeras.

Den nya e-tjänsten handlar om att det går att ansöka om så kallat skyltlov, det vill säga bygglov för skyltar. Tjänsten ska vidareutvecklas under hösten, men just nu kan du ansöka om temporära eller permanenta fasadskyltar och framöver kommer det även att gå att ansöka om hela bygglov samt initiera en ändring av detaljplan via webben.

 

Bygglov för skyltar

Frågor eller synpunkter om tjänsten kan skickas till stadsbyggnadskontoret, stadsbyggnadskontoret@stockholm.se

 

 

Kategori: Okategoriserad


Gymnasievalets webbplats vinner pris

Postad av: Johannes Söderlund,

Igår vann Stockholms stads webbplats om gymnasievalet Svenska Publishingpriset, vilket är kul. Motiveringen löd:

”För en överskådlig och lättnavigerad portal med fina illustrationer och foton”.

Valet är ditt

Beskrivning av webbplatsen:

Målet med Valet är ditt är att erbjuda alla niondeklassare att enkelt hitta bra information inför sitt gymnasieval. Webbplatsen är utvecklad med tanke på att ungdomar idag söker information digitalt. På så vis ersätter webbplatsen den tidigare tryckta katalogen.

På webbplatsen presenteras gymnasieskolorna och deras program på ett lättillgängligt sätt. Eleverna får även möjlighet att kommentera och dela med sig av information om olika skolor och program till sina vänner, via exempelvis Facebook eller Twitter.

Skolorna har möjlighet att publicera egna bilder, via sina Instagram-konton som är kopplade till webbplatsen. På så vis kan de själva bidra och påverka vilken känsla de vill förmedla med sin skola, vilket gör webbplatsen levande och aktuell.

 

Kategori: Okategoriserad


Användningen av Tyck till-appen ökar!

Postad av: Johannes Söderlund,

I våras lanserades appen för att anmäla fel och tycka till om utemiljön i staden, vilket skulle underlätta när du är på språng (eller på plats så att säga).

Det ser den också ut att ha gjort! I början av året så kom alla ärenden in via webbformuläret, via e-post eller registrerades av en handläggare. Och efter åtta månader så kommer nu istället 33% av alla ärenden in via appen.

Kul att se att resultatet när både tekniken, användarna och verksamheten är i fas och nya beteendemönster skapas.

Antal ärenden per plattform
Huruvida appen också bidragit till att fler ärenden skickas in återstår att se i slutet av året.

Antal ärenden via Tyck till

 

 

Kategori: Okategoriserad


Uppdaterat koncept för responsiva stockholm.se

Postad av: Johannes Söderlund,

Uppdaterat koncept

I våras anpassades stockholm.se för mobila enheter genom att hela webbplatsen byggdes om med ett responsivt ramverk. Samtidigt genomfördes insatser för att snabba upp webbplatsen för att fungera ännu bättre på enheter där bandbredden kan vara mer begränsad. I anslutning till detta så gjorde vi en del nödvändiga anpassningar i det visuella och hur interaktionen med stockholm.se fungerar. Detta för att det skulle bli en så bra upplevelse som möjligt, oavsett vilken typ av enhet användaren surfar med.

Som ett led i det vidare förbättringsarbetet så utvärderades webbplatsen under sommaren ur ett användbarhets- och tillgänglighetsperspektiv. Nedan visas en rad visuella uppdateringar (och några under skalet), där flera kommer att driftsättas under nästa vecka.

 

Globala länkar

Användningen av stadens e-tjänster ökar varje år och för att göra det lättare att hitta dem skapas en global genväg tillsammans med den nylanserade, första versionen av ”Mina sidor” med kontohanteringstjänst för personuppgifter och lösenord.

Sidhuvud
Nya globala länkar i sidhuvudet


 

Navigationssidor

I de hierarkska surftesterna som gjorts stannar flera användare upp på de ingångar som kallas för navigationssidor. De är skapade för att ge en tydlig indelning mellan olika kategorier med information och tjänster istället för att samla dem tillsammans i en vänstermeny.

Eftersom att tiden är en avgörande faktor så görs nu sidorna mer komprimerade, där bilderna på de prioriterade kategorierna ersättas av piktogram och antalet ”hitta snabbt”-länkar blir färre för ökad överblick och tydlighet. Detta gör också att överblicken i mobilläge blir betydligt bättre.

Navigationssida - då och nu

Navigationssidor på dator – nuvarande och kommande.

Responsiv navigationssida
Navigationssidor på mobiltelefon – nuvarande och kommande
.

 

Principer och länkstilar

Enligt de tidigare principer som tillämpats, där länkar har särskiljts från textinnehållet så ligger de i dagsläget vid sidans slut i en del som heter ”Relaterade länkar” och ”Relaterade dokument”. Risken är stor att dessa missas av användaren så därför så ersätts de nu med principen att alla länkar istället ska läggas i sin kontext.

För att göra det lättare för användaren att identifiera olika länktyper och snabbt få en bild av vad som kommer att hända vid ett klick så har en uppsättning olika länkstilar tagits fram. Detta gäller även olika kontaktuppgifter, då vi vill lyfta fram de kontaktmöjligheter som finns via telefon och e-post, som exempelvis till Kontaktcenter Stockholm.

Sedan tidigare har länkstilen för att länka vidare till självservice (e-tjänst) och att hitta information via karta funnits. Dessa har nu också uppdaterats och nedan syns exempel på de olika stilarna.

 

Länkar till e-tjänster, kart- och katalogtjänster

 

Länkar till olika dokumenttyper

Dokument

 

Kontaktuppgifter

Kontakt

 

Appar

Appar

 

 

Stilarna i sitt sammanhang

  Dokument - sammanhang

Kontakt - sammanhang  Appar - sammanhang

 Allt text i bilderna ovan är i testsyfte och inte slutresultatet.

 

Kategori: Okategoriserad


Snart kommer nya Aktivitetsbokningen

Postad av: Johannes Söderlund,

I nästa vecka lanseras den första versionen av den nya Aktivitetsbokningen. Det vill säga, den gamla e-tjänsten från 2009/2010 har nu byggts om från grunden. Aktivitetsbokningen är en av de absolut mest frekvent använda e-tjänsterna och målet är att den ska bli enklare att använda och mer tillgänglig för personer med en funktionsnedsättning (vilket befintlig tjänst haft stora problem med).

Arbetet är dock inte klart, utan kommer att pågå under hösten för att göra den ännu bättre. Efter den första lanseringen som beräknas på tisdag så får ni mer än gärna lämna synpunkter direkt här på bloggen.

Nedan syns en kort demo från versionen som just nu finns i stadens test-miljö.

 

 

 

Kategori: Okategoriserad