Een gangbare maaltijd bestaat uit drie gerechten, waaronder respectievelijk een voorgerecht, een hoofdgerecht en nagerecht. Als hoofdinterfacemetafoor is gekozen voor een driedeling van het maaltijdscherm, waarin het middelste scherm het hoofdgerecht representeert, het linker scherm het voorgerecht en het rechterscherm het nagerecht. Voordat toelichting over deze schermen wordt gegeven, wordt eerst de instructie ‘laag’ besproken. Deze transparante laag voorziet een gebruiker van instructies over interactiegebieden en technieken.
3.6.1 Instructie laag voor interactietechnieken
Een transparante laag (zie figuur 23) geeft met behulp van pijlen, iconen en tekst aan welke gebieden interactief zijn in het scherm waarin het hoofdgerecht gekozen kan worden. Deze instructies verschijnen eenmalig en verdwijnen wanneer een gebruiker ergens op het scherm tapt. Dit scherm vraagt de meeste interactie van een gebruiker en is daarom als basis genomen voor de eenmalige instructies verwerkt in de applicatie zelf. Het is de bedoeling dat de instructies tevens leidend zijn voor interactie in andere schermen, ook al staan bepaalde knoppen bijvoorbeeld op andere plekken of wordt in plaats van de titelbalk met behulp van knoppen genavigeerd.
Pagina | 35
3.6.2 Dagkeuze
Nadat de instructie laag verdwijnt, dient de gebruiker een dag te selecteren (zie figuur 24). De tekst ‘Selecteer een dag’ pulseert van zwart naar transparant in een lus van 1 seconde om de aandacht van gebruikers te trekken om actie te ondernemen. Een pijl onder deze tekst wijst naar de dag-icoon als verduidelijking. Dit icoon is in dit stadium licht transparant en eronder staan de tekens ‘---‘ om aan te geven dat op dat moment nog geen dag is geselecteerd. Wanneer een gebruiker hierop tapt, opent een licht transparante donkere laag waarop knoppen te zien zijn voor de keuze van een dag (zie figuur 25). De tekst ‘Selecteer dag’ krijgt een witte kleur om afleesbaar te zijn en de dag icoon verliest de transparantie om duidelijk te maken dat deze functie is geactiveerd. Grijze knoppen met doorgehaalde tekst, geven aan dat deze niet functioneel zijn. Knoppen kleuren grijs afhankelijk van de systeemdatum en tijd. Als een gebruiker toch een dergelijke knop tapt, zal deze drie keer snel pulseren en verschijnt een bericht. Deze weergave inclusief interactie en berichtmelding, verdient de voorkeur boven het simpel weglaten van dag knoppen zonder functie. Het weglaten van knoppen zonder een gebruiker daarvan op de hoogte te stellen kan verwarring veroorzaken. De huidige dag heeft twee extra indicatoren, namelijk een gele rand om de knop en een vergroot lettertype. Het geheel is gekaderd door een witte gestreepte lijn, waarboven de weekaanduiding staat. De weekaanduiding is extra informatie en daarom niet in alle schermen zichtbaar om de gebruiker te beschermen tegen een overbelasting van informatie.
3.6.3 De schermen voorgerecht, hoofdgerecht en nagerecht
Op deze pagina is een overzicht gegeven van de schermen voorgerecht, hoofdgerecht en nagerecht, te zien in respectievelijk de figuren 26, 27 en 28. Met uitzondering van de dagkeuze en de knop ‘Bestelling plaatsen’ is de interactie en weergave van informatie op deze schermen in principe hetzelfde. In elk scherm kunnen geselecteerde gerechten gewist worden met de knop ‘Wis …gerecht’. Na de keuze van de dag en gerechten voor één of twee personen dient de gebruiker in het scherm van het hoofdgerecht de bestelling te plaatsen. De reden dat deze knop niet in de andere twee schermen staat, is om de gebruiker aan te moedigen zich zeker te stellen dat alle keuzes voor alle gerechten zijn bekeken en gemaakt.
Pagina | 37
3.7 Het bestelscherm
Aan de hand van een groen vinkje of rood streepje bij de dag aanduiding ziet de gebruiker of een bestelling is geplaatst (zie figuur 29). De vinkjes en streepjes zijn indicatoren die een bepaalde status aangeven. De kleuren rood en groen helpen deze status te verduidelijken. De dagen waarop geen bestelling meer gedaan kan worden zijn minder zichtbaar gemaakt. Informatie die bij elkaar hoort is gescheiden via stippellijnen en het geheel is tevens omkaderd door een stippellijn. De weekaanduiding wordt hier als nuttige informatie wel weer vertoond. Elke geplaatste bestelling kan gewijzigd worden middels een eigen knop ‘Wijzig bestelling’. Wanneer de gebruiker de details van een bestelling wil controleren kan dat via de knop ‘Details bestelling’, maar ook door naar rechts te swipen in de titelbalk. In dit scherm (zie figuur 30) is in twee tabellen voor elke dag te zien wat precies besteld is. Beide tabellen zijn voorzien van een label, waarvan het eerste label de naam van de ingelogde gebruiker is. De achtergrondkleur van rijen is om en om wit en lichtgrijs om duidelijk onderscheid tussen rijen te creëren. Als voor elke dag een bestelling is geplaatst, is geen ruimte beschikbaar voor een knop om terug te gaan naar het besteloverzicht. Daarom kan de gebruiker ook in dit scherm naar links (terug) navigeren via de titelbalk. Wanneer de gebruiker de bestelling verzendt, verschijnt een laad balk en vervolgens een bericht of de bestelling succesvol is verzonden of niet (afhankelijk van netwerkconnectie). Dat deze knop de actie ‘Bestelling verzenden’ vertegenwoordigt, wordt duidelijk gemaakt met de labels aan beide zijden van de winkelwagen icoon met wijzende pijl eronder.