De opdracht was om een website te ontwerpen voor een klasgenoot op basis van zijn of haar probleem. Het ontwerp van de website moest uitgewerkt worden in AdobeXD en voldoen aan de 8 golden rules van Ben Shneiderman. Dit ontwerp moest uiteindelijk omgezet worden naar HTML en CSS inclusief het gebruik van CSS grid of flexbox.
De oplossing voor het probleem van mijn klasgenoot is een website geworden waarbij mensen opzoek kunnen gaan naar een persoon om hun hond uit te laten. Dit was de eerste website die ik zelf ontworpen en gebouwd heb in AdobeXD en HTML/CSS. Mijn grote inspiratiebron voor het ontwerp is de website: hondjeuitlaten.nl geweest. Ik heb deze website volledig geanalyseerd en bepaalde elementen verwerkt in dit ontwerp. Ook is er veel gebruik gemaakt van visuals tegenover tekst. De reden hiervoor is om bij de gebruiker een bepaald gevoel op te roepen en ze enthousiast te maken over honden en het uitlaten hiervan. Verder heb ik de 8 golden rules van Ben Shneiderman zoveel mogelijk toegepast.
1. Strive for consistency. Deze regel gaat over het gebruik van constante termen, kleuren en lettertypes. Ik heb dit in mijn ontwerp verwerkt door op elk formaat (tablet, web en mobile) gelijke kleuren te gebruiken. Een voorbeeld is de zoekbalk, op elk formaat heeft deze dezelfde kleur en dezelfde plek.
2. Enable frequent users to use shortcuts. Dit houdt in dat ervaren gebruikers minder tijd nodig hebben voor een bepaalde actie. In mijn ontwerp heb ik dit verwerkt door bij het inloggen de gegevens te onthouden zodat er alleen maar op inloggen gedrukt hoeft te worden.
3. Offer informative feedback. Deze regel betekent dat de gebruiker weet waar hij of zij in het proces is. Ik heb dit in mijn ontwerp verwerkt door boven in de pagina te laten zien waar je bent in de site en via welke pagina’s je bent gegaan om daar te komen. De stappen die de gebruiker al gezet heeft zijn dikgedrukt en de stappen die de gebruiker nog moet maken zijn lichtgekleurd.
4. Design dialogue to yield closure. De knop zegt letterlijk inloggen. Gebruikers weten dus dat dit de laatste stap is en dat wanneer ze op de knop drukken, ze ingelogd zijn.
5. Offer simple error handling. Om te voorkomen dat mensen de fout maken om de algemene voorwaarden niet te accepteren, heb ik de algemene voorwaarden vlak boven de button gezet waarmee je het account aanmaakt. Mochten mensen het vergeten, dan wordt de button rood en komt er een pop-up die vertelt wat er is misgegaan en hoe dit opgelost kan worden.
6. Permit easy reversal of action. Hier gaat over hoeveel stappen gebruikers moeten doen om hun acties of fouten ongedaan te maken. Een voorbeeld uit mijn ontwerp is wanneer de gebruiker al een account heeft en per ongeluk op de “Account Maken” button klikt. Dan is er een knop die hem automatisch naar de juiste pagina brengt. Andersom is dit net zo, wanneer een nieuwe gebruiker op inloggen drukt zonder dat deze een account heeft is er een knop die hem naar de juiste pagina brengt.
7. Support internal locus of control. Hierbij gaat het over of de gebruiker het gevoel heeft dat hij de controle heeft over de interface en hoe veilig hij zich voelt op de website. Ik heb dit in mijn ontwerp verwerkt door gebruikers zelf de mogelijkheid te geven om de instellingen van hun profiel te wijzigen. Zo kunnen ze bijvoorbeeld aanpassen wie hun profiel mag bekijken. Dit geeft hen een veilig gevoel omdat niet iedereen hun profiel kan bekijken.
8. Reduce short-term memory load. Hierbij gaat het over dat gebruikers geen acties moeten uitvoeren waarbij ze dingen lang moeten onthouden. In mijn ontwerp hoeven gebruikers weinig te onthouden. De gebruikers kunnen zelf instellen dat hun wachtwoord en gebruikersnaam onthouden wordt. Verder kunnen gebruikers hun voorkeuren aangeven, op basis hiervan worden er personen zichtbaar. Nadat ze deze voorkeuren aangegeven hebben verschijnen deze boven de resultaten in beeld, met de mogelijkheid deze weer aan te passen. Zo hoeven ze niet na te denken over wat voor eisen ze hadden wanneer er niet de juiste persoon tussen zit.