Stedelijk Museum VMBO leerlingen interactieve rondleiding
Ontwerpspecificatie
Meesterproef Minor UXD V0.1 18-06-2013 Jasper Bunschoten 500615247
Inhoud INHOUD
2
OPDRACHT
3
CONCEPT
3
ONTWERP
4
HIGH LEVEL DETAIL
4 4
PROTOTYPE BESCHRIJVING
5
NIET OPGENOMEN IN PROTOTYPE
5
IPHONE ONTWERPEN
7
Bijlagen: I. Big IA flow II. iPhone schetsen
Ontwerpspecificatie Meesterproef Jasper Bunschoten
2
Opdracht Het Stedelijk Museum heeft ons gevraagd een iPad app te ontwerpen waarmee vmbo leerlingen in groepen door het museum worden geleid. Momenteel is er in het museum niets beschikbaar voor deze specifieke doelgroep. Het vak CKV verplicht leerlingen van het vmbo tot het bezoeken van verschillenden culturele instellingen. Er is dus ook vanuit de doelgroep zeker vraag naar een dergelijke oplossing.
Concept Uit veel onderzoeken is gekomen dat vmbo leerlingen musea niet leuk vinden. Wat vinden ze er dan zo vervelend aan? Ze vinden het vervelend om alleen maar te luisteren. vmbo’ers willen veel liever dingen doen. Daarnaast begrijpen ze de kunstwerken vaak niet en dit maakt het voor hun oninteressant. Mijn idee is daarom om kunstwerken te koppelen aan de belevingswereld van de leerlingen, zodat ze er makkelijker waarde aan kunnen geven. Als ze situaties of gedachten herkennen in het kunstwerk wordt het al veel interessanter. Omdat ze zo graag dingen willen doen, heb ik besloten om ze zelf hun belevingswereld te laten koppelen aan kunstwerken. Zo geven ze op een indirecte manier hun mening over de kunstwerken. Uiteraard mogen ze overleggen en discussie voeren over hun mening. Dit is dan ook iets wat ze graag doen, blijkt uit mijn tests met leerlingen. De leerlingen nemen dus iets wat voor hun bekend is en koppelen dit aan een kunstwerk. Deze items kunnen zijn; muziek nummers, voorwerpen uit hun eigen omgeving, emoties en merken. Het is mogelijk dat de leerlingen van te voren, tijdens een opdracht op school of thuis, deze items ‘customizen’. Zo kunnen ze bijvoorbeeld thuis foto’s maken van voorwerpen uit hun kamer en aangeven wat voor muziek ze luister. Dit maakt de koppeling met het kunstwerk nog persoonlijker en zullen ze nog beter een persoonlijke waarde geven aan het kunstwerk. Tijdens de rondleiding lopen de leerlingen in een groepje met docent erbij langs vier zalen. In elke zaal bevinden zich vier kunstwerken met elk een opdracht. In elke zaal moet één opdracht gemaakt worden. In totaal worden er dus vier opdrachten gemaakt. Op deze manier zorg ik ervoor dat er geen tijd verloren gaat aan het zoeken van de weg, dit doet de docent namelijk. Toch krijgen de leerlingen wat vrijheid, ze mogen namelijk zelf kiezen een schilderij kiezen uit elke zaal. Tot slot is het aantal schilderijen op deze manier niet te groot en zullen de leerlingen zich beter kunnen concentreren.
Ontwerpspecificatie Meesterproef Jasper Bunschoten
3
Ontwerp High level In de bijlage zie je een schets van het highlevel ontwerp met daarbij uitleg.
Detail In detail ontwerp heb ik veel gebruik gemaakt van standaard iOS interacties, zoals de titelbar bovenin het scherm met de back button. Veel leerlingen zijn dan ook vertrouwd met iOS en iPad interfaces. Met de transities tussen de schermen geef ik hiërarchie aan. Zo hebben de leerlingen een idee of ze vooruit of achteruit gaan en weten ze dat ze dieper de hiërarchie in duiken. Daarnaast heb ik zo veel mogelijk gebruik gemaakt van micro interacties. Dit zorgt ervoor dat de leerling onmiddellijk feedback krijgt na het klikken op een button en dat er duidelijk is wat er mogelijk is met de interface. Het oplichten van de dropzone bij het opdracht scherm laat bijvoorbeeld zien dat daar een item gedropt kan worden. In de interface heb ik zoveel mogelijk gebruik gemaakt van visuele elementen, zoals de schilderijen in het zaal overzicht. Zo hoeven de leerlingen minder te lezen. Uit tests blijkt namelijk dat veel vmbo leerlingen niet lezen en zomaar doorklikken als er veel tekst staat. Daarnaast is het natuurlijk makkelijker en leuker om een afbeelding met een kunstwerk in een museum te vergelijken dan de titel ervan opzoeken. De navigatie heb ik zo veel mogelijk in de content verwerkt. Op deze manier is er een stuk meer ruimte om alle content te laten zien. Dit is immers waar het om draait. In het overzicht met de 4 zalen is te zien wat de status is van de verschillenden opdrachten. Dit zorgt ervoor dat de leerling weet waar hij of zij aan toe is. Deze navigatie laat dus tegelijkertijd ook de planning zien. Vmbo leerlingen vinden het belangrijk te weten waar ze aan toe zijn en hoe lang het nog gaat duren. Doormiddel van dit overzicht kunnen de leerlingen ook altijd terug naar een eerder gemaakte opdracht, om iets aan te passen of af te ronden.
Ontwerpspecificatie Meesterproef Jasper Bunschoten
4
Prototype beschrijving Om het prototype te bekijken moet deze link http://share.axure.com/PAP369/Home.html worden geopend op een iPad. Vervolgens kan er een bureaublad icoon gemaakt worden van de website. Na het klikken op dit icoon opent het prototype. In het highlevel ontwerp is aan de oranje lijn te zien welk gedeelte van het gehele proces is uitgewerkt in het prototype. Na het openen van het prototype komt men op de pagina met het overzicht van de zalen. Kies voor de 3e zaal. Zaal 1 en 2 zijn inmiddels al afgerond, het prototype start dus midden in de rondleiding. Kies in zaal 3 voor het kunstwerk “Paar van Karel Appel”. Nu ziet u het filmpje, waarvan ik de inhoud verderop in dit document zal beschrijven. Dit filmpje kan worden overgeslagen of afgespeeld. Na het filmpje moet de opdracht uitgevoerd worden. De muziek kan beluisterd worden en het nummer rechts bovenin kan naar de dropzone links onderin gesleept worden. Let hierbij op de micro interactions tijdens het drag and drop proces. Na het klikken op de button “Volgende” komt men op de pagina waar een beschrijving gegeven kan worden bij de keuze voor het muziek nummer. Let op de thumbnails die tevoorschijn komen na het selecteren van het tekstveld. Die zorgen ervoor dat de eerder gekozen items altijd te zien zijn. Het zou voor kunnen komen dat de groep alweer verder moet terwijl nog niet iedereen klaar is met zijn opdracht van die zaal. Om dit te simuleren kan er op de pagina waar een beschrijving getypt kan worden, op de pagina titel bovenin de balk, geklikt worden. Er verschijnt nu een pop up. Wanneer er verder geklikt wordt ziet men het overzicht van de zalen met een van de opdrachten die nog niet helemaal voltooid is. Door op deze opdracht te klikken, wordt het beschrijving scherm van dit onderdeel weer getoond en kan men deze opdracht afronden. Wanneer de opdracht afgerond wordt komt men weer terecht op het overzicht, waar aan het groene icoontje te zien is dat nu ook de opdracht van zaal 3 afgerond is.
Niet opgenomen in prototype Een aantal dingen uit het onderdeel wat ik in detail uitwerk zijn niet opgenomen in mijn prototype. Dit is vanwege efficiëntie. Het kost erg veel tijd om dit te prototypen, en de soort interactie is al op een andere plaats te zien. Daarom laat ik hieronder zien hoe deze onderdelen eruit zien en verwijs ik naar een interactie die wel te zien is in het prototype. Ontwerpspecificatie Meesterproef Jasper Bunschoten
5
De video, die men als eerste ziet na het klikken op het kunstwerk, zal bestaan uit het vertellen van het verhaal achter het kunstwerk. Waarom is het gemaakt? Daarnaast zullen verschillenden mensen, waarmee de doelgroep zich kan identificeren, vertellen wat zij denken over het kunstwerk. Op deze manier hebben de vmbo leerlingen houvast om zelf een eigen mening te ontwikkelen. Een mening ontwikkelen gebeurt namelijk doormiddel van kijken naar je omgeving en daaruit een selectie maken. Deze omgeving wil ik in deze video bieden. Wanneer men terug gaat naar het zaaloverzicht, terwijl er al iets is gedaan aan de opdracht (zoals het typen van een beschrijving) wordt de volgende pop up getoond. Deze pop up verschijnt net als het bericht dat de tijd voor de betreffende zaal op is en de groep verder moet.
Wanneer men de zaal waar de groep op dat moment is uitloopt wordt de volgende pop up getoond. Deze pop up verschijnt net als het bericht dat de tijd voor de betreffende zaal op is en de groep verder moet.
Ontwerpspecificatie Meesterproef Jasper Bunschoten
6
iPhone ontwerpen In bijlage II zijn de schetsen voor de iPhone versie te vinden. Ik heb vier belangrijke schermen uit de interface geschetst, om zo een indruk te geven hoe de interface er op de iPhone uit zou komen te zien. In de iPhone schetsen heb ik de interactie aangepast op dit device. Aangezien er minder ruimte is zullen er meerder schermen zijn en moet er meer doorgeklikt worden. Bij mobiel ontwerp is het gebruikelijk om meer door te moeten klikken om informatie te bekijken. De interactie van het kiezen van een item bij een kunstwerk op de iPhone is bijvoorbeeld geen drag and drop. Op dit kleine scherm is er te weinig ruimte om alle items en een dropzone te laten zien. Daarom heb ik gekozen om een lijstje te maken met alle items op een apart scherm waar de keuze gemaakt kan worden. De navigatie heb ik in de iPhone ontwerpen verwerkt in de content. Omdat het scherm zo klein is, is het nog belangrijker om de content voorop te stellen.
Ontwerpspecificatie Meesterproef Jasper Bunschoten
7
