Shengxiao

Shengxiao? Ok, dat heeft waarschijnlijk wat uitleg nodig. Komt goed! Ik wil het dit keer hebben over het ontwerpen en ontwikkelen van een app van begin af aan. Als voorbeeld heb ik gekozen voor een horoscoop app en met name een Chinese versie. Waarom? Geen idee. Ik geloof er zelf niet in, maar vind het mysterieuze eromheen wel mooi. Daarnaast was het gewoon iets wat te binnen schoot en ik ben zelf ook een beetje benieuwd of ik er wat van kan maken.

Ik wil in deze blog de volgende onderwerpen behandelen:

  • Het verzinnen en verder uitwerken van een concept
  • Opstellen van een (paper) prototype
  • Starten van het maken van de app (niet met code)

De inhoud van de blog is gebasseerd op de Windows Phone 7, maar het is zeker ook toepasbaar op alle andere platformen en ook zelfs als het niet gaat om apps. Het is niet een vast plan voor verzekerd succes. Daar is het niet voor bedoeld, maar het zal hopelijk wel inzicht bieden – voor de geïnteresseerde – hoe dit aan te pakken is. Nu hou ik ook in mijn gedachten dat op de Hogeschool Rotterdam nu een project start voor eerstejaars studenten waarbij zij een app moeten bouwen. Wellicht dat zij hier dan ook extra informatie uit kunnen halen…

Het concept

Het bedenken van een concept kan heel lang duren. Als we kijken naar de oorsprong, dan kunnen we rekening houden met de diverse oorzaken waarom we een app willen bouwen. Misschien voor de hobby, opdracht voor school, opdracht van een opdrachtgever, het maken van 3 WP7 apps om een gratis telefoon te krijgen, etc. Elke oorsprong heeft een achterliggende reden en vooral de vraag; “wat willen we bereiken met de app”. Als we deze vraag kunnen beantwoorden, dan hebben we een groot deel van onze grenzen van de app afgebakend.

Wat willen we bereiken met de app?

In dit geval wil ik de app bouwen om twee redenen:

  1. om die telefoon te kunnen houden – de Nokia Lumia 710 in dit geval en
  2. om erover te kunnen bloggen zodat andere er misschien wat aan hebben.

In beide gevallen maakt het kernidee dus niet uit. Daarom kan ik gewoon gaan voor wat mij te binnen schiet, in dit geval was dat dus die horoscoop app. Nu zijn er daar al dertien van in een dozijn. Zelf heb ik ook helemaal niets met horoscopen. Waarom dan een horoscoop app zou je zeggen? Tja, ik denk dat het potentie heeft een een mooie app te worden, het mysterie om de astrologie, de symbolen en symboliek, de grote doelgroep die het misschien gebruiken. Ik zie dit als een kans om er een grafische mooie en goed functionerende app van te maken. Kijken of we de concurentie aan kunnen gaan in de Marketplace… (Het is een flinke lijst, maar wie weet…)

Het design van de app

Ok, allereerst ga ik beginnen te kijken wat de concurentie doet. In dit geval weet ik zelf vrij weinig van horoscopen en dus moet ik kijken wat er allemaal al is. Waarom moeilijk doen als je kan afkijken ;). Uhhh, voor de studenten die dit lezen, negeer die zin maar…

Welke apps vind ik mooi? Ik ga gewoon zoeken op de Marketplace naar apps die mijn concurentie vormen. Vervolgens ga ik maar af op de mooie plaatjes. De plaatjes die mij al pakken. Ik zie er een hoop tussen die ik even aanklik, maar waar ik uiteindelijk niet warm of koud van wordt. Ik kijk dan vooral naar de screenshots. Eerst wilde ik een normale horoscoop app maken, maar naarmate ik verder kijk zie ik ook een hoop Chinese Horoscoop Apps. Dit wekt mijn interesse en die Chinese versies geven voor mij nog meer het mysterieuze gevoel omtrent de astrologie weer.

Na wat verder zoeken kom ik tot de conclusie wat een bagger er allemaal wel niet bij zit. Dat kan toch allemaal veel beter? Ik zie apps die waar je alleen je sterrenbeeld kiest en dan de voorspelling van de dag krijgt. Nou, als dat het niveau is, dan moet dat wel lukken.

Een mooie app is die ook van Kelli Fox. Die zit er completer uit dan de rest en ziet er ook grafische gezien mooier en qualitatiever uit. Als ik naar de features kijk, dan wijkt dat niet eens zoveel af van de rest, het ziet er allemaal gewoon mooier uit.

  

Goed, ik weet genoeg, hier kan ik wel wat mee. Ik ga het lekker simpel houden. Het moet er mooi uit zien, de informatie van de dag geven en eventueel wat achtergrond informatie.

De volgende stappen zijn het zoeken van mijn bron data, in dit geval de voorspellingen en het maken van mijn eigen design voor de app.

Bron data

Ik heb dus een online source nodig die ik kan gebruiken om mij de horoscoop informatie te kunnen leveren. Een korte zoekopdracht op de meeste gebruikte zoekmachine levert mij dan ook voldoende hits op. Onder andere een link naar http://www.astrology.com/rss. Bingo! En zelfs Chinese horoscoop informatie kan ik daar vinden. RSS is voor mij perfect binnen te halen en zelf vorm te geven in de app. Nu mijn eigen design nog. Voor extra achtergrond informatie wend ik me ongegeneerd naar Wikipedia :). Let op dat als je externe bronnen gebruikt, deze wel even in je app benoemt, dat is wel zo netjes.

Mijn design

Bij het ontwikkelen van een app heb ik al wat ideeën over de look-and-feel in gedachten. Ik heb het hierboven diverse malen over ‘mysterieus’ gehad en dat is ook iets wat ik wil overbrengen in de app, maar ook het oosterse. Ik ga ook voor de Chinese versie, omdat ook de Chinese cultuur onwijs boeiend vind. Dit past dus meer bij mij en zo kan ik het onderwerp toch binnen de kaders van mijn eigen interesses brengen.

Aanpassen aan het platform

Als design heb ik een andere app in gedachte. Eentje die ik gezien heb en waar ik helemaal weg van was. Niet vanwege het onderwerp – cocktails maken – maar vooral om het design; Cocktail Flow. Het hele design is gebasseerd op het Metro design principe van Windows Phone 7. Dit is natuurlijk ERG belangrijk, voldoen aan de design principles van het platform waar je voor bouwt. Dit zorgt ervoor dat gebruikers al weten hoe je app werkt, voordat ze het opstarten. Het voelt ‘natuurlijk’ aan, het is een deel van het platform, dus een deel van je telefoon. Hierdoor zullen ze meer geneigd zijn het te gebruiken.

Daarnaast heeft Cocktail Flow een erg mooi design, de hele look-and-feel is dat van cocktails. De kleuren, het gevoel, de plaatjes en zelfs diverse animaties. Alle features zijn zo gebouwd dat het onderdeel wordt van het concept, natural user interface.

Ik wil een paar schermen voor mijzelf eerst schetsen. Dit doe ik in Expression Blend / Sketch Flow.

  

Uiteindelijk maak ik veel meer schermen en zoek ik naar de juiste design balans tussen features en gebruiksvriendelijkheid. In het volgende stuk ga ik in op de app zelf, waarbij ik gebruik maak van een lijst met features. Deze heb ik gemaakt voordat ik de schermen maakte. Hierbij maak ik ook voor mijzelf een storyboard en schets hoe de gebruiker zich beweegt binnen de app. Wat vindt de gebruiker het belangrijkst? Hoeveel handelingen zijn er hooguit nodig om bepaalde informatie te bereiken? Al dit soort vragen zorgen ervoor dat je kritisch nadenkt over je app en met die vragen kan je je verplaatsen in de gebruiker.

De App

Goed, als ik mijn prototype af heb, dan ga ik beginnen aan de daadwerkelijke app. Ik ga eerst de graphics maken en verzamelen. Dit zijn niet alle graphics, maar hoofdzakelijk de graphics zoals achtergronden en plaatjes. Dit doe ik om mijn app, tijdens het bouwen, al een beetje de uitstraling te geven die ik wil. Hierdoor ben ik me steeds bewust van het doel van de app en kan ik proberen me zo veel mogelijk in te leven in hoe de gebruiker er mee om zou gaan.

Daarna deel in mijn functionaliteiten in in een sprintbacklog-achtige lijst. In mijn eentje hoef ik niet te weten wat in progress is en wat niet, maar ik kan zo wel makkelijk zien welke features ik nog allemaal moet maken.

  1. De gebruiker moet de dieren kunnen zien om een overzicht te krijgen van alle dieren die er zijn
  2. De gebruiker moet de voorspellingen van de andere dieren kunnen zien om zo voor zichzelf en ook voor andere voorspellingen te kunnen opvragen
  3. De gebruiker moet zijn voorspelling van de dag kunnen zien om bewust te raken van zijn of haar mogelijkheden en uitdagingen.
  4. De gebruiker moet bij de settings kunnen aangeven welk dier hij of zij is, zodat dit onthouden kan worden en dit niet elke keer hoeft
  5. De gebruiker moet kunnen berekenen welk dier hij of zij is
  6. De app moet op het beginscherm het voorkeursdier tonen met de voorspelling van de dag, zodat de gebruiker dit direct ziet bij het opstarten en er niet heen hoeft te navigeren
  7. De gebruiker moet per dier achtergrondinformatie kunnen opvragen om meer bekend te raken met de dieren
  8. De gebruiker moet zijn eigen horoscoop kunnen delen op de sociale media zoals Twitter en Facebook, zodat andere het ook weten (en eventueel interesse krijgen in de app)
  9. De gebruiker moet informatie kunnen zien over de app, zodat hij weet wie het gemaakt heeft
  10. De gebruiker moet de app kunnen raten op de Marketplace, zodat de app een rating krijgt
  11. De gebruiker moet een moglijkheid krijgen om feedback per email te sturen, zodat de maker dit eventueel kan aanpassen

Als ik kijk naar de features, dan valt mij eentje vooral op, namelijk; de gebruiker moet zijn eigen horoscoop kunnen delen op de sociale media zoals Twitter en Facebook. Waarom valt mij dit op? Dat komt door het feit dat Twitter alleen maar 140 karakters aankan en niet meer. Een voorspelling kan bijvoorbeeld veel langer zijn. Hoe ga ik dit oplossen? Ik zou kunnen verwijzen naar een website met de volledige tekst van de voorspelling. Dat zou bijvoorbeeld de website van Astrology.com kunnen zijn. Ik zou ook een eigen pagina kunnen maken waarbij ik in de QueryString de tekst mee geef en de pagina dit dan laat zien. Eigenlijk hetzelfde als de TwitLonger functionaliteit. De link wordt automatische ingekort en dus pas het in een Tweet. In Facebook zou hij dan de pagina als thumbnail laten zien in een share link optie. Die feature kost dus wat meer tijd…

RSS Reader

Voor het maken van een RSS reader zijn diverse tutorials online te vinden. Onder andere http://dotnet.dzone.com/articles/building-rss-reader-windows of op MSDN zelf http://msdn.microsoft.com/en-us/library/hh487167(v=vs.92).aspx.

Zodra de data binnen is kan deze worden gebind aan de view. Dit is volgens het MVVM model waar ik iets dieper op in ga in deze blog.

Afsluiting

Het bouwen van de app duurt wel even. Ik ben wel van plan deze app te bouwen en wellicht dat ik dat nog toelicht in een nieuwe blog. Ik hoop dat die gene die daar interesse in hadden verder zijn gekomen hoe je van een concept naar een app komt. Natuurlijk kunnen er nog veel meer stappen genomen worden. Dat ligt ook aan de grootte van het project. Maar voor nu hoop ik dat je in ieder geval voldoende informatie hebt om te beginnen met het bouwen van je eigen app.

Succes! :)

Update

De app is zojuist gesubmit naar de Windows Phone 7 Marketplace. Deze zal binnen kort beschikbaar zijn voor de Windows Phone 7. De schermen zijn iets verder geevolueerd, maar zijn wel gemaakt aan de hand van de schetsen. Hieronder een demo van de app op Youtube.

De link naar de Windows Phone 7 Marketplace: http://www.windowsphone.com/nl-NL/apps/fb1512dc-c3e3-4767-9976-fa8f54e867f4

  2 comments for “Shengxiao

  1. Leon Cullens
    3 mei 2012 at 14:16

    Netjes! Ziet er goed uit :) Alleen het icoontje zoals getoond in het filmpje vind ik niet mooi, vooral die schaduw onder dat rondje niet ;)

  2. Yip To
    9 mei 2012 at 20:43

    Beste Bob,

    Allereerst excuses voor dat de comments misbruik voor een vraag over je auto week reader app voor windows phone 7. Ik zie zo gauw geen andere contactmogelijkheid vermeld.

    Ik zou heel graag de auto week reader app willen uitproberen. Probleem is alleen dat ik een early adopter ben geweest van windows phone met een US live account en marketplace. De auto week reader app is blijkbaar niet in deze marketplace gepubliceerd, en krijg ik de melding dat de app niet beschikbaar is in mijn regio. Jouw andere apps kan ik wel installeren, dus het zou ook mogelijk moeten zijn om de auto week reader app zo te publiceren?

    Ik hoor graag je reactie. Alvast hartelijk dank!

    Mvg,
    Yip To

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

Zoals de meeste websites gebruiken we cookies om een meer persoonlijke en snelle service te bieden.

Wij gebruiken cookies zodat onze website meer efficiënt kan functioneren, om de prestaties te verbeteren en, eventueel, om op maat reclame van onze partners aan te bieden. Als u doorgaat gaan we ervan uit dat u akkoord gaat alle cookies te krijgen van onze website.

To accept cookies please Click To Continue