Analyse opdracht Visual Design Ruben Kwaaitaal
Klas: IMD-B Studentnr: 525778 Datum: 26 oktober 2014 Docente: Yvonne Brinkman
Inleiding Voor een ontwerper is het van belang om op de hoogte te zijn en te blijven van de ontwikkelingen in het vakgebied. Interaction design hoort daar bij. Het is een relatief jong domein, maar ook daar zijn er inmiddels conventies. Wat zijn de do’s en don’ts? Welke ontwikkelingen zijn er gaande? In de beroepspraktijk maak je, bij elke opdracht voor een interactief product, eerst een analyse van de mogelijkheden van interactie voor de gebruiker. Dat kan ik doen door bestaande interfaces en navigatiestructuren te onderzoeken op intuïtiviteit. Analyseren van interactie betekent dat je gaat nadenken over interactiviteit, toegankelijkheid en gebruiksvriendelijkheid van de interface van een interactieve applicatie (in dit geval een verhalende omgeving*). Je onderzoekt wat het doel en de doelstellingen zijn voor de gebruikers. Wat kunnen ze doen in die omgeving? Hoe doen ze dat? Hoe worden ze daarbij geholpen? Hoe wordt de gebruiker verleid om te klikken? Welke keuzes heeft de gebruiker en hoe beïnvloeden die keuzes het verhaal of de omgeving? Welke rol speelt de gebruiker? Neemt deze deel aan de omgeving of is de gebruiker een objectieve ooggetuige? Heeft de ontwerper ervoor gezorgd dat de beleving voor de gebruiker optimaal is? Zo ja, hoe? Ik heb mij in deze materie verdiept door middel van de volgende 3 opdrachten: 1. Ik heb geschikte sites gezocht voor mijn analyse. 2. Ik heb mij verdiept in het begrip Interaction Design en analyseer tenminste 3 sites aan de hand van een zestal richtlijnen. 3. Mijn inzichten heb ik vertaald naar aanbevelingen voor mijn eigen applicatie (de centrale VD opdracht). Hieronder wordt elk onderdeel beschreven. * In een verhalende omgeving wordt informatie aangeboden op een andere manier dan door buttons en grote hoeveelheden tekst. Informatie mag je in de breedste zin van het woord opvatten.
1
Inhoudsopgave Opdracht 1: Exploratief onderzoek blz. 3 Opdracht 2: Analyse blz. 5 2a: Begrippen blz. 5 2b: Analyse van de drie websites blz. 7 Opdracht 3: Aanbevelingen blz. 12 3a: Aanbevelingen blz. 12 3b: Flowchart en storyboard blz. 12 Bronvermelding blz. 15
2
Opdracht 1: Exploratief onderzoek In dit hoofdstuk heb ik 3 verschillende sites gezocht met een intuĂŻtieve interface. De websites van mijn keuze bieden informatie, maar niet door middel van een rij buttons en lappen tekst. De gebruiker vindt er zijn weg doordat de ontwerpers hebben nagedacht over hoe ze de gebruiker kunnen betrekken, verleiden en leiden. Sesamstraat. Dit is de officiĂŤle website van het kinderprogramma Sesamstraat (NTR, z.d., Sesamstraat)
3
Zappelin. Dit is de officiĂŤle website van de kinderzender Zappelin op NPO (NPO, z.d., Zappelin)
Jim Carrey. Dit is de website van acteur en komiek Jim Carry (Jim Carrey, z.d., Website)
4
Opdracht 2: Analyse In deze opdracht heb ik mij verdiept in het begrip Interaction design. Wat wordt daarmee bedoeld? Welke andere begrippen houden ermee verband? Hierbij heb ik bijvoorbeeld gedacht aan: Usability, Accessible, Ease of use, Effectiveness, Efficiency, Error-averse, Findability, Learnability, Memorable, Pleasure, Quality, Satisfying, Usefulness en User friendly.
2a: Begrippen Ik heb geprobeerd te achterhalen wat er in vakliteratuur, internet e.d. wordt bedoeld met boventaande begrippen. Interaction design volgens Wikipedia: “Interaction design (ook wel afgekort als IxD) definieert de structuur en het gedrag van interactieve systemen. De ontwerpdiscipline is gericht op het creëren van producten en diensten die nuttig, bruikbaar en betekenisvol zijn voor de mensen die ze gebruiken. Interaction Designers onderzoeken de behoeften, wensen en waarden van de mensen die het systeem gaan gebruiken. (Wikipedia, 2014, Interaction Design) Op basis van deze informatie wordt de gewenste interactie mogelijk gemaakt door het ontwerpen van structuur, gedrag en interface.” Interaction design volgens Philippe Wegner, ontwikkelaar onderwijsprogramma HKU: “Interaction Design is voor mij het ontwerpen van interfaces, waarin je dus inhoud, structuur, gedrag en verschijning bij elkaar brengt, en de context van de bezoeker. Waarbij de interactiecomponent, met name hoe informatie gestructureerd wordt, en hoe het zich gedraagt; de perceptie van de bezoeker, een hele belangrijke, sturende rol daarin speelt.” (Druifdesign, 2004, Afstudeerscriptie Interaction Design) Interaction design volgens Jurriënne Ossewold, oud-docent en vroeger hoofd Interaction Design HKU: “Interaction Design is een vakgebied dat natuurlijk ontzettend in beweging is. En heel veel verschillende aspecten vallen daaronder. De basisdefinitie is nog steeds het ontwerpen van interactie tussen mens en machine. Dat is nog steeds de definitie. Alleen die mens en die machine veranderen continu. Die mens, kan een mens van vlees en bloed zijn, maar kan ook een afgietsel van de mens zijn, de virtuele mens bijvoorbeeld. Die machine, wat voorheen puur hardware was, is natuurlijk nu software geworden. Hoewel de hardware weer terugkomt. De intelligente producten zeg maar. (...) Die machine is niet meer een machine, maar is eigenlijk een intelligent product. Complex, per definitie. (...) Waar Interaction Design feitelijk op neerkomt, is die interactie tussen mens als subject en intellig ente objecten. (...) En dat is fascinerend.” (Druifdesign, 2004, Afstudeerscriptie Interaction Design) Interaction design volgens Nico Druif, derdejaars student Interaction Design HKU: “Interaction design is een ontwerpdiscipline die zich bezighoudt met het gebied waarin mens en systeem elkaar tegenkomen; elkaar ontmoeten. Over de ontmoeting, oftewel de interactie (dus de mens doet iets met een apparaat en andersom), wordt goed nage dacht en vervolgens tot stand gebracht door het ontwerpen van interfaces en de achterliggende inhoud en structuur van een systeem. Dit vraagt om een combinatie van invalshoeken vanuit talloze andere vakgebieden, zoals Human-Computer Interaction, er gonomie, psychologie, kunst en vormgeving, informatica, management, mediawetenschap en filosofie. Hierdoor ontwikkel je de kennis, vaardigheden en de houding die benodigd zijn om zowel het denken als het doen in een ontwerpproces te kunnen verwezenlijken. Interaction design is daarin de rode draad die wetenschappelijke vakgebieden, techniek en vormgeving integreert. Je moet zo wel de gebruiker als het systeem (en alles wat hierachter verschuild gaat) kennen. Vervolgens kun je een systeem op een (voor
5
de eindgebruiker) begrijpelijke, prettige en/of (taak)ondersteunende manier vormgeven, programmeren, structureren en inhoudelijk vullen. En zo’n systeem kan tegenwoordig van alles zijn; van cd-rom’s, internetpagina’s en dvd’s tot aan kaartjesautomaten, polshorloges en spelletjes voor de mobiele telefoon. Belangrijk bij interaction design is: •De omgang, of interactie van mens met een systeem •De gebruiker staat centraal •De cultuur-, mens en ontwerpgerichtheid •De interface, het conceptuele model en het mentale model •Het is een rode draad die door het hele ontw ikkelproces loopt en betrekking heeft op zowel analyse, ontwerp, implementatie en evaluatie •Een kunstzinnige (creatieve, associatieve) houding •Een vooruitziende blik op maatschappelijke / technologische ontwikkelingen •De complexiteit en voortdurende veranderingen als inspiratiebron •De technologie als middel en niet als doel •De team- en projectwerkwijze •Het doel om de omgang met (technologische) systemen, in al zijn huidige vormen, te verbeteren en daarmee puur de ervaring en het doel van de gebruiker te dienen.” (Druifdesign, 2004, Afstudeerscriptie Interaction Design) Interaction design in eigen woorden: In mijn ogen moet een omschrijving in één zin mogelijk zijn, anders is het geen goede omschrijving. ‘Interaction design is design met als doel een optimale communicatie tussen gebruikers.’ Wat optimaal is kan verschillen per gebruiker. Gebruikers kunnen mensen zijn, maar ook bijvoorbeeld dieren. Stel je maakt een website voor bejaarden, dan moet deze website ook passen hierbij. De interface moet user friendly zijn, de knoppen groot. Bejaarden houden van herkenbaarheid. Het liefst alles op klassieke plekken. Een kind kan juist heel makkelijk nieuwe dingen leren. Er moeten juist iets satisfying zijn om ze geboeid te houden bij bijvoorbeerld een website. Als er fouten zitten in een applicatie of het werkt niet zoals gebruikers denken dat het werkt, dan haken gebruikers al gauw af. Het ultime moment bereik je als je een onvergetelijke indruk maakt (wel positief natuurlijk).
6
2b: Analyse van de 3 websites Er zijn een aantal criteria die belangrijk zijn bij het ontwikkelen van interactieve applicaties, te weten: Ontwerp voor bewegen, Ontwerp voor waarnemen, Ontwerp voor taal, Ontwerp voor leren en tegen vergeten, Ontwerp voor denken, Ontwerp voor de gebruiker. In deze analyse ga ik dieper in op elke richtlijn. Wat wordt ermee bedoeld? Aan de hand van door mij gezochte voorbeelden beschrijf ik op welke wijze er in het ontwerp van de site rekening is gehouden met de richtlijn. Ik ondersteun mijn analyse met beeldmateriaal (screendumps). Ik gebruik tenminste drie sites om over de zes richtlijnen een uitspraak te doen. Sesamstraat. Dit is de officiĂŤle website van het kinderprogramma Sesamstraat (NTR, z.d., Sesamstraat)
Ontwerp voor bewegen: Er is gebruik gemaakt van grote knoppen. Dit merk je door de muisaanwijzer boven een groot gebied te houden waar je dus op kunt klikken. Ook de gele terugknop naar elke ruimte is groot.
7
Ontwerp voor waarnemen: Je ziet direct dat je in Sesamstraat bent. Bij elke ruimte wordt er door middel van audio ook verteld waar je bent en er zijn herkenbare figuren. Er wordt weinig gebruik gemaakt van teksten. Ontwerp voor taal: Het aantal teksten is beperkt en die woorden die er zijn hebben een herkenbaar font en bestaan uit 1 woord. Ontwerp voor leren en tegen vergeten: Elke kamer heeft erboven een foto van degene van wie de kamer is. Zie op de grote afbeelding lnks Ieniemienie. In de kamer zelf zie je ook weer Ieniemie terugkomen, zie afbeelding met de terugknop. Ontwerp voor denken: De ruimtes zijn klein. De navigatie is ook duidelijk. Je hebt de hoofdstraat en daarachter de andere ruimtes. Er is geen derde diepte. Ook is alles herkenbaar, maar wel op een grappige manier neergezet. Zie bijvoorbeeld die broccoli boom in de grote afbeelding. Ontwerp voor de gebruiker: De hele applicatie is gericht op de doelgroep kinderen. Er wordt gezorgd dat er genoeg te doen is, dat er herkenbaarheid is in het ontwerp en dat alles heel vriendelijk oogt.
8
Zappelin. Dit is de officiĂŤle website van de kinderzender Zappelin op NPO (NPO, z.d., Zappelin)
Ontwerp voor bewegen: Er is gebruik gemaakt van grote knoppen. Dit merk je door de muisaanwijzer boven een groot gebied te houden waar je dus op kunt klikken. Ontwerp voor taal: Het aantal teksten is beperkt en die woorden die er zijn hebben een herkenbaar font en bestaan uit maximaal 2 woorden. Ontwerp voor de gebruiker: De hele applicatie is gericht op de doelgroep kinderen. Er wordt gezorgd dat er genoeg te doen is, dat er herkenbaarheid is in het ontwerp en dat alles heel vriendelijk oogt. Ontwerp voor denken: De ruimtes zijn klein. De navigatie is ook duidelijk. Je hebt de hoofdstraat en daarachter de andere ruimtes. Er is nu wel een derde diepte in de vorm van een zolder in de spelletjesruimte.
9
Ontwerp voor waarnemen: Je ziet niet direct dat je op de website van Zappelin bent. Dit had misschien wel gekund door letterlijk een Zappelin te gebruiken. Bij elke ruimte wordt er door middel van audio ook verteld waar je bent en er zijn herkenbare figuren. Er wordt weinig gebruik gemaakt van teksten. De terugknop valt niet zo goed op midden in het scherm en met een ‘play’ tekentje.
Ontwerp voor leren en tegen vergeten: De letterkamer zoals hierboven is herkenbaar als op de afbeelding links met ook weer letters. Dit wordt alleen niet overal doorgevoerd. De spelletjeskamer ziet er bijvoorbeeld zo uit als je binnen bent:
10
Jim Carrey. Dit is de website van acteur en komiek Jim Carry: (Jim Carrey, z.d., Website)
Ontwerp voor waarnemen: Er wordt weinig gebruik gemaakt van teksten. Ontwerp voor de gebruiker: De hele applicatie is gericht op fans van Jim Carrey. Er wordt gezorgd dat er genoeg te doen is, dat er herkenbaarheid is in het ontwerp en er is veel gekkigheid.
11
Opdracht 3: Aanbevelingen 3a: Aanbevelingen De inzichten die ik heb opgedaan naar aanleiding van mijn onderzoek neem ik mee in de vorm van aanbevelingen voor de navigatiestructuur, het ontwerp van de interactie en de intuïtieve interface van mijn applicatie. Deze aanbevelingen heb ik toegevoegd aan de analyse opdracht. -Er is herkenbaarheid en gekkigheid in het ontwerp. -Er mogen nie te veel teksten zijn. -De applicatie moet passen bij de doelgroep. -De gebruiker moet geboeid blijven.
3b: Flowchart en storyboard Ik maak mijn analyserapport compleet met een flowchart en een storyboard van mijn eigen applicatie, waarin ik meeneem: -de wijze waarop ik de gebruiker ga betrekken in de door jou ontworpen omgeving -de wijze waarop ik de gebruiker laat navigeren door de content -de wijze waarop ik de gebruiker ga ‘verleiden’ te klikken op onderdelen -of deel te nemen aan bepaalde uitdagingen. Het verhaal is herkenbaar in getekende stijl met piraten, kinderen en hun ouders en de Nederlandse vlaggen. Ook zie je weinig teksten en is er als een verhaal ingesproken. De verleiding zit ook in het verhaal en het zoeken naar een schat.
12
De navigatie gaat door grote herkenbare knoppen. Ze zitten wel aan de zijkant zodat ze de ervaring zo min mogelijk storen.
Op de volgende pagina staat de flowchart. Je begint bovenaan met een titel, daarna volgt een keuzescherm waar je kunt kiezen uit uiterlijk, naam en voorkeur van dier: walvis, haai, octopus of spinosaurus. Na de keuzes gaat het verhaal verder, maar is het wel anders door je keuzes. Heeft de gebruiker voor een spinosaurus gekozen, dan komt er in het verhaal een spinosaurusschip. Aan het eind van het verhaal begint het echte spel. De wereld blijft boeiend door de gekkigheden die je tegenkomt (piraten, katten, zonnende mensen met gouden kettingen) en omdat er munten verstopt zitten op willekeurige plaatsen. Dit is mogelijk door middel van variabelen. In de bijlage heb ik het origineel gezet van mijn flowchart.
13
14
Bronvermelding Druifdesign. (2004). Afstudeerscriptie Interaction Design. Gedownload op 20 oktober 2014, van http://www.druifdesign.nl/projecten/afstudeerscriptie/inhoud.pdf Jim Carrey. (z.d.). Website. Geraadpleegd op 20 oktober 2014, van http://www.jimcarrey.com/index_jc.html NPO. (z.d.) Zappelin. Geraadpleegd op 20 oktober 2014, van http://www.zappelin.nl NTR. (z.d.). Sesamstraat. Geraadpleegd op 20 oktober 2014, van http://sesamstraat.ntr.nl Wikipedia. (2014). Interaction Design. Geraadpleegd op 18 september 2014, van http://nl.wikipedia.org/wiki/Interaction_design
15