Side Overganger for Alle

0
15

Som Sarah nevnt i hennes forrige innlegg om side overgang ved hjelp av Vue.js det er nok av motivasjon for designere og utviklere å bygge side overganger. La oss vurdere mobile applikasjoner. Mens mobile applikasjoner utvikler seg, mer og mer oppmerksomhet er gitt til animasjon erfaring, mens nettet ganske mye forblir den samme. Hvorfor er det slik?

Kanskje det er fordi native app utviklere bruke mer tid på de animasjoner. Kanskje det er fordi brukerne sier det er hva de ønsker. Kanskje det er fordi de vet mer om miljøet i appen kommer til å kjøre. Alle som bidrar til å forbedre opplevelsen over tid. Totalt sett ser det ut som mobile app utviklere eller annen måte ser ut til å vite eller bryr seg mer om brukeropplevelse.

Hvis vi tar en titt på hvordan mobile apps er utformet i dag, det er veldig ofte en slags animert overgang mellom stater. Selv klar-til-bruk-native komponenter har noen slags enkel animasjon mellom stater. Utviklere og designere innså at dette liten animasjon hjelper en bruker forstå hva som skjer i appen. Det gjør navigering gjennom appen enklere og forteller brukeren hvor de kommer i appen.

For eksempel, når du navigerer til en underkategori, er det som regel glir inn fra høyre side av skjermen, og vi har alle en eller annen måte vet hva det betyr.

Animasjon saker. Det kan brukes for å forbedre brukeropplevelsen.

Når du utvikler et nettsted, er det lett å bruke timer på å sørge for at brukeren ser hele historien ved hjelp av top-notch overganger, som bevegelsen mellom galleri bilder eller fancy hold effekter…men når en bruker klikker på en kobling, alle som opplever faller fra hverandre og du starter fra begynnelsen. Det er fordi siden lastes inn på nytt og vi har ikke en enkel/åpenbare/native måte å håndtere animasjoner/overganger i den situasjonen.

På nettet, de fleste av den innsats som er brukt for å forbedre opplevelsen er i strukturen, visuell design, eller enda resultatene av området. Det er noen elementer du kan sveipe rundt her og der, men det er om det. En kjedelig resten av tiden da internett var rett og slett brukes til å navigere gjennom en haug med tekst sidene senere oppgradert med noen skyve tekst.

Ja, vi har faktisk pleide å gjøre dette.

Det er noen veldig lyst på nettsteder som er fylt med animasjon eller utrolig WebGL hieroglyfer i bakgrunnen. Dessverre, de er ofte vanskelig å navigere og din laptop-batteri er utladet i ca 15 minutter. Men de er sikkert fine å se på. Disse nettstedene er full animasjon, men det meste er brukt til å imponere deg, og ikke for å hjelpe deg med å navigere, eller gjøre opplevelsen raskere, eller gjøre ting mer tilgjengelig for deg å bla gjennom nettstedet.

Kilden til Problemet

Alt dette reiser et stort spørsmål. Vi har alt av teknologi for å gjøre dette side overganger ting på nettet. Hvorfor kan ikke vi gjøre det? Er det fordi vi ikke vil? Er det fordi vi ikke tror at det er en del av jobben vår? Er det så vanskelig at vi måtte lade dobbelt for prosjekter og kunder ikke å kjøpe det?

La oss ta en titt på en annen mulig årsak. Ofte, et selskap velger teknologier som er felles for alle sine prosjekter. Du, som en front-ender, er ikke mye kontroll over hva som er gjennomført på serveren, så kanskje du kan ikke stole på noen server-side gjengivelse av dine JSX.

Kanskje du har å velge noe stabilt og er generelt brukbare for alle slags løsning (noe som vanligvis betyr mindre codebase, mer fleksible), så sitter man på en måte tvunget til å unngå noen rammeverk i utviklingen din stack. Dessverre, det er fornuftig. Du ønsker ikke å gjennomføre en kontakt-skjemaet i 10 forskjellige rammer bare fordi du har bestemt deg for at noen framework er et godt utgangspunkt for dette prosjektet. Og ikke få meg i gang på sikkerhet, som har vært i ferd med å bli forbedret gjennom årene. Du kan ikke bare kaste den bort fordi du vil at brukeren skal ha litt mer moro leser nettstedet ditt.

Det er en annen mulig årsak. Kanskje du ønsker å bygge på WordPress fordi du ønsker å dra nytte av alle de åpne kilde godbiter mennesker som er beredt for dere i løpet av årene. Vil du bytte alle av det “gratis” – funksjonalitet for en bedre opplevelse? Sannsynligvis ikke…

Målet

Bortsett fra store og urealistiske endringer som for eksempel å bli kvitt alle bilder og videoer, vår hjemmeside legg i tid fra serveren bare er hva det er. Vi har en server gjengitt side, og bortsett fra en raskere server eller bedre caching, er det ikke mye å gjøre for å forbedre det.

Så måten å forbedre innlastingstiden er å jukse litt! Jukse ved å gjøre brukeren tror det tar mindre tid, fordi de blir distrahert av det som skjer på skjermen. Jukse ved å laste innholdet på forhånd, og blir overgangen.

La oss introdusere noen effekter som kan brukes til å gjøre overgangen. Selv enkle fade in/fade out kan gi deg en helt annen følelse, spesielt med noen element som indikerer lasting. La oss se på noen eksempler.

Merk: Alle følgende eksempler er nettsteder bygge på PHP og ganske mye arbeid uten JavaScript som alle andre nettsted ville.

Kilde: rsts.cz/25let (offentlig produksjon nettstedet)

En enkel fade ut/fade sømløst forbedrer opplevelsen brukeren har før du klikker på koblingen, og ikke opptre som forstyrrende som en vanlig nettleser, laste ville. Lasting indikasjon på et meny-ikon sikrer en bruker ikke panikk i tilfelle siden tar litt lenger tid å laste.

Noen interessante animasjon kan oppnås ved å animere forskjellige elementene på ulike måter, som kan også være kombinert med fading.

Kilde: mcepharma.com (offentlig produksjon nettstedet)

Eller hva med å dekke opp en side med noen andre element?

Kilde: delejcotebavi.decathlon.cz (offentlig produksjon nettstedet)

De få timers arbeid gi nettstedet helt ny følelse ved å snu statisk side til en animert. Og det er uten noen ekstra forberedelser.

Imidlertid, i tilfelle du allerede er klar over din intensjon i design fasen, kan du justere design til ditt behov. Vanlige elementer kan være forberedt i forkant av tid.

Kilde: vyrostlijsme.cz/zaciname (selskapet interne system)

Den viktigste navigasjon element introdusert i form av bobler spiller med brukeren, mens innholdet av de neste side er lastet. Virkningen er at brukeren er ikke lei, og vet at noe skjer. Som animasjonen starter på den klikker på koblingen, kan brukeren ikke selv innser at han er blitt ventet på noe.

Løsning

Vi har sortert ut hva vi faktisk ønsker å gjøre, og hvorfor ønsker vi å gjøre det… la oss se hvordan vi kan oppnå dette.

Mens det er ikke så mye å gjøre på back-end for dette, er det en hel haug av ting du kan gjøre på nettleseren side. Et godt eksempel er Turbolinks, utviklet av Basecamp folk, som tar ditt nettsted og gjør det mer app-følelsen ved å aktivere innhold lasting med JavaScript. Det rett og slett unngår at stygge nettleser side-til-side omlasting hoppe. Turbolinks avtaler med nettleser historie, lasting, og alt det andre ting som normalt ville skje under panseret av nettleseren. Det viktigste her er å ta kontroll over lasting og skifte ut innhold fordi så lenge det ikke nettleseren laste inn på nytt, alt som skjer på skjermen er i vår kontroll.

La oss tenke på noen begreper vi kan bruke til å forbedre vår erfaring. Legg i tid er vår største fiende, så hvordan kan vi forbedre det i nettleseren?

Preload

I de fleste tilfeller, kan den be om for å laste neste side trenger ikke å starte bare når en bruker klikker på linken. Det er en annen hendelse skjer som kan indikere brukere intensjon om å besøke siden, og det er en holde musepekeren over linken. Det er alltid noen hundre millisekunder mellom hold og klikk på lenken, hvorfor ikke bruke den tiden til vår fordel? Pokker, hvis flertallet av brukerne ender opp på neste side som er kjent for deg, og du har statistikken for å bevise det, hvorfor ikke engang preload den til enhver tid etter den første gjengi, mens brukeren prøver å komme rundt den aktuelle siden?

Følgende diagram illustrerer hvor mange ting som kan skje i parallell og spare oss noen av disse dyrebare tid, i stedet for å være gjort en etter en. En veldig vanlig feil sett i tilpassede løsninger for siden overgangen som mennesker gjør for seg selv er starten på forespørsel, som er vanligvis utløst etter at siden er losset/skjult.

Mulig overgangsprosessen

Hurtigbufring

Mens dette kan være et problem for noen dynamiske nettsteder, statiske nettsteder er perfekte kandidater for mellomlagring. Hvorfor ville du vil laste inn en side to ganger, når du er i kontroll av lasting og skifte innhold? Du kan lagre innholdet og bruke det i tilfelle brukeren går til samme side eller tilbake til det med leseren tilbake-knappen.

Eller, du kan bruke cache for å preload sider på hover og tømme hurtigbufferen regelmessig (kanskje etter hvert side besøk?) å alltid ha den nyeste versjonen av siden på dynamiske nettsteder mens du fremdeles slik at det preload-funksjonen.

Interessant, Progressive Web Apps også “investere” i dette området, selv om tilnærmingen er litt annerledes.

Animasjon

Alle disse begrepene er flott, men vi trenger fortsatt å bringe animasjoner til festen.

Kontroll av siden lastes inn, og erstatningen kan bli overtatt av oss, dermed kan vi spille med innholdet på siden til enhver tid. For eksempel, det er enkelt nok å legge til en klasse til side mens det mates. Dette gir oss muligheten til å definere en annen stat for side, eller med andre ord, skjule/losse den. Når animasjonen er ferdig, og siden er lastet inn, vi er frie til å erstatte innholdet, og fjerne staten klasse å la siden animere inn igjen.

Et annet alternativ er å animere din side “ut” med JavaScript, erstatte innholdet, og animere den tilbake “i.”

Det er mange muligheter for hvordan å nærme seg dette, men på noen som helst måte, det viktige her er ikke å la nettleseren reload.

Klar til å Gå

De er tre sentrale begreper som vil gjøre en stor forskjell. Poenget er, med litt ekstra innsats, det er ikke så vanskelig å gjøre dette selv, og jeg oppfordrer deg til å gjøre det.

Det kommer til å bli en humpete vei med massevis av mulige hodepine, så det er ikke alltid lett å ikke bryte nettleseren opprinnelige funksjonalitet.

Imidlertid, hvis du er mer av en belastning og gå type person, har jeg satt sammen en liten pakke kalt swup som sorterer ut alle de tingene som Turbolinks gjør, pluss alle de tre konseptene vi har dekket her. Her er en liten demo.

Hva er fordelene med swup?

  • Det fungerer utelukkende på front-end, så ingen-postserver, er påkrevd. Selv om du kan enkelt implementere en overføring av bare nødvendige data basert på X-Skjer-Med forespørsel om topp (liten endring av swup er nødvendig basert på dine spesielle løsning).
  • Bruker nettleseren historie API for å sikre riktig funksjonaliteten til nettstedet ditt, som det ville fungere uten swup (fram-og tilbake-knapper og riktig rute i URL-feltet).
  • Det trenger ikke å være en del av innledende laste batch og kan lastes inn og aktivert etter den første gjengi.
  • Tar vare på timing, betyr det automatisk oppdager slutten av overganger definert i CSS, og i mellomtiden tar seg av lasting på neste side. Hele prosessen er basert på lover, så ikke en eneste millisekund er bortkastet.
  • Hvis den er aktivert i valg, swup kan preload en side når koblingen er overhengende eller når det er oppstått i lastet innhold (med data-swup-preload-attributtet).
  • Hvis den er aktivert i valg, swup også bufre innholdet på sidene og ikke legger samme side to ganger.
  • Swup sender ut en hel haug av hendelser som du kan bruke i din kode for å aktivere JavaScript, analytics, etc.
  • Du kan definere så mange elementer som du kan byttes når du vil, så lenge de er felles for alle sider. Dette gir deg muligheten til å animere felles elementer på siden, mens du fortsatt skifte delene. Boble-menyen i våre tidligere eksempelet ovenfor bruker denne funksjonen, der check tegn på bobler er tatt fra det som er lagt side, men resten av boblen opphold på siden, så det kan være animert.
  • Gir deg muligheten til å bruke ulike animasjoner for overganger mellom ulike sider.

For de av dere som liker animasjon gjort med JavaScript, det finnes også en versjon for at kalt swupjs. Mens det kan være vanskeligere å gjennomføre animasjoner i JavaScript, er det definitivt gir deg mer kontroll.

Konklusjon

Animasjon og sømløs opplevelse, trenger ikke å være strengt begrenset til å native-programmer eller-nyeste teknologi. Med litt innsats, tid, og en bit av koden, selv din WordPress nettstedet kan føle native-aktig. Og mens vi allerede love the web slik det er, tror jeg vi kan alltid prøve å gjøre det litt bedre.