Waarom deze user interface van Triodos Bank beter kan
Wat je ziet op het scherm van je laptop, tablet of telefoon? Dat noem je ook wel een user interface (UI). Een goede UI helpt je om een actie prettig en met zo min mogelijk gedoe uit te voeren. Die actie kan van alles zijn: een product bestellen, een artikel lezen, een reactie geven, bedenk het maar.
Elke dag zie ik goede en minder goede voorbeelden van een UI. Natuurlijk vind ik daar wat van. Als UX-writer wil ik namelijk dat iedere UI prettig is. Met teksten (microcopy) die voor de gebruiker begrijpelijk en bruikbaar zijn.
Eens in de zoveel tijd vind ik het leuk om een UI af te pellen. Laagje voor laagje, om te laten zien wat goed is en wat beter kan. Op schermen die ik zelf tegenkom, privé en in mijn werk. Ter lering en misschien een beetje vermaak.
Lees je mee? 👇
UI afpellen: nieuwe rekening openen
Deze keer pel ik een UI af van Triodos Bank. Ik wilde namelijk een rekening openen. Het scherm laat zien dat de bank wil weten waar het geld op deze nieuwe rekening vandaan komt. Van salaris uit loondienst tot inkomsten uit onderneming of eenmanszaak. En van uitkering en pensioen tot studiefinanciering of geen inkomsten.
Goed om te weten waar ik ben
Ik zie bovenaan een statusbalk of ‘progress indicator’ staan. Handig, want dat geeft een idee van hoe ver je bent in het proces. Verwachtingsmanagement is altijd fijn. Wat nog beter kan? Het percentage of de huidige stap erbij vermelden.
Een beetje meer info is soms wel zo prettig
Rechts naast de statusbalk staat een tooltip: het cirkeltje met een i’tje erin. Als je hierop klikt, lees je waarom de bank deze vraag moet stellen. Heel goed, want transparantie is bij geldzaken erg belangrijk. Wat nog beter kan? Voeg de tekst ‘Waarom deze vraag?’ toe aan het icoon, zodat het duidelijker is dat je hierop kunt klikken en wat je dan te lezen krijgt. Dit kost meer ruimte, maar onder de ‘Verder’-knop heb je daar genoeg van.
Opties zetten me op het verkeerde been
Ik kan meerdere opties selecteren, maar visueel ziet het er niet zo uit. Je ziet namelijk ronde vormen (‘radio buttons’). Deze gebruik je normaal als je de gebruiker maar 1 optie wilt laten selecteren. Voor meerdere keuzes gebruik je vierkantjes (‘checkboxes’). Dat is een bekende conventie. Ik word hier dus op het verkeerde been gezet.
Geen idee hoe ik naar de vorige vraag kan
Ik kan verder naar de volgende vraag. Da’s fijn, maar wat als ik terug wil? Als ik een tikfout maak of per ongeluk de verkeerde optie selecteer, dan wil ik terug naar de vorige vraag. Hoe ik dat hier moet doen? Geen idee. Geef dus in ieder geval 2 opties, bijvoorbeeld ‘Vorige’ en ‘Volgende’.
Ik moet kunnen pauzeren
Een rekening openen is een proces van meerdere stappen. Er kan altijd iets tussenkomen. Kan ik dan mijn aanvraag even pauzeren, om later af te maken? Daar lijkt het niet op. Wat ik later ontdekte, is dat ik via de tooltip de aanvraag kan pauzeren of annuleren. Waarom staat deze optie niet gewoon onder de button? Logische plek en ruimte zat.
Vertel me zo goed mogelijk wat ik fout heb gedaan
Wat je niet in het originele scherm ziet, maar wat ik wel gecheckt heb (en er nu even bij heb gezet): er zijn foutmeldingen. Bijvoorbeeld als je geen optie hebt geselecteerd. De melding is ‘Selecteer een optie’. Op zich niet verkeerd, maar je kunt meerdere opties selecteren. Ik zou er dus ‘Kies minstens één optie’ van maken.
Zo, weer een UI afgepeld
Vond je dit nuttig? Mooi! Laat het me weten via LinkedIn of door mij te mailen. Dat geldt natuurlijk ook voor vragen en andere opmerkingen. Trouwens, deel dit artikel vooral met je eigen netwerk. Vind ik leuk. 🙂
