Deze mobiele app is gemaakt nadat Studentenvereniging NSDH aangaf een vernieuwing in haar systeem te willen krijgen. Op dat moment werkten ze namelijk met papieren lijsten waarop ze turfden hoeveel drank mensen bestelden. In overleg zijn we tot de conclusie gekomen dat een mobiele app een goede oplossing zou kunnen bieden zodat de barmensen snel en eenvoudig aan kunnen geven wat er besteld is. Een bijkomend voordeel is dat een digitaal systeem aan een database kan worden aangesloten en informatie zo ook makkelijk weergegeven kan worden.
Echter is het maken van een app voor Android, iPhone en Windows zo’n groot project dat het mij beter leek om een mobiele website te maken die voor touch is geoptimaliseerd. De website is op dit moment nog niet in gebruik, maar al wel veelvuldig getest door leden van de studentenvereniging.
Bekijk de code van dit project in de view source tool
Een simpel aantal klikken volstaat om aan te geven dat iemand 5 bier heeft besteld
Een ingebouwde zoekfunctie om snel leden te kunnen vinden
Een popup om meer te kunnen doorvoeren
Een log waarin acties ongedaan gemaakt kunnen worden
Het proces
Om tot een goed resultaat te komen heb ik een proces doorlopen zoals ik op mijn opleiding (Bachelor Communication Multimedia Design) gewend ben. Als eerst heb ik barmensen geïnterviewd en bijgehouden wat zij belangrijk vonden. Uit de interviews kwam naar voren dat een aantal dingen erg belangrijk zijn voor ze:
- Snel kunnen aangeven hoeveel bier of wijn iemand drinkt,
- Snel kunnen zoeken naar leden,
- De interface moet goed werken op mobiel omdat er niet veel tijd is om iets opnieuw in te voeren
Aan de hand van deze informatie heb ik een eerste wireframe gemaakt.
Dit concept is voorgelegd aan degenen die over het bar-onderdeel van de studentenvereniging gingen. Ze waren erg enthousiast en wilden dat ik direct aan de slag ging om dit uit te werken. Echter gaven ze aan dat het handig zou zijn om het mogelijk te maken om een lid toe te voegen in de app, dus eerst heb ik het bestaande wireframe aangepast. Ook leek het ons beter om icoontjes te gebruiken in plaats van tekst en een donker thema te gebruiken om zo geen “lichtbak” te krijgen in de sociëteit.
Hi-fi prototype
Nadat dit ontwerp met goedkeuring was ontvangen ben ik begonnen met het uitwerken van het systeem. Wat kleine wijzigingen zijn doorgevoerd in het uiterlijk, maar uiteindelijk leek het uitgewerkte hi-fi prototype erg veel op het wireframe.
Touch-geoptimaliseerd
Aangezien het echter een mobiele app moest worden/simuleren was het nodig om het ook voor touch te optimaliseren. Dit bleek een leerweg te zijn, aangezien er ontzettend veel JavaScript-bibliotheken zijn die allemaal hun eigen plus- en minpunten hebben. Ik heb jQuery Mobile geprobeerd en ook jQuery UI Touchpunch. Ook zijn er vanzelfsprekend een aantal dingen aangepast in de viewport zodat er een vaste breedte is vastgesteld en er niet kan worden ingezoomd. Ook selecteren van onderdelen is uitgezet door middel van CSS.
Nog meer tests
Nadat het hi-fi prototype uitgewerkt was heb ik het getest met een 6-tal mensen. Dit leverde weer nieuwe inzichten op die me veel verder hebben geholpen. De belangrijkste onderdelen die uit de tests kwamen:
- “Waar staan mijn wijzigingen?”
- “Hoe kan ik de wijzigingen ongedaan maken?”
- Het zoeken naar leden werkte toen niet optimaal, dus daarvoor moest een vervangend systeem komen
Wat ik gedaan heb met de inzichten
Deze inzichten lieten mij zien dat er iets meer nodig was dan alleen een ledenlijst en de mogelijkheid om leden toe te voegen en te zoeken. Er moest een functionaliteit bijkomen: het bijhouden van een geschiedenis met de mogelijkheid die geschiedenis ongedaan te maken. De oplossing voor dit probleem was lastiger gevonden dan gedacht. Er waren namelijk een aantal onderdelen die van belang waren:
- De volledige naam moet zichtbaar (kunnen) zijn
- Het moet er goed uitzien bij zowel 1 drankje als bij 10
- De ‘Ongedaan maken’-knop moet niet wegvallen, maar ook niet te makkelijk (per ongeluk) worden aangeklikt
Een wireframe van de geschiedenis-functionaliteit
De uitgewerkte geschiedenis-functionaliteit
De oplossing
De oplossing was om Dragdealer in te schakelen om een scrollbare lijst te maken. Door schaduwen is duidelijk gemaakt dat er gescrollt kan worden en de oplossing is erg intuïtief op deze manier. ‘Ongedaan maken’ is een grote knop geworden, maar op het moment dat erop geklikt wordt verschijnt er een element dat aangeeft dat er van 3 tot 0 wordt geteld. Als er binnen die tijd nog een keer wordt geklikt wordt het geschiedenis-item ongedaan gemaakt. Zo niet, dan niet.
De uitwerking
Op het moment van schrijven is de uitwerking nog in volle gang en wordt er nagedacht over het maken van een overzichtspagina waar de uitgaven van alle leden op worden weergegeven. Ook moet voor de quaestor van de vereniging, de secretaris, overzichtelijk worden weergegeven wat ieder lid mag betalen. Dat is echter voor de toekomst. Kijkt u over een paar maanden nog eens hier!
Bekijk de code van dit project in de view source tool
