Reparatie: resultaat

Het resultaat van de repa van AVP is hier te vinden: http://i307982.iris.fhict.nl/AVP_Repa/

Zet je geluid aan!

NB: Om te app makkelijker testbaar te maken bestaat een minuut momenteel uit 3 seconden.

Vierde iteratie

Schets

De iteratie begon zoals de vorige iteraties weer met een schets. Voor deze iteratie had ik besloten de fruitmachine wat meer diepte te geven. Verder moest er in deze iteratie een stuk meer Interaction Design aan te pas komen. Dit heb ik gedaan door de gebruiker op verschillende manieren te informeren over de staat van de applicatie.

Illustrator Design

Het design van de applicatie was veruit het lastigste van de app. De app moest een 3dimensionale uitstraling hebben en eruitzien als een goedkope app, hierdoor heb ik gekozen om eigenlijk alleen maar gradients te gebruiken.

Bovenop de fruitmachine zit een reeks lampjes. Deze spelen later een zeer grote rol in het Interaction Design aangezien dat een hele goede manier was om de gebruiker in te lichten over de huidige staat van de applicatie.

De blauwe en groene knoppen (waar later Roll en een Play icoon op komen te staan) zijn de enige twee dingen waar de gebruiker op kan drukken. De knoppen hebben 4 staten, aan, ingedrukt, uit (alleen lamp uit maar wel in te drukken) en disabled.

Realisatie

De app heeft 4 fases.

Fase 0:

De gebuiker heeft nog op geen enkele knop gedrukt, alleen de Roll knop staat aan. De lampjes aan de bovenkant knipperen allemaal om aan te geven dat de app al wel functioneel is.

Fase 1:

De gebruiker heeft op de Roll knop gedrukt. Tijdens deze fase is zijn de Roll en Play knoppen disabled. De lampen aan de bovenkant “waven” en gaan van links naar rechts om aan te geven dat de app bezig is. De rollen draaien en worden geblurd tijdens het draaien om de snelheid beter aan te duiden.

Fase 2:

De machine is uitgerold en de bovenlampjes knipperen weer tegelijk om aan te geven dat de app functioneel is. Op de displays zijn de resultaten van de rollen gezet. NB: Om te app makkelijker testbaar te maken bestaat een minuut momenteel uit 3 seconden. De gebruiker kan nu uit 2 dingen kiezen, als hij het niet eens is met het resultaat van de machine kan hij opnieuw rollen. Als hij het er wel mee eens is kan hij op de groene play knop drukken, hierdoor gaat de app naar de volgende fase.

Fase 3:

De magnetron is gestart. De animatie van de lampjes aan de bovenkant is geïnspireerd door de “batterij oplaad animatie”. Ze geven aan hoever de magnetron is met opwarmen (dat % van de lampjes blijft altijd aan) en de rest van de lampjes vullen op om aan te geven hoeveel er nog te gaan is en om aan te geven dat de app ook echt bezig is. Als de tijd op 0 staat gaat de app naar de volgende fase.

Fase 4:

Jackpot! De magnetron is klaar met opwarmen en als wekkergeluid wordt het jackpot geluid afgespeeld voor ongeveer 10 seconden. De lampjes aan de bovenkant knipperen weer en blijven nog knipperen zelfs nadat het alarm afgaat. Ze gaan pas uit als de gebruiker de magnetron opendoet maar dat is niet echt te realiseren.

Geluid

In deze iteratie heb ik ook geprototypet met geluid. Het indrukken van de knoppen geeft een hoorbare feedback, er speelt een geluid af als de rollen draaien en als ze vast komen te staan en ten slotte wordt het jackpotgeluid als alarm afgespeeld.

Inspiratie

Reparatie: App benchmarking

In dit stukje zal ik een aantal goede apps uiteenzetten in verschillende aspecten om zo inspiratie op te doen voor mijn AVP reparatie.

Wie betaalt wat

Deze app vind ik fijn werken aangezien de app precies weet wat zijn gebruikers zijn en wat ze willen. Het is heel makkelijk om hiermee aan te geven wie wat betaalt binnen een studentenhuis en het is ook makkelijk om een overzicht te geven. Datainvoer is niet veel werk, de overzichten zijn duidelijk, het ontwerp is samenhangend en het is duidelijk wat er in de app te doen is. De app heeft geen innovatieve onderdelen maar is simpelweg goed uitgevoerd.

Pushbullet

Pushbullet is een app om links of bestanden van je desktop naar je telefoon te sturen en vice versa. De app is zeer minimalistisch ingericht en heeft een flat design wat zeer goed samenloopt met de werking van de app. Het enige wat er namelijk nodig is om een overzicht te hebben van dingen die naar het apparaat gestuurd zijn en een mogelijkheid om dingen naar het andere apparaat te sturen. Pushbullets weet dit zeer simpel weer te geven zodat het grootste deel van het scherm gebruikt kan worden voor de nuttige informatie.

IFTTT

IFTTT: If this than that. Een Android Applicatie om vrijwel alles te scripten. Als je thuiskomt zet je het geluid van je mobiel harder, zet je WiFi aan en upload je al je foto’s gelijk naar Drive. De app kan gebruikt worden om vrijwel elke denkbare sitautie te scripten. Ook deze app heeft goed rekening met de user gehouden. Het doel van de app is om het de gebruiker makkelijker te maken, de homepage is daar precies goed voor en geeft suggesties aan de hand van de gebruiker en er is ook een mogelijkheid om “Recipes” aan en uit te zetten. Het design ziet er wat slordiger uit en de icoontjes, omdat dit allemaal user generated content is, zijn geforceerd.

Derde iteratie

In de derde iteratie is het rad vervangen door een slotmachine. Dit is eigenlijk pas de eerste iteratie waar ik echt op het design ging letten, bij de vorige iteraties wist ik toch al dat het concept overhoop ging worden gehaald en daarbij leek mij een design-focus niet nuttig.

Er zijn binnen deze iteratie verschillende mini iteraties bij het design geweest.

 

Deze mini-iteraties zijn er gekomen aangezien ik de vorige 2 iteraties niet gebruik maakte van een gokautomaat. Na het feedback van klasgenoten en genegeerd te worden door de moderators van /r/shittyfoodporn is er een illustrator ontwerp gekomen van de linkerschets. Deze is dan ook uitgewerkt met HTML CSS jQuery en het resultaat is hier te vinden:

http://i307982.iris.fhict.nl/AVP/#

 

Tweede iteratie

 

In mijn eerste iteratie was mijn app “niet crappy genoeg”. Ik ben teruggegaan naar de tekentafel en heb geprobeerd de app crappier te maken. Deze keer is het niet meer te besturen welk vermogen of welke duratie de magnetron draait, het is allemaal random. Je laat een rad draaien en aan de hand daarvan wordt je temperatuur bepaald. Wat ik nog als extra functionaliteit in de paper prototype heb gevoegd is een random eten generator. Deze pakt diverse producten uit verschillende voedselgroepen en geeft de persoon die niet kan koken lekker slechte suggesties.

 

Eerste iteratie – Feedback John

“De app is niet shitty genoeg.” De shittyness van het concept komt niet terug in het design en feel van de applicatie.

Eerste iteratie

Eerste Iteratie – Feedback Rutger

Op de landingspage drukt Rutger op de magnetron knop.  Hij heeft niet gelijk een idee wat de sliders doen in dit prototype, maar het blijkt na 5 seconden wel dat de slider waar een zandloper naast staat de tijdslider voorstelt.

Rutger vindt het niet logisch dat de tijd tijdelijk verschijnt als je aan de tijdslider komt, maar weet niet of het nodig is om de tijd überhaupt te zien is, hij heeft immers toch geen idee hoelang alles moet. Hij heeft het liefst een “Random” knop.

De start knop ziet er niet uit als een start knop en hij vind het logischer als deze aan de rechterkant staat. De home knop moet niet onderaan staan.

In het “bezig” scherm valt het hem niet op dat er onderin “Please Stop” staat.

Als het alarm afgaat maakt Rutger gelijk de magnetron open en zet hij niet eerst het alarm af. Zodra hij zijn maaltijd in zijn handen heeft komt hij eigenlijk niet meer aan zijn telefoon.

Functionaliteit