Lek: hoe en waarom Google Material 3 Expressive Design ontwikkelde
Voorafgaand aan de met spanning verwachte aankondiging deze maand publiceerde Google per ongeluk een blogpost waarin de ideeën en het onderzoek achter Material 3 Expressive Design, de nieuwste designrichting van het bedrijf, werden beschreven.
Het volledige artikel is gearchiveerd op de blog door Naar Wayback Machine (Afbeeldingen die niet in de onderstaande gearchiveerde versie worden getoond.) Hieronder volgen de belangrijkste punten:
Material 3 Expressive vertegenwoordigt wat Google een “gedurfde nieuwe richting voor design” noemt, en is “de meest gewilde update van Google’s designsysteem ooit.” Google wil dat apps verder gaan dan een ‘strak’ en ‘saai’ design, en interfaces creëren die op emotioneel niveau met mensen communiceren. Naast de volledige naam wordt het ook wel de “M3 Expressive” of simpelweg “expressief ontwerp” genoemd.
Material 3 Expressive is ontstaan vanuit onderzoek – niet op de manier van 41 Shades of Blue, waarbij ontwerpbeslissingen werden gedelegeerd aan data, maar in een gezamenlijk onderzoek waarbij onderzoek, ontwerp en techniek een rol speelden.
In 2022 begon het Material Design-team zich af te vragen: "Waarom lijken al deze apps zo op elkaar? Zo saai? Was er geen ruimte voor meer gevoel?"
De afgelopen drie jaar hebben we de implicaties van deze dialoog onderzocht en tientallen ontwerp- en onderzoeksrondes uitgevoerd om de volgende evolutie van Material Design te vinden. Door middel van 46 afzonderlijke onderzoeken met honderden ontwerpen en meer dan 18000 deelnemers van over de hele wereld hebben we een prachtig en zeer bruikbaar systeem ontwikkeld. De principes van Material 3 Expressive zijn gebaseerd op gedegen onderzoek en gebouwd op bewezen best practices voor bruikbaarheid. Hierdoor kunnen ontwerpers deze nieuwe componenten en principes vol vertrouwen gebruiken, wetende dat ze iets bouwen dat eenvoudig te gebruiken is en waarmee mensen zich kunnen identificeren.
Deze onderzoeken omvatten:
- Oogbewegingen: Analyseer waar gebruikers hun aandacht op richten. Eye tracking is een krachtig hulpmiddel om gebruikersgedrag te begrijpen en gebieden te identificeren die verbeterd kunnen worden in het ontwerp.
- Enquêtes en focusgroepen: emotionele reacties op verschillende ontwerpen meten. Deze methoden helpen inzicht te krijgen in hoe gebruikers ontwerpen op emotioneel niveau ervaren.
- Experimenten: Verzamel gevoelens en voorkeuren. Experimenten zijn essentieel om te bepalen welke ontwerpen gebruikers prefereren en om de impact van verschillende elementen op de gebruikerservaring te evalueren.
- Makkelijk te gebruiken: Ontdek hoe snel deelnemers de interface begrijpen en gebruiken. Gebruiksvriendelijkheid is een belangrijke graadmeter voor het succes van een ontwerp. Het bepaalt hoe gemakkelijk en efficiënt gebruikers hun doelen kunnen bereiken.
Google zegt: "De essentiële onderdelen van expressief ontwerp zijn het gebruik van kleur, vorm, schaal, beweging en inperking." Bovendien: “Material 3 Expressive kenmerkt zich door een gedurfd gebruik van vorm en kleur, wat zorgt voor een heerlijke gebruikerservaring.” Het gebruik van opvallende kleuren en vormen is een belangrijk onderdeel van Material Design 3 Expressive, met als doel het creëren van boeiende en gedenkwaardige gebruikerservaringen.
Deze ontwerpaspecten zijn ook essentieel om het product gebruiksvriendelijker te maken, door de aandacht te vestigen op belangrijke elementen van de interface. Denk hierbij aan het markeren van belangrijke acties en het groeperen van vergelijkbare elementen. Dit verbetert de gebruikerservaring en zorgt ervoor dat deze soepeler en efficiënter verloopt.
De zwevende werkbalk is een component gegenereerd door Material 3 Expressive. In conceptontwerpen zien we een pilvormige onderste balk die niet de volledige breedte van het scherm beslaat. Hierdoor zien we een klein gedeelte van de achtergrond, waarbij de rand-tot-rand-ontwerpen duidelijker zichtbaar worden. Het is vergelijkbaar met wat er tegenwoordig beschikbaar is in Google Chat.
Uit onderzoek van Google blijkt dat ‘expressieve ontwerpen gebruiksvriendelijker zijn’ en gebruikers helpen ‘snel de belangrijkste actie op elk scherm te ontdekken en sneller te navigeren’.
…Deelnemers konden belangrijke UI-elementen tot vier keer sneller identificeren, wat aantoont dat deze ontwerpen de aandacht van de gebruiker naar het belangrijkste deel van het scherm trekken. We hebben veel apps gezien die deze verbeteringsniveaus bereiken, en het gaat verder dan alleen de oogfixatietijd. Ook zagen we in de verschillende ontwerpen die we testten een afname van seconden in de tijd die nodig is om op belangrijke acties te klikken.
Nogmaals, het is belangrijk om te benadrukken dat dit slechts conceptontwerpen zijn en geen afspiegeling van de daadwerkelijke producten. (Om het preciezer te maken: het is uitgelekt. Google Clock-nieuw ontwerp In het weekend.) Het ‘vóór’-voorbeeld hieronder is echter duidelijk de huidige Gmail-gebruikersinterface.
Wanneer we naar specifieke ontwerpen kijken, zoals de schermen voor de casestudy van een e-mail-app hieronder, zien we uit de eerste hand het voordeel van expressieve ontwerpprincipes. Zo is de Verzendknop in het nieuwe ontwerp groter, direct boven het toetsenbord geplaatst en wordt een secundaire kleur gebruikt om de aandacht te trekken. We kunnen dit vergelijken met het niet-expressieve ontwerp, waarbij een kleine 'Verzenden'-knop in de werkbalk bovenaan het scherm wordt geplaatst, samen met andere bedieningselementen, zoals het toevoegen van een bestand. Toen deelnemers in de app werd gevraagd om de e-mail te verzenden, zagen hun ogen de knop in het emoji-ontwerp vier keer sneller. Dit weerspiegelt het belang van ‘expressief ontwerp’ voor het verbeteren van de gebruikerservaring.
Andere conceptontwerpen tonen een horloge-app, spraakinvoer, foto-editor, betalingen en een portemonnee:
Of de nieuwe gebruikersinterface succesvol wordt geïmplementeerd, hangt af van hoe eenvoudig deze te implementeren is en hoe naadloos de updates vanuit M3 verlopen. Jetpack Compose lijkt er tegenwoordig veel beter voor te staan, dus ik ben voorzichtig optimistisch.
Ondertussen lieten onderzoek en gebruikerstesten zien dat “mensen van alle leeftijden een goed geïmplementeerd expressief ontwerp sterk verkiezen boven een niet-expressief ontwerp dat de richtlijnen voor de gebruikersinterface van iOS volgt.”
Google ontdekte dat 'expressieve ontwerpen geweldig zijn', vooral voor de aantrekkingskracht van een merk: 'Ons onderzoek toonde aan dat het gebruik van het M3 Expressive-ontwerp de 'coolheid' van een product voor mensen versterkte.'
- ...We ontdekten een toename van 32% in de perceptie van subculturen, wat suggereert dat expressief design een merk relevanter en 'beter op de hoogte' laat lijken.
- …34% toename in versheid, waardoor het merk fris en innovatief overkomt.
- …een sprong van 30% in rebellie, wat aangeeft dat expressief design het merk positioneert als een gedurfde, innovatieve leider, klaar om te breken met de norm.
Reacties zijn gesloten.