Transcript Hitta och jämför service

Grafiska riktlinjer
för e-tjänster
Enligt stadens nya grafiska profil - 2013
Form
Typsni!, färger och layout
skapar igenkänning mellan
stockholm.se och e-tjänster.
Typsni! och färg
Typsni!
Stockholm type bold & Stockholm type regular
(Rubriker och grafiska element som knappar,
fiskben m.m.)
Open sans (Brödtext, inputsfält m.m.)
Textstorlekar
1. H1: 29 px Stockholm Type Bold
2. H2: 24 px Stockholm Type Bold
3. H3: 20 px Stockholm Type Bold
4. Ingress: 17 px Open Sans Regular
5. Brödtext: 15 px Open Sans Regular
Färger
Lila:
Ljuslila:
Varm grå:
#5d237d
#f1e6fc
#f5f3ee
Tex"ärg:
Länkfärg:
#333333
#5d237d
1
4
2
3
5
Layout
1. Sidhuvud
Logotyp är vänsterställd
e-tjänstens avsändare med tagline
Sidhuvudet sträcker sig över hela skärmens
bredd
Inloggat läge ligger överst i särskiljande
färg
Huvudmeny
1
2
2. Två spaltslayout
Innehållet delas upp i 2 spalter (med 21 px
marginal)
633 px bred för innehåll (formulär, listor, text
m.m.)
21 px marginal mellan spalterna
306 px bred högerspalt (inforutor,
funktioner, filtreringar m.m.)
3. Sidfot
Varm grå bakgrundsfärg
Sidfot sträcker sig över hela skärmens bredd
Länk till mobil version eller stockholm.se
3
2
Formulär och flöden
Grafiska element
Wizard (fiskben), hjälptext-rutor,
felmeddelande, input-fält, inaktiva frågor,
tooltip, datumväljare m.m. ska se ut enligt
skiss till höger
Knappar
Lila knappar för primära val (ex. Nästa)
Länk för sekundära val (ex. Avbryt)
Expanderbara funktioner i högerspalt
”Vanliga frågor och svar” och ”Kontakt”
Mallar
För a! på e! konkret sä! beskriva riktlinjerna för Stockholms
stads e-tjänster har man tagit fram mallar med olika scenarion
på hur innehåll kan hanteras.
E-tjänst med formulärinnehåll
•
Mall: Formulär
E-tjänst utan meny och lite innehåll
•
Mall: Inloggning
E-tjänst med meny och textinnehåll
•
Mall: Kontakta oss
E-tjänst med meny och funktion
•
Mall: Frågor och svar
Landa direkt i tjänsten
(Ingen “välkommen”sida)
Ge översikt över alla steg
(Låt alltid användaren se
kommande steg om
möjligt)
Instruktionstexter som
användaren kan öppna
vid behov
Ifyllningshjälp direkt i
inmatningsfält. Visas när
användaren interagerar
med formuläret
Mall: Formulär
Inloggning följer med
mellan stockholm.se
och olika e-tjänster
Infobox: Korta instruktioner +
länk till stockholm.se för
längre texter
Expanderbar box för “Vanliga
frågor och svar” i högerspalt
relaterat till innehåll.
Expanderbar box till
“Kontakta oss” i högerspalt
Använd date-picker för
datum
Tydliga felmeddelanden.
Visas direkt!
Visa ännu ej tillgängliga
frågor utgråat
Hämta alla uppgi!er som
går, t.ex. e-post från min
profil
Mall: Formulär
Tydligt kunna gå till nästa
steg eller backa i wizarden
Mall: Inloggning
INGEN MENY
-
E-tjänster som inte
har någon meny ska
ha en lila bar som
avdelare mellan
sidhuvud och innehåll.
SIDFOT
-
E-tjänsten ska ha
sidfot oavse" om det
finns innehåll som e"
avslut. Den ska
placeras längst ner
dikt mot browserfönstret.
Mall: Inloggning
Mall: Kontakta oss
SPRÅKVÄLJARE
-
E-tjänster med olika
språk väljs med i en
droplista I sidhuvudet
KONTAKT
-
E-tjänster kan ha
kontaktsida istället
för kontak#unktion i
högerspalt. Den ska
inte ha både
kontaktsida och
kontak#unktion i
högerspalten.
Mall: Kontakta oss
Mall: Frågor och svar
FRÅGOR OCH SVAR
-
Frågor och svar kan
antingen ligga som en
egen sida i menyn
eller som en funktion I
högerspalt. Välj e"
sä", inte båda.
-
Frågor och svar har
en sorteringsfunktion
där användaren kan
välja ämne. Använd
bara om e-tjänsten
har många frågor.
-
Varje fråga är
expanderbar med
innehåll som dyker
fram och trycker ner
övriga frågor i listan.
Mall: Frågor och svar
Vägledande exempel
För a! på e! konkret sä! beskriva riktlinjerna för Stockholms
stads e-tjänster har vi utgå! från två existerande e-tjänster.
Sy"et är a! visa på hur användarupplevelsen håller ihop och
därmed signalerar tillhörighet i samma avsändare (Stockholms
stad).
• Aktivitetsbokningen
• Träningspass och kurser (listningar) med filtrering
• Expanderbar “Mer om”-länk istället för separat sida per
pass
• Kulturskolan
• Kurskatalog (listning) med filtrering
• Separat sida för respektive kursbeskrivning
BOKAFLÖDE WIZARD
Ge översikt över alla steg
(Låt alltid användaren se
kommande steg om
möjligt)
AKTIVA FILTRERINGSVAL
-
-
Bekrä!a sker i nästa
steg (möjligt a" i
denna vy välja e"
eller fler pass)
-
Första steget finns en
rubrik i vänsterspalt
istället för knapp
-
Knapparna repeteras
högst upp och längst
ned i listan.
Visa tydligt vad jag
filtrerat på (möjligt
med flera val
samtidigt)
-
Slå på och av filter
FILTRERING
-
Placering:
högerkolumn
-
Expanderbara
filtergrupperingar
-
Kollapsad filtergruppering visar inom
gruppen aktiva val
-
Slå på och av filter
med e" klick
-
Filter som ger noll
träffar gråas ut
-
Listningen uppdateras
direkt vid varje val
Ingen ”uppdatera”knapp finns.
med e" klick
-
“Rensa filtrering”,
nollställer filtreringen
-
Listningen uppdateras
direkt vid varje val.
Ingen ”uppdatera”knapp finns.
-
Skriv ut: Antal träffar i
listan som matchar
aktiv filtrering
LISTNING
-
Listningen kan
grupperas med
rubriker
-
KNAPPAR
-
eller flera pass (och
Kollapsat listobjekt
boka i nästa steg)
ska ly!a de, för
användaren,
viktigaste
-
Expandera (fäll ut
“Mer om passet”-länk
knappen
-
listobjekt i taget
Redan bokade pass
kan enkelt bokas av
med resterande
information) e"
Antalet lediga platser
visas i anslutning till
parametrarna
-
Möjligt a" välja e"
-
Utgråade knapp för
fullbokade pass
PAGINERING
-
Visar aktiv sida
-
Visar antalet träffar
-
Visar antalet sidor
-
Rekommendation:
10 träffar per sida
BOKAFLÖDE WIZARD
-
Bekrä!a sker i nästa
(möjligt a" i denna vy
välja e" eller fler pass)
-
Knapparna repeteras
högst upp och längst
ned i listan.
KNAPPAR
-
Möjlighet a" kunna
ha fler knappar
beroende på e-tjänst
-
I de"a fall ska man
kunna välja antal
deltagare i kurs
INFO
-
Viktig tillfällig
information som inte
SÖK
-
Fritextsöken fungerar
som droplista med
tillhör listan.
snabbval i listan.
LISTNING A-Ö MED BILD
-
Listning visar objekt
HIERARKISK DROPLISTA
från a till ö
-
-
Droplista med
Bild ska placeras till
multival funktion med
vänster i listan
”välj alla/välj inget”
Rubriken på
-
listobjektet och bilden
Kan endast ha två
nivåer
länkas till en egen
beskrivningssida
-
I listobjektet ska det
ly!as max 3
parametrar. De som
är viktigast för
användaren!
TRE KOLUMN
-
Elevens ålder: Enda
filterkontroll som får
lista filtreringsval i fler
än en kolumn.
Knapparna ska vara
88 px och text
centreras däri. Tre
kolumner.
EXPONERANDE
FILTRERINGSVAL
-
16 eller färre
filtreringsval
DROPLISTA MED TYPE
AHEAD:
-
Fler än 16 filtreringsval
-
Droplista med
snabbval
DATE PICKER
-
U#älld datepicker
visar månadens alla
dagar, vald datum
(Mörklila) dagens
datum (Ljuslila)
-
Möjlighet a" paginera
sig mellan månader
OBJEKTBESKRIVNING
-
Centrerad bild med
bakgrundsmönster
som fyller ut
innehållets bredd
-
Rubrik och
information
presenteras under
bild
-
Dokumentikoner som
visar typ av dokument
och storlek
LISTNING
-
Listsida som visar all
info u#älld
-
Möjlighet a" boka en
plats åt gången
-
Ingen paginering, alla
listobjekt visas