24 juni 2020

Enkele gedachten over touchscreen user interface design

Het creëren van intuïtieve, natuurlijke interfaces

Afgelopen weken heb ik gewerkt aan een nieuwe app die te maken heeft met persoonlijke gezondheid. De grootste uitdaging is om een intuïtieve, natuurlijke interface te bedenken die goed werkt op kleine touchscreen apparaten. Maar wat maakt een touchscreen interface nu eigenlijk goed? Lees verder voor een aantal best practices.

Erfenis van muis en toetsenbord

Traditionele PC-applicatie-interfaces zijn voornamelijk ontworpen en ontwikkeld met specifieke invoerapparaten in gedachten, zoals het toetsenbord en de muis. Veel conventies, best practices en ontwerppatronen zijn verbonden met dit verleden. Dit is allemaal prima wanneer je een app ontwerpt voor traditionele pc's, maar de kans is groot dat je doelgroep tegenwoordig moderne touchscreen-apparaten gebruikt. Het zou een vergissing zijn om de oude UI te recreëren op moderne touchscreen-apparaten!

Het recreëren van oude UI-patronen op een modern touchscreen-apparaat gaat je geen bruikbaarheidsprijzen opleveren... (hoewel, wie mist Clippy niet?)
Het recreëren van oude UI-patronen op een modern touchscreen-apparaat gaat je geen bruikbaarheidsprijzen opleveren... (hoewel, wie mist Clippy niet?)

Natuurlijke interacties

Moderne touchscreen-apparaten maken interacties natuurlijker doordat ze de noodzaak voor invoerapparaten zoals de muis wegnemen. Het apparaat is de invoerknop: elementen op het scherm kunnen gemakkelijk worden gemanipuleerd voor directe en onmiddellijke interacties, met behulp van aanraking en gebaren.

Het direct manipuleren van de elementen op het scherm voelt natuurlijk aan - een muis zou in dit geval overbodig zijn
Het direct manipuleren van de elementen op het scherm voelt natuurlijk aan - een muis zou in dit geval overbodig zijn

Ruim op en formaat elementen adequaat

Een vinger is veel groter dan een puntige muiscursor, dit vereist een andere benadering van het formaat van interface-elementen. Interactieve elementen moeten groot genoeg zijn om te worden aangeraakt, met voldoende ruimte ertussen. Doelen die te dicht bij elkaar liggen, vergroten de kans op fouten.

De grote 'ja/nee'-knoppen verminderen de kans op fouten omdat ze geen pixelprecisie van de muisaanwijzer vereisen
De grote 'ja/nee'-knoppen verminderen de kans op fouten omdat ze geen pixelprecisie van de muisaanwijzer vereisen

Optimaliseer tekstinvoer

Afhankelijk van wat je bouwt, is de kans groot dat je op een gegeven moment een soort tekst- of numerieke invoer nodig hebt. De gemakkelijke (en verkeerde) manier om dit te doen, is door simpelweg een volledig virtueel toetsenbord te tonen. In plaats van een virtuele recreatie van het verleden (het fysieke toetsenbord) te maken, moet je de gelegenheid aangrijpen om te heroverwegen wat je de gebruiker vraagt. Afhankelijk van deze invoercontext moet je vervolgens een minimaal toetsenbord tonen dat alleen de relevante toetsen biedt.

Contextuele toetsenborden bieden een betere manier om tekstinvoer mogelijk te maken. Het heeft geen zin om een volledig QWERTY-toetsenbord te tonen als je alleen om een numerieke waarde vraagt.
Contextuele toetsenborden bieden een betere manier om tekstinvoer mogelijk te maken. Het heeft geen zin om een volledig QWERTY-toetsenbord te tonen als je alleen om een numerieke waarde vraagt.

Herpositionering

Waar traditionele pc-applicaties vaak hun werkbalken bovenaan de vensters hebben, zou het repliceren hiervan op een touchscreen-apparaat ervoor zorgen dat de handen de rest van het scherm belemmeren. Naast het zichtbaar houden van de inhoud van het scherm, moet je ook rekening houden met de ergonomie van het hanteren van het apparaat. Regelmatig gebruikte knoppen moeten bij voorkeur in de buurt van de natuurlijke positie van de vingers worden geplaatst.

De knoppen Terug / Verbergen / Opslaan bevinden zich dicht bij de duim: ze zijn binnen handbereik en het reiken ernaar bedekt de inhoud van het scherm niet
De knoppen Terug / Verbergen / Opslaan bevinden zich dicht bij de duim: ze zijn binnen handbereik en het reiken ernaar bedekt de inhoud van het scherm niet

Vergeet zweven en tooltips

Vergeet interface-elementen, zoals navigatiestructuren, die afhankelijk zijn van zweven. De meeste touchscreens registreren geen vingers die boven het glas zweven. Je kunt ook niet vertrouwen op tooltips om de functionaliteit van je interface uit te leggen. Een touchscreen-UI moet voor de gebruiker op het eerste gezicht duidelijk zijn.

Navigatiestructuren die afhankelijk zijn van zweven gaan NIET werken op touchscreens
Navigatiestructuren die afhankelijk zijn van zweven gaan NIET werken op touchscreens

Wees creatief

Ontwerpen voor touch-interactie is iets dat je - bovenal - als iets creatiefs moet benaderen. In plaats van het oude te recreëren, moet je nadenken over alle mogelijkheden die het nieuwe biedt.

Snake '97 - Het is leuk, maar het UI-ontwerp is aantoonbaar slecht
Snake '97 - Het is leuk, maar het UI-ontwerp is aantoonbaar slecht

Toen ik de Snake 97 game voor touchscreen-apparaten maakte, recreëerde ik het oude invoermechanisme met nauwgezette aandacht voor detail. Hoewel ik dit leuk vind, is het aantoonbaar slecht UI-ontwerp omdat het alle mogelijkheden van de nieuwe technologie volledig negeert. Het is dan ook geen verrassing dat games zoals Angry Birds zo succesvol zijn, omdat ze volledig profiteren van de natuurlijke interactie die mogelijk wordt gemaakt door touch.

Het katapulteren van vogels is leuk vanwege de natuurlijke interactie die de sleutel is tot het Angry Birds-spel
Het katapulteren van vogels is leuk vanwege de natuurlijke interactie die de sleutel is tot het Angry Birds-spel

Conclusie

Een invloedrijke professor vroeg me ooit: "Maar is het leuk, Willem?". Wanneer je ontwerpt voor touch, moet je deze vraag echt overwegen. Als je het beantwoordt met "JA!" dan mag je jezelf op de goede weg beschouwen.

Je moet interactie opnieuw bedenken in plaats van oude dingen te recreëren. Natuurlijk is niet alles wat oud is slecht; maar het zou een vergissing zijn om het potentiële goede dat moderne technologie mogelijk maakt te negeren!