Deurmatten ontwerpen voor applicaties. Een oud IA-patroon herleeft.

Intuïtief door content navigeren is context -en apparaat gevoelig. Moderne applicaties zijn vaak vertalingen van bestaande websites. Het vergt een interactie ontwerper een hoop overtuigingskracht om de opdrachtgever in te laten zien dat een 1-op-1 vertaling van de website wellicht niet de way-to-go is. Maar wat is dat wel de juiste weg te bewandelen?

In dit artikel verken ik een  IA patroon, die tegenwoordig weer effectief kan worden ingezet op devices zoals televisies, mobiele telefoons en tablets.

Het deurmat navigatie patroon (doormat navigation pattern) kan helpen bij het opzetten van een applicatie voor verschillende devices. Het is een patroon dat je steeds vaker terugziet tegenwoordig, vooral bij devices met weinig screen real estate.

De Doormat Interaction Design Pattern

Het is 10 jaar geleden. Je surft naar een willekeurig website. Et voila. Enter.html. Daar is de enter pagina. De enter pagina is een pagina die ons toendertijd de keuze bood om verschillende secties van de website te bezoeken. Of het nou ging om directories als Yahoo.com, winkels als Amazon.com, of portals als Ilse.nl. De deurmat was in.

Wat is de deurmat? De deurmat is een patroon waarbij de gebruiker een voorgedefinieerde lijst van mogelijkheden waartussen hij kan kiezen krijgt voorgeschoteld. De mogelijkheden zijn vaak de verschillende hoeken van een website.

TNT.com. Taal -en land specifieke websites hebben vaak nog een enter pagina

Het internet werd al gauw sneller en gebruikers werden geacht sneller voor hem relevante informatie te zien. Het is om die reden dat de deurmat na een aantal jaar vervangen werd door dynamische content. Content die nieuw is, uiterst relevant of simpelweg visueel aantrekkelijker kreeg de voorkeur boven een deurmat met mogelijkheden. En terecht. De deurmat kost een hoop schermruimte en werd eigenlijk overbodig.

De beperkingen van moderne apparaten

Mobiele apparaten hebben beperkingen. Een van de grootste beperkingen van het mobiele apparaat is – natuurlijk – de beperkte ruimte van het scherm dat kan worden gebruikt: de screen real estate.  De ontwerper moet de beschikbare ruimte slim en efficiënt gebruiken om de gebruiker te voorzien van de beste ervaring. Dat is de uitdaging.

Een ander apparaat, de televisie, heeft andere potenties en grenzen. Voor de televisie is een van de grootste uitdagingen voor de ontwerper om rekening te houden met navigeren via de afstandsbediening. De afstandsbediening heeft vaak maar zes intuïtieve knoppen: vier pijltjes toetsen en een enter key. Daarnaast zijn er een hoop cijfers. Hierdoor moet de ontwerper goed nadenken over de positie van objecten naar elkaar op het scherm. Door de afstand van een kijker met het televisiescherm, moeten letters groter worden weergegeven. Hierdoor is de effectieve screen real estate alsnog vergelijkbaar als die van een mobiele telefoon.

De traditionele website heeft deze outline:

• Een menu bovenin of aan de linkerkant
• Preview (eerste regels tekst) van dynamische content
• Call(s) to action(s)
• Advertentieruimte

Zoals gezegd, er ontstaat een probleem met de schermruimte wanneer de bovenstaande informatie vertaald moet worden naar – bijvoorbeeld – een mobiel apparaat. We moeten beslissen welke items überhaupt conceptueel nog relevant zijn, en waar elementen vervolgens een plaats moeten krijgen. Dit leidt tot moeilijke beslissingen, zoals het verbergen van informatie in een slider, of het toevoegen van ‘more’ buttons in menubars.

In plaats van het 1-op-1 vertalen, is het wellicht een goed idee om te denken aan het deurmat patroon. Door van de eerste pagina een groot menu te maken – ja, ik weet het, het is een enge keuze – kunnen we ieder menu item zoveel gewicht geven als nodig. En. Het neigt er minder snel naar een chaotische rommel te worden.

Facebook laat iconen zien voor verschillende secties binnen de app

Spellen op devices maken van gebruik van The Doormat Method

Apple TV – voor TV – schotelt de gebruiker een voorgedefinieerde lijst voor

Dynamische deurmatten

Een van de nadelen van de doormat pattern is dat het statisch voelt en dat de gebruiker verveeld kan worden door hetzelfde scherm over-and-over again. En bovendien, de applicatie wil wellicht belangrijke informatie communiceren op relevante  momenten. Het is een goed idee om de deurmat in sommige gevallen dynamisch te maken. Een paar voorbeelden:

• Laat het laatste stukje content per menuonderdeel zien.
• Laat een indicator zien wanneer er nieuwe stukjes content binnen de sectie zijn
• Laat iconen of thumbnails zien van stukjes dynamische content binnen de sectie, om het geheel visueel aantrekkelijker te maken
• Reserveer een streep onder de deurmat voor informatie die vanuit de zender gepushed dient te worden

De deurmat inzetten

Mijn ervaring leert dat het niet simpel is om een opdrachtgever te overtuigen van de kracht van het tonen van een volledig menu. Het lijkt ook wel tegenstrijdig om in het dynamische tijdperk waarin we leven, de gebruiker opeens te voorzien van lange en – tot op zekere hoogte vaak – statische informatie. Niets is minder waar. Nieuwe apparaten hebben nieuwe beperkingen en vergen nieuwe oplossingen. En soms dus oude.