Seminar. Webanimaties en gebruikersbeleving JASON MILLER JDE-UXD PAULINE WESEMAN

Transcriptie

1 Seminar Webanimaties en gebruikersbeleving JASON MILLER JDE-UXD PAULINE WESEMAN

2 Het web wordt voor de gebruiker met alle nieuwe mogelijkheden en technieken steeds interactiever. Pagina s zijn niet langer statisch, maar er is steeds meer sprake van interactiviteit tussen gebruiker en website. Het web heeft zich in zijn levensduur razendsnel ontwikkeld. Webontwikkelaars zoeken al sinds de eerste website naar steeds uitgebreidere vormen om content mee aan te bieden. Tegenwoordig zijn er tal van mogelijkheden op het vlak van interactiviteit tussen website en gebruiker, een groot deel daarvan bestaat tegenwoordig uit animaties, maar welk effect hebben webanimaties allemaal op de gebruikersbeleving en wat kunnen we in de toekomst verwachten? In 1989 bracht het Amerikaanse bedrijf CompuServe een nieuwe versie uit van het digitale afbeeldingsformaat genaamd Graphics Interchange Format, beter bekend als de.gif. Het kreeg de versienaam GIF89a en de mogelijkheid om verschillende afbeeldingen achter elkaar te weergeven aan de hand van een tijdsvertraging. Dankzij deze toevoeging konden animaties gecreërd en weergegeven worden op het web (CompuServe, 1990). Nadelen van het.gif formaat waren echter het gebrek aan interactiviteit en de bestandsgrootte. Hoe meer beelden er per seconde getoond worden in een animatie, des te vloeiender de animatie voor het menselijke oog oogt, maar een vloeiend ogende animatie was toendertijd te groot voor gebruik op het web vanwege de lage snelheden van de toenmalige internetaansluitingen. Een andere ontwikkelaar, Jonathan Gay, vermoedde in 1995 dat er grote vraag was om over het internet afbeeldingen en animaties te versturen. Hij en zijn team begonnen met het toevoegen van animatiemogelijkheden aan de software waar zij eerder aan hadden gewerkt. In 1996 brachten zij het product uit met de naam FutureSplash Animator. De software bood in tegenstelling tot het.gif formaat de mogelijkheid tot interactie in de vorm van animaties en geluid. Jonathan Gay verkocht vanwege het grote succes uiteindelijk in dat jaar zijn software aan het bedrijf Macromedia. Zijn software ging verder onder de naam Macromedia Flash (Gay, J., 2006). Het bedrijf Adobe kocht uiteindelijk het concurrerende bedrijf Macromedia en de software staat tegenwoordig bekend onder de naam Adobe Flash (Adobe, 2005). 2

3 Enkele nadelen van Flash waren echter dat het niet compatibel was op het besturingsysteem van Apple, ios. Dit betekende dat Flash content niet aangeboden kon worden op ios. Steve Jobs, toenmalig CEO van Apple, was van mening dat Adobe Flash het web meer kwaad deed dan goed. Dit omdat de software zich niet in het publieke domein bevond, maar enkel eigendom was van Adobe. Het verkortte volgens Jobs ook de levensduur van de batterij aanzienlijk (Jobs, S., 2010). Samen met Apple, Google en Microsoft stortte Adobe zich in 2011 op de gezamenlijke standaard genaamd HTML5 welke een groot gedeelte van de functionaliteten zou bieden waarover Adobe Flash beschikte (Winokur, D. 2011). Aan het begin van de 21e eeuw was dé drijfveer achter de ontwikkelingen binnen de wereld van het web de opkomst van de standaarden voor webbrowsers. Het was een belangrijke factor in het tenietdoen van beperkingen die opgelegd werden aan ontwikkelaars door verschillende browsers. Browsers zoals Microsoft Internet Explorer 5.0 en Opera hadden volgens het World Wide Web Consortium (W3C), een internationale organisatie die standaarden opstelt voor webbrowsers, een degelijke ondersteuning van de standaarden die het W3C had opgesteld (W3C, 2014). John Resig zette de trend van de standaardisering voort. Hij bedacht hiervoor het programmeerraamwerk jquery. Middels dit raamwerk kon er door ontwikkelaars makkelijker geprogrammeerd worden omdat via het raamwerk vele inconsistenties tussen webbrowsers verholpen werd. Naast de makkelijkere syntax bood jquery ook vele nieuwe functionaliteiten op het gebied van interactie, waaronder uitgebreide animatie (jquery, 2014). jquery maakt deel uit van een belangrijk punt in de geschiedenis van animaties binnen het web. Dit is ook af te lezen is aan het hedendaagse gebruik van jquery. Meer dan 60% van de websites maakt in december, 2014, gebruik van het raamwerk dat door Resig is bedacht. Websites die hieronder vallen zijn Amazon, Instagram, WordPress en Microsoft. (W3Techs, 2014). 3

4 Een andere belangrijke factor die meespeelde in welke content er kon worden aangeboden was de internetsnelheid. De meeste Nederlandse huishoudens waren in de jaren 90 namelijk aangesloten via een verbinding over de telefoonlijn met een veel lagere downloadsnelheid dan vandaag de dag. Dit zorgde voor een beperking in de content die aangeboden kon worden via websites. In 2014 is de toenmalige beperking in mindere mate van toepassing met de snellere internetverbindingen en trend in toename van het aantal glasvezelaansluitingen. Met glasvezel kunnen o.a. snelheden behaald worden tot de 1000 mb/s (125 megabytes per sec), maar de geleverde snelheid is afhankelijk van het abonnement dat de provider biedt (Consumentenbond, 2012). Stratix Consulting, een onafhankelijk adviesbureau dat zich richt op de elektronische communicatie, stelde in haar rapport van 2013 dat 18% van Nederland de mogelijkheid heeft tot het snelle glasvezelnetwerk. Echter staat dit voor het aantal huizen waar de infrastructuur voor glasvezel aanwezig is en niet het daadwerkelijke abonnementen in gebruik. Het huis kan vervolgens wel op verzoek van de bewoner zonder veel inspanning aangesloten worden op het glasvezelnetwerk. Een derde (32%) van de landelijke 18% die gedekt zijn maken daadwerkelijk gebruik van het glasvezelnetwerk (Stratix Consulting, 2013). De vormen van interactie die vandaag de dag mogelijk zijn met behulp van animaties zijn onderdeel van de laatste experimentele technologieën op het web. Voor veel ontwikkelaars is het werken met zulke technologieën daarom op het eerste gezicht aantrekkelijk, maar echter moet er in acht genomen worden dat, zoals de geschiedenis van het web uitwijst, er verschillende mate van ondersteuning zal zijn onder webbrowsers. De toename van mobiel internetgebruik weerspiegelt dit feit. Onderzoeksbureau TNO meldt dat in % van de Nederlandse internetters mobiele apparaten gebruikten om online te gaan (niet thuis of op werk). In 2012 is dit aantal aanzienlijk gestegen naar 60% (Bakker, T. et al, 2013, pag. 80). Het is daarom van groot belang om vooraf uitvoerig de doelgroep te onderzoeken om daarna te bepalen welke mogelijkheden er zijn op het gebied van werken met animaties. De manier waarop er gecommuniceerd wordt dicteert de doelgroep en niet de ontwikkelaar. 4

5 Aan de hand van Modernizr, een toevoeging bestaande uit een verzameling aan JavaScript functies, kunnen webontwikkelaars detecteren in welke mate het apparaat van de gebruiker ondersteuning biedt voor de gebruikte technologieën op de website. Hierdoor wordt het mogelijk voor de webontwikkelaar om op een gelaagde manier verschillende versies van een pagina te weergeven, mogelijk met/zonder animaties. Op deze manier blijft de website ook toegankelijk voor apparaten met een beperkte vorm van ondersteuning voor de laatste technologieën. Dit begrip heet progressive enhancement. (Modernizr.com, 2014). Met de toenemende complexiteit van interfaces wordt het steeds belangrijker om feedback te leveren aan de gebruiker gedurende de interacties. Wanneer overgangen tussen elementen ogenblikkelijk zijn vindt er voor de gebruiker een momentopename plaats waarin hij/zij mentaal notities bij moet houden van wat er voor én na de interactie gebeurde. Dit heeft een extra belasting als gevolg op de hersenen omdat de gebruiker zelf participeert in het bijhouden van interacties. Middels animaties kunnen er echter tussenstappen geplaatst worden binnen het moment van interactie. Door het start- en eindpunt van de interactie bijeen te binden in de vorm van een animatie wordt de interactie voor de gebruiker duidelijker. Geanimeerde user interfaces kunnen de ervaring dus aanzienlijk verrijken, maar de ontwikkelaar dient een scherpe houding te hebben tegenover zijn/haar rationale gezien de energie- en tijdsinvestering in animaties. Welke toegevoegde waarde heeft de animatie uiteindelijk voor de gebruiker? (Nabors, R. 2014). In Animations: From Cartoon to the User Interface (Chang, B., Ungard, D., 1993) wordt er gesteld dat het introduceren van animaties binnen de user interface cognitieve en affectieve voordelen met zich mee brengt. Door de gebruiker zijn interpretatie van visuele wijzigingen binnen de interface minder te belasten maakt animatie het mogelijk voor de gebruiker om zich te focussen op de taak die hij probeert uit te voeren. Tevens wordt, door de interface te ontdoen van deze ogenblikkelijke visuele veranderingen, de kans minder dat de gebruiker onaangenaam verrast zal zijn. Chang en Ungard stellen dat het toepassen van animaties daarom niet enkel bijdragen aan het begrip dat de gebruiker heeft voor de interactie (cognitief), maar ook zorgt voor een aangenamere ervaring (affectief). 5

6 Met de nieuwste versie van het Android besturingssysteem van Google speelt het in op de mogelijkheden die animaties bieden middels de designtaal die het material design noemt. Het wil met deze designtaal de klassieke principes van design combineren met de innovatie van technologie en wetenschap. Een van de design principles van Google met material design is dat animaties de betekenis van interactie duiden voor de gebruiker. Wanneer elementen aan de gebruiker getoond worden, veranderen van vorm en zich reorganiseren zorgt material design voor visuele continuïteit binnen de interface. Wanneer animaties ontworpen worden moet er volgens Google overwogen worden hoe en waar de gebruiker zijn aandacht op gevestigd moet zijn. Tussen animaties en overgangen binnen de interface moeten er duidelijke visuele verbindingen zijn waardoor de gebruiker zo min mogelijk cognitief belast wordt om te begrijpen wat er binnen de interface gebeurd. Er moet sprake zijn van een hiërarchie tussen de verschillende animaties om zo het oog te leiden naar het punt waar de focus van de gebruiker op moet liggen. Lineaire animaties moeten ook vermeden worden tenzij het element gekoppeld is aan een bepaalde as, denk hierbij aan een schuifregelaar of scrollbalk. Dit omdat Google stelt dat het gebruiken van lineaire animaties de naadloze ervaring van visuele continuïteit breekt omdat ook in de fysieke wereld objecten een massa hebben en niet abrupt beginnnen/stoppen zodra er zich op deze objecten een kracht uitoefent. (Google, 2014). De conclusie die ik hieruit kan trekken is dat de trend met betrekking tot het gebruik van webanimaties zich sterk voort zal zetten. Een gevoel van continuïteit komt de gebruiker cognitief en affectief ten goede gedurende de momenten van interactie. Iets waar ik voor mijn essay nooit over nagedacht had. Dat de animatie van interactieve elementen binnen websites een zo een en een steeds belangrijkere rol zal spelen is duidelijk wanneer er gekeken wordt naar marktleiders zoals Google, die via designstijlen zoals material design de animatie tussen de elementen waarmee geïnteracteerd kan worden voorop stellen. 6

7 BRONNENLIJST Adobe. (2005, 5 december). Adobe Completes Acquisition of Macromedia. Geraadpleegd op 1 december, 2014, via pdfs/200512/120505adobeacquiresmacromedia.pdf Bakker, T., Bouman, A. van der Glessen, A., Holtzer, A., Huijboom, N., Ooms, M., van Schoonhoven, B. (2013, 18 juli). Marktrapportage Elektronische Communicatie, Rapportage over Delft: TNO. Chang, B., & Ungar, D. (1993). Animation: From Cartoons to the User Interface. UIST 93: User Interface Software and Technology, CompuServe. (1990, 31 juli). Graphics Interchange Format Programming Reference. Geraadpleegd op 1 december, 2014, via Consumentenbond. (2012). Snelheid van glasvezel-internet. Geraadpleegd op 1 december, 2014, via Gay, J. (2006). The History of Flash. Geraadpleegd op 1 december, 2014, Google. (2014). Material Design. Geraadpleegd op 2 december, 2014 via design/spec/material-design/introduction.html#introduction-principles Jobs, S. (2010). Thoughts on Flash. Geraadpleegd op 1 december, 2014, via hotnews/thoughts-on-flash/ jquery.org. (2014). History. Geraadpleegd op 1 december, 2014, via Modernizr. (2014, 3 december). Modernizr: the feature detection library for HTML5/CSS3. Geraadpleegd op 3 december, 2014, via Nabors, R. (2014, 11 februari). Web Animation At Work. Geraadpleegd op 1 december, 2014, via

8 BRONNENLIJST Stratix Consulting. (2013). Glasmonitor Cijfers en trends over de glasvezelsector in Nederland. download-reports?download=88:glasmonitor-2013 Geraadpleegd op 1 December, 2014, from Winokur, D. (2011, 9 november). Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5. Geraadpleegd op 1 december, 2014, via adobe.com/flashplayer/2011/11/flash-to-focus-on-pc-browsing-and-mobile-apps-adobe-to-moreaggressively-contribute-to-html5.html W3C.(2014, 14 maart). The History of the Web. Geraadpleegd op 1 december, 2014, via W3Techs. (2014, 1 december). Usage statistics and market share of JQuery for websites. Geraadpleegd op 1 december, 2014, via 8