Voor deze SRP cursus 'front-end 101' heb ik gekozen voor een case waarbij je een to-do list moest maken. Ik heb deze gekozen omdat hier alle aspecten van front-end naar voren komen. Voor mij is dit zeker een goede opfriscursus geweest, omdat ik al bijna een jaar lang niets aan front-end heb gedaan en ik hier met html/css en ook javascript moest werken.
Staat live op Deze pagina
Om mijn to-do list gebruiksvriendelijk te maken heb ik gebruik gemaakt van 4 principes uit het 'Principles of User Interface design' artikel.
Gebruikers zijn het meest op hun gemak wanneer ze het gevoel hebben volledig de controle te hebben. Dit is ook zo bij deze case, omdat de gebruiker zelf bepaald wat de taken zijn, hoeveel het er zijn en welke hij verwijderd.
In het kort: hou het simpel. De gebruiker ziet alleen het nodige om de to-do lijst te gebruiken. Geen ingewikkelde poespas, maar directe manipulatie. Alles wat de gebruiker zou moeten doen is direct zichtbaar, namelijk het benoemen, toevoegen, verwijderen en resetten van de taken en meer niet.
De titel beschrijft eigenlijk perfect wat hiermee bedoeld wordt, namelijk help je gebruiker met de volgende stap. Bij de to-do list is het simpel. De gebruiker voert een taak in en gelijk bij het invoeren wordt de toevoegknop groen en klikbaar, dus de volgende stap staat klaar. Na het toevoegen wordt er een verwijder icoon getoond bij het hoveren over de taak om de eventuele taak te kunnen afronden. De laatste stap is alles resetten, maar dat is niet percé nodig.
De eerste ervaring is alles bepalend. Begrijpt de gebruiker gelijk de bedoeling en werking? In dit geval is het vrij simpel. De gebruiker ziet de titel, beschrijving en het invoerveld met toevoegknoppen. Er is geen andere mogelijkheid dan taken toevoegen.