Material Design

Door Jeroen Berkvens

Contents
Hypothese.................................................................................................................................. 2
Deelvragen ................................................................................................................................ 2
Doelstelling ................................................................................................................................ 2
Afbakening ................................................................................................................................. 2
Methodieken .............................................................................................................................. 2
Wat zijn de voordelen van Material Design? .............................................................................. 2
Welke functies / knoppen zijn belangrijk? ................................................................................... 3
Wat is de beste grootte / locatie (voor knoppen, plaatjes, labels, etc.)? ..................................... 3
Welke feedback krijgt de gebruiker? .......................................................................................... 3
Wat is de learnability curve ........................................................................................................ 3
Voor gebruikers: ..................................................................................................................... 3
Voor developers: .................................................................................................................... 4
Conclusie ................................................................................................................................... 4
Aanbevelingen ........................................................................................................................... 4
Aanvullende Informatie .............................................................................................................. 5
Componenten en Layout ........................................................................................................ 5
Status Bar ........................................................................................................................... 5
Action Bar ........................................................................................................................... 5
Hamburger Button............................................................................................................... 5
Floating Action Button ......................................................................................................... 5
Raised Button ..................................................................................................................... 5
Flat Button .......................................................................................................................... 5
Elevation vs translationZ ..................................................................................................... 6
Types of Activities and Fragments and their Layout................................................................ 6
Main Activity........................................................................................................................ 6
Navigation Drawer .............................................................................................................. 6
Sub Activity ......................................................................................................................... 6
Overview ................................................................................................................................ 7
Bronnen: .................................................................................................................................... 8
Appendix .................................................................................................................................... 8
Reflectie ....................................................................................................................................10

Hypothese
Verwacht is dat Material design The New Big Thing zal worden, dit omdat het een heel strakke
en moderne look en use-flow heeft.

Deelvragen

Wat zijn de voordelen van Material Design?

Welke functies / knoppen zijn belangrijk?
Wat is de beste grootte / locatie (voor knoppen, plaatjes, labels, etc.)?
Welke feedback krijgt de gebruiker?
Wat is de learnability curve?

Doelstelling
Het is ons doel om een onderzoek te doen naar de voor en nadelen van het gebruik van
Material Design. We willen aan het eind van ons onderzoek een goede indruk kunnen geven
van hoe Material Design werkt en hoe je (zowel gebruiker als developer) er mee kan werken.

Afbakening
Dit onderzoek zal gedaan worden naar de huidige status van het Material Design gericht op
Android, specifieker: Android devices die het volledige ondersteuning en integratie hebben met
Material Design API 21. Verder zal het onderzoek zeer beknopt de breedte van het Material
Design aanstippen, maar hier niet verder op ingaan.

Methodieken
Het onderzoek zal voornamelijk bestaan uit een praktijk onderzoek waarin onder andere een
test app geschreven zal worden voor API 21, er zal onderzocht worden hoe de ervaring is voor
de gebruiker, en hoe gemakkelijk het geimplementeerd kan worden (dit heeft niet alleen
betrekking tot de daadwerkelijke implementatie, maar ook over de beschikbaarheid van
benodigde informatie).

Wat zijn de voordelen van Material Design?

Material design heeft een strak design dat veel uniformiteit kan geven aan een applicatie en een
duidelijke use-flow heeft waardoor gebruikers in verschillende applicaties snel dingen kunnen
vinden.
Een goed voorbeeld daarvan is de Navigation Drawer dit is een menu aan de linkerzijde van
het scherm dat ofwel via de Hamburger Button te openen is ofwel door te binnen te swipen
van de linker rand van het scherm. De Navigation Drawer heeft als functie om te kunnen
switchen tussen de verschillende Main Activities, vaak kan je in dit Fragment zien als welke
gebruiker je bent ingelogd, en het geeft vaak ook navigatie naar een aantal settings-related
Activities of Fragments.
Het geeft ook een heel duidelijk beeld over waar de componenten ten opzichte van elkaar
staan. Hierdoor is het zeer prettig te gebruiken en kan je natuurlijk door de verschillende
activities navigeren. Goede voorbeelden hiervan zijn de Floating Action Button en Cards.

Welke functies / knoppen zijn belangrijk?

Een van de belangrijkste functies is dat met het material design is het parallaxing waarmee de
diepte van de onderdelen ingesteld kan worden.
Verder is de nieuwe manier van buttons plaatsen belangrijk, zo kan je nu een belangrijke en
veelgebruikte button als Floating Action Button over alle andere componenten plaatsen zodat
je daar gemakkelijker gebruik van kan maken.
En de meest bekende button van het material design is de nieuwe Hamburger Button
(specifieker de animaties daarvan) die kan veranderen in een pijl gebruikt om de Navigation
Drawer te openen en aan te geven of je je in een Main of een Sub Activity zit.

Wat is de beste grootte / locatie (voor knoppen, plaatjes,

labels, etc.)?
De grootte en locatie is natuurlijk in elke situatie anders, maar google heeft een zeer uitgebreide
site die een goede uitleg geeft over hoe je material design moet implementeren. Als een van de
belangrijkste dingen wordt er gesteld dat niks direct tegen de randen moet komen (Action Bar
uitgezonderd (duh)), en dat de Navigation Drawer over de volledige hoogte van het scherm
over alle componenten in de applicatie (ook al implementeerd Google dit in hun eigen
applicaties niet constant en lijkt het er op dat ze er nog niet over uit zijn hoe ze dit uiteindelijk
willen oplossen) en onder de Status Bar moet komen.
Zie http://www.google.com/design/spec/layout/principles.html.

Welke feedback krijgt de gebruiker?

Bijna alle knoppen en functies in Material Design geven zeer duidelijke feedback, meestal met
een animatie die de onclick weergeeft. Indien goed geimplementeerd kan de gebruiker er van
uit gaan dat alles wat geanimeerde feedback geeft een functie heeft, en alles wat dat niet doet
dus ook geen functie heeft. Natuurlijk is dit makkelijker gezegd dan gedaan, en als je naar de
Flat Button kijkt zie je meteen dat er snel problemen kunnen optreden bij de implementatie
hervan. De Flat Button geeft namelijk zelf geen enkele feedback, en moet dus ook door middel
van een animatie van de rest van de applicatie de feedback geven. Een voorbeeld hiervan is
een dialog met een waarschuwing die gesloten kan worden door een Flat Button geeft als
feedback dat als je op de Flat Button klikt de dialog sluit.

Wat is de learnability curve

Voor gebruikers:
Omdat het Material Design een vaste use-flow heeft is het heel gemakkelijk voor gebruikers om
te vinden waar ze naar zoeken, maar omdat Android geen vereiste steld aan het design van de
applicaties kunnen developers hun eigen draai geven aan hoe zij vinden dat het er uit hoort te
zien. Iets wat op zich goed is, maar wat er voor kan zorgen dat gebruikers dingen niet kunnen
vinden.

Voor developers:
Voor de developers is er momenteel nog een slechte learnability curve. Dit omdat het Material
Design gebruik maakt van nieuwe componenten die oudere componenten vervangen die
standaard in android zitten. Dit houdt in dat als je material design wilt implementeren je
momenteel heel veel standaard componenten disabled moeten worden en moet vervangen met
de nieuwe material design componenten (die overigens niet in de GUI gevonden kunnen
worden en dus volledig gecode moeten worden).
Ook is het Material Design bedoeld voor API 21 maar omdat momenteel (volgens google)
0.0% (dus minder dan 1) van de Android Apparaten API 21 ondersteunen is er vooral heel
veel informatie te vinden over hoe je Material Design op andere versies van Android werkend
kan krijgen waardoor het heel lastig is om te vinden hoe je het op de goede manier (voor API
21) moet doen.

Conclusie
Material Design is een goede vooruitgang in het design van Android, het geeft een heel uniform
uiterlijk aan je apps, en is nog steeds goed aan te passen naar een huisstijl of dergelijke. Omdat
Material Design ook een van te voren gedefinieerde use-flow heeft is het voor gebruikers
gemakkelijk om te vinden waar ze naar zoeken.
Echter is het nog verren van af. Officiele Google applicaties (die een goed voorbeeld zouden
moeten geven over het nieuwe Material Design) hebben verschillende implementaties van hoe
het er uit zou moeten zien, er zijn nieuwe design features die je als je alles op de goede manier
implementeerd niet / nauwelijks kan zien, en ondanks het feit dat het Material Design verder
gaat dan alleen android maar ook bedoeld is als design voor websites en applicaties wordt daar
nagenoeg geen aandacht aan besteed (en ook hier voor geld dat als het gebruikt wordt de
richtlijnen ook veel genegeerd worden).
Al met al heeft het veel potentieel maar het is gewoon niet af.

Aanbevelingen
Voor gebruikers zou ik zeker aanraden om apps te gebruiken met Material Design (maar over
het algemeen hebben gebruikers niet echt keuze in wat voor design de applicatie heeft die ze
gebruiken). En voor developers zou ik daarom ook zeker aanraden om zo snel mogelijk Material
Design te implementeren in Android applicaties. Natuurlijk zit er meer aan Material Desing dan
de Android apps, maar eerlijk gezecht ben ik niet onder de indruk van de implementatie die ik
tot nu toe gezien heb in onder andere websites. De Chrome apps daar integen profiteren zeer
zeker van het Material Design en het geeft ze een gebruiksvriendelijkere en professionelere
interface (meden omdat het dan niet lijkt alsof je een website in een apart window geopend
hebt).

Aanvullende Informatie
Componenten en Layout
Status Bar
The bar on the top of your screen, this bar is always visible and is not part of the application,
though in your application you can (and in Material Design should) set the color for this bar).
With this bar you can also drag down the notifications.

Action Bar
Also known as the ToolBox (the component used for the Action Bar).
This is the bar on the top of the application possibly containing things like
Application Title
Application Icon
Hamburger Button
3 dot settings drawer
Sometimes it can display icons for frequently used actions in the 3 dot settings
drawer (this removes the action from this drawer).

Hamburger Button
The Hamburger Button is used to visualize the Navigation Drawer. The icon can also display
extra information about where you are in the application. For example, if you are in a sub activity
(or in the Navigation Drawer) the Hamburger Button will display a Back Arrow.

Floating Action Button

The Floating Action Button is a button of which there is only one in a Main Activity, and none in
Sub Activities. This button is mostly used for creating a new item (new email, new calendar
event, etc) but can also be used for a different function, as long as it is by far the most important
function in the application. This button can be positioned on multiple places but is most used in
the bottom right corner overlaying everything.

Raised Button
The raised Button is the button as everyone remembers it, it is only not the default button. You
can have multiple of these buttons in one Activity or Fragment, but limit them as much as
possible.

Flat Button
This is the default button, this is the button that you should always try to use, even though it is
the most difficult to position (because you need to make it clear by positioning only that it is in
fact a button).

Elevation vs translationZ
The difference between Elevation and translationZ is very simple, the Elevation is how high the
component is, and with translationZ you can raise or lower that component. So the actual height
(or depth, depending on your view) is Elevation + translationZ. As shown in Figure //TODO the
Elevation of the object is 2dp, and its being raised 6dp (translationZ) so the actual height is 8dp.

Figure //TODO

Types of Activities and Fragments and their Layout

Main Activity
A Main Activity (A not The) is an activity at the root of the application. If you use the back
arrow (one of the three buttons in Android 5.0) in this activity you will close the app.
When using a Navigation Drawer, you have multiple Main Activities.

Navigation Drawer
The Navigation Drawer is a fragment that can be used to manage navigation through the Main
Activities. The Navigation Drawer also displays a Back Arrow instead of the Hamburger Button
(though this is not visible due to the Navigation Drawer being on top of it).
Visualized this Fragment is the only thing to the left of a Main Activity.

Sub Activity
A Sub Activity is an activity from which you can use the back arrow to go back to the main
activity. Visualized is this activity right of a Main Activity or right of another Sub Activity.
From here you can still draw the Navigation Drawer by swiping in from the left edge, but the
Hamburger Button is now a back arrow that navigates back to the Activity or Fragment left of it.

Overview

Bronnen:

Prototype
http://www.google.com/design
Google IO
https://www.google.com/events/io/io14videos
https://www.youtube.com/watch?v=isYZXwaP3Q4
https://www.youtube.com/watch?v=dZqzz5lZFvo
https://www.youtube.com/watch?v=lSH9aKXjgt8
https://www.youtube.com/watch?v=ctzWKRlTYHQ
https://www.youtube.com/watch?v=ZlY714W4uww
https://www.youtube.com/watch?v=FBD0VlcVS1E
http://stackoverflow.com/
https://developer.android.com/*
http://android-developers.blogspot.nl/2014/08/material-design-in-2014-google-ioapp.html
http://venturebeat.com/2014/06/27/top-designers-react-to-googles-new-material-designlanguage/
http://gizmodo.com/what-material-design-means-for-the-future-of-android-1595976211
http://www.underconsideration.com/brandnew/archives/new_design_language_for_andr
oid_chrome_os_and_more_by_google.php#.VLvisxzN_Qo

Appendix

Hamburger Button
API 21
Ook bekend als:
Android 5.0.1
Android L
Android Lollipop
Momenteel is de Nexus 6 de enige telefoon die native API 21 draait (daarmee dus ook
<0.0% van de Android telefoons). Maar er zijn andere telefoons die een update hebben
gekregen naar API 21 (o.a. Nexus 5) (maar ook hiermee nog <0.0%)
Main Activity
Fragment
Activity
Floating Action Button

Cards
Cards zijn losse fragments waarin meestal text wordt gezet vaak met een plaatje erbij.

Flat Button

Reflectie
Dit onderzoek wordt gedaan vanuit het vak SMON, met als achterliggende gedachte dat je wat
je leerd in dit onderzoek kan toepassen in de proftaak. Helaas is dit niet echt goet te doen
aangezien je pas aan het eind van je onderzoek een goed beeld hebt bij hoe je dat had kunnen
implementeren in de proftaak.
Op de zelfde manier gold het voor voorgaande periode met Experience Design (een vak waar
niemand echt interesse in heeft omdat ze nog niet eens snappen hoe de basis van Android
werkt). Daarom denk ik dat het deze twee vakken goed omgedraaid kunnen worden, dat je dus
je onderzoek doet samen met de basis van het android programmeren, en dat je als je al wat
verder bent het kan gaan hebben over Experience Design en het maken van de app.
Wel denk ik dat ook in de huidige opstelling het vak zeker toegevoegde waarde kan hebben,
maar dan vooral voor degene die ook echt interesse hebben om zelf onderzoek te doen.
Ik vind het ook een fijne dat je zelf kan kiezen waar je onderzoek naar gaat doen omdat dat er
voor zorgt dat je ook echt gemotiveerd bent.