Naar een mobile first en gebruiksvriendelijke website: volledige traject

Stap 1: naar een responsive website - mei tot juli 2016

De eerste maanden van het project gingen we voor een 'quick win'. We maakten de huidige website en alle subsites responsive. Deze fase is op 19 juli 2016 live gegaan en afgewerkt.

Responsive?  
'Responsive' betekent dat navigatie, inhoudselementen, tekstbreedte zich aanpassen aan de schermbreedte van het toestel waarmee de bezoeker surft. Op een kleiner scherm staan navigatiebuttons bv onder elkaar, of gaan ze inklappen. Inhoudselementen zoals tekstelementen, call-to-actions ... schuiven onder elkaar i.p.v. in verschillende kolommen naast elkaar te staan.

Tussenstap
In deze eerste fase gebeurden geen grote aanpassingen aan de website: informatie-architectuur, inhoudselementen, sjablonen ... bleven zoals ze zijn, maar positioneren zich op kleine schermen anders dan op groot scherm. Pas in een latere fase gaan we de website verder optimaliseren, maar daartoe onderwerpen we de website eerst aan een grondig gebruikersonderzoek.

Belangrijk! De webredacteurs zullen in hun redactie vanaf nu rekening moeten houden met het responsive gedrag van de website.

Stap 2: gebruikersonderzoek - augustus 2016 tot augustus 2017

We onderwierpen de website aan een grondig gebruikersonderzoek, zowel voor desktop als voor mobiel gebruik. De website stond dan meer dan 4 jaar online. Het vorige gebruikersonderzoek dateerde nog van 6 jaar geleden, en werd uitgevoerd op de oude ua.ac.be website. Hoog tijd dus om de gebruiksvriendelijkheid van de website te testen, de toptaken nog eens scherp te stellen, klikgedrag te analyseren, onze webinhoud te laten screenen...  

Dit gebruikersonderzoek spreidden we over enkele maanden, zodat we een gedetailleerd beeld kregen op de verschillende taken.

Op het programma stonden:

  • Screening van de Google Analytics
  • HotJar recordings: heatmaps van het klikgedrag op de website
  • Online enquêtes voor toptakenonderzoek
  • Interviews met live gebruikerstests
  • Content audit review: screening van de inhoudskwaliteit van de webpagina's (op basis van enkele objectieve parameters)
  • Anysurfer audit
  • Algemene tevredenheidsenquête (CCI)

Op basis van deze bevindingen werden een roadmap en wireframes opgesteld om de website verder te optimaliseren. Zowel voor desktop als voor mobiel bezoek. 

De optimalisatie van de website zal op verschillende niveaus plaatsvinden:

  • designaanpassingen
  • aanpassingen aan de informatie-architectuur
  • aanpassingen aan de sjablonen
  • aanpassingen aan content-elementen
  • redactierichtlijnen voor de webredacteurs
  • ....

Belangrijk hierbij: het zal voornamelijk gaan over centrale aanpassingen aan sjablonen, stylesheets, design ... met minimale workload voor de decentrale webredacteurs. We maken immers geen nieuwe website, we gaan de bestaande website stap voor stap optimaliseren. Sommige aanpassingen zullen wel effect hebben op het redactiewerk.

Stap 3: nieuwe aanbesteding

Najaar 2017 - voorjaar 2018.

Stap 4: Van wireframe naar mobile first redesign, optimaliseren zoekfunctie en navigatie + eerste snelle redesign, technische voorbereidingen

juni 2018 - voorjaar 2019:

  • afwerken van gebruikerstesten,
  • optimaliseren (vernieuwen) van de zoekfunctie,
  • start van technische aanpassingen achter de schermen, zodat database en presentatielaag uit elkaar kunnen getrokken worden,
  • op punt zetten van een verbeterde navigatiestructuur op basis van gebruikerstesten,
  • core content workshops met kerneditors van de belangrijkste toptaken,
  • afwerken wireframes en designvoorstellen op basis van core content workshops,
  • eerste, snelle redesign en toepassing van geoptimaliseerde navigatiestructuur,
  • optimaliseren webredactie op basis van gebruikersonderzoek.

april 2019 - ...

  • optimaliseren navigatiestructuur en inhoud Engelstalige website (ongoing)
  • afwerken definitieve designs voor mobile redesign volgens customer journey van toptaken (ongoing)
  • afwerken technische aanpassingen achter de schermen, zodat database en presentatielaag uit elkaar kunnen getrokken worden (verwachte einddatum: maart 2020),
  • lanceren testsite (verwacht: april 2020),
  • opleiding webeditors: roadshow - handleiding - ... (april - juni 2020)
  • omschakelen website naar mobile first redesign (verwacht: begin zomer 2020).

Snelle redesign en verbeterde navigatiestructuur - 9 en 10 april 2019

Opgelet: we lanceren geen volledig vernieuwde website. We werken stap voor stap! Deze stap zal enkel effect hebben op de centrale luiken van de websiteniet op de subsites van opleidingen, projecten, congressen, onderzoeksgroepen, centra ...

Navigatiestructuur

In het najaar van 2018 stelden we op basis van 4 testrondes een verbeterde navigatiestructuur op punt, waarbij het slaagpercentage steeg van 52% naar 74%.

Deze navigatiestructuur vertrekt vanuit 4 grote 'hubs'

  • Studeren
  • Onderzoek
  • Studentenleven
  • Over UAntwerpen

Met daarbij ook een utility navigation:

  • Contact
  • Bibliotheek
  • Nieuws en kalender
  • Vacatures
  • Alumni
  • Login (studentenportaal / personeelsportaal / …)

Bekijk de volledige navigatieboom voor de centrale luiken (pdf)

Snelle redesign van centrale headers

Deze verbeterde navigatiestructuur kunnen we niet toepassen binnen het design van de huidige homepageheader en centrale pagina's. Daarom kiezen we ervoor om op die pagina's een snelle redesign van de headers door te voeren:

  • Homepageheader op desktop:

homepage

  • Homepageheader op mobile:

homepage

  • Gewone pagina op desktop:

gewone pagina