Mnohé štúdie použiteľnosti ukazujú, že používatelia (začiatočníci aj skúsení) často používajú tlačidlo späť vo svojom prehliadači. Nanešťastie, dizajnéri a marketéri len zriedka myslia na to, aké dôsledky to má na použiteľnosť – vzhľadom na súčasné modely webdizajnu, ktoré používajú aplikácie, animácie, videá a ďalšie. Technická štruktúra takýchto rozložení často nereaguje dobre na funkciu návratu, čo narušuje mentálne vzorce používateľov a zhoršuje ich skúsenosti.

Dôsledky toho môžu byť strašné: počas experimentov bola neadekvátna odozva stránky na stlačenie tlačidla „späť“ dôvodom odchodu mnohých používateľov, a to so zneužívaním a nelichotivými recenziami. Vo väčšine prípadov dokonca aj úctyhodné, sivovlasé testované osoby strašne stratili nervy.

V tomto článku sa dozviete:

• čo používatelia očakávajú od tlačidla späť;
• akých 5 najčastejších chýb;
• jednoduché riešenie týchto problémov.

Riešenie je naozaj veľmi jednoduché, no často ho zanedbávajú aj tie najväčšie značky. Opravíme túto chybu?

Očakávania používateľov

Stručne povedané: používatelia očakávajú, že tlačidlo vrátiť sa im ukáže, čo vnímajú ako predchádzajúcu stránku. Slovo „vnímať“ je veľmi dôležité, pretože medzi tým, čo sa javí ako predchádzajúca stránka, a tým, čo ňou technicky je, je obrovský rozdiel.

Vynára sa otázka: čo presne používatelia interpretujú ako novú stránku? Vo väčšine prípadov, ak je stránka výrazne odlišná vizuálne, ale zároveň koncepčne súvisí s webom, potom je vnímaná ako nová. Preto je veľmi dôležité sledovať, ako stránka spracováva rôzne interaktívne prvky: svetelné boxy, formuláre, filtre a ďalšie.

Väčšina návštevníkov nerozumie technické problémy, ale spolieha sa len na intuitívne predstavy o tom, ako by mal zdroj fungovať. Keď teda kliknú na tlačidlo späť, očakávajú stránku, ktorá už má za sebou dôležité skúsenosti, a získajú stránku s mierne prepracovaným rozhraním.

Nižšie sú uvedené najobľúbenejšie interaktívne prvky a ako ich používať na maximalizáciu používateľského zážitku a použiteľnosti.

Účelom vkladania prekryvných obrázkov a svetelných okien je ukázať používateľovi prvok, ktorý sa zobrazí v hornej časti stránky. Používatelia preto vnímajú takéto prvky ako nové stránky a stlačením tlačidla „späť“ sa na ne vrátia východisková pozícia- ale vôbec neskončia tam, kde očakávali. To je obzvlášť nešťastné, pretože používanie lightboxov len znásobuje negatívne vnímanie webovej stránky – väčšina používateľov tieto prvky na stránkach internetových obchodov nemá rada.

Používanie filtrov často zmení stránku a poskytne osobe novú skúsenosť. Preto je stránka po zoradení vnímaná ako nová, aj keď na nej nebolo nič načítané. Po každej interakcii návštevníka so stránkou internetového obchodu sa totiž získava nové zobrazenie výsledkov.

Tento príklad zdôrazňuje, že ľudia sa pri určovaní neponárajú do technických aspektov nová stránka, ale používajte len intuíciu a formované vnímanie.

3. Forma registrácie / platby

Platobná stránka je vnímaná ako nové stránky, a čo je ešte horšie - ako viacstupňový proces, ktorého každú fázu je možné zrušiť tlačidlom „späť“.

Tento prístup môže priniesť problémy, jednoduchý príklad – človek sa chce vrátiť o krok späť pri vypĺňaní formulára, aby mohol upraviť zadané informácie. Stlačením tlačidla "späť" sa vráti do košíka a vymažú sa všetky (!) zadané údaje. Podráždenie a opustenie miesta je prirodzený efekt.

Technológia AJAX možno nespĺňa očakávania používateľov: technicky sa každá stránka AJAX nachádza pod rovnakou adresou URL, no zdá sa, že sa otvárajú nové stránky.

V kontexte elektronického obchodu majú používatelia jasnú predstavu, že strana 3 a strana 4 sú oddelené a že medzi štvrtou a treťou sa dá prechádzať pomocou tlačidla Späť.

Používatelia nie sú pripravení vzdať sa tlačidla Späť

Vzhľadom na to, ako široko sa táto funkcia internetového prehliadača používa, otázka nesúladu očakávaní používateľov s víziou vývojárov sa stáva kritickou – netreba ju brať na ľahkú váhu.

Používateľom sa páčilo najmä tlačidlo „späť“. mobilné aplikácie a stránky. Výskum ukázal mobilné verzie väčšina používateľov využívala túto funkciu na všetkých navrhovaných zdrojoch. Navyše, použitie tlačidla nie je obmedzené na návrat o jednu stránku späť – niektoré subjekty ho stlačili až 15 (!) krát za sebou.

Používatelia PC tiež často stlačia tlačidlo - ale nie rovnakým spôsobom ako používatelia mobilných zariadení, pretože používatelia stolné počítače k dispozícii je pohodlná navigácia na stránke.

Riešenie

Dobrou správou je, že HTML5 má relatívne jednoduché riešenie problému a volá sa HTML5 History API. Presnejšie povedané, funkcia history.pushState () vám umožňuje zmeniť adresu URL bez opätovného načítania stránky. V súlade s tým sa stránka bude správať adekvátne očakávaniam používateľa, ktorý stlačil tlačidlo „vrátiť sa späť“.

V tomto článku sa pozrieme na to, ako môžete vytvoriť tlačidlo "Späť" na akomkoľvek mieste, ktoré potrebujete. Myslím, že už zo samotného názvu tlačidla je jasné, čo sa stane, keď naň kliknete. Takéto tlačidlo je možné vložiť do kategórie aj do samotného materiálu. Všetko sa robí úplne jednoducho.

Existuje niekoľko možností, ako môžete pridať tlačidlo, ale osobne som použil iba jeden spôsob. Konkrétne, tretia možnosť z troch, ktoré som navrhol. O niečo ďalej vám poviem, prečo práve on.

Aké máme vôbec možnosti:

1. Upravte súbory šablón Jooml.
2. Jednoducho vložte kód tlačidla, kam chcete.
3. Vytvorte modul "HTML-code", vložte tam kód tlačidla a potom zobrazte tento modul na správnom mieste.

Plus v tretej možnosti je, že ak potrebujete upraviť text na tlačidle alebo zmeniť / pridať triedu štýlu, budete musieť opraviť samotný modul a neopraviť tlačidlo na všetkých miestach, kde stojí.

Takže na jednej z mojich stránok som použil tretiu možnosť:

Bol vytvorený modul „HTML-code“ a tam pomocou rozšírenia „Sourcerer“, ktoré umožňuje pridať do materiálu ľubovoľný kód, bol vložený kód tlačidla.

Môj kód pracovného tlačidla:

Text je jemne zdobený šípkou pomocou komponentov z bootstrapu 3 a samotné tlačidlo je štylizované pomocou CSS.

Dobry den, bola tu otazka ako pri zadavani objednavky prilozit tlacitko spat a prilozit k dalsiemu tlacitku.Teraz mi to vyzera takto.Https://yadi.sk/i/_ZNvGrvEhqSk3 ..

Existuje riešenie

Zdravím vás, kto vám povie, ako sa dá urobiť tlačidlo späť napríklad v nákupnom košíku, aby sa človek mohol vrátiť na predchádzajúcu stránku?

Do šablóny vložte tlačidlo tam, kde chcete, napríklad toto

+1

Keď v prehliadači stlačím tlačidlo Späť, zdá sa, že všetky štýly vyletia, kým neobnovím stránku. Predvolený motív by sa mal zobraziť ako na obrázku nižšie) Povedzte mi, v čom je problém

Dobrý deň, v košíku som vytvoril tlačidlo "Späť", ani to nie je tlačidlo, ale iba odkaz s kódom Vrátiť sa teraz, keď sa vrátite do košíka ...

Existuje riešenie

Dobrý deň, došlo k nasledujúcemu problému: pri pridávaní položky do košíka a kliknutí na tlačidlo "späť" v prehliadači sa informácie o položkách v košíku (v dodatočnom bloku) neuložia, kým neobnovíte stránku. Tie. choď na stránku, choď...

Vami zadaná stránka používa plugin do košíka. Ako možnosť s úpravami môžete použiť odoslanie pridania tovaru nie na? Html = 1, ale na? Html = 1 & položky = 1, tým sa vráti celý obsah vozík.

Dobré popoludnie. Pri každom kroku pri pokladni je uvedené tlačidlo „Ďalej“. V téme „Suprime“ som našiel kód tlačidla: Existuje riešenie

Dobrý deň, radi vám pomôžeme: [e-mail chránený]

Pán. X

Dobré popoludnie! Vyskytol sa problém. Stránka má atypický dizajn a čiastočne (väčšina funkcií je zachovaná) zdrojový kód - nákupný košík je realizovaný formou vyskakovacieho okna.Stránka ho sprevádzkovala tak, ako je - bez dokumentácie, vysvetliviek, odkazy na...

Niekto narazil na admin panel strašne spomaľuje, hlavne keď upravujete produkt alebo šablónu. Napríklad v šablóne musíte vložiť alebo nahradiť kód, ktorý vyberiete myšou, potom sa výber uskutoční s oneskorením, v rýchlosti nového kódu tiež s oneskorením. V...

+4

Venujte pozornosť https: //site/forum/386/predlozheniy ... bod číslo dva stále nie je implementovaný, ale pokúšate sa upraviť zoznamy s 500-1000 produktmi posúvaním načítaného zoznamu ďalej, problém, ktorý opäť súvisí s bod ...

Aktualizácia Shop-Script 6.2.1

Shop Script 6.2.1 bol dnes vydaný. Čo je nové: 1. Pridaná možnosť zakázať lenivé načítanie zoznamov produktov v backende, aby sa umožnila navigácia na stránke.

Dobrý deň, vyskytol sa taký problém - nedefinovaná chyba v admin paneli, neuložia sa, časť menu zmizla, pri pridávaní nových blokov do WYSIWYG vypisuje nedefinovanú chybu.

+19 hotový

Je potrebné urobiť v administračnom paneli stránky možnosť načítania tovaru v kategóriách podľa stránky a nie podľa nakladacieho zoznamu. Ja mám napríklad 21 000 pozícií a treba ich upraviť (pridať do rôznych kategórií a pod.). Ale ak napríklad prehliadač zamrzne ...

Dobrý deň, pri práci so systémom WebAssyst Shop-Script som narazil na takýto problém: pri vstupe na stránku internetového obchodu sa namiesto čísla 0 vedľa košíka zobrazuje suma peňazí, pričom samotný košík je prázdny. Keď kliknete na odkaz "Košík", tak...

Dobré popoludnie.Na všetkých stránkach obchodu je modul, ktorý zobrazuje množstvo položiek v košíku Úlohou je zobraziť počet položiek v košíku Šablóna je predvolená. Zmenil som kód v súbore index.html takto: (ak $ wa-> shop)...

Dobrý deň. Ako to urobiť, aby sa používateľovi vo frontende zobrazovali informácie o tom, koľko produktov má momentálne v nákupnom košíku? To znamená, ako vytvoriť číselné počítadlo v blízkosti košíka, ktoré bude rásť, keď budete zvyšovať ...

Otázka znie: ako docieliť, aby sa v okne košíka zobrazovalo celkové množstvo tovaru vloženého do košíka a kde pred zobrazenú sumu môžete napísať skutočné slovo "suma:" alebo slovné spojenie "tovar za sumu:"?

Existuje riešenie

Mám nasledujúci kód: Zobraziť odkaz všade okrem hlavného: (ak $ wa_url! = $ Wa-> currentUrl (0,1)) ... (/ if) A nemusím zobrazovať odkaz na troch stránkach , toto je na hlavnej stránke , na / košíku / a na / pokladni / Povedzte mi prosím , čo k tomu ešte treba pridať ...

Niekedy na webových stránkach je potrebné dočasne prejsť na inú (nazvime to pomocnú) stránku a potom sa vrátiť a pokračovať v práci s ňou. Môže to byť napríklad - stránka pomocníka, registrácia.

V tomto prípade môže byť spiatočná adresa samozrejme veľmi odlišná. Ako implementovať takýto spätný prechod na webe? Čisté html / CSS tu nebude stačiť, budete musieť použiť javascript.

Najjednoduchšie je napríklad použiť tento riadok v skripte na stránke pomocníka:

Metóda histórie si pamätá históriu prechodov na stránke a v podstate je jej použitie podobné ako pri použití tlačidiel prehliadača „Dopredu“ a „Späť“, len o niečo funkčnejšie. Toto je najjednoduchší a najpohodlnejší spôsob, ale len pod jednou podmienkou: ak sa nová (pomocná) stránka neotvorí v novom okne. Veď inak sa pomocná stránka otvorí prvýkrát (presnejšie relácia k nej bude prvá, ešte na nej neboli žiadne prechody). A to znamená, že v skutočnosti sa už niet kam vrátiť. Preto túto metódu nemožno nazvať univerzálnou. Nebude to fungovať, ak používateľ násilne otvorí stránku na novej karte alebo to urobí za neho prehliadač - v súlade s nastaveniami. V tomto prípade nepomôže atribút target = "_ self" odkazu: z otvorenej pomocnej stránky nebude možné prejsť späť (samozrejme pokiaľ do adresy prehliadača nezadáte URL pôvodnej stránky lišta ručne).

Všestrannejší spôsob

Na jeho implementáciu budete potrebovať skripty na zdrojovej aj pomocnej stránke. Myšlienka môže byť rôzna. Jedna z nich je založená na tom, že adresa (URL) pôvodnej stránky je uložená v adresnom riadku prehliadača ako požiadavka GET. Tým. pomocná stránka, keď dostane takúto požiadavku, pozná pôvod požiadavky. Na základe toho sa stáva možné prepnúť späť, t.j. na stránku, z ktorej bol prechod vykonaný.

Schematicky to možno znázorniť takto:

Scenár na pôvodnej stránke

Na stránke, KTORÝM by sa mal prechod vykonať, je nasledujúci skript, ktorý je funkciou - handlerom kliknutia myšou (onclick):

Aby funkcia v skripte fungovala, musíte nainštalovať jej handler na nejaký prvok jedným zo spôsobov, napríklad takto:

http://example.com "onclick =" to_comment_rules (“http://example.com”); return false "> Kliknutím prejdete na podstránku

Všimnite si, že atribút href tohto odkazu má zodpovedajúcu adresu, ktorá je špecifikovaná vo funkcii obsluhy udalosti onclick. Deje sa tak, aby vyhľadávacie roboty pochopili, na ktorú stránku odkaz prejde po kliknutí na odkaz. Ak to nie je potrebné, potom by ste mali vytvoriť prázdny atribút href, napríklad

Princíp tohto skriptu spočíva v tom, že pri volaní funkcie save_back (url) sa otvorí (pomocná) stránka s url adresou. Na tento účel je definovaný protokol stránky (napríklad http alebo https), ako aj zvyšok adresy URL pôvodnej webovej stránky, možno aj s dostupnými údajmi požiadavky GET (to je to, čo je v adrese URL za znakom „?“). Prijaté dáta sa pridajú k URL otváranej stránky – a prebehne na ňu prechod.

Skript na stránke pomocníka

Mal by mať niečo ako tento skript:

Tento skript sa spustí aj po kliknutí myšou na ľubovoľný prvok, na ktorom je nainštalovaný príslušný handler:

Návrat

Tento riadok prepíše predvolenú akciu kliknutia na odkaz. Faktom je, že štandardne sa postupuje po odkaze. V tomto prípade sa prechod uskutoční presne na adresu uvedenú v atribúte href. Táto adresa (najmä na pomocnej stránke) nesmie obsahovať spiatočnú adresu stránky, z ktorej sa prechod uskutočnil (ak je prechod na pomocnú stránku možný nie z jednej konkrétnej, ale z viacerých zdrojových stránok).

Skript na stránke pomocníka teda prečíta obsah panela s adresou a potom ho rozdelí na pole prvkov „?“. Upozorňujeme, že adresa URL môže obsahovať dva takéto znaky. Prvá sa objaví, ako už bolo spomenuté, kvôli tomu, že adresa pôvodnej stránky bola pridaná k adrese pomocnej stránky (mínus protokol). A druhý môže byť prítomný v dôsledku prítomnosti parametrov požiadavky GET pri načítaní pôvodnej stránky. Inými slovami, v paneli s adresou podstránky môže byť jeden alebo dva otázniky. Prechod z pomocnej stránky na pôvodnú po kliknutí na odkaz

Návrat

požiadavka sa načíta z panela s adresou a prevedie sa do rovnakého tvaru, aký mala na pôvodnej stránke, potom sa stránka načíta na túto adresu.

Poznámky

Navyše si treba uvedomiť, že v článku naozaj nejde o návrat na pôvodnú stránku, ale o jej opätovné načítanie. Ide, samozrejme, len o napodobeninu návratu. Najmä údaje zadané na tejto stránke, jej nastavenia nemusia byť uložené. Navyše, na rozdiel od RETURN, pri načítaní stránky bude otvorená od úplného začiatku stránky (t.j. jej horná časť bude umiestnená v hornej časti obrazovky). Zatiaľ čo "skutočný" backtracking vráti (pôvodnú) stránku presne tam, kde bola vykonaná navigácia. Skúsme preto oba spôsoby skombinovať.

Kombinovaná metóda

Stanovme si teda úlohu:

ak je pomocná stránka otvorená v tej istej záložke (okne), potom nech je dostupná metóda history.back ();

ale ak sa pomocná stránka otvorí v novom okne, potom by metóda diskutovaná vyššie mala fungovať (pretože v tomto prípade history.back () nebude fungovať).

Skript na stránke pomocníka sa mierne zmení (pridá sa vyššie uvedený riadok):

Najprv sa pokúsime vrátiť. Ak to funguje, zvyšok skriptu nebude fungovať a vráti sa na pôvodnú stránku na rovnakom mieste, z ktorého bol vykonaný prechod. Ak nie, tak ako predtým vytiahneme z parametrov požiadavky GET adresu pôvodnej stránky a prejdeme na ňu.

Záver

Samozrejme, tento článok ukazuje iba jednu z možností technológie „návratu“. SPÄŤ- na pôvodnú stránku. Na tento účel by sa okrem požiadavky GET mohli použiť aj ďalšie technológie, napríklad lokálne úložisko localStorage. Navyše plne simulovať návrat SPÄŤ Bolo by pekné poslať cez požiadavku GET množstvo rolovania pôvodnej stránky - aby ste sa neskôr, aj keď sa pomocná stránka otvorila v novom okne, vrátili na to isté miesto na pôvodnej stránke, odkiaľ sa prechod vykonal skôr .