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: #333333 Länkfärg: #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 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 1 2 2 3
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) Inloggning följer med mellan stockholm.se och olika e-tjänster Ge översikt över alla steg (Låt alltid användaren se kommande steg om möjligt) Infobox: Korta instruktioner + länk till stockholm.se för längre texter Instruktionstexter som användaren kan öppna vid behov Expanderbar box för Vanliga frågor och svar i högerspalt relaterat till innehåll. Ifyllningshjälp direkt i inmatningsfält. Visas när användaren interagerar med formuläret Expanderbar box till Kontakta oss i högerspalt Mall: Formulär
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 - Visa tydligt vad jag filtrerat på (möjligt med flera val samtidigt) - Slå på och av filter 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 - 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. 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.
LISTNING - Listningen kan grupperas med rubriker - Kollapsat listobjekt ska ly!a de, för användaren, viktigaste parametrarna - Expandera (fäll ut Mer om passet -länk med resterande information) e" listobjekt i taget KNAPPAR - Möjligt a" välja e" eller flera pass (och boka i nästa steg) - Antalet lediga platser visas i anslutning till knappen - Redan bokade pass kan enkelt bokas av - 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 tillhör listan. SÖK - Fritextsöken fungerar som droplista med snabbval i listan. LISTNING A-Ö MED BILD - Listning visar objekt från a till ö - Bild ska placeras till vänster i listan HIERARKISK DROPLISTA - Droplista med multival funktion med välj alla/välj inget - Rubriken på listobjektet och bilden länkas till en egen beskrivningssida - Kan endast ha två nivåer - 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