Finale versie: Design

Inleiding

Wanneer het online is gezet. Www.triatriumph.com (TODO)

Wat is er nieuw?

De finale versie van TriaTriumph opent met een thuispagina waarop gebruikers zich moeten inloggen vooraleer ze het persoonlijke dashboard te zien krijgen (zie figuur 1). De thuispagina bevat informatie over de belangrijkste functionaliteiten van het dashboard. Deze pagina werd ontwikkeld met het oog op nieuwe gebruikers die ge√Įnteresseerd zijn om het dashboard te gebruiken, maar eerst willen weten welke voordelen het kan bieden. Het beheren¬†van gebruikers werd toegevoegd om voor elke gebruiker een persoonlijk dashboard te kunnen inladen. Bestaande gebruikers kunnen zich inloggen en daarna opnieuw uitloggen. Nieuwe gebruikers kunnen zich eerst registreren.

thuispagina

Op het ogenblik dat een gebruiker zich inlogt, wordt de data voor het dashboard dynamisch ingeladen. Een schermafdruk van het dashboard is te zien in figuur 2. Alle concepten die zichtbaar zijn in het dashboard worden dynamisch opgebouwd en wijzigen wanneer de gebruiker interageert met het dashboard. Indien een gebruiker het resultaat van een training ingeeft, dan worden bijvoorbeeld de waarden van de trainingsintensiteit opnieuw berekend waarbij de nieuwe gegevens in rekening worden gebracht. Dit brengt bij tot de kwaliteit van het ontwerpcriterium interactiviteit.

dashboard

De¬†grafische voorstellingen van ‘personal specs’ en ‘training intensity’ tonen het verloop van de waarden die er staan afgebeeld. Een schermafdruk waarop de grafieken werden opgevraagd is te zien in figuur 3. Wanneer de gebruiker met de muis over √©√©n van de datapunten glijdt,¬†lichten de¬†datapunten van de andere eigenschappen van dezelfde dag op. Daardoor wordt het mogelijk om de verschillende eigenschappen aan elkaar te relateren. Dit heeft als doel dat triatleten hun eigen lichaam beter leren kennen, bijvoorbeeld dat de triatleet fitter is als hij veel slaapt.¬†Dit sluit aan bij het ontwerpcriterium van evolutie inschatten. De grafiek wordt getoond binnen een tijdsperiode dat de gebruiker zelf kan selecteren m.b.v. de¬†slider.¬†Deze slider werd reeds gebruikt in het dashboard, zodat dit ook voldoet aan het ontwerpcriterium consistentie. De grafiek van de fysieke proeven werd uitgebreid met een gemiddelde en een trendlijn om de evolutie in deze tijden beter te kunnen inschatten. Een trendlijn geeft immers de globale vooruitgang of achteruitgang weer.

dashboard_with_graphs

Tenslotte kunnen gebruikers trainingscategorie√ęn toevoegen door hun profiel te wijzigen. Een nieuwe categorie wordt toegevoegd aan de legende onderaan de planning.

Aanpassingen tov vorige designs

Bij het implementeren van het toevoegen van het resultaat van een training, bleek er een inconsistentie te zitten bij het klikken op een training uit de planning. Het klikken op een training waarvan een resultaat beschikbaar is, veroorzaakte een actie waarbij de details van deze training rechts worden getoond. Het klikken op een training waarvan geen resultaat beschikbaar is, zou een popup openen waarin de resultaten konden worden ingegeven. De actie van het klikken op een training was dus niet altijd dezelfde, waardoor dit voor een inconsistente interpretatie zorgde, wat tevens een ontwerpcriterium is. Daardoor gaat het klikken op een training in de finale versie gepaard met het tonen van de details op de rechterkant van het dashboard. Daar kunnen de resultaten worden aangevuld indien ze nog niet gekend zijn, of gewijzigd indien er onjuistheden inzitten. Waarom dit in het papieren prototype nooit opgemerkt werd, ligt waarschijnlijk aan het feit dat deze prototypes op papier stonden.

Dp1 vertoonde het probleem dat de pijlen die aangaven dat elke rij van de planning overeen kwam met de vooruitgang aan de linkerkant, werden aanschouwd als een mogelijkheid om een week terug te navigeren door de planning. Daarom werd de vooruitgang van elke sport vastgehecht aan de betreffende rij van de planning. Het inconsistent gebruik van een pijl kan daardoor achterwege gelaten worden. Nog uit dp1 bleek dat de cijfers naast de percenten in de vooruitgang van de week (zie figuur 3) niet duidelijk voorstelden dat dit de afgelegde afstand en tijd was. Dit kon namelijk ook de geplande afstand en tijd zijn. Dit is simpel opgelost door een ‘=-teken’ tussen beide delen te plaatsen.

Trainingen waarvan het resultaat beschikbaar is, bevatten in deze finale versie small indicators. Deze oplossing werd reeds voorgesteld in de resultaten van pp2. een pijltje omhoog betekent dat er meer gedaan is dan gepland, het pijltje omlaag minder en het bolletje evenveel. Op die manier is het mogelijk om in één oogopslag de geplande afstand of tijd te vergelijken met de effectief afgelegde afstand of tijd. Zie figuur 3.

Zowel pp2 als dp1 vertoonde het probleem dat de relatie tussen een training en zijn resultaten aan de rechterkant niet zichtbaar was. Daarom krijgt de balk van een geselecteerde training een witte rand (zie figuur 3). Indien er geen training geselecteerd is, staat op de plaats waar normaalgezien de details worden afgebeeld een hint. Deze hint informeert de gebruiker om op een activiteit te klikken indien hij de details ervan wenst op te vragen.

Een probleem uit pp2 was dat de fysieke proeven maar uit één afstand per discipline konden bestaan. Deze versie legt geen limiet op het aantal afstanden die binnen de fysieke proeven kunnen worden afgelegd. Dit is te zien op figuur 3, waarbij per discipline gefilterd kan worden op de beschikbare afstanden die in de geselecteerde periode werden afgelegd.

In dp1 kwam aan het licht dat het niet voor de hand lag dat de slider kunnen worden uitgerokken. Daarom werd een gelijkaardige aanwijzing als in het ontwerp van pp2 toegevoegd. Op de uiteinden van de sliders staat nu een balk dat de aanwijzing geeft voor het uitrekken van de slider.

Frontend finished!

Ik heb vandaag de frontend volledig kunnen afronden. Alle TODO’s en opmerkingen van het eerste digitale prototype werden afgewerkt. Het is nu de bedoeling om de komende weken aan de backend te werken. Dit wordt een combinatie van¬†node.js, Express, Mongoose, Mongo DB en¬†AJAX.

De link naar de laatste versie kunnen jullie hier vinden! Nog even vermelden dat het dashboard enkel volledig werkt in Google Chrome en voorzien is voor schermen groter dan die van smartphones.

Screen Shot 2014-04-02 at 19.12.25

 

Daarna is het de bedoeling om het dashboard ‘in the wild’ te brengen! ūüôā

Draft wetenschappelijk paper

Voor een optimale kwaliteit is de draft hier in pdf vorm te vinden. Er zijn nog een aantal stukken die moeten geschreven worden omdat dit onderzoek nog dient te gebeuren. De dingen die nog niet klaar zijn werden in het rood aangeduid.