Flexibele layouts voor een wereld vol schermen


De meeste webpagina’s zijn gebaseerd op ontwerppatronen die gemaakt zijn voor pc’s en laptops. Apparaten uitgerust met muis en toetsenbord. Aangezien de variatie in apparaten om mee te surfen gegroeid is, zijn deze patronen verouderd. Tegenwoordig betekent webdesign rekening houden met smartphone gebruik met één duim, tweehandig touch screen interactie voor tablets zoals de iPad, computers met muis en nog veel meer.

De nieuwe realiteit

Terwijl de verscheidenheid aan apparaten toeneemt, doet het aantal internetgebruikers dit ook. Om de impact van een bepaald apparaat op interaction design en layout te begrijpen, focussen we ons op drie zaken. Namelijk: input, output van het scherm en veel voorkomende gebruiksmanieren.

Smartphones van tegenwoordig worden bepaald door schermen ter grootte van een handpalm (3-5 inch), multi-touch input en overwegend gebruik van één duim met het apparaat op halve armlengte afstand. Onlangs zijn 1333 smartphone-gebruikers op straat geobserveerd. Uit dit onderzoek is gebleken dat ongeveer 85% van het gebruik van internet op telefoons met één duim gebeurd. Dit is de nieuwe werkelijkheid en websites moeten hier op worden aangepast.

Hoewel tablets ook multi-touch input hebben, worden ze anders gebruikt dan mobiele apparaten. Vanwege het grotere scherm is eenhandig gebruik minder fijn en gebruikt men meestal twee handen. Op die manier zijn de zijkanten van het scherm het makkelijkst te bereiken. De tablet wordt steeds populairder, dus ook hier moet rekening mee gehouden worden.

De opkomst van hybride apparaten met input van muis, toetsenbord en touchscreen zal steeds groter worden. Op deze apparaten wordt touch vaker gebruikt dan men denkt. Intel heeft onderzocht dat 77% van de interacties via touchscreen verloopt; 12% door middel van een muis en 8% via het toetsenbord. Ook hierbij gebruikt men meestal twee handen aan weerszijden van het scherm.

Onder het groot scala aan internetapparaten bevinden zich nog steeds een heleboel laptops en PC’s die met muis en toetsenbord werken. Voor deze computers gelden nog steeds de traditionele design standaarden. Dus hoe kunnen web layouts aangepast worden aan deze nieuwe, steeds diverser wordende realiteit? Laten we één voorbeeld bekijken: Polar.

Aanpassing op schermgrootte en soort input

Polar is een dienst die het makkelijk maakt om fotopolls op te zetten. Gebruikers kunnen tevens stemmen uitbrengen op de polls van anderen. Het interface van Polar is niet alleen ontworpen om zich aan te passen op verschillende schermgroottes, maar ook op verschillende soorten input. Het resultaat hiervan is een interface gericht om bij het internetgebruik van nu te horen. In het bijzonder op interactie met een variëteit aan apparaten. Er is rekening gehouden met de zogeheten ‘one-handed thumb use’ op smartphones, tweehandig gebruik op een tablet, klikken en scrollen met een muis en indien van toepassing: snelkoppelingen via het toetsenbord.

Zo heeft Polar op een smartphone makkelijk klikbare objecten en slechts één kolom aan content. Op de wat grotere smartphones (denk aan de Galaxy Note) en kleine tablets (ook bekend als phablets) is de content groter. Hoewel de nadruk ligt op touch, wordt het toetsenbord ook ondersteund.

Op tabletschermen zijn er twee kolommen. Aan de linkerkant een kolom om makkelijk en snel te browsen, en rechts een contentkolom. Op deze manier probeert Polar het gebruikers makkelijk te maken om met twee handen te internetten.

Wanneer er een groter scherm wordt gedetecteerd, bijvoorbeeld van een laptop, wordt er aangegeven dat er ook gebruik kan worden gemaakt van het toetsenbord. Met de pijltjestoetsen kun je vervolgens door de content heen navigeren en je stem uitbrengen.

Op grote schermen wordt de nadruk gelegd op gebruik van het toetsenbord. Hoewel sommige schermen een touch-functie hebben, is de kans groot dat het toetsenbord dichterbij is dan het beeldscherm. Een toetsenbord zorgt in dit geval dus voor het meeste gebruiksgemak.

Gebruiksgemak

De makers van Polar hadden voor elk apparaat hetzelfde uitgangspunt: gebruiksgemak. Ze wilden een (multi input) design dat comfortabel was voor telefoon, tablet, hybrid, laptop en desktop gebruikers. Het interface komt overeen met hoe mensen dit apparatuur gebruiken.

Een mogelijke nadeel hiervan is dat dit gebruiksgemak alleen overkomt wanneer er gebruik wordt gemaakt van de applicatie. Op een laptop kan het interface verwarring opleveren, omdat het midden van de pagina leeg is. De meeste webpagina’s hebben een gecentreerde lay-out met lege zijkanten.

Maar moeten deze oude tradities verbroken worden? Is het beter dat we webinterfaces aanpassen op de manier hoe internetapparaten worden gebruikt? Of moeten wij ons vasthouden aan de gebruiken die 20 jaar geleden zijn ontstaan? En wat is het verschil tussen tablets en laptops in een wereld vol hybrids?

Wat er precies gaat gebeuren zal de tijd ons leren. Wij verwachten dat er steeds meer rekening wordt gehouden met hoe verschillende apparaten gebruikt worden. Het internetgebruik op meerdere apparaten neemt immers toe. Ook houden steeds meer internetbureau’s zich bezig met responsive design. De grote verscheidenheid aan apparaten vereist flexibiliteit. Hoe dat precies wordt ingevuld staat nog niet vast. In de tussentijd zullen ook wij ons blijven aanpassen op deze apparaten en al wat komen gaat..

Nieuwsgierig?

Heeft dit jouw interesse gewekt en wil je meer over flexibele layouts weten? En vooral wat dit voor jou en jouw organisatie kan betekenen? Ik vertel jou graag meer over onder het genot van een bakje koffie. Je kunt mij rechtstreeks bellen voor een afspraak op 06 36 04 94 85. Of stuur gerust een mailtje naar hj@sterc.nl.

Bron: www.lukew.com