Grafisk Design Guideline

Grafisk Design Guideline SKAT Portal <Accepteret af/den> <Accepteret af/den> Forfatter (Author): Kim Bille Version: 05.00 Oprettet (Created): 12-06-2006 Seneste ændret (Last Modified): 08-09-2008 15:33 Fil (file): \\Ncserver33\Consulting\Clients \SKAT\Fase 1\Slutdokumentation\Final\SKAT 1 PORT Grafisk Design Guideline v05.00.doc Tilgængelig på dansk: Ja Available in English: No

Dokument log (Document log) Opdateret (updated) Version Forfatter (Author) Ændringer (Changes) 02-06-2006 0.1 Michael Strand Andet udkast baseret på feedback fra workshop 3-1b 23-06-2006 0.2 Michael Strand Opdateret på workshop 07-07-2006 0.3 Michael Strand Opdateret med fremsendte sider der skal være indeholdt. 11-07-2006 0.4 Michael Strand Opdateret jf. SKAT s kommentarer 17.08.2006 0.5 Leni Barfred Ændringer til Kap 1, 3. 4, 5, 6, 8 21.09.2006 0.6 Leni Barfred Tilføjet beskrivelse af det valgte design 29.09.2006 1.0 Leni Barfred Tilføjet fontstørrelser, pixels, farver etc fra PlusPeople 12.10.2006 1.1 Kim Bille Rettelser p.bg.a SKATs kommentarer 30.10.2006 1.2 Leni Barfred Ændringer pga. M6 kommentarer fra SKAT 06.11.2006 1.3 Leni Barfred Nyt design for noter og kampagnebokse 10.11.2006 1.4 Kim Bille Efter CSC Review 24.11.2006 1.5 Leni Barfred M.6.2 review kommentarer indarbejdet 02-01-2007 1.6 Kim Bille Indarbejdelse af forbladskommentarer 18-01-2007 2.0 Jesper Klitgaard Opdateret til version 2.0 24-01-2007 2.1 Jesper Klitgaard Opdateret på baggrund af kravmapning 01-02-2007 2.2 Jesper Klitgaard Opdateret til verison 2.2 01-02-2007 2.3 Kim Bille Sammenflettet version 1,8,1 og version 2.2 01-06-2007 03.00 Kim Bille Ændringer pga ÆØ018 og ÆØ022, PCbrugervenlighedstest og ifm Iteration 2 09-07-2007 03.01 Kim Bille Ændringer ifm ÆØ030 19-07-2007 03.02 Michael Strand Indsat indeks efter aftale med Heidi Stocklund 06-08-2007 03.03 Jesper Klitgaard Rettelser efter GDG review v03.01. 20-08-2007 03.04 Jesper Klitgaard Rettelser efter GDG review v03.01 anden runde. 23-08-2007 03.05 Jesper Klitgaard Rettelser efter GDG review v03.04 23-08-2007 03.06 Jesper Klitgaard Rettelser efter GDG review v03.05 06-06-2008 04.00 Kim Bille Opdateret til slutdokumentation 12-08-2008 04.10 Jonas Holgaard Levring Opdateret p.b.g.a. SKATs kommentarer 03-09-2008 04.20 Kim Bille Opdateret ifm. review runde 2 kommentarer 08-09-2008 04.30 Kim Bille Opdateret ifm. godkendelse. 29-09-2008 05.00 Jesper Klitgaard Opdateret til endelig version. Dokument log for ÆØ-Portal006 Opdateret (updated) Version Forfatter (Author) Ændringer (Changes) Ændringer udført i forbindelse med ÆØ Portal006 har taget udgangspunkt i version 1.6 er nærværende dokument. Efter review processen med SKAT er ændringerne blevet flettet ind i version 2.2 og fået versionsnummer 2.3 (se her over) 10-01-2007 1.7 Kim Bille Ændringer pga. ÆØ-Portal006 (branched) 25-01-2007 1.8 Kim Bille Review af ÆØ-Portal006 31-01-2007 1.8.1 Kim Bille Review 2 af ÆØ-Portal006 Version: 05.00 Side: 2 af 176

Indholdsfortegnelse (Content) 1 Generelt om design... 7 1.1 Mission... 7 1.2 Designstrategi... 8 1.3 Fleksibelt design... 8 1.3.1 Variabel skærmstørrelse... 9 1.3.2 Variabel skriftstørrelse... 9 1.3.3 Udskifteligt design... 9 1.4 Målgruppe... 9 1.5 Anvendelse... 10 2 Design elementer... 12 2.1 Farvepalette... 12 2.1.1 Tabelfarver i portalområderne... 13 2.1.2 Portletoverskrift farver i portalområderne... 14 2.2 Typografi... 15 2.2.1 Fonte... 15 2.2.2 Farver på links... 17 2.3 Grafiske elementer... 18 2.3.1 Billeder... 18 2.3.2 Ikoner... 18 2.3.3 Pile... 19 2.4 Gennemgående elementer... 20 2.4.1 Log ind / Log ud... 20 2.4.2 Felt-hjælp... 20 2.4.3 Kalender... 21 2.4.4 Brug af alt- og title-tag... 22 2.5 Gif-filer tilknyttet portalen... 22 3 Navigationsprincipper... 24 3.1 Grundlæggende navigationsprincipper... 24 3.2 Topbaren... 25 3.2.1 Hjælpemenu... 25 3.2.2 Servicemenu... 26 3.2.3 Logobjælke... 27 3.2.4 Topmenu... 28 3.3 Venstremenu... 30 3.3.1 Venstremenu i vejledninger... 31 3.3.2 Justerbar venstremenu... 33 3.3.3 Anbefalede niveauer... 33 3.3.4 Navngivning af menupunkter... 33 3.3.5 Antal menupunkter... 34 3.4 Orientering i struktur... 34 3.5 Højrespalte... 34 3.5.1 Højrespalte for internet... 35 3.5.2 Højrespalte for intranet... 35 3.5.3 Søg... 37 3.5.4 Funktionsområde... 37 3.5.5 Relateret information... 38 3.5.6 Højrespalte for vejledninger... 38 3.6 39 3.6.1 Speciel brødkrumme... 39 3.6.2 Style for brødkrumme... 40 3.7 Til top... 40 Version: 05.00 Side: 3 af 176

3.7.1 Style for Til top... 40 3.8 Fanebladsnavigation... 40 3.9 Åbning af sider i nyt vindue... 41 4 Brugervenlighedsprincipper... 42 4.1 Generelt om brugervenlighed... 42 4.1.1 Simpel søgning... 43 4.1.2 Overskueligt og forudsigeligt sidedesign... 43 4.1.3 Nedtonet og troværdigt design... 44 4.1.4 Dansk brugerdialog... 45 4.2 Generelt om tilgængelighed... 45 4.2.1 Synshæmmede... 46 4.2.2 Nedsat motorisk funktion... 47 4.2.3 Farveblinde... 48 4.2.4 Genvejstaster og funktionstaster... 48 4.2.5 Tabulator navigation... 48 4.2.6 Positionering af cursor... 49 4.2.7 Alternative tags... 49 4.2.8 Tilgængelige tabeller... 50 5 Sideopbygning... 52 5.1 Generelt om sideopbygning... 52 5.2 Generelle regler for brug af gitteret... 52 5.3 Størrelsesangivelser til gitteret... 53 5.4 Portlet dimensioner og skalerbarhed... 54 5.4.2 Portlet uden toolbar... 55 5.4.3 Portlet med toolbar... 56 5.4.4 Portlet toolbar... 57 5.5 Interaktion mellem forskellige portlets... 58 5.5.1 Én information skal kun indtastes én gang... 58 5.5.2 Data findes ud fra indtastet information... 58 6 Side-elementer... 59 6.1 Links... 59 6.1.1 Korrekte links... 59 6.1.2 Ukorrekte links... 60 6.1.3 Links eller knapper... 60 6.2 Informationsportlet... 60 6.3 Punktopstilling... 61 6.3.1 Style for punktopstilling... 61 6.4 Inputfelter... 61 6.5 Beslutningstræer... 63 6.5.1 Beslutningstræer - guide... 64 6.5.2 Beslutningstræer stifinder... 64 6.6 Grafiske billedillustrationer... 64 6.6.1 Kampagneportlet... 65 6.7 Knapper... 66 6.7.1 Style for knapper... 66 6.7.2 Placering af knapper... 67 6.8 Nyheder... 68 6.8.1 Nyheder i indholdsområdet... 68 6.8.2 Nyheder i højrespalten... 69 6.9 Paging (sideskift og nummerering)... 70 6.9.1 Paging indenfor portlets... 70 6.9.2 Style for paging... 71 Version: 05.00 Side: 4 af 176

6.10 Radiobuttons og checkbokse... 71 6.10.1 Korrekt brug af radiobuttons... 71 6.10.2 Ukorrekt brug af radiobuttons... 72 6.10.3 Ledetekster... 72 6.10.4 Radiobuttons i stedet for dropdown... 72 6.10.5 Style for radiobuttons... 72 6.11 Tabeller... 73 6.11.1 Indholdstabeller... 73 6.11.2 Opsætningstabeller... 74 6.12 Lister... 77 6.12.1 Grupperet liste... 77 6.12.2 Indekseret liste... 77 6.12.3 Sorteret liste... 78 6.12.4 Style for lister... 79 6.13 Noter... 79 6.13.1 Style for noter... 79 6.14 Virksomhedsoplysninger... 79 6.14.1 Style for visning af virksomhedsoplysninger... 80 6.15 Rammer og linjer... 80 6.16 Fejlmeddelelser... 81 6.16.1 Valideringsfejl... 81 6.16.2 Forretningsfejl... 82 6.16.3 Systemfejl... 82 6.17 Dropdowns i 2 niveauer... 83 6.18 Datoformat... 84 6.19 Guides... 84 6.19.1 Procesguides... 84 6.19.2 Non-procesguides... 85 7 Browser og tegnsæt... 87 7.1 Browserunderstøttelse... 87 7.2 Tegnsæt... 87 8 Skabelon-sider... 89 Skabelon: Internetforside... 90 8.1 90 8.2 Skabelon: Intranetforside... 92 8.3 Skabelon: Underforside til portalområde... 93 8.4 Skabelon: Tema-side... 95 8.5 Skabelon: Indholdsside... 96 8.6 Skabelon: Forside til vejledning... 98 8.7 Skabelon: Underside til vejledning...100 8.8 Skabelon: Tabel...102 8.9 Skabelon: Beslutningstræ guide - vandret...104 8.10 Skabelon: Beslutningstræ guide - lodret...106 8.11 Skabelon: Beslutningstræ stifinder...107 8.12 Skabelon: Pressemeddelelse...109 8.13 Skabelon: Afgørelse...109 9 Specifikke sider... 111 9.1 Søgeresultat...112 9.2 Udvidet søgning...113 9.3 Glemt brugernavn...114 9.4 Min side...115 9.5 Foretag personalisering Vælg arbejdsroller...116 Version: 05.00 Side: 5 af 176

9.6 Tilmelding til nyhedsmail...117 9.7 Side med vist note...118 9.8 A-Å oversigt...119 9.9 Sitemap...120 9.10 Udskriv...121 9.11 Elev i SKAT...123 9.12 Kontakt os...124 9.13 Joboversigt...125 10 Navngivning på portalen... 127 10.1 Navngivning af knapper...129 11 Bilag: Guidelines for HTML, CSS og Javascript.... 130 11.1 Om HTML...130 11.2 Om CSS (Cascading Style Sheets)...130 11.3 Om Javascript...131 12 Bilag: CSS-reference til udvalgte elementer... 132 13 Indeks... 175 Version: 05.00 Side: 6 af 176

1 Generelt om design Indeværende dokument er en Grafisk Design Guideline, som er tiltænkt website administratorer og andre leverandører af nye udvidelser til internet, intranet eller ekstranet hos SKAT SKAT har en lang tradition for at prioritere godt design. Det gode design bruges både som forretningsmæssigt værktøj og til at udtrykke værdier. SKATs webtilstedeværelse skal demonstrere den samme kvalitet og signalere de værdier, som er kendetegnende for det øvrige SKAT. Denne guide beskriver de forskellige elementer, layoutet og logikken bag designet og navigationen. Dermed sikres en konsekvent og positiv oplevelse - også selvom mange forskellige designere har været involveret. Det nye design, og især den stærkt forbedrede navigationsfunktionalitet, vil kunne skabe en stærkere appeal og et væsentligt forbedret image for SKAT, i og med kunderne lettere finder de relevante nye informationer og tilbud på www.skat.dk og SKATs intranet og ekstranet. Dette stiller til gengæld krav til de ressourcer hos SKAT, som forestår vedligeholdelse og udbygning af sitet. 1.1 Mission Den overordnede målsætning for designet, er at skabe et univers, som er fleksibelt, og opfylder de kommunikationsmæssige krav brugerne og SKAT har til hjemmesiden her og nu samt i fremtiden. Design og teknik er indbyrdes afhængige, og et uhensigtsmæssigt design kan fordyre, eller ligefrem umuliggøre, den tekniske implementation. Websitet skal kunne modtage og effektivt behandle besøgende fra vidt forskellige målog interessegrupper, med vidt forskellige forudsætninger. Derfor vil det fremtidige website være smidigt i designet, således at alle tilgodeses, samtidig med at kommunikation og branding fastholdes og udvikles. Designprojektet skal primært sikre branding grafisk konsistens navigationsmæssig overskuelighed variationsmuligheder i layout håndtering af database publicering i skabelon-baseret layout at brugerne får hurtig og nem adgang til de korrekte informationer Udfordringer Fastholde designet uden at gøre sitet for ufleksibelt. Version: 05.00 Side: 7 af 176

Skabelonbaseret layout uden at virke standardiseret og maskinelt Holde sitet enkelt Fastholde koncept/layout over tid Signalere troværdighed og seriøsitet med vores design. 1.2 Designstrategi Enkelhed Effektivt, funktionelt og let gennemskueligt. Dette er ikke det samme som et afpillet design, hvor alle ikke-funktionelle elementer er overflødige elementer. Designet skal befordre klar, hurtig og entydig kommunikation og information. Imødekommende Åbent, venligt og gennemsigtigt design, der håndterer alle brugeres niveau på en naturlig, fleksibel facon. Troværdigt Skat er en offentlig institution som ønsker at udstråle troværdighed til borgerne. Seriøst Mange andre offentlige institutioner, jurister og andre bruger SKATs hjemmeside til seriøse formål. Standarder og retningslinier Designet skal overholde WWW Consortiums standarder og offentlige retningslinier. 1.3 Fleksibelt design Designet er fleksibelt på forskellige måder. For det første er designet fleksibelt på den måde at designet kan fungere til forskellige skærmstørrelser, samt med forskellige skriftstørrelser. Derudover er designet fleksibelt i og med det let kan udskiftes, hvis SKAT får ny visuel identitet. Version: 05.00 Side: 8 af 176

1.3.1 Variabel skærmstørrelse Designet er tilpasset 1024 * 768 pixels, men kan fungere på 800*600 uden større gener for brugeren. Der er ingen maksimum på skærmstørrelser, som understøttes. Dette betyder at designet også virker på 1280x1024. Der er 1 fastbredde element i venstre side og 1 fastbredde element i højre side. Herimellem ligger et element, som kan variere i bredden afhængigt af bredden på brugerens browservindue. Billeder, som anvendes på portalen, skal derfor også kunne fungere i det fleksible design. I praksis vil billederne blive dynamisk beskåret i bredden. Dvs. at fotografier og illustrationer, som skal bruges i øverste del af forside-skabelonerne enten 1) skal have hovedmotivet i venstre side eller 2) skal være af repetitiv/mønster karakter (som f.eks. frisen med mennesker). 1.3.2 Variabel skriftstørrelse Designet kan vises uden problemer med forskellige skriftsstørrelser, således at det bliver mere tilgængeligt. Layoutet ødelægges ikke selvom brugeren vælger den størst mulige skriftsstørrelse. Der er ikke anvendt grafisk tekst, da denne ikke understøtter variabel skriftsstørrelse. 1.3.3 Udskifteligt design Hvis SKAT får ny visuel identitet, inden eller når portalen er gået i luften, kan designet uden større vanskeligheder udskiftes med et nyt grafisk koncept. Hele designet kan implementeres vis Cascading Style Sheets. Ingen design-elementer må derfor implementeres direkte i HTML-siderne på portalen. Alle sider skal benytte de fælles CSS-filer, som er udviklet til portalerne. Hvis SKAT ønsker et andet grafisk koncept er det blot et spørgsmål om at udskifte CSS-filerne og portalerne vil fremtræde i det nye grafiske koncept. 1.4 Målgruppe Guidelinen er udarbejdet til SKAT-medarbejdere eller leverandører, som skal udvikle nye sider til internet, intranet eller ekstranet hos SKAT. Dokumentet henvender sig til både interne udviklere som udvider og vedligeholder portalrammeværket og til eksterne udviklere som udvikler på baggrund af portalrammeværket. Det forudsættes, at læseren har kendskab til HTML. Version: 05.00 Side: 9 af 176

1.5 Anvendelse Den grafiske design guideline indeholder en beskrivelse af det grafiske design for SKAT.dk, SKATs intranet og SKATs ekstranet. Guidelinen beskriver hvilke elementer, der kan anvendes ved opbygning af portalen, samt de overvejelser omkring brugervenlighed og tilgængelighed, der har ledt til, at designet for de enkelte elementer ser ud, som de gør. Der er beskrevet 2 slags elementer: 1. faste grafiske elementer, som udviklere og designere skal forholde sig til, men som ikke må ændres 2. sideelementer eller byggeklodser, som kan anvendes ved opbygning af nye sider Elementerne skal anvendes og se ud, som beskrevet, for at give brugerne en ensartet oplevelse på portalerne. Ensartethed og forudsigelighed er et vigtigt element i en god brugeroplevelse. Guidelinen anvendes som et opslagsværk. Men retningslinjerne som er angivet skal overholdes: Design elementer Navigationsprincipper Brugervenlighedsprincipper Sideopbygning Side-elementer Browser og tegnsæt Skabelon-sider Specifikke sider Bilag: Navngivning på portalen Indeholder beskrivelse af designets grundelementer såsom fonts, farver, størrelser, krav til logo, link farver osv. Beskriver navigationselementerne i designet herunder top-menu, venstremenu og højrespalte. Beskrivelse af de principper for brugervenlighed og tilgængelighed, der er lagt vægt på i designet. Layout for sideopbygningen beskrives med størrelsesangivelse på de forskellige sideelementer. De enkelte byggeklodser, som kan anvendes ved opbygning af nye sider beskrives. Oversigt over browsere, som designet understøtter. Skabelonerne som på nuværende tidspunkt er identificeret og designet. Skabelonerne skal anvendes, når der designes og udvikles nye sider til portalerne. Afsnittet viser eksempler på centrale specifikke sider, som kan anvendes som inspiration ved udvikling af nye sider. Beskriver de ord, der er valgt for centrale begreber i designet. Version: 05.00 Side: 10 af 176

Bilag: Guidelines for HTML, CSS og Javascript. CSS-reference til udvalgte elementer Beskrivelse af, hvorledes HTML-siderne skal bygges op. Afsnittet indeholder en beskrivelse og eksempler på styling af de mest udbredte elementer. Version: 05.00 Side: 11 af 176

2 Design elementer I de efterfølgende afsnit beskrives de enkelte grundelementer som indgår i designet såsom fonts og farver. 2.1 Farvepalette Farvepaletten fra SKATs designmanual skal benyttes for at sikre harmoni og ensartethed i kommunikationen. Designelement Farvenavn Hexadecimal Eksempel Min side Gul #FFC61E Hjælpe-funktionalitet Gul #FFC61E Om os Koksgrå #3F6075 Privat Lilla #72166B Erhverv Blå #005BBF Juridisk information Grøn #009987 Processer Turkis #00A5D1 Bibliotek Lilla #72166B Enheder Pink #CC00A0 Netavisen Grøn #009987 Værktøjer Lime #CEE007 Foreninger Turkis #00A5D1 Fejlmeddelelser Pink #CC00A0 Note-baggrund Lys gul #FFFAEB Portletramme Lys grå #CDD6E0 Hover top menu Gul #FFC61E Obligatorisk felt (Pink stjerne) Pink #CC00A0 Paging Aktiv pil Koksgrå #3F6075 Paging Inaktiv pil Mørke grå #A5B8C9 Version: 05.00 Side: 12 af 176

2.1.1 Tabelfarver i portalområderne I hele dette afsnit henviser farveangivelserne til nedenstående tabel. Yderligere er det nyttigt at læse dette afsnit i sammenhæng med det specifikke afsnit om tabeller, afsnit 6.11. Rækker i alle tabeller farves skiftevis i koksgrå-nedtone 1 og koksgrå-nedtone 2. I tabeller, hvor det er muligt at sortere på en række, har rækkeoverskrifterne farven koksgrå, mens farven i tabeller hvor der ikke kan sorteres er hvid. Når der klikkes på en række for at sortere, skifter farverne for den sorterede række til portalområdefarverne. Således er rækkeoverskrifterne nu den ikke tonede portalområdefarve, og rækkerne skifter mellem de to nedtonede portalområdefarver. Farve Valgt sortering Standard Blå #005BBF #3F6075 - Nedtonet 1 #CCE0ED #EAEFF2 - Nedtonet 2 #EFF5FF #FFFFFF Grøn #009987 #3F6075 - Nedtonet 1 #CEE6E3 #EAEFF2 - Nedtonet 2 #F2FAF9 #FFFFFF Lilla #72166B #3F6075 - Nedtonet 1 #EADCE9 #EAEFF2 - Nedtonet 2 #F8F5F8 #FFFFFF Turkis #00A5D1 #3F6075 - Nedtonet 1 #EAEFF2 #EAEFF2 - Nedtonet 2 #EFF9FF #FFFFFF Gul #FFC61E #3F6075 - Nedtonet 1 #FBF8DB #EAEFF2 - Nedtonet 2 #FDFBEB #FFFFFF Pink #CC00A0 #3F6075 - Nedtonet 1 #F4D6ED #EAEFF2 - Nedtonet 2 #FCF2FA #FFFFFF Lime #CEE007 #3F6075 - Nedtonet 1 #F4F8C5 #EAEFF2 - Nedtonet 2 #F9FBE2 #FFFFFF Version: 05.00 Side: 13 af 176

Koksgrå #3F6075 #3F6075 - Nedtonet 1 #CCD4D9 #EAEFF2 - Nedtonet 2 #EAEFF2 #FFFFFF 2.1.2 Portletoverskrift farver i portalområderne Følgende tabel angiver farverne for portlet overskrifter afhængigt af det portalområde portletten er placeret i. For hvert portalområde er forgrunds- og baggrundsfarverne for H1, H2, H3 og H4 angivet. Hver farve er angivet med sin hexadecimal værdi og selve farven. Portalområde H1 (Forgrund Baggrund) H2, H3 og H4 (Forgrund Baggrund) Privat #00000 #FFFFF #00000 #72166B Erhverv #00000 #FFFFF #00000 #005BBF Juridisk information #00000 #FFFFF #00000 #009987 Om os #00000 #FFFFF #00000 #3F6075 Processer #00000 #FFFFF #00000 #00A5D1 Bibliotek #00000 #FFFFF #00000 #72166B Enheder #00000 #FFFFF #00000 #CC00A0 Netavisen #00000 #FFFFF #00000 #009987 Værktøjer #00000 #FFFFF #00000 #CEE007 Foreninger #00000 #FFFFF #00000 #00A5D1 Version: 05.00 Side: 14 af 176

Min side #00000 #FFFFF #00000 #3F6075 2.2 Typografi 2.2.1 Fonte Tekstelement Hex Farve Størrelse Stil Andet Brødtekst #000000 Sort 11 regular Skydning 14 pixels Nedtonet tekst #7C98AE Grå Samme som den tekst, der står når teksten ikke er nedtonet Portlet brødtekst #000000 Sort 11 regular Skydning 14 pixels Hjælpetekst #000000 Sort 11 regular Skydning 14 px Bundtekst #000000 Sort 11 regular Skydning 14 px Verdana skal anvendes overalt. Skriftsnittet er tegnet til skærmbrug og fremtræder meget læsbart på skærmen. Alternativ font, hvis brugerens browser ikke understøtter Verdana, er Arial. Nedenstående tabel viser farve, størrelse, stil og skydning for generelle tekstelementer på portalen. Tekstelementer som er specielle for de enkelte side-elementer på portalen såsom Forrige, Næste, til top, knap-tekster etc. er beskrevet under afsnit 6 Sideelementer. Hjælpe- /servicemenu #000000 Sort 11 regular Skydning 14 px Overskrifter i brødtekst #000000 Sort 11 fed Skydning 14 px Overskrifter i portlet #000000 Sort 13 fed Skydning 18 px Overskrifter i indholdsom åde H1 #000000 Sort 13 fed Skydning 18 px Version: 05.00 Side: 15 af 176

Introduktion til siden #000000 Sort 11 Regular Skydning 18 px Kanttekst #000000 Sort 11*0,9 fed Skydning 14 px X til afkrydsning #000000 Sort 11 fed NY! i vejledninger #f9eaad Portalområde forgrund/gul 11 fed Skydning 19 px baggrund Venstremenu #000000 11 regular Skydning 19 px H1 #000000 Sort 18 bold Skydning 18 (mellem overskrift og brødtekst) H2 #000000 Sort 16 bold Skydning 18 (mellem overskrift og brødtekst) H3 #000000 Sort 14 bold Skydning 18 (mellem overskrift og brødtekst) H4 #000000 Sort 12 bold Skydning 18 (mellem overskrift og brødtekst) H5 #000000 Sort 12 bold, italic Skydning 18 (mellem overskrift og brødtekst) H6 #000000 Sort 11 bold Skydning 18 (mellem overskrift og brødtekst) Version: 05.00 Side: 16 af 176

2.2.2 Farver på links Nedenstående tabel beskriver linksfarverne, som skal anvendes på portalens sider. Link placering Ikke besøgte Besøgte Hover Topmenu Forgrund: #ffffff (hvid) Aktivt topmenupunkt har gif i portalområdets farve som understregning Forgrund: #ffc61e (gul) Brødtekst Forgrund: #212121 (sort) understreget Forgrund: #9e5f0e (brun) understreget Forgrund: #3f6075 (grå) Baggrund: #ccd6e0 (lysegrå) Venstremenu #212121 (sort) #212121 (sort) #212121 (sort) Understreget Aktuelt punkt i venstremenu Portalområdets farve Portalområdets farve Portalområdets farve Juridisk vejledning (Venstremenu) #009987 (grøn) understreget #009987 (grøn) understreget #000000 (sort) understreget Juridisk vejledning (Tekst) #9E5F0E (brun) understreget #9E5F0E (brun) understreget Forgrund: #3F6075 (grå) Baggrund : #CCD6E0 (lysgrå) Understreget Portlets/lister #212121 (sort) Understreget Forgrund: #9e5f0e (brun) understreget Forgrund: #3f6075 (grå) Baggrund: #ccd6e0 (lysegrå) Funktionsområde Forgrund: #3E6074 (mørkegrå) Forgrund: #3E6074 (mørkegrå) Forgrund: #3E6074 (mørkegrå) Version: 05.00 Side: 17 af 176

Udvidet søgning, Forgrund: Forgrund: Forgrund: Hele personalefortegnelsen #3E6074 (mørkegrå) #3E6074 (mørkegrå) #3E6074 (mørkegrå) til top, til sitemap, #3E6074 #3E6074 #3E6074 alfabetisk oversigt (mørkegrå) (mørkegrå) (mørkegrå) Min side Forgrund: Forgrund: Forgrund: #3F6075 #3F6075 #3F6075 2.3 Grafiske elementer 2.3.1 Billeder Billeder skal kunne fungere ved høje såvel som lave opløsninger. Dvs. de skal kunne skaleres. Nedenstående tabel viser størrelser for de forskellige billed-elementer, som skal anvendes på portalen. Gif og Jpeg er de formater det anbefales der anvendes. Yderligere understøttes det at anvende SVG-billedefiler, dog anbefales det at ikke at anvende dette format, da ikke alle browsere har indbygget understøttelse for SVG. Andre formater må ikke anvendes. Placering Type Størrelse Internet, forside jpg 830*66 px Forside til portalområde jpg 658x149 px Kampagneboks jpg eller gif 58x130 px 2.3.2 Ikoner Størrelsen på ikoner er: Jpg/gif 15x15 pixels Der må kun anvendes farven #3E6074 (mørkegrå) til ikoner. Eneste undtagelse herfra er spørgsmål-tegnet til yderligere felt info. Følgende tabel indeholder de ikoner, der må anvendes: Ikon Anvendelse Spørgsmåltegn til yderligere felt info Version: 05.00 Side: 18 af 176

Kalender-ikon til datofelter Hjælp til siden Større skrift Tilknyt note Åben pdf Udskriv siden Tilføj til nyhedsmail Tilføj til Mit arkiv Linket åbner i nyt vindue FAQ (Anvendes kun på hjælpesider) E-learning (Anvendes kun på hjælpesider) Login Logud 2.3.3 Pile Pilene som fremtræder i paging-elementer og til top er gif filer med en størrelse på 5x7 pixels. Fig. 1: til top, Næste, Forrige pile Pilene, som anvendes til at vise, hvorvidt der er yderligere punkter under et menupunkt i venstremenuen, samt anvendes foran links i portlets, er gif filer med en størrelse på 3x5 pixels. Fig. 2: Markering i venstremenu af underpunkter Fig. 3: Markering i venstremenu af åbnet underpunkt Pile er indfarvet i portalområdets farve. Version: 05.00 Side: 19 af 176

2.4 Gennemgående elementer 2.4.1 Log ind / Log ud I topmenuen findes ikon for log ind henholdsvis log ud. Min side er nedtonet med en grå tekst, hvis brugeren ikke er logget ind. Den nedtonede tekst suppleres med en title attribut, der adviserer (via tale, hvis brugeren har en skærmlæser) at linket er ikke aktivt og kræver indlogning. Desuden er hængelåsen lukket. Fig. 4: Log ind Når brugeren er logget ind, er hængelåsen åben, og der står i stedet Log ud. Eksemplet nedenfor viser at brugeren er på Min side, hvorfor Min side menupunktet er markeret gult. Fig. 5: Log ud 2.4.2 Felt-hjælp Felthjælp er indikeret med et spørgsmålstegn. Spørgsmålstegnet er en gif. Når brugeren klikker på spørgsmålstegnet kommer der en hjælpeboks: Version: 05.00 Side: 20 af 176

Fig. 6: Hjælpeboks Følgende retningslinjer gælder for felthjælp og for placering af spørgsmålstegns ikonet. For tekstbokse, tekstområder, drop-downbokse, listebokse og trækontroller placeres ikonet umiddelbart efter feltet. o For elementer der strækker sig over flere linjer placeres ikonet på øverste linje. (Det drejer sig f.eks. om tekstområder, listebokse og trækontroller) For radiobuttons og checkbokse placeres ikonet umiddelbart efter ledeteksten. Har flere felter en samlet ledetekst/overskrift, kan ikonet placeres umiddelbart efter på samme linje Knytter felthjælpen sig til hele portletten, placeres felthjælpsikonet i øverste højre hjørne af portletten 2.4.3 Kalender Til højre for alle datoer, hvor brugeren har mulighed for at indtaste en dato, skal der være en stiliseret kalender, som vist her: Fig. 7: Eksempel på brug af kalender-ikon Når brugeren klikker på kalenderen vises en datovælger. I datovælgeren er dagsdato markeret. Der er mulighed for at bevæge sig en måned frem og tilbage ved klik på pilene i toppen og bevæge sig frem og tilbage i år ved klik på pilene i bunden. En dato vælges til feltet ved at klikke på datoen i datovælgeren eller at tabbe sig frem til den rigtige dato, og klikke på Enter. Datovælgerne har altid nedenstående udseende. Fig. 8: Datovælgeren Version: 05.00 Side: 21 af 176

2.4.3.1 Style for datovælger Farve på titellinjen Farve på tekst og pile i titellinjen Ramme om valgte dato (dagsdato ved første visning) SKAT-blå. Hvid SKAT-gul 2.4.4 Brug af alt- og title-tag Al grafik skal ledsages af beskrivelse i alt-taggen. Alt-taggen (som rent kode-mæssigt er en attribut) bruges til at angive en alternativ tekstuel beskrivelse af et stykke grafik. Denne beskrivelse bliver brugt i tilfælde hvor det ikke er muligt at vise grafik. For eksempel vil en skærmlæser oplæse teksten fra alt-taggen. Udover alt-taggen kan title-taggen bruges til at give en tekstuel beskrivelse af et område. Title-taggens tekst vises når musemarkøren holdes over, som vist i figuren nedenfor. Teksten vil se forskellig ud fra browser til browser, da browserens standard visning af title-tags anvendes. Fig. 9: Eksempel på visning af title-tag fra Internet Explorer. Nogle browsere vil vise alt-taggen på steder, hvor title-taggen ikke er defineret. Generelt anvendes alt-taggen på grafiske elementer og title-taggen på non-grafiske elementer. For nogle elementer vil det være muligt at angive begge, men dette bør undgås for ikke at få skærmlæsere til at stamme. 2.5 Gif-filer tilknyttet portalen Nedenstående tabel viser de generelle gif-filer, som skal anvendes på portalen. Anvendelse Spørgsmålstegn til yderligere felt info Kalender-ikon til datofelter Maximer portlet Rediger portlet Hjælp til portlet Minimer portlet Navn images/icon_info.gif images/icon_calendar.gif images/btn_windowbox_expand_[portalområde].gif images/btn_windowbox_edit_[portalområde].gif images/btn_windowbox_help_[portalområde].gif images/btn_windowbox_minimize_[portalområde].gif Version: 05.00 Side: 22 af 176

Højrepil i Næste Venstrepil i Forrige Fejl-pil (gul pil som peger på fejlbehæftet felt) Hjælp til siden Større skrift Tilknyt note Åben PDF Udskriv siden Tilføj til nyhedsmail Tilføj til personligt arkiv images/btn_next_[portalområde].gif images/btn_prev_[portalområde].gif images/icon_error_arrow.gif.gif images/icon_pagetools_help.gif images/icon_pagetools_font_change.gif images/icon_pagetools_make_note.gif images/icon_pagetools_pdf.gif images/icon_pagetools_print.gif images/icon_pagetools_subscribe.gif images/icon_pagetools_my_achive.gif Version: 05.00 Side: 23 af 176

3 Navigationsprincipper 3.1 Grundlæggende navigationsprincipper Navigationen i portalen foregår primært i topbaren og i venstremenuen. I højrespalten er der navigation til relateret information. Indholdsområdet kan ligeledes indeholde portlets, som via links leder brugeren til andre sider i portalen (lokal navigation). Fig. 10: Grundskabelon for portaldesignet Alle skabeloner til portalen er bygget over ovenstående skabelon, for at skabe genkendelige sider for brugeren. Brugeren vil således altid kunne stole på, at uanset om han kommer ind på et område udviklet af den ene eller anden del af SKATs organisation, så vil navigationen altid være at finde de samme steder. Version: 05.00 Side: 24 af 176

Udover at give adgang til indhold via portalstrukturen i top- og venstremenu, er det muligt at anvende portlets på selve indholdsområdet til lokal navigation via en listeportlet, tabel-portlet eller links. 3.2 Topbaren Topbaren på både SKAT.dk og intranettet består af 3 elementer: 1. Hjælpe- og servicemenu, som findes i 1. linie 2. Logo bjælke er det gule område med logo 3. Topmenu er det grå område, hvor portalens områder ses Fig. 11: Opbygning af topbaren 3.2.1 Hjælpemenu Hjælpemenuen anvendes til at give adgang til vigtige elementer af sitet, som ikke naturligt er en del af indholdshierakiet. Der er tale om elementer, som kan hjælpe brugeren med at anvende sitet. Menuen implementeres som standard hyperlinks i fed tekst placeret horisontalt adskilt af. er lavet som gif-fil uden tilhørende alt-tag. 3.2.1.1 Hjælpemenu - internet Fig. 12: Hjælpemenu - internet Hjælpemenuen indeholder følgende elementer: Forside SKAT.dk Går til portalens forside Tilgængelighed Åbner side hvor det beskrives, hvad der findes af funktionalitet på sitet for at gøre det tilgængeligt. På siden kan der ligeledes henvises til hvor der kan downloades gratis skærmlæsere mm. Tilgængelighed skal ligge først af hensyn til skærmlæsere. Version: 05.00 Side: 25 af 176

Sitemap Åbner portalens sitemap, hvor det fremgår hvor brugeren står. Hjælp til SKAT.dk Indholdsområde med sider, som forklarer hvorledes portalen anvendes. På SKAT.dk forklares f.eks. funktionalitet såsom Tilknyt note, Opret konto mm. Kontakt os Adgang til mailformularen 3.2.1.2 Hjælpemenu - intranet Fig. 13: Hjælpemenu - intranet Hjælpemenuen indeholder følgende elementer: Forside - Intranet Går til portalens forside Sitemap Åbner portalens sitemap, hvor det fremgår hvor brugeren kom fra. Hjælp til intranet Indholdsområde med sider, som forklarer hvorledes portalen anvendes. 3.2.2 Servicemenu Servicemenuen anvendes til at give adgang til vigtige serviceelementer på sitet, som ikke naturligt er en del af indholdshierakiet. Servicemenuen implementeres som hjælpemenuen som standard hyperlinks i fed tekst placeret horisontalt adskilt af. 3.2.2.1 Servicemenu internet Nedenfor ses servicemenuen for internettet. Fig. 14: Servicemenu internet Nyhedsmail Oprettelse eller vedligeholdelse af abonnementsfunktionalitet. Version: 05.00 Side: 26 af 176

Links Indholdsside med links til eksterne danske og internationale sites. Translated information Indholdsområde, hvor indhold med andet end dansk sprog findes. Der er ikke tale om en sprogversionering af sitet. 3.2.2.2 Servicemenu intranet Nedenfor ses servicemenuen for intranettet. Fig. 15: Servicemenu - intranet Links Indholdsside med links til eksterne danske og internationale sites. Ekstranet Åbner ekstranettet i selvstændigt vindue. SKAT.dk Åbner den offentlige hjemmeside i selvstændigt vindue. 3.2.3 Logobjælke Under hjælpe- og servicemenuen findes logo-bjælken, som tydeligt viser brugeren, hvor han befinder sig. Logobjælken har SKATs karakteristiske gule farve. Logobjælken indeholder SKATs logo højrestillet. Brugeren kan klikke på logoet for at komme til forsiden af portalen. Fig. 16: Logobjælke - internet På intranettet vises desuden navnet på portalen i venstre side af logobjælken. Fig. 17: Logobjæke - intranet Ved klik på logobjælken sendes brugeren til forsiden af skat.dk hhv. forsiden af intranettet. Version: 05.00 Side: 27 af 176

3.2.3.1 Logo SKATs logo skal altid fremstå så klart som muligt uden at blive forstyrret af andre visuelle elementer. SKATs logo består af tre elementer: kronen, den gule cirkel og navnetræk. Der er defineret en respektafstand omkring logoet. Respektafstanden er overholdt i portaldesignet, og skal overholdes, hvis logoet ønskes anvendt andre steder på portalerne. Der skal altid være mindst 1 x?s? om hele logoet, som vist på eksemplerne nedenfor. Fig. 18: SKAT logo De præcise regler for brug af logo findes i sektion Mærker og navnetræk i Designmanual for Skatteministeriet, Landsskatteretten og SKAT. 3.2.4 Topmenu Top-menuen giver adgang til 1. niveau i portalstrukturen samt til Log ind/log ud og Min side. Min side er nedtonet i topmenuen, indtil brugeren har logget ind på SKAT.dk. På intranettet er Min side altid aktiv. Hvis brugeren er logget ind på SKAT.dk, står der i menuen Log ud i stedet for Log ind. Hver indgang på niveau 1 af portalstrukturen får egen farvekode. Farvekodningen slår igennem på flere design-elementer i de forskellige side-skabeloner, som gennemgås senere i denne guideline. Topmenuen skal altid være tilgængelig, så brugeren har let adgang til hele portalen, og så brugeren får tillid til portalen, idet navigationen er konsekvent og forventelig. 1. niveau i portalstrukturen kaldes også segmenter. For alle segmenter gælder det at de har en unik forside og at denne forside vises når der klikkes på segments titel i topmenuen. Ligeledes er forsiden for et segment tilgængelig fra venstremenuen. Titlen Version: 05.00 Side: 28 af 176

på denne forside er Forside - <segmenttitel>, hvor <segmenttitel> erstattes af titlen på segmentet. 3.2.4.1 Aktuelt menupunkt Farvekodning anvendes i topmenuen til markering af det aktuelle område i form af en understregning af portalområdets titel (eksempelvis den blå bar under Erhverv). Markeringen er med til at hjælpe brugeren til at huske, hvor han er. Markeringen suppleres med et title-tag der adviserer (via tale, hvis en skærmlæser er installeret) om markeringens hensigt. Fig. 19: Indikering af aktuelt menupunkt i topmenuen, her Erhverv 3.2.4.2 Mouseover i topmenu Mouseover og tastaturfokus på punkterne i topmenuen indikeres ved at farve teksten gul, som det fremgår af figuren nedenfor. Fig. 20: Mouseover i topmenuen, her vist på Erhverv 3.2.4.3 Internet topmenu Topmenuen indeholder følgende punkter på internettet: Fig. 21: Topmenu - internet 3.2.4.4 Intranet topmenu Topmenuen indeholder følgende punkter på intranettet: Fig. 22: Topmenu - intranet Version: 05.00 Side: 29 af 176

3.3 Venstremenu Navigation i underområder af et portalområde understøttes af venstremenuen. Der er selvstændig venstremenu for hvert af portalområderne i topmenuen (niveau 1). Fig. 23: Eksempel på venstremenu Venstremenuen indeholder adgang til niveau 2 og derunder i portalstrukturen. I toppen af venstremenuen vises navnet på portalområdet i dettes farve, hvor navnet er klikbart. De enkelte menupunkter er holdt i sort. Det aktive menupunkt er markeret i portalområdets farve. Venstremenuen folder 1 menupunkt ud ad gangen. Hvis brugeren klikker på et menupunkt i træstrukturen, åbnes menupunkterne under dette punkt op, samtidigt med at punkterne under det menupunkt, som før var åbent lukkes. Der anvendes en venstre-pil, hvis der er underpunkter til menupunktet. Hvis der ingen underpunkter er, anvendes en 2x2 pixels firkant som bullit. Pilene og bullits er i portalområdets farve. Der vises en nedadgående pil, hvis et menupunkt er åbnet, som vist i figuren for menupunktet TastSelv. Version: 05.00 Side: 30 af 176

3.3.1 Venstremenu i vejledninger I vejledninger indeholder venstremenuen en indholdsfortegnelse til vejledningen i stedet for portalnavigationen. Der navigeres således internt i vejledningen via venstremenuen. Da de enkelte punkter i indholdsfortegnelsen kan være meget lange, er venstremenuens bredde dynamisk. I toppen af indholds-fortegnelsen vises vejledningens navn. For at gøre menuen tilgængelig for alle gives der herefter mulighed for at vælge menuens bredde ved et enkelt klik på Smal Mellem Bred linksene. Version: 05.00 Side: 31 af 176

Fig. 24: Eksempel på venstremenu for vejledninger Fig. 25: Eksempel på fold ud/ind af venstremenu Desuden indsættes et link med togglefunktion der muliggør at man kan vise eller skjule menuen. De enkelte punkter i indholdsfortegnelsen er farvet i portalområdets farve og understreget. Afsnit i vejledningen som indeholder ny information er markeret i indholdsfortegnelsen med teksten NY! foran teksten. Teksten i selve afsnittet er omkranset med samme markering: NY! her i mellem står den nye tekst NY!. For brugere med browsere som tillader drag-funktionalitet, kan brugeren trække i kanten af menuen for at gøre den større eller mindre. Menuen åbner i standardbredden for venstremenuen. Standardbredden muliggør både browsing i indholdsfortegnelsen og læsning af indholdet i indholdsområdet. Når brugeren har scrollet sig frem til indhold, kan han justere bredden for at få mere plads til at læse indholdet i vejledningen. Når brugeren skal findes et specielt kapitel i vejledningen, er en bred indholdsfortegnelse af foretrække. Da brugeren ikke kan se hele titlen på punkterne i indholdsfortegnelsen, med mindre de har valgt en meget bred menu, er der mouse-over på menupunkterne. Den fulde titel ligger således i title-attributten. Vejledninger åbner i et nyt browservindue, så brugeren ikke mister sin placering i portalstrukturen ved at venstremenuen erstattes af vejledningens indholdsfortegnelse. Brugeren vil altid kunne lukke vejledningen og være tilbage til det sted i strukturen, hvor han klikkede på vejledningen. Version: 05.00 Side: 32 af 176

Venstremenuen indeholder 3 elementer Titlen på vejledningen Links til at skifte størrelsen på venstremenuen Indholdsfortegnelsen 3.3.2 Justerbar venstremenu Såfremt der er flere menupunkter der er for lange til standard menu layout, er det muligt at benytte den justerbare venstremenu, som er tilfældet i afsnit 3.3.1. Dette er eksempelvis tilfældet ved administrations portalen, hvor der er flere menuelementer der er for lange til at indpasse sig under en normal menustruktur. 3.3.3 Anbefalede niveauer De første 5 niveauer er rykket ind i forhold til hinanden, dvs. underpunkter er rykket ind i forhold til det menupunkt, de hører under. Portalen understøtter brug af så mange niveauer, som portaladministratoren for et område ønsker, da der kan forekomme meget dybe portalområder. Fra niveau 5 og ned vil niveauer dog vises venstrestillet. Dvs. underpunkter vises venstrestillet med det menupunkt de hører under, som illustreret nedenfor. Menupunkt 2.1 Menupunkt 2.1.1 Menupunkt 2.1.2 Det frarådes kraftigt at anvende en portalstruktur, som giver en venstremenu dybere end 5 niveauer. Dette giver i realiteten mulighed for en portalstruktur med 6 niveauer, idet niveau 1 ligger i top-menuen. 3.3.4 Navngivning af menupunkter I navngivningen af menupunkter i venstremenuen bør der anvendes sigende titler, så brugeren får en klar idé om, hvad han kommer til ved at vælge menupunktet. Dette gælder også for navngivning af menupunkter i beslutningstræer og guides. Titler bør ikke være længere end 25 karakterer. Portalen foretager ombrydning af menupunkter, hvis de ikke kan være i venstremenuen i bredden. I indholdsfortegnelser til vejledninger foretages der ingen ombrydning af punkterne. Der vises den del af titlen, som kan være indenfor den bredde, som brugeren har valgt. Version: 05.00 Side: 33 af 176

3.3.5 Antal menupunkter Det er ikke muligt at anbefale et maksimalt antal menupunkter til venstremenuen. Det optimale antal afhænger af indholdet, der ønskes tilgang til i venstremenuen. Det bør dog tilstræbes, at venstremenuen ikke overskrider 1 browserside (i en opløsning på 1024*768), for at sikre at brugeren ikke overser væsentlig information ved at den er skjult udenfor siden, da det er et kendt problem, at de færreste brugere scroller til side 2 af en side. Der kan forekomme tilfælde, hvor højden på venstremenuen er længere end højden på sideindholdet. Her vil længden af venstremenuen bestemme længden for siden. Der vil ikke forekomme scroll på venstremenuen. Dvs. at bundlinien for siden bliver flyttet i forhold til venstremenuens længde. 3.4 Orientering i struktur Ved gennemgående at anvende topmenu, venstremenu og brødkrumme som navigationselementer er portalstrukturen gjort meget tydelig og let tilgængelig for brugeren. Brugeren kan til hver en tid orientere sig i forhold til, hvor i strukturen han befinder sig på en af følgende måder: Det aktuelle menupunkt i topmenuen er markeret Det aktuelle menupunkt i venstremenuen er markeret Der er brødkrumme i toppen af indholdsområdet, som viser indholdets placering i portalstrukturen Brugeren kan klikke på Sitemap i hjælpemenuen. Når Sitemap åbnes vil det være markeret hvilket område på portalen, brugeren befinder sig på Logobjælke på alle portalsider hjælper brugeren til at huske, hvilket site han er på Hjælpefunktioner er gjort tilgængelige i hjælpemenu/servicemenu på alle sider 3.5 Højrespalte Højrespalten findes på alle portalsider og består som hovedregel af følgende elementer: Søgeportlet (fast element) Funktionsområde (fast element) Relateret information (valgfrit element) I nogle specielle tilfælde hvor der er bruge for ekstra meget plads til indhold, kan en designer vælge at fravælge en eller begge af de faste elementer i højrespalten og Version: 05.00 Side: 34 af 176

benytte den ekstra plads til indhold. Det findes to layouts i portal rammeværket der under støtte dette, en med fast og en med fleksibel venstremen (se Developer Guide afsnit 4.6 og Appendiks C). Da der er lagt væsentlig funktionalitet i højrespalten bør den så vidt muligt holdes fri for reklame-agtige portlets, for at undgå at brugeren mentalt blokerer for indholdet. Brugere har en klar tendens til at overse indhold som minder om reklame. Følgende elementer opfatter brugere som reklame, og de må derfor ikke anvendes i højrespalten: Elementer som bevæger sig Billedelementer 3.5.1 Højrespalte for internet Fig. 26: Højrespalte - internet 3.5.2 Højrespalte for intranet Intranettets højrespalte indeholder desuden portlet til Find kollega. Derudover har den samme elementer som højrespalten til internettet. Version: 05.00 Side: 35 af 176

Fig. 27: Højrespalte intranet Søge-portlet findes øverst i højrespalten. Søgeportletten har samme grafiske udtryk uafhængigt af, hvor på portalen den findes. Funktionsområdet har ligeledes samme grafiske udtryk overalt på portalen. I funktionsområdet er Udskriv side og Hjælp til siden lagt hhv. øverst og næstøverst, for at brugeren nemmere skal kunne få øje på muligheden for udskrivning og hjælp. Udskriv side, Hjælp til siden og Større skrift skal findes på alle sider. Hvorvidt de øvrige funktioner skal være til stede afhænger af den skabelon, som siden bygger på. Illustrationen ovenfor viser bruttolisten af funktionaliteter i funktionsområdet. På intranettet kommer Find kollega-portletten efter funktionsområdet. Find kollegaportletten er som alle øvrige portlets indfarvet i portalområdets farve. Efter funktionsområdet kommer information som relaterer sig til indholdet i indholdsområdet. Relateret information samles i en til flere portlets afhængig af om der er tale om Aktuelt, Genveje eller anden information, som i tilfældet ovenfor. Version: 05.00 Side: 36 af 176

3.5.3 Søg Søgeportletten kan af portaladministratoren konfigureres til at søge på: det aktuelle portalområde det aktuelle dokument (i forbindelse med vejledninger) hele portalen alle kilder Søg skal stilles til rådighed på alle portalsider. Der kan dog fraviges fra dette princip såfremt søgeportletten er til mere forvirring end gavn for brugeren. 3.5.4 Funktionsområde Funktionsområdet findes på alle portalsider, hvor der som minimum altid vil være Hjælpe til siden, Udskriv side og Større skrift. Nedenstående viser den komplette liste over funktioner, som er tilgængelige i højrespaltens funktionsområde: Udskriv side Åbner dialogside for printervenlig version af siden. Kun indholdsdelen af en side udskrives. Venstremenu, topmenu og højrespalte udskrives ikke. Hjælp til siden Adgang til hjælp for siden. Hjælpen åbnes i en pop-up, så brugeren kan se siden, han har spørgsmål til samtidigt med hjælpen til denne. Hjælpe-funktionen vises kun i højrespalten, hvis der findes hjælpetekst til indholdssiden. Abonnér Giver brugeren mulighed for at abonnere på det aktuelle indhold. Abonner vises kun i højrespalten, hvis der er tale om en ren indholdsside. Der kan ikke abonneres på en forside, formular eller tabel. Vis som PDF Anvendes f.eks. på vejledningssider, hvor der findes PDF udgave af indholdet. Aktivér note Gør det muligt at knytte en personlig note til det aktuelle indhold. Tilknyt note kan kun være aktiv på sider, hvor der er indhold med indhold fra DAP, som er unikt identificeret. Tilføj til Mit arkiv Giver brugeren mulighed for at gemme et link eller en søgning til dennes personlige arkiv. Større skrift Tilgængelighedsfunktion som kan anvendes til at få indholdet vist med større skrift. Funktionen er en nem adgang til browserens Version: 05.00 Side: 37 af 176

standardfunktionalitet til ændring af skriftstørrelse, da de færreste brugere kender til denne. 3.5.5 Relateret information Højrespalten anvendes til at linke til information, som relaterer sig til indholdet på siden. Der kan også vises små smagsprøver til relateret information, f.eks. en portlet med en titel og et udsnit af et stykke indhold. 3.5.6 Højrespalte for vejledninger Højrespalte for vejledninger er bygget op som vist nedenfor. Højrespalten er nærmere beskrevet under skabelonen for vejledninger i afsnit 8.6. Version: 05.00 Side: 38 af 176

Fig. 28: Højrespalte - vejledninger 3.6 I toppen af indholdsområdet vises en brødkrumme. Brødkrummen viser indholdets placering i portalstrukturen i modsætning til brugerens vej til indholdet. Brødkrummen fortæller således brugeren: Her er du Hvis en bruger er kommet til en indholdsside, som ligger i niveau 3 i venstremenuen, vil der være 3 trin i brødkrummen, uafhængigt af om brugeren er kommet til siden via søgning eller via navigation i venstremenuen. Brødkrummerne er klikbare, så en bruger kan komme et skridt eller flere tilbage i portalstrukturen. Brødkrumme findes på alle portalsider, som kan fremfindes via top-menu eller venstremenu. Fig. 29: Eksempel på brødkrumme for portalområdet Erhverv Hvis indholdet i brødkrummen overstiger bredden i toppen af indholdsområdet, ombrydes teksten, så brødkrummen fylder mere end 1 linie. 3.6.1 Speciel brødkrumme Brødkrummen anvendes i vejlednings-skabelonen til at vise, hvor i vejledningen brugeren står. Dvs. den fulde sti til vejledningen vises ikke. Nedenstående eksempel viser en brødkrumme til ligningsvejledningen, som fylder mere end 1 linie. Fig. 30: Eksempel på brødkrumme fra ligningsvejledningen Portalsider, som ikke ligger i portalstrukturen, såsom Log ind, Sitemap etc., har ingen brødkrumme. Version: 05.00 Side: 39 af 176

Fig. 31: Eksempel på portalside uden brødkrumme 3.6.2 Style for brødkrumme Font: Verdana, regular, 10 px, hex: # 3f6075 Baggrund: hex:# ced8e2 3.7 Til top I nederste højre hjørne af indholdsområdet kan der anvendes et til top link, som brugeren kan benytte til at komme til toppen af den aktuelle side. Dette link vil forekomme på alle sider. Pilen efter teksten har SKAT blå farve. Fig. 32: Eksempel på til top element 3.7.1 Style for Til top Font: som brødtekst link Pil: gif i SKAT blå farve 3.8 Fanebladsnavigation På siden for sitemap er der anvendt fanebladsnavigation i venstremenuen, da siderne ikke ligger i strukturen. Ingen sider, som findes i portalstrukturen, må anvende denne form for navigation i området for venstremenuen. Det grafiske udtryk følger principperne for farvepaletter for det gældende portalområde. Se i øvrigt den portal specifikke side for sitemap i afsnit 9.9 Version: 05.00 Side: 40 af 176

3.9 Åbning af sider i nyt vindue Som udgangspunkt åbnes der i portalen, så brugeren oplever en lineær proces. Det betyder, det ikke vil være tilladt at åbne op i nyt vindue. En lineær proces sikrer brugeren et støjfrit handlingsforløb, og brugeren kan lettere bevare overblikket på, hvor de befinder sig på portalen. Beslutningen beror på der er 8.000 interne brugere og 4. 000.000. eksterne brugere. Undtagelser for ikke at åbne i portalen er følgende. o Vejledninger o Hjælp til siden o Eksterne link o E-learning o Og systemer der ikke er integreret på portalen endnu. Disse anses for at være områder, hvor brugeren vil have behov for krydsreference, hvor brugeren anvender et nyt åbent vindue som en støtte til det område de sidder og arbejder/læser om. Er et vindue åbnet udenfor portalen gælder, at man ikke åbner endnu et nyt vindue i dette. Undtagelse er eksterne links. Version: 05.00 Side: 41 af 176

4 Brugervenlighedsprincipper De følgende afsnit omhandler, hvilke overvejelser der ligger bag designet i forhold til brugervenlighed og tilgængelighed. Brugervenlighed defineres som: Nemt at lære: Hvor let er det for brugere at udføre en opgave første gang de stifter bekendtskab med et design. Effektivt: Hvor hurtigt kan brugere som kender designet udføre en opgave. Genkendeligt: Hvor hurtigt kan en bruger genlære brugen af designet, efter ikke at have anvendt det i en periode. Undgår brugerfejl: Hvor mange fejl begår brugere, hvor alvorlige er de, og hvor nemt kan en bruger komme videre efter en fejl. Tilfredshed: Hvor behageligt er det at anvende designet. Tilgængelighed derimod drejer sig om at gøre et site tilgængeligt for brugere, som enten ikke kan se, høre, bevæge sig, er ordblinde eller ikke kan bruge tastatur og mus. Dvs. at gøre sitet tilgængeligt for brugere med funktionsnedsættelse. 4.1 Generelt om brugervenlighed Brugeres problemer med at anvende en portal kan deles op i forskellige kategorier. Statistisk set står informationsarkitekturen og indholdet for størstedelen af brugeres problemer med at anvende et site. Derudover har brugere problemer med: 1. Søgning 2. Side design 3. Fancy grafisk design I designet er der derfor lagt vægt på: simpel søgning overskueligt og forudsigeligt sidedesign nedtonet og troværdigt design seriøsitet Informationsarkitektur og indhold kan portaldesignet ikke kontrollere. Det er op til de enkelte indholdsleverandører at gøre portalerne brugervenlige på disse områder. Det er en forudsætning at indholdsleverandører følger anvisninger i denne guide for at sikre brugervenligheden og tilgængeligheden. Herunder specielt de grundlæggende designprincipper i dette afsnit. Version: 05.00 Side: 42 af 176