Designing for tech: facts, fiction and the future: de User Interface

Dit artikel is een vervolg op:Designing for tech: facts, fiction and the future

De knoppen, vensters, blokken en andere afbeeldingen die we gebruiken om onze alledaagse taken op de computer te voldoen worden in technische termen vaak aangeduid als de ‘grafische gebruikersinterface’ of GUI (graphical user interface). De basisprincipes van deze grafische gebruikersinterface werden uitgevonden door Xerox in de jaren 70, sindsdien bepaald deze weergave de norm voor interface design op zowel desktop als mobiele apparaten (denk aan: menubalk, cursor, vensters).

GUI design op mobiele apparaten: waar moet je rekening mee houden?

Hoewel enkele elementen hetzelfde blijven bij de switch van desktop naar mobiel, moet er in het design rekening worden gehouden met zowel andere invloeden op de gebruikerservaring (bijvoorbeeld: een wisselende gebruikslocatie) als technische limitaties. Zoals vermeld door David Leggett, in zijn artikel ‘Considerations for mobile design’ (2011) “Onze handen, welke niet zo precies zijn als een muiscursor, raken eerder gebieden van het scherm aan dan exacte pixels. We passen onze grip op onze smartphone aan wanneer we een knop proberen aan te raken met dezelfde hand. Wanneer er een fout word gemaakt zijn de consequenties tijdrovender; langere laadtijden en langzamere toestelsnelheden zorgen voor een minder geduldige gebruiker.”

In de loop der tijd zijn er diverse richtlijnen ontwikkeld voor User Interface design op mobiele apparaten. De combinatie van kleinere schermen en het gebruik van ‘touch’ interactie heeft bijvoorbeeld geleid tot nieuwe specificaties voor de grootte van User Interface elementen (bv. knoppen): Apple suggereert dat een minimumgrootte van 44 bij 44 pixels gebruikt dient te worden voor ‘touch’ interactie. Dit is, volgends Apple, precies het gebied wat door een vinger aangeraakt word bij het ‘tappen’. De User Interface Design and Interaction Guide van de Windows Phone 7 suggereert een minimumgrootte van 9mm x 9mm (ongeveer 34 x 34 pixels).

Naast interactie zijn de laadtijden op mobiele apparaten ook een belangrijke factor om rekening mee te houden: door de beperkte bandbreedte en een wisselend bereik moet een user interface design voor mobiele apparaten kunnen worden geoptimaliseerd op snelle laadtijden en een gereduceerd data-verbruik.

Één optimalisatie-techniek is het laag houden van de pixel-dichtheid (pixel density). Pixel dichtheid is de hoeveelheid pixels die binnen een bepaald gebied passen, dit heeft een impact op de scherpte van een display. IOS apparaten meten de dichtheid in PPI (pixels per inch) terwijl Android meet in DPI (dots per inch). DPI is ook de standaard eenheid voor print uitingen, deze hebben vaak 300 DPI of meer, terwijl beeldschermen bijna altijd 72 DPI gebruiken. In Photoshop kan je de PPI en/of DPI bekijken en veranderen via het ‘afbeeldingsgrootte’ venster (in het ‘afbeelding’ menu). Sla daarbij je afbeeldingen ook altijd op via de ‘Opslaan voor web’ optie in Photoshop, op basis van de door jou aangegeven kwaliteit word de afbeelding automatisch gecomprimeerd voor web-gebruik.

Andere opties voor de optimalisatie van afbeeldingen zijn het beperkt gebruik van bitmaps (alleen nodig voor complexe afbeeldingen zoals foto’s en video) en het gebruik van SVG en vector voor minder complexe afbeeldingen. Een ‘vector’ is een afbeelding gemaakt met behulp van eenvoudige meetkundige begrippen (punten, lijnen, krommen e.d.) in plaats van pixels. De informatie van een vector afbeelding kan daardoor eenvoudig worden omgezet in programmeertaal, in het geval van SVG een ‘XML’ bestand, welke kan worden ingelezen door de browser. Het grootste voordeel van SVG bestanden is dat deze meteen in de code van de website worden geplaatst, terwijl er voor afbeeldingen in essentie een link naar de locatie van de afbeelding word geplaatst. In het geval van een afbeelding moet de browser de afbeelding nog ophalen van de bestandslocatie, wat extra bandbreedte kost. Een SVG word direct gegenereerd. Daarbij kunnen SVG bestanden groter en kleiner gemaakt worden zonder kwaliteit te verliezen, terwijl je dit bij afbeeldingen gebaseerd op pixels al snel gaat zien.

 

 

Houd tijdens het designen voor verschillende platformen ook rekening met de lettertypes: zogenaamde ‘webfonts’ behouden niet alleen hun kwaliteit op verschillende browsers en platformen, maar laden ook nog eens sneller omdat ze speciaal voor webgebruik zijn gecomprimeerd. Fontsquirrel bied de meeste lettertypes op haar website ook aan als webfont. Ook hebben ze een ‘webfont generator’ waarmee je gewone lettertypes kan converteren tot webfonts. Voor extra gemak (en in de meeste gevallen ook snelheid) kan je gebruik maken van Google Fonts en Adobe Edge Web Fonts. Beide bieden lettertypes aan via hun Content Delivery Netwerk, een groot, verspreid netwerk van servers gericht op een goede performance. Hierdoor hoef je dus alleen maar een link naar het lettertype in je css of html te zetten en dan word deze automatisch ingeladen.

De Natuurlijke User Interface

Recente vorderingen in technologie hebben de weg vrij gemaakt voor een concept dat we de ’natuurlijke user interface’ noemen. Zoals beschreven door Sven Lenaerts (2013) zijn dit soort interfaces meer gericht op het ‘doen’. “Gebruikers hanteren het apparaat of platform om een doel te bereiken. Idealiter genieten ze tijdens dit proces net zoveel van de interactie met het apparaat of platform als de vervulling van het doel zelf. Een belangrijk concept in het design van de natuurlijke user interface is daarom directe manipulatie. Gebruikers vinden het geweldig het gevoel te krijgen dat ze direct met een scherm communiceren. De interactie moet daarom vloeiend, direct en natuurlijk aanvoelen. Gebaren, zoals swipe, pinch, en zoom, zijn hierin extra belangrijk. Daarbij kunnen tools zoals de Leap Motion een belangrijke rol spelen in de popularisatie van Natuurlijke User Interfaces.

Met de beperkte touch-techniek voor beeldschermen ligt het concept van ‘responsive’ natuurlijke interfaces op dit moment nog in te toekomst. Echter word het al veel toegepast voor ‘native’ applicaties op smartphones en tablets (zie voorbeeld).

 

 

Takeaways

• Houd bij het design voor verschillende platformen rekening met elementen als schermgrootte, touch-interactie, en (eventueel) natuurlijke User Interactie.
• De techniek voor mobiele apparaten is nog niet op hetzelfde niveau als op desktop, optimaliseer je layout, afbeeldingen en lettertypes dus op snelle laadtijden en een gereduceerd data-verbruik.

In het opvolgende artikel gaan we het hebben over hoe we de inhoud kunnen optimaliseren voor mobiel gebruik.