Mnoge studije upotrebljivosti pokazuju da korisnici (i početnici i iskusni) često koriste dugme „nazad” u pretraživaču. Nažalost, front-end programeri i trgovci rijetko razmišljaju o utjecaju koji bi to moglo imati na upotrebljivost s obzirom na trenutne obrasce web dizajna koji koriste aplikacije, animacije, video zapise i još mnogo toga. Često tehnička struktura ovih rasporeda ne odgovara pravilno na funkciju "vrati se", što razbija mentalni šablon korisnika i degradira njihovo iskustvo.

Posledice ovoga mogu biti strašne: tokom eksperimenata, neprikladna reakcija sajta na pritisak na dugme za povratak izazvala je odlazak mnogih korisnika, uz zloupotrebe i nelaskave kritike. U većini slučajeva, čak su i poštovani, sedokosi subjekti strašno izgubili živce.

Iz ovog članka ćete naučiti:

• šta korisnici očekuju od dugmeta za povratak;
• koje su 5 najčešćih grešaka;
• jednostavno rješenje ovih problema.

Rješenje je zaista vrlo jednostavno, ali ga često zanemaruju čak i najveći brendovi. Možemo li popraviti ovu grešku?

Očekivanja korisnika

Ukratko: korisnici očekuju da im dugme "vrati se" pokaže ono što smatraju prethodnom stranicom. Reč „opažiti“ je veoma važna, jer postoji ogromna razlika između onoga što izgleda kao prethodna stranica i onoga što je tehnički.

Postavlja se pitanje: šta tačno korisnici tumače kao novu stranicu? U većini slučajeva, ako je stranica značajno drugačija vizualno, ali je konceptualno povezana sa web lokacijom, onda se doživljava kao nova. Zbog toga je veoma važno pratiti kako se na sajtu ponašaju različiti interaktivni elementi: lightboxovi, forme, filteri i tako dalje.

Većina posjetilaca nije upoznata tehničke tačke, ali se oslanja samo na intuiciju o tome kako bi resurs trebao funkcionirati. Stoga, kada kliknu na dugme za povratak, očekuju stranicu na kojoj su već stekli važno iskustvo, ali dobijaju stranicu sa malo izmenjenim interfejsom.

Ispod su najpopularniji interaktivni elementi i preporuke o tome kako ih koristiti kako biste maksimalno povećali korisničko iskustvo i upotrebljivost.

Svrha implementacije preklapanja i okvira za pregled je da se korisniku pokaže element koji se pojavljuje na vrhu stranice. Stoga korisnici takve elemente percipiraju kao nove stranice i pritisnu dugme "nazad" da se vrate na njih početni položaj Ali ne završavaju tamo gdje su očekivali. Ovo je posebno žalosno, jer korištenje lightbox-a samo povećava negativnu percepciju web stranice – većina korisnika ne voli ove elemente na stranicama za online kupovinu.

Korištenje filtera često transformira stranicu i daje osobi novo iskustvo. Stoga se stranica nakon sortiranja percipira kao nova, čak i ako na njoj ništa nije učitano. To je zato što se nakon svake interakcije posjetitelja sa stranicom online trgovine dobiva novi izlaz rezultata.

Ovaj primjer naglašava da ljudi ne ulaze u tehničke aspekte prilikom određivanja nova stranica, ali koristite samo intuiciju i formiranu percepciju.

3. Oblik prijave/uplate

Stranice za naplatu se tretiraju kao nove stranice, a još gore - kao proces u više koraka, čiji se svaki korak može otkazati tipkom "nazad".

Ovakav pristup može donijeti probleme, jednostavan primjer - osoba želi da se vrati korak unazad u popunjavanju obrasca kako bi uredila unesene podatke. Pritiskom na dugme "nazad" se vraća u smeće, i brišu se svi (!) uneseni podaci. Iritacija i napuštanje mjesta je prirodan učinak.

AJAX tehnologija možda neće ispuniti očekivanja korisnika: tehnički je svaka AJAX stranica pod istim URL-om, ali izgleda kao da se otvaraju nove stranice.

U kontekstu e-trgovine, korisnici imaju jasnu percepciju da su stranica 3 i stranica 4 odvojene, a stranica 4 može se kretati na stranicu 3 pomoću dugmeta za povratak.

Korisnici nisu spremni da odustanu od dugmeta za povratak

S obzirom na to koliko je široko korišćena ova karakteristika internet pretraživača, pitanje neusklađenosti očekivanja korisnika sa vizijom programera postaje kritično i ne treba ga shvatati olako.

Korisnicima se posebno svidjelo dugme "nazad". mobilne aplikacije i web stranice. Kako je studija pokazala mobilne verzije stranicama, većina korisnika koristi ovu funkciju na svim predloženim resursima. Štaviše, upotreba dugmeta nije ograničena na vraćanje jedne stranice unazad - neki subjekti su ga pritiskali i do 15 (!) puta zaredom.

Korisnici računara takođe često pritiskaju dugme - ali ne na isti način kao korisnici mobilnih telefona, jer korisnici desktop računare Dostupna je jednostavna navigacija po sajtu.

Rješenje

Dobra vijest je da HTML5 ima relativno jednostavno rješenje problema, a zove se HTML5 History API. Konkretnije, funkcija history.pushState() vam omogućava da promijenite URL bez ponovnog učitavanja stranice. Shodno tome, stranica će se ponašati adekvatno prema očekivanjima korisnika koji je kliknuo na dugme „vrati se nazad“.

U ovom članku ćemo pogledati kako možete kreirati dugme "Nazad" na bilo kojem mjestu koje vam je potrebno. Mislim da je već iz samog naziva dugmeta jasno šta će se desiti kada kliknete na njega. Takvo dugme se može umetnuti i u kategoriju i u sam materijal. Sve se radi prilično jednostavno.

Postoji nekoliko opcija kako možete dodati dugme, ali ja sam lično koristio samo jedan način. Naime, treća opcija od tri koje sam predložio. Malo dalje ću vam reći zašto.

Koje opcije imamo:

1. Uredite datoteke Jooml šablona.
2. Samo zalijepite kod dugmeta na pravo mjesto.
3. Kreirajte modul "HTML code", zalijepite kod gumba tamo, a zatim prikažite ovaj modul na pravom mjestu.

Prednost u trećoj opciji je u tome što ako treba da uredite tekst na dugmetu ili promenite/dodate klasu stila, onda ćete morati da popravite samo sam modul, a ne dugme na svim mestima gde stoji.

Dakle, na jednoj od mojih stranica koristio sam treću opciju:

Modul "HTML-code" je kreiran i tu je ubačen kod dugmeta pomoću ekstenzije "Sourcerer", što omogućava dodavanje bilo kog koda u materijal.

Kod mog radnog dugmeta:

Tekst je blago ukrašen strelicom, koristeći komponente iz bootstrapa 3, a samo dugme je stilizovano preko CSS-a.

Dobar dan pojavilo se pitanje kako da vratim dugme nazad i stavim ga pored sledećeg dugmeta prilikom naručivanja.Sada meni izgleda ovako.https://yadi.sk/i/_ZNvGrvEhqSk3 Ako ga pomeriš dole , prestaje da radi...

Postoji rješenje

Pozdrav ko moze da mi kaze kako da napravim dugme za povratak npr u korpicu da se covek vrati na prethodnu stranicu?

Umetnite dugme u šablon gde želite, na primer, ovo

+1

Kada pritisnem dugme za povratak na pretraživaču, izgleda da svi stilovi odlete dok ne osvežim stranicu. Podrazumevana tema bi trebalo da se prikaže kao na slici ispod) Recite mi u čemu je problem

Zdravo, napravio sam dugme "Vrati se" u kolicima, čak nije ni dugme, već samo link sa kodom. Vratite se sada kada se vratite u korpu...

Postoji rješenje

Dobar dan!Naišao sam na ovakav problem: prilikom dodavanja proizvoda u korpu i pritiskanja dugmeta "nazad" u pretraživaču, podaci o proizvodima u korpi (u dodatnom bloku) se ne čuvaju dok ne osvežite stranicu. One. idemo na sajt, idemo...

Sajt koji ste naveli koristi dodatak za korpu. Kao opciju sa poboljšanjima, možete koristiti slanje dodatka robe ne na?html=1, već na?html=1&items=1, ovo će dati pun sadržaj kolica kao odgovor.

Dobar dan. Na svakom koraku prilikom odjavljivanja je naznačeno dugme "Dalje". U temi "Supreme" sam našao kod dugmeta: Postoji rješenje

Pozdrav, rado ćemo pomoći: [email protected]

Gospodin. X

Dobar dan! Suočen sa problemom. Sajt ima netipičan dizajn i delimično (većina funkcija je sačuvana) izvorni kod - korpa za kupovinu je implementirana kao pop-up prozor. Sajt je primljen u rad kakav jeste - bez dokumentacije, objašnjenja, veze sa...

Da li je neko naišao na to da je admin panel užasno spor, pogotovo kada uređujete proizvod ili šablon. Na primjer, u predlošku treba da umetnete ili zamijenite kod, odaberete ga mišem, zatim odabir kasni, a umetanje novog koda također kasni. U...

+4

Imajte na umu https://site/forum/386/predlozheniy...tačka broj dva još nije implementirana, a vi pokušavate urediti liste sa 500-1000 proizvoda tako što ćete dalje pomicati listu koja se može učitati, problem je opet vezan za poenta...

Shop-Script 6.2.1 ažuriranje

Danas je objavljeno ažuriranje Shop Script 6.2.1. Šta je novo:1. Dodata je mogućnost onemogućavanja lijenog učitavanja lista proizvoda u pozadinu kako bi se omogućila paginacija. U postavkama trgovine u odjeljku "Opšte postavke",...

Dobar dan, pojavio se takav problem - nedefinirana greška u admin panelu, neće se sačuvati, dio menija je nestao, pri dodavanju novih blokova u WYSIWYG daje nedefinisanu grešku.

+19 Gotovo

Potrebno je u admin panelu sajta napraviti opciju učitavanja robe po kategorijama po stranici, a ne po učitanoj listi. Na primjer, imam 21.000 pozicija i potrebno ih je urediti (dodati u različite kategorije itd.). Ali ako, na primjer, pretraživač visi...

Poštovani, naišao sam na ovakav problem pri radu sa WebAssyst Shop-Script sistemom: prilikom ulaska na web stranicu online prodavnice, umjesto broja 0, pored Korpe se prikazuje iznos novca, dok je sama korpa prazna. Kada kliknete na link "Kopa"...

Dobar dan.Na svim stranicama radnje postoji modul koji pokazuje koliko je robe u korpi.Zadatak je da se prikaže broj robe u korpi.Šablon je podrazumevani. U datoteci index.html promijenio sam kod ovako: (ako $wa->shop)...

Dobar dan. Kako da napravim da se korisniku u front-endu prikazuje informacija koliko robe trenutno ima u korpi. Odnosno, kako napraviti brojčani brojač u blizini korpe, koji će rasti kako se povećava ...

Postavlja se pitanje: kako napraviti da prozor korpe prikazuje ukupnu količinu robe stavljene u nju, i gdje da upišem riječ "količina:" ili frazu "roba za iznos:" ispred prikazanog iznosa?

Postoji rješenje

Imam ovaj kod: Prikaži vezu svuda osim glavne:(if $wa_url != $wa->currentUrl(0,1))...(/if) I ne moram da prikazujem link na tri stranice, ovo je na glavnoj , na /cart/ i na /checkout/ Molim vas recite mi šta još treba dodati ovome...

Ponekad na web stranicama postaje potrebno privremeno otići na neku drugu (nazovimo je pomoćnu) stranicu, a zatim se vratiti i nastaviti raditi s njom. Na primjer, to može biti stranica pomoći, stranica za registraciju.

U ovom slučaju, očigledno, povratna adresa može biti vrlo različita. Kako implementirati takav obrnuti prijelaz na web mjestu? Čisti html/CSS ovdje nije dovoljan, morat ćete koristiti javascript.

Najjednostavniji je, na primjer, korištenje takve linije u skripti na pomoćnoj stranici:

Metoda historije pamti historiju navigacije po stranici i, u stvari, njena upotreba je slična korištenju tipki "Naprijed" i "Nazad" u pretraživaču, samo malo funkcionalnija. Ovo je najlakši i najpovoljniji način, ali samo pod jednim uslovom: ako se nova (pomoćna) stranica ne otvori u novom prozoru. Uostalom, inače će se pomoćna stranica otvoriti prvi put (tačnije, sesija za nju će biti prva, na njoj još nije bilo prijelaza). A to znači da se, zapravo, nema kuda vratiti. Stoga se ova metoda ne može nazvati univerzalnom. Neće raditi ako korisnik prisili da se stranica otvori u novoj kartici ili pretraživač to učini umjesto njega - u skladu sa postavkama. U ovom slučaju, ni atribut linka target="_self" neće pomoći: biće nemoguće vratiti se s otvorene pomoćne stranice (osim ako, naravno, ne unesete URL originalne stranice u adresnu traku pretraživača ručno) .

Svestraniji način

Da biste ga implementirali, trebat će vam skripte i na izvornoj i na pomoćnoj stranici. Ideja može biti drugačija. Jedan od njih je zasnovan na činjenici da se adresa (URL) originalne stranice čuva u adresnoj traci pretraživača kao GET zahtjev. Time. pomoćna stranica, koja primi takav zahtjev, zna za njegov izvor. Na osnovu toga postaje moguć povratak, tj. na stranicu sa koje je napravljen prijelaz.

Šematski, ovo se može predstaviti na sljedeći način:

Skripta na originalnoj stranici

Na stranici KOJU tranziciju treba izvršiti nalazi se sljedeća skripta, koja je funkcija - rukovalac klika mišem (onclick):

Da bi funkcija u skripti radila, potrebno je postaviti njen rukovatelj na neki element na jedan od načina, na primjer, ovako:

http://example.com " onclick="to_comment_rules(“http://example.com”); return false">Kliknite da biste otišli na stranicu pomoći

Imajte na umu da href atribut ove veze ima odgovarajuću adresu, koja je navedena u funkciji rukovanja događajima onclick. Ovo je učinjeno kako bi roboti za pretraživanje razumjeli na koju stranicu će ići kada kliknete na link. Ako ovo nije neophodno, onda bi trebalo da napravite prazan href atribut, npr

Princip ove skripte je da kada se pozove funkcija save_back(url), otvara se (pomoćna) stranica sa url-om. To radi navođenjem protokola stranice (na primjer, http ili https) kao i ostatka URL-a originalne web stranice, eventualno uključujući podatke GET zahtjeva (to je ono što se nalazi u URL-u nakon "?") . Primljeni podaci se dodaju URL-u otvorene stranice - i dolazi do prijelaza na nju.

Skripta stranice pomoći

Trebao bi imati ovakav skript:

Ova skripta će se također pokrenuti kada se mišem klikne na neki element koji ima instaliran odgovarajući rukovalac:

Povratak

Ova linija poništava zadanu radnju kada miš klikne na vezu. Stvar je u tome što podrazumevano postoji prelaz ispod veze. U ovom slučaju, prijelaz će se dogoditi tačno na adresu navedenu u atributu href. Ova adresa (posebno na pomoćnoj stranici) ne smije sadržavati povratnu adresu stranice sa koje je izvršen prijelaz (ako je prijelaz na pomoćnu stranicu moguć ne s jedne određene, već s nekoliko izvornih stranica).

Dakle, skripta na stranici pomoći čita sadržaj adresne trake, a zatim ga dijeli u niz elemenata "?". Imajte na umu da u URL-u mogu biti dva takva znaka. Prvi će se pojaviti, kao što je već spomenuto, zbog činjenice da je adresa (minus protokol) originalne adrese stranice dodana adresi pomoćne stranice. A drugi bi mogao biti prisutan, kao rezultat prisustva parametara GET zahtjeva prilikom učitavanja originalne stranice. Drugim riječima, adresna traka stranice pomoći može sadržavati jedan ili dva znaka pitanja. Za prebacivanje sa pomoćne stranice na originalnu klikom na link

Povratak

zahtjev se čita iz adresne trake i pretvara u isti oblik koji je imao na originalnoj stranici, nakon čega se stranica učitava na ovoj adresi.

Napomene

Osim toga, treba napomenuti da u članku, zapravo, ne govorimo o vraćanju na originalnu stranicu, već o ponovnom učitavanju. Ovo je, naravno, samo imitacija povratka. Konkretno, podaci uneseni na ovoj stranici, njene postavke možda neće biti sačuvane. Osim toga, za razliku od RETURN, kada se stranica učita, otvara se od samog početka stranice (tj. njen gornji dio će se nalaziti na vrhu ekrana). Dok "true" backtracking vraća (originalnu) stranicu tačno odakle je napravljen skok. Stoga ćemo pokušati kombinirati obje metode.

Kombinovana metoda

Dakle, postavimo zadatak:

ako se pomoćna stranica otvori u istoj kartici (prozoru), onda neka metoda history.back() bude dostupna;

međutim, ako se stranica pomoći otvori u novom prozoru, tada bi metoda o kojoj je bilo riječi gore trebala raditi (jer history.back() neće raditi).

Skripta na pomoćnoj stranici će se malo promijeniti (dodat će se gore spomenuti red):

Pokušavamo se prvi vratiti. Ako to uspije, ostatak skripte neće raditi i vratit će se na originalnu stranicu na istom mjestu sa kojeg je napravljen prijelaz. Ako ne, onda, kao i prije, izdvajamo adresu originalne stranice iz parametara GET zahtjeva i idemo na nju.

Zaključak

Naravno, ovaj članak prikazuje samo jednu od opcija za tehnologiju "povratka". NAZAD- na originalnu stranicu. U tu svrhu, osim GET zahtjeva, mogu se koristiti i druge tehnologije, na primjer, lokalna pohrana localStorage. Osim toga, za potpunu simulaciju povratka NAZAD bilo bi lijepo proći količinu pomicanja originalne stranice kroz GET zahtjev - tako da se kasnije, čak i kada otvorite pomoćnu stranicu u novom prozoru, možete vratiti na isto mjesto na originalnoj stranici sa koje je prešao napravljeno ranije.