Op zoek naar ons logo?

Voor een witte achtergrond: PNG EPS Logo landscape
Voor een zwarte achtergrond: PNG EPS
Download alle logo's
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

workshop photo
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:

note of design guidelines
  1. Links zijn te selecteren met je vingertop
  2. Zoekfunctie prominent boveneen de pagina
  3. Snel navigeren zonder alle pagina's te laden
  4. 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

devices

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.

slider images

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:

note user test content
  1. Vind de openingstijden van Zwembad Overbosch
  2. Vraag op de website een parkeervergunning aan
  3. Meld een voetbaltoernooi aan in het stadsdeel Escamp

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.

    • home page
    • menu
    • detail page
    • form
    • home page
    • menu
    • detail page
    • form
    • home page
    • menu
    • detail page
    • form
    • home page
    • menu
    • detail page
    • form

    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.

    component of Den Haag website

    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!

    © UNITiD 2017  Algemene voorwaarden | English | Event kalender