Multe studii de utilizare arată că utilizatorii (atât începători, cât și cu experiență) folosesc adesea butonul înapoi în browser. Din păcate, designerii și agenții de marketing front-end rareori se gândesc la implicațiile de utilizare ale acestui lucru, având în vedere modelele actuale de design web pe care aplicațiile, animațiile, videoclipurile și multe altele le folosesc. Adesea, structura tehnică a unor astfel de layout-uri nu răspunde bine la funcția de retur, care rupe tiparul mental al utilizatorilor și le degradează experiența.

Consecințele acestui lucru pot fi îngrozitoare: în timpul experimentelor, răspunsul inadecvat al site-ului la apăsarea butonului „înapoi” a fost motivul pentru care mulți utilizatori au plecat, și cu abuzuri și recenzii nemăgulitoare. În cele mai multe cazuri, chiar și respectabilii subiecți cu părul gri și-au pierdut cumpătul îngrozitor.

În acest articol, veți învăța:

• ce așteaptă utilizatorii de la butonul înapoi;
• care sunt cele mai frecvente 5 greșeli;
• soluție simplă la aceste probleme.

Soluția este într-adevăr foarte simplă, dar este adesea neglijată chiar și de cele mai mari mărci. Să reparăm această eroare?

Așteptările utilizatorilor

Pe scurt: utilizatorii se așteaptă ca butonul de întoarcere să le arate ceea ce percep ei ca fiind pagina anterioară. Cuvântul „percepe” este foarte important, deoarece există o diferență colosală între ceea ce pare a fi pagina anterioară și ceea ce este tehnic.

Apare întrebarea: ce anume interpretează utilizatorii ca pe o pagină nouă? În cele mai multe cazuri, dacă o pagină este semnificativ diferită din punct de vedere vizual, dar în același timp este legată conceptual de site, atunci este percepută ca nouă. Prin urmare, este foarte important să urmăriți modul în care site-ul gestionează diverse elemente interactive: casete lightbox, formulare, filtre și multe altele.

Majoritatea vizitatorilor nu înțeleg probleme tehnice, dar se bazează doar pe idei intuitive despre cum ar trebui să funcționeze resursa. Deci, când fac clic pe butonul Înapoi, se așteaptă la o pagină care a avut deja o experiență importantă și primesc o pagină cu o interfață ușor reproiectată.

Mai jos sunt cele mai populare elemente interactive și cum să le folosiți pentru a maximiza experiența utilizatorului și capacitatea de utilizare.

Scopul încorporarii suprapunerilor și casetelor lightbox este de a arăta utilizatorului un element care apare în partea de sus a paginii. Prin urmare, utilizatorii percep astfel de elemente ca pagini noi și apasă butonul „înapoi” pentru a reveni la pozitia de pornire- dar ajung deloc acolo unde se așteptau. Acest lucru este deosebit de regretabil, deoarece utilizarea lightbox-urilor nu face decât să multiplice percepția negativă a unei pagini web - majoritatea utilizatorilor nu le plac aceste elemente pe site-urile magazinelor online.

Folosirea filtrelor transformă adesea pagina și oferă persoanei o experiență nouă. Prin urmare, pagina după sortare este percepută ca nouă, chiar dacă nu a fost încărcat nimic pe ea. Asta pentru ca dupa fiecare interactiune a vizitatorului cu pagina magazinului online se obtine o noua afisare a rezultatelor.

Acest exemplu subliniază faptul că oamenii nu se adâncesc în aspectele tehnice atunci când determină pagina noua, dar folosește doar intuiția și percepția formată.

3. Forma de inscriere/plata

Pagina de plată este percepută ca pagini noi și chiar mai rău - ca un proces în mai multe etape, a cărui etapă poate fi anulată cu butonul „du-te înapoi”.

Această abordare poate aduce probleme, un exemplu simplu - o persoană dorește să facă un pas înapoi în completarea unui formular pentru a edita informațiile introduse. Apăsarea butonului „înapoi” îl întoarce în coș și șterge toate (!) datele introduse. Iritația și părăsirea locului este un efect natural.

Este posibil ca tehnologia AJAX să nu fie la înălțimea așteptărilor utilizatorilor: din punct de vedere tehnic, fiecare pagină AJAX se află sub aceeași adresă URL, dar se pare că se deschid noi pagini.

Într-un context de comerț electronic, utilizatorii au o percepție clară că pagina 3 și pagina 4 sunt separate și că de la a patra la a treia pot fi navigate folosind butonul înapoi.

Utilizatorii nu sunt pregătiți să renunțe la butonul înapoi

Având în vedere utilizarea pe scară largă a acestei caracteristici a browserului de internet, problema nepotrivirii așteptărilor utilizatorilor cu viziunea dezvoltatorilor devine critică - nu trebuie luată cu ușurință.

Butonul „du-te înapoi” a fost deosebit de plăcut de utilizatori aplicatii mobileși site-uri. Cercetarile au demonstrat versiuni mobile site-uri, majoritatea utilizatorilor au folosit această funcție pe toate resursele propuse. Mai mult, utilizarea butonului nu se limitează la rularea înapoi cu o pagină - unii subiecți l-au apăsat de până la 15 (!) ori la rând.

Utilizatorii de PC apăsă adesea un buton - dar nu în același mod ca utilizatorii de telefonie mobilă, deoarece utilizatorii computere desktop este disponibilă o navigare convenabilă pe site.

Soluţie

Vestea bună este că HTML5 are o soluție relativ simplă la problemă și se numește HTML5 History API. Mai precis, funcția history.pushState () vă permite să schimbați adresa URL fără a reîncărca pagina. În consecință, site-ul se va comporta corespunzător așteptărilor utilizatorului care a apăsat butonul „du-te înapoi”.

În acest articol, vom analiza cum puteți crea un buton „Înapoi” în orice loc de care aveți nevoie. Cred că din chiar numele butonului este deja clar ce se va întâmpla când dai clic pe el. Un astfel de buton poate fi introdus atât într-o categorie, cât și în materialul în sine. Totul se face destul de simplu.

Există mai multe opțiuni pentru cum puteți adăuga un buton, dar eu personal am folosit o singură metodă. Și anume a treia variantă din cele trei pe care le-am propus. Puțin mai departe vă voi spune de ce anume el.

Ce opțiuni avem la toate:

1. Editați fișierele șablon Jooml.
2. Doar lipiți codul butonului unde doriți.
3. Creați modulul „HTML-code”, introduceți codul butonului acolo și apoi afișați acest modul în locul potrivit.

Plusul din a treia opțiune este că, dacă trebuie să editați textul de pe buton sau să modificați / adăugați o clasă de stil, atunci trebuie doar să corectați modulul în sine și să nu fixați butonul în toate locurile în care se află.

Deci, pe unul dintre site-urile mele am folosit a treia opțiune:

A fost creat modulul „HTML-code” și acolo, folosind extensia „Sourcerer”, care face posibilă adăugarea oricărui cod la material, a fost introdus codul butonului.

Codul meu de lucru:

Textul este ușor decorat cu o săgeată folosind componente din bootstrap 3, iar butonul în sine este stilat cu CSS.

Bună ziua, a fost o întrebare despre cum să mutați butonul înapoi și să-l puneți lângă butonul următor atunci când plasați o comandă. Acum arată așa pentru mine. Https://yadi.sk/i/_ZNvGrvEhqSk3 ..

Există o soluție

Salutare, cine vă poate spune cum puteți face un buton înapoi, de exemplu, în coșul de cumpărături, astfel încât o persoană să se poată întoarce la pagina anterioară?

Introduceți un buton în șablon unde doriți, de exemplu, acesta

+1

Când apăs pe butonul Înapoi de pe browser, toate stilurile par să zboare până când reîmprospăt pagina. Tema implicită ar trebui să se afișeze ca în captura de ecran de mai jos) Spune-mi care este problema

Bună ziua, am făcut un buton „Înapoi” în coș, nici măcar un buton, ci doar un link cu un cod. Întoarce-te Acum, când te întorci în coș...

Există o soluție

Bună ziua! Întâmpinat următoarea problemă: când adăugați un articol în coș și faceți clic pe butonul „înapoi” din browser, informațiile despre articolele din coș (în blocul suplimentar) nu sunt salvate până când reîmprospătați pagina. Acestea. intrați pe site, mergeți...

Site-ul pe care l-ați specificat folosește un plugin pentru coș. Ca opțiune cu modificări, puteți utiliza trimiterea adăugării de bunuri nu la? Html = 1, ci la? Html = 1 & articole = 1, aceasta va returna întregul conținut al căruciorul.

Buna dimineata.La fiecare pas din timpul comenzii este indicat butonul "Următorul". La subiectul "Suprime" am găsit codul butonului: Există o soluție

Bună ziua, vă vom ajuta cu plăcere: [email protected]

Domnul. X

Bună ziua! Am întâmpinat o problemă. Site-ul are un design atipic și parțial (majoritatea funcțiilor sunt păstrate) codul sursă - coșul de cumpărături este implementat sub forma unei ferestre pop-up Site-ul l-a pus în funcțiune așa cum este - fără documentație, explicații, link-uri catre...

Cineva a dat peste panoul de administrare încetinește teribil, mai ales când editați un produs sau un șablon. De exemplu, în șablon, trebuie să inserați sau să înlocuiți codul pe care îl selectați cu mouse-ul, apoi selecția are loc cu o întârziere, în rata noului cod, de asemenea, cu o întârziere. V...

+4

Atenție https: //site/forum/386/predlozheniy ... punctul numărul doi încă nu este implementat, dar încercați să editați listele cu 500-1000 de produse derulând mai departe lista încărcată, problema care este din nou legată de ideea ...

Actualizare Shop-Script 6.2.1

Shop Script 6.2.1 a fost lansat astăzi. Ce este nou: 1. S-a adăugat posibilitatea de a dezactiva încărcarea leneră a listelor de produse în backend pentru a activa navigarea în pagină. S-a adăugat...

Bună ziua, a existat o astfel de problemă - o eroare nedefinită în panoul de administrare, nu se vor salva, o parte din meniu a dispărut, la adăugarea de noi blocuri la WYSIWYG, dă o eroare nedefinită.

+19 Terminat

Este necesar să faceți în panoul de administrare al site-ului, opțiunea de încărcare a mărfurilor pe categorii pe pagină, și nu printr-o listă de încărcare. De exemplu, am 21.000 de poziții și trebuie editate (adăugate la diverse categorii etc.). Dar dacă, de exemplu, browserul se blochează...

Buna ziua, am intampinat o astfel de problema cand lucram cu sistemul WebAssyst Shop-Script: la intrarea pe site-ul unui magazin online, in loc de cifra 0, suma de bani este afisata in dreptul Cosului, in timp ce cosul in sine este gol. Când faceți clic pe linkul „Coș”, deci...

Bună ziua.Pe toate paginile magazinului există un modul care arată cantitatea de articole din coș.Sarcina este să afișeze numărul de articole din coș.Șablonul este implicit. Am schimbat codul din fișierul index.html astfel: (if $ wa-> shop)...

Buna ziua. Cum puteți face astfel încât utilizatorului să i se afișeze informații în frontend despre câte produse are în prezent în coșul de cumpărături? Adică, cum să faci un numărător numeric lângă coș, care va crește pe măsură ce crește...

Întrebarea este: cum să faceți ca fereastra coșului să afișeze cantitatea totală de mărfuri introduse în ea și unde puteți scrie cuvântul efectiv „suma:” sau expresia „bunuri pentru suma:” înainte de suma afișată?

Există o soluție

Am următorul cod: Afișează linkul peste tot, cu excepția celui principal: (dacă $ wa_url! = $ Wa-> currentUrl (0,1)) ... (/ dacă) Și nu trebuie să afișez linkul pe trei pagini , acesta este pe principal , pe / coș / și pe / checkout / Vă rog să-mi spuneți ce mai trebuie adăugat la acest...

Uneori, pe paginile web, devine necesar să mergeți temporar la o altă pagină (să o numim auxiliară), apoi să reveniți și să continuați să lucrați cu ea. De exemplu, poate fi - pagina de ajutor, înregistrare.

În acest caz, evident, adresa de retur poate fi foarte diferită. Cum să implementezi o astfel de tranziție inversă pe site? html / CSS pur nu va fi suficient aici, va trebui să utilizați javascript.

Cel mai simplu lucru este, de exemplu, să folosiți această linie într-un script pe o pagină de ajutor:

Metoda istorică își amintește istoricul tranzițiilor de pe pagină și, de fapt, utilizarea sa este similară cu utilizarea butoanelor „Înainte” și „Înapoi” ale browserului, doar puțin mai funcționale. Acesta este cel mai simplu și mai convenabil mod, dar cu o singură condiție: dacă noua pagină (auxiliară) nu este deschisă într-o fereastră nouă. La urma urmei, în caz contrar, pagina auxiliară se va deschide pentru prima dată (mai precis, sesiunea pentru aceasta va fi prima, încă nu au existat tranziții la ea). Și asta înseamnă că, de fapt, nu există unde să te întorci. Prin urmare, această metodă nu poate fi numită universală. Nu va funcționa dacă utilizatorul deschide forțat pagina într-o filă nouă sau browserul o face pentru el - în conformitate cu setările. În acest caz, atributul target = „_ self” al linkului nu va ajuta: nu va fi posibil să navigați înapoi din pagina auxiliară deschisă (cu excepția cazului în care, desigur, introduceți adresa URL a paginii originale în adresa browserului bară manual).

Un mod mai versatil

Pentru a-l implementa, veți avea nevoie de scripturi atât pe paginile sursă, cât și pe cele auxiliare. Ideea poate fi diferită. Una dintre ele se bazează pe faptul că adresa (URL-ul) paginii originale este stocată în bara de adrese a browserului ca cerere GET. Astfel. pagina de ajutor, atunci când primește o astfel de solicitare, cunoaște originea cererii. Pe baza acestui lucru, devine posibilă trecerea înapoi, de ex. la pagina de la care s-a făcut trecerea.

Aceasta poate fi reprezentată schematic după cum urmează:

Scenariul de pe pagina originală

Pe pagină, CU CARE trebuie făcută tranziția, există următorul script, care este o funcție - handler-ul clicului mouse-ului (onclick):

Pentru ca funcția din script să funcționeze, trebuie să instalați handlerul său pe un element într-unul din moduri, de exemplu, astfel:

http://example.com „onclick =" to_comment_rules (“http://example.com”); return false "> Faceți clic pentru a merge la subpagina

Rețineți că atributul href al acestui link are o adresă corespunzătoare, care este specificată în funcția de gestionare a evenimentelor onclick. Acest lucru se face astfel încât roboții de căutare să înțeleagă la ce pagină va merge linkul când se face clic pe link. Dacă nu este necesar, atunci ar trebui să creați un atribut href gol, cum ar fi

Principiul acestui script este că atunci când este apelată funcția save_back (url), se deschide o pagină (auxiliară) cu adresa URL. Pentru a face acest lucru, se definește protocolul paginii (de exemplu, http sau https), precum și restul adresei URL a paginii web originale, inclusiv cu, probabil, datele disponibile ale cererii GET (acesta este ceea ce este în adresa URL după semnul „?”). Datele primite sunt adăugate la adresa URL a paginii care se deschide - și are loc o tranziție la aceasta.

Script pe pagina de ajutor

Ar trebui să aibă ceva ca acest script:

Acest script va fi, de asemenea, lansat atunci când se face clic cu mouse-ul pe orice element pe care este instalat handlerul corespunzător:

Întoarcere

Această linie înlocuiește acțiunea implicită de clic pe link. Faptul este că implicit este urmat linkul. În acest caz, tranziția va avea loc exact la adresa specificată în atributul href. Această adresă (în special, pe pagina auxiliară) poate să nu conțină adresa de retur a paginii de la care s-a făcut tranziția (dacă trecerea la pagina auxiliară este posibilă nu de la o anumită pagină, ci de la mai multe pagini sursă).

Deci, scriptul de pe pagina de ajutor citește conținutul barei de adrese și apoi îl împarte într-o matrice de elemente „?”. Vă rugăm să rețineți că pot exista două astfel de caractere în adresa URL. Primul va apărea, după cum sa menționat deja, datorită faptului că adresa paginii originale a fost adăugată la adresa paginii auxiliare (minus protocolul). Iar al doilea ar putea fi prezent ca urmare a prezenței parametrilor cererii GET la încărcarea paginii originale. Cu alte cuvinte, pot exista unul sau două semne de întrebare în bara de adrese ale subpaginii. Pentru a trece de la pagina auxiliară la cea originală când faceți clic pe link

Întoarcere

cererea este citită din bara de adrese și convertită în același formular pe care îl avea pe pagina originală, după care pagina este încărcată la această adresă.

Observatii

În plus, trebuie menționat că articolul nu este chiar despre revenirea la pagina originală, ci despre reîncărcarea acesteia. Aceasta este, desigur, doar o imitație a unei întoarceri. În special, datele introduse pe această pagină, setările acesteia pot să nu fie salvate. În plus, spre deosebire de RETURN, atunci când pagina este încărcată, aceasta va fi deschisă chiar de la începutul site-ului (adică partea superioară a acesteia va fi situată în partea de sus a ecranului). În timp ce backtracking „adevărat” returnează pagina (originală) exact unde a fost efectuată navigarea. Prin urmare, să încercăm să combinăm ambele metode.

Metoda combinata

Deci, să stabilim sarcina:

dacă pagina auxiliară este deschisă în aceeași filă (fereastră), atunci lăsați să fie disponibilă metoda history.back ();

dar dacă pagina auxiliară se deschide într-o fereastră nouă, atunci metoda discutată mai sus ar trebui să funcționeze (pentru că în acest caz history.back () nu va funcționa).

Scriptul de pe pagina de ajutor se va schimba ușor (linia de mai sus va fi adăugată):

În primul rând, încercăm să ne întoarcem. Dacă funcționează, restul scriptului nu va funcționa și va reveni la pagina originală în același loc din care a fost făcută tranziția. Dacă nu, atunci, ca și până acum, extragem adresa paginii originale din parametrii cererii GET și mergem la ea.

Concluzie

Desigur, acest articol arată doar una dintre opțiunile pentru tehnologia „retur”. ÎNAPOI- la pagina originală. În acest scop, pe lângă cererea GET, ar putea fi utilizate și alte tehnologii, de exemplu, stocarea locală localStorage. În plus, pentru a simula pe deplin întoarcerea ÎNAPOI Ar fi bine să trimiteți printr-o cerere GET cantitatea de defilare a paginii originale - astfel încât ulterior, chiar și la deschiderea paginii auxiliare într-o fereastră nouă, să reveniți în același loc pe pagina originală de unde a fost făcută mai devreme tranziția .