Hoe de touchscreenrevolutie UX beïnvloedt
De introductie van Windows 8 zorgde voor een grondige revisie van de Windows-gebruikersinterface in lijn met de Windows Phone-interface om meer intuïtief te zijn voor mensen die touchscreens gebruikten, en Apple heeft subtiel OSX aangepast in de tijd, waardoor functies worden gestroomlijnd die steeds meer gedeeld worden over hun mobiele en desktop-besturingssystemen. Hoewel we nog een Mac met touchscreen te zien hebben, is het duidelijk dat de revolutie op het touchscreen op ons afkomt met gebruikers die steeds meer tijd op hun mobiele apparaten doorbrengen dan thuiscomputers.
Met dit in gedachten en een steeds groter deel van het browsen op smartphones en tablets, moeten websites bepalen hoe ze zich zullen aanpassen aan mensen die hun inhoud zonder muis en toetsenbord willen gebruiken. Hoewel de standaard reactie hierop vaak 'gewoon een aparte mobiele interface is!', Een oplossing die in het verleden goed heeft gewerkt op kleinere mobiele apparaten zoals telefoons, is er voor de middelste groep heel weinig ruimte voor een grotere telefoon en tablet-displays.
In dit artikel worden een aantal sites behandeld die zowel onconventionele als standaardontwerpen van de site hebben verlaagd om meer aanraakvriendelijk te zijn.
Gerichte websites versus responsieve websites
Veel websites hebben speciale sites of apps speciaal gemaakt voor gebruikers van touchscreens, zodat ze zich kunnen richten op één type gebruiker tegelijk. Een probleem is dat omdat de websites van elkaar gescheiden zijn, ze afhankelijk zijn van URL-omleiding, wat vaak kan leiden tot problemen, zoals het feit dat de gebruiker van links naar de verkeerde site wordt gestuurd, of slechte doorverwijzing als gevolg van het omleiden naar opgemaakte pagina's voor mobiele gebruikers.
Het grootste probleem met afzonderlijke websites voor mobiele gebruikers is echter dat de mobiele versie vaak functies of informatie mist die een desktopgebruiker ontvangt; functies en interfaces worden vaak vereenvoudigd, knoppen worden vergroot en opties worden verkleind. Dit kan worden opgelost door een 'responsief' ontwerp te gebruiken. Een responsieve website is ontworpen om gemakkelijk op beide platforms te kunnen worden bekeken, zonder kwaliteitsverlies op beide platforms. Dit heeft ook het voordeel dat slechts één website hoeft te worden ontworpen, in plaats van twee, maar dit resulteert vaak in compromissen voor beide platforms.
Basis ontwerpverschillen
Er zijn duidelijke verschillen tussen een aanraakscherm en een bureaublad waar u aan moet denken bij het maken van uw website. Op een aanraakscherm veeg je de pagina omhoog om er naartoe te scrollen, maar op een bureaublad verplaats je je scrollwieltje naar beneden. Apple heeft geprobeerd dit te corrigeren door hun touch-interfacetechnologieën te consolideren in trackpads op zowel hun laptop als desktop-Mac, maar pc-gebruikers of zelfs Mac-gebruikers die conventionele scrollwielen of schuifregelaars gebruiken om door webpagina's te scrollen, zijn in het nadeel.
Knoppen moeten veel groter zijn op mobiele apparaten, want tikken is lang niet zo nauwkeurig als klikken met een muis. Er is niets zo irritant als wanneer je op een link voor de volgende pagina klikt en per ongeluk een pagina of advertentie ontvangt. Het ontbreken van een cursor betekent ook dat je geen zweeftekst kunt hebben om uit te leggen waar een link naartoe gaat, wat een woord betekent of zelfs wat klikbaar is.
Er is ook een verschil tussen nauwkeurigheid op mobiele ingangen aangezien touchscreens ofwel resistieve of capacitieve ingangen kunnen hebben met verschillende gevoeligheden en vervolgens nauwkeurigheid kan verliezen op resistieve touchscreens. Verderop moeten ontwerpen twee enorm verschillende resoluties voor mobiele apparaten met twee oriëntaties bevatten.
Schermoriëntatie en beeldverhouding
Met meerdere resoluties die groter zijn dan bij normale beeldschermafmetingen, betekent dit dat u niet langer alleen kunt denken in termen van gestandaardiseerde schermresoluties en verticale verplaatsing. De snelle veranderingen in de technologiemarkt hebben schermafmetingen opgeleverd die verschillen van model en fabrikant en met alle geruchten over zogenaamde slimme horloges kunnen we schermen gaan zien die niet langer beperkt zijn tot vier grenzen. Mobiele schermen voegen nog meer complexiteit toe vanwege het feit dat ze in rotatie en in portret- en landschapmodus kunnen worden bekeken.
Het antwoord zijn vloeibare lay-outs die zichzelf aanpassen voor elke resolutie en die zich kunnen aanpassen voor zowel portret- als landschapsweergave. Sommige websites gebruiken een vloeibare lay-out die het uiterlijk van de website drastisch verandert om het bedieningsgemak te optimaliseren en het volledige potentieel van het scherm te gebruiken op basis van de oriëntatie.
Terwijl muizen specifiek werden ontworpen met scrollwielen voor gemakkelijk verticaal scrollen, migreren veel gebruikers naar touchpads en touchscreens, en aangezien Apple de meer innovatieve vorm van aanraakbeweging heeft omarmd, die lijkt op het verslepen van een pagina in plaats van scrollen, is het creatievere idee van horizontaal scrollen is misschien niet uit den boze. De meeste apps gebruiken horizontaal scrollen als een hulpmiddel en verreweg het grootste succes bij horizontaal scrollen is de Kindle, dus waarom zou u het niet in uw web-UI implementeren? Veel pagina's met één pagina hebben alleen een horizontale as, maar ze moeten vaak knoppen gebruiken om het scrollen in te stellen, omdat gebruikers de niet-standaardindeling mogelijk niet begrijpen.
Horizontaal schuiven lijkt op verticaal scrollen in ontwerptermen, maar het gebruik van beide kan de mogelijkheid tot scrollen op twee assen openen, wat mogelijk niet werkt in de browser. Veel gebruikers willen graag verankerd zijn aan een as, uiteraard is dit meestal de x-as, die statisch is, dus als gebruikers de pagina kwijtraken, kunnen ze gewoon naar boven scrollen en teruggaan naar de hoofdnavigatie. Op sites met dubbele assen is dit misschien niet zo eenvoudig, en dus moet de navigatie mogelijk plakkerig zijn, met behulp van een HUD-stijlbalk.
Dus welke gebruikersinterface moet uw website gebruiken?
Uiteraard is niet elke gebruikersinterface geschikt voor elk type website, dus stel jezelf een paar basisvragen: wie is je doelgroep? Wat probeer je te 'verkopen'? Welke indruk wil je geven? Jongeren gebruiken eerder een aanraakscherm dan een oudere demografie die waarschijnlijk een desktop gebruikt, maar misschien hebben ze grotere knoppen en een duidelijkere gebruikersinterface nodig. Het heeft geen zin om de meest innovatieve gebruikersinterface die u kunt bedenken te creëren als niemand kan begrijpen hoe deze moet worden gebruikt, dus denk er altijd aan een gebruikersinterface te maken waarnaar een gebruiker kan kijken en direct weet hoe deze moet worden gebruikt.
Radiaal menu
Een radiaal menu, ook wel een taartmenu genoemd, is een circulair contextmenu dat gebruikmaakt van een multidirectionele context in plaats van hoogte of breedte als selectietool.
Dit is een geweldige vorm van intuïtief ontwerp dat voorkomt dat gebruikers verdwalen in tientallen submenu's. Een ander voordeel is dat een gebruiker met een aanraakscherm betere controle heeft over normale vervolgkeuzelijsten omdat directionele besturing nauwkeuriger is dan aftappen. Het gebruik van radiale menu's in formulieren en websites kan de ervaring van een gebruiker met een aanraakscherm op de website drastisch verbeteren en strekt zich uit tot thumbsticks zoals die op spelconsoles worden gebruikt, ergens worden radiale menu's vaak gebruikt, omdat games gemakkelijk naar pc kunnen worden geporteerd. Hierdoor verliezen desktopgebruikers ook niet, want het blijft zo dat radiale menu's lange lijsten kunnen vereenvoudigen tot eenvoudige categorieën die het gebruiksgemak of de productiviteit op een website vergroten.
Radiale menu's zijn een geweldige manier om contextgevoelige informatie weer te geven, een voorbeeld hiervan is klikken op een afbeelding van een gerecht op een voedselwebsite en de mogelijkheid krijgen om te retweeten, de receptlink, ingrediëntenlijst of de afbeelding op te slaan. U moet er echter voor zorgen dat uw menu toegankelijk en eenvoudig blijft, anders kunt u de gebruiker gemakkelijk overweldigen, vooral wanneer u symbolen en woorden in hetzelfde radiale menu combineert. Radiaalmenu's zijn veel gemakkelijker te gebruiken bij statisch in plaats van dynamisch, omdat dit kan leiden tot problemen bij het selecteren van objecten, zoals op sites zoals Phong , in dit geval, vooral wanneer je een muis gebruikt, omdat het volgen van de cursor het vooral niet intuïtief maakt.
Skeuomorphism
Het skeuomorfische ontwerp imiteert het uiterlijk en de functionaliteit van een alledaags object om een intuïtieve gebruikersinterface te creëren, iets dat recentelijk uit de mode is geraakt, vooral sinds Scott Forstall ontslag nam bij Apple en Sir Jony Ive's platte ontwerp iOS en waarschijnlijk OS X overnam toekomst. Skeuomorfisme was een groot deel van Apple's streven naar meer intuïtief ontwerp, onlangs met Contacts op Mac als een echt adresboek, of Kiosk en iBooks op iOS als echte boekenplanken. Dit ontwerp is er een dat duidelijk meer voordelen oplevert voor touch-interface gebruikers, omdat we geen interactie hebben met de wereld om ons heen met een cursor.
Vertrouwdheid draagt bij aan de intuïtiviteit bij het gebruik van een gebruikersinterface, omdat dit het punt is van het skeuomorfisme, om een extra dimensie van vertrouwdheid te creëren door krachten te bundelen met echte objecten, zodat de gebruiker onmiddellijk weet hoe ermee moet worden omgegaan. Een succesvol skeuomorf ontwerp betekent dat u, gewoon door een blik te werpen op de webpagina, weet wat het onderwerp is / waarvoor de pagina wordt gebruikt, het maken van mouse-over tooltips en het koppelen van hoogtepunten overbodig.
Kies UI
Dit is een combinatie van beide, waarbij de hele gebruikersinterface een eenvoudige wijzerplaat vormt; het ontwerp lijkt op een radiaal menu, maar in plaats van scharnieren in het midden, als u daar selecteert, draait de draaiknop naar een enkel selectiepunt. Dit is zeer effectief in gevallen zoals muziek waarbij vaak een nummer wordt gebruikt om nummers te mixen en het volume te regelen. In het geval van het netlabel SHSK'H ze gebruiken een aangepast type gebruikersinterface om te selecteren welk nummer je wilt spelen.
De minimalistische beweging
Minimalisme is waar een website wordt teruggebracht tot zijn naakte essentiële elementen. Dit is geweldig voor mobiele gebruikers omdat het de laadtijden en het gegevensgebruik verlaagt en de gebruiker toegang heeft tot alle benodigde informatie in een duidelijke interface die gemakkelijker te gebruiken is voor kleinere resoluties. Het huidige minimalisme is verder gegaan dan het strippen van sites tot het essentiële, en heeft een nieuwe stijl gevormd, bekend als vlak ontwerp. Dit hangt af van de overtuiging dat intuïtie niet langer nodig is in het ontwerp, omdat interfaces en hun gebruik zo'n belangrijk onderdeel van het leven zijn geworden dat design verder kan gaan dan dat gebruikers moeten vertellen wat ze moeten doen, een UI kan eindelijk een hulpmiddel zijn, in plaats van ook te verdubbelen als Een mentor. Een plat ontwerp wordt al heel lang gekenmerkt door het gebruik van opvallende blokkleuren, maar met de introductie van iOS7 hebben gradiënten hun plaats ingenomen in een wereld zonder wit vlakontwerp, waarbij elegantie wordt afgeleid van het opzichtige.
Ten slotte zal ik dit artikel beëindigen met een site die de dingen een beetje anders doet. Thibaud is een creatieve ontwikkelaar die een portfoliobouwer voor websites heeft ontworpen die bekend staat als Pikibox. De website is uiterst aanraakvriendelijk, maar zonder de toegankelijkheid voor desktopgebruikers te belemmeren, op kleinere touchscreen-apparaten, maar de gebruiker wordt doorgestuurd naar een gerichte omleiding met een mobiele interface.
Het eenvoudige ontwerp werkt wonderwel om zijn hele portfolio op professionele wijze te laten zien en tegelijkertijd een leuke, nieuwe look te behouden die uiterst intuïtief is. Natuurlijk is een groot deel van het ontwerp in handen van de gebruiker, in staat om de locatie van de navigatie te veranderen en aan te passen hoe het ruimtelijk wordt gebruikt, wat volgens sommigen niet bepaald een ontwerpkeuze is. De desktopversie bestaat in vier stijlen en ik nodig u uit om met hen te spelen en uw eigen conclusies te trekken over de vraag of dit gewoon besluiteloos of enorm creatief is.
Welke compromissen heb je bereikt als gevolg van touchscreens? Het de hover staat een ding van het verleden? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, raak afbeelding aan via Shutterstock.