Stijlgids mobiele apps Rijkswaterstaat

RWS BEDRIJFSINFORMATIE

Stijlgids mobiele apps Rijkswaterstaat Richtlijn voor design en user experience

Datum Versie

17 maart 2015 1.1

Colofon

Uitgegeven door Informatie Datum Versienummer

Rijkswaterstaat Corporate Dienst Afdeling Corporate Communicatie Online en Huisstijl Klantencontactcentrum Rijkswaterstaat [email protected] | 088-797 07 77 17 maart 2015 1.1

RWS Bedrijfsinformatie | Stijlgids mobiele apps Rijkswaterstaat | 17 maart 2015

Inhoud

Inleiding—4 1 1.1 1.2 1.3 1.4 1.5 1.6

Rijkswaterstaat mobiele applicaties—5 Achtergrond: visie mobiel—5 Externe mobiele applicaties—5 Interne mobiele applicaties—5 User interface uitgangspunten—6 Mobiele context—6 Contact—6

2 2.1 2.2 2.3 2.4 2.4.1 2.4.2

Multi-device ontwerpen—7 Aanpak en toelichting—7 Breakpoint—7 Responsive design principes—8 Oriëntatie—9 Smartphone—9 Tablet—9

3 3.1 3.1.1 3.1.2 3.2

Hoofdindeling—10 Pagina lay-out—10 Contentpagina, enkele kolom—11 Overzichtpagina, 3 kolommen—11 Header [interne app]—12

4 4.1 4.2 4.3 4.3.1 4.4 4.4.1 4.4.2 4.5 4.5.1 4.5.2 4.6 4.7 4.7.1 4.7.2 4.7.3 4.7.4

Basiselementen—13 Kleurgebruik interne apps—13 Lettertypes—14 Logo—14 Splash screen—15 Icoongebruik—18 App icoon interne apps—19 App icoon externe apps—20 Formulieren—21 Formuliervalidaties—21 Bevestiging na verzenden van formulieren—21 Animaties en het laden van content—21 Pagina flow en transities—22 Taak openen—22 Van hoofdscherm naar subpagina binnen een taak—22 Pop-up binnen een taak—23 Navigeren door gerelateerde subpagina’s—23

5 5.1 5.2 5.2.1 5.2.2 5.3 5.3.1 5.3.2

Dashboard, widgets en taken—25 Dashboard—25 Widgets—26 Formaten—26 Opmaak—26 Taken—27 Navigatie—27 Opmaak voorbeelden—27


Inleiding

Deze stijlgids bevat de basisrichtlijnen en uitgangspunten voor de User Experience (UX) en het design voor alle mobiele apps van Rijkswaterstaat, zowel voor extern als intern gebruik. Met interne apps worden apps bedoeld die zijn ontwikkeld voor intern gebruik door (een deel van) de Rijkswaterstaat medewerkers. Het toepassen van de beschreven uitgangspunten zorgt ervoor dat herkenbaarheid en uniformiteit in de werking en uitstraling van interne mobiele Rijkswaterstaat applicaties worden bewaakt. De ontwikkelingen in de mobiele wereld volgen zich razendsnel op en hiermee kunnen inzichten ook veranderen. Om deze reden is dit een levend document dat zal worden bijgewerkt en verrijkt met de laatste inzichten. Het beheer van de stijlgids is belegd bij de afdeling Corporate Communicatie Online en Huisstijl van de Corporate dienst. Heb je opmerkingen of vragen over de stijlgids of over het ontwikkelen van mobiele applicaties, neem dan altijd contact op met Corporate Communicatie Online en Huisstijl via het Klantencontactcentrum van Rijkswaterstaat, per mail te bereiken via [email protected] en telefonisch op 088-797 07 77.

Pagina 4 van 28


1

Rijkswaterstaat mobiele applicaties

1.1

Achtergrond: visie mobiel Gezien de snelle ontwikkelingen rondom mobiele dienstverlening, de mobiele trend bij Het Nieuwe Werken, consumerization of IT, en de organisatiedoelstellingen uit het Ondernemingsplan wil Rijkswaterstaat de interne en externe doelgroepen nog beter ondersteunen op het gebied van mobiele communicatie en dienstverlening. De belangrijkste voordelen van het inzetten van mobiele toepassingen zijn:  Verbeteren klanttevredenheid  Verbeteren medewerkertevredenheid (incl. werven jong, nieuw personeel)  Reduceren van kosten  Veranderen bedrijfscultuur (meer innovatie, flexibiliteit en efficiëntie)  Mogelijk maken van tijd- en plaatsonafhankelijk werken  Verbeteren merkattitude (innovatief imago)  Klantgerichter werken  Centrale rol in de samenleving

1.2

Externe mobiele applicaties In Nederland maken meer dan 7 miljoen mensen gebruik van mobiel internet. Dit betekent dat ook Rijkswaterstaat als betrouwbare informatievoorziener aanwezig dient te zijn op de mobiele apparaten van onze doelgroepen. De inzet van een mobiele app is een van de mogelijkheden om te voorzien in de behoeften van de gebruiker. Een app kan worden ingezet om de bestaande dienstverlening te ondersteunen, of om Rijkswaterstaat als merk te versterken. Uitgangspunten externe mobiele applicaties Externe mobiele applicaties geven de gebruiker direct en overal toegang tot actuele, relevante en betrouwbare informatie. Bij de mobiele oplossing staat de gebruikerswens altijd centraal en wordt gestreefd naar een optimale gebruikerservaring. Bij het realiseren van externe mobiele applicaties hanteren we enkele uitgangspunten:  Primair apparaat: smartphone, maar afhankelijk van doelgroep  Secundair apparaat: tablet, maar afhankelijk van doelgroep  Rekening houden en gebruik maken van de mobiele context van gebruikers  Touch als primaire input  Informatie is actueel/real-time  Apps zijn relevant in de mobiele context van de gebruiker

1.3

Interne mobiele applicaties Het faciliteren van interne bedrijfsvoeringservices en primaire werkprocessen via mobiele apparaten zorgt ervoor dat Rijkswaterstaat sneller, beter en goedkoper zijn ondernemingsdoelstellingen weet te bereiken. Interne mobiele applicaties zijn bedoeld om de interne business te ondersteunen en dragen bij aan de doelstellingen van de organisatie.

Pagina 5 van 28


Uitgangspunten interne mobiele applicaties Interne mobiele applicaties geven de gebruiker direct en overal toegang tot actuele, relevante en betrouwbare informatie. Bij de mobiele oplossing staat de gebruikerswens altijd centraal en wordt gestreefd naar een optimale gebruikerservaring. De interne mobiele oplossingen bestaan niet enkel uit een mobiele vertaling van het intranet of andere bestaande systemen. Het is een nieuwe mobiele omgeving die gebruik maakt van (onderdelen van) diverse bestaande bronnen die interne werkprocessen ondersteunen. Bij het realiseren van interne mobiele applicaties hanteren we enkele uitgangspunten:  Primair apparaat: Tablet  Secundair apparaat: Smartphone  Rekening houden en gebruik maken van de mobiele context van gebruikers  Touch als primaire input  Informatie is actueel/real-time  Ontsluit alleen toptaken van medewerkers De mobiele omgeving biedt toegang tot veelgebruikte functies die de medewerker ondersteunen bij tijd- en plaatsonafhankelijk werken. 1.4

User interface uitgangspunten Eén herkenbare Rijkswaterstaat stijl waarbij we aansluiten op de (mobiele) web omgeving. We maken hierbij zoveel mogelijk gebruik van bestaande User Interface (UI) standaarden van de platformen. Vanwege het vele gebruik van iOS en Android, is ervoor gekozen om met een beschrijving van deze platformen te beginnen. Voor meer informatie over Apple/iOS: https://developer.apple.com/library/ios/design/index.html Voor meer informatie over Google/Android: https://developer.android.com/design/index.html De uitgangspunten voor de vormgeving van de (interne) apps zijn samengesteld uit elementen van: de rijkshuisstijlrichtlijnen voor online, de huidige intranetomgeving van RWS en IenM, de huisstijlrichtlijnen van Rijkswaterstaat, de Schrijfwijzer Rijkswaterstaat en het document Uitgangspunten Corporate Communicatie Rijkswaterstaat. Uitgangspunten:  Herkenbaar  Eenduidig  Apparaat onafhankelijk  Geoptimaliseerd voor mobiel gebruik en touch screen

1.5

Mobiele context Bij het ontwerpen van mobiele applicaties dient er extra aandacht gevestigd te worden op de context van gebruik. Ter ondersteuning van deze context bieden mobiele apparaten diverse functies zoals GPS locatie, fototoestel en gyroscoop.

1.6

Contact Heb je opmerkingen of vragen over het ontwikkelen van mobiele applicaties, neem dan altijd contact op met Corporate Communicatie Online en Huisstijl via het Klantencontactcentrum van Rijkswaterstaat ([email protected] of 088-797 077).

Pagina 6 van 28


2

Multi-device ontwerpen

2.1

Aanpak en toelichting Het ontwerp van een app is geoptimaliseerd voor tablets (zoals iPad) en smartphones, 9 inch en 3-4 inch respectievelijk. Voor alternatieve schermgroottes past de user interface zich automatisch aan op basis van responsive design principes om de beschikbare ruimte zo effectief mogelijk te benutten.

2.2

Breakpoint Er is gekozen voor één smartphone versie voor alle apparaten met een scherm kleiner dan 7 inch, het zogenoemde breakpoint. Voor alle apparaten met een groter scherm is er de tablet versie. Breakpoint: 962x600dp

Twee versies voor diverse resoluties

Pagina 7 van 28


2.3

Responsive design principes Onderstaande principes kunnen worden toegepast bij het ontwerpen voor wisselende schermgroottes. Wanneer sprake is van afwijkende schermgroottes, kunnen onderstaande principes toegepast worden om de beschikbare ruimte zo effectief mogelijk te benutten.

Uitrekken

Stapelen

Content wordt opgerekt/ingedrukt binnen de beschikbare ruimte

Content verplaatst zich binnen beschikbare ruimte

Inklappen

Verbergen

Content klapt in/uit

Content verdwijnt naar de achtergrond of verschijnt binnen beschikbare ruimte, maar blijft beschikbaar

Vloeibaar & rekbaar

Toevoegen/verwijderen

Content verdeeld zich vloeiend over de beschikbare ruimte

Content verdwijnt naar de achtergrond of verschijnt binnen beschikbare ruimte

Complementair Aanvullende content wordt getoond die elders niet beschikbaar is

Pagina 8 van 28


2.4

Oriëntatie De standaard oriëntatie is per apparaat verschillend. Voor smartphones zal portrait mode het meeste voorkomen en landscape mode gebruikt worden voor bijvoorbeeld het lezen van teksten of het invoeren van tekst (met twee duimen typen). Voor tablets zal het gebruik in landscape mode meer voorkomen en portrait mode voor bijvoorbeeld het lezen van documenten (vaak op basis van A4 print). Voor het ontwerpen van oriëntatie afhankelijke schermvariaties, kan gebruik gemaakt worden van de responsive design principes.

2.4.1

Smartphone Voor smartphones bieden we alleen de portrait mode aan. Bij kanteling van het scherm naar landscape mode blijft de portrait mode gehandhaafd.

Handhaving van portrait mode op smartphone bij kantelen van scherm. 2.4.2

Tablet De tablet heeft als primaire view de landscape mode maar beide oriëntaties worden ondersteund. Bij kanteling van het scherm naar portrait mode wordt het vloeibaar & rekbaar en uitrekken principe toegepast.

Pagina 9 van 28


3

Hoofdindeling

Voor iPad is uitgegaan van resolutie van 1024x768px. 3.1

Pagina lay-out De content kan verdeeld worden over:  Contentvlak van 984px breed (rood vlak in onderstaand voorbeeld)  Topmarge van 30 px hoog (witte ruimte tussen header en contentvlak)  Zijmarge van 20px breed (links en rechts van contentvlak) In paragraaf 3.2 staat de beschrijving van de header (blauw vlak in onderstaand voorbeeld).

Binnen deze lay-out kennen we vooralsnog twee type pagina’s: 1. Contentpagina 2. Overzichtpagina, 3 kolommen

Pagina 10 van 28


3.1.1

Contentpagina, enkele kolom Geschikt voor eenduidige, tekstuele content met verticale leesrichting. De content binnen de pagina lay-out kan verdeeld worden over:  Contentvlak van 646px breed centraal gepositioneerd  Zijmarge van 169px breed (links en rechts van het contentvlak)

Mogelijke voorbeelden van contentpagina’s:

3.1.2

Overzichtpagina, 3 kolommen Geschikt voor overzichten en lijstweergaves met verticale en horizontale leesrichtingen. De content binnen de pagina lay-out kan verdeeld worden over:  Drie kolommen van 308px breed  Marges van 30px breed tussen de kolommen

Pagina 11 van 28


Mogelijke voorbeelden van overzichtpagina’s:

3.2

Header [interne app] De juiste lichtblauwe kleur voor de header in een interne app is te vinden op: http://www.rijkshuisstijl.nl/bouwstenen/kleur/communicatiekleuren/lichtblauw

Webkleuren Waarden RGB

R:143 G:202 B:231

Hex

#8fcae7

De header beslaat de volle paginabreed en heeft een hoogte van 68px. Het onderste, lichte vlak is 8px hoog. De titel in de header is vrij aanpasbaar. De positie van de titel is gecentreerd en staat vast.

Pagina 12 van 28


4

Basiselementen

4.1

Kleurgebruik interne apps Het gebruikte kleurenpalet is gebaseerd op de rijkshuisstijl. Waarbij Rijkswaterstaat een eigen hoofdkleur en steunkleuren gebruikt uit het kleurenpalet. Op de rijkshuisstijlsite staan de drie varianten van de lichtblauwe kleur: http://www.rijkshuisstijl.nl/bouwstenen/kleur/online-kleuren. Mocht je andere kleuren nodig hebben, dan kun je de varianten van de grijstinten gebruiken (staan vermeld onder de 17 communicatiekleuren). Naam

RGB

Hex

Lichtblauw, vol

143, 202, 231

#8fcae7

Lichtblauw, lichter

221, 239, 248

#ddeff8

Lichtblauw, lichtste

238, 247, 251

#eef7fb

Achtergrondkleur wit

255, 255, 255

#ffffff

Tekst

21, 66, 115

#154273

Kleur geel, vol (de overige twee geeltinten niet gebruiken)

249, 225, 30

# f9e11e

Voorbeeld

Voor de header 1 (zie 4.2) is als optie ook #007bc7 te gebruiken.

Achtergrond De achtergrondkleur wit wordt als achtergrondkleur in een app gebruikt. Zo krijgt de app een rustige en uniforme Rijkswaterstaat uitstraling en wordt voorkomen dat kleurlagen over elkaar heen vallen. Tabellen Tabellen zijn voorzien van een omlijning of een scheidingslijn van 3 pixel breed met de lichtblauwe kleur #8fcae7. De achtergrondkleur van een tabel is achtergrond wit. Selecties Bij geselecteerde onderdelen verandert de achtergrondkleur van achtergrond wit naar selectie lichtblauw, lichtste. Klikgedrag Er zijn verschillende onderdelen klikbaar. Knoppen, klikbare regels, menuelementen (iconen), afbeeldingen in widgets en links in tekst zijn klikbaar. Bij het aanklikken van deze onderdelen verandert de achtergrond naar lichtblauw, vol. Bij het loslaten van de klikbare ruimte verandert de kleur terug naar de originele staat. Bij hyperlinks wordt een onderlijning toegevoegd.

Pagina 13 van 28


4.2

Lettertypes  Paginatitel: RijksoverheidSansWeb, bold, 26px, #154273  Header 1: RijksoverheidSansWeb, regular, 28px, #154273 of #007bc7  Header 2: RijksoverheidSansWeb, regular, 20px, #154273  Broodtekst: RijksoverheidSansWeb, regular, 15px, #154273 Zie de rijkshuisstijlsite voor uitleg en voorbeelden van het webfont: http://www.rijkshuisstijl.nl/bouwstenen/lettertype/webfonts

Afbeelding: Voorbeeldweergave van diverse lettertypes 4.3

Logo Het rijkslogo is een samenstelling van een beeldmerk en een woordmerk. De horizontale zone (boundingbox) om het logo blijft vrij van grafische en typografisch elementen voor een optimale communicatiekracht en leesbaarheid. Een vormrelatie tussen het logo en het onderliggend beeld moet voorkomen worden. Het rijkslogo staat op zichzelf, gecentreerd tegen de bovenkant van de pagina. Bij RWS apps wordt het logo alleen getoond in het app icoon (zie 4.4) en splash screen (zie 4.3.1.) en hoeft niet voor te komen op andere schermen. Op een witte ondergrond gebruik je logokleur 2, op een gekleurde ondergrond gebruik je logokleur 1. Zie: http://www.rijkshuisstijl.nl/bouwstenen/kleur/logokleuren Voor meer informatie over het gebruik van het logo, zie: http://www.rijkshuisstijl.nl/huisstijldragers/algemene-online-richtlijnen/logo-enheader Logo smartphone Omdat het scherm van een smartphone vaak te klein is voor het standaard logo (beeld- en woordmerk), verdwijnt het woordmerk in de smartphone variant. Het woordmerk komt hier onder het rijkslint/beeldmerk te staan.

Pagina 14 van 28


De uitgangspunten zijn:  Het rijkslint/beeldmerk blijft op dezelfde positie staan (midden bovenin) en behoudt dezelfde hoogte als op een tablet.  Het woordmerk naast het logo verdwijnt.  Onder het logo wordt de afstand van 1 blokje opengehouden (het lint bestaat in totaal uit 3 blokjes qua hoogte).  Linksonder het logo (met inachtneming dus van 1 blokje ruimte onder het logo) plaatsen we het woordmerk ‘Rijkswaterstaat’. De tekst ‘Ministerie van Infrastructuur en milieu’ verdwijnt.  Deze tekst is gewoon zwart en behoudt het standaard lettertype (zie bestanden apps).  De titel van de app kan in principe gewoon op dezelfde positie blijven staan (in het midden van het inlog/splashscherm, net zoals op de tablet). De kleur van de titel is zwart of hemelsblauw. 4.3.1

Splash screen Een splash screen communiceert het merk Rijkswaterstaat tijdens opstarten van de applicatie. Het splash screen is een wit scherm met aan de bovenzijde van het scherm altijd het RWS logo (kleur 2) dat getoond wordt bij het starten/laden van de applicatie. Onder het logo (en in het geval van smartphone: onder het woordmerk) wordt de naam van de applicatie getoond met een animatie (loader) om aan te geven dat de applicatie geladen wordt. Het logo wordt op een smartphone getoond zoals beschreven onder het kopje ‘logo smartphone’ bij 4.3. Wanneer de applicatie geladen is animeert dit logo omhoog waarna het splash screen verdwijnt en het eerste scherm van de applicatie getoond wordt.

Pagina 15 van 28


Afbeelding: Splash screen tablet app

Pagina 16 van 28


Afbeelding: Splash screen smartphone app (excl. woordmerk logo, deze dient te worden toegevoegd volgens 4.3) Afmeting en positie logo (bovenaan):  Breedte: 44 pixels  Smartphone hoogte: 66 pixels  Tablet hoogte: 77 pixels  Locatie: Tegen de bovenkant van het scherm, horizontaal gecentreerd Afmeting en positie blokje (onderaan):  Breedte: 44 pixels  Hoogte: 22 pixels  Locatie: tegen de onderkant van het scherm, horizontaal gecentreerd Loader:  Locatie: Horizontaal en verticaal gecentreerd

Pagina 17 van 28


Naam van de applicatie:  Lettertype: Paginatitel  Locatie: Horizontaal gecentreerd, 40 pixels boven de loader Bezig met openen:  Lettertype: Verdana, 11 px, #767676 (Richtlijnen Online versie 1.3)  Locatie: Horizontaal gecentreerd, 40 pixels boven de loader 4.4

Icoongebruik Uiteraard is het uitgangspunt dat iconen voor zich spreken en een tekstuele toevoeging overbodig is. Vaak blijkt de betekenis van iconen vanzelf uit de context waarbinnen deze toegepast worden. Soms is een tekstuele toevoeging echter onvermijdelijk. In de grafische vormgeving van de iconen gebruiken we de voor Rijkswaterstaat herkenbare iconen uit de rijkshuisstijlgids als deze voldoen aan de wens: http://www.rijkshuisstijl.nl/bouwstenen/beeld/iconen-en-pictogrammen Voor de overige iconen gebruiken we zoveel mogelijk de geldende ontwerprichtlijnen die per platform gelden. Iconen hebben een fijne/dunne lijnstructuur met doorzichtige achtergrond. De lijnkleur sluit aan op de kleurstelling uit paragraaf 4.1. Enkele voorbeelden:

Bekijk de verschillende richtlijnen per besturingssysteem:  iOS: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptu al/MobileHIG/Iconography.html  Android: https://developer.android.com/design/style/iconography.html Een pointer gebruiken we voor het weergeven van het aantal reacties. Het aantal reacties staat naast de pointer en niet erin. Voor de pointer gebruiken we de Rijkswaterstaatkleur geel.

Pointer: Heb je deze pointer nodig, neem dan contact op met de Corporate Dienst Corporate Communicatie Online en Huisstijl. Datzelfde geldt als je een icoon wilt gebruiken dat niet voorkomt in de rijkshuisstijlgids of de standaard iconen per besturingssysteem.

Pagina 18 van 28


4.4.1

App icoon interne apps Het app icoon heeft standaard bovenaan in het midden het logo staan met alleen het rijkslint/beeldmerk, en dus zonder woordmerk. Daarbij zijn er voor interne apps twee opties voor de overige invulling: 1. Een lichtblauwe achtergrond (kleur #8fcae7) met daarin letters met de titel van de app. Als er een tekst/titel ingezet moet worden, dient dat in de Rijksoverheid Sans Web gedaan te worden (roman of bold). 2. Een lichtblauwe achtergrond (kleur #8fcae7) gecombineerd met een van de iconen uit de rijkshuisstijl die past bij de betreffende app. Zie de rijkshuisstijliconen op: http://www.rijkshuisstijl.nl/bouwstenen/beeld/iconen-enpictogrammen/overzicht-iconen

Voorbeelden van mogelijke app iconen intern Noot voor de ontwerper: het rijkslint/beeldmerk heeft een donkerdere kleur (blauw 1) als deze op een gekleurde ondergrond staat als dat deze op een witte ondergrond staat (blauw 2).

Pagina 19 van 28


4.4.2

App icoon externe apps Het app icoon heeft standaard bovenaan in het midden het logo staan met alleen het rijkslint/beeldmerk, en dus zonder woordmerk. Daarbij zijn er voor externe apps twee opties voor de overige invulling: 1. Een gele achtergrond (kleur #f9e11e) met daarin letters met de titel van de app. Als er een tekst/titel ingezet moet worden, dient dat in de RijksoverheidSansWeb gedaan te worden (roman of bold). 2. Een gele achtergrond (kleur #f9e11e) gecombineerd met een van de iconen uit de rijkshuisstijl die past bij de betreffende app. Zie de rijkshuisstijliconen op: http://www.rijkshuisstijl.nl/bouwstenen/beeld/iconen-enpictogrammen/overzicht-iconen

Voorbeelden van mogelijke app iconen extern Noot voor de ontwerper: het rijkslint/beeldmerk heeft een donkerdere kleur (blauw 1) als deze op een gekleurde ondergrond staat als dat deze op een witte ondergrond staat (blauw 2).

Pagina 20 van 28


4.5

Formulieren Formulieren worden getoond in de pagina lay-out contentpagina, enkele kolom. Indien een formulier erg lang wordt en meerdere pagina’s beslaat, is het wenselijk om deze in kleinere stappen op te knippen om de invoer te vergemakkelijken en de kans op fouten te verkleinen.

Mogelijke voorbeelden van formulieren 4.5.1

Formuliervalidaties Validaties kunnen zowel real-time (invoer) als bij verzenden (submit) plaatsvinden. Daarbij verschijnt een doorschijnend berichtblok over het formulier met de foutmelding.

Validatie bij formulier 4.5.2

Bevestiging na verzenden van formulieren Na het succesvol verzenden van een formulier moet de gebruiker een bevestiging getoond worden.

4.6

Animaties en het laden van content Aan de gebruiker wordt duidelijk gemaakt wanneer data wordt opgehaald (zowel synchroon als asynchroon) aan de hand van een animatie (loader).

Voorbeelden van loaders Pagina 21 van 28


4.7

Pagina flow en transities Paginatransities dragen bij aan inzichtelijk maken van de structuur bij het navigeren door de applicatie door een gebruiker. Voor interne applicaties gaan we uit van een eenvoudige navigatie structuur. Paginatypes: 1. Home 2. Subpagina 3. Popup/layover

Pagina types

4.7.1

Taak openen

Pagina-transitie 4.7.2

Van hoofdscherm naar subpagina binnen een taak Navigatie naar subpagina door middel van een link/button en navigatie terug door middel van een button.

Pagina-flow

Pagina 22 van 28



Pop-up binnen een taak Openen en sluiten van popup/lay-over (bijv. context menu).

Pagina-flow


Navigeren door gerelateerde subpagina’s Gebruik van horizontale swipe om te navigeren door gerelateerde subpagina’s (bijv. nieuwsartikelen).

Pagina-flow

Pagina 23 van 28


Pagina-transitie

Pagina-transitie

Pagina 24 van 28


5

Dashboard, widgets en taken

Als een appconcept verschillende veel voorkomende taken bevat, kunnen deze op één plaats gebundeld worden. Dit noemen we het dashboard. Op het dashboard geven widgets informatie en direct toegang tot verschillende veelvoorkomende functies van een taak. 5.1

Dashboard Lay-out Het dashboard biedt in de landscape weergave van een tablet een tegelweergave van twee rijen en drie kolommen waarin de widgets geplaatst kunnen worden. Het gehanteerde paginatype is een overzichtpagina met drie kolommen.

Voorbeeldweergave dashboard met daarin 5 widgets

Pagina 25 van 28


5.2

Widgets Mogelijke voorbeelden van widgets:

5.2.1

Formaten Widgets kunnen in twee formaten voorkomen:  Volledige kolomhoogte, 308x615px  Halve kolomhoogte, 308x293px

5.2.2

Opmaak Titel:  Hoogte: 33px  Lijn onder: 2px, Intranet blauw vol (#a8cad2)  Tekst: Header 1

Voorbeeld van widget met titel en twee regels Content: De inhoud van een widget kan per taak verschillen. De beschrijvingen hieronder kunnen nog verder aangevuld worden.

Pagina 26 van 28


Regel:  Regelhoogte: 65px of 130px  Boven- en ondermarge: 10px (content daartussen staat verticaal gecentreerd)  Lijn onder: 2px, Intranet blauw vol (#a8cad2)  Lijn op laatste regel: #e6ecf4  Itemtekst: Header 2  Itemsubtekst: Broodtekst 5.3

Taken

5.3.1

Navigatie Voor mobiele applicaties is het wenselijk om een overzichtelijke en eenvoudige navigatie structuur te bieden, maximaal drie niveaus diep. Over het algemeen zal een taak dus de volgende paginastructuur hebben: 1. Home 2. Subpagina 3. Popup/layover

Algemene paginastructuur Met de voorgestelde paginastructuur kan de navigatie ook eenvoudig blijven. Hiervoor hanteren we linksboven in de header van het scherm een link terug.

Link terug, linksboven in de header 5.3.2

Opmaak voorbeelden Afhankelijk van de taak, zullen er verschillende opmaakvariaties nodig zijn. Met als voorwaarde dat ze passen binnen de hoofdindeling en basiselementen zoals die beschreven staan in hoofdstuk 4 en 5 respectievelijk. Daarnaast zal zoveel mogelijk de ontwerpstandaarden van het betreffende platform gehanteerd moeten worden.

Pagina 27 van 28


Verschillende opmaakvariaties

Pagina 28 van 28

Stijlgids mobiele apps Rijkswaterstaat

Recommend Documents