Material
Bij de volgende Androidversie, mogelijk Android 5.0 die nu door het leven gaat als Android L, gaan we een nieuw standaard thema zien. Dit nieuwe thema heet Material, oftewel 'materiaal'. Dit thema is volgens Google-ontwerper Matias Duarte gebaseerd op een designstudie die Google gedaan heeft rondom echte objecten. Material biedt een gevoel van diepte, zonder dat het echt een 3D-omgeving wordt.
Wat Martial precies is en hoe het er uit gaat zien in de praktijk laten we zien aan de hand van de belangrijke designprincipes van Material die Google zelf aanhaalt. Interessant om te vermelden is dat Material de nieuwe design-taal is die we bij alle Google-diensten terug zullen gaan zien.
1. Materiaal is de metafoor
We hebben een tijd gezien dat er bij software gebruik gemaakt werd van 'echte materialen'. Wanneer je een sport-applicatie had, werd er gras op de achtergrond weergegeven, een notitie-applicatie werd standaard voorzien van een papieren look, vaak compleet met echte notitiebloklijntjes. Vanaf Android 3.0, met de introductie van het Holo-thema, werd daar vanaf gestapt. Alles moest moderner en abstracter.
Matias Duarte geeft aan dat er nu opnieuw gekeken is naar écht objecten en naar mogelijke metaforen, aangezien metaforen belangrijk zijn in het intuïtief maken van een interface. We hebben duizenden jaren gebruikt gemaakt van papier en inkt en hebben als mensheid veel ervaring met dit medium. Software- en interface-design staat in vergelijking met de ontwikkeling van papier nog in de kinderschoenen. Hierdoor kunnen we in het design voor moderne apparaten veel leren van papier en papier is dan ook het uitgangspunt van 'material design' geworden.
Material moet de interface direct intuïtief maken voor de gebruiker, onder andere door de gebruikte papier-metafoor, maar aan de andere kant moet de interface ook niet beperkt worden: interface-design heeft niet de beperkingen die het materiaal in de echte wereld heeft.
2. Oppervlakten zijn natuurlijk en intuïtief
De oppervlakten en grenzen in het design van applicaties moeten gebruikers een visuele hint geven die eenvoudig te begrijpen zijn. Juist door de metafoor die gebruikt wordt, moeten gebruikers in één oogopslag weten wat er gebeurt. Hiervoor wordt in het Material-thema gebruik gemaakt van realistische belichting en schaduwen.
3. Dimensies maken interactie mogelijk
Material gebruikt dimensies, verschillende lagen in de interface. Dat wil niet zeggen dat een applicatie een 3D-interface wordt. Volgens Google wordt het absoluut niet als 'vliegen door de ruimte'. In het Material-thema is het mogelijk om diepte aan te brengen. Hierbij is het eenvoudig om de papier-metafoor te gebruiken. Zie een applicatie-interface als een stapel papier: de bovenste interface-elementen zullen de grootste schaduw hebben. Hierdoor krijg je wel een gevoel van diepte, maar geen écht 3D-gevoel.
De afbeelding hieronder laat het papier-idee goed zien. Elk element op de interface ligt op een bepaalde hoogte. Zo is direct duidelijk met welke objecten interactie met de gebruiker kan plaatsvinden. Daarnaast worden element op een natuurlijke manier van elkaar gescheiden.
Een interessante keuze van het design-team is dat knoppen op het scherm niet reageren als echte knoppen. Je drukt dus een virtuele knop niet in. In plaats daarvan beweegt de interface naar de gebruiker. Wanneer je op een knop drukt, zal er een 'inkt'-achtige animatie weergegeven worden die begint op het punt waar de gebruiker gedrukt heeft en die de hele knop 'overneemt' alsof er een inktvlek vanuit het punt van aanraken ontstaat.
4: Eén aanpasbaar design
Er is één onderliggend design voor Material, ongeacht op welk apparaat een app wordt weergegeven. Dat wil niet zeggen dat bijvoorbeeld een tabletapplicatie gewoon een opgeblazen versie is van een smartphone-applicatie, of dat een Android TV-applicatie gewoon de tabletweergave van een app laat zien. Nee, elk apparaat maakt gebruik van hetzelfde design-systeem, maar geeft een andere kijk op de app.
Wat belangrijk hierbij is, is dat de grootte en interactiemogelijkheden worden aangepast per apparaat. Wat hetzelfde blijven voor elke weergave, zijn de kleuren, iconografie, hiërarchie en ruimtelijke relaties.
Het voorbeeld dat je hieronder ziet, laat uitstekend zien wat bedoeld wordt met 'één aanpasbaar design'. Je ziet duidelijk in alle drie applicaties, die voor de desktop, tablet en smartphone, dat het om delfde app gaat. Het kleurgebruik komt overal terug, evenals dezelfde icoontjes. Wel zie je duidelijk dat er op de grotere schermen mee gebruik wordt gemaakt van de beschikbare ruimte. Op de smartphone wordt een enkele foto weergegeven, op de tablet wordt deze foto als tijdelijke overlay weergegeven en op de desktop is het paneel met de foto permanent in beeld.
5. Content is 'brutaal', grafisch en voorbedacht
Over alle content moet in material design goed zijn nagedacht. In het design wordt gebruik gemaakt van grote, duidelijke afbeeldingen die het scherm van rand tot rand vullen. Daarnaast wordt goed nagedacht over het kleurgebruik in een app. Belangrijke knoppen krijgen een extra accent. Door veel goed doordachte witruimte te gebruiken, wordt de aandacht gevestigd op de belangrijke op de echt belangrijke content, zonder dat de app daardoor te druk wordt.
Aan de typografie is voor Material ook gedacht. Google heeft voor verschillende doeleinde bepaalde lettergroottes vastgesteld, zodat een titel in alle apps dezelfde grootte is. Dit is belangrijk om een gebruiker te laten wennen aan het uiterlijk van bepaalde elementen van een apps en komt de herkenbaarheid zeker ten goede.
Over typografie gesproken: Roboto kennen we sinds Android 4.0 (Ice Cream Sandwich) als het lettertype van Android. Dit lettertype heeft de afgelopen jaren wel veranderingen ondergaan en is uitgebreid met extra lettertype-stijlen. Speciaal voor Material is het lettertype onder handen genomen en is het iets breder en iets ronder geworden. Dit moet de leesbaarheid ten goede komen en moet Roboto er goed uit laten zien op alle schermen.
6. Kleur, oppervlakte en iconografie benadrukken acties
Kleur is erg belangrijk in het Material-thema. Google heeft er voor gekozen om de meeste interface-elementen te standaardiseren, waardoor gebruikers precies weten wat ze moeten verwachten van een interface. Dat wil niet zeggen dat designers niet meer hun eigen stempel op een app mogen of kunnen drukken. Kleur speelt een belangrijke rol om een app herkenbaar te houden als een applicatie dat bij een bepaald merk hoort.
Felle of opvallende kleuren worden gebruikt om bepaalde onderdelen te benadrukken die belangrijk zijn voor een app. Een grote, opvallende knop zal belangrijke opties benadrukken. Die knop, minus de opvallende kleur, kennen we nu al uit de nieuwe Google+-applicatie. In de voorbeelden hieronder zie je bijvoorbeeld een 'nieuwe afspraak'-knop in de kalender-applicatie en een 'pauzeer/speel'-knop in de muziekspeler.
De afbeelding hieronder laat het kleurenpalet zien dat Google gebruikt voor het nieuwe design. In het volledige kleurenpallet zijn accentkleuren opgenomen, evenals achtergrond- en voorgrondkleuren.
Om icoontjes consistent te houden op verschillende apparaten geeft Google een volledige set met icoontjes vrij. Voorbeelden van deze icoontjes zie je hieronder. Het is de bedoeling dat deze gebruikt gaan worden voor websites en Android-apps voor smartphones en tablets, evenals voor Android TV, Android Auto en Android Wear-apps.
7. Verandering komt van de gebruiker
We hebben aan de manier waarop knoppen werken gezien wat Google wil dat voor de gebruiker duidelijk is dat hij de controle heeft. Daarbij is het belangrijk om animaties weer te geven die dat laten zien. Wanneer je op een knop drukt, beweegt niet direct de hele knop, maar zal door middel van een zich uitspreidende 'inktvlek' laten zien waar de gebruiker de knop aanraakte.
Hetzelfde geldt voor animaties van interactie met andere onderdelen. Wanneer een gebruiker een foto wil bekijken en op die foto drukt, wordt er een animatie getoond die begint bij het punt waarop de gebruiker de foto aanraakt. Wanneer je een object sleept, wordt ook door de animatie duidelijk waar het punt van aanraken is. Dit laat de gebruiker zien dat de actie op het scherm uitgaat van de actie die de gebruiker onderneemt.
8. Animaties staat niet op zichzelf
Animaties zijn om verschillende redenen belangrijk in een app. Ten eerste zorgt het er voor dat gebruikers een applicatie niet als statisch zien, maar als een organisch geheel. Ten tweede kunnen animaties een belangrijke rol spelen om een applicatie door te hebben. Tijdens de Google I/O -designpresentatie van de Google-designers werd daarvan een mooi voorbeeld gegeven. Bij het laten zien van de afspeelknoppen en voortgangsbalk in een muziek-applicatie, werd een kleine, korte animatie getoond met de 'slider' in de voortgangsbalk, deze bewoog licht. Daardoor is voor de gebruiker onmiddellijk duidelijk dat er beweging in deze balk zit en dat deze balk door de gebruiker gemanipuleerd kan worden.
Voor de gebruiker is het belangrijk dat animaties niet op zichzelf staan evenals dat schermen niet op zichzelf staan. Neem een foto-applicatie. Wanneer je een op een foto in een galerij drukt, wil je niet dat de foto zomaar ineens verschijnt. Dit kan, in ieder geval een fractie van een seconde, verwarrend zijn voor een gebruiker. Wat bij Material de bedoeling is, is dat de foto in het galerijscherm vergroot wordt totdat deze het volledige scherm in beslag neemt.
Door de overgang tussen schermen te animeren en verschillende interface-elementen van het eerste scherm terug te laten komen op het tweede scherm, is direct de relatie tussen verschillende schermen duidelijk. Volgens de Google-designers is het niet de bedoeling dat je de gebruiker teleporteert naar een nieuw scherm, zou net zo verwarrend zijn als teleporteren 'in het echt'. Daarnaast moeten animaties ook vloeiend zijn, moeten ze niet abrupt stoppen of starten, omdat dit storend is voor de gebruiker.
9. Beweging biedt betekenis
Apps moeten alleen beweging en animaties laten zien wanneer dit een doel heeft, wanneer de animatie betekenis geeft aan elementen. Denk maar aan het voorbeeld van de muziek-app waar we het net over hadden: doordat de 'schuif' op de voortgangsbalk beweegt, weten gebruikers wat ze met deze balk kunnen doen.
Bewegingen moeten verder subtiel zijn. Animaties moeten wel duidelijk zijn, maar moeten subtiel blijven en niet de volledige aandacht van de gebruiker trekken. De animaties zijn bedoeld om het gebruik intuïtiever te maken, niet om de gebruiker af te leiden. Wanneer een gebruiker op een checkbox drukt, een vinkje zet dus, zie je een inktvlek-animatie, waarna het vinkje verschijnt. Deze subtiele animatie geeft de gebruiker genoeg feedback om hem een voldaan gevoel te geven.
Overgangen tussen verschillende schermen worden geanimeerd, maar niet om er een mooi visueel spektakel van te maken. Nee, dat is een mooie bijkomstigheid. Die animatie moet duidelijk maken wat de relaties tussen de verschillende schermen zijn.
Ook voor het web
Het nieuwe design voor Android wordt niet alleen gebruikt voor Android, maar ook voor het web. Google lanceerde vorig jaar een nieuwe webtoolkit genaamd Polymer. Eén van de voornaamste functies van Polymer is het toevoegen van elementen aan html. Html is de taal waarin websites worden geschreven en elementen zijn onderdelen van een website, zoals paragrafen tekst of afbeeldingen. Doordat het bij Polymer mogelijk is om hier zelf elementen aan toe te voegen, kunnen complexe zaken worden weggestopt achter een simpele naam, zoals een kaartenlay-out die we kennen van Google Now: deze kan gewoon achter één element 'card' gestopt worden.
Google maakt het material design direct beschikbaar in Polymer. De design-elementen die we gezien hebben van het Material-thema voor Android zijn ook allemaal beschikbaar als Polymer-elementen. Daarnaast is het ook eenvoudig voor webontwikkelaars om Google-diensten te integreren in websites. Het toevoegen van een kaart van de omgeving kan als door alleen het element <google-maps></google-maps> te gebruiken in de code van een website.
Meer informatie over Polymer vind je op de officiële website van het project. Alle beschikbare Material-elementen vind je op de demopagina hier. Die demopagina is ook erg interessant om je een gevoel te geven van hoe het Material-thema daadwerkelijk 'aanvoelt'.
Meer over het design
Wil je meer lezen over het design van Android L en over Google's nieuwe interfacerichtlijnen in het algemeen? Dan kun je terecht op de nieuwe Google Design-pagina.
De video hieronder is de opname van de design-sessie die Google op 25 juni gaf tijdens Google I/O. Deze sessie verduidelijkt alle negen belangrijke punten die we in dit artikel besproken hebben.
Beschikbaarheid
Er komt een beperkte preview-release van Android L beschikbaar vanaf 26 juni. Deze versie is alleen beschikbaar voor de Nexus 5 en Nexus 7 (2013). In de herfst zal Android L officieel uitkomen en zal dan op korte termijn uitkomen voor verschillende Androidtoestellen.
