Samsung Galaxy S25: Nu met Galaxy Tab S6 Lite!

Eindelijk standaardicoon voor uitschuifmenu op Android

Sander Tuit
Sander Tuit
11 mei 2013, 14:00
5 min leestijd
Eindelijk standaardicoon voor uitschuifmenu op Android

Lees verder na de advertentie.

Omhoog of terug?

Androidtoestellen hebben áltijd een terugknop. Met deze fysieke of virtuele knop, kunnen gebruikers terugkeren naar het vorige scherm. Een terugknop in de menubalk van een applicatie is dan ook absoluut niet nodig. In de meeste gevallen wordt zo’n terugknop alleen gebruikt in applicaties die een iPhone-achtig design hebben. Vorig jaar introduceerde Google een nieuwe knop, die wel heel veel weg had van een terugknop.

Deze knop heet de ‘up button’ of omhoogknop. Het verschil tussen de omhoogknop en de terugknop is subtiel en in sommige gevallen is er helemaal geen verschil. Ik zal een voorbeeld geven van een situatie waar er wel degelijk verschil is. Op de meeste Androidtoestellen kun je tegenwoordig een screenshot nemen. Wanneer deze genomen is, krijg je een notificatie in de notificatiebalk en een druk op deze notificatie opent de screenshot in de fotogalerij. Zou je nu op de terugknop drukken, dan sluit de galerij af. Wanneer je op de omhoogknop drukt, ga je naar het hoofdscherm van de galerij. Oftewel: de terugknop brengt je op de vorige ‘pagina’ en de omhoogknop brengt je één stap omhoog in de applicatie.

Uitschuifmenu’s

Een vrij recente trend is de toevoeging van uitschuifmenu’s aan Androidapplicaties. Deze menu’s bevinden zich over het algemeen aan de linkerkant van de applicatie en bevatten een groot gedeelte van de navigatie van een applicatie. De ontwerprichtlijnen voor Android bevatten geen verwijzingen naar dit zijmenu, tot Google+ een dergelijk menu kreeg. Hoe werd de navigatie dan voor de introductie van deze zijmenu’s gedaan? Er waren twee alternatieven, waarvan één nog steeds aangeraden wordt. De eerste is het zogenaamde dashboard-patroon, waarbij je een startpagina in een applicatie hebt, waar een aantal grote knoppen in beeld te zien zijn. Een voorbeeld van zo’n dashboard zie je in de screenshot van een oudere versie van Twitter hieronder.

Het dashboard-patroon werd door Google officieel aangeraden, maar Google heeft nooit een standaardoplossing geleverd die het eenvoudig maakte een dashboard-lay-out te gebruiken. Het alternatief voor het dashboard, is een dropdown-menu, een spinner genaamd.  Eén van de applicaties die hier gebruik van maakt, is Google Maps.

Er waren al verschillende Androidapplicaties met een zijmenu, toen de Google+-applicatie na een grote update ineens gebruik maakte van deze vorm van navigatie. Ik was op dat moment wat verbaasd: Google noemde het zijnavigatiemenu nergens in zijn ontwerprichtlijnen en het gebrek aan een officiële oplossing van Google zelf, zorgde weer voor wildgroei van verschillende oplossingen voor een zijmenu. Op dat moment heb ik meteen navraag gedaan bij één van de Androidontwikkelaars en mijn vraag was of dit nu een aangeraden navigatiemethode was en dat we een dashboard links moesten laten liggen. Zijn antwoord was dat het dashboard-patroon ontraden werd en dat de voorkeur gaat naar snellere navigatie, oftewel navigatie waar je niet eerst voor terug hoeft naar het beginscherm van een app.

Omhoog of zijmenu?

Een uitschuifmenu klinkt dus als een mooie oplossing: een snelle manier om te navigeren binnen een applicatie. De vraag is dan: hoe geef je nu aan dat er zich een navigatiemenu aan de zijkant bevindt? Het menu is immers standaard verborgen. De oplossing die door veel ontwikkelaars gebruikt wordt, is dat het zijmenu wordt aangeduid met het omhoog-knop-icoontje. Wanneer je bij het beginscherm van de applicatie bent, dan wordt het zijmenu geopend door een druk op de omhoog-knop. Het idee daarachter is dat je eigenlijk nog een stap verder ‘omhoog’ in de applicatie gaat wanneer je op deze knop drukt op het beginscherm. Voor de gebruiker is het echter verwarrend: het onderscheid tussen omhoog en terug was vaak al niet duidelijk en als er nu ook nog eens een menu aan deze knop hangt, wordt het helemaal verwarrend. Vaak wordt het menu bij het de eerste keer opstarten van de app standaard geopend, of wordt er een korte introductie weergegeven, bijvoorbeeld bij de NU.nl-applicatie zoals je hieronder kunt zien. Bij een standaardoplossing zou dit eigenlijk niet nodig moeten zijn. Eindelijk is er dan een oplossing die van Google zelf komt. De hoofddesigner van Android, Matias Duarte, heeft samen met een team letterlijk maanden gewerkt aan een standaardoplossing. Deze oplossing is nu te vinden in Google Earth en Google Shopper (dat niet verkrijgbaar is in Nederland). Wanneer er een menu beschikbaar is, wordt er linksbovenin, naast het applicatie-icoontje, een drietal horizontale strepen onder elkaar weergegeven. Wanneer je op deze strepen drukt, schuiven de strepen in en schuift het uitschuifmenu uit. Een nieuwe druk op de knop zorgt er voor dat het icoontje weer uitschuift en het menu inschuift. Op deze manier moet het voor de gebruiker duidelijk worden dat er zich een menu bevindt. Dit menu is ook tevoorschijn te halen door vanaf de linkerrand van het scherm naar rechts te slepen. Het knopje doet denken aan het knopje voor het zogenaamde overflowmenu van Android 3.0, het knopje dat wordt weergeven als de actiebalk bovenaan een app vol zit. Later werd dit knopje vervangen door een icoontje met drie verticaal geplaatste puntjes.

Google I/O en andere Androidapps

Het is goed om te zien dat Google eindelijk een standaardoplossing heeft om uitschuifmenu’s aan te geven. Het lijkt misschien een detail, maar het is erg belangrijk om gebruikers te laten weten wat ze kunnen verwachten en een oplossing die door Google- en niet-Google-apps gebruikt kan worden, is een belangrijke stap voorwaarts. Volgens Google-ontwikkelaar Dan Morill zal tijdens Google I/O volgende week veel meer verteld worden over deze nieuwe knop. Mogelijk wordt deze knop opgenomen in de support package, een pakket dat gebruikt kan worden door ontwikkelaars om functies van nieuwere Androidversies ook in oudere Androidversies te gebruiken. Of ook het uitschuifmenu zelf opgenomen zal worden in Android en in de support package is nog even afwachten. Hoe dan ook zullen Google-applicaties op Android voorzien worden van deze nieuwe aanduiding voor uitschuifmenu’s. Volgens Google-ontwikkelaars zal dit gebeuren als er een nieuwe release van deze applicaties komt. Meer informatie zal volgende week worden verteld in de sessie “Android Design for UI Developers’ tijdens Google I/O. Via: +Dan Morill

Op de hoogte blijven?

Volg Androidworld nu ook op WhatsApp

Download de nieuwe Androidworld-app!

Reacties

10

Inloggen of registreren
om een reactie achter te laten

13 mei 2013, 2:55

Nog een voorbeeld van wat Apple fout doet, of naar mijn mening niet handig doet:
Als ik een iPhone in mijn handen heb en op zoek ben naar een bepaalde app en de eigenaar heeft alle apps netjes gearchiveerd in mapjes maar je niet meer weet in welk mapje de app ookalweer zat moet je alle mapjes door om de app te vinden, bij een Android telefoon is het makkelijk je klikt op de knop naar ‘alle applicaties’ en zoekt het vervolgens simpel snel en makkelijk in de lijst met alle apps in alfabetische volgorde.

Snel je GPS, Wifi, Bluetooth, schermrotatie etc aan of uit zetten, wij slepen in Android de balk op elk gewenst moment (of er een app open staat of niet) naar beneden en tikt op het symbool, bij IOS moet je de instellingen openen (die ook ergens in de app lijst of in een map staat op een van de hoofdschermen) en vervolgens moet je wat je wilt doen nog eens aanklikken, heel omslachtig.

Maar 1 ding is me nog niet helemaal duidelijk bij Android, ik begreep dat het de bedoeling is dat de fysieke menuknop van de Android toestellen zou gaan verdwijnen, zou dit nieuwe ‘streepjes menu’ dan alle functies van de fysieke menu knop van het toestel over moeten nemen? (nu heb je vaak nog dat de fysieke en virtuele knop, beide zorgen dat je een ander menu te zien krijgt…..)

12 mei 2013, 2:59

Dit is letterlijk de oplossing die BB gebruikt in hun meest recente UI. De BB UI is een samenraapsel van Windows, iOS en Android design patterns en skin en vrij onoverzichtelijk en warrig. Echter over de toevoeging van dit element was ik direct erg enthousiast. Past goed binnen Android, kan er wel aan wennen.

11 mei 2013, 19:20

Leuk Artikel! Grappige is dat de app FOTMOB ook al een soort gelijke Lay-Out heeft met 3 streepjes én een driehoekig streepje! Niet dat de streepjes wijzigen oid maar viel me direct op 🙂 Verder interessant!

Zie Screenshot:
http://img839.imageshack.us/img839/7454/screenshot2013051116102.png

11 mei 2013, 18:47

Ik vind het een mooie bruikbare toevoeging! Dan moet hij wel in de support package komen inderdaad. Het enige jammere vind ik dat je nu dus niet de “up-button” en deze knop beide in 1 app kan gebruiken.

11 mei 2013, 18:42

Ik moet zeggen dat ik zelf meer de jQueryMobile (http://view.jquerymobile.com/1.3.1/demos/widgets/accordions/) even op klein scherm bekijken zie zitten. Echter dat in combinatie met een back elementje. Als je dieper in een app zit.. bijvoorbeeld in Nu.nl in het artikel is back ook echt back. Op Home (verschillende niveaus van Home) zou je met de 3 streepjes boven elkaar het menu moeten krijgen. Ik vind een menu element wat buiten het scherm ligt niet zo lekker maar misschien dat het gaat wennen. Ik ben zeker benieuwd naar de verdere nieuwe apps van Google bijvoorbeeld +

11 mei 2013, 17:47

Dit is typisch iets wat Apple wel in één keer goed zou hebben gedaan.

11 mei 2013, 17:31

Uhhhhmmmm

11 mei 2013, 17:00

ehum cool.

11 mei 2013, 16:36

oke….

11 mei 2013, 16:34

Leuk artikel.