In de begintijd van het ontwerpen van websites voor mobiele apparaten hebben de meeste ontwikkelaars hun productaanbod gesplitst. Ze brachten een volledig functionele desktopversie uit en vervolgens een "mobiel geoptimaliseerde" versie die veel van de branding en afbeeldingen weghaalde om tegemoet te komen aan de beperkte mogelijkheden en netwerksnelheid van candybar-telefoons en 3G-draadloze netwerken.
Moderne smartphones kunnen webpagina's echter net zo efficiënt weergeven als desktop-pc's, via netwerken die net zo goed of beter zijn dan de DSL-lijnen van gisteren.
Ontwerp convergeert vervolgens terug naar een interface voor één gebruiker. Maar het risico voor ontwerpers is niet dat een smartphone of een tablet geen moderne, responsieve website kan weergeven. Integendeel, het is dat de methode van gebruikersinvoer op een touchscreen-apparaat zinvolle wijzigingen in het onderliggende siteontwerp vereist. De dagen van het bouwen van een website, ervan uitgaande dat bezoekers over een toetsenbord en een muis beschikken, zijn voorbij.
Basic Touchscreen Design Rules
Ontwerpen voor een touchscreen-bewuste webinterface vereist een evolutie van de traditionele monitor-muis-toetsenbordbenadering van het verleden. In het bijzonder moet u interacties opnemen zoals gebaren, tikken en multitouch-invoer.
- Tikken is niet correct.Tenzij de klant de vingers van een peuter heeft, zelfs met de zeer nauwkeurige softwarebesturing, kan het moeilijk zijn om te tikken en nauwkeurig te zijn.
- Gebaren zijn anders dan tikken.Als u een lange pagina op een touchscreen wilt schuiven, veegt de gebruiker met één vinger omhoog het browservenster. Dit lijkt misschien niet belangrijk totdat je je realiseert dat je met een muis beweegt en met de muis beweegt naar beneden .
- Twee (en meer) vingertikken.Een gebruiker kan meerdere vingers tegelijkertijd op het apparaat gebruiken om het te bedienen. Die extra tikken kunnen iets specifieks betekenen, afhankelijk van het besturingssysteem van het apparaat van de gebruiker.
- Zeer verblindende apparaten.De schermen van de meeste touchscreen-tablets zijn gemaakt van stevig glas. Dit materiaal kan erg moeilijk door te lezen zijn, met veel verblinding, in fel licht situaties. Bovendien krijgen ze bij het aanraken vingerafdrukken en vlekken op het scherm die van invloed kunnen zijn op hoe uw pagina's eruitzien.
- Schermtoetsenbord.Hoewel sommige gebruikers een draadloos toetsenbord hebben, maken ze verbinding met hun tablet, de meeste tabletgebruikers gebruiken het schermtoetsenbord voor gegevensinvoer. OSK-invoer kan resulteren in een aantal hilarische typefouten en het is ook oncomfortabel om gedurende langere perioden te gebruiken.
Vanwege deze functies van het apparaat, moeten webontwerpers de nadruk leggen op verschillende basisontwerpregels voor gebruikers met een aanraakscherm:
- Plaats geen klikbare items te dicht bij elkaar.Er is geen vaste regel die bepaalt hoe dichtbij te dichtbij is, maar lijsten met koppelingen, vooral in kleine letters, kunnen moeilijk te navigeren zijn door met een dikke vinger op te tikken (tikken). Het kan vervelend zijn om in te zoomen om te proberen op een link te klikken. Dit principe geldt voor zowel knoppen als koppelingen.
- Hiërarchieën kunnen moeilijk zijn om open te houden.Een populaire vorm van een dynamisch menu gebruikt JavaScript om een submenu te openen wanneer de gebruiker klikt en vervolgens met de muis over het submenu beweegt. Deze toestanden kunnen erg moeilijk of onmogelijk te gebruiken zijn op touchscreens omdat ze ofwel niet open blijven of niet sluiten.
- Verplaats koppelingen en aanklikbare gebieden weg van de rechterrand van het venster.De meeste mensen zijn rechtshandig en hebben de neiging aan die kant van het scherm te scrollen. Aangezien scrollen gebeurt met een gebaar, is het soms mogelijk om per ongeluk de veeg op een link te starten. Gebruikers kunnen geïrriteerd raken als ze op de pagina willen scrollen en in plaats daarvan per ongeluk op een koppeling tikken. Door uw links van de rechterkant te verwijderen, kunt u hen helpen dit ongemak te voorkomen.
- Er is geen muis.En dit betekent dat er geen muis is wijzer . U moet er niet op vertrouwen dat de muisaanwijzer verandert om aan te geven dat er iets klikbaar is.
- Zwevende staten bestaan niet.Als uitvloeisel van het bovenstaande, omdat er geen muis is, is er niets om mee te zweven. Een koppeling is geklikt (tikken) of niet op een touchscreen-apparaat, zodat gebruikers geen bruikbare informatie kunnen afleiden uit dergelijke zweeftoestanden zoals kleurveranderingen, tooltips of wijzigingen in de statusbalk.
- Zwarte achtergronden versterken de schittering.Een site met een zwarte achtergrond kan erg moeilijk te lezen zijn op een apparaat met touchscreen vanwege de verblinding. Zwart maakt de vingerafdrukken op de apparaten duidelijker en vervaagt het scherm. En het zwart kan het scherm veranderen in een spiegel die terugkaatst op de gezichten van de gebruikers, vaak meer dan de tekst op het scherm.
- Lange blokken tekst in formulieren zijn moeilijk te schrijven.Hoewel het mogelijk is hele romans op een iPad of een Android- of Windows-tablet te schrijven, houden de meeste mensen er niet van om het schermtoetsenbord te gebruiken voor lange stukken tekst. Hoe meer uw ontwerp gegevensinvoer zo kort en gemakkelijk mogelijk kan maken, hoe beter.
Het belangrijkste aspect van ontwerpen met touchscreens in gedachten is test uw pagina's op een touchscreen-apparaat. Hoewel er veel iPad- en Android-emulators beschikbaar zijn, en veel Windows-tablets, bieden ze nog steeds niet het gevoel van een touchscreen. U kunt niet zien dat links te dichtbij zijn of dat knoppen te klein zijn, of dat de schittering de pagina te moeilijk maakt om te lezen, tenzij u een tablet uitstuurt en ze uitprobeert voor u geeft uw nieuwe website-ontwerp vrij.
