Beskrivelse av designmaler for Bodø kommunes Borgerportal, Medarbeiderportal og mobile enheter



Like dokumenter
WordPress. Brukerveiledning. Kjære kunde. Innlogging:

Vårt nettsted En håndbok for lokale nettredaktører i fylkes- og lokallag

Administrasjon av saker. - Redigere saker med standard mal

Webportal, interaksjon og design

PBL Barnehageweb. Brukerveiledning

Bruk av Corepublish bruksanvisning for avdelingene

Publiseringsveiledning Word Press - ohil.no

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress

Kortfattet Brukermanual for nye revmatiker.no

Pålogging nettsider Fjellhamar FK

WordPress. Brukerveiledning. Kjære kunde. Innlogging

Brukerveiledning for organisasjonsleddenes nettsider

Webdesign for aktører under merkevaren Norges nasjonalparker

Klikk på publisering + offentlig + nyhet for å lage en artikkel som skal komme som nyhetssak på forsiden av fylkeslagssiden.

Beskrivelser av designmaler ANSATTPORTALEN - VERSJON 2.0

1. GRUNNLEGGENDE BEGREPER I NY COLUMBIWEB

Innføring i bruk av skolens/barnehagens hjemmesider (for ansatte)

Brukermanual for nettpublisering. frivilligsentral.no

Nettveiledning for krets- og gruppesider 2016

Webdesign for aktører under merkevaren Norges nasjonalparker

BRUKERMANUAL FOR NETTINTRO CMS Dette dokumentet er skrevet for Nettintro CMS versjon 1.9.0, og kan derfor avvike noe fra nåværende versjon.

Brukermanual - Joomla. Kopiering av materiale fra denne Bonefish manualen for bruk annet sted er ikke tillatt uten avtale 2010 Bonefish.

Manual for innlegging av standard sideinnhold og nyheter via «backend»

Vedlikeholde nettstedet i Joomla 2.5 +

PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO

Veiledning i administrering av egne loge-/leirsider i portalen

Brukerveiledning gjovard.com

Brukerdokumentasjon PIM Bohus

Forside. Hovedmeny Infolinkstruktur > Meny > Hå kommune. Melding Denne er koblet til: Redigering > Egendefinert > Maler> Forside - Viktig melding

Web Computing AS Brukerveiledning WebWiz 3.0. WebWiz 3.0. Brukerveiledning

Brukermanual for lr.no

SiteGen CMS. Innføringsmanual

WordPress for transmark-subsea.com

Hvordan bruke Helsegris for produsenter Innhold:

WordPress startguide

Veiledning for Krets- og gruppesider.

Molde Seilforening. Retningslinjer/Bruksanvisning for oppdatering av hjemmeside. Versjon GIR

Vedlegg 2: Beskrivelse av webkonsept

ASKER FOTBALL KVINNERS NETTSIDE

Veiviser til vilbli.no for rådgivere

Hvordan redigere fotoblogg sider i Joomla 3.x

Brukerveiledning for administrasjon av travlagenes websider

BRUKERMANUAL KOM I GANG... 2 BLOGGINNLEGG... 4 UNDERSIDER... 6 LAST OPP BILDER/VIDEO... 8 KOMMENTARER PÅ INNLEGG... 9 UTSEENDE...

Brukerdokumentasjon for LabOra portal - forfattere

Riksarkivet. Designretningslinjer for elektroniske medier. Designdokumentasjon for Riksarkivet. Versjon 01

Nybegynner i WordPress

BRUKERVEILEDNING TIL MAGNORMOEN INDUSTRIOMRÅDE OG GAUSTADVEGEN INDUSTRIOMRÅDES HJEMMESIDER:

Innholdsfortegnelse. OLKWEB brukerveiledning for lærlinger

Næringslivsregister - registrere din bedrift på Eidsvoll kommunes Innbyggerportål?

Registrere ditt lag/forening og aktiviteter på Eidsvoll kommunes Innbyggerportal?

Brukerguide for

Brukerveiledning. Kom i gang. publiseringsverktøy. versjon 2 - revidert AESTON. Side 1

Brukerveiledning Bruk av siden. Når du går inn på siden får du opp følgende bilde:

Brukerveiledning. Kom i gang. publiseringsverktøy. versjon 7 - revidert Gevir IT Drift AS Webside:

Brukermanual for EIK IFs webside

Læring. Brukerguide + = Hva er KS Læring? Logg deg på Fra forsiden velg Logg inn i øvre høyre hjørne av skjermen. Utstyr for lyd og bilde

HR analysen. Ny versjon Brukermal. Administratorer

Utkast. Publiseringsløsning. Brukerdokumentasjon ez Publish. Logge på Gå inn på:

Uansett hvilken håndbok du benytter vil fremgangsmåten være den samme. I denne veiledningen benytter vi personalhåndboken som eksempel.

Bruksanvisning for administrasjon av

Brukerveiledning WordPress. Innlogging:

Kom raskt i gang med Kirkenettet

Hvordan redigere blogg sider i Joomla 3.x

Hvordan publisere en artikkel i CorePublish

KOMME I GANG 3. Logge på 3. I redigeringsvinduet 4 OVERSIKT OVER KNAPPENE SOM LIGGER ØVERST I REDIGERINGSVINDUET 6

BRUKERMANUAL (versjon 1.0)


Brukerveiledning. Nye meldal.no

OPPRETTELSE OG VEDLIKEHOLD AV ÅRSKLASSENES HJEMMESIDER

Bruk av it s learning

Visma Flyt skole. Foresatte

Revidert _fg. Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted.

Publiseringsveiledning lokallag NJFF

Bruksanvisning for fylkesnettsider

Brukermanual. Retriever Monitor. Retriever Norge

Brukerveiledning for PedIT - Web

Brukermanual for NROFs lokalavdelinger - hvordan redigere egne hjemmesider

1. Byggeiermeny gir tilgang til moduler/funksjoner som gjelder alle byggene

Brukerveiledning for hjemmesider

Brukerveiledning for Vesuv

Brukerveiledning til personkortet

Seksjoner, kategorier og artikler

Manusnett - brukerveiledning for forfatter

Intranett: Hvordan komme i gang

PBL Barnehageweb. Brukerveiledning

Brukermanual for Kjelsås fotballs nettsider

Brukerveiledning for Styreadministrasjon Helse Midt-Norge RHF

Veiledning i administrering av egne loge-/leirsider i portalen Innhold:

Kort oppstartsmanual Frisk torsk

Brukerveiledning Versjon 1.2

Få din egen hjemmeside

Diskusjon:SportsAdmin Medlemsadministrasjon

Compello Invoice Approval

Brukermanual. Wordpress»

Kort brukerveiledning- publisering på nett EpiServer CMS6... 1

Visma Flyt skole. Foresatte

Visma Flyt skole. Foresatte

Table of Contents. OLKWEB brukerveiledning for lærlinger

KOMME I GANG 2. Logge på 2. I redigeringsvinduet 3 OVERSIKT OVER KNAPPENE SOM LIGGER ØVERST I REDIGERINGSVINDUET 5

Datamann Informasjonssystemer

Transkript:

Beskrivelse av designmaler for Bodø kommunes Borgerportal, Medarbeiderportal og mobile enheter

Beskrivelse I dette dokumentet får du en beskrivelse av alle designmalene og funksjonaliteten som skal utvikles når designen skal implementeres. Annen informasjon Fonten som er brukt i designet er PT Sans 4 - styles by multiple designers og er en googlefont. Denne fonten finner du her: http://www.google.com/webfonts#chooseplace:select Innhold Borgerportalen: - http://web1648.netthus.no/bodo/borger/vd/ Forsiden Borgerportal... side 3 Visning av hovedkategori... side 4 Generell underside/artikkelside... side 5 Nyhetsutlisting... side 6 Ledige stillinger... side 7 Ledig stilling... side 8 Ansattsøk... side 9 Søkeresultat... side 10 Kampanjemal... side 11 Kriseside... side 12 Enhet - http://web1648.netthus.no/bodo/borger/vd/enhet/ Forside... side 13 Generell underside/artikkelside... side 14 Generell underside/artikkelside m/galleri... side 15 Medarbeiderportalen - http://web1648.netthus.no/bodo_medarbeider/vd/ Log inn... side 16 Forside... side 17 Generell underside/artikkelside... side 18 Aktuelt... side 20 Nyhetsartikkel... side 21 iframe visning... side 22 Ansatte... side 23 Søkeresultat... side 24 Mediearkiv -... side 25 Responsivt design - http://web1648.netthus.no/bodo_responsive/ Responsivt design... side 26 Responsive designprinsipper nettbrett... side 27 Responsive designprinsipper smarttelefon... side 28 Beskrivelse av design 2

1 2 3 4 5 6 7 8 Forsiden 1. Kontrollpanel: De fem oransje knappene øverst til venstre er en del av rammeverket. Alle ikonene skal vise en tekstboks med en beskrivelse når musen beveger seg over dem. Knappene illustrerer (fra venstre): Skriftstørrelse, kontrast, hør teksten, enkelsk side og org. Kart. 2. Menylinje Den øverste menyen er en del av rammeverket. Til venstre ligger Bodø kommunes logo. Ved å trykke på logoen kommer man tilbake til forsiden. Til høyre for logoen får man to spalter med lenker. I neste spalte ligger telefonnummer og knapp for chat. Begge disse knappene skal det komme opp en beskrivelsesboks ved mouseover. I søkefeltet kan man velge om man skal søke i hele Borgerportalen, eller blant kommunens ansatte. 3. Hovedbilde Hovedbildet er en del av rammeverket, men visningen vil ikke være like stor på undersider som på forsiden. Det skal være mulig å sette inn en lenke i tilknytning til bildet, samt tilhørende tekst. Teksten må kunne forandre farge for å tilpasses bildet. Dette bildet må kunne tidsstyres. 4. Hovedkategorier Hovedkategoriene er en del av rammeverket, men visningen av dem vil ikke være like høy når man kommer på undersider. Ved å klikke på en hovedkategori, skal forsidebildet og område 5, 6 og 7 gli ut til venstre for å gi plass til den nye informasjonen som kommer flytende inn fra høyre. 1. Kontrollpanel (rammeverk) 2. Menylinje (rammeverk) 3. Hovedbilde (rammeverk) 4. Hovedkategorier (rammeverk) 5. Kampanje/hovednyhet 6. Minikampanjer/nr2-3 nyheter 7. Hurtiglenker 8. Bunn (rammeverk) 5. Kampanje/hovednyhet Kampanje/hovednyhet er et område som viser den siste nyhetssaken. Det må også være mulig å overstyre hvilken sak som skal ligge der, selv om en annen nyhet er publisert. 6. Minikampanje/nr 2 og 3 nyhet. I disse to feltene skal man selv kunne sette inn tekst og lenke til aktuelle hendelser i kommunen. 7. Hurtiglenker Hurtiglenkene er delt opp i fire kategorier. Alle undersider skal kunne tagges med en eller flere av disse kategoriene. I dette feltet vil da de fem mest besøkte sider fra hver kategori vises. Det må også være mulighet for å overstyre visningen. 8. Bunn Bunnområdet er en del av rammeverket. Området er delt opp i fire spalter. Spalten til venstre skal inneholde kontaktinformasjon. I neste spalte er det en lenkesamling. I spalte nummer tre listes andre kommunale sider opp, som er aktuelle. I høyrespalten er en visning av Bodø Kommunes tilstedeværelse i sosiale medier, samt RSS-feed, og siste tweet fra Bodø Kommunes Twitterkonto. I bunnen skal det også stå om copyright, web- og ansvarlig redaktør. Beskrivelse av design 3

4 1 3 2 1. Forklaringstekst 2. Underkategorier 3. Hurtiglenker 4. Bilde hovedkategori Visning av hovedkategori 1. Forklaringstekst Et eget tekstfelt for hver hovedkategori hvor man har mulighet til å beskrive tjenestene. 2. Underkategorier Etter å ha valgt en hovedkategori skal underkategoriene (nivå 2) vises her. Disse styres dynamisk ut fra strukturen. 3. Hurtiglenker Man skal selv kunne velge fem undersider som skal vises her. Dette er lenker som er aktuelle eller mest besøkt på sidene. 4. Bilde hovedkategori Hver hovedkategori har et eget illustrasjonsbilde tilknyttet seg. På dette bildet, som på forsidebildet, skal det være mulig å skrive en egen tekst og link. Dette bildet følger alle undersidene som ligger under den aktuelle kategorien. Beskrivelse av design 4

1 3 2 4 5 Generell underside/artikkelside 1. Rammeverk - topp Det vil være noen små endringer i rammeverket når man kommer på undersider. Toppbildet blir litt lavere og lenken som man hadde på forsiden går ut. Det blå feltet for hovedkategoriene er 20 px lavere på undersider. 2. Venstremeny Venstremenyen består av tre nivåer. Underkategorien markeres med den grønne profilfargen, og den siden man er inne på er markert med uthevet tekst. 1. Rammeverk - topp 2. Venstremeny 3. Tekstområde m/bilde 4. Høyrespalte 5. Kommentarfelt mulighet til å sette inn et bilde som dekker hele bredden. Det må være mulighet for underoverskrifter, og lenker markeres med den blå profilfargen og utheves i bold. 4. Høyrespalte I høyrespalten skal det være et tilknyttet kart, tilknyttede filer for nedlastning, relaterte artikler og kontaktinformasjonen til den som er ansvarlig for den aktuelle siden. Skal også være mulig å legge til flere bokser etter ønske. 3. Tekstområde m/bilde Øverst i dette feltet finner man brødsmulestien. Tekstområdet består av en overskrift med publiseringsdato. Under kommer ingressen og et bilde med mulighet for bildetekst. Om bildet ikke blir brukt, utvides ingressfeltet. Man må også ha 5. Kommentarfelt I kommentarfeltet kan man legge inn kommentarer til artikler og andre undersider. Man kan selv bestemme om kommentarfelt skal være aktivt eller ikke på sidene. Brukere har også mulighet til å kommentere andre sine innlegg. Beskrivelse av design 5

1 2 3 Nyhetsutlisting 1. Topplink i rammeverk Når man er inne på en av kategoriene i toppmenyen skal de markeres på denne måten. 1. Topplink i rammeverk 2. Nyhetskategorier 3. Nyhetsutlisting 2. Nyhetskategorier Det må være mulig å kategorisere nyhetssakene, slik at brukerne selv kan velge hvilke nyheter de ønsker å se. 3. Nyhetsutlisting Nyhetsutlistingen vises med overskrift, byline, publiseringsdato, ingress og bilde. Overskriften, bildet og «les mer», skal linkes inn til den aktuelle nyhetssaken. Den siste publiserte saken, eller den som er festet til toppen av utlistingen, utheves med et større bilde og i en grå boks. Under de utlistede aktueltsakene skal det være mulig å bla til neste side i utlistingen. Beskrivelse av design 6

1 2 Ledige stillinger 1. Filtreringsmuligheter Siden Bodø kommune ofte har mange stillinger utlyst, må det legges til rette for at brukerne kan filtrere i utlistingen. I første omgang ser vi for oss at man kan filtrere/sortere etter publiseringsdato, fulltid/deltid og enhet. 1. Filtreringsmuligheter 2. Stillingsutlisting 2. Stillingsutlistning Stillingene skal listes ut med stillingstittel, enhet, publiseringsdato/frist, ingress og en lenke, «les mer», for mer informasjon. Tittelen skal også lenkes inn til detaljvisningen for stillingen. Beskrivelse av design 7

1 2 3 Ledig stilling 1. Beskrivelse av arbeidsgiver Det øverste feltet i stillingsbeskrivelsen skal omhandle arbeidsgiveren og/eller enheten stillingen tilhører. 1. Arbeidsgiverbeskrivelse 2. Stillingsbeskrivelse 3. Stillingsfakta 2. Stillingsbeskrivelse Stillingsbeskrivelsen må ha en overskrift og mulighet for flere underoverskrifter. 3. Stillingsfakta Faktadelen av denne malen inneholder en punktvis utlisting av viktig informasjon og et kart (kartet må være valgfritt). I tillegg må det legges til rette for en tekstboks med retningslinjer, og en tekstboks for å skrive fritt. Nederst i stillingsfaktaområdet må det være mulighet for beskrivelse av kontaktperson. Det bør også være mulig å sette inn flere enn en kontaktperson der ved behov. Her skal «søk her»-knappen ligge og lenkes mot elektroniske søknadsskjema til Visma/Unique rekruteringsmodul. Tilbakeknappen (fjern fører) skal føre tilbake til utlistingen av stillinger. Beskrivelse av design 8

2 1 3 Ansattsøk 1. Meny Denne menyen er lik den på generelle undersider, her vist uten undernivåer. 1. Meny 2. Finn ansatt 3. Finn ansatt søkeresultat 2. Finn ansatt Selv om man har mulighet til å søke etter ansatte i søkefeltet i rammeverket, trengs det et ekstra søkefelt når søkeresultatet for ansattesøket utlistes. 3. Finn ansatt søkeresultat Utlistningen av ansatte deles opp i fire kategorier: Navn, tittel, virksomhet og telefon. Det skal være mulighet for å sortere, i alfabetisk rekkefølge, på alle parameterne unntatt telefon. For hvert av navnene skal man kunne utvide visningen for å få en mer detaljert beskrivelse av den aktuelle personen. I tillegg skal det legges til rette for å kunne klikke på ikonet for QR-kode, og da få opp en lightbox med QR-koden i riktig størrelse. Denne inneholder en ansattes visittkort. QR-koder må genereres automatisk. I tillegg skal det inn en link (lik QR-kode linken) hvor man kan lagre kontaktinformasjon automatisk i epostklienten. Beskrivelse av design 9

1 Søkeresultat 1. Søkeresultat Søkeresultatet legges opp som et gruppert søk i kategoriene: Websidene, aktuelt og ansatte. I søket kan dermed brukerne ta bort informasjon som ikke er relevant. For hver av kategoriene skal det kun vises de fem første resultatene, men med mulighet for å vise alle. Det skal også være mulighet til å sortere søket sitt på forskjellige parametere som for eksempel relevans, publiseringsdato, alfabetisk og lignende. 1. Søkeresultat Beskrivelse av design 10

Kampanjemal Kampanjesidene er nettsider som opprettes med kortere varighet. Det kan være sider som omhandler prosjekter, konferanser, kampanjer og lignende. For slike sider skal det være mulig å lage en egen design bygd på et fast rammeverk. Det betyr at disse sidene, som omfatter en forside, undersider og innholdssider, må være fleksibel i form av hva slaks funksjoner som skal legges til. Typiske funksjoner kan være egne skjema, bildegalleri, kommentarmuligheter og kalender. Altså ingen andre funksjoner enn hva Borgerportalen og medarbeiderportalen inneholder. Når slike sider opprettes skal Bodø kommune selv kunne sette mest mulig opp selv. Beskrivelse av design 11

1 2 3 4 Kriseside Dette er en side man skal bruke når det er spesielle hendelser som har skjedd. Når denne siden aktiveres vil den fungere som forsiden på Bodø kommunes nettsider, men brukeren skal ha mulighet til å klikke seg videre til den normale forsiden. 1. Toppfelt 2. Hendelsesbeskrivelse 3. Kontaktinformasjon 4. Siste nyheter slike type hendelser. Disse nyhetene utlistes med den sist oppdaterte saken øverst. Nyhetssakene listes ut med tittel, byline, publiseringstidspunkt og ingress. 1. Toppfelt Toppfeltet består av et hovedbilde, her må det ligge et defaultbilde i tilfeller hvor man ikke har rukket å få et illustrerende bilde av hendelsen. I tillegg ligger det en topplinje med logo, fellesnummer for pårørende og presse, samt en lenke som fører brukeren videre inn på den vanlige forsiden. Da det kan variere med antall fellesnummer må det være mulighet til å legge inn flere nummer. 2. Hendelsesbeskrivelse Her skal hendelsen beskrives. På forsiden vil da tittel, byline, publiseringstidspunkt, ingressen og et bilde vises. 3. Kontaktinformasjon Kontaktpersoner skal kunne hentes fra ansattedatabasen. Dette fordi en slik side raskt må kunne opprettes. Kontaktpersonene vises med navn, stilling, telefonnummer og e-postadresse. Men når en slik side opprettes må det være mulighet for redaktøren og overstyre informasjonen som legges inn her. 4. Siste nyheter Det må være klargjort en egen nyhetskategori for Beskrivelse av design 12

1 2 4 3 Forside - enheter Enhetssider er sider beregnet for skoler, barnehager, sykehjem og lignende. Designmessig har de en klar likhet med Borgerportalen, men hver enhet skal selv ha mulighet til å forme sidene slik de ønsker. Disse sidene skal også ha mulighet til å ha et eget passordbeskyttet område beregnet for foreldre og pårørende. 1. Toppfelt 2. Venstremeny 3. Hovedområde 4. Høyrespalte 3. Hovedområde I hovedområdet ligger det øverst en brødsmulesti og delingsfunksjonalitet. Under vil det være et markert felt hvor man kort kan beskrive enheten og legge til et bilde. I tillegg skal de siste nyhetssakene/bloggene listes ut. Disse listes ut med tittel, byline, publiseringsdato og ingress. 1. Toppfelt Toppfeltet er en del av rammeverket på enhetssidene. I toppfeltet har enhetene mulighet til å legge inn et eget bilde. I menyen skal det til venstre være et eget bildefelt hvor enhetene kan legge inn en logo. Menylenkene i menyfeltet er lenker som skal følge nettsiden i rammeverket. I søkefeltet skal brukeren ha mulighet til å velge om de vil søke på enhetssiden, blant ansatte eller i Borgerportalen. Til høyre i menylinjen skal alltid Bodø kommunes logo ligge, denne skal også lenkes til Borgerportalen. 4. Høyre spalte I høyrespalten skal enhetene ha mulighet til å legge inn relevant informasjon selv. Det må derfor legges til rette for å legge inn egne bokser og bannere. I tillegg må det legges til rette for å vise kart, og ansvarlig for innhold skal alltid stå nederst i høyrespalten. 2. Venstremeny Strukturen i venstremenyen skal enhetene selv ha mulighet til å bygge. Beskrivelse av design 13

Generell underside/artikkelside - enhet Bortsett fra rammeverk (inkludert venstremeny) skal generelle undersider/artikler være like og inneha samme funksjonalitet som de i Borgerportalen. Dette på grunn av eventuell krysspublisering. Beskrivelse av design 14

1 1. Galleri Generell underside/artikkelside m/galleri - enhet 1. Galleri Dette er en generell underside/artikkelside som vist på forrige side, bare med innlagt gallerifunksjonalitet. På hvert av bildene skal det være mulig å legge til en bildetekst, men dette er valgfritt. Man skal kunne bla gjennom bildene, og ved å klikke på dem får man en forstørret versjon av bildet. Slike galleri vil ofte ligge på det passordbeskyttede området, det er derfor viktig at mediafiler som dette ikke vises i søkeresultat uten at brukeren er innlogget. Beskrivelse av design 15

Log inn - Medarbeiderportalen Log inn funksjonen til Medarbeiderportalen skal, i tillegg til brukernavn og passord, inneholde husk meg og glemt passord funksjonalitet. Det skal også være mulighet for brukerne å kontakte webredaksjonen. Beskrivelse av design 16

1 Forside - Medarbeiderportalen 1. Menylinje (rammeverk) 2. Hovedartikkel 3. Siste nyheter 4. Informasjonsbokser 5. Verktøy 1. Menylinje Menylinjen vil inneholde flere lenker enn menylinjen i Borgerportalen. I tillegg vil det være et søkefelt plassert til høyre. 3 4 2 5 2. Hovedartikkel Hovedartikkel er den siste nyheten som er publisert. Denne må kunne overstyres slik at sentrale nyheter får denne plasseringen. Vises med et stort bilde, tittel, byline, publiseringsdato og ingress. 3. Siste nyheter Utlisting av de siste nyhetene på medarbeiderportalen. 4. Informasjonsbokser Informasjonsboksene kan inneholde forskjellig relevant informasjon, så det er viktig at dette blir fleksibelt. Informasjonen i disse boksene kan være: nyheter fra Borgerportalen, aktivitetsfeed, felles kalender og lignende. Boksene består av en overskrift med forskjellige profilfarger og et informasjonsområde 5. Verktøy Verktøypanelet vil være hver enkelt ansatt sitt personlige område, hvor de kan sette innholdet etter behov. Verktøy som er aktuelt her er faste snarveier, personlige snarveier, kalender, hurtiglenker til andre kommunale systemer (som for eksempel kvalitetslosen). På undersider vil denne verktøylinjen minimeres, med mulighet for å åpne den igjen med dropdown. Beskrivelse av design 17

Generell underside/artikkelside - Medarbeiderportalen 4 1. Venstremeny 2. Tekstfelt m/bilde og kommentar 3. Høyrespalte 4. Verktøy 1. Venstremeny Lik generell underside/artikkelside Borgerportal 2. Tekstfelt m/bilde og kommentar Lik generell underside/artikkelside Borgerportal 1 3 3. Høyrespalte Lik generell underside/artikkelside Borgerportal 4. Verktøy Ved å trykke på området for verktøy ekspanderes med dropdown, som vist på bildet på neste side. 2 Beskrivelse av design 18

Beskrivelse av design 19

1 2 3 Aktuelt - Medarbeiderportalen 1. Venstremeny Lik venstremenyen i artikkelutlistningen på Borgerportal. 1. Venstremeny 2. Hovedfelt 3. Høyrespalte 2. Hovedfelt Lik hovedfeltet i artikkelutlistningen på Borgerportal. 3. Høyrespalte I høyrespalten vil det være informasjonsbokser med et nyhetsarkiv fordelt på de siste seks månedene, de mest leste artiklene, de siste kommenterte artiklene, relaterte nyheter og ansvarlig for innholdet. Beskrivelse av design 20

Nyhetsartikkel Medarbeiderportalen Funksjonaliteten på denne siden er lik generelle undersider/artikkel sider. Forskjellen her er at flere av høyrespalteboksene er illustrert. Her med siste artikler. (se punkt 1) 1 Beskrivelse av design 21

iframe visning - Medarbeiderportalen I noen tilfeller vil det være nødvendig å vise noen av kommunens systemer i en iframe. I de tilfellene skal rammeverket i medarbeiderportalen beholdes. Beskrivelse av design 22

Ansatte - Medarbeiderportalen Funksjonaliteten på denne siden er lik som ansatte-malen for Borgerportalen. Det bør også regnes med at man ønsker å sette inn noen flere detaljer på visningen i Medarbeiderportalen. Dette kan for eksempel være ansattnummer. Beskrivelse av design 23

Søkeresultat - Medarbeiderportalen Funksjonaliteten på denne siden er lik som søkeresultat for Borgerportalen. Beskrivelse av design 24

Mediearkiv - Medarbeiderportalen 1. Venstremeny 2. Hovedfelt 3. Beskrivelse, søk og filter 4. Høyrespalte 1 3 1. Venstremeny I venstremenyen har man mulighet til å sortere de forskjellige mediafilene. Her skal man også ha lenken til opplasting og administrering av mediafilene. 2 4 2. Hovedfelt I hovedfeltet utlistes de forskjellige mediafilene. De utlistes med en thumbnail, tittel, antall filer i mappen og opplastingsdato. I denne visningen skal man også ha mulighet til å laste ned hele innholdet, i tillegg til å klikke inn for å se innholdet. 3. Beskrivelse, søk og filter Øverst i hovedfeltet skal det gjøres plass til en beskrivelse av Mediaarkivet. Det er også et stort søkefelt under beskrivelsen. Søkefeltet skal være et live-søk. I tillegg skal man kunne filtrere på for eksempel dato, alfabetisk rekkefølge og lignende. 4. Høyrespalte Høyrespalten skal inneholde diverse bokser med relevant informasjon. Dette er bokser som siste opplastede filsamling, siste opplastede filer og lignende. NB: dette er kun en interaksjonsdesign skisse av denne malen. Beskrivelse av design 25

Responsivt design av Borgerportalen og Medarbeiderportalen Både Borgerportalen og Medarbeiderportalen skal utvikles som responsive websider. Responsive webdesign går ut på at webdesignet responderer og tilpasser seg plattformen, størrelsen og perspektivet til enheten i bruk. Dette betyr at designet vil presenteres annerledes på en PC kontra en smarttelefon eller et nettbrett. For å oppnå et optimalt resultat av responsive webdesign bør det være et tett samarbeid mellom designer og utvikler. Bilder av retningslinjer og prinsipper ligger vedlagt. I arbeid med responsive webdesign avklarer man hvordan designelementene skal oppføre seg i ulike format, og ikke minst vekter man innholdet i form av plassering og prioritering av det. Beskrivelse av design 26

Responsive designprinsipper nettbrett På nettbrett vil det være mindre synlige forandringer i designet, i forhold til visningen på en vanlig pcskjerm. Men på grunn av at skjermvisningen vil bli mindre på nettbrett, må eksempelvis fontstørrelsen økes, og innhold vektes og prioriteres i form av å endre plassering, få mindre visningsområde, eller tas bort. Knapper er et eksempel på viktige grafiske elementer som må forstørres, for at de skal være optimale knapper å trykke på, på en touch-skjerm. 1. Forsiden På forsiden vil kontrollpanelet og hovedmenyen flyttes øverst i visningen. Her tildeles innholdet høyere prioritering enn bildefeltet i topp. Hovednyheten tilpasses, for å kunne eksponere underkampanjene på lik linje innenfor det visuelle området (uten å måtte scrolle). 2. Visning av hovedkategori Hovedkategorivisningen vil være så og si lik på en vanlig pc-skjerm som på ipad. Tekststørrelsen i beskrivelsesfeltet økes, mens spalten for hurtiglinker tas bort da den er tilgjengelig fra flere andre innganger og gir plass til hovednavigeringen. Bunnfeltet i rammeverket vil være tilnærmet likt som på en vanlig skjerm, men noe tilpasset i størrelsesforhold. Beskrivelse av design 27

Responsive designprinsipper smarttelefon 1 2 En rekke hensyn må tas til smarttelefoners skjermstørrelse. For eksempel mindre nøyaktighet, at hånden dekker over innhold, hoverfunksjoner som ikke fungerer på samme måte, at kontroller (knapper og lignende) må være store nok for enkel berøring, samt treg input (tar for de fleste lengre tid å skrive på en smarttelefon kontra et tradisjonelt QWERT-tastatur). Plassen man har til å fortelle, lede og vise brukeren informasjonen fra websiden, er også betraktelig mindre. Derfor vil visningen på en slik skjermstørrelse måtte tilpasses med større og tydeligere knapper, og prioritering og vekting av innhold er viktig. Tekststørrelsen må være av en størrelse som gjør det behagelig å lese mengdetekst på smarttelefonen. I disse hovedprinsippene vil det komme endringer, men det skal ikke tilføyes noen ekstra funksjonaliteter. Dialog mellom designer og utvikler vil være nøkkelen til en god visning her. 1. Forsiden Øverst i rammeverket vil hovedmenyen vises over logo og søkefelt. Da det vil være vanskeligere for brukere å navigere seg blant de over 400 undersidene, har søkefeltet fått en enda mer sentral plass i mobilvisningen. Under søkefeltet vil hovedkategoriene få en sentral plassering. Videre vil det være et oversiktlig bunnområde på siden. 2. Hovedkategori visning Hovedmenyknappene ekspanderes når man trykker på dem, da får man først den forklarende teksten før utlistingen av underkategoriene. Beskrivelse av design 28

1 2 Responsive designprinsipper smarttelefon Medarbeiderportalen vil på mange måter bygges opp likt med Borgerportalen for mobil. Elementene vil stort sett være de samme som på de andre visningene, men verktøyene som de ansatte har tilgjengelig vil være klikkbar til en hver tid nederst på skjermen. 1. Visning av hele forsidemalen 2. Visning i smarttelefon Borgerportalen, Medarbeiderportalen og Enhetssidene, vil på mange måter bygges opp på de samme prinsippene, da webdesignet, størrelser og type innhold går igjen på alle portalene. Beskrivelse av design 29