Sådan kører UX med AJAX
Med anvendelse af mobilt internet forstærker desktopbaseret webbrowsing, er det vigtigere end nogensinde at hjemmesider skal bygges med vægt på hurtige sidebelastninger og væskereaktioner til brugerindgang.
En vigtig teknologi, vi bruger til at opnå dette, er AJAX, der er kort for "Asynkron JavaScript & XML." AJAX giver dig mulighed for at opdatere dele af en enkelt webside uden løbende at smide DOM'en (HTML-arkitekturen på siden) - eliminere behovet for hele siden indlæser og skaber et hurtigere svar på brugerens input. Opbygning af websteder på en 100% AJAX ramme er en teknik, der afslører nye muligheder for, hvad der er muligt i webudvikling.
Vi begyndte at bygge sites som 100% AJAX for næsten ti år siden og har siden lært meget om, hvordan vi effektivt bruger det, så det forbedrer brugeroplevelsen. I denne artikel vil vi undersøge nogle af de særlige fordele og begrænsninger af denne teknik.
Hurtigt brugerrespons
Et nøgleelement i en effektiv UX er et hurtigt svar på brugerindgangen, men med et standardwebsted forbliver brugerne venter på interaktioner at finde sted, da anmodninger placeres over HTTP (eller HTTPS) til serveren, hvilket resulterer i en komplet sidebelastning for hver forandring. Denne proces sker med hvert enkelt museklik for at anmode om en ny side, et større billede eller flere oplysninger; DOM'en er helt smidt ud og genindlæst i din browser - det er ofte en spildende proces, når du lægger sider på samme website, da de typisk har lignende indhold.
Kajaks søgning er drevet af AJAX og giver forslag, så snart du begynder at skrive.
En stor fordel ved AJAX er dens stødige strøm af information, uhindret ved indlæsning og losning af DOM, hvilket resulterer i bedre kontrol over oplevelsen og en besøgendes opmærksomhed. Med AJAX kan webapplikationer sende data til og fra serveren asynkront uden at forstyrre visning af den eksisterende side.
Nøgleforskellen mellem en standard AJAX-implementering og en 100% AJAX-bygget hjemmeside er, at i den sidstnævnte er den grundlæggende DOM indlæst på det oprindelige besøg på hjemmesiden, som regel på hjemmesiden; alt andet, der sker, er simpelthen en manipulation af den primære belastning.
Et fremtrædende eksempel på den flydende virkning, som AJAX giver, er Google Maps. Når du zoomer ind, ud, navigerer gennem en by i fugleperspektiv eller i gadevisning, bliver oplysningerne sømløst og kontinuerligt leveret til din umiddelbare brug. Når der overføres mellem sider eller opdatering af indhold i en webapp, tillader AJAX, at brugerindgang responderes på en kontekstmæssig passende måde, f.eks. Formudgang opdateret i realtid uden at genindlæse siden, kontekstuelle animationer, der overføres mellem sider eller ved indlæsning af en detalje udsigt.
Ved udformning af sider med stor mængde indhold anvender vi AJAX's uendelige rullemønster, som ikke kun sparer browserbåndbredde ved kun at vise de oplysninger, der er umiddelbart relevante for UX, men også reducerer brugerfriktion. På vores eget firma nyheds side for eksempel flere artikler indlæses, mens du ruller ned, eliminerer brugen af sider og i stedet lægger flere oplysninger på skærmen, som læseren kræver det. Denne friktionsløse proces med at indlæse og losse mere efterspørgselsbehov gør det muligt for vores besøgende at få lige så mange nyheder, som de vil, uden at præsentere hindringer for deres hensigt.
Problemfri UX
Få kontrol over, hvordan et websted lægger indhold, skaber en enestående mulighed for at designe sidetransitioner, indlæse animationer og visuelle signaler, der hjælper brugeren med at forstå webstedets hierarki. Dette er også en mulighed for kreativitet med virksomhedens branding.
Et websted med en 100% AJAX-ramme (fordi der ikke er fuld sidebelastning) giver ikke feedback om dens fremskridtsindlæsning i browservinduet, hvilket fører til potentiel forvirring, hvis en besøgende bliver venter på en længere periode uden svar. Det er her, hvor brugerdefinerede indlæsningsstatusindikatorer kommer i spil, hvilket giver en vis indikation af, at der sker fremskridt i løbet af ventetiden.
Estes Park Medical Center i Colorado bruger en personlig AJAX loader at opretholde farve og mærke af deres organisation samt give funktionalitet af et indlæsningssymbol.
På den Zillow hjemmeside, opførelsesoplysninger opdateres løbende uden brug af browserens opdateringsknap, hvilket giver hjemmehyrere adgang til opdateret information til enhver tid.
Små tilføjelser som disse er interessante i at skabe en mindeværdig oplevelse for dine besøgende og gøres mulige ved brug af AJAX.
Tager kontrol over URL-stien ved hjælp af HTML5-historie
Uden individuelle sidebelastninger defineres et websted ved at have en enkelt webadresse, hvilket forårsager problemer på dårligt bygget AJAX-websteder, når brugerne forsøger at bogmærke eller navigerer ved hjælp af deres browsers frem og tilbage knapper. Da Google's søgemaskinecykler historisk ikke læste JavaScript, har der desuden været bekymringer om, hvor godt AJAX-drevne websteder kunne hentes i Googles organiske søgeresultater.
Begge disse betingelser løses ved at få kontrol over URL-stien ved hjælp af HTML5 historie API .
Hver side af et 100% AJAX-websted og dets alternative synspunkter betragtes som deres egen anmodning; som du navigerer gennem et AJAX-websted - selv om det er teknisk en enkelt sideindlæsning - opdateres URL'en i browseren for at give en unik adresse, der repræsenterer den aktuelle visningstilstand. Derudover kan vi lytte til historikændringsbegivenheder for at understøtte browserens tilbageknap og returnere den tidligere visningstilstand. Hver af disse unikke webadresser er fuldt indekseret af Google, hvilket betyder, at denne tilgang er fuldt kompatibel og nyttig til SEO.
Amazons A9 Søgetjenesten afhænger af AJAX for at hente betydelige datamængder uden at miste brugerens søgehistorik.
Afslutningsvis
Som du kan se, er AJAX integreret i udviklingen af moderne webudvikling og supplerer en række ringere teknologier, der har givet en dårlig brugeroplevelse. Uden AJAX måtte alt indhold på siden genindlæses for næsten hver enkelt brugers interaktion, selvom kun nogle af oplysningerne var ændret. Denne forhindrede hastighed lagde ekstra belastning på serveren og brugte overdreven båndbredde.
Ved at bygge på en 100% AJAX ramme kan vi oprette websteder, der er tilpasset kundernes behov, give tilgængelig navigation, der kan bogmærkes af besøgende, og som fungerer på et meget højere niveau.