Hoe ziet de toekomst van de Flat design trend eruit?

Transcriptie

1 Hoe ziet de toekomst van de Flat design trend eruit? Onderzoeksverslag Seminar (JDE-SVIS.3V-13) David van Valkengoed Studentnummer: JDE-VISD-1 Docent: Dick Swart Laatste aanpassing: 3 Januari

2 Introductie Als onderwerp van mijn seminar heb ik de trend Flat Design als onderwerp gekozen. Dit heb ik gekozen omdat ik zeer geïnterreseerd ben in het ontwerpen van interfaces en deze trend steeds meer het straatbeeld begint te domineren. Het Flat design begint overal het skeuomorphisme te verdringen, maar intussen duiken termen als skeuominimalism alweer op, ik ben benieuwd in hoeverre Flat design invloed heeft op het vormgeven van de toekomst. 2

3 Methoden & Resultaten Ik heb voornamelijk onderzoek gedaan door middel van deskresearch, binnen dit research heb ik verscheidene boeken, blogs en (online) discussies geraadpleegd. De volledige bronnenlijst is te vinden aan het einde van dit document. Als hoofdvraag van dit onderzoek heb ik mezelf de volgende vraag gesteld: Hoe ziet de toekomst van de Flat design trend eruit? Om het onderzoek af te kaderen en mezelf handvatten te geven tijdens het onderzoek heb ik naast de hoofdvraag ook een aantal deelvragen opgesteld: Wat is skeumorphisme? - Wat zijn de voor en nadelen van skeuomorphisme? Wat is Flat design? - Wat zijn de voor en nadelen van Flat Design? Welke trends zijn er nog meer op het gebied van vormgeving van (web)applicaties? Resultaten Skeuomorphisme is een term die gegeven wordt aan het feit dat in nieuwe media elementen meegenomen worden uit het oude medium. Dit wordt vaak gedaan om de gebruikservaring te verbeteren, maar het bevat ook enkele nadelen; elementen nemen vaak niet alleen de visuele eigenschappen mee maar vaak ook (onbewust) de limieten van het traditionele medium. Flat Design is een manier van vormgeven, het bewust weglaten van elementen als schaduwen, kleurverlopen en texturen in een ontwerp is een van de hoofdlijnen van een Flat Design Naast Skeuomorphisme en Flat Design zijn er natuurlijk nog meer ontwikkelingen binnen dit vakgebied. Zo combineert Google s Material Design skeuomorphische elementen met minimalisme als uitgangspunt. Ook worden andere elementen zoals beweging steeds belangrijker. 3

4 Deelvraag: Wat is Skeuomorphisme? De term skeuomorphisme houdt in dat er elementen uit een ander medium meegenomen worden in een nieuw medium. Deze elementen hebben vaak niet echt een functie, zoals digitale camera s die een sluitertoon maken zodra de gebruiker een foto maakt. Of een digitale rekenmachine met de knoppen, kleuren en texturen van een fysieke rekenmachine. Deze eigenschappen zijn belangrijk voor de gebruikers om nieuwe en onbekende interfaces te kunnen linken aan elementen die herkenbaar zijn. Dit is belangrijk voor de user experience, gebruikers weten wat ze kunnen verwachten als ze een actie uitvoeren. Hierdoor was skeuomorphisme was een zeer belangrijk element bij de opkomst van de smartphones. Toen Apple op de markt kwam met de iphone was het een totaal nieuwe interface. Ineens waren er schermvullende applicaties terwijl voorheen gebruikers gewend waren aan losse vensters op bijvoorbeeld desktops. Dit betekende applicaties ook compleet verschillende vormgevingen konden hebben omdat ze het complete scherm voor zichzelf hadden. Een groot probleem van skeuomorphisme is dat als je elementen van een ander medium meeneemt naar een nieuw medium het vaak ook de limieten van het originele medium meeneemt. Een rekenmachine op een digitaal medium zou veel meer opties kunnen weergeven dan de traditionele fysieke rekenmachine. Ook sloegen sommige ontwerpen door in hun skeuomorphisme, applicaties met bijvoorbeeld recepten zagen er uit als een keuken, inclusief aanrechtbladen, kookgerei etc. Daarnaast zijn skeuomorphische elementen zoals bijvoorbeeld afbeeldingen lastig te schalen, dit werdt steeds belangrijker toen er steeds meer verschillende schermformaten op de markt verschenen. Vaste elementen werden steeds lastiger toepasbaar. En daarnaast moest er steeds beter gekeken worden naar laadtijden en het efficient gebruiken van rekenkracht van de verschillende devices. 4

5 Steeds meer ontwerpen af stapten van moeilijk te schalen texturen en het inladen van plaatjes. Een minimalistisch ontwerp kan namelijk veel oplossingen bieden voor deze problemen. 5

6 Deelvraag: Wat is Flat Design? In 2010 kwam Microsoft met zijn Metro GUI (graphical user interface) op de markt. De focus kwam op kleur, typografie en bovenal de content te liggen. Weinig schaduwen, simpele minimalistische vormgeving en veel kleur. Uit deze minimalistische manier van werken volgde de Flat Design Trend. Minimalisme is in deze trend de leidraad. Kenmerkend voor Flat Design is de uiteraard de minimalistische vormgeving maar vooral ook de vele kleuren en typografische elementen. Doorslaan in minimalisme kan ernstige gevolgen hebben voor de usability. Als een knop niet op een knop lijkt dat is het voor de gebruiker lastig te beoordelen wat ze kunnen verwachten. Gebruikers hebben namelijk op subtiele hints nodig die verraden wat de functie is van een bepaald element. Zo hebben bijvoorbeeld knoppen een kleurverloop en ronde hoeken, invulvelden een inner-shadow en de navigatie heeft altijd een mate van voorrang gehouden op de content. 6

7 Deelvraag: Welke trends zijn er nog meer op het gebied van vormgeving van (web)applicaties? De ontwikkelingen werden vooral gedomineerd door Apple en Microsoft. Maar ergens in 2011 verscheen een andere grote speler op het strijdtoneel. Google stond traditioneel gezien niet bekend om zijn visueel aantrekkelijke interfaces maar toen in 2011 Larry Page als CEO aan het hoofd van Google kwam kregen applicaties zoals Gmail en Google+ te langzaam een nieuwe stijl. Op het eerste oog leek deze stijl mee te gaan met de Flat design trend, je zag duidelijk dat een minimalistische insteek de leidraad was. Maar deze stijl; door sommige bestempeld als skeuominimalisme (Sanchez, E. 2012) moest het beste van de twee werelden combineren. Het voegt op een zeer subtiele wijze elementen toe uit het skeuomorphische tijdperk. Als je goed kijkt zie je de lichte kleurverlopen op knoppen en andere elementen uit het skeuomorphisme tijdperk. Deze subtiliteit is belangrijk, het maakt duidelijk aan de gebruiker dat een knop een knop is maar het behoudt de charme en de visuele aantrekkelijkheid van Flat design. Een ander steeds meer voorkomend element wat de toekomst van webapplicaties kan definiëren is beweging. Beweging kan de gebruiker context geven van waar hij zich in de hierarchie van de content bevindt en wat er aan de hand is. Neem bijvoorbeeld het uitklap-menu aan de zijkant van een applicatie dat opengaat met een zogenoemde hamburger-icon. Zodra dit menu een animatie vertoond zal dit onbewust een stuk meer duidelijk maken aan gebruiker, ze zien meteen waar het menu vandaan komt en waar het weer naartoe gaat. Omdat het menu over de content heen schuift is het duidelijk dat dit scherm een apart element is dat als het ware los staat van de rest, hierdoor geef je de gebruiker een aanwijzing dat dit menu ten alle tijden in beeld gebracht kan worden. Zelfs als deze beweging zeer snel en subtiel is zal dit de gebruikers genoeg handvatten geven om te begrijpen wat er aan de hand is. 7

8 Beweging kan dus, mits goed gebruikt, belangrijk zijn voor de user experience, overdreven animaties zullen de gebruikerservaring eerder verslechteren dan het ten goede te komen. Daarom kan beweging als een skeuomorpisch element beschouwd worden, beweging moet er uit zien en voelen zoals objecten in de echte wereld bewegen. Het duurt in de fysieke wereld langer voor zware objecten om in beweging te komen en het duurt langer om weer tot stilstand te komen, je zou dus met dit gegeven een element hoger in de hierarchie kunnen plaatsen door langerzamer, zwaarder en dus belangrijker te laten lijken. Daarnaast voorspellen sommigen dat applicaties in hun huidige vorm het niet lang zullen uithouden (Shonetell, 2014). Individuele applicaties die afzonderlijk van elkaar geopend moeten worden zullen plaats gaan maken voor push notificaties. Er is steeds minder animo om applicaties los te downloaden, dit omdat er gewoonweg heel veel applicaties zijn. 8

9 Conclusies De belangrijkste conclussies die getrokken kunnen worden uit het onderzoek: Skeuomorphisme kan zeer voordelig zijn voor de user experience. Het verduidelijkt voor de gebruiker bepaalde functies van een applicatie doordat het elementen uit een bekend medium meeneemt naar een onbekend medium. Wel kan skeuomorphisme vervallen in rommelige en onlogische ontwerpen, dit omdat je al snel onbewust ook de limieten van het originele medium meeneemt. Daarnaast zijn veel skeuomorphische elementen lastig toe te passen op de vele verschillende schermformaten. Flat Design is een goede oplossing om een ontwerp er goed uit te laten zien op veel schermformaten, ook is het voor veel mensen visueel aantrekkelijk. Wel kan het nadelige gevolgen hebben voor de user experience. Skeuomorphische elementen hebben een bepaalde functie, doorslaan in minimalistische ontwerpen kan al snel tot gevolg hebben dat deze functies verdwijnen. Material Design combineert skeuomorpisme met Flat Design, het behoudt subtiele elementen van het skeuomorphisme terwijl het minimalistisch oogt. Beweging kan een positieve invloed hebben op de user experience en kan een handige tool zijn om een applicatie er visueel aantrekkelijk uit te laten zien. 9

10 Discussie Het is lastig om de hoofdvraag met zekerheid te beantwoorden, vooral in een wereld waarin devices, interfaces en bovenal de gedachtegang van de eindgebruikers in hoog tempo veranderd. Ook de experts zijn het vaak oneens over de verschillende trends. De voorkeur van grafisch vormgevers gaat vaak naar Flat Design terwijl UX designers voorstanders lijken tezijn van Skeuomorphisme. Hierdoor zou je kunnen zeggen dat Skeuominimalisme een oplossing biedt voor veel problemen en het zou veel mensen van de verschillende vakgebieden ieder op zijn wenken kunnen bedienen. 10

11 Bronnen Alicata, J. (2014). The future of the home screen isn't about apps. Geraadpleegd op 15 December 2014, van Bohn, D. & Hamburger, E. (2013). Redesigning Google: How Larry Page engineerd a beautiful revolution. Geraadpleegd op 20 November 2014, van Brownlee, J. (2014). Is Flat Design already passe Geraadpleegd op 14 December 2014, van Carr, A. (2012). Will Apple s tacky software-design philosophy cause a revolt? Geraadpleegd op 13 December 2014, van Dorgelo, S. (2014). Alles moet plat: over Flat Design en gezond verstand. Geraadpleegd op 13 December 2014, van Dorgelo, S. (2014). Design is na 20 jaar eindelijk weer terug bij af. Geraadpleegd op 13 December 2014, van Moore, M. (2013). Almost Flat Design. Geraadpleegd op 21 November 2014, van Mynttinen, I. (2014). The ios Guidelines. Geraadpleegd op 21 November 2014, van Riley, W. (2013). Less Aesthetic, More Design. Geraadpleegd op 21 November 2014, van 11

12 Sanchez, E. (2012). Skeuominimalism - The Best of Both Worlds. Geraadpleegd op 21 November 2013, van Shonetell, A. (2014). Don't Get Used To Mobile Apps Their Days Are Very Obviously Numbered. Geraadpleegd op 15 December 2014, van Thomas, D. (2014). Motion: The new skeuomorphism. Geraadpleegd op 15 December 2014, van Ward, C. (2012). Popular Lies* about graphic design. New York: Actar. 12