Case: User interface en animaties voor Mannekenpis

In opdracht van NTF hebben wij de user interface en animaties voor horecaonderneming Mannekenpis ontworpen. NTF ontwerpt en ontwikkelt soft- en hardware zoals kassasystemen, bestelapps, -sites en -zuilen voor horecaondernemingen.  Horecaonderneming Mannekepis is een klant van NTF met verse Vlaamse friet die te vinden is in verschillende Nederlandse en Vlaamse steden. Van NTF kregen wij de opdracht om een gebruiksvriendelijke touchscreen interface te ontwerpen voor alle vestigingen van Mannekenpis. Belangrijke punten hierbij waren het in acht nemen van de huisstijl, en voeden van het systeem met animerende triggers en feedback. Wat dit precies inhoudt? Ik leg het je uit.

In de onderstaande video vind je enkele ontworpen animaties voor Mannekenpis. Een voorbeeld van een animatie met feedback voor de touchscreen interface van Mannekenpis is de pinpas die in het betaalautomaat glijdt. Deze animatie maakt duidelijk aan de gebruiker dat de betaling kan beginnen door de pinpas - juist ja, je raadt het al - in de gleuf te steken. Maar ook animaties zoals een vinkje of frietjes die in de frietzak vallen voorzien de klant van feedback over de verrichtte handelingen of status van hun bestelling.

Aangezien mensen visueel gedreven zijn, groeit de impact van animaties. Deze ontwikkeling zie je steeds vaker terug in apps en websites, maar ook in computerprogramma’s die veel mensen dagelijks gebruiken. In veel systemen voorzien animaties de gebruiker van feedback. Deze feedback geeft de gebruiker het gevoel interactie te hebben met elementen op het scherm en toont het resultaat van de interactie. Denk hierbij aan een dichte envelop als je een nieuwe email hebt, of een wegvliegende envelop als je mail wordt verstuurd.

Animaties kunnen ook interessant zijn voor webpagina’s waar het iets langer duurt om de pagina te laden. Wanneer de gebruiker wacht en niet weet wat er aan de hand is zal hij sneller de neiging hebben om de website weg te klikken. Door middel van een animatie die toont dat de pagina laadt krijgt de bezoeker feedback en kan je het wegklikken van je website door de bezoeker voorkomen. Dit soort animaties zijn dus erg functioneel voor de gebruiker, en daarmee ook voor de beheerder van het systeem.

De animaties voor Mannekenpis zijn aangeleverd als JSON files. Dit maakt implementatie in de applicatie eenvoudig voor de developers van NTF. De animaties bestaan volledig uit vectoren en zijn schaalbaar, waardoor graphics op de hoogste kwaliteit worden weer gegeven op alle formaten schermen. De bestanden die wij aanleveren zijn bijna 600% kleiner zijn in bestandsgrootte dan bijvoorbeeld een animated gif.

Er zijn ontzettend veel varianten animaties en manieren om ze succesvol in te zetten. Ik denk graag met je mee over de voordelen van het gebruik van animaties voor jouw middelen.