Waar moet je op letten bij je ontwerp van interactieve website of software?

Het ontwerpen van een interactieve website of softwaretool vraagt om een duidelijk UX Design. Een logische inrichting die voor helderheid, consistentie en duidelijkheid zorgt. Enkele tips waar je op moet letten.

Consistentie is het sleutelwoord. Elke UX designer zal hier op hameren. Ontwikkel je een website waar je je klanten op in laat loggen let er dan op dat het duidelijk en eenvoudig werkt. Dat geldt ook voor software ontwikkeling. Ga aan de slag met een specialist die na denkt over het gebruik van een tool, een zogenaamde UX designer, en laat die samenwerken met de front end designer en de developers. De UX designer denkt na over de flow, over het geraamte en de grafische designer of de front end developer kijkt naar de buitenkant. Een succesvolle website of software tool is zo succesvol als de zwakste schakel. Zodra je moet gaan uitleggen hoe iets moet ben je te laat en klopt er iets niet. De meeste mensen lezen geen handleiding. En als ze dat wel doen dan zijn ze de inhoud weer vergeten als ze een tijdje niet inloggen. Daarom moet je er voor zorgen dat het eenvoudig is, duidelijk is.

Waar moet je op letten?

  • Consistentie
  • Direct toegang tot help/uitleg
  • Duidelijk kleurgebruik
  • Heldere meldingen

Consistentie

Met consistentie bedoelen we dat je de schermen duidelijk volgens een vaste opzet bouwt. Denk bv aan de save en cancel knoppen. Plaats die altijd duidelijk zichtbaar op dezelfde positie. Laat gebruikers niet zoeken naar de knoppen. We zien steeds meer dat je helemaal niet meer hoeft op te slaan. Dat is makkelijk, maar toch zien we dat mensen dat ongemakkelijk vinden. Vooral als er gebruik wordt gemaakt van verschillende functies waarbij je de ene keer wel moet opslaan en de andere keer weer niet. In dat geval kan je er beter voor kiezen altijd de save knop te tonen. Wat je kan doen is de save knop van kleur laten veranderen als er een wijziging op de pagina gemaakt wordt. Zo zien mensen direct dat ze even moeten opslaan. Mix het in ieder geval niet. Of nooit een save knop, of altijd een save knop en plaats die knop altijd op dezelfde plek.

Direct toegang tot help

Wat we ook nogal eens zien is dat er een handige helpfunctie is ingebouwd in een tool, maar dat je daar altijd eerst in moet zoeken. Waarom toon je niet direct gerelateerde helpartikelen als je op help op een bepaalde pagina klikt. Mensen zullen hoogstwaarschijnlijk hulp nodig hebben voor die specifieke functie. Uiteraard kan je dan alsnog naar wat anders zoeken, maar het is wel makkelijk als je je hulp direct aan biedt. Gebruik tekst, video’s en duidelijke screenrecording uitleg.

Duidelijk kleurgebruik

Als je met kleuren werkt dan is het goed om ook daarin consistent te zijn. Gebruik rood voor een waarschuwing, groen voor opslaan of wat dan ook, maar mix het niet. Gebruik voor belangrijke knoppen duidelijk contrasterende kleuren. Het moet er mooi uit zien, maar uiteindelijk draait het om gebruiksvriendelijkheid. Dus een mooie kleur die perfect past, maar die totaal niet opvalt is niet wat je wil doen voor bv de save knop. Ga hier bewust mee om.

Heldere meldingen

Je kent ze wel die foutmeldingen als je iets niet goed hebt gedaan of als je iets vergeten bent en je totaal geen idee hebt wat ze bedoelen. Super frustrerend. Heb je een formulier met verplichte velden en iemand vergeet een veld in te vullen laat dan de browser direct naar dat veld springen en/of geef dat veld een duidelijk gemarkeerde kleur zodat mensen direct zien wat ze vergeten zijn. Omschrijf een foutmelding niet door te vertellen wat er fout is gegaan, maar vertel wat ze moeten doen. Dus niet: Upload CSV bestand is niet goed. Maar wel: Je CSV bestand is een kommagescheiden bestand, wijzig deze naar een puntkomma gescheiden bestand en probeer het opnieuw. Download hier een voorbeeldbestand. Door er direct een voorbeeldbestand bij te doen help je echt op een zorgzame manier.

Klikt iemand op afsluiten en vergeten ze op te slaan, geef dan een waarschuwing en toon direct twee knoppen in die waarschuwing. Weet je zeker dat je het scherm wil verlaten. Je wijzigingen zijn nog niet bewaard. Knop Save, Knop Doorgaan. Duidelijk, makkelijk en direct toegankelijk.

Succes met ontwikkelen!