In hoeverre wordt er bij het ontwerp van websites Rekening gehouden met esthetiek in de huidige multi-screen world?

In hoeverre wordt er bij het ontwerp van websites Rekening gehouden met esthetiek in de huidige multi-screen world? Onderzoeksdocument Tei Van Den Neste Studentnummer 1587934 1/24

Inleiding 1. Wat valt onder esthetisch ontwerp? 1.1 Wat heeft esthetisch ontwerp met user experience design te maken? 1.2 Hoe is esthetisch ontwerp te meten? 1.2.1 Visual complexity 1.2.2 Prototypicality 1.2.3 Volgens The essential guide of user interface design 2.1 Hoe groot is de multi screen world 2.2 Welke devices horen bij de multi screen world 2.3 Bij welk domein hoort de multi screen world 2.3.1 ubiquitous computing (ubicomp) 2.3.2 Pervasive computing 2.3.3 Wearable technology 2.3.4 Conclusie 3. Welke aspecten van esthetisch design worden nu toegepast? 3.1 Computer 3.1.1 Youtube 3.1.2 Amazon 3.1.3 Yahoo 3.2 Tablet 3.2.1 Youtube 3.2.2 Amazon 3.3.3 Yahoo 3.3 Smartphone 3.2.1 Youtube 3.2.2 Amazon 3.3.3 Yahoo 4. In hoeverre wordt er bij het ontwerp van websites rekening gehouden met esthetiek in de huidige multi screen world? Bijlage A: Bronnen Bijlage B: Reflectie 2/24

Inleiding Het internet wordt steeds uitgebreider, lomper en groter, om gevonden te worden en binnen de eerste milliseconden een goede indruk te maken bij je gebruiker wordt steeds belangrijker. Doorat we steeds vaker op onze smartphone of tablet (die meestal ook nog eens andere afmetingen hebben) dingen opzoeken lijkt de tijd dat we alleen maar thuis op onze personal computer dingen opzochten nu definitief voorbij. Als ontwerper willen en moeten we mee met de trend om te ontwerpen voor de multi screen world of dit nou met een aparte mobiele pagina is of met een responsive ontwerp voor een webpagina. Als ontwerper is het vaak moeilijk om te bepalen of de website die je gemaakt hebt voor de gebruiker mooi of lelijk is en of hoe met de usability gesteld is. Dit lijkt vaak gebaseerd op de willekeur en subjectieve mening van de gebruiker die je op dat moment spreekt. Het is zeker het geval dat de gebruikers op basis van gevoel uitspreken of zij iets wel of niet mooi vinden. Er is echter ook een minder subjectieve manier om ervoor te zorgen dat je gebruikers je ontwerp binnen 15 milliseconden als mooi waarderen. In dit essay wordt beschreven hoe je je kansen kunt vergroten, hoe belangrijk het is om goed met de grafisch ontwerper samen te werken en hoe het nu eigenlijk staat met esthetiek in de multi screen world. 3/24

1. Wat valt onder esthetisch ontwerp? 1.1 Wat heeft esthetisch ontwerp met user experience design te maken? Bij user experience wordt er af en toe gedacht dat het niet uit maakt hoe de applicatie eruit ziet als de applicatie maar een goede usability heeft. Veel onderzoeken bewijzen echter het tegendeel. Gebruikers denken bijvoorbeeld al voordat ze een applicatie gebruiken dat een applicatie makkelijker in gebruik is als hij er mooier uitziet. daarnaast schat de gebruiker het gebruiksgemak na het gebruik van de applicatie hoger in als de applicatie er mooi uit ziet. Daarnaast merkt Jessy James Garrett in The Elements of user experience design: User centered design for the web and beyon (2011) op Problems with visual design layouts that seem cluttered or busy, or colors that are inconsistent or clashing can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design. Bij een onderzoek uitgevoerd door G. Lindgaard, G. Fernandes, C. Dudek en J.Brown (2006) wordt de conclusie getrokken dat mensen na ongeveer 50 milliseconde een blijvende indruk hebben over webpagina s. Een mooie user interface zorgt ook voor dat gebruikers sneller leren, bij een test met studenten bleek dat studenten die een mooi vormgegeven boek kregen een hogere motivatie hadden om te leren. Szabo en Kanuka ondervonden tijdens een onderzoek dat mensen sneller en succesvoller leerden bij een goede toepassing van esthetische principes. Heines ontdekte dat slecht onrtwopen applicatie schermen zorgden voor moeilijkheden bij communicatie. Daarnaast blijkt dat een goed ontworpen interface ervoor kan zorgen dat het voor de gebruiker makkelijker is om informatie te snappen. Naast een goede user interface is het dus ook belangrijk om tijd te besteden aan een goede toepassing van esthetische element omdat deze een grote invloed hebben op het succes van de toepassing. 1.2 Hoe is esthetisch ontwerp te meten? Alexander Tuch et al. (2012) bespreken in het onderzoek The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments de manier waarop mensen visuele stimuli verwerken met betrekking tot websites. De eerste twee stappen in onderstaand plaatje (na binnenkomst artwork) zijn stappen die gemaakt worden op basis van gevoel. De twee stappen daarna vergen wel meer cognitieve inspanning. 4/24

^ Verwerking visuele stimuli Prototypicality en visual complexity komen voor bij de eerste twee stappen en zijn dus belangrijk voor de eerste impressie over een website. 1.2.1 Visual complexity Er wordt aangenomen dat de grafiek van visuele complexiteit en de beoordeling van de gebruiker parabool vormig is. Lage visuele complexiteit wordt gezien als saai en hoge visuele complexiteit als overweldigend. Je kunt dus zeggen dat de visuele complexiteit van een webpagina bepalend is voor het succes, idealiter is de visuele complexiteit van de webpagina aangepast op het scherm waar het op getoond wordt. 1.2.2 Prototypicality Helmut Leder et al. (2004) beschrijven prototypicality als; Prototypicality is the amount to which an object is representative of a class of objects. It is built through experience, and a prototypical object optimally represents a class of objects. Je zou dus kunnen zeggen dat prototypicality gestoeld is op het mentale model van de gebruiker. Als we dit betrekken op digitaal ontwerp voor het scherm is het dus zo dat je een hoge prototypicality kunt bereiken door te voldoen aan andere trends op het gebied van web design maar ook op het gebied van visuele elementen die uniek zijn voor een platform. Een groot nadeel voor ontwerpers is dat het mentale model en de fluency of processing (het gemak waarmee stimuli verwerkt worden) waar de prototypicality op gebaseerd is verandert en gemakkelijker wordt naar mate een ontwerper meer ervaring krijgt. Dit betekent dat ontwerpers op een andere manier websites beoordelen en creeëren waardoor deze mogelijk niet aansluit bij de wensen van de gebruiker. 5/24

^ VIsual complexity vs prototypicality 1.2.3 Volgens The essential guide of user interface design Het boek The essential guide of user interface design heeft een concretere aanpak voor het bepalen of een webpagina goed of slecht is. The essential guide of user interface design beveelt aan om te kijken of alle elementen op de pagina geidentificeerd kunnen worden zonder de tekst 6/24

te lezen. Als dit lukt dan is het ontwerp volgens The essential guide of user interface design in orde. Voor dit essay is er een kleine user test gehouden, volgens deze resultaten zouden alle sites voor smartphones en tablets op de manier niet in orde zijn. Om deze reden is daarom dit onderdeel geschrapt uit de webpagina analyse. 7/24

2. Wat is multi-screen Multi screen is het concept dat elke user meerdere devices (screens) tot zijn beschikking heeft. 2.1 Hoe groot is de multi-screen world In kwartaal één van 2014 had maarliefst 58% van de Nederlanders een smartphone, en in het tweede halve jaar van 2013 was 52% van de nederlanders in het bezit van een tablet. 97% van de Nederlanders had in 2013 toegang tot een Personal Computer (desktop of laptop). In de Verenigde Staten had in kwartaal één van 2014 ongeveer 58% van de Ameriken een smartphone en 42% een tablet. Volgens een onderzoek van Google dat is uitgevoerd in 2012 is ongeveer 90% van de dagelijkse media interacties met een scherm. Op het gebied van multi screen maakt 90% van de mensen sequentieel gebruik van meerdere schermen. Dat wil zeggen dat ze de schermen na elkaar gebruiken of overstappen van device. 78% van de gebruikers die niet sequentieel (dus tegelijk) gebruik maken van meerdere devices gebruiken het device om te multi tasken. Dit betekent dat ze twee totaal verschillende taken doen. De overige 22% maakt complementair gebruik van de meerdere devices, dat wil zeggen dat ze de devices gebruiken om bijvoorbeeld iets op te zoeken over het programma dat ze op dat moment kijken. 2.2 Welke devices horen bij de multi-screen world Door google worden smartphones, tablets, computers en televisies gerekend tot de multi screen world. De multi screen world is in de ruime zin alles wat te maken heeft met meerdere schermen. In de nabije toekomst zullen waarschijnlijk meer devices toegevoegd worden aan deze wereld, denk aan de Google glass en smart watches. 2.3 Bij welk domein hoort de multi-screen world 2.3.1 ubiquitous computing (ubicomp) Volgens Mark Weiser, gezien als de vader/uitvinder van ubicomp, is bij ubiquitous computing de interactie met een device één met een interactie met de omgeving. Daarbij is het volgen Weiser zo dat er geen focus nodig is om de actie te voltooien (nu is er focus op het scherm nodig). Mark Weiser was rond 1991 bezig met een prototype genaamd Tabs, Pads and Boards. Het idee van dit prototype was om post its, a4 en flip overs digitaal te maken. Dit prototype was een goede voorloper van wat wij nu multi screen noemen (Post its zijn smartphones, A4 zijn tablets en beamers zijn digitale flip overs). 2.3.2 Pervasive computing Pervasive computing is nagenoeg hetzelfde als ubicomp. Het belangrijkste verschil tussen pervasive computing en ubicomp is dat pervasive computing ervan uit gaat dat het voor de gebruiker altijd mogelijk moet zijn om te interacteren met data. Dit moet volgens pervasive computing altijd en overal kunnen, daarom wordt bijvoorbeeld ook geexperimenteerd met slimme 8/24

koelkasten met schermen. Smartphones zijn meer een onderdeel van pervasive computing dan ubicomp. Je zou dus kunnen zeggen dat voor het succes van multi screen computing pervasive computing erg belangrijk is. 2.3.3 Wearable technology Wearable technology gaat zoals de naam doet vermoeden uit van draagbare technologie. Dit concept gaat ervan uit dat de technologie die je draag (denk aan een smartwatch of google glass) communiceert met de fysieke omgeving waar je je in begeeft. Op deze manier kan de technologie je begeleiden. Wearable technologie staat op dit moment in zijn kinderschoenen en maakt het daarom moeilijk om te bepalen welke invloed het gaat hebben op de multi screen wereld. 2.3.4 Conclusie Multi screen computing behoort toe aan alle bovenstaande domeinen. Hoewel de bovenstaande domeinen in de jaren 90 of eerder bedacht zijn blijken de domeinen ubicomp en pervasive computing onmisbaar om een goede multi screen world te ondersteunen. Het wearable technology domein kan in de komende jaren de multi screen world in zijn geheel laten veranderen door het toevoegen van schermen waar zeer beperkte informatievoorziening op mogelijk is. 9/24

3. Welke aspecten van esthetisch design worden nu toegepast? Bij deze deelvraag wordt gekeken naar de toepassing van de drie eerder genoemde manieren om esthetiek te meten. De geselecteerde websites zijn de meest bezochte websites en zijn daarnaast geoptimaliseerd voor het device waarvoor ze beoordeeld worden. De televisie behoort bij het onderzoek van google tot de multi screen world maar worden in dit onderzoek buiten beschouwing gelaten. Hoewel de televisie mogelijk wel zal groeien in de toekomst (door bijvoorbeeld de google chromecast) zijn er op dit moment weinig sites geoptimaliseerd voor de televisie. De websites die gekozen zijn voor dit onderzoek zijn, 1. Youtube (wereldwijd de op Google en Facebook na de best bezochte website.) 2. Yahoo (wereldwijd na Youtube de best bezochte site.) 3. Amazon (wereldwijd op de tiende plek van best bezochte websites.) 3.1 Computer De computer zijn genomen op een 16:10 resolutie van 1440x900, deze komt op mijn systeem het dichtst bij de wereldwijd meest voorkomende resolutie 1366x768. 10/24

3.1.1 Youtube Visual complexity Youtube heef op de PC een gemiddelde visuele complexiteit. Prototypicality Het is moeilijk om de prototypicality van youtube te bepalen. Youtube is de grootste en meest bekende website met video s hierdoor is youtube waarschijnlijk de grondlegger van het mentale model van de meeste gebruikers. Om deze reden is er gekozen om youtube als high prototypicality te beoordelen. 11/24

3.1.2 Amazon Visual complexity; De visuele complexiteit van Amazon is hoog. Prototypicality; De prototypicality van de amazon website is hoog, als je kijkt naar andere grote online retailers (internationaal) is deze opzet redelijk gelijk. Kijk bijvoorbeeld naar ebay.com of bol.com. 12/24

3.1.3 Yahoo Visual complexity; De visuele complexiteit van Yahoo is hoog. Prototypicality; Yahoo is op het gebied van prototypicality een lastig te beoordelen pagina. Yahoo biedt op zijn homepage nieuws aan maar is tegelijk ook een mail provider en een zoekdienst. Yahoo lijk op het gebied van prototypicality op geen van beiden. 13/24

3.2 Tablet De tablet screenshots zijn genomen op een ipad met een geschaalde resolutie van 1024x768. 3.2.1 Youtube Visual complexity; De visual complexity van de youtube site voor tablets is laag. Prototypicality; Zoals al eerder gemeld is het lastig om de prototipicality van youtube te bepalen omdat het hoogstwaarschijnlijk de site is waar mensen hun mentale model van media websites vandaan halen. Een opvallende keuze van youtube is wel dat het de beperkte mobiele website gebruikt in plaats van een verkleinde desktop website. Je zou op basis van andere tablet website kunnen zeggen dat dit niet heel gebruikelijk is en daarom de prototypicality minder is. 14/24

3.2.2 Amazon Visual complexity De visual complexity van Amazon.com is hoog. Je ziet dat er veel elementen op het scherm weergegeven worden welke moeilijk te filteren zijn. Nog een rare bijkomstigheid is dat Amazon alleen bij de tabletversie Amazon Prime nadrukkelijker aanwezig heeft gemaakt. Prototypicality Amazon heeft een hoge prototypicality waarbij het gebruik van grote beelden een grote rol speelt. De meeste webshops kiezen er bij een tablet voor om in de bovenbalk te houden en vooral grote beelden te laten spreken. 15/24

3.3.3 Yahoo Visual complexity De visual complexity van Yahoo is wederom hoog. Er worden veel elementen weergegeven waarvan je je kunt afvragen hoe belangrijk deze zijn (zoals bijvoorbeeld het weer rechtsonder). Prototypicality De prototypicality van Yahoo in vergelijking met bijvoorbeeld The new york times is erg laag, ook in vergelijking met een zoekdienst als google is de prototypicality erg laag. In vergelijking met een maildienst is de prototypicality ook laag. Het vreemde is dat Yahoo wel al deze services aanbiedt. 16/24

3.3 Smartphone De smartphone screenshots zijn genomen op een 4,5 inch android smartphone met een resolutie van 1280x720. Deze resolutie valt in de meest voorkomende resoluties op smartphones. 3.2.1 Youtube Visual complexity; De visual complexity van Youtube voor smartphones is gemiddeld. Prototypicality; Op de smartphone is Youtube redelijk gelijk aan de indeling van bijvoorbeeld Vimeo. je zou dus kunnen concluderen hieruit dat de prototypicality van Youtube op smartphones hoog is. 17/24

3.2.2 Amazon Visual complexity; De visual complexity van Amazon is gemiddeld. Prototypicality; De manier waarop Amazon.com is opgezet heeft veel overeenkomsten met andere online retailers. Zo gebruiken Ebay, Bol.com en Staples.com dezelfde soort mobiele website. De prototypicality van amazon is dus hoog. 18/24

3.3.3 Yahoo Visual complexity; De visual complexity van Yahoo is wederom hoog. Er zijn erg veel elementen te zien, wat in het bijzonder opvalt is dat hier zelfs meer overbodige elementen zoals het weer, economie en live sportuitslagen te zien zijn. Prototypicality; 19/24

Zoals hiervoor is uitgelegd is de prototypicality van Yahoo bepalen erg lastig. Yahoo heeft niet één specifiek hoofddoel voor de website, het is een verzameling van verschillende diensten. Om deze reden is de prototypicality van Yahoo ook altijd laag. 20/24

4. In hoeverre wordt er bij het ontwerp van websites rekening gehouden met esthetiek in de huidige multi-screen world? Wat opvalt is dat een aantal simpele esthetische waarden vaak niet toegepast worden in de multi screen world. We zien dit probleem bij verschillende websites. De echt grote websites die hier besproken worden maken soms rare keuzes op het gebied van visual complexity. Zo zagen we dat Youtube de bijzondere keuze maakte om de tablet pagina exact dezelfde pagina te laten zijn als de smartphone pagina. Dit resulteert in een pagina met een zeer lage visual complexity waardoor hij wat leeg oogt. Daarnaast zien we dat bepaalde websites er bewust voor kiezen om een hoge visual complexity aan te houden. Bijvoorbeeld websites van kranten of nieuws websites houden een hoge visual complexity aan omdat dit waarschijnlijk beter in het mentale model van de gebruiker past en daardoor ook betrouwbaarder overkomt en sneller te verwerken is. Op het gebied van prototypicality zie je dat vooral online retailers die conversie gedreven zijn sneller geneigd zijn om elkaars layout over te nemen. Yahoo maakt op elk device wat aparte keuzes maar dit kan mogelijk toe te schrijven zijn aan het feit dat ze niet één maar meerdere core services bieden. Met betrekking tot de multi screen world kan je zeggen dat deze regels niet altijd even consequent toegepast worden. Het volwassen worden van de multi screen world zal waarschijnlijk bijdragen aan een betere integratie van deze esthetische regels in het ontwerp voor een device. 21/24

Bijlage A: Bronnen Bronnen http://uxmyths.com/post/1161244116/myth 25 aesthetics are not important if you have good u s http://www.slideshare.net/whipplehill/responsive web design in a multiscreen world Bronnen Multi screen http://statline.cbs.nl/statweb/publication/?vw=t&dm=slnl&pa=71098ned&d1=0 32,55,60&D 2=0 2&D3=a&HD=140601 1132&HDR=G1&STB=T,G2 http://www.marketingfacts.nl/berichten/marktaandeel smartphone in nederland groeit naar 58 pr ocent# http://www.marketingfacts.nl/statistieken/channel/mobile_marketing https://docs.google.com/viewer?url=http://ssl.gstatic.com/think/docs/the new multi screen world study_research studies.pdf&chrome=true http://www.marketingcharts.com/wp/online/us tablet ownership update january 2014 39508/ http://www.pewinternet.org/fact sheets/mobile technology fact sheet/ http://www.ubiq.com/weiser/testbeddevices.htm http://www.ubiq.com/hypertext/weiser/sciamdraft3.html http://www2.futurelab.org.uk/resources/publications reports articles/web articles/web Article497 Prototypicality http://homepage.psy.utexas.edu/homepage/faculty/swann/docu/fall395pdocs/reber%20percept ual%20fluency.pdf Aantal bezoekers http://www.alexa.com/topsites Resolutie webpagina s http://www.w3schools.com/browsers/browsers_display.asp http://gravlab.com/2013/11/21/common android screen resolutions video/ Bron Usability en Esthetiek B. Chawda, B. Craft, P. Cairns, S. Rüger and D. Heesch (2005) Do Attractive Things Work Better? An Exploration of Search Tool Visualisations. HCI 2005 The Bigger Picture 22/24

G. Lindgaard,G. Fernandes,C. Dudek and J. Brown (2006) Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology, Vol. 25, No. 2, March April 2006, 115 126 D. Check Ling Ngo, L. Seng Teo and J. Byrne (2002) Modelling interface aesthetics D.C.L. Ngo et al. / Information Sciences 152 (2003) 25 46 Bron Visuele complexiteit en Prototypicality A. Tuch, E. Presslaber, M. Stöcklin, K. Opwis and J. Bargas Avila (2012) The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments. Elsevier 23/24

Bijlage B: Reflectie Dit essay was een herkansing voor een essay waar ik een onvoldoende voor gehaald heb. Ik heb veel geleerd van die onvoldoende, toendertijd dacht ik er allemaal makkelijk over. Ik schreef een stukje, dat uploade ik en ik verwachtte dat dat voldoende zou zijn. Ik heb daarvan geleerd dat onderzoek doen meer is dan alleen maar informatie bij elkaar zoeken. Het gaat over het combineren van bronnen en hier één geheel van te maken. Bij dit essay heb ik erg veel plezier gehad aan het ontleden van esthetiek. Naast UXD is mijn tweede specialisatie Visual Design. Ik merk dat bij die klassen vaak erg gemakkelijk gedacht wordt over de user experience design. Daar wordt gedacht dat als de ontwerper het zelf snapt het voor iedereen duidelijk is. Bij dit onderzoek heb ik mijn best gedaan om een combinatie te maken tussen User Experience Design en Visual Design. Ik wilde aan Visual designers meegeven dat het niet zo simpel is als ik snap het dus mijn gebruiker snapt het. Daarnaast is dit voor mijzelf ook een eye opener geweest met betrekking tot het belang van Visual Design op usability. Eerst wilde ik vooral een mooi ontwerp maken omdat ik het leuk vond maar nu snap ik wat een ontwerp mooi maakt en waarom het belangrijk is voor de usability. Ik merk na dit onderzoek dat ik dit een erg interessant onderwerp vindt maar dat ik naarmate ik langer UXD doe meer interesse krijg in beweegredenen en wat tastbaardere uitingen waarom dingen wel en niet werken. Dit essay gaat erg over de psyche achter ontwerp en de ongrijpbaarheid van dit onderwerp in het korte tijdsestek vond ik lastig. Het is zeer moeilijk om testen te ontwikkelen die binnen een planning passen en die uit te voeren met meerdere personen van verschillende doelgroepen. Ik denk dat bij meer tijd dit onderzoek zeker verdiept en beter getest kan worden. Ik vond het schrijven van dit essay vele malen moeilijker dan het schrijven van mijn domotica essay. Ik had het gevoel dat mijn domotica essay wat dieper ging (met usability e.d.) waar dit redelijk vlak bleef en vooral op de Pixels gericht was. 24/24