De magische infinite button: creëer oneindige mobile usability

Stel dat er een button op je smartphone zit, die altijd binnen handbereik is, altijd waar je hem nodig hebt, nooit in de weg zit en alleen aanwezig op het moment dat jij hem nodig hebt. Stel dat de meeste mensen met een nieuwe generatie smartphone dagelijks gebruik maken van deze knop, zonder het te beseffen. Zou dat niet zonde zijn? Een revolutie op mobile graphical user interface gebied die tot nu toe roemloos is gebleven, tijd om hier verandering in te brengen.

Visual angle matters

Smartphones hebben, door het feit dat ze kleiner zijn dan de gemiddelde computermonitor, minder ruimte om informatie weer te geven. Anders gezegd, smartphones hebben te kampen met minder screen real estate dan een computerscherm. In eerste instantie zou je misschien verwachten dat een smartphone die qua schermoppervlak 50% kleiner is dan een computerscherm, ook 50% minder informatie kan laten zien. Dit is echter niet het geval, omdat hier twee belangrijke factoren een rol spelen.

Kijkafstand: visual angle matters

De eerste factor is de kijkafstand. Een televisie die dichterbij staat komt groter op je netvlies terecht dan dezelfde televisie die verder weg staat. De absolute grootte van de televisie is hier dus niet de bepalende factor. De visuele hoek, uitgedrukt in graden (°), bepaalt hoe groot een voorwerp op je netvlies terecht komt, zie de afbeelding hieronder.

Stel dat je smartphone qua schermoppervlak 30 keer kleiner is dan je computermonitor. Stel verder dat je monitor op 70 centimeter afstand staat en dat de gemiddelde afstand tot je smartphone ongeveer 30 centimeter is. Dit betekent dat, wanneer rekening gehouden wordt met de kijkafstand, je smartphone slechts 15 keer kleiner is dan je monitor. Het bekende adagium “size matters” zou in dit geval wellicht beter veranderd kunnen worden naar “visual angle matters”.

Weergave van content

De tweede bepalende factor is hoe content op beide schermen weergegeven wordt. Je smartphone is weliswaar een stuk kleiner dan je computerbeeldscherm, maar je houdt hem ook dichter bij je ogen, waardoor bijvoorbeeld de lettergrootte kleiner kan zijn. Stel dat een comfortabel lettertype op je computermonitor ongeveer 2mm hoog is en dat een comfortabel lettertype op je smartphone 1mm hoog is. In het huidige voorbeeld betekent dit dat er slechts 8,5 keer minder letters op het scherm van je smartphone passen dan op je computermonitor, een heel verschil ten opzichte van het eerder berekende verschil in schermoppervlak.

Het gevolg van dit verschil in grootte en de hiermee gepaard gaande vermindering van screen real estate is dat usabilityrichtlijnen voor mobiele applicaties rigoreus anders dienen te zijn dan voor reguliere applicaties.

Fitt’s Law

Rekening houden met een kleiner schermoppervlak betekent helaas niet dat content, zoals weergegeven op computerschermen, zomaar kleiner gemaakt kan worden. Tekst op de meeste websites zou te klein worden om op een smartphone te lezen en knoppen zouden te klein worden om comfortabel te bedienen. Optimale interactie met content op smartphones is daarom pas mogelijk wanneer aan enkele randvoorwaarden voldaan wordt.

Deze randvoorwaarden worden met name bepaald door fysieke eigenschappen van de gebruiker. Zo moeten bedieningselementen groot genoeg zijn om comfortabel met duim of vinger gebruikt te kunnen worden en tekst moet groot genoeg zijn om leesbaar te blijven. Een ander punt, met betrekking tot ergonomie en human movement, is voor het eerst beschreven door Paul Fitts in 1954:

De tijd die nodig is om zo snel mogelijk van punt A naar punt B te bewegen wordt bepaald door zowel de afstand tussen beide punten als de grootte van punt B.

Hoe kleiner punt B is, hoe lastiger het is om hier accuraat op te landen. Dit betekent dat de snelheid, waarmee je bedieningselementen op bijvoorbeeld een smartphone kan gebruiken, direct gerelateerd is aan de grootte en plaatsing ervan.

Deze punten illustreren dat content een transformatie moet ondergaan wil het de vertaalslag van een beeldscherm naar een smartphone overleven.

De ‘infinite edge’

Probeer eens met de muis of trackpad zo snel mogelijk precies op het midden van de letter A hieronder te gaan staan:

 A

Beter nog, zet een timer aan en beweeg dan tien keer zo snel mogelijk van de letter A hierboven naar de letter B hieronder en weer terug. Bereken vervolgens de gemiddelde tijd die je hierover doet. Vervolgens herhaal je dit, maar dan vanaf de onderkant van je beeldscherm naar de bovenkant van je beeldscherm en bereken vervolgens de gemiddelde tijd die je hierover doet.

B

Om je tijd te besparen hebben we dit zelf gedaan, de resultaten van dit testje zijn weergegeven in de grafiek hieronder.

Zoals te zien is, bewegen we een stuk sneller van de onderkant van het scherm naar de bovenkant van het scherm en terug (conditie 2), dan van de letter A naar de letter B en terug (conditie 1). De oorzaak van dit verschil in snelheid heeft alles te maken met Fitt’s Law (de snelheid waarmee van punt A naar punt B bewogen kan worden is direct gerelateerd aan de afstand tussen beide punten en de grootte van punt B).

In dit geval hebben de letters A en B een bepaalde grootte die, mede met de afstand tussen beide punten, bepaalt hoe snel ik van A naar B kom. Met de randen van het testscherm is echter iets opvallends aan de hand. We kunnen namelijk niet verder bewegen met de cursor dan die rand. Dit betekent dat het niet uitmaakt of ik precies op de rand mik, een centimeter eroverheen, of tien centimeter voorbij de rand, ik kom namelijk altijd exact op de rand terecht.

In deze situatie is de effectieve grootte van de rand van mijn scherm oneindig, aangezien ik nooit de rand zal kunnen missen, zodra ik voorbij een bepaald punt op mijn beeldscherm ben. Dit gegeven wordt de infinite edge genoemd, een rand die oneindig groot is en hierdoor veel sneller met een cursor te bereiken is.

De ‘infinite button’: een magische knop

In het begin van dit stuk werd het bestaan genoemd van een magische, multifunctionele knop, altijd op de juiste plek aanwezig maar nooit in de weg. Deze knop heeft nog een prettige bijkomstigheid, er wordt namelijk optimaal gebruik gemaakt van Fitt’s Law, aangezien de knop overal en nergens tegelijk is.

Pull-to-refresh

In 2008 bouwde Loren Brichter de twitter-app Tweetie, waar uiteindelijk de pull-to-refresh functie ingebouwd werd. Een functie die, zo zou later blijken, aan het begin van een revolutie stond. Pull-to-refresh stelt de gebruiker in de gelegenheid om verticaal over het scherm van een smartphone te swipen om op die manier de app te verversen. Deze functionaliteit en variaties hierop zijn inmiddels in een aantal populaire apps geïmplementeerd waaronder Mail op de iPhone en de mobiele applicaties van Facebook, Twitter, Evernote, Spotify en Day One.

Wat maakt deze functionaliteit zo speciaal? Zoals eerder besproken hebben smartphones te kampen met een kleinere hoeveelheid screen real estate dan desktops. De noodzaak voor een knop die eenvoudig te bedienen en bereiken is en ook nog weinig ruimte in neemt is daarom hoog. Het geniale aan de pull-to-refresh knop is dat deze functionaliteit optimaal rekening houdt met Fitt’s Law, omdat heel het scherm gebruikt kan worden als pull-to-refresh knop.

Dit maakt het een knop die nooit overige content op de pagina in de weg zit, altijd op de plek zit waar deze functionaliteit nodig is en hierdoor altijd binnen handbereik is. Waar de randen van een computermonitor te vergelijken zijn met een infinite edge, verandert de pull-to-refresh functionaliteit het complete smartphonescherm in een infinite button.

Side navigation

Andere toepassingen van deze infinite button zijn side navigation, waarbij horizontaal swipen over de pagina alternatieve content (bijvoorbeeld een menubalk) tevoorschijn haalt of laat verdwijnen (zoals in Facebook en Spotify). Varianten hierop zijn ook te vinden in de mobiele app van het populaire Evernote, waarbij verticaal swipen aanvullende content laat zien, en in de app Day One, waarbij verticaal swipen als alternatieve navigatiemethode gebruikt kan worden.

Swipe across content

Ook swipe across content, waarbij een bepaald object (bijv. een e-mailbericht) verwijderd kan worden, is een toepassing van de hierboven beschreven infinite button. De in korte tijd razend populair geworden e-mailapplicatie Mailbox heeft de swipe across content op een innovatieve manier geïmplementeerd door de functionaliteit (bericht archiveren, verwijderen, toevoegen aan een list, of markeren voor later) afhankelijk te maken van de lengte en richting van de swipebeweging.

Mede dankzij het optimaal rekening houden met fysieke eigenschappen van de gebruiker, de beperkte screen real estate van smartphones en het feit dat de multifunctionaliteit van de infinite button vrijwel onbegrensd lijkt, is te verwachten dat dat deze infinite button een hele goede kans maakt om een de facto standaard in mobile GUI te worden.