15 Interactie Ontwerpen

Transcriptie

1 15 Interactie Ontwerpen Kenrick Fontijne A

2 Inhoud Product backlog Sitemap Navigatie model Activity diagram Wireframes Content areas Styleguide Tone of voice

3 Product Backlog MUST HAVE Als gebruiker wil ik een foto van mijzelf kunnen maken, omdat ik foto s wil laten zien aan andere mensen. Als gebruiker wil ik dat mijn foto automatisch versierd wordt aan de hand van de emotie op de foto, omdat ik dan veel verschillende foto s kan maken. Als gebruiker wil ik een emotie kunnen aanklikken, omdat ik zelf wil kunnen kiezen welke foto s er te zien zijn op de collage. Als kind wil ik dat er niet te veel tekst op het scherm staat, omdat ik niet goed kan lezen. SHOULD HAVE Als gebruiker wil ik de ledstrip van kleur kunnen laten veranderen, omdat ik zelf wil kunnen kiezen welke sfeer het scherm weergeeft. Als gebruiker wil ik de achtergrond van de collage kunnen aanpassen, omdat ik zelf wil kunnen kiezen welke sfeer het scherm weergeeft. Als kind wil ik dat er veel vrolijke kleuren op het scherm staan, omdat ik anders snel mijn aandacht verlies. Als gebruiker wil ik dat er een geluid wordt afgespeeld als ik een bepaalde emotie laat zien, omdat ik veel wil lachen tijdens het maken van de foto s. COULD HAVE Als gebruiker wil ik mijn foto kunnen bewerken, omdat ik mijn eigen kunstwerk wil kunnen maken. Als beheerder wil ik het geluid uit kunnen zetten, omdat andere bezoekers het vervelend vinden als het geluid altijd aan staat. WON T HAVE Als gebruiker wil ik mijn foto een naam kunnen geven, omdat ik dan een vrolijke titel kan laten zien aan de andere mensen.

4 Sitemap (Simpele hiërarchie) Dit is de sitemap voor de website die op de tablet zal worden getoond. Op de homepage wordt de feed van de camera getoond om zo de aandacht te trekken van voorbijgangers. De CLMtrackr API zal emoties van de gebruiker herkennen en per emotie zullen er sound effects worden afgespeeld voor entertainment. Verder krijgt de gebruiker op de homepage de keuze om een foto te gaan maken of om de feed van het grote scherm aan te passen. Dit bij elkaar zorgt er voor dat er maar een klein aantal pagina s beschikbaar is. Daarom hebben we gekozen voor een simpele hiërarchie.

5 Navigatie Model Het gebruik van de tablet begint volgens het clear entry points model. De gebruiker heeft twee keuzes: een foto van zichzelf maken of de feed van het grote scherm aanpassen (1.0 sitemap). We hebben voor dit model gekozen omdat het om een scherm gaat dat in het openbaar wordt gebruikt. Dit houdt in dat we maar een klein aantal keuzes willen geven aan de gebruiker om het niet te ingewikkeld te maken. Ook willen we dat de keuzes voor de gebruiker heel duidelijk zichtbaar zijn zodat de gebruiker zich uitgenodigd voelt om de tablet te gebruiken. Als de gebruiker kiest voor het maken van een foto (2.0 sitemap) gaat de navigatie verder volgens het step wise model. Dit komt omdat na het maken van de foto de gebruiker nog de mogelijkheid krijgt om de foto zelf te bewerken (4.0 sitemap). De gebruiker loopt dus in stappen door het proces heen. Daarom hebben we gekozen voor het makkelijk te gebruiken step wise model.

6 Activity Diagram Op deze diagram laten we de keuzes van de gebruiker en de werking van het systeem zien. Het systeem is vanaf het begin af aan al bezig met twee taken, de interactie met de gebruiker en het besturen van het grote scherm. Er is geen einde in het gebruik van het systeem omdat het systeem altijd binnen een loop werkt.

7 Wireframes De schetsen laten zien hoe de website op de tablet en de pagina op het grote scherm er ongeveer uit komen te zien. We hebben de buttons voorzien van pijlen om te laten zien naar welke pagina ze leiden. Op de homepage is de camera feed te zien en is de keuze voor de gebruikers duidelijk gemaakt met opvallende buttons. Als de gebruiker er voor kiest om de feed van het grote scherm te beïnvloeden komt hij/zij terecht op een pagina met duidelijke buttons. De smiley s geven de gebruiker de optie om een emotie te kiezen die ze terug willen zien in de foto s. De slider geeft de gebruiker de mogelijkheid om de kleur van het ambilight rondom het scherm aan te passen. Met de onderste buttons kan de gebruiker kiezen op welke achtergrond de foto s gepresenteerd moeten worden. Met de foto knop op de eerste pagina kan de gebruiker een foto maken van zichzelf, de emotie detectie API zal aan de hand van de emotie op de foto extra attributen toevoegen. De gebruiker krijgt hierna de optie om de foto nog verder te bewerken, dit kan door middel van zelf tekenen of door middel van de extra attributen die zijn toegevoegd aan de rechterkant van het scherm. Tablet schets:

8 Tablet wireframe: Voor het grote scherm hebben we één schets gemaakt. Op dit scherm zullen er altijd vier foto s getoond worden. Het systeem kiest zelf willekeurig een emotie en laat dan alleen vier foto s zien die deze emotie bevatten. Ook de achtergrond wordt geselecteerd aan de hand van een emotie. Het systeem zal automatisch steeds nieuwe foto s uitkiezen voor een dynamische collage. De gebruiker kan via de tablet ook zelf kiezen wat er op het grote scherm te zien is. Groot scherm schets:

9 Groot scherm wireframe:

10 Content areas Tablet

11 Groot scherm

12 Style Guide

13 Tone of voice