Verf de afbeelding, niet het frame: hoe browsers bieden alles wat gebruikers nodig hebben

Verf de afbeelding, niet het frame: hoe browsers bieden alles wat gebruikers nodig hebben

februari 8, 2019 0 Door admin

CBD Olie kan helpen bij ADHD. Lees hoe op MHBioShop.com


Huile de CBD peut aider avec TDAH. Visite HuileCBD.be


Kip Williams, professor in de psychologische wetenschappen aan de Purdue University, voerde een fascinerend experiment genaamd ‘cyberbal’ uit. In zijn experiment speelden een proefpersoon en twee andere deelnemers een computergame van de vangst. Op een vooraf bepaalde tijd werd de proefpersoon uitgesloten van het spel, waardoor ze gedwongen werden alleen te observeren terwijl de klok liep.

Vanuit het cyberbal-spel spelen drie geschetste figuren catch. Speler 1 is mid-throw voor speler 3.

Artikel gaat hieronder verder

De ervaring toonde toenames in zelfgerapporteerde niveaus van woede en verdriet, evenals een verlaging van de niveaus van de vier behoeften . De digitale versie van het experiment creëerde resultaten die overeenkwamen met de resultaten van de oorspronkelijke fysieke , wat betekent dat deze gevoelens plaatsvonden ongeacht de context.

Nadat de wedstrijd was afgerond, kreeg de proefpersoon te horen dat de andere deelnemers robots waren, en niet andere menselijke deelnemers. Interessant is dat de onthulling van geautomatiseerde concurrenten de negatieve gemelde gevoelens niet heeft verminderd. In feite verhoogde het gevoelens van woede, terwijl ook het gevoel van wilskracht en / of zelfregulatie van de deelnemers afnam.

Met andere woorden: mensen die het gevoel hebben dat ze worden afgewezen door een digitaal systeem, zullen zich gekwetst voelen en hun gevoel van autonomie verminderd zien, zelfs als ze geloven dat er niet een ander mens direct verantwoordelijk is.

Wat heeft dit met browsers te maken?

Elke aanpassing aan het uiterlijk en het gedrag van de functies die browsers je laten manipuleren is een worp van de dobbelsteen, gokend op de vreugde van sommigen ten koste van het vervreemden van anderen.

Wanneer u een browser gebruikt om op het web te navigeren, is er veel gelijkheid , totdat dit niet het geval is. Meestal hoppen we van pagina naar pagina en van site naar site, door op links te klikken, op knoppen te drukken, video’s te bekijken, formulieren in te vullen, berichten te schrijven, enzovoort. Maar zo nu en dan stuiten we op iets nieuws en roman die ons doet pauzeren om erachter te komen wat er aan de hand is.

Elke website en web-app is zijn eigen, op zichzelf staande ervaring, met zijn eigen ideeën over hoe de dingen eruit moeten zien en zich moeten gedragen. Sommigen staan ​​dichter bij anderen, maar een ieder moet leren hoe de interface tot op zekere hoogte moet worden bediend.

Sommige browsers kunnen ook delen van hun functionaliteit en uiterlijk wijzigen, wat betekent dat er, net als bij websites, onverwachte verschillen kunnen zijn. We zullen een deel van de nuance achter sommige van deze functies uitpakken, en wat nog belangrijker is, waarom de meeste van hen beter af zijn met rust gelaten.

Scroll naar boven

In alle grote desktopbrowsers kunt u op de Home- toets op het toetsenbord drukken om naar de bovenkant van de pagina te gaan. Sommige scrollbar-implementaties stellen u in staat bovenaan in het schuifbalkgebied te klikken om hetzelfde te doen. In sommige browsers kunt u ook Command Up (macOS) / Ctrl Up (Windows) typen. Mensen die ondersteunende technologie gebruiken, zoals schermlezers, kunnen dingen zoals banneroriëntatiepunten gebruiken om op dezelfde manier te navigeren (op voorwaarde dat ze correct zijn gedeclareerd in de HTML van de site).

Niet elk apparaat heeft echter een gemakkelijk vindbare manier om deze functionaliteit aan te roepen: veel laptops hebben geen Home- toets op hun toetsenbord. De tik-de-klok-naar-sprong-naar-de-top functionaliteit op iOS is moeilijk te ontdekken en kan verrassend en frustrerend zijn als deze per ongeluk wordt geactiveerd. U hebt gespecialiseerde browserextensies nodig om oriëntatie-navigatietechnieken voor schermlezers opnieuw te maken.

Een veelgebruikte UI-oplossing voor langere pagina’s is de schuifknop naar boven. Het is vaak opgelost in de rechterbenedenhoek van het scherm. Als u dit besturingselement inschakelt, gaat de gebruiker naar de bovenkant van de pagina, ongeacht hoe ver ze zijn gescrold.

Als uw site een grote hoeveelheid inhoud per pagina bevat, is het wellicht de moeite waard om dit UI-patroon te onderzoeken. Probeer te kijken naar analyses en / of gebruikerstests om te zien waar en hoe vaak deze functie wordt gebruikt. Het nadeel is dat als het te vaak wordt gebruikt, het de moeite waard is om een ​​lange, harde blik te werpen op uw informatiearchitectuur en inhoudsstrategie.

Drie dingen die ik leuk vind aan het scroll-to-top-patroon zijn:

  • De functionaliteit ervan is vrij duidelijk (vooral als deze correct is gelabeld).
  • Mits goed ontworpen, kan het een fatsoenlijk formaat aanraakdoel bieden in een duimvriendelijk gebied . Voor motorbesturingsoverwegingen kan het aanraakdoel groter zijn dan smalle schuif- of statusbalken, waardoor frustrerend kleine doelen kunnen raken.
  • Het wijzigt of verwijdert geen bestaand schuifgedrag, maar vergroot het in plaats daarvan. Als iemand gewend is aan één manier om naar boven te scrollen, dan dwing je het niet af of onderbreek je het.

Als je dit soort functionaliteit implementeert, heb ik vier verzoeken om de ervaring voor iedereen te laten werken (ik vind de Smooth Scroll- bibliotheek een nuttige startplaats):

  • Aanvaard verzoeken om verminderde beweging . Het dramatische scroleffect van zweepslagen van de onderkant van de pagina naar de top kan een vestibulaire trigger zijn , een situatie waarbij het systeem dat het fysieke gevoel en de oriëntatie van je lichaam in de wereld regelt, wordt verstoord, waardoor dingen als hoofdpijn, misselijkheid, duizeligheid , migraine en gehoorverlies.
  • Zorg ervoor dat de toetsenbordfocus naar de bovenkant van het document wordt verplaatst, in overeenstemming met wat visueel gebeurt. Door deze praktijk toe te passen, verbeteren alle gebruikerservaringen. Anders zou het raken van de Tab na het scrollen naar de bovenkant de gebruiker naar het eerste interactieve element sturen dat volgt waar de focus was geweest voordat ze de schuifknop activeerden.
  • Zorg ervoor dat de knop andere inhoud niet onbruikbaar maakt door deze te verdoezelen. Zorg ervoor dat u rekening houdt met wanneer de browser is ingezoomd en niet alleen in de standaardstatus.
  • Houd rekening met andere elementen met een vaste positie. Ik heb mijn deel van de websites gezien die ook een chatbot of een zwevende actieknop hebben om in dezelfde ruimte te concurreren.
Een rood chatpictogram overlapt met een hoek van het pictogram Scroll to top, waardoor een deel van de pijl wordt verduisterd.

scrollbars

Als je oud genoeg bent om te onthouden, werd het ooit als modieus beschouwd om de schuifbalken van je website te stijlen. Internet Explorer stond deze aanpassing toe via een reeks leverancierspecifieke eigenschappen . In het beste geval zagen ze er fantastisch uit! Als de ontwerper en ontwikkelaar zowel vaardig als gedetailleerd waren, zou je iets krijgen dat leek op een natuurlijke uitbreiding van de rest van de website.

De inzet voor een kwaliteitsontwerp was echter behoorlijk hoog: schuifbalken maken deel uit van de interface van een applicatie, niet van een website. Bij inclusief ontwerp maakt het deel uit van wat we externe consistentie noemen. Externe consistentie is het idee dat de functionaliteit van een object wordt geïnformeerd en versterkt door vergelijkbare implementaties elders. Daarom kun je in de meeste huizen een muurschakelaar omdraaien en weet je zeker dat de lichten gaan branden in plaats van het toilet door te spoelen.

Hoewel schuifbalken enkele kleine visuele verschillen tussen besturingssystemen (en besturingssystemen ) hebben, zijn ze consistent extern in functie. Scrollbalken zijn ook intern consistent, in dat elk venster en elk programma op het besturingssysteem dat scrollen vereist dezelfde scrollbar-behandeling heeft.

Als u de schuifbalkkleuren van uw website aanpast aan minder technologisch geletterden, is een ander aspect van de interface zonder waarschuwing of instructie veranderd over hoe u het terug kunt veranderen. Als de gebruiker al in de war is over hoe dingen op het scherm werken, is het voor hen minder vertrouwd om zo stabiel en betrouwbaar mogelijk te blijven.

Je zou je ogen kunnen rollen om dit te lezen, maar ik zou je willen vragen om dit ongelooflijke artikel van Jennifer Morrow te bekijken. Daarin beschrijft ze het uitvoeren van een guerrillagebruikerstest in een winkelcentrum, alleen om de sessie volledig te laten ontsporen wanneer ze iemand ontdekt die nog nooit een computer heeft gebruikt.

Wat ze ontdekt is net zo belangrijk als schokkend. De kern hiervan is dat sommige mensen (zelfs degenen die al eerder een computer hebben gebruikt) de nuance niet begrijpen van de verschillende “lagen” waar je doorheen navigeert om een ​​computer te bedienen: de hardware, het besturingssysteem, de browser geïnstalleerd op het besturingssysteem , de website die de browser weergeeft, de modaliteiten van de website en onthullingen, enz. Voor hen is de ervaring plat.

We moeten niet verwachten dat deze gebruikers met dit soort cognitieve overhead omgaan. Dit soort abstracties zijn gemaakt om analoog te zijn aan echte objecten , met name zodat mensen kunnen krijgen wat ze willen van een digitaal systeem zonder programmeurs te hoeven zijn. Het toevoegen van onnodige complexiteit verzwakt deze metaforen en geeft gebruikers een minder referentiepunt om op te vertrouwen.

Denk aan het cyberbal-experiment. Wanneer een gebruiker zich al in een benarde emotionele toestand bevindt, is onze slecht ontworpen aangepaste schuifbalk misschien wel het moment van de ene op de andere dag, waarin hij opgeeft om te proberen te krijgen wat hij wil en het systeem volledig te verwerpen.

Terwijl Morrow’s artikel in 2011 werd geschreven, is het net zo relevant als het toen was. Steeds meer mensen maken wereldwijd gebruik van internet en steeds meer diensten die een wezenlijk onderdeel zijn van het dagelijks leven, worden gedigitaliseerd. Het is aan ons als verantwoordelijke ontwerpers en ontwikkelaars om er zeker van te zijn dat iedereen, ongeacht apparaat, omstandigheid of vaardigheid zich welkom voelt.

Naast het onnodig opgeven van externe consistentie, is er de kwestie van een aangepaste schuifbalkstijl die mogelijk niet voldoende kleurcontrast heeft . De te lichte kleuren kunnen een situatie creëren waarin een persoon die slechtziende omstandigheden ervaart, het scrolmechanisme van een website niet kan waarnemen en daarom niet kan bedienen.

Dit artikel zal niet eens beginnen met het uitpakken van de problemen die gepaard gaan met aangepaste implementaties van schuifbalken, waarbij in plaats van de native schuifbalken van het besturingssysteem te combineren met CSS, één in plaats daarvan deze vervangt door een JavaScript-oplossing. Vertrouw me als ik zeg dat ik er nog een heb geïmplementeerd op een manier die met succes en betrouwbaar alle functies en functionaliteit opnieuw kan creëren op alle apparaten , besturingssystemen, browsers en browsemodi .

Naar mijn mening? Wijzig de standaardweergave van de schuifbalken van een besturingssysteem niet. Gebruik die tijd om in plaats daarvan aan iets anders te werken, bijvoorbeeld het controleren op en herstellen van problemen met kleurcontrast.

scrollen

De belangrijkste zorg over het wijzigen van het scrolgedrag is er een van toestemming: het neemt een extern consistent, systeembreed gedrag aan en verandert het plotseling zonder toestemming. De term scrolljacking is bedacht om deze praktijk te beschrijven. Het moet niet worden verward met scrollytelling , een meer attente behandeling van scrolgedrag dat de scroll-instellingen van het besturingssysteem eer aandoet .

Het wijzigen van het scrolgedrag op uw website of web-app kan in strijd zijn met iemands specifieke, uitgesproken voorkeuren. Voor sommige mensen is het gewoon een ergernis. Voor mensen met bezorgdheid over motorsturing kan het verplaatsen door een site moeilijk worden. In sommige extreme gevallen kan de onaangekondigde discrepantie tussen de mate van scrollen en de afgelegde afstand ook vestibulaire triggers zijn. Een andere overweging is als je gewijzigde scrolgedrag per ongeluk mensen vergrendelt die geen muis gebruiken, aanraken of trackpads om te scrollen.

Al met al denk ik dat Robin Rendle het het beste zei :

Scrolljacking, zoals ik het nu zowel sarcastisch als eerlijk zal noemen, is een mislukking van het eerste doel van de webontwerper; het valt een gestandaardiseerd patroon aan en neemt gulzig de controle over de invoer van de gebruiker.

De markering

Een andere OS-functie die we in de browser mogen stijlen, is gemarkeerde tekst. Net zoals schuifbalken is dit een interface-element dat wordt gedeeld door alle apps op het besturingssysteem, niet alleen de browser.

Het doorbreken van de externe consistentie van de opvallende kleur van het besturingssysteem heeft veel van dezelfde zorgen als gestileerde schuifbalken, namelijk het aanpassen van het verwachte gedrag van iets dat overal betrouwbaar functioneert. Het is mogelijk desoriënterend en vervreemdend en kan iemands uitdrukkelijke voorkeuren ontkennen.

Sommige mensen markeren tekst terwijl ze lezen. Als uw aangepaste markeringsstijl een lage contrastverhouding heeft tussen de gemarkeerde tekstkleur en de achtergrondkleur van de gemarkeerde tekst, kan de persoon die uw website of web-app leest, de tekst die zij markeren mogelijk niet waarnemen. Het effect zorgt ervoor dat de tekst schijnbaar verdwijnt tijdens het lezen.

Andere mensen geven misschien niet om uw esthetische gevoeligheden. Met zowel macOS als Windows kunt u een aangepaste markeerkleur opgeven. In een scenario waarin iemand opzettelijk een andere voorkeur heeft ingesteld dan de systeemstandaard, kan een gestileerde markeerkleur de opgegeven specificaties overschrijven.

Voor mij wegen de potentiële risico’s ruimschoots op tegen de ijdelheid van een op maat gemaakte highlight-stijl, beter om gewoon te laten.

Tekst formaat wijzigen

Veel mensen veranderen de tekstgrootte om aan hun behoeften te voldoen. En dat is een goede zaak. We willen dat mensen onze inhoud kunnen lezen en ernaar kunnen handelen, ongeacht de omstandigheden die ze ervaren.

Voor het probleem van te kleine tekst schakelen sommige ontwerpers widgets naar tekstaanpassing aan, een aangepast UI-patroon waarmee een persoon een aantal vooraf ingestelde CSS- font-size kan doorlopen. Meestal te vinden op plaatsen met zware tekstinhoud, worden widgets voor het wijzigen van tekst vaak gecombineerd met complexe ontwerpen met meerdere kolommen. Nieuwssites zijn een bekend voorbeeld.

Voordat ik inga op mijn bezwaren met widgets die de grootte van tekst wijzigen, wil ik vragen: als u vindt dat uw site een gespecialiseerde widget nodig heeft om uw tekstgrootte te beheren, waarom zou u dan niet gewoon de eenvoudigere route nemen en uw basistekst vergroten ?

Net als veel toegankelijkheidsproblemen , hoeft een aanvraag voor een grotere lettergrootte niet noodzakelijkerwijs een indicatie te zijn van een permanente invaliditeitstoestand . Het is vaak indirect, zoals een situatie waarin u een website op de waardeloze projector van uw kantoor laat zien.

Met browsers kunnen gebruikers hun standaard lettertypegrootte aanpassen en de tekst op verschillende websites aanpassen. Browsers blinken uit in het hanteren van deze instelling wanneer u CSS schrijft die gebruikmaakt van unitless regelhoogte line-height waarden en eenheden met relatieve font-size .

Sommige ontwerpers kunnen vinden dat het verlenen van deze vrijheid aan gebruikers op de een of andere manier afbreuk doet aan hun beoogde merk. Goede ontwerpers begrijpen dat branding belangrijker is dan hoe iets eruitziet. Het gaat om het implementeren van het eerste ontwerp in de browser en vervolgens werken met de mogelijkheden van de browser om de persoon die het gebruikt het beste te dienen. Zelfs als dingen zoals de lettergrootte worden aangepast, zal een sterk merk nog steeds schijnen door het gemak van uw gebruikersstromen, de kwaliteit van uw typografie en palet, de kracht van uw copywriting, enz.

Helaas hebben aangepaste widgets voor het verkleinen van browsertekst geen universele aanpak. Als u vertrouwt op browsertekstinstellingen, werkt deze gewoon, consistent, met dezelfde besturingselementen, gebaren en sneltoetsen op het toetsenbord, voor elke pagina op elke website, zelfs in minder dan ideale omstandigheden . U hoeft geen extra code te schrijven en bij te houden, te testen voor regressies of een exemplaar te schrijven waarin de gebruiker wordt geïnstrueerd over waar u de widget voor het wijzigen van de tekst van uw site kunt vinden en hoe u deze kunt gebruiken.

Gedrags consistentie is ongelooflijk belangrijk. Het resizen van tekst in de browser wordt proportioneel toegepast op alle tekst op de pagina telkens wanneer de instelling wordt gewijzigd. Deze instellingen worden ook bewaard voor de volgende keer dat u bezoekt. Niet elke aangepaste widget voor het aanpassen van de tekstwijziging doet dit, en evenmin wordt de grootte van alle inhoud gewijzigd in de mate die wordt bepaald door de Web Content Accessibility Guidelines .

Hoog contrast thema’s

Wanneer ik thema’s met een hoog contrast zeg, spreek ik niet over dingen als een donkere modus . Ik heb het over een reactie op mensen die melden dat ze de kleuren van uw website of webapp moeten wijzigen om visueel beter toegankelijk te zijn voor hen.

Net als regels voor het wijzigen van de grootte van de tekst, zijn thema’s die zijn ontworpen om kleuren met een hoger contrast te bieden, verwarrend: als u er de tijd voor neemt om er een te maken, kunt u de ontoereikende contrastwaarden in uw gewone CSS gewoon repareren? Het effectief beheren van thema’s in CSS is een gecompliceerde, hulpbron-intensieve aangelegenheid, zelfs onder ideale omstandigheden.

De meeste site-voorziene thema’s met hoog contrast zijn statisch doordat de ontwerper of ontwikkelaar beslissingen heeft genomen over welke kleurwaarden hij moet gebruiken, wat een probleem kan zijn. Van teveel contrast is bekend dat het een trigger is voor zaken als migraine, en het kan mogelijk ook moeilijk worden gemaakt om zich te richten op gebruikers met bepaalde vormen van ADHD (Attention-Deficit Hyperactivity Disorder).

Het contrast raadsel leidt ons naar een moeilijk ding om in het reine komen met als het gaat om de toegankelijkheid: wat werkt voor de ene persoon kan eigenlijk een andere belemmeren. Daarom is het belangrijk om dingen open en interoperabel te maken. Laat de uiteindelijke controle over aan de eindgebruiker, zodat ze kunnen beslissen hoe ze het best kunnen omgaan met inhoud.

Als je dit soort functies wilt blijven volgen, is dit een goed idee: modelleer het na de Windows High Contrast-modus . Het is een gespecialiseerde Windows-functie waarmee een persoon een hoog kleurenpalet op alle aspecten van de gebruikersinterface van het besturingssysteem kan forceren, inclusief alles wat de browser weergeeft. Het biedt vier thema’s uit de doos, maar stelt een gebruiker ook in staat om aan zijn individuele behoeften te voldoen door zijn eigen kleuren te specificeren.

Uw functie voor hoog contrastmodus zou hetzelfde moeten doen. Bied een reeks thema’s met verschillende paletten aan en laat de gebruiker kleuren kiezen die voor hen het beste werken – het garandeert dat als uw aanbiedingen mislukken, mensen nog steeds de mogelijkheid hebben om zelf te selecteren.

Focus verplaatsen

Toetsenbordfocus is hoe mensen die afhankelijk zijn van input zoals toetsenborden, schakelaarbedieningen, spraakinvoer, eye-tracking en andere vormen van ondersteunende technologie navigeren en digitale interfaces bedienen. Hoewel u dingen kunt doen zoals het gebruik van het autofocus om de toetsenbordfocus naar de eerste invoer op een pagina te verplaatsen nadat deze is geladen, wordt dit niet aanbevolen.

Voor mensen die weinig of geen gezichtsvermogen hebben, komt dit overeen met het abrupt zijn en onmiddellijk worden verplaatst naar een nieuwe locatie. Het is een verwarrende en desoriënterende ervaring – er is een reden waarom er scènes zijn in scifi-films van mensen die overgeven nadat ze voor de eerste keer zijn geteleporteerd.

Voor mensen met bezorgdheid over de motorische besturing betekent het verplaatsen van de focus zonder hun toestemming dat ze kunnen worden getransporteerd naar een plek waar ze niet van plan waren om te gaan. Zichzelf uit deze locatie graven wordt op zijn best vervelend en in het slechtste geval inspanningintensief. Websites zonder titelelementen of documentoriëntatiepunten die als navigatiehulp dienen, kunnen dit effect verergeren.

Dit gaat allemaal over toestemming. De focus verplaatsen is prima, zolang een persoon opzettelijk een actie initieert die dit vereist (bijvoorbeeld de focus verschuiven naar een geopend modaal ). Ik kom niet naar je huis en dwing je om op dingen te klikken, dus verplaats mijn toetsenbordfocus alleen als ik je dat specifiek vraag.

Laat de browser toetsenbordfocus hanteren. Op voorwaarde dat u semantische opmaak gebruikt, doen browsers dit goed. Een aantal tips:

Het klembord en de browsergeschiedenis

Het klembord is heilige ruimte. Voorkom dat mensen dingen kopiëren en voeg geen extra inhoud toe aan wat ze kopiëren. Hetzelfde geldt voor de browsergeschiedenis en de knoppen Vorige en Volgende. Niet rotzooien met tijdreizen, en laat de browser zijn werk doen.

Afsluiten

In het gamegedeelte van cyberbal komt het plezier uit het kunnen deelnemen met anderen, het bal heen en weer laten gaan. Met het web komt plezier doordat je er doorheen kunt navigeren. In beide situaties stopt het plezier wanneer mensen worden buitengesloten, gedwongen om passief vanaf de zijlijn te kijken.

Gelukkig hoeft het web geen lang cyberbal-experiment te zijn. Hoewel het aanpassen van de krachtige, hulptechnologievriendelijke functies van browsers de ervaring voor sommige gebruikers kan verbeteren, loopt het een groot risico om anderen te vervreemden als er wijzigingen worden aangebracht met onwetendheid over hoeveel het precies zal worden beïnvloed.

Vergeet niet dat dit allemaal in dienst staat van wat er uiteindelijk toe doet: het creëren van robuuste ervaringen waarmee mensen met succes uw website of web-app kunnen gebruiken, ongeacht hun mogelijkheden of omstandig heden. Soms is de beste strategie om dingen te laten zijn.


CBD Olie kan helpen bij ADHD. Lees hoe op MHBioShop.com


Huile de CBD peut aider avec TDAH. Visite HuileCBD.be


Lees meer