Achter de schermen: Maak je eindgebruiker niet blind

Eind 2010 introduceerden we binnen Moneybird de nieuwe huisstijl editor. Het doel was om gebruikers de mogelijkheid te geven hun huisstijl te laten doorvoeren op facturen en offertes. Na veel opties overwogen te hebben, kozen we voor een aanpak met een beperkt aantal instellingen en de mogelijkheid om via eigen CSS de opmaak verder aan te passen. Tot nu toe is dit zeer succesvol gebleken, maar de editor had één groot mankement: de navigatie.

Omdat de huisstijl editor zo’n specifieke taak heeft, besloten we om de standaard navigatie van Moneybird te verbergen. De huisstijl editor bevat een preview van een factuur, wijzigingen worden gemaakt via een dropdown menu en gelijk weergegeven in de preview. Het dropdown menu om de wijzigingen te maken kreeg dezelfde opmaak als de normale navigatie binnen een Moneybird account. Deze keuze maakten we voornamelijk voor een consistente uitstraling.

De navigatie in de facturatie software

Factureren opmaken met de huisstijl editor

In de weken na de lancering kregen we vele e-mails en telefoontjes. Gebruikers hadden geen problemen met het openen van de huisstijl editor, maar konden vervolgens niets. Wanneer we verwezen naar “de blauwe balk bovenaan de pagina” kregen we vaak de reactie te horen dat er alleen maar “Factuur, offerte en bekijk PDF voorbeeld” bovenaan de pagina stond. De blauwe balk werd dus volledig over het hoofd gezien, omdat de gebruiker deze functie daar niet zocht.

Sinds deze week hebben we een compleet nieuwe navigatie in de huisstijl editor. De navigatie heeft een nieuwe positie in het scherm en heeft een andere kleur gekregen. Daarnaast valt de navigatie bij het scrollen over de preview. We verwachten dat deze navigatie meer opvalt en we nu minder mensen de weg hoeven te wijzen.

Facturen maken verbeterd door nieuwe navigatie

De wijze les in dit verhaal: eindgebruikers zijn blind voor de hoofdnavigatie van je web applicatie. Houd deze daarom consistent. Wanneer je de navigatie echt wilt veranderen moet je de navigatie visueel ook anders maken.

Deel dit artikel op je favoriete social netwerk