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-io-

app.html

● http://venturebeat.com/2014/06/27/top-designers-react-to-googles-new-material-design-

language/

● 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.