Mnoho studií použitelnosti ukazuje, že uživatelé (nováčci i zkušení) často používají ve svém prohlížeči tlačítko Zpět. Frontendoví návrháři a obchodníci bohužel jen zřídka přemýšlejí o důsledcích použitelnosti - vzhledem k moderním modelům webového designu, které aplikace, animace, videa a další používají. Technická struktura těchto rozvržení často nereaguje dobře na funkci návratu, která narušuje mentální vzorce uživatelů a zhoršuje jejich zkušenosti.

Důsledky toho mohou být strašné: během experimentů byla neadekvátní reakce webu na stisknutí tlačítka „zpět“ důvodem, proč mnoho uživatelů odešlo, a to se zneužíváním a nelichotivými recenzemi. Ve většině případů byli i úctyhodní, šedovlasí poddaní strašně naštvaní.

V tomto článku se dozvíte:

• co uživatelé očekávají od tlačítka Zpět;
• jaké jsou 5 nejčastějších chyb;
• jednoduché řešení těchto problémů.

Řešení je opravdu velmi jednoduché, ale často je opomíjeno i těmi největšími značkami. Opravíme tuto chybu?

Očekávání uživatelů

Stručně řečeno: uživatelé očekávají, že jim tlačítko pro návrat ukáže, co vnímají jako předchozí stránku. Slovo „vnímat“ je velmi důležité, protože existuje obrovský rozdíl mezi tím, co se zdá být předchozí stránkou, a tím, co je technicky.

Nabízí se otázka: co přesně uživatelé interpretují jako novou stránku? Pokud je stránka ve většině případů vizuálně výrazně odlišná, ale zároveň koncepčně souvisí s webem, pak je vnímána jako nová. Proto je velmi důležité sledovat, jak web zpracovává různé interaktivní prvky: lightboxy, formuláře, filtry a další.

Většina návštěvníků nerozumí technickým problémům, ale spoléhá pouze na intuitivní představy o tom, jak by měl zdroj fungovat. Když tedy stisknou tlačítko Zpět, očekávají stránku, která již má důležité zkušenosti, a zobrazí se jim stránka s mírně přepracovaným rozhraním.

Níže jsou uvedeny nejpopulárnější interaktivní prvky a jejich použití k maximalizaci uživatelského zážitku a použitelnosti.

Účelem vkládání překryvů a lightboxů je ukázat uživateli prvek, který se zobrazí v horní části stránky. Uživatelé proto takové prvky vnímají jako nové stránky a stisknutím tlačítka „zpět“ se vrátí do své původní polohy - ale nejdou tam, kde očekávali. To je obzvlášť nešťastné, protože používání lightboxů pouze znásobuje negativní vnímání webové stránky - většině uživatelů se tyto prvky na webech internetových obchodů nelíbí.

Používání filtrů často stránku transformuje a dává člověku nový zážitek. Stránka po třídění je proto vnímána jako nová, i když na ni nebylo nic načteno. Důvodem je, že po každé interakci návštěvníka se stránkou internetového obchodu se získá nové zobrazení výsledků.

Tento příklad zdůrazňuje, že lidé se při definování nové stránky nezabývají technickými aspekty, ale používají pouze intuici a formované vnímání.

3. Forma registrace / platby

Platební stránka je vnímána jako nové stránky a ještě hůře - jako vícestupňový proces, jehož každou fázi lze zrušit tlačítkem „vrátit se“.

Tento přístup může přinést problémy, jednoduchý příklad - člověk se chce vrátit o krok zpět při vyplňování formuláře, aby mohl upravit zadané informace. Stisknutím tlačítka „zpět“ jej vrátíte do košíku a smažete všechna (!) Zadaná data. Podráždění a opuštění místa je přirozený efekt.

Technologie AJAX nemusí splňovat očekávání uživatelů: technicky je každá stránka AJAX pod stejnou adresou URL, ale vypadá to, že se otevírají nové stránky.

V kontextu elektronického obchodování uživatelé jasně vnímají, že stránka 3 a stránka 4 jsou oddělené a ze čtvrté na třetí stránku lze procházet pomocí tlačítka Zpět.

Uživatelé nejsou připraveni vzdát se tlačítka Zpět

Vzhledem k rozšířenému používání této funkce internetového prohlížeče se stává otázka nesouladu očekávání uživatelů s vizí vývojářů kritickou - není třeba ji brát na lehkou váhu.

Tlačítko „vrátit se“ si oblíbili zejména uživatelé mobilních aplikací a webů. Jak ukázala studie mobilních verzí webů, většina uživatelů používala tuto funkci na všech navrhovaných zdrojích. Kromě toho se použití tlačítka neomezuje na vrácení jedné stránky - některé subjekty jej stiskly až 15 (!) Krát za sebou.

Uživatelé počítačů často stisknou tlačítko - ale ne stejným způsobem jako mobilní uživatelé, protože uživatelé počítačů se mohou na webu snadno pohybovat.

Řešení

Dobrou zprávou je, že HTML5 má relativně jednoduché řešení problému a nazývá se HTML5 History API. Přesněji řečeno, funkce history.pushState () vám umožňuje změnit adresu URL bez opětovného načtení stránky. V souladu s tím se bude web chovat přiměřeně očekávání uživatele, který stiskl tlačítko „vrátit se“.

V tomto článku se podíváme na to, jak můžete vytvořit tlačítko „Zpět“ na libovolném místě, které potřebujete. Myslím, že ze samotného názvu tlačítka je již zřejmé, co se stane, když na něj kliknete. Takové tlačítko lze vložit jak do kategorie, tak do samotného materiálu. Všechno se dělá docela jednoduše.

Existuje několik možností, jak přidat tlačítko, ale já osobně jsem použil pouze jednu metodu. Totiž třetí možnost ze tří, které jsem navrhl. O kousek dál vám řeknu, proč je.

Jaké možnosti vůbec máme:

1. Upravte soubory šablon Jooml.
2. Stačí vložit kód tlačítka na požadované místo.
3. Vytvořte modul „HTML kód“, vložte tam kód tlačítka a poté tento modul zobrazte na správném místě.

Výhodou třetí možnosti je, že pokud potřebujete upravit text na tlačítku nebo změnit / přidat třídu stylu, budete muset opravit samotný modul a neopravovat tlačítko na všech místech, kde stojí.

Na jednom ze svých webů jsem tedy použil třetí možnost:

Byl vytvořen modul „HTML-kód“ a tam pomocí rozšíření „Sourcerer“, které umožňuje přidat do materiálu libovolný kód, byl vložen kód tlačítka.

Můj funkční kód tlačítka:

Text je mírně ozdoben šipkou pomocí komponent z bootstrapu 3 a samotné tlačítko je stylizováno pomocí CSS.

Dobré odpoledne, při zadávání objednávky byla otázka, jak přesunout tlačítko zpět a umístit jej vedle tlačítka. Nyní to pro mě vypadá takto. Https://yadi.sk/i/_ZNvGrvEhqSk3 ..

Existuje řešení

Zdravím vás, kdo vám může říct, jak můžete udělat tlačítko zpět, například v nákupním košíku, aby se člověk mohl vrátit na předchozí stránku?

Vložte do šablony tlačítko, kam chcete například toto

+1

Když v prohlížeči stisknu tlačítko Zpět, všechny styly vypadnou, dokud stránku neobnovím Výchozí motiv by se měl zobrazit jako na obrázku níže) Řekněte mi, v čem je problém

Dobrý den, vytvořil jsem v košíku tlačítko „Zpět“, ani tlačítko, ale pouze odkaz s kódem Vrátit se nyní, když se vrátíte do košíku ...

Existuje řešení

Dobré odpoledne! Potýkáme se s následujícím problémem: při přidání položky do košíku a kliknutí na tlačítko „zpět“ v prohlížeči se informace o položkách v košíku (v dalším bloku) neuloží, dokud stránku neobnovíte. Tito. jdi na web, jdi ...

Web, který jste zadali, používá pro košík plugin. Jako možnost s úpravami můžete použít odeslání zboží ne na? Html = 1, ale na? Html = 1 & items = 1, tím se vrátí celý obsah vozík.

Dobré odpoledne. V každém kroku při pokladně je uvedeno tlačítko „Další“. V tématu „Suprime“ jsem našel kód tlačítka: Existuje řešení

Dobrý den, rádi pomůžeme: [chráněno emailem]

Pan. X

Dobré odpoledne! Potýkal se s problémem. Stránka má atypický design a částečně (většina funkcí je zachována) zdrojový kód - nákupní košík je implementován formou vyskakovacího okna. Stránka jej uvedla do provozu tak, jak je - bez dokumentace, vysvětlení, odkazy na ...

Někdo narazil, administrátorský panel strašně zpomaluje, zvláště když upravujete produkt nebo šablonu. Například v šabloně musíte vložit nebo nahradit kód, který vyberete myší, pak k výběru dojde se zpožděním, v rychlosti nového kódu také se zpožděním. PROTI...

+4

Věnujte pozornost https: // site/forum/386/predlozheniy ... bod číslo dva dosud nebyl implementován, ale pokoušíte se upravit seznamy s 500-1000 produkty posouváním načteného seznamu dále, problém, který opět souvisí do té míry ...

Aktualizace Shop-Script 6.2.1

Dnes byl vydán Shop Script 6.2.1. Co je nového: 1. Přidána možnost deaktivovat opožděné načítání seznamů produktů v backendu, aby byla povolena navigace po stránce. Přidáno ...

Dobré odpoledne, došlo k takovému problému - nedefinovaná chyba v administračním panelu, neuloží se, část nabídky zmizela, při přidávání nových bloků do WYSIWYG to dává nedefinovanou chybu, kterou jsem neaktualizoval, protože jsem hodně změnil v pkhp Prosím, řekněte mi, co ...

+19 Hotovo

Je nutné to provést v administračním panelu webu, možnost načítání produktů v kategoriích podle stránky, a ne pomocí načítání seznamu. Například mám 21 000 pozic a je třeba je upravit (přidat do různých kategorií atd.). Pokud ale například prohlížeč zablokuje ...

Dobrý den, při práci se systémem WebAssyst Shop-Script jsem narazil na takový problém: při vstupu na webovou stránku internetového obchodu se místo čísla 0 vedle Košíku zobrazuje částka peněz, zatímco samotný košík je prázdný. Když takto kliknete na odkaz „Košík“ ...

Dobré odpoledne. Na všech stránkách obchodu je modul, který zobrazuje množství položek v košíku. Úkolem je ukázat počet položek v košíku. Šablona je výchozí. V souboru index.html jsem kód změnil takto: (pokud $ wa-> shop)...

Dobré odpoledne. Jak můžete přimět uživatele, aby v frontendu zobrazoval informace o tom, kolik produktů má aktuálně v nákupním košíku? To znamená, jak vytvořit číselný čítač poblíž koše, který bude růst, jak budete zvyšovat ...

Otázkou je: jak nastavit, aby okno košíku zobrazovalo celkové množství zboží, které je do něj vloženo, a kam můžete před zobrazenou částku napsat skutečné slovo „částka:“ nebo sousloví „zboží za částku:“?

Existuje řešení

Mám následující kód: Zobrazit odkaz všude kromě hlavního: (if $ wa_url! = $ Wa-> currentUrl (0,1)) ... (/ if) A nemusím odkaz zobrazovat na třech stránkách , to je na hlavní stránce, na / košíku / a na / pokladně / Prosím, řekněte mi, co dalšího je třeba k tomuto přidat ...

Někdy je na webových stránkách nutné dočasně přejít na jinou (říkejme tomu pomocná) stránka a pak se vrátit a pokračovat v práci s ní. Může to být například stránka nápovědy, registrace.

V tomto případě může být zpáteční adresa velmi odlišná. Jak implementovat takový reverzní přechod na web? Čistý html / CSS zde nebude stačit, budete muset použít javascript.

Nejjednodušší je například použít tento řádek ve skriptu na pomocné stránce:

Metoda historie si pamatuje historii přechodů na stránce a ve skutečnosti je její použití podobné použití tlačítek „Vpřed“ a „Zpět“ v prohlížeči, jen o něco funkčnější. Toto je nejjednodušší a nejpohodlnější způsob, ale pouze za jedné podmínky: pokud se nová (pomocná) stránka neotevře v novém okně. Ostatně, jinak se pomocná stránka otevře poprvé (přesněji relace pro ni bude první, zatím na ní nebyly žádné přechody). To znamená, že ve skutečnosti není kam se vrátit. Tuto metodu proto nelze nazvat univerzální. Nebude to fungovat, pokud uživatel násilím otevře stránku na nové kartě nebo to za něj udělá prohlížeč - v souladu s nastavením. V takovém případě nepomůže atribut target = "_ self" odkazu: nebude možné se z otevřené pomocné stránky vrátit zpět (pokud ovšem do adresy prohlížeče nezadáte URL původní stránky ručně).

Univerzálnější způsob

K jeho implementaci budete potřebovat skripty na zdrojové i pomocné stránce. Myšlenka může být odlišná. Jeden z nich vychází ze skutečnosti, že adresa (URL) původní stránky je uložena v adresním řádku prohlížeče jako požadavek GET. Tím. pomocná stránka, když obdrží takový požadavek, zná původ požadavku. Na základě toho je možné přepnout zpět, tj. na stránku, ze které byl přechod proveden.

To lze schematicky znázornit následovně:

Skript na původní stránce

Na stránce, S KTERÝM má být přechod proveden, je následující skript, což je funkce - obsluha kliknutí myší (onclick):

Aby funkce ve skriptu fungovala, je třeba nainstalovat jeho obslužný program na nějaký prvek jedním ze způsobů, například takto:

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

Atribut href tohoto odkazu má odpovídající adresu, která je uvedena ve funkci obslužné rutiny události onclick. To se provádí tak, aby vyhledávací roboti po kliknutí na odkaz pochopili, na kterou stránku odkaz přejde. Pokud to není potřeba, měli byste vytvořit prázdný atribut href, jako

Princip tohoto skriptu spočívá v tom, že při volání funkce save_back (url) se otevře (pomocná) stránka s adresou URL. Za tímto účelem je definován protokol stránky (například http nebo https) a zbytek adresy URL původní webové stránky, včetně případně dostupných dat požadavku GET (to je to, co je v URL za znakem „?“). Přijatá data se přidají k adrese URL otevírané stránky - a dojde k jejímu přechodu.

Skript na stránce pomocníka

Mělo by to mít něco jako tento skript:

Tento skript se také spustí po kliknutí myší na jakýkoli prvek, na kterém je nainstalován odpovídající obslužný program:

Vrátit se

Tento řádek přepíše výchozí akci kliknutí na odkaz. Faktem je, že ve výchozím nastavení je odkaz následován. V tomto případě dojde k přechodu přesně na adresu uvedenou v atributu href. Tato adresa (zejména na pomocné stránce) nesmí obsahovat zpáteční adresu stránky, ze které byl přechod proveden (pokud je přechod na pomocnou stránku možný nikoli z jedné konkrétní, ale z několika zdrojových stránek).

Skript na pomocné stránce tedy přečte obsah adresního řádku a poté jej rozdělí na pole prvků „?“. Upozorňujeme, že v adrese URL mohou být dva takové znaky. První se objeví, jak již bylo zmíněno, vzhledem k tomu, že na adresu pomocné stránky byla přidána adresa (minus protokol) původní stránky. A druhý by mohl být přítomen v důsledku přítomnosti parametrů požadavku GET při načítání původní stránky. Jinými slovy, v adresním řádku podstránky může být jeden nebo dva otazníky. Po kliknutí na odkaz přejdete z pomocné stránky na původní

Vrátit se

požadavek se přečte z adresního řádku a převede se do stejného formuláře, jaký měl na původní stránce, a poté se stránka načte na tuto adresu.

Poznámky

Kromě toho je třeba poznamenat, že článek ve skutečnosti není o návratu na původní stránku, ale o jejím opětovném načtení. Toto je samozřejmě jen napodobenina návratu. Zejména data zadaná na této stránce, její nastavení nemusí být uložena. Navíc, na rozdíl od NÁVRATU, když je stránka načtena, bude otevřena od samého začátku webu (tj. Její horní část bude umístěna v horní části obrazovky). Zatímco „true“ backtracking vrací (původní) stránku přesně tam, kde byla navigace provedena. Zkusme tedy obě metody zkombinovat.

Kombinovaná metoda

Pojďme tedy nastavit úkol:

pokud je pomocná stránka otevřena na stejné kartě (okně), pak ať je k dispozici metoda history.back ();

ale pokud se pomocná stránka otevře v novém okně, pak by výše popsaná metoda měla fungovat (protože v tomto případě history.back () nebude fungovat).

Skript na pomocné stránce se mírně změní (bude přidán výše uvedený řádek):

Nejprve se pokusíme vrátit. Pokud to funguje, zbytek skriptu nebude fungovat a vrátí se na původní stránku na stejném místě, ze kterého byl proveden přechod. Pokud ne, pak, stejně jako dříve, extrahujeme adresu původní stránky z parametrů požadavku GET a jdeme na ni.

Závěr

Tento článek samozřejmě ukazuje pouze jednu z možností technologie „návratu“ ZADNÍ- na původní stránku. Za tímto účelem by kromě požadavku GET mohly být použity další technologie, například místní úložiště localStorage. Navíc plně simulovat návratnost ZADNÍ Bylo by hezké poslat prostřednictvím požadavku GET míru posouvání původní stránky - aby se později, i při otevření pomocné stránky v novém okně, vrátil na stejné místo na původní stránce, odkud byl přechod proveden dříve .