Appsperge. Jonique Raemakers ICT & Media Design 24 juni Vind je dichtstbijzijnde asperge verkooppunt. Deze pagina is bewust leeg gelaten

Appsperge Jonique Raemakers ICT & Media Design 24 juni 2015

Vind je dichtstbijzijnde asperge verkooppunt

Deze pagina is bewust leeg gelaten

STAGEVERSLAG VOOR FONTYS HOGESCHOOL ICT Gegevens studente JECA Jonique Raemakers 2154183 ICT & Media Design Stageperiode datum van 9-2-15 t/m 24-06-15 (95 dagen)

Gegevens bedrijf Exitable Strategisch Interactief Afdeling design Weert José Luis Almagro - designer

Gegevens docentbegeleider Wouter Lancee

Gegevens verslag Appsperge 24-06-2015

Getekend voor gezien door bedrijfsbegeleid(st)er Datum: 24-06-2015

De bedrijfsbegeleider

VOORWOORD In dit verslag omschrijf ik het proces dat ik heb doorlopen in de periodes 9 en 10 van mijn studie, HBO ICT & Media Design op de Fontys Hogescholen te Eindhoven. In deze periode heb ik stage gelopen bij Exitable, een strategisch interactief webdevelopment en webdesign bureau te Weert. Ik heb een opdracht gekregen waar ik tijdens mijn stage zeker 3 dagen in de week mee bezig ben geweest. De overige dagen heb ik meegeholpen aan andere kleinere opdrachten. Deze stageopdracht is het maken van een re-design voor Appsperge, een app die zoekt naar de dichtstbijzijnde asperge verkooppunten. Ik mocht bij deze opdracht als projectmanager functioneren en had twee projectleden, twee stagiaires van mbo-ict, die ik kon aansturen en begeleiden.

Graag zou ik mijn bedrijfsbegeleider José Luis Almagro willen bedanken voor zijn hulp en ondersteuning. Door deze begeleiding heb ik uiteindelijk een product kunnen neerzetten waar ik trots op ben. Tot slot gaat mijn dank uit naar mijn docentbegeleider, Wouter Lancee. Hij heeft mijn proces begeleid door feedback te geven op documenten en advies te geven over het bedrijfsleven.

INHOUDSOPGAVE

SAMENVATTING

Samenvatting Verklarende woordenlijst 1. Inleiding 2. Het bedrijf 2.1 Bedrijfsomschrijving 2.2 Bedrijfscultuur 2.3 Doelstelling van het bedrijf 2.4 De organisatie 3. De opdracht 3.1 Probleemstelling 3.2 Doelstelling 3.3 Realisatie opdracht 3.3.1 Onderzoek 3.3.1.1 Doelgroeponderzoek 3.3.1.1.1 Analytische gegevens 3.3.1.1.2 Resultaten enquete 3.3.1.2 Concept analyse 3.3.2 Plan van aanpak 3.3.3 Design onderzoek 3.3.3.1 Design principes 3.3.3.2 Design inspiraties 3.3.3.3 Design analyse huidige design 3.3.4 Wireframes en prototypes 3.3.4.1 Resultaten enquête 3.3.4.2 Proces wireframes 3.3.5 Design 3.3.6 Front end 3.3.6.1 Programma’s en frameworks 3.3.6.2 Code 3.3.6.3 Testen 4. Conclusies en aanbevelingen Evaluatie Literatuurlijst Bijlagen

Van 9 februari tot 24 juni is gewerkt aan het project Appsperge. Dit is een app die gemaakt is voor op de desktop en op de mobiel. Dit project is uitgevoerd bij Exitable, een strategisch webdesign bedrijf in Weert. Appsperge biedt momenteel geen meerwaarde aan de huidige gebruiker om de app te blijven gebruiken. Tevens komen er geen nieuwe downloads bij. De opdracht is om Appsperge een re-design te geven, wat dit probleem zal oplossen. Er is een doelgroeponderzoek opgezet waaruit bleek dat vooral vaste klanten van 40 jaar en ouder de asperge verkooppunten bezoeken. Deze klanten komen met de fiets of met de auto. Om nieuwe klanten te werven voor Appsperge en om huidige gebruikers te behouden zijn er bepaalde functies toegevoegd op de app. Zo kunnen vaste klanten reviews plaatsen en een rating geven aan een verkooppunt. Boeren zullen de app blijven gebruiken om zo hoog mogelijk te eindigen in de lijst en nieuwe klanten zullen benaderd worden met posters langs de weg. Na dit plan van aanpak is er onderzoek gedaan naar een aantal design principes, die vervolgens gebruikt zijn om goede wireframes en prototypes te maken. Ook het doelgroeponderzoek en de enquêtes zijn gebruikt voor het opzetten van de wireframes. De app is meerdere malen getest met prototypes en aangepast aan de hand van de feedback. Na de wireframes is het design gemaakt. Ook hier zijn de design principes en het onderzoek gebruikt voor de verantwoording. Uiteindelijk is de front end gemaakt en getest met de W3Validator en Browserstack.

1 2 3 4 4 4 5 6 8 8 8 8 8 8 10 12 17 21 22 22 26 28 30 30 31 38 48 48 50 50 52 53 54 55

Het project is afgerond binnen de tijd die ervoor gegeven is. In het uiteindelijk product zijn een aantal onderzoeksresultaten niet teruggekomen, zoals het sorteren op prijs en soort product. Per verkooppunt wordt niet aangegeven welke andere producten er nog meer verkocht worden. Ook sluit het logo niet genoeg aan bij het nieuwe ontwerp. In de werkwijze zijn er ook onderdelen die beter konden. Zo zijn de interviews via een enquête afgelegd, terwijl dit persoonlijk veel betrouwbaarder zou zijn geweest. De collega’s van Exitable hebben gefigureerd als testpersonen. Het zou beter zijn geweest om de echte doelgroep te laten testen. Deze resultaten kunnen afwijken van de resultaten die er zouden zijn geweest als er met de doelgroep was getest.

1

VERKLARENDE WOORDENLIJST Bounce rate Representeert het percentage bezoekers die de pagina bezoeken en verlaten in plaats van het bezoeken van andere pagina’s op de site.

Overlay Een laag bovenop een pagina. Dit kan een laag zijn in de vorm van tekst, kleur, afbeeldingen of andere elementen die voorkomen op een website.

Framework Een structuur opgedeeld in lagen als richtlijn hoe bepaalde programma’s of websites gebouwd zouden moeten worden en hoe ze communiceren met de gebruiker.

1. INLEIDING

Campagne flow Een visuele weergave van hoe het verkeer tussen verschillende mediamiddelen is gebruikt tijdens een campagne.

In de lente is het weer zover, het asperge-

Hoofdstuk 2 geeft een omschrijving over

om de hoeveelheid boeren die asperges

de stage opdracht, met hierin de probleem-

seizoen! Limburg en Brabant staan bekend

telen. De asperges zijn vervolgens te koop

in de supermarkt of boeren verkopen hun

asperges langs de weg. Maar hoe weet je nou waar je asperges kunt kopen? Daar heeft Exitable een oplossing voor gevonden. Twee jaar geleden heeft José Luis

Almagro, medewerker van Exitable, een app bedacht genaamd Appsperge. Deze

app is gemaakt om zo de aspergeboeren vindbaar te maken en onder de aandacht te

brengen. Maar! Dat was twee jaar geleden.

het bedrijf. Hoofdstuk 3 geeft uitleg over stelling, doelstellingen en de op te leveren

deliverables. Het vierde hoofdstuk geeft de belangrijkste conclusies en aanbevelingen. Vervolgens is er een evaluatie, waarin

gereflecteerd wordt op het eigen functioneren. In de literatuurlijst staan de vindplaatsen van informatie, zodat de lezer een beeld krijgt over de reikwijdte van het onderzoek. Het verslag wordt afgesloten met de bijlagen.

Door de ontwikkelingen in de online wereld is de app toe aan vernieuwing.

Het onderzoek, het concept, het design en de front end moeten vernieuwd worden.

2

3

3

2. HET BEDRIJF 2.1 Bedrijfsomschrijving en geschiedenis Exitable is een strategisch interactief webdesign en webdevelopment bureau gevestigd in Weert. Exitable werkt voor klanten in verschillende branches en werkt aan elk product vol toewijding en passie. Exitable is ontstaan vanuit het traditionele communicatiebureau Exit Communicatie. Exit Communicatie is een communicatiebureau met 3 expertises; Exit Communicatie, Exitable en Ketjapp. De eigenaar van Exit Communicatie, Pim van de Wiel, merkte dat online communicatie een vak apart was en koos in 2008 uiteindelijk voor een specialistische splitsing in de vorm van Exitable. Pim besloot hierbij twee werknemers (een webdeveloper Maikel Janssen en een accountmanager Sander Beek) met affiniteit voor internet en nieuwe media in zijn plan mee te nemen en mede-eigenaar te maken van het nieuwe bedrijf Exitable. Inmiddels bestaat Exitable uit 8 werknemers met verschillende online specialisaties en werkt voor klanten als Jan Linders, Gemeente Eindhoven en Boels. Daarnaast is er ook een netwerk om Exitable heen gebouwd van specialistische freelancers die het bedrijf waar nodig is versterken. Exit Communicatie is een creatief marketing en communicatie bureau. Exit geeft strategisch advies en vertaalt dit naar een concept dat vervolgens gerealiseerd wordt. Ketjapp is een expertise dat gespecialiseerd is in het maken van apps, zowel mobiele apps als webapps.

2.2 Bedrijfscultuur Exitable is gevestigd op het bedrijvenpark Kampershoek te Weert. Het ligt ten noordoosten van het centrum van Weert. Er hangt een informele sfeer, waar geen dresscode bij hoort. Er worden af en toe teamuitjes georganiseerd voor de teambuilding. Exitable vind het belangrijk dat het onderlinge contact goed is, wat uiteindelijk zorgt voor een goed resultaat. Bij Exitable heeft iedereen een eigen specialisme. De werknemers kunnen zich bezighouden met bijvoorbeeld de back end, front end, design of online marketing.

2.3 Doelstelling van het bedrijf Exitable heeft een duidelijke missie en visie voor ogen en dat is high-end online producten bedenken en maken voor klanten die hiervoor open staan. Daarbinnen passen eigenlijk alle facetten van online communicatie, van Social Media / Marketingadvies tot complete design en ontwikkeltrajecten en nazorg. Het bedrijf probeert een juiste balans te vinden in wat de klant wil en wat de eigen voorkeuren zijn. Alleen zo kan er een compleet eindproduct verschijnen waar beide partijen trots op zijn.

Visie Exitable werkt voor klanten die hun kansen op internet zien en die deze kansen zo goed mogelijk willen benutten. Exitable is een bedrijf dat werkt met vaste projectteams, om zo klanten optimaal te bedienen. Exitable richt haar pijlen op Zuidoost-Nederland. Exitable werkt samen met klanten aan de optimale inzet van nieuwe media en internet, met een helder en duidelijk geformuleerd doel voor ogen.

4

5

2.4 DE ORGANISATIE

Jose Luis Almagro Luis is een echte conceptdenker en heeft een passie voor design. Vanaf kleins af aan heeft Luis websites ontworpen, hij heeft dus al een lange tijd ervaring. Binnen Exitable is hij verantwoordelijk voor sprankelende, vernieuwende en vooral professionele designs van verschillende online middelen.

Jesse Bakels Maikel Janssen

Jesse is verantwoordelijk voor de support bij Exitable. Hij heeft niet alleen ervaring met support, maar ook op andere fronten zoals front end development. Als gedreven persoon staat hij elke dag klaar met een positieve blik om klanten te woord te staan en een mooi product op te leveren.

Maikel is van jongs af aan al bezig met alles wat met media te maken heeft. Geen wonder dat hij zijn toekomst zag liggen in de nieuwe media. Maikel vervult bij Exitable de functie van Drupal / Webdeveloper en is dus vooral verantwoordelijk voor de techniek achter de websites.

Michel Janssen

Sander Beek

Als front end developer is Michel verantwoordelijk voor alle zaken die ervoor zorgen hoe de website eruit ziet, werkt en zich gedraagt met als uiteindelijk doel het verbeteren van de online experience van de bezoeker.

Adviseren en online trajecten begeleiden is Sander zijn specialiteit. Zo heeft hij een goed inlevingsvermogen en kan hij samen met de klant een juiste strategie verzinnen, zodat er online meer rendement behaald kan worden. Met zijn jarenlange ervaring kan Sander situaties goed aanvoelen en weet hij precies hoe hij moet handelen op bepaalde momenten.

Bruno de Regge Met veel ervaring op het gebied van projectmanagement structureert Bruno in samenwerking met het Exitable team de workflow om nog efficiënter en klantgericht te kunnen werken.

Gijs Daemen Als online marketeer versterkt Gijs Exitable met betrouwbare analyses, zijn creatieve ideeen en verantwoordingen. Hij weet de goede combinatie te leggen tussen data-analyse en het opzetten van creatieve marketing ideeen. Uit statistieken haalt Gijs oplossingen voor de klant zodat de online activiteiten verbeterd worden.

Desiree Geraerds Als open, sociaal en spontaan persoon weet Desiree haar klanten te ondersteunen bij online trajecten en laat ze haar klanten, klant voelen. Desiree weet precies hoe ze tot een overeenstemming moet komen en maakt analyses die niet alleen voor Exitable maar ook voor de klant begrijpbaar zijn.

6

6

7

3. DE OPDRACHT 3.1 Probleemstelling

3.2 Doelstelling

Ze worden alleen in Limburg en Brabant geteeld en worden ook wel ‘het witte goud’ genoemd. Juist, asperges! Asperges zijn te koop op verschillende verkooppunten, vaak langs de weg. Tijdens een fiets of wandelroute is het lekker om een tussenstop te maken en te genieten van deze gezonde groenten. Maar, hoe weet je nou waar je asperges langs de weg kunt kopen? Daar is een oplossing voor gevonden, genaamd Appsperge.

Exitable wil het design vernieuwen van Appsperge, wat uiteindelijk zorgt voor meer downloads en herhaaldelijk gebruik van de app.

Deze app is alweer 2 jaar geleden gemaakt. In de eerste weken na de lancering is de app 100 keer gedownload. Daarna is de app niet meer gedownload en zijn er geen gebruikers actief geweest op de app. Appsperge biedt momenteel geen meerwaarde aan de huidige gebruiker om de app te blijven gebruiken. Tevens komen er geen nieuwe downloads bij.

3.3 Realisatie opdracht Om tot een goed design te komen zijn er verschillende tussenproducten gemaakt. In de volgende paragrafen staan de tussenproducten met daarbij de belangrijkste conclusies.

U

it de enquêtes is gebleken dat de doelgroep van Appsperge:

- De leeftijd heeft van 40 jaar en ouder. - Van te voren al weet wat hij/zij gaat kopen - Er niet getwijfeld wordt over het soort product, prijs of kwaliteit. - Er wordt steeds hetzelfde product gekocht. - Bestaat uit vaste klanten uit de buurt, die met de fiets of auto het verkooppunt bezoeken. - De meeste boeren verkopen naast asperges ook nog aardbeien (100%) en eieren (80%).

3.3.1 ONDERZOEK 3.3.1.1 DOELGROEPONDERZOEK In de eerste instantie was het de bedoeling om de klanten die een verkooppunt hebben toegevoegd thuis te bezoeken en hen vervolgens een aantal vragen te stellen. Zo ziet de klant ook dat Exitable aandacht besteed aan haar klanten. Het gesprek wordt zo een stuk persoonlijker en eerlijker. Voor het doelgroeponderzoek is er uiteindelijk een enquête verstuurd. Er is gekozen voor deze methode omdat dit de voorkeur had van de opdrachtgever en omdat deze methode makkelijk te meten is. De enquête is gemaakt met Google Forms, waarbij de reacties automatisch worden opgeslagen. Deze resultaten zijn ook makkelijk af te lezen. Per vraag

8

komen de reacties onder elkaar te staan in een Excell bestand. Daarnaast heeft de respondent keuze uit een select aantal antwoorden. Dit voorkomt vage en/of onechte reacties. Het bedenken van de juiste vragen en het versturen van de enquêtes kost vrij weinig tijd. Dit komt het project ook ten goede. De mail is verstuurd naar alle personen die een aspergelocatie hebben toegevoegd op de Appsperge website. Omdat het niet duidelijk is of de personen Appsperge gebruikers zijn of dat ze zelf asperges verkopen, wordt dit van te voren in de enquête gevraagd. De enquête is te vinden in bijlage III : Enquête doelgroep.

9

Bezoekersgedrag

3.3.1.1.1 Analytische gegevens

Aantal sessies Aantal paginabezoeken

Met behulp van Google Analytics zijn er conclusies getrokken uit de bezoekersgegevens van de webapp. Paginabezoeken Zo blijkt dat de webapp alleen de eerste maand na de lancering is bezocht door bezoekers. Daarna zijn er weinig tot geen bezoekers geweest. De eerste piek van de

grafiek is op woensdag 10 april 2013 met 219 bezoekers. Op die dag is de app gelanceerd en is de webapp helemaal afgewerkt. Dit werd aangegeven aan de bezoeker op Facebook en op Twitter. Dit waren een van de eerste berichten die werden gepost. De tweede piek was op 22 april en de pieken daarna op 25 april, 1 mei, 3 mei, 6 mei en 7 mei. Op 7 mei is Appsperge gereviewd op

iPhoneClub.nl. Op deze reviews zijn verder geen opmerkingen meer geplaatst door bezoekers. De rest van het jaar zijn er geen pieken meer geweest. De momenten waarop de website is bezocht lagen dus tussen 10 april 2013 en 7 mei 2013.

Aantal gebruikers Gemiddelde sessieduur Bounce rate

870 1645 576 1 minuut en 51 seconden 75,98%

Afkomst bezoekers De meeste bezoekers waren afkomstig uit Roermond en omstreken. Op de tweede plaats komen de inwoners van Weert.

Dat er weinig terugkerende bezoekers zijn is te verklaren aan het bezoekersgedrag. Zo is hier links te zien dat de bouncerate erg hoog is. De bezoeker is dus geneigd de pagina te verlaten alvorens hij/zij interactie heeft gezocht met de website/pagina. Er mist dus een interactief element op de app.

Aantal sessies pc Aantal sessies mobiel/tablet Aantal sessies totaal Bounce rate Gemiddelde sessie duur

Roermond

Weert

118 (66%) 60 (33%) 178 (100%) 60,11% 04:56min

90 (82,57%) 19 (17,43%) 109(100%) 70,64% 03:05min

Pageviews

300

Nieuwe bezoekers Terugkerende bezoekers

150

Soort bezoekers

Maar liefst 33,8% bestond uit terugkerende bezoekers. Hieruit blijkt dus dat er weinig prikkeling voor de bezoeker is om de app nog eens te bezoeken. 29 maart

12 april

26 april

10 mei

24 mei

100%

10

11

3.3.1.1.2 Resultaten enquete

Vervoermiddel

Op deze twee pagina’s zijn de resultaten van de enquête zichtbaar in een visuele weergave. De enquête bevat gerichte vragen over de doelgroep. Deze enquête is verzonden via de mail naar alle personen die een aspergelocatie hebben toegevoegd. Dit kunnen ondernemers zijn, maar dit kunnen ook asperge kopers zijn. De volledige enquête is te vinden in bijlage III : Enquête doelgroep.

Leeftijdscategorie doelgroep

Koopintentie

De leeftijdscategorie van deze doelgroep zijn 40+ers. Het cirkeldiagram is hieronder te zien.

Wanneer de respondant gevraagd wordt naar de zekerheid van de klant om een bepaald product te kopen, is het antwoord eenduidig. De klant is er van te voren al van bewust wat hij/zij wilt gaan kopen.

Soort bezoekers Maar liefst 90% van de klanten zijn vaste klanten. De andere 10% zijn toeristen (binnenland).

In de enquête kon de respondent kiezen uit verschillende vervoermiddelen. De meeste klanten komen met de fiets. Op de tweede plek komt de auto.

Producten per verkooppunt

Verkoop andere producten

Aardbeien

Overige antwoorden waren : Twijfelt al voordat hij/zij de producten heeft gezien Twijfelt over het soort product Twijfelt over de kwaliteit Twijfelt over de prijs Anders, namelijk…

Naast asperges verkopen de boeren ook nog allemaal (100%) aardbeien. Maar liefst 80% van de ondervraagden verkoopt ook nog eieren. Appels, streekproducten en aardappelen worden minder verkocht.

Eieren Appels Streekproducten

Leeftijdscategorie doelgroep

Aardappelen

Aardappelen 0

40-50 jaar 50+

25

50

75

100

Percentage

Koopintentie

42,9% Personen die van te voren al weten wat ze willen kopen

57,1%

100%

Vergelijken van verkooppunten Maar liefst 100% van de respondenten zou graag verkooppunten willen vergelijken. 33,3% hiervan wilt vergelijken op prijs, 33,3% op kwaliteit en 33,3% op afstand.

Soort bezoekers

33,3%

33,3%

10%

Vaste klanten 90%

12

Toeristen (binnenland)

33,3%

13

3.3.1.2 CONCURRENTIE ONDERZOEK Naast Appsperge bestaan er natuurlijk nog meer apps. Veel van deze apps gaan over gerechten die je kunt bereiden met asperges. Er bestaat echter één app die dezelfde functie bevat met asperges als Appsperge, namelijk het weergeven van verkooppunten langs de weg. Dit is de Teboza asperge app. Deze app bevat identieke maar ook afwijkende functionaliteiten. Zo kan een gebruiker zoeken naar een dichtstbijzijnde restaurant waar ze asperges verkopen, het dichtstbijzijnde verkooppunt, speciale acties, evenementen en recepten. Ook hier kan er gezocht worden op afstand. Er kan niet worden gezocht op plaatsnaam, zoals bij Appsperge. Daarnaast is er informatie te lezen over asperges als product. De verkooppunten die worden getoond zijn speciale Teboza verkooppunten.

Kwaliteit Er is op de website een Nederlandse vlag te zien dat staat voor de kwaliteit van asperges.

Internationaal De website is internationaal gericht door de verschillende talenopties.

14

15

3.3.1.3 Concept analyse Boodschap ‘Gebruik deze app en vind het dichtstbijzijnde asperge verkooppunt’. Deze boodschap is duidelijk gemaakt op de webapp door verkooppunten te laten zien op de Google Maps kaart en door onder de kaart een stukje uitleg te geven over de app. De zoekbalk geeft aan dat er gezocht kan worden op woonplaats om uiteindelijk iets te vinden. De zoekbalk staat nu in de navigatiebalk en valt niet meteen op door zijn locatie en grootte. Slogan ‘Op zoek naar het witte goud’. Zo luidt de slogan van Appsperge.

Het witte goud duidt op de asperges. Asperges worden ook wel wit goud genoemd door de helende1 werking. Ze worden ook

3.3.4 Wireframes en prototypes.

wel ‘de koningin van de groente’ en ‘parel van het land’ genoemd. Sommige mensen weten niet wat het witte goud is, dus dat zal nieuwsgierigheid opwekken.

Appsperge heeft een informationele positionering. Dit houdt in dat de voordelen van het gebruiken van een merk verbonden zijn aan de functionele eigenschappen van een product. Deze positioneringsstrategie wordt veel gebruikt bij nieuwe producten en producten met een probleemoplossend karakter. Appsperge biedt de gebruiker een snelle manier om asperge verkooppunten te vinden. Het gaat hier niet om een bepaald gevoel overbrengen, maar over effectief te werk gaan. Om in een zo kort mogelijke tijdsperiode een dichtstbijzijnd verkooppunt te vinden. Effectief en efficiënt dus.

Betrokkenheid Appsperge heeft een lage betrokkenheid. Het is een gratis app die geen risico met zich meebrengt. Naarmate er meer downloads komen en er meer mond-tot-mond reclame wordt gemaakt zal de app een steeds hogere betrokkenheid krijgen. Hoe deze downloads worden gecreëerd is te lezen in de hoofdstukken 3.3.2 Plan van aanpak en

Positionering

Logo In het logo komen de naam en de slogan naar voren. De naam bestaat uit het woord ‘app’ van applicatie en het woord ‘sperge’ van asperge. Dit zorgt ervoor dat de gebruiker begrijpt wat het voor een product is. Het icoontje rechtsboven in het logo staat voor een asperge verkooppunt. Dit komt terug in de app op de kaart, wat ervoor zorgt dat gebruikers de link leggen tussen het logo en de app.

Speerpunten

2. Mediumspecifiteit

Er zijn 5 punten die als richtlijn kunnen dienen bij het ontwikkelen van een sterk crossmediaal concept. Dit is hoe Appsperge het heeft uitgevoerd.

Tijdens de campagne zijn er verschillende media ingezet. Er is een Facebookpagina en Twitterpagina aangemaakt, er is een persbericht verzonden naar websites die Appsperge reviewen en L1 Radio is ook gebeld door Exitable. Deze campagne flow is te zien op pagina 19.

1. Storytelling Op de kaart van Google Maps zijn de beschikbare asperge automaten te vinden langs de weg. De gebruiker heeft twee opties: hij/zij kan de gewenste locatie invoeren, waarnaar de dichtstbijzijnde verkooppunten worden weergegeven en hij/zij kan zelf verkooppunten toevoegen. Naast dit heeft gebruiker geen mogelijkheid tot interactie met de website. Via Google Maps kan een routebeschrijving worden getoond.

3. Usability Appgebruikers kunnen informatie raadplegen op de website/webapp www.appsperge.nl. Ook staan er reviews van de app op het internet. De app is te downloaden in de Play Store (Android) en in de App Store (iOS). Het bereik is dus groots en toegankelijk.

17

16 1

http://www.energy-life.nl/gezondheid/asperges-seizoen-het-witte-goud-geopend/

Campagne flow Hieronder is te zien hoe de campagne flow destijds is verlopen.

Webapp Appsperge.nl

4. Relevantie

Motivatie

De meeste asperges worden gekweekt in Limburg en Brabant.2 Het is dus logisch dat de mediamiddelen zijn gericht op dit gebied in Nederland.

Wanneer agrariërs zich aanmelden bij Appsperge krijgen ze bekendheid. De mate van bekendheid is nu bij elk verkooppunt even hoog. Er worden geen verkooppunten uitgelicht en er kan niet gesorteerd worden op meeste bekende verkooppunten. Voor de gebruiker is het een unieke, makkelijke, goedkope en snelle manier om de dichtstbijzijnde verkooppunten te lokaliseren.

5. Co-creatie Via social media is de gebruiker op de hoogte gehouden van de ontwikkelingen van Appsperge. Zo is de bekendmaking van de app gepost in de vorm van een bericht en een afbeelding van de app. Ook de hoeveelheid downloads zijn gepost. Hier kon de app gedeeld worden en geliked.

18

Social medium Twitter

Social medium Facebook Mobiele app App Store

L1 Radio

Mobiele app Play Store

Reviews Andere sites

19 2

http://www.saxion.nl/designentechnologie/site/onderzoek/onderzoeksprojecten/aspergeoogstrobot/

3.3.2 PLAN VAN AANPAK Er zijn na 2 maanden van het lanceren van de app geen nieuwe downloads ontstaan en de huidige klant gebruikt de app niet meer. Er moet dus een oplossing komen. Aan de hand van het onderzoek en de feedback van de opdrachtgever is er een plan van aanpak gemaakt.

App functies

Media middelen

De huidige doelgroep bestaat vooral uit vaste klanten. Om nieuwe klanten aan te spreken zouden vaste klanten reclame kunnen maken. Er zal dus een interactie element in moeten komen. Dit element zou een stimulans moeten zijn voor de aspergeboer om de app te blijven gebruiken en tevens zouden nieuwe klanten moeten worden aangesproken. Daarnaast moet er een reden zijn voor de vaste klant om te app te blijven gebruiken.

Om de doelgroep te bereiken zullen er media middelen moeten worden ingezet:

Reviews

Online In hoofdstuk 3.3.1.1.1 Analytische gegevens is te lezen dat de app veel gedownload werd toen de lancering bekend werd gemaakt op Facebook en Twitter en toen de app gereviewd werd op verschillende sites. Van de 40+ers gebruikt zeker 60% social media, waarvan Facebook het populairste medium is3 Daarom zal er een post worden geplaatst op Facebook van de nieuwe apps. Alle personen die destijds een aspergelocatie hebben toegevoegd, krijgen tevens een mail over de update van de (web)app en er worden links geplaatst naar Appsperge.nl. Er zullen ook berichten worden gestuurd naar sites om de app te reviewen.

Door reviews te plaatsen bij verkooppunten wordt het verkooppunt beoordeeld door de bezoeker. Wanneer er betere reviews komen voor het bedrijf, zou het bedrijf hoger in de ranking moeten komen. Dit wordt elke week geüpdatet met nieuwe rankings. Er zou gesorteerd kunnen worden op aantal reviews of het bedrijf met de meeste reviews zou bovenaan eindigen in de lijst. Dit is een stimulans voor de ondernemer om de app te gebruiken en dus reclame te maken voor zijn bedrijf.

Rating systeem Bij deze reviews kunnen ook nog een aantal sterren worden geplaatst aan de hand van de kwaliteit van het verkooppunt. Deze sterren zijn nodig om de bedrijven met de beste kwaliteit boven in de lijst te laten eindigen of op kwaliteit te kunnen sorteren. Een rating systeem laat alleen de kwaliteit zien terwijl reviews veel meer informatie kunnen omvatten.

20

Offline (poster): De doelgroep komt met de fiets of de auto naar het verkooppunt (dit is te lezen in hoofdstuk 3.3.1.1.2 Resultaten enquête). Daarom worden er posters geplaatst langs fietsroutes en autowegen. Een voorbeeld van een poster is te zien op de linkerpagina.

Testen Voor het testen van het design worden usability tests opgezet. Er is gekozen voor deze manier, omdat de gebruiker het product test. Deze tests worden afgenomen door middel van het programma Axure. Door te testen met dit programma krijgt de gebruiker interactie met de app. De gebruiker ziet dus al hoe de app zal gaan werken en reageren. Voor de volledige omschrijving en opzet van het testplan en testrapport,

18 3

Nationale Social Media onderzoek 2014 , Newcom research consultancy.

21

3.3.3 DESIGN ONDERZOEK Voor het designonderzoek zijn er 3 onderdelen onderzocht, namelijk een aantal design principes4, design inspiraties en het huidige design.

3.3.3.1 DESIGN PRINCIPES Content

Er zijn een aantal principes waar designers zich aan kunnen houden, zodat de eindgebruiker een product zo effectief en efficiënt mogelijk kan gebruiken.

Soms raken gebruikers de weg kwijt op een website. Ze weten niet waar ze heen moeten scrollen of waar ze op moeten klikken. Om dit probleem te voorkomen zijn een aantal regeltjes opgesteld

Contrast5 Wanneer de gebruiker voor 2 opties komt te staan, waarvan de een een positieve actie is en de ander negatief of neutraal, zal hier op moeten worden gelet in het design. In de afbeelding aan de linkerkant zijn twee voorbeelden te zien. Zo hebben de buttons links allemaal hetzelfde contrast. Door ditzelfde contrast ziet de gebruiker het verschil niet goed. Dit is rechts duidelijker te zien.

om de gebruiker naar tevredenheid een website te laten gebruiken.

1. Verminder de drukte op de pagina Verwijder achtergrond plaatjes Gebruik minder kleuren en demp kleuren Gebruik minder content (less is more) Gebruik veel wit ruimte tussen tekst en plaatjes Verminder bewegingen op de pagina, zoals bewegende banners en buttons

Witruimte en typografie De afstand tussen het tekstblok en het groene blok op de achtergrond is hieronder groter dan rechts. Ook is de regelafstand hieronder groter dan rechts. Het onderste blok is makkelijker te lezen dan het rechterblok.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in accumsan eros, et pulvinar neque. Vivamus eu condimentum purus, nec eleifend odio. Sed sed elementum risus, ut sollicitudin ligula. Duis rutrum augue ipsum, sed tristique arcu dapibus sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in accumsan eros, et pulvinar neque. Vivamus eu condimentum purus, nec eleifend odio. Sed sed elementum risus, ut so arcu dapibus sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in accumsan eros, et pulvinar neque.

Gebruik maximaal 2 of 3 fonts per pagina.

2. Haal belangrijke elementen naar voren Verplaats het item naar een zichtbare locatie, zoals in de header. Voeg plaatjes toe bij items om de gebruikers’ attentie te trekken Vergroot de grootte van een titel Verander tekst kleur Verander de achtergrond kleur van het item Zet het item alleen ten opzichte van de rest van de elementen. Bijvoorbeeld : omring het item met een box Creëer beweging in het item, maar alleen als het een toegevoegde waarde heeft

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in accumsan eros, et pulvinar neque. Vivamus eu condimentum purus, nec eleifend odio. Sed sed elementum risus, ut sollicitudin ligula. Duis rutrum augue ipsum, sed tristique arcu dapibus sit amet

22

4

https://portal.fhict.nl/IMD/P7P8oud/default.aspx

5

http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/

23

Font

Kleuren8

Een lettertype wordt ook wel font genoemd. Voor het juiste font is er onderzoek gedaan naar de juiste font family. Een font family is een font groep waarbij iedere groep met fonts dezelfde kenmerken heeft. Hieronder staan een aantal font groepen met elk hun kenmerken over de bijbehorende lettertypes.7

Aan de rechterzijde is het kleurenwiel te zien. Hierin staan alle mogelijke kleuren.

Analoog Analoge paletten gebruiken kleuren die dicht naast elkaar liggen op het kleurenwiel. Deze paletten laten consistentie zien en uniformiteit in het design. Zoals aan de rechterkant te zien is ligt er een accent op het lichtere groen, maar de zachtere blauwe kleuren blijven zichtbaar. Het groen leidt niet af. Complementair

1. Geometric

3. Old style

Heeft geometrische vormen. De lijnen van elke individuele letter zijn even dik en groot. Er zit dus weinig speling in en is minimalistisch. Het font trekt net genoeg aandacht en oogt rustig.

Ze hebben weinig contrast tussen dik en dun en de letters hangen iets naar links. Ze bevatten schreven, zijn klassiek, traditioneel, goed leesbaar en ouderwets. Dit is een font dat echt alleen bij een specifieke doelgroep zal passen.

2. Humanist Dit font bevat veel meer details en minder consistentie dan de geometrische fonts. Zo bevat een letter dikkere en dunnere lijnen. De familie draagt gevoel over maar is toch rationeel. Het font trekt meer aandacht dat het geometrische font.

24

4. Modern en transitional Na de tijd waarin de old style fonts werden gebruikt, kwam de moderne tijd. Het font moest geometrischer en scherp zijn dan zijn voorganger. Het is een font dat tussen de huidige tijd en de oude tijd in hangt. Het is dus onduidelijk wat het font precies uitstraalt. Het

heeft per letter geometische vormen, maar de schreven van de oude stijl.

5. Slab serif Populair font met kenmerken van de sans lettertypes. Zo heeft het lettertype dikke en lunnen lijnen per letter maar met rechte hoekige uiteinden. De fonts hebben verschillende uitwerkingen en zijn per font ook specifiek voor een bepaald publiek bedoeld. Soms zijn de lijnen dikker , soms dunner, soms willen ze een moderne uitstraling hebben en soms juist ouderwets.

7

http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/

8

http://www.dtelepathy.com/blog/design/color-theory

Complementaire paletten zijn gevuld met kleuren die recht tegen over elkaar staan in het kleurenwiel. Deze kleuren zorgen voor balans wanneer men contrast wil toevoegen. Sommige kleuren die tegenover elkaar staan geven de gebruiker een verkeerde indruk. Wanneer dit gebeurt zou witruimte of een tussenkleur kunnen helpen.

Drietal De drietal methode bestaat uit 3 hoofdkleuren die even ver van het wiel af staan. Het is lastiger om deze kleuren samen te voegen, omdat ze verschillende tinten bevatten. De kleuren met contrast zijn zachter gemaakt met tinten. De kleuren met toegevoegde schaduwen en dezelfde tinten lijken gevuld met andere kleuren.

25

3.3.3.2 DESIGN INSPIRATIES9 Voor de designinspiraties is er vooral gekeken naar sfeer, stijl en kleuren. Ook worden de principes toegepast op de inspiraties.

Dit design is een voorbeeld met een natuurlijke uitstraling. Er is veel witruimte gebruikt. Om de afbeeldingen heen is een lichte gloed te zien van schaduw. De kleuren zorgen voor een aangename en ook gezonde sfeer. Er is veel groen te vinden Er is gebruik gemaakt van veel afbeeldingen en de content is geplaatst binnen 960px breedte. Waarom dit wordt aangegeven staat omschreven in hoofdstuk 3.3.3.3 Witruimte en structuur.

Dit design heeft de overgangen tussen de twee kleuren mooi gemaakt. De roze kleur is geen goede basiskleur voor Appsperge, omdat roze geen natuurlijkheid uitstraalt. Wel zou het roze kunnen dienen als tegenkleur, om te zorgen voor contrast. De plaatjes in het midden naast elkaar zijn mooi opgesteld. Het is overzichtelijk en in elk blok wordt iets anders besproken. De website is mooi gemaakt met het contrast. Tekstvakken zijn duidelijke tekstvakken, waar de gebruiker dus iets moet invullen. En buttons zijn duidelijke buttons. Dit is gedaan met kleur en contrast.

Zoals aan de rechterkant te zien is heeft de maker het menu in de header gesitueerd, boven de banner. De gebruiker ziet meteen de keuzes waaruit de website bestaat. Nu hoeft de gebruiker niet helemaal naar onder te scrollen om de informatie te vinden. Verder worden er veel plaatjes gebruikt, wat ook weer zorgt voor het natuurlijke gevoel.

26

27 9

Designs afkomstig van https://www.pinterest.com/

3.3.3.3 DESIGN ANALYSE HUIDIGE DESIGN Op de rechterpagina is een afbeelding te zien van de huidige webapp. De app zal worden geanalyseerd aan de hand van de design principes.

Contrast Font

Tekst

Witruimte en structuur

zoeken naar informatie, wat zorgt voor minder oogbewegingen.10 Daarnaast is er meer witruimte aan de

Het huidige font is Droid Sans. Het font valt niet op, de aandacht wordt meer getrokken naar de grote Google Maps kaart. Dit aanzicht is niet heel aantrekkelijk, maar wel efficient.

Appsperge maakt momenteel gebruik van een witte achtergrond en groene, blauwe en zwarte tekst. De groene tekst in het logo en de voor de titels. Deze tekst is goed te lezen op de witte achtergrond. De tekst bevat geen schaduw. De plaatjes daarin tegen bevatten wel een kleine schaduw aan de onderkant. Dit maakt de plaatjes wel zichtbaarder.

De content van de website is gebouwd op een maximale breedte van 960px. De header is opgedeeld in 3 kolommen, de informatie over de app bestaat uit 2 kolommen en de footer heeft ook 2 kolommen. Op een groter scherm is er even veel witruimte aan beide kanten. Door een vaste maximale breedte aan te houden heeft een aantal voordelen. De website is niet heel lang, alle content is te bekijken op 1 scherm. Dit zorgt ervoordat de gebruiker meteen kan zoeken naar asperge verkooppunten, zonder naar een aparte pagina te gaan of naar onder hoeft te scrollen. Zo hoeft de gebruiker niet de hele breedte van het scherm af te

zijkanten, wat zorgt voor meer aandacht op de content. De header is opgebouwd uit een logo, een advertentie en een zoekmachine. Er is overal even veel witruimte tussen de elementen.

AaBbCcDdEe

FfGgHhIiJj

De tekst onderaan over de makers is grijs met blauw. De grijze kleur geeft aan dat het niet het hoofdonderwerp is van de site, de blauwe kleur geeft aan dat de gebruiker erop kan klikken. De blauwe kleur springt veel meer en sneller in het oog dan de grijze kleur.

KkLlMmNnOo

De app is gemaakt met het Foundation framework en dus responsive opgezet. Er kan in deze vaste breedte gekozen worden hoe groot een blok met content is. Dit wordt aangegeven met procenten. Zo is de content in een vaste breedte van 960px, dit is dus 100%, alsnog responsive. Meer over de werking van Foundation is te vinden in 3.4.6 Front-end.

PpQqRrSsTt

UuVvWwXxYyZz

Buttons De buttons zijn iets donkerder groen gemaakt, zodat er contrast ontstaat. Het is duidelijk dat dit om een button gaat en dat gebruiker erop kan klikken. Dit wordt ook wel clickable genoemd. De tekst in de buttons zelf heeft geen zwarte rand. Volgens de design principes zou dit wel beter zijn. Ook de buttons van Facebook en Twitter hebben geen zwarte rand.

28

10

Http://blog.woorank.com/2013/04/top-3-sign-up-form-optimization-tips/

29

3.3.4 WIREFRAMES EN PROTOTYPE(S) Wireframes geven een visuele weergave van de voor te stellen functies, structuur en content van een website. Een wireframe scheidt de functionele elementen van de grafische elementen op een manier zodat het makkelijk te verklaren is hoe een gebruiker reageert op een website. Het bevat de hoofdelementen van een website, zoals een header, footer, navigatie, contentblokken, titels, links en afbeeldingen.

Voor Appsperge zijn er wireframes gemaakt voor de webapp en de mobiele app, op basis van de resultaten van de enquête en de eisen van de opdrachtgever. De wireframes zijn 2x getest met behulp van het programma Axure en zijn vervolgens 2x verbeterd. De tests zijn afgelegd met collega’s van Exitable. De projectleden hoefden hiervoor niet de doelgroep te bezoeken, wat tijd bespaart. Dit onderwerp komt nog terug in Hoofdstuk 4 : Conclusies en aanbevelingen.

Axure Elke week zijn er prototypes gemaakt en getest met het programma Axure. Hierin worden wireframes gemaakt die vervolgens gepubliceerd kunnen worden om te testen.

3.3.4.1 RESULTATEN ENQUÊTE Uit de resultaten van de onderzoeken, de feedback van de opdrachtgever en het plan van aanpak zijn de eerste wireframes gemaakt. In bijlage III : Enquête doelgroep is de enquête te vinden en in hoofdstuk 3.3.1.1.2 Resultaten enquête staan de resultaten van de enquête visueel uitwerkt.

- De bounce rate is erg laag. Er is geen stimulans voor de gebruiker om door te klikken op de site. Er mist interactie. Dit wordt opgelost met reviews. - Er zijn maar weinig terugkerende bezoekers. Ook hier is er te weinig stimulans voor de gebruiker om te app te blijven gebruiken. Dit zou worden opgelost met een ratingsysteem.

Voor de bezoeker is het belangrijk dat : - Je kan zoeken op plaatsnaam en op dichtstbijzijnde verkooppunt vanaf de huidige locatie - Je verkooppunten kunt vergelijken op prijs, afstand en kwaliteit. - De verkooppunten zichtbaar zijn in de vorm van een kaart. (Een lijst is niet nodig). - De verkooppunten ook andere producten laten zien die ze verkopen. Daarnaast zijn de resultaten van Google Analytics bekeken.

30

Ook is er een plan van aanpak gemaakt, zie hoofdstuk 3.3.2 Plan van aanpak, waarin een aantal keuzes zijn gemaakt. In het plan van aanpak kwam naar voren dat de gebruiker: - Reviews kan plaatsen en lezen per verkooppunt - Een rating kan geven per verkooppunt Vanaf pagina 32 is het proces van de wireframes te zien met daarbij de testresultaten. De testvragen en resultaten zijn te vinden in Bijlage II : Testrapport.

31

3.3.4.2 PROCES WIREFRAMES

Er is een aparte pagina voor het downloaden van de app. Dit is een belangrijke pagina, hier moet de

Aan de rechterkant is het eerste wire-

gebruiker genoeg informatie hebben

frame te zien. Het is een one page, dat

ontvangen van de website om uitein-

begint met een pakkend beeld op de

delijk door te klikken naar de app.

bovenste pagina.

Zo heeft een one

page website verschillende voordelen.

Uit de enquêtes kwam naar voren dat

Deze websites zijn snel zichtbaar voor

de gebruiker graag verkooppunten

de gebruiker, omdat de site maar één

zou willen vergelijken. Vandaar een

keer hoeft te laden. Alle informatie

vergelijkscherm.

staat op één pagina. Daarnaast verho-

verkooppunten worden gekozen en

gen ze de betrokkenheid van gebrui-

vervolgens verschijnt de informatie

kers doordat ze vaak verrassend zijn en

naast elkaar.

Hier

kunnen

2

vaak gebruik maken van mooie, speciale effecten.11 Dit verhoogt de nieuws-

Er is een apart scherm voor het

gierigheid van de gebruiker.

bekijken van reviews per verkooppunt. Er kan in de linker lijst een

Het moet meteen duidelijk zijn waar de

verkooppunt worden geselecteerd

app voor dient. Aan de linkerkant is het

waarnaar de reviews rechts verschij-

logo te zien. Wanneer de gebruiker

nen. Onderaan de lijst kan een

namelijk op ‘zoek’ klikt in de onderste

review worden toegevoegd met

balk op het hoofdscherm, schuift de

daarbij de rating.

pagina automatisch naar onder naar het tweede scherm en het menu schuift

Om snel naar het hoofdscherm te

mee. Zo hoeft de gebruiker niets

gaan, zijn er onder elk scherm knop-

extra’s te doen om naar de kaart te

pen te vinden die de pagina automa-

komen.

tisch naar boven laten gaan.

De verkooppunten verschijnen op de kaart. Er kan een verkooppunt worden toegevoegd met behulp van de button die in het midden geplaatst is. Zo is hij meteen goed te zien.

32

33 11

http://www.usability.nl/2013/trend-alert-single-page-websites/

Resultaten test 1 De tijd, het aantal clicks en de reacties van de tester werden per opdracht geanalyseerd. De resultaten zijn vergeleken en uiteindelijk zien hier conclusies uitgehaald.

Resultaten test 2 Bij Exitable worden wireframes gemaakt waarbij al een klein stuk vormgeving naar voren komt. De klant moet al een stuk op weg worden geholpen naar het uiterlijk van het design. Zo krijgt de klant al een idee hoe het er uiteindelijk uit gaat zien. De klant wordt op deze manier niet op het einde verrast van het design. In dit stadium van het testen is het mogelijk, omdat het al duidelijk is

De resultaten van test 1 gaven aan dat: - De menu items vergelijk en download overbodig waren. Oplossing : De kaartweergave heeft heel veel ruimte over. Het vergelijken kan ook in een sidebar, dan heeft gebruiker de informatie links beschikbaar en rechts de afstand. Hier kan gesorteerd worden op soort product, prijs, plaatsnaam, alfabet en afstand vanaf de huidige locatie. - Het eerste scherm had te weinig functionele waarde. - Oplossing : Call to action op eerste pagina met daarbij de zoekfunctie. De zoekbalk springt meteen in het oog, midden op het scherm. De huidige app heeft de zoekbalk in de navigatiebalk geplaatst, wat niet meteen opvalt. Dit wordt besproken in 3.3.1.3 Concept analyse, boodschap. - Het menu makkelijk navigeerbaar is, omdat het sticky is. De gebruiker is snel terecht bij het scherm waar hij/zij naartoe wilt navigeren. Als de gebruiker weer terug wilt naar een ander scherm is het menu zo bij de hand. - Het zoeken naar verkooppunten bij reviews sneller kan. - Oplossing : Er is een dropdownmenu gemaakt met daarin de verkooppunten. Hier kan de gebruiker snel kiezen en het bespaart ruimte. Het besparen van ruimte en zorgen voor meer witruimte zorgt ervoor dat de gebruiker geïnteresseerd blijft. Zie hiervoor hoofdstuk 3.4.5 Design, structuur velden, voor de verantwoording hiervan. - De knoppen onderaan het scherm overbodig waren. Het menu is al sticky en de gebruiker kan dus al makkelijk terug naar boven.

welke functies er in de app komen. Zo werd er met minimale kleuren een nieuw wireframe gemaakt.

Naamgeving menu items ‘Zoek en vind’ bestond eerst uit 2 schermen, namelijk het eerste en het tweede scherm. Wanneer de gebruiker op dit item klikt is het onduidelijk op welk scherm de gebruiker terecht komt. Daarom is er een tweede menu item bijgekomen, overzicht verkooppunten. Dit is het menu item voor de kaart met verkooppunten. Daarnaast moet de gebruiker ten alle tijden een verkooppunt kunnen toevoegen. Aangezien het menu altijd beschikbaar is, is dit toegevoegd aan het menu. De rest van de menu items is blijven staan. Vergelijken Het vergelijken op de verschilende variabelen in de lijst kan makkelijker. De selectboxen waren niet groot, dit maakt het voor de gebruiker lastiger om erop te klikken. Daarom is er nu gewerkt met tabbladen. Er kunnen maximaal 2 tabbladen worden gekozen waarop

gesorteerd moet worden, omdat het met meer tabbladen niet meer specifiek genoeg is waarop gesorteerd moet worden. Vervolgens verschijnen hierbij de verkooppunten met daarbij in de eerste kolom de eerste variabele en in de tweede kolom de tweede variabele waarop gesorteerd is. Reviews Het lezen en plaatsen van reviews is gescheiden. Wanneer de gebruiker een review wil plaatsen moet hij/zij op de button klikken met de tekst ‘review plaatsen’ en dan verschijnt er een overlay. Zo is er meer ruimte voor het lezen van reviews per verkooppunt en meer ruimte om zelf een review te plaatsen. Contact In de footer zijn de contactgegevens zichtbaar met de Social Media links. Om meer witruimte te creëeren zijn de invoervelden langs elkaar geplaats in het contactformulier.

Uit deze resultaten kwamen de volgende schermen:

34

35

Resultaten test 3 Om het ontwerp nog makkelijker bruikbaar te maken voor de gebruiker, zijn er nog minder menu items teruggekomen. De home knop is overbodig, want de plaatsnaam kan ook in het tweede scherm worden ingevuld. Daarnaast is het onnodig om naar onder te scrollen voor het toevoegen van een locatie. Dit is een overlay geworden, die overal op de app kan verschijnen. Ook de reviews zijn veranderd in de vorm van een overlay. Deze twee items zijn niet altijd bedoeld voor alle gebruikers. Sommige gebruikers willen namelijk alleen de kaart zien met verkooppunten. Het toevoegen en reviews plaatsen/lezen is een optie.

Overlays De select list bij de reviews is weggehaald, omdat de overlay verschijnt wanneer de gebruiker op de reviews van een verkooppunt klikt. De reviews zijn dus gekoppeld aan een verkooppunt. Zo hoeft de gebruiker niet nog eens te zoeken naar een verkooppunt. Dit bespaart tijd en zo blijft de gebruiker geïnteresseerd. De structuur van de velden bij het toevoegen van een aspergelocatie zijn hetzelfde als het contactformulier om consistentie te bewaren.

Verder gaf de opdrachtgever aan dat het verkopen van andere producten niet bij de asperge app hoort. In dat geval zou het hele concept om moeten worden gegooid. De naam Appsperge duidt alleen asperges aan en geen andere producten. Ook de slogan en het logo zijn specifiek gericht op asperges. Deze conceptverandering past niet in de beschikbare tijd. Deze feedback is dus in strijd met de feedback van de doelgroep/enquêtes. Meer over dit onderwerp is te lezen in hoofdstuk 4 : Conclusies en aanbevelingen. De verkooppunten worden nu automatisch gesorteerd op kwaliteit in de lijst, op de kaart zijn de dichtstbijzijnde verkooppunten te zien. Aan de linkerkant is de about pagina te zien. Deze pagina is noodzakelijk voor de opdrachtgever, omdat het informatie geeft over de makers en het product zelf, wat zorgt voor een professionele app.

36

37

3.4.5 DESIGN Voor het design is er op zoek gegaan naar een goede achtergrondafbeelding. Ook wordt er in dit stadium gezocht naar het juiste font en de juiste kleuren. Voor de vierde versie van de wireframes is feedback ontvangen.

Achtergrond De achtergrond moet hoogwaardige kwaliteit bezitten. Dit houdt in een grote afbeelding met veel pixels. De afbeelding is zo duidelijk te zien op verschillende apparaten met verschillende groottes. Exitable maakt een serieuze app en wilt ook kwaliteit laten zien. Ook moet het een foto zijn die landelijkheid en natuurlijkheid uitstraalt. Daar gaat de app althans over, het kopen van asperges langs de weg. De kleuren moeten helder zijn, zodat er voldoende contrast ontstaat tussen de tekst, buttons en de achtergrond. Voor de eerste designs is er op zoek gegaan naar de juiste achtergrondafbeelding, het juiste font en de juiste kleuren.

Kleuren Voor de juiste kleuren is er gezocht naar kleur paletten die passen bij Appsperge. Zoals naar voren kwam in hoofdstuk 3.3.3.1 design principes, kleuren, zijn er complementaire paletten, drietal en analoge kleurpaletten. De kleur groen is essentieel, omdat groen staat voor de natuur, groenten en landelijkheid.

Zo bestaat een analoge kleurenset uit één kleur in verschillende tinten. Deze kleurenset heeft weinig contrast en trekt weinig aandacht. Dit zou op te lossen zijn met afbeeldingen die opvallen en een opvallend lettertype. Wanneer er gekozen wordt voor een complementaire set, zal er veel contrast zijn tussen kleuren. Dit contrast mag er niet voor zorgen dat de gebruiker teveel afgeleid wordt. Er moet een font tegenover staan dat weinig aandacht opeist. Ook de afbeeldingen mogen niet teveel naar voren komen. Appsperge wilt juist met afbeeldingen spreken naar de gebruiker en een gevoel overbrengen. Dus deze kleurenset bleek niet geschikt te zijn. Het is niet verstandig om veel kleuren te gebruiken op een website. Het beste is om 3 kleuren te gebruiken12. Wanneer een complementaire set wordt gekozen is er dus geen ruimte voor een tussenkleur om de aandacht van de gebruiker te verminderen. De laatste set die overblijft is een drietal. Deze set is bestudeerd en zou een goede optie kunnen zijn. De set bevat contrast maar blijft wel bij dezelfde tinten.

Logo In het logo zou een Nederlandse vlag moeten komen. Dit laat zien dat de asperge verkooppunten kwalitatief goed zijn13 Deze vlag zou verwerkt kunnen worden in het icoontje rechtsboven of in de tekst. Er zou ook een nieuw logo kunnen komen of de kwaliteit van de asperges zou op een andere manier op de app kunnen verschijnen. Het veranderen van het logo valt niet binnen de scope en kost veel tijd, dus het logo blijft zoals het was. Dit onderwerp komt nog aan bod in hoofdstuk 4 : Conclusies en aanbevelingen.

38

12

http://www.tigercolor.com/color-lab/tips/tip-01.html

13

Zie hoofdstuk 3.3.1.2 Concurrentie onderzoek, kwaliteit.

39

Definitieve design Bij de laatste feedbackronde is er gekeken naar een geschikte achtergrond en passende kleuren. Zoals duidelijk werd in hoofdstuk 3.3.1.1.1 Analytische gegevens, is de bounce rate momenteel erg hoog. Om ervoor te zorgen dat de gebruiker goed door de pagina geleid wordt zonder dat hij teveel afgeleid wordt, zijn er goede kleuren voor nodig die niet teveel afleiden maar wel op kunnen vallen op momenten dat er actie moet worden ondernomen. Om tot de beste kleuren te komen is er onderzoek gedaan naar de meest recente trend : flat design. Bij een flat design worden versierende elementen weggelaten, omdat dit alleen maar een afleiding is voor de gebruiker.14 De gebruiker ziet niet waar de website echt voor bedoeld is wanneer er teveel aandacht gevraagd wordt van de gebruiker. Dus door minimalistisch elementen te gebruiken, blijft de gebruiker

Font geïnteresseerd. Zo moeten er ook niet teveel kleuren gebruikt worden. De onderstaande kleuren zijn gekozen voor het definitieve design. Het zijn alle 3 flat design kleuren, die horen bij een flat design. Deze kleuren zijn zo speciaal omdat witte en zwarte tekst er altijd goed op te lezen is. Groen voor de natuurlijke uitstraling van de asperges, geel voor de call to actions en grijs voor de minder belangrijke acties.

Er is gekozen voor Avenir, een geometisch font. Dit font bevat even dikke en dunne lijnen per letter. Het is een font dat populair is, omdat het rustig oogt en dus fijn leesbaar is door zijn evenredigheid16. Uit het onderzoek kwam een hoge bounce rate naar voren17. Daarnaast ziet de gebruiker liever een kaart dan een lijst. Hieruit kan geconcludeerd worden dat de gebruiker liever een visueel beeld ziet dan veel tekst (door de kaartweergave) en dat de gebruiker momenteel te weinig of teveel prikkels binnenkrijgt (door de hoge bounce rate) waardoor hij/zij de app snel verlaat. Er moet dus een balans komen in tekst en beeld. Door rust te bewaren in de tekst zullen de afbeeldingen meer opvallen.

Structuur velden

#03cd6a

Aandacht op kleur In het nieuwe design is er minder kleur gebruikt bij de pagina ‘Over Appsperge’. Dit kleurvlak was eerst helemaal groen. De aandacht van een gebruiker gaat meteen naar een kleurvlak15. Door overal op de website

#f4c500

#bdc3c7

In een contactformulier is het belangrijk dat de gebruiker zo min mogelijk oog bewegingen hoeft te maken18. Er wordt weinig witruimte gebruikt tussen de velden en de labels staan in het invoerveld. Ook staan de velden onder elkaar, zodat de gebruiker niet helemaal van links naar rechts hoeft te lezen. Om het formulier heen is wel genoeg witruimte over.

kleurvlakken te gebruiken wordt het niet meer beschouwd als sterke prikkel. De aandacht van de gebruiker valt weg omdat er zoveel prikkels zijn. Het scherm ‘Over Appsperge’ is niet het belangrijkste van de app, dit is juist het hoofdscherm met de call to action en het invoeren van de plaatsnaam. Daarom kunnen hier kleurvlakken worden weggehaald.

40

14

http://www.creativebloq.com/graphic-design/what-flat-design-3132112

15

deze theorie is te vinden in hoofdstuk 3.4.3.1 Design principes

16

Zie hoofdstuk 3.4.3.1 Design principes. Font

17

Zie hoofdstuk 3.4.1.3 Analytische gegevens, bezoekersgegevens.

18

http://blog.woorank.com/2013/04/top-3-sign-up-form-optimization-tips/

41

X

Design webapp Desktop De overlays hebben niet de volledige breedte gekregen van het scherm. De gebruiker ziet dus nog een groot deel van het onderste niveau. Dit zorgt ervoor dat de gebruiker weet op welk niveau hij/zij zit en ook makkelijk terug kan naar niveau 0. Net zoals bij het contactscherm zijn de labels van het toevoegformulier in de invoervelden geplaatst. Er wordt in hoofdstuk 3.4.5 Design, structuur velden, uitgelegd waarom dit

zo is besloten. De buttons hebben net als de invoervelden een ronde rand gekregen. Zo blijft het ontwerp consistent, waardoor de aandacht van de gebruiker ook behouden blijft. Op de rechterpagina is aan de bovenkant de overlay te zien voor het plaatsen van een review en daaronder de overlay voor het toevoegen van een aspergelocatie.

Wanneer de gebruiker op ‘hoe werkt het’ klikt, verschijnt de video over de achtergrond. Zo wordt het hele blikveld van de gebruiker in beslag genomen. De aandacht gaat volledig naar de video, wat ook de bedoeling is. Om de gebruiker zelf controle te geven over het afsluiten van de video is een button geplaatst aan de onderkant met de tekst ‘ga terug’. Deze is niet op het videoscherm geplaatst, dit zou de aandacht afleiden. Het maken van de video behoort niet tot de scope.

42

43

Design webapp mobiel De webapp voor op de mobiel en de mobiele app zijn volledig aangepast aan het design van de desktop app. De buttons zijn groot genoeg om aan te raken met een vinger. Ook de tekst is leesbaar voor kleinere schermen. In het hoofdscherm is de call to action verdwenen. Omdat de gebruiker nu al op een mobiel toestel actief is, is het makkelijker om de app te downloaden. Bij ‘Over Appsperge ’ staat nog eens hoe de app gedownload kan worden.

Bij de mobiele webapp is er een hamburger icoon toegevoegd als menu. Wanneer de gebruiker hierop klikt, opent het menu. Dit is gebruikelijk voor mobiele apps. Er is te weinig ruimte voor een horizontaal menu.

44

45

Design mobiele app Op de voorpagina van de mobiele app en op het scherm ‘Over Appsperge’ zijn de icoontjes te vinden die linken naar social media. Wanneer de gebruiker klikt op ‘zoek asperge verkooppunten’, scrollt het beginscherm naar boven en verschijnt het scherm locatie zoeken. Het beginscherm is immers niet meer nodig, net zoals bij de webapp. Het menu is onderin te zien, zoals dat vaak voorkomt bij mobiele apps. De gebruiker gaat ervan uit dat de knoppen onderin te vinden zijn, omdat dit gebruikelijk is voor apps. Daarom is dat bij deze app ook zo uitgewerkt. De menu items bestaan uit een zoekicoon, een plusicoon voor het toevoegen van een verkooppunt en een telefoonicoon voor contact. Via het contactformulier kan de gebruiker naar ‘Over Appsperge’. Er is gekozen om voor dit scherm geen menu icoon te

platsen, omdat dit een scherm niet de hoogste prioriteit heeft voor de app. De gebruiker heeft de app gedownload en heeft daar bewust voor gekozen om asperges te zoeken. Het geselecteerde menu icoon is donker gekleurd. De overige menu icoontjes zijn lichter van kleur. Als de gebruiker eenmaal bij de app terecht is gekomen, zal hij/zij sneller een verkooppunt willen toevoegen dan eerst helemaal willen uitzoeken waar de app over gaat. Het toevoegen van de app staat hier dus centraler. Wanneer de gebruiker op een verkooppunt klikt in de kaart, verschijnt het pop-up scherm met daarin de mogelijkheid om de reviews te bekijken. Het reviewscherm schuift dan boven op het huidige scherm.

Overlays Een belangrijk verschil met de webapp is dat hier de twee schermen ‘Over Appsperge’ en ‘Reviews’ overlays zijn en dat dit bij de webapp ‘Voeg een aspergelocatie toe’ en ‘Reviews’ zijn.

46

47

3.4.6 FRONT END 3.4.6.1 PROGRAMMA’S EN FRAMEWORKS

Foundation

Adobe

Zurb

Dreamweaver

De front end is gemaakt met Foundation. Dit is een responsive framework. Er is gewerkt met HTML/CSS en Jquery. Bij Foundation bestaat een pagina uit 12 delen. Het is een getal dat makkelijk gedeeld kan worden.

Er is gewerkt met Adobe Dreamweaver, omdat dit programma de mogelijkheid biedt om code en ontwerp naast elkaar te zien of apart. Daarnaast is het programma beschikbaar op Windows en Mac OS operating systems.

Indeling blokken

De kaart heeft 9 delen. Daarboven op is de lijst geplaatst met 3 delen. De lijst kan zo lang mogelijk worden in de lengte en heeft daarom maar 3 delen. Hij heeft zijn breedte niet nodig. De Google Maps kaart is bekend bij velen en dat maakt het al snel duidelijk dat het gaat over plaatsen vinden. In een lijst hoeven niet per se plaatsen te staan. Wat dit betreft is een kaart dus veel herkenbaarder dan een lijst, wat ervoor zorgt dat de gebruiker weet dat daar de verkooppunten op verschijnen. Het contactformulier bestaat uit 1 blok van 12 delen. Met behulp van padding wordt aangegeven hoeveel witruimte er om het formulier heen zit. In hoofdstuk 3.4.5 Design, structuur velden, staat uitgelegd waarom hier 1 groot blok staat.

Iedere pagina is ingedeeld in blokken. Aantal elk blok wordt een percentage gebonden. Op de rechterpagina is de webapp te zien met de indeling van de blokken. De navigatie, de header en over Appsperge bestaan uit 2 blokken. Het logo heeft niet zoveel ruimte nodig als het formulier en de menu items. Daarom heeft het logo maar 3 delen van de 12 en heeft het menu 9 delen. De call to action heeft 40% van het geheel en het formulier heeft 60% van de totale breedte. Deze breedte is relatief en afhankelijk van de breedte van het scherm. De percentages blijven hetzelfde.

48

49

3.4.6.2 CODE

3.4.6.2.1 Validator resultaten

3.4.6.2.2 Browserstack resultaten

Fonts integreren

Wanneer de app gescand wordt door de validator, is te zien dat er veel dezelfde soort errors in de code zit. Zo is het belangrijk dat een afbeelding een alt attribuut met zich meedraagt. Dit is belangrijk omdat afbeeldingen ooit niet zichtbaar kunnen zijn door bijvoorbeeld een leesfout en dan moet er een alternatief worden getoond in de vorm van een stuk tekst. Zo weet de gebruiker wat voor afbeelding er eigenlijk had moeten staan. Daarnaast hebben tekstblokken titels. De titels beginnen bij H1 en lopen tot H6. In de eerste testfase zaten er titels in die begonnen bij H7. Dit is niet de bedoeling. Wanneer een titel een andere opmaak heeft dan de andere 6 titels, moet er een class worden toegevoegd. Deze titel wordt dan afzonderlijk gestijld. De laatste fouten waren te vinden in de id’s. Een id wordt alleen maar gebruikt als het echt niet anders kan. Een id is individueel en kan maar 1x gebruikt worden. Het is daarom makkelijker om classes te gebruiken.

Via Browserstack kan een website bekeken worden op meerdere browsers. Sommige browsers ondersteunen bepaalde lettertypen niet of andere functies zoals video’s of plugins. Daarom moet een website altijd worden getest op verschillende browsers. Gebruikers in Nederland gebruiken niet allemaal Internet Explorer of Chrome, maar er zijn nog meer browsers zoals Firefox en Opera. Zo gebruikt ongeveer 3-6% Internet Explorer 6, 7 of 820. Omdat dit maar een klein aandeel is, is de oudst getestte browser IE 9. Chrome wordt het meeste gebruikt, maar liefst 48%.

Er zijn verschillende soorten fonts beschikbaar om op te nemen in het stylesheet TTF - Truetype fonts zijn ontworpen rond 1980 door Apple en Microsoft. Dit font is beschikbaar voor de Mac OS en Microsoft Windows operation systems. TTC - TrueType Collection fonts zijn alleen beschikbaar op Mac OS operations systems.

een .woff extensie nodig. Voor het laten zien van de overlays is een jQuery plugin gebruikt, Reveal.js. Deze plugin is gemaakt voor Foundation gebruikers. Door bovenin het document links te plaatsen naar de css en javascript files van de plugin, wordt het mogelijk gemaakt om overlays te genereren.

Plugin Reveal.js

Avenir is een font met een .ttc extensie. Dit font is daarom geconverteerd naar een .ttf en een .woff extensie, die beschikbaar zijn voor Windows19. Zo is een .ttf extensie beschikbaar voor Chrome, Firefox en Internet Exploror10+. Voor Internet Explorer is

3.4.6.3 TESTEN In week 16 zijn de tests begonnen voor de front end. De webapp is getest op 2 manieren. Er is getest via een website validator. Door de url van de site in te vullen op validator.w3.org, wordt de site gescand en worden fouten aangegeven. Er worden fouten of waarschuwingen gegeven. Daarnaast is de site getest op meerdere browsers met browserstack.com.

50

19

http://www.w3schools.com/css/css3_fonts.asp

20

http://www.sitepoint.com/browser-trends-february-2015-us-ie8-rebound/

Goedkeuring Validator

51

EVALUATIE

4. CONCLUSIES EN AANBEVELINGEN

Er is een re-design gemaakt voor Appsperge. Deze app is ontwikkeld voor op de desktop en mobiel. Er is onderzoek gedaan naar de doelgroep. Daaruit kwamen een aantal conclusies. De doelgroep bestaat uit personen van 40 jaar en ouder en maar liefst 60% van deze doelgroep is actief op social media, waarvan Facebook het populairste medium is. Zij bezoeken het verkooppunt met de auto of de fiets. Om deze doelgroep te bereiken zullen online en offline media middelen worden ingezet. Zo wordt er een post geplaatst op Facebook en zullen er posters worden opgehangen op borden langs fietspaden. Om de huidige gebruiker te behouden wordt er een review- en ratingsysteem toegevoegd in de app. Door reviews te plaatsen wordt het verkooppunt beoordeeld door de gebruiker. Alle bezoekers van de app kunnen deze reviews lezen. Met een ratingssysteem is duidelijk te zien welk verkooppunt de beste kwaliteit asperges verkoopt. De status van een verkooppunt wordt afhankelijk van de opmerkingen en de beoordelingen van de gebruikers.

De testresultaten en de resultaten van het onderzoek zijn verwerkt in het product, op een aantal punten na. Zo kan de gebruiker niet per verkooppunt vergelijken op prijs, is er niet te zien welke andere producten nog meer te koop zijn en kan er niet gesorteerd worden op soort product. Het is verder niet snel af te lezen hoeveel reviews een verkooppunt heeft en er kan daarom ook niet gesorteerd worden op aantal reviews per verkooppunt. Omdat deze onderdelen niet in de app staan zal er minder stimulans zijn voor de nieuwe gebruiker en de huidige gebruiker om de app te (blijven) gebruiken. Verder sluit het logo niet genoeg aan bij het onderwerp. Er mist een kwaliteitsafbeelding, de Nederlandse vlag. Deze vlag komt niet terug in het design en ook niet in het logo. Wanneer er meerdere soorten producten worden verkocht door verkooppunten zou het slim zijn om de naam, het logo en de slogan te veranderen. Nu zijn deze onderdelen gefocust op asperges, terwijl het een meer algemene vorm zou moeten aannemen. Daarnaast zouden er beter interviews kunnen worden afgelegd voor het verzamelen van informatie over de doelgroep dan het afnemen van enquêtes via de mail. Online contact leggen met de doelgroep is minder persoonlijk dan contact leggen in het echte leven. Het testen van de wireframes is nu volledig gedaan door de collega’s van Exitable. Dit is niet de doelgroep van Appsperge. Deze resultaten kunnen afwijken van de resultaten die er zouden zijn geweest als er met de

52

Na 19 weken is Appsperge klaar. In deze periode heb ik gewerkt aan verschillende vaardigheden. Zo heb ik mijn design skills verbeterd door online producten te designen en een klein aandeel offline producten. Het ontwerpen van websites is weer een hele andere tak van het vakgebied dan het ontwerpen van posters. Niet alleen door aan Appsperge te werken, maar ook door te werken aan andere bijkomende opdrachten van Exitable heb ik geleerd anders te kijken naar design. Daarnaast heb ik gewerkt met bekende maar ook nieuwe programma’s. Met Axure heb ik de wireframes en prototypes opgezet en getest. Zo leerde ik een nieuwe manier van testen kennen en zag ik hoe je wireframes in een bedrijf maakt. Zo nu en dan heb ik mogen werken met Drupal. Het ging dan vooral over het toevoegen van informatie en begrijpen hoe het CMS in elkaar steekt. Bij ontwerp opdrachten heb ik gewerkt met Photoshop en Illustrator. Deze programma’s kende ik al, maar ik heb ze nog beter onder de loep kunnen nemen. Verder merkte ik dat iedere instantie weer andere voorkeuren heeft. Op school worden wireframes niet uitbundig behandeld en bij Exitable is dit juist een heel belangrijk onderdeel van een product. Het onderzoek daarentegen is op school

een belangrijke factor, bij Exitable is dit minder belangrijk. In het begin heb ik heel veel aandacht besteed aan het onderzoek, terwijl dit niet nodig was voor Exitable. Veel functionaliteiten van het uiteindelijke ontwerp zijn daar terecht gekomen door de wensen en eisen van de opdrachtgever, niet door de resultaten van de tests en het onderzoek. In deze periode heb ik veel ruimte gekregen om te werken aan Appsperge als projectmanager. Het is volledig mijn eigen initiatief om het project lopende te houden. Ik kreeg hierbij in het begin redelijk veel sturing, maar naarmate de weken voorbij gingen kreeg ik minder sturing van mijn opdrachtgever/stagebegeleider. Hier had ik moeite mee, want ik schatte de benodigde tijd van een taak soms onnauwkeurig in. Tot slot waren er nog een aantal kleine leermomenten. Zo was het in het begin lastig om hele dagen geconcentreerd te werken. Op school wordt er even gewerkt en daarna is het tijd voor wat ontspanning. Tijdens mijn stage heb ik de hele dag achter elkaar gewerkt. Hier moest ik de eerste weken aan wennen, maar daarna ging dit over.

53

Bijlagen

LITERATUURLIJST Stack Overflow

Smashingmagazine

Stack Overflow is a question and answer site for professional and enthusiast programmers - http://stackoverflow.com/

Button Color Contrast - http://www.smashingmagazine.com/2010/12/14/ what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/

Wikipedia

DTelepathy

Wikipedia is een encyclopedie die tracht inhoud te bieden die vrij herbruikbaar, objectief en verifieerbaar is. - http://www.wikipedia.nl/

Color Theory - http://www.dtelepathy.com/blog/design/color-theory

Foundation Docs Documentatie van het Foundation framework - http://foundation.zurb.com/docs/

Top 3 Sign-Up Form Optimization Tips - Http://blog.woorank.com/2013/04/top-3-sign-up-form-optimization-tips/

JSFiddle

Tigercolor

Test and share JavaScript, CSS, HTML or CoffeeScript online. - https://jsfiddle.net/

How many color should you use in your design? http://www.tigercolor.com/color-lab/tips/tip-01.html

Google

W3Schools Font

Wereldwijde zoekmachine. - https://www.google.nl

CSS3 Web Fonts - http://www.w3schools.com/css/css3_fonts.asp

Drupal Documentatie van het CMS Drupal. - https://www.drupal.org/documentation

Creativeblog

Axure

The beginner's guide to flat design - http://www.creativebloq.com/graphic-design/what-flat-design-3132112

Documentatie van Axure, prototype en wireframe maker. - http://www.axure.com/learn

Sitepoint

Saxion hogescholen Kweken van asperges - http://www.saxion.nl/designentechnologie/site/onderzoe/onderzoeksprojecten/aspergeoogstrobot/

Newcom research consultancy Nationale Social Media onderzoek 2014 (Het grootste trendonderzoek van Nederland naar het gebruik en verwachting van Social Media) Auteurs dhr. Steven Boekee, drs. Chantal Engels, drs. Neil van der Veer

54

Woorank Blog

I Project initiatie document II Testrapport III Enquête doelgroep IV Projecten Exitable I Rockpanel II White Spring Sensation III Jan Linders IV Bakker Magnetics V Analyse toolbox VI Gymna

Browser Trends February 2015: The US IE8 Rebound http://www.sitepoint.com/browser-trends-february-2015-us-ie8-rebound/

Pinterest Discover and save creative ideas - https://www.pinterest.com/

Energy Life De helende werking van asperges- http://www.energy-life.nl/gezondheid/asperges-seizoen-het-witte-goud-geopend/

Portal FHICT

Usability

Design principes AVP - https://portal.fhict.nl/IMD/P7P8oud/Lesmateriaal/AVP-wk5.pdf

Het startpunt voor usability en user experience http://www.usability.nl/2013/trend-alert-single-page-websites/

55

44

Documenthistorie Revisies Versie

Status

Datum

0.1

Concept

11-02-15

0.2

Concept

25-02-15

• Je proces is niet helemaal duidelijk in je document. ik wil graag iets duidelijker zien hoe je het project gaat aanpakken qua onderzoek, design, realisaties etc.

Status

Datum

Wijzigingen

Goedgekeurd

05-03-15

Project Initiatie Document Project initatie document

I

Wijzigingen • Voorkom herhaling. • Meer downloads is niet een directe doelstelling. • We willen vooral zoveel mogelijk aspergelocaties in kaart brengen en de app zo gebruiksvriendelijk mogelijk maken. Downloads zijn dan een gevolg. • Nu Ilker voor de native app gaat zorgen zou ik die er bij deliverables beter in verwerken. Ook vermelden dat er één back end komt voor alle soorten apps. • Appsperge hoeft zich niet te beperken tot Nederland, dat moet ook uit onderzoek blijken. Misschien is Duitsland wel heel interessant. • Doorlooptijd lijkt aan de korte kant..neem de tijd die je denkt nodig te hebben + wat extra’s. • Probeer een visueel inzichtelijke planning te maken middels horizontale staafdiagrammen. • Laat de autocorrectie even over het document gaan.

Goedkeuring

Versie 1

56

57

Managementsamenvatting

Inhoudsopgave

Doel van dit document

Managementsamenvatting Doel van dit document Aanleiding Globale aanpak Globale kosten en doorlooptijd Inleiding Doel van dit document Achtergrond Projectdefinitie Projectdoelstellingen Gekozen oplossing of aanpak Deliverables/requirements Scope van het project Afhankelijkheden Randvoorwaarden en eisen Projectorganisatiestructuur Rollen en verantwoordelijkheden Opdrachtgever Projectmanager Bijlage A : Communicatieplan Belanghebbenden bij het project Communicatiekanalen Bijlage B : Planning

Dit document heeft als doel het project te definiëren, als basis te dienen voor het management ervan en de beoordeling van het succes van het project mogelijk te maken. De twee belangrijkste redenen voor het gebruik van dit document zijn: - Om er zeker van te zijn dat het project een gezonde basis heeft voordat de opdrachtgever gevraagd wordt zich aan het project te committeren. Om te dienen als basisdocument op grond waarvan de opdrachtgever en de projectmanager de voortgang en wijzigingen kunnen toetsen en bewaken en vragen omtrent geldigheid van het project tijdens de uitvoering ervan kunnen beoordelen.

Aanleiding De (web)app van Appsperge heeft een klinische uitstraling, dit moet een meer natuurlijkere uitstraling worden. Ook moet er meer interactie op de website komen. Dit zorgt voor meer tevredenheid bij de gebruiker.

Globale aanpak

58 58 58 58 58 60 60 60 61 61 61 61 61 61 61 62 63 63 63 64 64 64 65

Om te beginnen zal er een taakverdeling worden gemaakt. Om te monitoren of deze taken goed worden opgevolgd zal er elke maandagmorgen om 09.30uur een stand-up worden georganiseerd waarin ieder projectlid een korte toelichting zal geven over wat hij/zij gedaan heeft.

Globale kosten en doorlooptijd In totaal zijn er 95 dagen waarin er gewerkt wordt aan het project. Per week zullen dit ongeveer 2 dagen zijn waarin er fulltime aan gewerkt kan worden.

58

46

59

Inleiding

Projectdefinitie

De komende 19 weken zal er worden gewerkt aan het project Appsperge. Appsperge is een (web)app die op basis van de huidige locatie asperge verkooppunten toont.

Projectdoelstellingen

Doel van dit document In dit document wordt uitgebreid ingegaan op het project Appsperge, dat dient als contract tussen de opdrachtgever en de projectmanager. De belanghebbenden worden geïnformeerd over het te leveren projectresultaat, de projectorganisatie, de projectplanning, de projectbeheersing en de projectcommunicatie. Dit zorgt ervoor dat t er geen misverstanden ontstaan tussen de twee partijen.

Achtergrond Twee jaar geleden heeft José Luis Almagro deze app bedacht en ontwikkeld om zo aspergeboeren vindbaar te maken en onder de aandacht te brengen. Het concept trok provinciale belangstelling en werd op verschillende radiostations genoemd. Met meer dan 150 boeren is de app redelijk goed gevuld en uiteindelijk meer dan 550 keer gedownload.

Dit project heeft als doel om zoveel mogelijk aspergelocaties in kaart te brengen en de app zo gebruiksvriendelijk mogelijk te maken. Uiteindelijk zal dit zorgen voor meer downloads. Gekozen oplossing of aanpak Om een goed eindresultaat neer te zetten is besloten om het project op te delen in een aantal facetten. Het project zal bestaan uit onderzoek, een review van het concept, een re-design van de (web)app en uiteindelijk een app. Deliverables/requirements Uiteindelijk zullen er een aantal producten worden opgeleverd met bijbehorende requirements. Deze producten zijn ingedeeld in de onderdelen concept, design, ontwikkeling en ontwikkeling back-end. Concept Onderzoek Appsperge Aangescherpt concept/ plan van aanpak Design Design-research Wireframes & Prototype(s) Testresultaten Design Ontwikkeling Responsive template HTML5/CSS3/ jQuery Gebruik van Foundation SASS/Codekit

60

Ontwikkeling back end 1 back end systeem voor de webapp en native apps. Toevoegen / wijzigen van Locaties Onderzoek met daarin functioneel ontwerp en technisch ontwerp Integratie van Mapbox / Google Maps Reviewsysteem Feed voor inladen in native apps (iPhone / Android) Scope van het project Voor dit project zal er worden gewerkt aan een aantal onderdelen. Dit is het onderzoek, het design, de ontwikkeling in front end en back end en het testen van het product. Afhankelijkheden Beschikbaarheid resources Oponthoud door andere projecten/opdrachten Beschikbaarheid belanghebbenden (opdrachtgever, projectmanager, projectleden, stakeholders)

Randvoorwaarden en eisen Het project zal binnen 95 dagen worden afgerond. De (web)app moet responsive worden opgezet, zodat hij geschikt is voor elk type apparaat Voor het front end gedeelte wordt er gebruik gemaakt van het framework Foundation Voor de back end wordt er gebruik gemaakt van het systeem Drupal De pagina moet scalable zijn De pagina moet snel werken De pagina moet makkelijk te beheren zijn

61

Projectorganisatiestructuur

Rollen en verantwoordelijkheden Opdrachtgever Rol : Projectborging en risiconemer van het project Verantwoordelijkheden Het opstellen van de projectopdracht Het verzorgen van een draagvlak in de projectomgeving Het ondersteunen bij het voorzien van het project van adequate bemensing en middelen Het vaststellen van (scope) wijzigingen Het toetsen van het eindresultaat Het steunen van het project door te helpen problemen op te lossen Het toetsen en vaststellen van fase resultaten en rapportages

Opdrachtgever / Design

Projectmanager Rollen : Ontwerper, controleur, spreker, coach, expert en risico manager.

Bedrijfsbegeleider/opdrachtgever José Luis Almagro

Verantwoordelijkheden

Concept, design & front end Projectmanager Jonique Raemakers

-

Het verzorgen van de dagelijkse leiding van een project Het afspraken maken over doelstelling en randvoorwaarden Het beheersen van de voortgang Het plannen, verdelen en bewaken van de noodzakelijke activiteiten. Het verantwoordelijk zijn voor de fasering en de projectbeheersing. Het nemen van corrigerende maatregelen, wanneer resultaten niet behaald lijken te worden. Verantwoording afleggen aan de opdrachtgever. Het overdragen van de resultaten aan de opdrachtgever, bij afsluiting van het project.

Taken Review concept Re-design Ontwikkeling front end

Back end

Projectlid Webapp Stan Smulders

62

Projectlid Mobiele app Ilker Mengi

63

Bijlage A : Communicatieplan

Bijlage B : Planning

Belanghebbenden bij het project Wie

Opdrachtgever

Projectmanager

Projectlid

Namens

Belang

Taaknaam

Begindatum

Einddatum

Door wie

vorm

PID/Projectplan

9/2/15

20/2/15

Jonique

Communicatie

José Luis

Oplevering van

Verbale

Onderzoek doelgroep

9/2/15

25/2/15

Jonique

Almagro

positief eindresultaat

communicatie

Aangescherpt concept/

23/2/15

9/3/15

Jonique

plan van aanpak Jonique

Nieuwe competen-

Verbale en non-verbale

Design research

23/2/15

10/3/15

Jonique

Raemakers

ties verwerven

communicatie

Design

9/3/15

16/3/15

Jonique

Ilker en

Nieuwe competen-

Verbale en non-verbale

Usability testing

9/3/15

16/3/15

Jonique

Stan

ties verwerven

communicatie

Testresultaten verwerken in plan

16/3/15

23/3/15

Jonique

Nieuw design

16/3/15

23/3/15

Jonique

Testresultaten in rapport

23/3/15

30/3/15

Jonique

Front end

30/3/15

13/4/15

Jonique

Back end

30/3/15

19/6/15

Jonique

23/3/15

10-6-15

Stan & Ilker

Wireframes & Prototypes

Communicatiekanalen

Van

Naar

Projectmanager

Opdrachtgever

Informatie

Frequentie van data

Verantwoording

Dagelijks

afleggen Opdrachtgever

Projectleider

Ondersteunen

Dagelijks

project Projectmanager

Projectlid

Briefen over

Dagelijks

bewegingen project

64

65

Inhoudsopgave

Testrapport Project initatie document

Samenvatting Pre questionnaire Scenario’s Scenario’s webapp Scenario’s mobiele app Post questionnaire Introductie Methodologie Resultaten Conclusie Nieuwe wireframes

68 68 68 68 68 68 69 69 72 78 79

II

66

67

Samenvatting

Introductie

Methodologie

Appsperge is een app die op basis van de dichtstbijzijnde locatie asperge verkooppunten laat zien. Deze app heeft behoefte aan verbetering. Om tot een nieuw ontwerp te komen worden er wireframes gemaakt die getest worden. Om vanuit de gebruiker te kijken, wordt de app makkelijker en sneller te gebruiken. De test bestaat uit verschillende onderdelen.

Appsperge behoeft een nieuw design. Voordat deze gemaakt worden zullen er eerst wireframes worden gemaakt. Door de wireframes van Appsperge te testen, wordt er eerst gelet op de structuur van de app en niet gekeken naar het design. De gebruiker kan dus niet onbewust oordelen over het design van de app. Het doel van de tests is tot nieuwe wireframes te komen, die zorgen voor een prettige ervaring bij de gebruiker. Uiteindelijk zal de gebruiker sneller en makkelijker kunnen omgaan met de apps.

Er zijn 2 verschillende tests opgezet. De tests verschillen qua inhoud op scenario’s. Één test is bedoeld voor de webapp en de andere test is bedoeld voor de mobiele app. De test is afgenomen bij twee collega stagiaires van Exitable. Zij volgen allebei de studie MBO ICT, wat gericht is op applicatiebeheer. De tests zijn overdag afgenomen in de brainstormruimte. Dit is een ruimte van ongeveer 3 bij 5 meter. Alleen de testpersonen en de testafnemer waren afwezig.

Om te beginnen met een uitleg over de bedoeling van deze test. De testpersonen hebben ook recht om te weten wat er uiteindelijk wordt gedaan met de testgegevens en waarvoor de test bedoeld is. De uitleg bevat ook de voorwaarden van de test. Er zal bijvoorbeeld ook een opname kunnen worden gemaakt van de test. Daarnaast zullen er van te voren een aantal vragen worden gesteld aan de testpersoon, dit wordt pre questionnaire genoemd. Vervolgens zal de testpersoon de scenario’s maken. Na de test zullen er nog een aantal vragen worden gesteld, dit wordt de post questionnaire genoemd. De tests zijn afgenomen bij 2 collega stagiaires, die momenteel de studie MBO ICT volgen en in leerjaar 3 of leerjaar 4 zitten.

Pre questionnaire Voor alle tests, in totaal 5 tests, waren de scenario’s duidelijk omschreven. Alle testpersonen hadden moeite met het hardop denken tijdens de test.

Scenario’s

Scenario’s webapp Week 1 De scenario’s 3 en 8 zijn niet behaald. De tijdsduur daarintegen is erg kort. Dit komt omdat de testpersonen op een verkeerde knop drukten en vervolgens niet meer konden navigeren naar het einddoel. Bij scenario 8 was de uitwerking van de wireframes niet duidelijk. De testpersonen konden de juiste Twitterknop niet vinden. De scenario’s 4 en 1 duurden erg lang bij de eerste testpersoon, maar bij de tweede testpersoon totaal niet. De eerste testpersoon heeft ook meerdere opdrachten niet behaald. De totale tijd van de testpersonen over alle scenario’s verschillen extreem. Dit kan te maken hebben met de algemene ervaring van de testpersonen op het gebied van wireframes en gebruik van apps.

Dit document is opgedeeld in hoofdstukken. In het eerstvolgende hoofdstuk zal de methodologie uitgelegd worden. Hier staat vooral in hoe de tests zijn afgenomen, met wie, welke procedure er is gevolgd en ook hoe de probleemstelling is aangepakt. Het volgende hoofdstuk zal gaan over de resultaten van de scenario’s, waarin ook de nieuwe wireframes te zien zijn. Er wordt afgesloten met de conclusie en de eerste wireframes na alles tests.

Om te beginnen is de test uitgelegd aan de testpersoon. Dit houdt in de procedure, de inhoud van de scenario’s en de rechten en plichten van de testpersoon. Deze procedure houdt in: een aantal vragen die van te voren worden gesteld, het uitvoeren van de scenario’s en tot slot een aantal vragen achteraf. Het wordt de tester duidelijk gemaakt wat de voorwaarden zijn en vragen ook om zijn/haar goedkeuring. Dit leggen we vast aan de hand van een contract met handtekeningen van de testpersoon en de testafnemer. Tijdens de test zijn er meetbare gegevens vastgelegd. Dit zijn: tijd, aantal clicks, wel/niet behaald, studie, leeftijd. Op basis van de feedback van de testpersonen hebben is de manier van testen en de inhoud van de test aangepast.

Week 2 Scenario’s 1 en 6 zijn bij één testpersoon niet behaald. De andere testpersoon heeft ook hier wel alles behaald. De Twitterpagina was nog steeds niet te bereiken. Bij scenario 1 werd een onjuiste button aangeklikt. Ook het aantal clicks was te veel voor het voltooiien van de opdracht. Dit lag vooral aan het ontwerp zelf. Scenario’s mobiele app Week 2 Alle scenario’s zijn behaald. Het 3e scenario duurde 13 seconden en er werden in totaal 7 clicks gemeten. Dit heeft te maken met het aantal clicks van de sterren die gegeven moesten worden, dus deze clicks waren nodig om tot het eindresultaat te komen.

Post questionnaire

68

De moeilijkste scenario’s volgens de testpersonen waren ook de scenario’s waar de meeste clicks werden geteld. Dit geld ook voor de makkelijkere scenario’s.

69

De scenario’s van de webapp zien er als volgt uit :

Beschrijf de vragen die je vooraf en achteraf aan de deelnemers wil stellen.

Je gaat een dag naar Nederweert. Zoek de asperge verkooppunten die in Nederweert liggen. Je bent zelf een aspergeboer en verkoopt asperges, maar je staat nog niet op de kaart. Je wilt jezelf toevoegen aan de kaart. Voeg jezelf toe. Je bent zeer tevreden over boerderijwinkel Konings. Geef boerderijwinkel Konings 3 sterren voor de kwaliteit van de asperges. Je bent benieuwd naar de verschillen tussen Boer Maassen en Boerderijwinkel Konings. Vergelijk deze twee boeren met elkaar. Je gaat wekelijks naar dezelfde aspergeboer asperges kopen. Bij boer Raemakers hebben ze heerlijke asperges. Je wilt dit delen met de andere appgebruikers. Plaats een positieve review bij boer Raemakers. Je wilt je reactie delen op Facebook. Deel deze reactie. De webapp is behoorlijk verbeterd. Dit wil je graag meegeven aan de maker(s). Geef een reactie op de webapp via het contactformulier. Je bent benieuwd naar de Twitterpagina van Appsperge. Ga naar de Twitterpagina. Je wilt in het weekend graag fietsend naar het dichtstbijzijnde verkooppunt. Zoek de fietsroutes op van het dichtstbijzijnde verkooppunt. Je wilt graag de app downloaden. Ga naar de downloadbutton voor de Android Play Store. (alleen voor webapp)

De scenario’s van de mobiele app zien er als volgt uit : Je gaat een dag naar Nederweert. Zoek de asperge verkooppunten die in Nederweert liggen. Je bent zelf een aspergeboer en verkoopt asperges, maar je staat nog niet op de kaart. Je wilt jezelf toevoegen aan de kaart. Voeg jezelf toe. Je bent zeer tevreden over boerderijwinkel Konings. Geef boerderijwinkel Konings 5 sterren voor de kwaliteit van de asperges.

Vooraf: -Wilt u de inleiding lezen en mocht u vragen hebben, wilt u deze dan stellen? -Wilt u aub hard op denken tijdens de test, zodat wij te weten komen wat uw denkproces is? Achteraf: -Wat vond u van de test? -Was alles duidelijk? - Welke vragen waren moeilijk? En waarom? - Welke vragen waren makkelijk? En waarom? -Hoe vond u de test gaan? -Welke opmerkingen of aanbevelingen heeft u voor ons? Welke kwalitatieve data ga je verzamelen, welke kwantitatieve data ga je verzamelen? Kwantitatief(getallen): hoeveelheid behaald of niet behaald

clicks,

De testafnemer is verantwoordelijk voor het bijhouden van de kwantitatieve en kwalitatieve data, zoals de tijdsduur, het aantal clicks en het anticiperen op vragen van de testpersonen. Oneffenheden in de opdrachten (wanneer opdrachten bijvoorbeeld niet duidelijk zijn) moeten opgemerkt worden en aangepast worden.

efficientie/efficiency effectiviteit/effective betrokkenheid/engaging error tolerant easy to learn

Het aantal deelnemers van de test 2 testpersonen

tijdsduur,

Verantwoordelijkheden testafnemer

Doelen die je wilt bereiken met de test

Doel 1 : Effectiviteit. Leren of de testpersonen de kortste route nemen naar hun zoekopdracht of een omweg nemen Doel 2 : Efficiency. Leren of er verschil in totale tijdsduur is tussen de verschillende testpersonen. Doel 3 : Betrokkenheid. Leren hoe goed de interactie is tussen de testpersoon en het systeem en hoe aangenaam het is om het systeem te gebruiken. Doel 4 : Error tolerant Leren hoe goed het systeem fouten aangeeft bij de gebruiker en leren hoe snel de gebruiker hiervan herstelt. Doel 5 : Easy to learn. Leren hoe snel de gebruiker leert van het systeem (in tijd of kortste route)

Studie en werkzaamheden De test zal uitgevoerd worden door 2 testpersonen van 19 jaar. Deze testpersonen volgen momenteel de studie MBO-ICT, waar de focus vooral gelegd wordt op applicatiebeheer. Deze testpersonen hebben geen kennis van wireframes, maar wel van de functionaliteit van de apps. Plaats en tijd van de testsessies De test zal gehouden worden in de brainstormruimte, in het pand van Exitable. De beschikbaarheid van het brainstormlokaal is afhankelijk van andere collega’s. De test zal overdag plaatsvinden, op een moment wanneer de testpersonen zelf ook bezig zijn met andere projecten. We zullen de testers een aantal scenario’s voorleggen, met daarin de taken die ze moeten volbrengen (‘typische test van het product’).

Je wilt je reactie delen op Facebook. Deel deze reactie. De webapp is behoorlijk verbeterd. Dit wil je graag meegeven aan de maker(s). Geef een reactie op de webapp via het contactformulier. Je bent benieuwd naar de Twitterpagina van Appsperge. Ga naar de Twitterpagina. Je wilt in het weekend graag fietsend naar het dichtstbijzijnde verkooppunt. Zoek de routebeschrijving op van het dichtstbijzijnde verkooppunt. Je bent op zoek naar het verkooppunt met de beste kwaliteit asperges. Zoek de beste 3 verkooppunten. Je bent op zoek naar de 3 dichtstbijzijnde verkooppunten, met de meeste soorten producten. Zoek deze verkooppunten.

70

71

Resultaten

Versie 1 oude ontwerp - kaartview

Test 1 Donderdag 12-03-15 Tijd : 10.30 - 11.30

Scenario

Tijd

Click

Behaald?

1

00:16

2

X

2

00:17

2

X

3

00:25

3

4

00:30

5

5

00:17

3

6

00:30

3

7

00:05

2

8

00:10

3

9

00:04

2

Feedback van testpersoon 1 : Zet de fietsroutes meteen in de kaart, niet bij vergelijk Bij vergelijken moet een dropdown menu komen met daarin keuze uit boeren Er moet gedeeld kunnen worden via social media (bij reviews?)

X

X

X

Versie 2 nieuwe ontwerp - kaartview Fietsroutes toegevoegd

Donderdag 12-03-15

Tijd : 10.30 - 11.30 Testpersoon 2

72

Scenario

Tijd

Click

Behaald?

Feedback testpersoon 2:

1

00:25

1

X

2

00:13

1

X

3

00:30

3

4

00:20

4

X

5

00:20

2

X

Laat het contactformulier midden op het scherm zien. Bij de testafname kun je de vragen beter printen. Geef de kwaliteit sterren mee in de reviews, niet op de informatie balk op de kaart Misschien kan er per blok een pijltje bij voor naar onder te scrollen. Geef beoordeling moet heten : Geef een review Tabel reviews is niet overzichtelijk.

6

00:08

3

X

7

00:08

2

X

8

00:40

5

9

00:06

2

X

73

Versie 1 oude ontwerp - vergelijken

Versie 1 oude ontwerp - Reviewpanel

Versie 2 niewe ontwerp - vergelijken Dropdown menu met keuze uit verkooppunten Versie 2 nieuwe ontwerp - Reviewpanel

74

75

Test 3

Test 2 Webapp Testresultaten webapp mobiel Feedback testpersoon 1 : Maak een heel contactformulier. Niet eerst op een button klikken. De button in zoekbalk niet ‘verder’ noemen. maar iets met een vergrootglas bijvoorbeeld. Feedback testpersoon 2: Wandel/fiets routes zijn overbodig. Vergelijken weghalen mobiel. Contactformulier volledig erop zetten. Social media weg uit menu. Nieuwe menu structuur : Zoek - Review - Contact. Samenvattend Over het algemeen zijn er meer clicks te meten bij de mobiele app dan bij de webapp. Dit komt vooral omdat de informatie van de verkooppunten niet op hetzelfde

76

Mobiele app Testpersoon 2 scherm staat in de mobiele app. Er is te weinig ruimte op het bovenste scherm om daar alle informatie van het verkooppunt te laten zien. Daarom scrolt de app automatisch naar onder om daar de informatie te tonen De contactbutton was voor 1 testpersoon nog steeds niet te vinden. Deze opdracht was niet behaald. Daarom is er nu een contactformulier gemaakt, zodat het meteen zichtbaar is voor de gebruiker waar hij/zij contact op kan nemen met de makers.

Feedback testpersoon Ik wil op meerdere items kunnen sorteren in de lijst. Maak de knoppen onderaan zo breed als de breedte van het scherm. Maximale afstand kan weg bij het zoeken.

Aanpassingen Contactformulier is volledig zichtbaar op de apps. Vergelijkscherm is weggehaald uit de mobiele app. Social media links zijn verwijderd uit het menu van de mobiele app. Wandel/fietsroutes zijn weg uit allebei de apps. Keuze uit afstand/plaatsnaam met andere button in plaats van‘verder’.

77

Conclusie Doel 1 : Effectiviteit. Leren of de testpersonen de kortste route nemen naar hun zoekopdracht of een omweg nemen. Uitkomst : Het is per testpersoon verschillend hoe de weg naar de zoekopdracht leidt. Dit heeft te maken met ervaring. Doel 2 : Efficiency. Leren of er verschil in totale tijdsduur is tussen de verschillende testpersonen.

Nieuwe wireframes

Wireframes webapp mobiel Doel 4 : Error tolerant Leren hoe goed het systeem fouten aangeeft bij de gebruiker en leren hoe snel de gebruiker hiervan herstelt. Uitkomst : Het systeem reageert in hoge mate op de gebruiker. Deze reactie is niet gebonden aan foutmeldingen. Doel 5 : Easy to learn. Leren hoe snel de gebruiker leert van het systeem (in tijd of kortste route)

Uitkomst : Ja, dit een groot verschil. Doel 3 : Betrokkenheid. Leren hoe goed de interactie is tussen de testpersoon en het systeem en hoe aangenaam het is om het systeem te gebruiken.

Uitkomst : In de tweede test van de webapp kwamen er meer clicks uit dan bij de eerste test. Wel zijn er meer scenario’s behaald dan eerst. Ook zijn de zoekopdrachten sneller behaald.

Uitkomst : De testpersoon hoeft geen extra clicks te maken om tot bevestiging te komen.

78

79

Mobiele app

80

Wireframes webapp Desktop

81

Geachte respondent, Hartelijk bedankt voor uw deelname aan ons doelgroep onderzoek van Appsperge. Hieronder staan een aantal vragen voor u opgesteld. De enquête bevat open vragen en meerkeuzevragen. De vragen hebben betrekking tot de website www.Appsperge.nl Het invullen van de enquête neemt niet meer dan 10 minuten van uw tijd in beslag. Mocht u vragen hebben, dan kunt u ons van maandag t/m vrijdag bereiken via de mail : [email protected] of bellen naar +31 (0)495 57 10 30.

Enquête doelgroep Project initatie document

III

1. In welke leeftijdscategorie(en) bevinden uw klanten zich? 10-20 20-30 30-40 40-50 50+ 2. Van welk geslacht is de gemiddelde bezoeker/klant? Man Vrouw 3. Welk(e) karakteristiek(en) zou u hieraan koppelen? Actievere inwoners (fietsend, lopend) Lokale inwoners Toeristen (binnenland) Toeristen (buitenland) Wandelgroepen Vaste klanten Jonge gezinnen Other: 4.Wat is het vervoermiddel van de gemiddelde klant? Meerdere antwoorden zijn mogelijk Auto Fiets Te voet Other: 5. De gemiddelde klant.. Weet van te voren al wat hij/zij gaat kopen Twijfelt al voordat hij/zij de producten heeft gezien Twijfelt over het soort product Twijfelt over de kwaliteit Twijfelt over de prijs Other: 6. Verkoopt u naast asperges nog andere producten? Zo ja, welke? Aardbeien Appels Eieren Other: 7. Heeft u verder nog suggesties voor ons?

82

83

R Projecten Exitable

I Rockpanel II White Spring Sensation III Jan Linders IV Bakker Magnetics V Analyse toolbox VI Gymna

IV

84

85

Rockpanel

Opdracht

Opdracht

Maak diverse banners voor Rockpanel, waarbij per banner wordt gelet op een aantal eisen zoals maximale bestandsgrootte, kwaliteit en extensie.

goes Ibiza!

Voor het festival White Spring Sensation zijn er 2 posters nodig. 1 poster voordat het festival begint en de andere poster voor tijdens het festival. De eerste poster is dus een call to action voor het publiek om kaartjes te kopen, op de andere poster zijn de aanwezige cocktails zichtbaar met prijs.

Oplev alle fordelene, Bestil et produktprogram

Skills • Photoshop ervaring • Werken met videotijdlijn • Verwerken feedback klant • Verantwoording afleggen product

Vraag hier direct een sample aan!

86

ROCKPANEL plaatmateriaal Skills

• Illustrator ervaring • Beelden goed gebruiken

• Structuur poster • Communiceren met publiek

87

Jan Linders Opdracht Maak het design voor de blog website Zin In Gezond, een initiatief van Jan Linders. Er wordt een nieuw design gemaakt aan de hand van een bestaand thema van Wordpress. Dit design bestaat uit een homepage, zoekresultatenpagina, blogdetail pagina en de categoriepagina’s. Het Jan Linders blog design is gemaakt met een thema van Wordpress. Hier is de structuur van de website al klaar. Het design is gemaakt in Photoshop aan de hand van de eisen van de klant. Op de designs wordt feedback gekeven en vervolgens verbeterd. Sommige eisen en wensen van de klant zijn niet reëel of passend bij het resultaat. Als dit gebeurt legt de designer aan de klant uit waarom deze keuze niet zou passen. Soms is de klant het er dan mee eens, soms ook niet. Dan moet er een compromis worden gesloten tussen beide partijen. Op de rechterpagina is de homepage te zien.

Skills • Design • Photoshop ervaring • Feedback verwerken klant • Juist gebruik beelden

88

89

Analyse toolbox Opdracht Analyseer verschillende concurrerende websites van Bakker Magnetics op SEO gebied en geef deze analyse weer op een structurele wijze.

Opdracht:

Exitable hanteert een model voor het maken van analyses. Deze modellen worden gemaakt in de vorm van een poster. Hou de huidige ‘steel’ aan en maak voor onze analyse toolbox een mooi design, zodat de klant begrijp wat onze analyse inhoudt.

Een steel is een opmaak. De opmaak is een huisstijl en een structuur.

Overal ter wereld zijn websites te vinden die een goede analyse nodig hebben. Exitable kijkt eerst naar de huidige situatie, ook wel de As Is Situatie genoemd. Het vliegtuigje stijgt op vanuit de huidige situatie en gaat vervolgens naar de online strategie. Dus, wat zijn de doelstellingen en wat is de online strategie. Vanuit deze 2 punten wordt een to be situatie gecreëerd, een situatie waarin omschrijvingen worden gemaakt en persona’s worden ontworpen.

Skills • Photoshop • Illustrator • Werken aan de hand van een steel

De vliegtuigen gaan van links naar rechts, zoals een gebruiker ook leest. Dit kan ook gezien worden als verleden, heden en toekomst. De vliegtuigen zijn met een lijn verbonden aan de analyses aan de bovenkant en de doelstellingen aan de onderkant.

Skills • Websites analyseren • SEO kenmerken • Structureren content

90

91

x

Opdracht Vernieuw de contactpagina van Gymna. Laat het contactformulier meer opvallen. De banner past niet bij de rest van de website. Hieronder is de eerste versie te zien die verbeterd moet worden.

Op de volgende pagina is de nieuwe Duitse pagina te zien met daarin de banner die past bij de rest van de website. Naast de rustige achtergrondkleur heeft de banner nog een extra functionele waarde. De verschillende contactformulieren zijn de bereiken via de icoontjes/tekst in de banner als menu.

94

Skills 92

• Design • Photoshop ervaring • Prioriteren van content

93