Prototyping windows store apps
-
Upload
willem-meints -
Category
Documents
-
view
90 -
download
2
Transcript of Prototyping windows store apps
![Page 1: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/1.jpg)
![Page 2: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/2.jpg)
Prototyping Windows Store Apps
Willem MeintsLead Developer Info Support
![Page 3: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/3.jpg)
Agenda
• Waarom prototyping?• Van idee naar app in de store• Tips and tricks
![Page 4: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/4.jpg)
Waarom prototyping?
![Page 5: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/5.jpg)
Uitdagingen voor de appbouwer• Uitdagingen waar we allemaal mee te
maken hebben:
– Wat moet de app eigenlijk doen?– Wat wil mijn klant dat de app doet?– Gaat het lukken om het te bouwen?
![Page 6: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/6.jpg)
Daarom prototyping
• Je klant weet eerder wat hij krijgt
– Dus kan hij jou beter vertellen wat hij wil– Raakt hij emotioneel verbonden met de app– Verteld hij anderen over de app
![Page 7: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/7.jpg)
Daarom prototyping
• Jij weet ook eerder wat je krijgt
– Risico’s beter in te schatten– Het wordt eenvoudiger om te maken– Jij wordt er ook vrolijker van!
![Page 8: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/8.jpg)
Waarom prototyping niet
• Prototypes zijn niet het eind product
– Soms moet je het weggooien om wat anders te proberen.
– Sommige prototypes kunnen wel worden doorontwikkeld
![Page 9: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/9.jpg)
Waarom prototyping niet
• Het is geen vaste specificatie van je eindproduct
– Het prototype is geen spec, maar…– De technieken leveren je wel specs op
![Page 10: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/10.jpg)
Van idee naar app in de store
![Page 11: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/11.jpg)
Van idee naar app in de store
DoelWaarom bouw je de app?
ScenariosWat moet je doen om het doel te bereiken?
OntwerpHoe geef ik de scenarios vorm?
PrototypeEen werkend prototype
![Page 12: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/12.jpg)
Van idee naar app in de store
DoelWaarom bouw je de app?
ScenariosWat moet je doen om het doel te bereiken?
OntwerpHoe geef ik de scenarios vorm?
PrototypeEen werkend prototype
![Page 13: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/13.jpg)
Doel van je app
• Belangrijkste vraag: Waarom bouw ik deze app?
– Waarom is deze app de beste?– Wat wil je oplossen voor je klant?– Wat wil je bereiken met deze app?
![Page 14: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/14.jpg)
Doel van je app
• Het bepalen een doel lijkt eenvoudig
– Doel, middelen en oplossing lopen vaak door elkaar– Daarom is het lastig om het doel direct op te
schrijven– En je mist nogal eens wat…
![Page 15: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/15.jpg)
Doel van je app
• Om het doel te bepalen moet je soms omwegen kiezen om er te komen
– Schrijf op wat je app moet doen – Vraag je daarna af waarom dat is– Schrijf het waarom erbij!
![Page 16: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/16.jpg)
Doel van je app
• Mindmapping helpt om structuur te krijgen en maakt doelen zichtbaar.
– Het “waarom” is het doel, maar anders geformuleerd
– Als je alles hebt opgeschreven, kun je de “waarom” teksten omzetten naar doelen.
![Page 17: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/17.jpg)
Doel van je app• Einddoel:
– Een zin waarin je kan aangeven waarom de app bestaat, de beste is, het probleem oplost
– Daaronder alle aparte doelen opgeschreven die je nog meer hebt ontdekt.
![Page 18: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/18.jpg)
Van idee naar app in de store
DoelWaarom bouw je de app?
ScenariosWat moet je doen om het doel te bereiken?
OntwerpHoe geef ik de scenarios vorm?
PrototypeEen werkend prototype
![Page 19: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/19.jpg)
Scenarios voor je app
• Als je het doel weet, dan kun je bepalen hoe je er moet komen
– Wat moet je app doen om gebruikers ervan hun doel te laten bereiken?
![Page 20: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/20.jpg)
Scenarios voor je app
• Kiezen van scenarios
– Kies scenarios op basis van eerder opgeschreven “Wat” teksten bij het bepalen van het doel
– Belangrijk: Het scenario moet helpen het doel te bereiken
![Page 21: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/21.jpg)
Scenarios voor je app
• Uitwerken van scenarios
– Pijltjes en blokkenBob vult een titel
van een film inBob krijgt te zien
welke films er beschikbaar zijn
met die titel
Bob kiest een film en rekent af
Bob kan de film bekijken op zijn surface tablet
![Page 22: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/22.jpg)
Scenarios voor je app
• Uitwerken van scenarios
– Pijltjes en blokken– Post-its
![Page 23: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/23.jpg)
Scenarios voor je app
• Uitwerken van scenarios
– Pijltjes en blokken– Post-its– Storyboards
![Page 24: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/24.jpg)
DemoStoryboarding in Powerpoint
![Page 25: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/25.jpg)
Van idee naar app in de store
DoelWaarom bouw je de app?
ScenariosWat moet je doen om het doel te bereiken?
OntwerpHoe geef ik de scenarios vorm?
PrototypeEen werkend prototype
![Page 26: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/26.jpg)
Ontwerp van je app
• Bij het ontwerpen bepaal je hoe de verschillende stappen in de scenarios worden ingevuld
– Belangrijk: De UX design guidelines van Microsoft.
![Page 27: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/27.jpg)
Ontwerp van je app
• Veel verschillende tools beschikbaar
– Expression Design 4– Adobe Illustrator– Expression Blend for Visual Studio
![Page 28: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/28.jpg)
Ontwerp van je app
• Belangrijke keuzes bij het maken van een ontwerp
– Kun je zelf goed overweg met design tools?– Hoeveel tijd wil je in het ontwerp steken?
![Page 29: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/29.jpg)
Ontwerp van je app
• Opschalen van je grafische ontwerp
– Begin met schetsen, zodat je weet waar wat naar toe moet
– Werk de belangrijkste schermen uit in kleur
– Zorg ervoor dat je weet welke kleuren, fontsizes, tilesizes, etc. je gebruikt en schrijf deze ergens op
![Page 30: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/30.jpg)
Van idee naar app in de store
DoelWaarom bouw je de app?
ScenariosWat moet je doen om het doel te bereiken?
OntwerpHoe geef ik de scenarios vorm?
PrototypeEen werkend prototype
![Page 31: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/31.jpg)
Een werkend prototype
• Een werkend prototype is de laatste check om te kijken of je idee in de basis klopt.
– Het programmeren van een app is duur– Emotioneel de grootste investering
![Page 32: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/32.jpg)
Een werkend prototype
• Waar kan je een werkend prototype nog meer voor gebruiken?
– Demonstraties bij de klant en door de klant– Usability study, bepalen of het bruikbaar genoeg is
![Page 33: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/33.jpg)
Een werkend prototype
• Tips voor effectief bouwen van prototypes
1. Investeer in voorbeelddata, nog niet in een werkende backend
2. Prototype niet alle scenarios, maar pak de top 3 om mee te beginnen
![Page 34: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/34.jpg)
DemoWerken met voorbeelddata
![Page 35: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/35.jpg)
Van idee naar app in de store
DoelWaarom bouw je de app?
ScenariosWat moet je doen om het doel te bereiken?
OntwerpHoe geef ik de scenarios vorm?
PrototypeEen werkend prototype
![Page 36: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/36.jpg)
Tips and tricks
![Page 37: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/37.jpg)
Tips and tricks
• Bij het bedenken van scenarios:
– Denk ook aan de unieke windows features, zoals sharing, search, live tiles en het gebruik van sensoren
![Page 38: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/38.jpg)
Tips and tricks
• Zorg ervoor dat je app leeft en groeit
– Bouw eerst de top 3 scenarios uit het werkend prototype
– Breid de app na release 1 uit met meer scenarios
– Zorg ervoor dat mensen terugkomen!
![Page 39: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/39.jpg)
Tips and tricks
• Gebruik gegevens van je prototype
– De scenarios kun je prima gebruiken om te testen
– Verzin voorbeelden al bij de scenarios en gebruik deze voorbeelden voor je sampledata en testen.
![Page 40: Prototyping windows store apps](https://reader036.fdocument.pub/reader036/viewer/2022062313/557ddc9bd8b42a124f8b4fd7/html5/thumbnails/40.jpg)
Bedankt!
http://www.fizzylogic.nl/
@wmeints