In hoeverre wordt er bij het ontwerp van websites rekening gehouden met esthetiek in de huidige multi-screen world? Tei Van Den Neste Studentnummer: 1587934
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. Doordat 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 hoe het 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.
Wat heeft esthetisch ontwerp met user experience design te maken? Grafisch ontwerp en user experience design zijn twee onderwerpen die normaliter niet heel veel met elkaar te maken hebben, toch is het ontwerp van een website belangrijk voor een goede user experience. (Chawda, Craft, Cairns, Rüger and Heesch (2005) De bezoeker van een website vorm binnen vijftig milliseconden een mening over een website en deze mening houden ze doorgaans ook vast (Lindgaard, Fernandes, Dudek and Brown (2006). Dit betekent dat een gebruiker mogelijk al binnen vijftig milliseconden besloten heeft of ze de website, die misschien wel heel gemakkelijk is in bediening, wel of niet gaan gebruiken. Daarnaast schat een gebruiker de usability van een website hoger in als de website mooier is, zowel voor als na het gebruik van de website (Chawda et al. (2005). Gebruikers leren sneller uit mooi vormgegeven boeken en hebben ook een hogere motivatie om te leren (Check Ling Ngo, Seng Teo and Byrne (2002). Een mooi vormgegeven interface waarbij rekening wordt gehouden met visual complexity en prototypicality maakt het voor de gebruiker ook makkelijker om te navigeren door een website of applicatie. (Check Ling Ngo et al. (2002) Als user experience designer ben je meestal niet de persoon die ook het ontwerp maakt. Om te voorkomen dat je in een hevige discussie verwikkeld raakt over hoe de website vormgegeven moet worden, zijn er een tweetal punten waar je rekening mee kunt houden als je met de ontwerper praat. 1. Visual complexity De visual complexity van een website beschrijft de complexiteit van de elementen die te zien zijn. Als je een grafiek zou maken over visual complexity zou deze parabool vormig zijn (Tuch, Presslaber, Stöcklin, Opwis and Bargas-Avila (2012). Lage visual complexity wordt als saai beschreven door gebruikers. Hoge visual complexity wordt als overweldigend beschreven door gebruikers.
2. Prototypicality Prototypicality beschrijft het mentale model dat gebruikers hebben over een categorie waar de website in valt (Tuch et al. (2012). Baseer een nieuws website bijvoorbeeld op de algemene vorm van nieuws websites. op deze manier past de website binnen het idee van de gebruiker hoe een dergelijke website eruit moet zien en is deze voor de gebruiker makkelijker te verwerken (mentaal) en zal de gebruiker eerder geneigd zijn om de pagina te gebruiken. Hieronder is een voorbeeld te zien van low, mid en high visual complexity en low en high prototypicality. Mid visual complexity en high prototypicality hebben de voorkeur voor een goed ontwerp. Bron: The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments
Wat is de multi-screen world? De multi-screen world is de wereld waarbij één gebruiker toegang heeft tot meerdere schermen, zoals nu regelmatig het geval is. Ongeveer 58% (marketingfacts (2012) van de Nederlanders heeft een smartphone en ongeveer 51% (marketingfacts (2014) van de Nederlanders heeft een tablet. Daarnaast heeft 97% van de Nederlanders toegang tot een personal computer (statline (2014), dit kan een desktop computer of notebook zijn. De multi-screen world maakt dus een groot deel uit van de wereld die wij nu kennen. Deze wereld is gebaseerd op de ideeën van de ubiquitous computing, pervasive computing en wearable technology. In 1991 werkte Mark Weiser aan een prototype genaamd tabs, pads and boards. Het idee was om verscheidene artikelen in de kantooromgeving zoals de post-its, papier (a4/letter) en flip-over boards te digitaliseren (Galitz (2002). Weiser had voor elk van deze materialen een elektronisch equivalent gemaakt. Pervasive computing gaat ervan uit dat het mogelijk is om altijd te interacteren met data op elk device. In essentie is de multi-screen world zoals wij die vandaag de dag kennen een uitvoering van een idee waar Mark Weiser in 1991 aan begonnen is. Je zou de post-its kunnen vergelijken met smartphones, pads met tablets en boards met beamers. Op dit moment zijn wearables (draagbare technologie) in opkomst, deze vormen de nieuwste onderdelen in de multi-screen world. Ook de functie die deze hardware gaat vervullen is al beschreven in de geschiedenis. Zo is het doel (volgens de schrijvers van The essential guide of user interface design) van wearables om te communiceren met de fysieke omgeving. Hoewel de televisie ook bij de multi-screen world hoort is deze vanwege het minimale aantal voor tv s geoptimaliseerde webpagina s, en daarmee dus de beperkte invloed op de multi-screen world, niet meegenomen in dit onderzoek (Google (2012). Bij televisies is de invoer apparatuur (afstandsbediening) ook nog een sterke beperking op de esthetiek en usability van een website.
Welke aspecten van esthetisch design worden nu toegepast? Na een korte analyse van een aantal van de meest bezochte websites ter wereld zijn de volgende conclusies getrokken (Alexa.com (2014). Websites voor de personal computer Deze website voor de personal computer bevatten over het algemeen een relatief hoge visual complexity. Door de hoge resoluties en de relatief grote afmetingen van dit scherm is deze complexiteit te overzien. Deze kan echter wel in eerste instantie als overweldigend ervaren worden. De prototypicality wordt voor websites voor de personal computer over het algemeen goed toegepast. Websites voor tablets Vooral web winkels en nieuwssites hebben op tablets een erg hoge visual complexity. Dit heeft er mogelijk mee te maken dat de webshops veel producten, aanbiedingen en vooral ook veel klant-specifieke producten wil laten zien. De prototypicality is bij deze websites vooral gebaseerd op het model website dat Amazon en E-bay in 1995 lanceerde. Bij de nieuwssites is het mogelijk zo dat deze visual complexity beter te overzien is omdat de prototypicality van een nieuwssite door gebruikers mogelijk gebaseerd is op de krant (als medium). De krant (als medium) heeft zelf ook een hoge visual complexity, dit zorgt ervoor dat de gebruiker mogelijk ingesteld is op een site met een hoge visual complexity als ze aan een nieuwssite denken. Youtube, de media website die bekeken is had een erg lage visuele complexiteit en een lage prototypicality. Youtube heeft ervoor gekozen om voor de tablet de smartphone layout te kiezen waardoor deze buiten de prototypicality valt vergeleken met andere media sites. Websites voor smartphone Amazon en Youtube hebben voor de smartphone een lage visual complexity aangehouden, de site van Yahoo heeft voor de smartphone een hoge visual complexity. Door het kleine
scherm komt deze visual complexity snel over als overweldigend. Andere populaire nieuwssites zoals The New York Times en CNN kiezen voor een gemiddelde visual complexity en ogen hierdoor betrouwbaarder. Op het gebied van prototypicality scoort Amazon goed, de site gebruikt veelal dezelfde elementen als andere grote online retailers. Youtube heeft ook een prototypical ontwerp. Yahoo heeft een compleet andere website als de meeste online kranten websites en lijkt geen rekening te houden met prototypicality. Hoe kunnen de ontwerpers rekening houden met deze punten? Het is moeilijk voor ontwerpers om rekening te houden met deze punten, naarmate ontwerpers meer ervaring krijgen neemt de fluency of processing toe. Dat wil zeggen dat het voor ontwerpers makkelijker wordt om complexe visuele structuren te verwerken en te waarderen. Hierdoor is het moeilijker voor ontwerpers onderling om het werk van elkaar objectief te beoordelen. Daarnaast verandert het mentale model van de ontweper over hoe een website eruit moet zien van een ontwerper naarmate hij meer werkervaring krijgt. Hierdoor is wat voor de ontwerper logisch is mogelijk onlogisch voor de gebruiker. Kijk dus goed naar andere websites die in hetzelfde domein opereren en probeer dit te gebruiken om je eigen ontwerpen succesvoller en in de ogen van de gebruiker gemakkelijker te gebruiken te maken. Daarnaast is het ook een goed idee om als ontwerper regelmatig te vragen of potentiële gebruikers de website willen beoordelen. In hoeverre wordt er bij het ontwerp van websites rekening gehouden met esthetiek in de huidige multi-screen world? Op dit moment wordt er door grote websites rekening gehouden met visual complexity en prototypicality. Je ziet dat de complexiteit over het algemeen afneemt naarmate het
scherm kleiner wordt. Toch lijken nieuws websites deze trend te breken en overal een gemiddelde of hoge visual complexity aan te houden. Een reden dat de gebruiker dit accepteert is mogelijk omdat de gebruiker het mentale model van een krant heeft (een indeling die veel nieuws websites aanhouden) en door gewenning deze visual complexity sneller kan verwerken.
Bronnen 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 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 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 Informatie op website: Marketingfacts 2012. Smartphonebezit in Nederland groeit naar 58 procent. Geraadpleegd op 01-06-2014 http://www.marketingfacts.nl/berichten/marktaandeel-smartphone-in-nederland-groeit-n aar-58-procent# Informatie op website: Marketingfacts 2014. Tablet is gemeengoed: meer dan helft Nederlandse huishoudens bezit tablet. Geraadpleegd op 01-06-2014 http://www.marketingfacts.nl/berichten/tablet-is-gemeengoed-meer-dan-helft-nederlandse-huishoudens-b ezit-tablet?sqr=tablet& Informatie op website: Statline 2014. ICT gebruik van personen naar persoonskenmerken. Geraadpleegd op 28-05-2014 http://statline.cbs.nl/statweb/publication/?vw=t&dm=slnl&pa=71098ned&d1=0-32,55,60&d2=0-2&d3=a &HD=140601-1132&HDR=G1&STB=T,G2
W. Galitz (2002) The Essential Guide to User Interface Design Published by John Wiley & Sons, Inc. Informatie op website: Google 2012. The new multi-screen world: understanding cross platform consumer behaviour. Geraadpleegd op 28-05-2014 https://docs.google.com/viewer?url=http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_re search-studies.pdf&chrome=true