Referencer:

• Jobindsats – Softwarearkitektur

• Jobindsats – Detaljeret design – Søgning

Indholdsfortegnelse

Indledning

Formål og målgruppe

Formålet med dette dokument er at beskrive og dokumentere brugergrænsefladen til CMS-løsningen for Jobindsats.dk.

Målgruppen er udviklere, som skal levere løsningen, kunden som skal anvende designet, samt testere, der skal teste løsningen.

Afgrænsning

Projektet skal levere CMS data til Jobindsats.dk. Data består af indhold til databank, rapportbank, information samt nyheder.

Sitemap

Overordnet struktur

Den første side brugeren møder er forsiden, fra denne er der adgang til alle andre sektionssider samt søgesiden. Se model nedenfor.

Figur 1 Sitemap

Søgesiden er placeret som en selvstændig side på samme niveau som forsiden. Søgesiden kan tilgås fra forsiden gennem søgebaren og opleves som en underside til forsiden. At have søgesiden som sin egen side på niveau med forsiden er vigtigt for at undgå, at søgesiden optræder som et sektionselement i navigationsmenuen.

Alle underliggende sektionssider har hver deres hierarkiske struktur og undersider kan derfor altid forventes at findes identiske steder. Undersektionssider kan enten være et Tema eller et Element. Bemærk dog, at informationssiderne har mulighed for både at have et langt og et kort hierarki. Dette bevirker at det både kan være muligt at gå fra en undersektionsside og direkte ned til en elementside og fra en undersektionsside og ned til en tema-side, se https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5D%5BinlineExtension%5D%5BinlineExtension%5DInformation.

Hierarkierne er i beskrevet indgående i det følgende.

Topniveau sider

For info om sidernes visuelle opbygning og struktur se afsnit https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DTopniveau-sider.

Forside

Alle sektionssider kan tilgås fra denne side.

Det er muligt at tilgå forsiden ved hjælp af følgende url’s: jobindsats.dk og www.jobindsats.dk. For nærmere info se Jobindsats – Softwarearkitektur.

Søgeside

Søgesiden eksisterer som sin egen side på samme niveau som forsiden. Dette bemærkes ikke af slutbrugeren, da den har en url et niveau lavere end forsiden. Det er dog vigtigt at søgesiden er placeret på dette niveau i Umbraco da den således ikke kan tilgås som en sektionsside.

Det er essentielt, at søgesiden er oprettet for, at brugere af Jobindsats kan søge efter indhold på Jobindsats.dk .

På søgesiden er det muligt at søge efter elementsider (dvs. målinger, rapporter, information og nyheder). Søgefunktionen er nærmere beskrevet i Jobindsats – Detaljeret design – Søgning.

Skulle de ske at der oprettes 2 sider af typen ”Søgning” (fx hvis en ekstra søgeside er blevet oprettet ved et uheld) benyttes url’en til den første tilgængelig søgeside. I det nedenstående tilfælde ville det altså kun være siden med url’en ”/sogning/” som blev brugt og ikke ”/sogning-kopi/”:

Ændringer i søgeside url’en vil have konsekvenser for alle steder hvor der er linket til søgesiden, fx i linkspots(se afsnit 4.1) eller i nyhedsspots(se afsnit 4.2) og skal opdateres i disse for at undgå Umbraco fejl.

Databank

For info om sidernes visuelle opbygning og struktur se afsnit https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DDatabank.

Databanken består af følgende hierarkiske elementer.

Hierarki er vist på nedenstående screenshot af databankens temaside:

I Umbraco ses samme struktur, hvilket gør det nemt at sammenholde siden med administrationen. Illustrationen viser et udsnit og er for at give et eksempel:

Rapportbank

For info om sidernes visuelle opbygning og struktur se afsnit https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5D%5BinlineExtension%5DRapportbank.1.

Opbygning af hierarki til rapportbank:

Dette hierarki giver mulighed for at tilgå alle rapporter direkte fra sidemenuen:

Information

For info om sidernes visuelle opbygning og struktur se afsnit https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DInformation.

Information kan følge 2 hierarkiske modeller, en lang og en kort.

Langt hierarki

Hvilket giver denne visning:

Hvor alle de relevante grupper og elementer kan tilgås.

Kort hierarki

Hvilket giver denne visning:

Med dette hierarki kan en enkelt side tilgås fra sidemenuen.

Nyheder

For info om sidernes visuelle opbygning og struktur se afsnit 3.6

Opbygning af hierarki til Nyheder:

Dette hierarki giver mulighed for at tilgå alle nyheder direkte fra sidemenuen:

Sidestruktur

Opbygning af siden

Navngivning og overskrifter

Alle sider skal gives et navn i Umbraco:

Navnet benyttes til bl.a. at bygge sidemenuen og til breadcrumbs. Der er ikke sammenhæng mellem dette navn og overskriften på siderne, og der kan dermed laves et kortere navn til sidemenuen/breadcrumbs end der vises i overskriften. Overskrifterne sættes i et felt indrettet til dette:

Breadcrumbs

Alle sider, som er placeret dybere end sektionsniveauet, har deres hierarki illustreret med breadcrumbs.

Denne er struktureret således at det øverste link er sidens tilhørende sektion.

Tryk på breadcrumbs har følgende virkning (for en databankelementside):

1. Brugeren sendes til sektionsside

2. Brugeren sendes til sektionsside med den relevante undersektion åben

3. Brugeren sendes til temaside

4. Brugeren sendes til temaside med accordion for den relevant gruppe åben

5. Viser den nuværende side og er ikke trykbar

Navigationsmenu

Alle sider i løsningen indeholder en navigationsmenu samt søgebaren:

Sektionernes placering i topmenuen er bestemt ud fra deres sortering i Umbraco:

Denne rækkefølge kan ændres i Umbraco ved at højreklikke på forsiden og vælge sort:

Tryk på Jobindsats logoet vil føre brugeren tilbage til forsiden mens tryk på STAR’s logo åbner en ny fane på Star.dk.

Sidemenu

De fleste sider har en sidemenu (ud over forside samt søgeside):

Om menuen er foldet ud eller ej kommer an på hvilken side brugeren er inde på. Hvis der er valgt en temaside/elementside, vil den relevante undersektion i menuen være foldet ud.

Maks 1 undersektion kan være foldet ud af gangen.

Topniveau sider

Forside

Forsiden er opbygget som et grid med 4 søjler. Den yderste søjle til venstre er som standard brugt til genveje ind til databanken.

Dette udfyldes i Umbraco med et link spot (for beskrivelse af spots se afsnittet: Spots):

Dette er unikt for forsiden (og søgesiden) da alle andre undersider har en sidemenu i stedet for genvejene. Der er dog mulighed for at erstatte link spottet med andre spot og dermed udnytte alle søjler ens.

De sidste 3 søjler i grid’et er brugt til spots og det er muligt at bruge følgende forskellige udnyttelser af grid’et: :

Driftsbanner

Hvis der udfyldes i driftsbanner, vil dette være synligt på alle sider.

Banneret lægger sig øverst på siden, over brødkrummen, men under navigationsmenuen.

OBS: Driftsbanneret fremkommer så snart synlig knappen er aktiveret, der kan altså indsættes et helt tomt driftsbanner eller et banner uden overskrift/brødtekst.

Der kan udfyldes en overskrift samt en brødtekst i Umbraco. Brødteksten laves i en richtekst editor og kan derfor styles efter behov:

Søgeside

Denne side giver mulighed for at søge på søgeord/sætninger og begrænse søgeresultaterne til de fastsatte kategorier: Alle kategorier, Rapporter, målinger, informationer og nyheder.

Bemærk at søgesiden ikke indeholder en sidemenu og at layout på søgesiden ikke kan styres fra Umbraco.

Søgefunktionen er nærmere beskrevet i Jobindsats – Detaljeret design – Søgning.

Databank

Sektionsside

Spots

Det er muligt at bruge følgende udnyttelser af grid’et, hvor der er plads til maksimalt 3 spots:

Temaside

Område navn er lige nu ikke benyttet til noget visuelt

På temasiden bliver de forskellige grupper tilhørende dette tema vist som beskrevet nedenfor.

Grupper accordions

Grupperne bliver vist med den titel de har i headline. Kun grupper som har mindst 1 elementside, som er offentliggjort/publiceret, under sig bliver vist.

Elementside

En databank elementside kaldes også for en målingsside.

MålingId

På målingssiden angives målings-Id ‘et. Ud fra dette ID hentes informationer om målingen, der vises på siden.

Info

Info benyttes til at lave et link mellem en målingsside og dens tilhørende infoside. Ud fra denne forbindelse trækkes manchetteksten som vises under ” Se flere detaljer om måling”

URL’en til infoknapperne sættes også gennem denne.

Tags

Tags kan valgfrit sættes af brugeren på en måling. De bliver brugt til søgning således, at målinger kan fremkomme i et søgeresultat ud fra disse.

Spots

I grid’et er der plads til 2 spots:

Rapportbank

Sektionsside

Spots

Det er muligt at bruge følgende udnyttelser af grid’et, hvor der er plads til maksimalt 3 spots:

Elementside

Opdateringsfrekvens

Giver info om hvor tit rapporten opdateres:

Opdateringsbanner

Benyttes til at skrive hvis der er en afvigelse på rapporten:

Tags

Tags kan valgfrit sættes af brugeren på en rapport. De bliver brugt til søgning således at rapporten kan fremkomme i et søgeresultat ud fra disse.

Powerbi

Et tekstfelt hvor der kan indsættes en iframe med link til en powerbi

Størrelsen på powerbi’en er overstyret således at det passer med resten af sidens indhold kan derfor ikke styres fra iframe’en.

OBS: Det er en redaktøropgave at tilføje et "aria-label" for at understøtte hjælpemidler som skærmlæsere, det tilføjes således:

Alternativ tekst

Bruges til at give besked hvis en rapport ikke er tilgængelig eller hvis der skal linkes til pdf-rapporter i stedet. Udfylder rapportens plads hvis der ikke er en rapport og er ellers placeret under.

Spot

Dette spot lægger sig i højre side ved siden af tekst og rapport:

Hvis spottet ikke er valgt, er der stadigvæk allokeret plads til spottet.

Information

Sektionsside

Spots

Det er muligt at bruge følgende udnyttelser af grid’et, hvor der er plads til maksimalt 3 spots:

Temaside

Tema navn er lige nu ikke benyttet til noget visuelt

På temasiden bliver de forskellige grupper tilhørende dette tema vist.

Denne sidetype benyttes ikke altid for informationer.

Grupper accordions

Grupperne bliver vist med den titel de har i Gruppe overskrift. Kun grupper som har mindst 1 elementside, der er offentliggjort/publiceret, under sig bliver vist.

Denne sidetype benyttes ikke altid for informationer.

Elementside

Infospot

Dette spot lægger sig i højre side ved siden af tekst og information:

Hvis spottet ikke er valgt, er der stadigvæk allokeret plads til spottet.

Tags

Tags kan valgfrit sættes af brugeren på en info-side. De bliver brugt til søgning således at info-siden kan fremkomme i et søgeresultat ud fra disse.

Opdateringskalender

En opdateringskalender kan tilføjes til undersektioner under sektionen Info-sektionen. Den viser information om alle målinger på jobindsats, og kan eksportere samme information til Excel.

Målingstemaer vises som accordions, der hver indeholder en tabel, der er delt op i målingsgrupper.

Hvert målingsnavn er et hyperlink til elementsiden for samme måling.

Tags

Tags kan valgfrit sættes af brugeren på en info-side. De bliver brugt til søgning således at info-siden kan fremkomme i et søgeresultat ud fra disse.

Nyheder

Sektionsside

Spots

Det er muligt at bruge følgende udnyttelser af grid’et, hvor der er plads til maksimalt 3 spots:

Elementside

Nyhedsbillede

Når et billede skal tilføjes, skal det uploades fra den lokale maskine til Umbraco’s media mappe. Dette kan gøres ved at trykke på feltet ved nyhedsbillede:

Herefter skal der enten vælges enten et billede som allerede er uploadet eller der skal uploades et nyt.

Hvis billedet er nyt, skal det gøres klar til brug. Efter billedet er valgt kan der trykkes på den lille blyant:

Dette leder til denne side:

Her skal de 3 størrelser ”lille”, ”medium” og ”stor” sættes. De er sat korrekt når der står ”user defined” under dem. Disse størrelser bruges af billedstørrelses dropdown. En alternativ billedtekst skal også sættes.

Størrelserne bestemmer hvor mange pixels der er i billedet, dette er nyttigt hvis der ønskes zoomet på et billede da dette eller ville gøre motivet meget pixeleret. Størrelsesbeskrivelser:

Stor: 1920px x 1080px

Medium: 960px x 540px

Lille: 480px x 270px

Billedstørrelse

Dette er en dropdown som har de 3 valg ”lille”, ”medium” og ”stor”. Hvis intet er valgt, vælges ”stor”. Denne bruges til at styre hvilket billedopløsning der skal bruges og med hvilket udsnit af billedet.

Publiceringsdato

Denne dato benyttes til manuelt at vælge en dato for nyheder således at genpublicering af en nyhed ikke giver en ny dato. Det er denne dato som vises i toppen af nyhedselementsiden samt i nyhedsspots og på søgesiden, se Spots.

Tags

Tags kan valgfrit sættes af brugeren

Infospot

Dette spot lægger sig i højre side ved siden af tekst og nyhed:

Hvis spottet ikke er valgt, er der stadigvæk allokeret plads til spottet.

Spots

For at kunne vise indhold på en dynamisk og afgrænset måde som egner sig til en responsiv hjemmeside er der benyttet Umbraco macros i løsningen som er designet som spots.

Linkspot

Linkspottet er benyttet til at lave genveje internt på Jobindsats.dk:

Links

Link på denne type spots kan både være interne og eksterne. Linkvælgeren ser sådan ud:

De interne Links vælges som i 4.1.1 , dog med den forskel at linktitlen kan ændres hvis dette ønskes. Det kan også vælges om linket skal åbne en ny fane eller blot navigere over på siden.

Hvis der skal laves et link til en ekstern side, er det vigtigt at hele URL’en indsættes, fx https://www.google.com/.

Hvis der skal laves et link til søgesiden, gøres dette ved at vælge denne og herefter kan den søgestring (querystring) som ønskes indsættes. En søgestring findes ved at lave en søgning på søgesiden og kopiere teksten fra ”query=” og frem, se nedenstående eksempel:

På det ovenstående billede er der søgt på overblik.

Bemærk at alle links skal vælges individuelt, dette giver mulighed for at ændre linktekst mm. individuelt. Det er muligt at omrangere rækkefølgen på links ved at trække dem rundt på linkspot forsiden:

Farve

Bestemmer baggrundsfarve i spottet, hvilket også ændrer tekstfarve for at sikre en god kontrast.

Mulighederne er Standard, blue og red:

Nyhedsspot

Spottet benyttes til at vise de senest x nyheder. Nyhederne bliver sorteret på baggrund af den publiceringsdato som er sat i selve nyheden, se https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DPubliceringsdato.

Linktekst

Bruges til at bestemme hvilken tekst der skal skrives på linket.

Antal nyheder

Et heltal, bestemmer antallet af nyheder synlige i spottet. Hvis der er valgt 0 eller lavere vil der ikke blive vist nogen nyheder.

Link

Beskrivelse identisk med https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DLinks.

Link til en brugerbestemt side, både intern og ekstern.

Især vigtigt for dette spot: Hvis der skal peges på søgesiden med alle nyheder fremsøgt, gøres dette ved at tilføje søgesiden og i feltet ”Anchor / querystring” tilføje strengen: ” ?content=%5B"NyhederElement"%5D”. Der kan også indsættes mere specifikke søgninger, fx hvis man vil have alle målinger som indeholder søgeordet A-dagpenge indsættes denne string: ” ?query=A-dagpenge&content=%5B"DatabankElement"%5D”. Disse søgestrenge kan findes ved at gå på søgesiden, lave den ønskede søgning og herefter kopiere den relevante del fra URL’en.

Bemærk: Uanset om der er valgt et link eller ej vil der stadigvæk vises en link-chevron. Hvis der vælges mere end et link vil kun det første blive brugt.

Relevante målinger spot

Brugt til at vise de målinger som sidst er publiceret/opdateret. Tidspunkterne for publicering er trukket automatisk fra Umbraco.

Seneste nyhed

Brugt til at vise den seneste nyhed. Dette er baseret på baggrund af den publiceringsdato som er sat i selve nyheden, se https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DPubliceringsdato.

Centreret

Bestemmer om teksten er centeret, teksten er som standard venstrestillet. Det påvirker både overskrift samt brødtekst.

Farve

Bestemmer baggrundsfarve i spottet, hvilket også ændrer tekstfarve for at sikre en god kontrast.

Mulighederne er Standard, blue og red:

X seneste nyhed

Feltet kan sættes til et heltal. Hvis det sættes til ”2”, vises den 2. seneste nyhed, ”3” viser den 3. seneste og så fremdeles. Hvis feltet efterlades tomt, sættes til 0 eller sættes til et negativt tal, vil den seneste nyhed blive vist, svarende til at der står ”1”.

Spot

Spot som bruges til at udstille indhold på Jobindsats.dk.

Billede

Indsættes i toppen af spottet. Nærmere beskrivelse findes i https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DNyhedsbillede.

Billedstørrelse

Bestemmer billedets beskæringsstørrelse. Nærmere beskrivelse findes i https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DNyhedsbillede.

Billedtekst

Denne tekst indsættes ikke visuelt på spottet men bruges til den alternative tekst som hjælper skærmlæsere med at beskrive indholdet i et billede.

Link

Funktionalitet identisk med https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DLinks / https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DLink.

Bemærk: Uanset om der er valgt et link eller ej vil der stadigvæk vises en link-chevron.

Centreret

Bestemmer om teksten er centeret, teksten er som standard venstrestillet. Det påvirker både overskrift samt brødtekst.

Farve

Bestemmer baggrundsfarve i spottet, hvilket også ændrer tekstfarve for at sikre en god kontrast.

Mulighederne er Standard, blue og red:

Spot med højre billede

Spot brugt til at udstille indhold på Umbraco:

Beskrivelsen af dette spot er identisk med https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DSpot, der er kun visuel forskel.

Spot med venstre billede

Spot brugt til at udstille indhold på Umbraco:

Beskrivelsen af dette spot er identisk med https://starwiki.atlassian.net/wiki/spaces/FYS/pages/3676045337/Jobindsats+Brugergr+nseflade-design#%5BinlineExtension%5D%5BinlineExtension%5DSpot, der er kun visuel forskel.