Hvordan kjøre UX med AJAX
Med bruk av mobilt internett forstørrer desktopbasert nettlesing, er det viktigere enn noen gang at nettsteder bygges med vekt på hurtige sidelaster og væskereaksjoner på brukerinngang.
En viktig teknologi som vi bruker for å oppnå dette er AJAX, kort for "Asynkron JavaScript og XML." AJAX lar deg oppdatere deler av en enkelt nettside uten å kaste ut DOM (HTML-arkitekturen på siden) - eliminere behovet for hele siden laster og skaper en raskere respons på brukerinngang. Å bygge nettsteder på et 100% AJAX-rammeverk er en teknikk som viser nye muligheter til hva som er mulig i webutvikling.
Vi begynte å bygge nettsteder som 100% AJAX for nesten ti år siden, og har siden lært mye om hvordan vi effektivt bruker det slik at det forbedrer brukeropplevelsen. I denne artikkelen vil vi utforske noen av de spesifikke fordelene, og noen begrensninger, av denne teknikken.
Rask brukerrespons
Et nøkkelelement i en effektiv UX er et raskt svar på brukerinngang, men med en vanlig nettside, blir brukerne igjen ventet på samhandlinger som finner sted ettersom forespørsler er plassert over HTTP (eller HTTPS) til serveren, noe som resulterer i en komplett sidelast for hver forandring. Denne prosessen skjer med hvert museklikk for å be om en ny side, større bilde eller mer informasjon; DOM er helt kastet ut og lastet inn i nettleseren din - dette er ofte en sløsingsprosess når du laster inn sider på samme nettsted, siden de vanligvis har lignende innhold.
Kayaks søk er drevet av AJAX, og gir forslag så snart du begynner å skrive.
En stor fordel ved AJAX er dens jevn strøm av informasjon, uhindret av lasting og lossing av DOM, noe som resulterer i bedre kontroll over opplevelsen og en besøkendes oppmerksomhet. Med AJAX kan webapplikasjoner sende data til og fra serveren asynkront uten å forstyrre visning av eksisterende side.
Hovedforskjellen mellom en standard AJAX-implementering og et 100% AJAX-bygget nettsted er at i den sistnevnte er den grunnleggende DOM lastet på det opprinnelige besøket på nettstedet, vanligvis på hjemmesiden; alt annet som skjer er bare en manipulasjon av den primære belastningen.
Et fremtredende eksempel på fluiditeten som AJAX gir, er Google Maps. Når du zoomer inn, ut, navigerer gjennom en by i fugleperspektiv eller i gatevisning, blir informasjonen sømløst og kontinuerlig levert for umiddelbar bruk. Når du overfører mellom sider eller oppdaterer innhold i en webapp, tillater AJAX at brukerinngang blir svart på en kontekstmessig passende måte, for eksempel formutgang oppdatert i sanntid uten å laste siden på nytt, kontekstuelle animasjoner som overføres mellom sider eller når du laster inn en detalj utsikt.
Ved utforming av sider med mye innhold bruker vi AJAXs uendelige rullemønster, som ikke bare sparer nettbåndbredde ved bare å vise informasjonen som er relevant for UX, men reduserer også brukerfriksjonen. På vårt eget selskap nyhetsside for eksempel blir flere artikler lastet mens du ruller ned, eliminerer bruk av sider og i stedet laster inn mer informasjon på skjermen ettersom leseren krever det. Denne friksjonsløse prosessen med å laste og laste ut mer innhold på forespørsel gjør det mulig for våre besøkende å få akkurat så mye nyheter som de vil uten å presentere barrierer for deres hensikt.
Sømløs UX
Få kontroll over hvordan et nettsted laster innhold, skaper en unik mulighet til å designe sidetransisjoner, laste animasjoner og visuelle signaler som hjelper brukeren å forstå nettstedets hierarki. Dette er også en mulighet for kreativitet med selskapets merkevarebygging.
Et nettsted med et 100% AJAX-rammeverk (fordi det ikke er full sidebelastning) gir ikke tilbakemelding om fremdriftslastingen i nettleservinduet, noe som fører til potensiell forvirring hvis en besøkende blir igjen og venter på lengre tid uten svar. Dette er hvor tilpassede ladestatusindikatorer kommer inn i spill, noe som gir noen indikasjon på at fremdrift skjer under ventetiden.
Estes Park Medical Center i Colorado bruker en personlig AJAX loader for å opprettholde fargene og merket av organisasjonen, samt gi funksjonaliteten til et lastesymbol.
På Zillow Nettstedet, oppføringsinformasjon oppdateres kontinuerlig uten bruk av nettleserens oppdateringsknapp, og gir boligleierne tilgang til oppdatert informasjon til enhver tid.
Små tilføyelser som disse er interessante i å skape en minneverdig opplevelse for de besøkende, og blir gjort mulig ved bruk av AJAX.
Tar kontroll over URL-banen ved hjelp av HTML5-historien
Uten individuelle sidelaster defineres et nettsted ved å ha en enkelt nettadresse, noe som forårsaker problemer på dårlig bygget AJAX-nettsteder som brukere forsøker å bokmerke, eller navigerer ved hjelp av nettleserens frem- og bakover-knapper. I tillegg, fordi Googles søkemotor-robotsøkeprogramvare historisk ikke har lest JavaScript, har det vært bekymringer om hvor godt AJAX-drevne nettsteder kunne hentes i Googles organiske søkeresultater.
Begge disse forholdene løses ved å få kontroll over URL-banen ved hjelp av HTML5-historikk-API .
Hver side på et 100% AJAX-nettsted og dets alternative visninger betraktes som en egen forespørsel; Når du navigerer gjennom et AJAX-nettsted - selv om det er teknisk en enkelt sidebelastning - oppdateres nettadressen i nettleseren for å gi en unik adresse som representerer den nåværende visningstilstanden. I tillegg kan vi lytte til hendelsesendringer for historien for å støtte nettleserens tilbakeknapp og returnere forrige visningstilstand. Hver av disse unike nettadressene er fullt indeksert av Google, noe som betyr at denne tilnærmingen er fullt kompatibel og nyttig for SEO.
Amazons A9 Søketjenesten avhenger av AJAX for å hente betydelige datamengder uten å miste brukerens søkelogo.
For å konkludere
Som du kan se, er AJAX integrert i utviklingen av moderne webutvikling og supplanterer en rekke dårligere teknologier som ga en dårlig brukeropplevelse. Uten AJAX måtte alt sideinnhold være fullstendig lastet opp for nesten hver enkelt brukers interaksjon, selv om bare noen av informasjonen var endret. Denne hindrede hastigheten plasserte ekstra belastning på serveren og brukte overdreven båndbredde.
Ved å bygge på et 100% AJAX-rammeverk, kan vi lage nettsteder som er tilpasset kundenes behov, gi tilgjengelig navigasjon som kan bokmerkes av besøkende, og som fungerer på et mye høyere nivå.