Flat 2.0 en hoe het de gebruiksproblemen van Flat Design oplost

Een plat ontwerp bestaat al sinds de jaren 1950 toen de internationale typografische stijl werd ontwikkeld. In de afgelopen tijd is het enorm populair geworden sinds de lancering van Microsoft's nieuwe geometrie- en typografiegericht Metro-ontwerp taal, eerst in de nieuwe Windows Phone in 2010, daarna in Windows 8 in 2012.

Platte ontwerp wordt gekenmerkt door de gebrek aan driedimensionale effecten en glanzende visuele elementen om te bereiken netheid, minimalisme, en helderheid. Het gaat in tegen de eerder overheersende ontwerpstijl, het skeuomorfisme dat gebruik maakt van glanzende knoppen en illustraties die 3D-objecten nabootsen..

Platte vormgeving is voornamelijk bedoeld om websites te stroomlijnen, meer aandacht te besteden aan inhoud, meer intuïtieve interacties aan te bieden en een snellere en meer functionele gebruikerservaring te bieden. Het is ook gemakkelijk om de eenvoudige, rechthoekige elementen en grid-gebaseerde lay-outs voor responsief ontwerp te gebruiken.

Bruikbaarheidsproblemen van plat ontwerp

Hoewel plat ontwerp ons enorm veel hulp en een geweldige toolkit biedt om onze gebruikers snelle en overzichtelijke websites te bieden, kan het bepaalde bruikbaarheidsproblemen veroorzaken, vooral als het te veel wordt gebruikt..

Geen visuele betekenissen van klikbaarheid

Als we driedimensionale effecten gebruiken, geeft dit natuurlijk een illusie van diepte aan onze ontwerpen. Dit helpt gebruikers snel vind interactieve elementen, erop geklikt (zoals knoppen en pictogrammen) of ingevuld (zoals formuliervelden). Een van de grootste zorgen over een plat ontwerp is dat het het gebruikers moeilijk maakt om dit te doen klikbare elementen herkennen.

Vóór het vlakke tijdperk gaven webontwerpers gewoonlijk klikbaarheid aan met behulp van visuele oplossingen zoals verlopen, texturen, verhoogde randen of slagschaduwen om knoppen en andere klikbare objecten eruit te laten zien alsof ze kunnen worden ingedrukt.

Vlak ontwerp mist deze visuele betekenaars en moet dezelfde taak oplossen met een veel kleinere toolset: kleuren, vormen, nabijheid, en contextuele elementen.

Waarom is dit een probleem? Laten we een experiment proberen.

Bekijk deze screenshot hieronder. Probeer te raden welke elementen klikbaar zijn op basis van deze screenshot. Het zijn niet degenen waar je eerst aan zou denken. We kunnen veel andere vergelijkbare bruikbaarheidsproblemen overal op internet vinden.

Verminderde detecteerbaarheid vanwege geen Z-as

Mensen in het echte leven vinden voorwerpen en bewegen zich voort in drie dimensies: de x-, y- en z-as. Wanneer ze een minimalistisch ontworpen, platte website tegenkomen zonder 3D-effecten, krijgen ze een ervaring die anders is dan ze gewend zijn, waar ze vooral bekend mee zijn.

Dit betekent dat ze dat moeten doen gebruik meer moeite om relaties tussen objecten te ontdekken, en de visuele hiërarchie begrijpen van de site. We moeten bijvoorbeeld meer tijd besteden aan de startpagina van Microsoft's Developer Network om de informatie visueel te decoderen en het doel van de verschillende elementen op de site..

De vuistregel in UX-ontwerp is om altijd te proberen de cognitieve belasting van de gebruiker te minimaliseren om de bruikbaarheid te maximaliseren. Zoals we in veel gevallen kunnen zien, gebeurt dit niet altijd met een plat ontwerp.

Lage informatiedichtheid

Vlak design werd ook bekritiseerd vanwege het risico op lage informatiedichtheid door de UX-expert Nielsen-Norman Group.

In hun kritiek op de bruikbaarheid van Windows 8 gebruikten ze voorbeelden van Windows Store-apps en de website van de Los Angeles Times om de problemen te laten zien lage informatiedichtheid (met enkele verhalen op het beginscherm, koppen zonder samenvattingen, nauwelijks herkenbare groepering, enz.) kan dit vanuit het oogpunt van bruikbaarheid veroorzaken.

Vanuit een ander aspect kan minder informatie ook worden gezien als het verwijderen van afleidingen, waardoor gebruikers zich alleen op belangrijke dingen kunnen concentreren, maar als het minimalisme overdreven is, kan het gemakkelijk het primaire doel van een site opgeven, d.w.z. het transformeren van informatie naar de kijkers.

The Rise of Flat 2.0

Naarmate meer en meer ontwerpers de gebreken in de bruikbaarheid van plat ontwerp herkennen, is er een nieuwe, meer volwassen versie ervan ontstaan, genaamd “Flat 2.0” of “Bijna plat” ontwerp. Hoewel de overgang van skeuomorfisme naar plat radicaal was, is de evolutie van plat ontwerp veel ongrijpbaarder.

De nieuwe stijl is nog steeds vlak, maar wel voegt een beetje driedimensionaliteit terug aan de ontwerpen in de vorm van subtiele schaduwen, hoogtepunten, en lagen. Flat 2.0 - als het goed wordt gebruikt - kan de eerder genoemde gebruiksproblemen oplossen door een beetje realisme (skeuomorfisme) terug te brengen en wat diepte en details toevoegen, terwijl de voordelen van minimalisme zoals gestroomlijnde websites, helderheid en een snellere laadtijd van de pagina's behouden blijven.

Materiaal ontwerp

De nieuwe ontwerptaal van Google, Material Design genaamd, is waarschijnlijk het meest opvallende voorbeeld van de Flat 2.0-stijl. Google bracht Material Design in 2014 uit met Android L. Hoewel Material Design de belangrijkste kenmerken van een vlak ontwerp behoudt, gebruikt het bepaalde metaforen uit de natuurkunde om gebruikers te helpen snel analogieën te vinden tussen de echte wereld en de digitale wereld..

Materiaalontwerp gebruikt de z-as, geeft subtiele diepte naar het ontwerp, en slim gebruik maakt van lagen door scheid ze met slagschaduwen en animaties. Google heeft een superkleine beschrijving over hoe het werkt, en het is echt de moeite waard om het door te lezen om de belangrijkste principes en regels ervan te begrijpen.

Conclusie

Omdat goede ontwerpers altijd proberen de ervaring van hun gebruikers te verbeteren, verandert de webontwerpindustrie voortdurend. Vlak ontwerp heeft het skeuomorfisme snel vervangen, resulterend in grid-based, minimalistische lay-outs en simplistische elementen die de laatste tijd het internet hebben overschreden (dit heeft geleid tot praten over webontwerp dat saai of zelfs dood ging worden, maar het kon niet verder van de waarheid zijn).

Flat 2.0 geeft antwoorden op de waargenomen problemen van plat ontwerp. Het is een slim compromis tussen functionaliteit, esthetiek en bruikbaarheid. Natuurlijk hoeven we de Material UI-kits niet te gebruiken overal, maar het begrijpen van de filosofie erachter kan ons een stevige achtergrond geven hoe onze eigen stijl te ontwikkelen in overeenstemming met de nieuwste bevindingen in user experience design.