DenHaag.nl
Nu ook geschikt voor mobiele devices.
Een prettige gebruikerservaring op zowel mobiel als tablet.
Briefing
Na ons ontwerp voor Buurthuis van de Toekomst werd UNITiD uit een selectie van
bureau’s uitgekozen door gemeente Den Haag om hun website aan te passen voor touch
devices. Dat hebben we gedaan door een responsive website te maken, die zich
automatisch aanpast aan het schermformaat. Dit moet er voor zorgen dat de website
meer bezocht wordt op mobiele devices en dat deze ook prettig in gebruik is op een
touchscreen.
Define
Wie bezoekt DenHaag.nl?
Door een aantal persona's - fictieve gebruikers - te maken samen met
de gemeente hebben we de doelgroep van DenHaag.nl in kaart gebracht. Wat voor
mensen bezoeken DenHaag.nl en voor welke doeleinden? Belangrijk was om een zo'n
gevarieerd mogelijk beeld te krijgen van de bezoeker, want de doelgroep voor
DenHaag.nl is erg breed.
Ontwerprichtlijnen als houvast voor het ontwerp.
Aan de hand van brainstormsessies met de gemeente Den Haag en bestaande statistieken
en kennis hebben we samen een aantal ontwerprichtlijnen opgesteld:
-
Links zijn te selecteren met je vingertop
-
Zoekfunctie prominent boveneen de pagina
-
Snel navigeren zonder alle pagina's te laden
-
Maximaal 4 niveaus in navigatie
Een website die er goed uit ziet op ieder schermformaat.
Als uitgangspunt hebben we de website op 4 verschillende layouts ontworpen: S, M,
L, en XL (van smartphone tot diverse tablet formaten). Voor iedere layout hebben
we een grid ontworpen dat makkelijk in te delen is in kolommen. Tussen de verschillende
layouts wordt de website altijd optimaal getoond.
Van smartphone tot tablet landscape: altijd een mooie website
Design
Makkelijk en overzichtelijk navigeren door een grote website.
DenHaag.nl bevat een uitgebreide navigatie en in de overzichtspagina staan ook nog
allerlei links. Hoe maak je zo'n complex menu overzichtelijk en prettig in gebruik?
Om de snelheid te optimaliseren hebben we het menu zo ontworpen dat er niet bij elke
tap een nieuwe pagina laadt. Daarnaast schuift het menu vanaf links in, zodat je altijd
blijft zien op welke pagina je bent terwijl je navigeert.
Hoe goed werkt ons ontwerp?
1 dag, 8 respondenten en 3 opdrachten om antwoord te krijgen op deze vraag.
Die dag hebben we ter plekke een usability lab opgezet en respondenten geworven in het
stadhuis van Den Haag. Door middel van dit gebruikersonderzoek hebben we met prototypes
getest of ons ontwerp goed te begrijpen was. Doel van het onderzoek was een verbeterslag
op het ontwerp door te kunnen voeren. We gaven de respondenten 3 opdrachten:
-
Vind de openingstijden van Zwembad Overbosch
-
Vraag op de website een parkeervergunning aan
-
Meld een voetbaltoernooi aan in het stadsdeel Escamp
Met al deze feedback hebben we weer genoeg stof om ons ontwerp nog beter te maken!
Een nieuwe website, maar nog steeds DenHaag.nl
Voor de mobiele website hebben wij veel nieuwe elementen ontworpen, zodat de site optimaal
aangepast is aan het gebruik op een touchscreen. Maar net zo belangrijk is dat als je
de mobiele website bezoekt, je de pagina nog steeds herkent als DenHaag.nl. De vormgeving
is ook rustig gehouden omdat er erg veel content op de pagina is. Met zoveel content is
het belangrijk dat de hiërarchie duidelijk blijft.
Componenten ontwerpen
DenHaag.nl bevat veel pagina's, dus hebben we er voor gekozen om niet alle pagina’s
los te ontwerpen. De site is op te delen in een aantal hoofd templates, zoals een
home, overzichts- en detailpagina. Verder werken we met losse componenten, zoals
een kalender, een formulier, etc. Met deze componenten en de templates kun je iedere
pagina bouwen van de website. Deze manier van werken is erg overzichtelijk en
efficiënt.
Eén van de puzzelstukjes waaruit DenHaag.nl is opgebouwd.
Develop
Tijdens de ontwikkeling zijn wij nauw betrokken gebleven om het design zo goed
mogelijk te implementeren. Samen met diverse partijen hebben we de website
regelmatig en uitvoerig getest. Voor de ontwikkeling waren er diverse partijen
aangesteld: Aubergine IT voor front-end development, Kodision voor de TriplEforms
formulieren, Incentro die de back-end heeft gedaan en medewerkers bij de gemeente
die aan de Touch Interface hebben gewerkt en getest.
Samen met ons zorgen zij voor een mooie website die fijn en soepel werkt!
