Graphic Design Iteratie

Ik heb me vooral verdiept in de apps die ik bekeken heb. Wat maakt deze apps nou zo goed, waarom werken ze zo fijn, wat doen ze anders als dat ik dat doe? Wat me meteen opviel was dat alles strak was, geen storingen of afleidingen. En alles is vooral meteen duidelijk. Dit heb ik geprobeerd door te voeren bij mijn nieuwe iteratie.

microoven

Ik heb voor een strakkere indeling gekozen die ook alles juist simpeler maakt. De verschillende onderdelen worden duidelijk gemaakt door de scheidingslijnen. Je ziet duidelijk wat de onderdelen zijn. De klok is hierdoor wat kleiner geworden en de menu navigatie is ook wat kleiner geworden. Je hebt je navigatie van magnetron en oven bovenin het scherm. Daarna heb je de klok die ik nu verwerkt heb tot knop. Als je hier overheen hovert veranderd de kleur van de border van de klok zodat het nog extra aandacht geeft dat het een knop is. Hierna heb je het onderdeel waar je je watt of celcius kunt instellen (afhankelijk van magnetron of oven). Ook op deze sliders zit er nu een hover effect om duidelijker te maken dat je deze knoppen kan veranderen. Dit gebeurd ook bij de sliders van de tijdinstelling. Verder heb ik de kleuren strak en monotoon gemaakt die passen bij de functionaliteit van de app. Voor de magnetron blauw (cool, snel, simpel) en voor de oven rood (warm, vuur).

De links voor de nieuwe en oude iteratie zijn:

Nieuw:      http://i239196.iris.fhict.nl/Combi/

Oud:          http://i239196.iris.fhict.nl/Combi_oud/

App Benchmarking

Photo 21-01-15 00 31 12 Photo 21-01-15 00 32 44 Photo 21-01-15 18 27 11 Photo 23-01-15 10 07 37

Calculator                  Compass                    Flipboard                   Tinder

Photo 23-01-15 12 59 04 Photo 23-01-15 13 02 55 Photo 23-01-15 10 07 57 Photo 23-01-15 13 06 53

8tracks                       20 Life                         OkCupid                     RunKeeper

Calculator

Ontzettende simpel en plat ontwerp. Het is meteen duidelijk wat je er mee kan. Je hebt alles in zicht wat je nodig hebt.

Compass

Dit beeld spreekt voor mij woorden. Alleen de basis die nodig is om de gyroscoop in te stellen zodat je je kompas kan gebruiken. De illustratie die je ziet laat meteen zien wat er van je verwacht wordt.

Flipboard

Het simpele van flipboard. Ik vind vooral dit scherm erg goed omdat je duidelijk ziet wat de verschillen zijn qua selectie knoppen boven en onder. Bovenin selecteer je verschillende schermen die binnen dit onderdeel van de app behoren. Onderaan is het menu om tussen verschillende onderdelen te navigeren binnen de app.

Tinder

In de app van Tinder is alles heel clean neergezet. Alleen functionaliteiten waar het om draait. De navigatie van deze app heb ik zelf als inspiratie gebruikt. Bovenaan kun je tussen schermen wisselen in de app. De scheidingslijnen om onderdelen op het scherm te delen heb ik ook gebruikt als inpiratie voor mijn nieuwe iteratie.

8tracks

Het onderverdelen van blokken vind ik erg fijn werken in 8tracks. Je hebt duidelijk door wat de verschillende onderdelen zijn in de app.

20 Life

Simpel en strak. Zo omschrijf je deze app. Het is een specifieke app speciaal gemaakt voor het kaartspel “Magic the Gathering”. Hierbij moet je leven van jezelf en je tegenstander bijhouden. Deze app heeft alles zo simpel gemaakt dat het fijn is om te gebruiken maar toch nog steeds alles kan wat je wilt. Ook gebruikt het de kleuren goed om de verschillende onderdelen te illustreren (die in het spel ook van toepassing zijn). Dit heb ik als inspiratie gebruikt om de verschillen te illustreren tussen een magnetron en een oven.

OkCupid

Bij deze app vond ik het goed gevonden hoe ze mijn profielfoto als knop hebben geillustreerd. Door mijn profielfoto als circel te snijden en hier een border omheen te zetten lijkt het meteen op een knop. Bij mijn nieuwe iteratie heb ik dit gebruikt om mijn klok duidelijker als knop over te laten komen.

RunKeeper

Het scherm is duidelijk en helder onderverdeeld door de scheidingslijnen. je weet hierdoor welke onderdelen er staan in plaats van dat alles 1 geheel lijkt.

Week 8

Mijn oplevering. Ik heb mijn Working prototype uitgewerkt en aan de hand van mijn laatste tests en feedback nog simpeler gemaakt. Bij deze uitwerking zit ook geluid. Het is minimaal en erg standaard. Alleen een alarm toon als de tijd verstreken is, zodat de gebruiker weet dat hij naar de Combimagnetron moet om de volgende stap te ondernemen. Met het voorwarmen van de oven betekent dit het gerecht erin zetten en hem opnieuw instellen. Met de magnetron betekent dit het gerecht eruit halen en eten achter je pc of waar je ook mee bezig was zodat je weer verder kunt.

http://i239196.iris.fhict.nl/Combi_test/index.html

Dit is de eerste uitwerking van mijn Working prototype waar ik nog met meerdere gebruikers getest heb. Hieruit bleek dat ik 1 optie uit mijn Mock-Up iteratie niet had toegepast die de gebruikers wel fijner zouden vinden. De knoppen op het instel tijd scherm hadden hier nog dezelfde kleur die niet overeen kwam met de cijfers. Ook kreeg ik feedback dat mijn begin scherm aan de onderkant nogal leeg was. Hier heb ik het logo laten terug komen om het scherm gelijkwaardig gevuld over te laten komen.

Hier is mijn uiteindelijke versie :

http://i239196.iris.fhict.nl/Combi/index.html

Week 6-7

Ik heb hier mijn Paperprototype omgezet naar schetsen in Illustrator. Nadat deze waren uitgewerkt heb ik ze in een Mock-Up app geplaatst.

combi-loadcombi-selectcombi-clock-zerocombi-clock

 

http://invis.io/NT1S6IAV4

Hier kun je de Mock-Up zien en testen. Dit heb ik wederom met meerdere gebruikers getest. Ik kreeg voornamelijk feedback op dat de knoppen van mijn instel tijd scherm verkeerd stonden. De gebruikers vonden het niet logisch dat links de knop stond om vooruit te gaan.

Week 4-5

Ik heb mijn basisschetsen af van mijn post its en heb besloten om het uit te werken tot een Paperprototype. Tijdens mijn eerste Paperprototype heb ik mij voornamelijk geconcentreert op het uitwerken van mijn schetsen van mijn Post its.

Paperprototyping

Met deze Paperprototype heb ik meerdere tests gedaan met verschillende gebruikers uit mijn doelgroep. Het grootste probleem was het instellen van de tijd. De helft van de gebruikers had het wel door hoe je de tijd in moest stellen en snapte de gedachte erachter ook. De andere helft had het de eerste keer niet door maar als men de test nog een keer deed met een ander scenario wisten ze wel hoe het moest. Het was dus puur een geval van een hele simpele learning curve. Ik heb toen wel een aanpassing gedaan aan mijn klok voor mijn begin scherm.

Photo 12-01-15 14 35 03

Week 2-3

Ik heb me tijdens deze periode bezig gehouden met mijn concept. Ook heb ik besloten dat ik maar 20% van mijn tijd ga besteden aan mijn concept. Voor interactie en userexperience trek ik beide 40% uit.

Omdat ik mijn doelgroep al heb vastgesteld en heb besloten om alleen de basis elementen van een magnetron en oven te gebruiken om zo min mogelijk tot last te zijn voor mijn doelgroep moest ik uitzoeken wat dit precies inhield. Uiteindelijk bleek dat de hoeveelheid watt/celcius belangrijk was, en de hoeveelheid tijd dat hij aan moest staan van belang was. Hiervoor moest ik wel een opzet maken hoe ik dit ging weergeven op een manier die zo simpel mogelijk was zonder tekst/cijfers te gebruiken. Ik ben hier begonnen met simpele schetsen op post its.

Post its Photo 12-01-15 13 23 37 Photo 12-01-15 13 23 47

Week 0-1

Deze twee weken heb ik aan mijn concept gewerkt. De opdracht was dat we een magnetron app moesten maken voor een magnetron die geen knoppen aan de buitenkant had en alleen maar te bedienen was met een mobiele app.

Ik heb toen onderzoek gedaan naar magnetrons en gekeken voor welke doelgroep ik mijn app wilde maken. Mijn doel voor deze periode was om een app te maken die zo simpel was alles alleen maar deed wat het moest doen. Ik heb hier besloten om een app voor een Combimagnetron te maken. Dit betekent dus voor een magnetron en een oven.

Mijn doelgroep zijn studenten en werkende full-timers die eigenlijk met andere dingen bezig zijn dan met eten koken. Ze willen gewoon snel hun maaltijd opwarmen en dan weer door met studeren of werken of waar ze ook mee bezig zijn (fappen). Het probleem waar deze mensen tegen aan lopen is vooral dat ze iets aanzetten in de magnetron of in de oven en daarna er niet meer naar omkijken. Zo kan het zijn dat je je oven aanzet om voor te verwarmen maar dat hij dan een uur staat te ronken voordat je bedenkt dat je er ook iets in moet stoppen.

full-timer @ work

Het concept is dus om een zo simpel mogelijke app te maken. Maar de uitdaging is wel om zo min mogelijk tekst/cijfers te gebruiken in de hele app.