Hoe ziet de toekomst van de ‘Flat design’ trend eruit? v1.2
Essay Seminar Visual Design (2014-B) Auteur: David van Valkengoed JDE-VISD-2 Docent: Dick Swart
Inleiding Flat Design, je ziet het overal verschijnen. Deze trend met een minimalistische insteek en kleurrijke interfaces begint steeds meer het ‘straatbeeld’ te domineren. Maar deze voor velen een visueel aantrekkelijke stijl kan vergaande gevolgen hebben voor de usability van een applicatie, website of elke andere interface die wij in het dagelijkse leven gebruiken en tegenkomen. Is het wel nuttig om alle kleurverlopen, schaduwen en texturen overboord te gooien, deze zijn tenslotte ook ooit met een reden gemaakt.
Skeuomorphisme Om de Flat Design trend goed te kunnen begrijpen moet je ook weten wat de term ‘Skeuomorphisme’ is. Skeuomorphisme betekent dat er in een nieuw ontwerp onderdelen en elementen uit oudere media geplaatst worden, ondanks dat deze elementen vaak geen echte functie meer hebben. Denk hierbij aan digitale camera’s die het geluid van een sluiter produceren tijdens het maken van een foto of een digitale kalender met texturen van papier en ringbanden. Voor gebruikers is dit een manier om de nieuwe en onbekende interfaces te kunnen linken aan elementen die herkenbaar voor ze zijn. De opkomst en populariteit van het skeuomorphisme ging hand in hand met de opkomst van de smartphone, Apple zette met de iPhone de telefoonmarkt op zijn kop en zorgde voor een enorme boost in de populariteit van de smartphone Voor gebruikers was het nieuw dat applicaties, anders dan op de desktops het hele scherm bedekten, dit betekende dat verschillende applicaties compleet verschillende stijlen konden hebben zonder dat ze uit de toon vielen. Vooral was het nieuw dat mensen hun smartphone met hun vingers konden besturen in plaats van een stylus. De iPhone zorgde dankzij zijn vaste schermformaat in voor veel meer vrijheid voor designers, omdat bij bijvoorbeeld andere mobiele besturingssystemen zoals Android, applicaties moeten kunnen draaien op allerlei verschillende schermen en schermformaten, dit betekend dat het veel moeilijker is om een applicatie te maken met veel visuele elementen.
Het probleem van Skeuomorphisme: Bij skeuomorphisme kunnen slechte keuzes in het ontwerpproces er voor zorgen dat een design al snel vervalt in kitscherigheid. Zoals in het echte leven nepbont niet bepaald als teken van goede smaak wordt gezien, geldt dit ook zeker voor ‘realistische’ apps. Een dieper liggend probleem is dat als een ontwerper een element uit een ander medium ‘leent’ het vaak ook de limieten van dat medium meeneemt. Waarom geven bijvoorbeeld rekenmachine-applicaties geen geschiedenis weer, hebben ze net zoals een fysieke rekenmachine een gelimiteerd aantal knoppen en waarom is een ‘single-line’ weergave nog steeds de norm? Zo zie je voorbeelden van text-editor apps die er exact uitzien als een typemachine en kookapplicaties die eruit zien als een keuken, inclusief aanrechtblad snijplank etc. Als je een applicatie ontwerp die eruit ziet als een boek, dan zal de gebruiker verwachten dat deze ook werkt als een boek. Hierdoor verlies je unieke functionaliteiten van het gebruikte medium, zo is in het voorbeeld van het boek een scrollbar op een digitaal medium de meest handige oplossing (in plaatst van dat je pagina’s omslaat). Kortom skeuomorphisme kan er voor zorgen dat een element blijft vastzitten in limieten die er misschien helemaal niet meer zijn.
Microsoft Niemand verwachte dat Microsoft de toon zou zetten in het ontstaan van een nieuwe trend, zo rond 2010 presenteerde Microsoft de Metro Gui. Alle kleurverlopen, schaduwen en texturen gingen overboord. De focus kwam te liggen op kleurrijke, minimalistische en typografische interfaces waarin de content zoveel mogelijk centraal moest staan. Deze ontwikkeling heeft veel designers aan het denken gezet en de vraag “Voegt dit element wel echt iets toe aan mij ontwerp?” werdt steed relevanter.
Daarnaast waren er veel ontwikkelingen op het gebied van web(applicaties) gaande; er verschenen veel nieuwe websites, veel nieuwe content en vooral nam het aantal verschillende apparaten aangesloten op het ‘Web’ enorm toe. Ontwerpers kregen steeds meer te maken met verschillende schermgroottes en het werd steeds belangrijker dat een ontwerp op al die schermgroottes er goed uitzag. ‘Vaste’ elementen zijn steeds moeilijker toe te passen en het is de de statische ontwerpprogramma’s zoals Photoshop nog niet gelukt deze ontwikkelingen bij te benen. Daarnaast moest er steeds beter gekeken worden naar laadtijden en het efficient gebruiken van rekenkracht van de verschillende devices. 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.
Flat design Al deze ontwikkelingen zorgden voor een nieuwe trend, die al snel als ‘Flat Design’ werd bestempeld. Terwijl de flat design trend het web(app) landschap kleurde en oplossingen bood voor allerlei problemen heeft het zo ook zijn nadelen. En zoals elke design trend is het ook gevoelig voor mis- en overgebruik. Zo kan doorslaan in minimalisme vergaande gevolgen hebben voor de usability. 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. Haal je deze hints weg en je veroorzaakt verwarring, mensen weten niet de ene functie van de andere te onderscheiden en wat ze kunnen verwachten als ze ergens op klikken.
Een oplossing? 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. 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.
Tot slot De toekomst is altijd lastig te voorspellen, maar de flat design trend heeft al een aantal iteraties ondergaan zelfs voordat het helemaal is ingeburgerd. Je ziet dat het skeuomorphisme wel degelijk een hele belangrijke rol speelt in hoe wij interfaces gebruiken en begrijpen. Het is dan ook afwachten in hoeverre het Flat Design stand blijft houden en persoonlijk denk ik dat het skeuominimalisme de nieuwe norm zal worden, totdat er uiteraard een nieuw medium ten tonele verschijnt wat de manier waarop wij vormgeven zal definiëren. Daarom is het voor designers belangrijk om altijd de gebruiker op de eerste plaats te zetten en daar zijn eigen creatieve en visuele input op aan te passen.
Bronnenlijst
Bohn, D. & Hamburger, E. (2013). Redesigning Google: How Larry Page engineerd a beautiful revolution. Geraadpleegd op 20 November 2014, van http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-pageengineered-beautiful-revolution Brownlee, J. (2014). Is Flat Design already passe Geraadpleegd op 14 December 2014, van http://www.fastcodesign.com/3028944/is-flat-design-already-passe Carr, A. (2012). Will Apple’s tacky software-design philosophy cause a revolt? Geraadpleegd op 13 December 2014, van http://www.fastcodesign.com/1670760/willapples-tacky-software-design-philosophy-cause-a-revolt Dorgelo, S. (2014). Alles moet plat: over Flat Design en gezond verstand. Geraadpleegd op 13 December 2014, van http://www.dutchcowboys.nl/design/31238 Dorgelo, S. (2014). Design is na 20 jaar eindelijk weer terug bij af. Geraadpleegd op 13 December 2014, van http://www.dutchcowboys.nl/design/31068 Moore, M. (2013). Almost Flat Design. Geraadpleegd op 21 November 2014, van http://www.matthewmooredesign.com/almost-flat-design/ Mynttinen, I. (2014). The iOS Guidelines. Geraadpleegd op 21 November 2014, van http://iosdesign.ivomynttinen.com/ Riley, W. (2013). Less Aesthetic, More Design. Geraadpleegd op 21 November 2014, van http://blog.wells.ee/less-aesthetic-more-design Sanchez, E. (2012). Skeuominimalism - The Best of Both Worlds. Geraadpleegd op 21 November 2013, van http://edwardsanchez.me/blog/13568587 Thomas, D. (2014). Motion: The new skeuomorphism. Geraadpleegd op 15 December 2014, van http://brolik.com/blog/motion-new-skeuomorphism/ Ward, C. (2012). Popular Lies* about graphic design. New York: Actar.
