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