Webinterfaces ontwerpen die zijn geschaald voor touchscreens
Voorbij zijn de dagen van ingewikkelde JavaScript-notatie en talloze plug-ins in je header. Het lay-outontwerp heeft een grote stap voorwaarts gemaakt, aangezien we ontwerpers zien die een aantal extravagante concepten maken. Touchscreen-apparaten hebben momenteel de hoogste interesse vanuit het oogpunt van een ontwerper en ontwikkelaar.
Meer mensen gebruiken nu touchscreen-apparaten dan ooit tevoren. Dit omvat tablet-pc's en de volledige lijst met besturingssystemen voor mobiele telefoons. Deze apparaten zijn allemaal mobiel en bieden toegang vanaf vrijwel elke externe locatie.
Ontwerpers schalen hun geloofwaardigheid terug om de grote vraag bij te houden. Maar wat is essentieel bij het wisselen tussen een standaard webdesign en een touchscreen app? Er zijn veel opkomende trends binnen de ontwerpgemeenschap die kunnen worden gebruikt om elk idee op te schalen naar futuristische touchscreentechnologie.
Huidige staat van aanpassing
Hoewel Apple's iPhone en iOS vaak worden besproken onder de reguliere media en technische goeroes, zijn ze niet het enige marktkapitaal in apparaten met aanraakscherm. Veel draagbare laptops en tablet-pc's zijn uitgebracht door externe fabrikanten, waaronder Hewlett-Packard, Samsung en Microsoft.
Momenteel moeten ontwikkelaars touchscreeninterfaces als nieuwe apparaten beschouwen, afgezien van het standaardtoetsenbord en de muis. Traditioneel werd dit aangevuld met JavaScript-aanroepen of mediaquery's, wat resulteerde in complexe retourgegevens. Er moet een betere manier zijn om deze nieuwe trends over te nemen.
Als voorbeeld kunnen we een Apple iPad vergelijken met elke netbook met Google Chrome om onmiddellijk verschillen op te merken. Hoewel hun schermafmetingen vergelijkbaar kunnen zijn, werken ze op twee totaal verschillende niveaus. Zelfs de besturingssystemen zelf zijn enorm verschillend en ondersteunen nieuwe computerstandaarden.
De winsten en verliezen
Met touchscreen-interfaces winnen we veel flexibiliteit. Ontwerpers kunnen overal op de pagina knoppen en scrollwielen plaatsen, omdat het allemaal toegankelijk is met een aanraking of tik.
Ontwikkelaars kunnen ook de functionaliteit van applicaties volledig beheren. De ontwikkeling van Cocoa SDK voor iOS biedt veel klassen die touchscreen-interacties weerspiegelen. Ontwikkelaars kunnen tussen elke interactie op meerdere vingers en zelfs drukdetectie controleren.
We verliezen echter ook veel belangrijke ontwerpreferenties waar we allemaal van zijn gaan houden. Als voorbeeld is er geen behoefte aan zweeftoestanden wanneer het gaat om een volledig touchscreen-gebaseerde interface. Dit kan worden vervangen door een actiestatus wanneer een gebruiker actief op een element drukt, hoewel het doel enorm uiteenloopt.
Het ontbreken van een muis vormt ook een invoerprobleem. Scrollen en bladeren tussen pagina's moet soepeler en gemakkelijker zijn dan bij de meeste apps, omdat er een verminderde functionaliteit is. Er zijn ook toetsenborden ingebouwd in het tablet- of handheldscherm, die de gebruikerservaring een radicaal nieuw gevoel geven.
Groepeer gemeenschappelijke elementen samen
Clustering-elementen zijn een goede gewoonte bij het ontwerpen van lay-outs voor touchscreen-apps. Met cluster bedoel ik niet alle knoppen en elementen op een pagina in de rechterbovenhoek proppen. Ontwerp in feite een kaart voor elke weergave en bereken welke informatie voor welke weergave het meest geschikt is.
Dit vermindert frustratie en verwarring bij de gebruiker. Wanneer u op zoek bent naar instellingen om accountgegevens bij te werken, is het het gemakkelijkst om deze allemaal in één schermpaneel te vinden. Dit is vaak ook het geval met web-apps, hoewel de interface meestal is ingesteld voor muisinteracties.
In plaats van één lange scrollende verzameling gegevens te creëren, bieden mobiele OS's unieke voordelen. Met de meeste touchscreen-apparaten kunt u binnen elke app-weergave tabbladen maken. Deze bieden een eenvoudige manier voor gebruikers om zonder al te veel moeite te schakelen tussen instellingen en andere gegevens. Deze tabbalk kan worden vergeleken met een navigatiebalk vol paginakoppelingen in een klassieke webinterface.
Plan voor talloze mobiele systemen
Het is geweldig om te overwegen dat uw website werkt met volledige HTML5- en CSS3-specificaties, maar dit lost niet veel voorkomende problemen op met touchscreen-interfaces. Op voorwaarde dat welke browser uw pagina analyseert, wordt uitgevoerd met de meest voorkomende DOM-standaarden, het komt goed.
Hoewel Google Chrome voor desktop een parsing-engine heeft die sterk verschilt van die van mobiele BlackBerry of Opera Mobile. In feite zien we voor elk van de grote mobiele providers veel nieuwe browsers.
iOS wordt standaard geleverd met Safari, maar er zijn er nog veel meer in de App Store. Alle moderne softwarebrowsers voor mobiele platforms bieden de mogelijkheid om te controleren op HTML5-notities en -kenmerken. Indien mogelijk zou u moeten overwegen om elke lay-outversie van uw site te testen op de belangrijkste touchscreen-behuizingen. Browsers tussen Android, Microsoft Mobile en BlackBerry zullen allemaal verschillen en vereisen een grondige planning.
Het is natuurlijk onmogelijk om iedereen altijd te plezieren, maar de meerderheid is zeker een doel dat het waard is om te bereiken. Implementeer een installatie van Google Analytics of een andere app voor statistieken op uw site die elk bezoekend apparaat zal parseren.
Google biedt ongelooflijk gedetailleerde rapportgegevens, zoals welke mobiele browsers uw website het vaakst bezoeken en hoeveel pagina's elk gemiddeld bezoeken.
Laat geen steen onomgedraaid
Dit kan ook worden gekoppeld aan algemene ontwerpkennis, maar zorg ervoor dat elk element op schema ligt voor elke touchscreen-indeling. Als we terugkijken op een prototype of mobiele interface, proberen we als ontwerpers vaak dingen te veranderen en opnieuw te positioneren.
Het is belangrijk om te beseffen dat er met touchscreen-interfaces veel minder ruimte is voor vrije beweging. Het is dus belangrijk om een lay-out te vinden die het beste werkt en toch de gemakkelijkste gebruikerservaring biedt - en houd je er dan aan!
Het kan moeilijk zijn, maar vertrouw op je gevoel en ontwerpgevoel voor kennis van wanneer je het een dag moet noemen.
Overweeg om uw ontwerp uit te testen op een paar van uw vrienden of familieleden. Een snelle demo of het doorlopen van de applicatie en gebruikersinterface vanuit een extern perspectief zal meestal nuttige feedback opleveren en kritiek leveren vanuit een nieuwe set ogen.
Gevolgtrekking
Naarmate touchscreen-apparaten hun invasie voortzetten, zullen we een golf van app-ontwikkeling opmerken. Dit is een enorme markt, niet alleen met Apple's iOS-apparaten, maar Google en Microsoft lanceren ook campagnes om hun deel van het mobiele web te verzamelen.
De vergelijking tussen elk van deze apparaten varieert en zal verschillen van elke ontwerper. Als u meer ideeën over dit onderwerp wilt bekijken, kunt u overwegen om uw gedachten op touchscreen-websites uit te breiden om te zien wat er is. Touchscreen-webinterfaces evolueren en naarmate de ontwerpgemeenschap mee evolueert, zullen we innovatieve gebruikersinterface-inspiratie zien als nooit tevoren!
