Sok használhatósági tanulmány kimutatja, hogy a felhasználók (kezdők és tapasztaltak is) gyakran használják a Vissza gombot a böngészőben. Sajnos a front-end tervezők és marketingszakemberek ritkán gondolkoznak ennek használhatósági vonatkozásain, tekintettel a jelenlegi webdesign-modellekre, amelyeket az alkalmazások, animációk, videók és még sok más használ. Az ilyen elrendezések technikai felépítése gyakran nem reagál jól a visszalépés funkcióra, ami megtöri a felhasználók mentális mintázatát és rontja a tapasztalataikat.

Ennek következményei szörnyűek lehetnek: a kísérletek során a webhely nem megfelelő reakciója a "vissza" gomb megnyomására volt az oka annak, hogy sok felhasználó távozott, és visszaélésekkel és hízelgő véleményekkel. A legtöbb esetben még a tekintetes, ősz hajú tesztalanyok iszonyatosan elvesztették a türelmüket.

Ebből a cikkből megtudhatja:

• mit várnak el a felhasználók a vissza gombotól;
• mi az 5 leggyakoribb hiba;
• egyszerű megoldás ezekre a problémákra.

A megoldás valóban nagyon egyszerű, de gyakran még a legnagyobb márkák is figyelmen kívül hagyják. Javítsuk ezt a hibát?

A felhasználói elvárások

Röviden: a felhasználók elvárják, hogy a visszalépés gomb megmutatja nekik, mit látnak az előző oldalnak. Az "észlelés" szó nagyon fontos, mert óriási különbség van az előző oldalnak látszó és a technikai között.

Felmerül a kérdés: pontosan mit értelmeznek a felhasználók új oldalként? A legtöbb esetben, ha egy oldal vizuálisan jelentősen eltér egymástól, ugyanakkor fogalmilag kapcsolódik az oldalhoz, akkor azt újnak kell tekinteni. Ezért nagyon fontos nyomon követni, hogy a webhely hogyan kezeli a különböző interaktív elemeket: átvilágítódobozokat, űrlapokat, szűrőket stb.

A látogatók többsége nem érti a technikai kérdéseket, de csak intuitív ötletekre támaszkodik az erőforrás működésével kapcsolatban. Tehát amikor megnyomják a Vissza gombot, egy olyan oldalt várnak, amely már fontos tapasztalatokkal rendelkezik, és egy kicsit áttervezett felületű oldalt kapnak.

Az alábbiakban bemutatjuk a legnépszerűbb interaktív elemeket, valamint azok használatát a felhasználói élmény és a használhatóság maximalizálása érdekében.

A fedvények és az átvilágítódobozok beágyazásának célja, hogy megmutassa a felhasználónak az oldal tetején megjelenő elemet. Ezért a felhasználók az ilyen elemeket új oldalaknak tekintik, és a "vissza" gomb megnyomásával visszatérnek eredeti pozíciójukhoz - de nem mennek oda, ahová számítottak. Ez különösen sajnálatos, mert a lightboxok használata csak megsokszorozza a weboldal negatív megítélését - a legtöbb felhasználó nem szereti ezeket az elemeket az online áruházak webhelyein.

A szűrők használata gyakran átalakítja az oldalt, és új élményt nyújt a személynek. Ezért az oldalt a rendezés után újnak tekinti, még akkor is, ha nem töltött be semmit. Ennek oka az, hogy a látogató minden interakciója után az online áruház valamelyik oldalával új eredmények jelennek meg.

Ez a példa hangsúlyozza, hogy az emberek nem mennek bele a technikai szempontokba az új oldal meghatározásakor, hanem csak az intuíciót és a kialakult felfogást használják.

3. Regisztráció / fizetés formája

A fizetési oldalt új oldalakként fogják fel, és ami még rosszabb - többlépcsős folyamatként, amelynek minden szakasza a "visszalépés" gombbal törölhető.

Ez a megközelítés problémákat okozhat, egy egyszerű példa - egy személy szeretne visszalépni egy lépést az űrlap kitöltésével a beírt információk szerkesztése érdekében. A "vissza" gomb megnyomásával visszatér a kosárba, és törli az összes (!) Bevitt adatot. Az irritáció és az oldal elhagyása természetes hatás.

Előfordulhat, hogy az AJAX technológia nem felel meg a felhasználói elvárásoknak: technikailag minden AJAX -oldal ugyanazon az URL -címen van, de úgy tűnik, új oldalak nyílnak meg.

E-kereskedelmi kontextusban a felhasználók egyértelműen érzékelik, hogy a 3. és a 4. oldal külön vannak, és a negyediktől a harmadikig a vissza gomb segítségével navigálhatnak.

A felhasználók nem állnak készen arra, hogy feladják a vissza gombot

Tekintettel az internetes böngésző ezen funkciójának széles körű elterjedésére, a felhasználói elvárásoknak a fejlesztők elképzeléseivel való összeegyeztetése kritikus fontosságúvá válik - nem szabad félvállról venni.

A "visszalépés" gombot különösen kedvelték a mobil alkalmazások és webhelyek felhasználói. Amint azt a webhelyek mobil verzióinak tanulmányozása is mutatja, a felhasználók többsége ezt a funkciót használta az összes javasolt erőforráson. Sőt, a gomb használata nem korlátozódik az egy oldal visszagörgetésére - egyes témák 15 (!) Alkalommal nyomták meg egymás után.

A PC -felhasználók gyakran megnyomnak egy gombot is - de nem ugyanúgy, mint a mobil felhasználók, mivel az asztali felhasználók könnyen navigálhatnak a webhelyen.

Megoldás

A jó hír az, hogy a HTML5 viszonylag egyszerű megoldást kínál a problémára, és HTML5 History API -nak hívják. Pontosabban, a history.pushState () függvény lehetővé teszi az URL megváltoztatását az oldal újratöltése nélkül. Ennek megfelelően az oldal megfelelően viselkedik a "visszalépés" gombot megnyomó felhasználó elvárásainak megfelelően.

Ebben a cikkben megvizsgáljuk, hogyan hozhat létre "Vissza" gombot a kívánt helyen. Azt hiszem, már a gomb nevében is egyértelmű, hogy mi fog történni, ha rákattint. Egy ilyen gomb mind a kategóriába, mind magába az anyagba beilleszthető. Minden nagyon egyszerűen történik.

Számos lehetőség van a gomb hozzáadására, de én személy szerint csak egy módszert használtam. Mégpedig az általam javasolt három lehetőség közül a harmadik lehetőség. Kicsit tovább elmondom, miért van.

Milyen lehetőségeink vannak egyáltalán:

1. A Jooml sablonfájlok szerkesztése.
2. Csak illessze be a gomb kódját a kívánt helyre.
3. Hozzon létre egy "HTML kód" modult, illessze be a gombkódot, majd jelenítse meg ezt a modult a megfelelő helyen.

A harmadik lehetőség pluszja, hogy ha szerkesztenie kell a gomb szövegét, vagy módosítania kell / hozzá kell adnia egy stílusosztályt, akkor magát a modult kell kijavítania, és nem minden helyen kell rögzítenie a gombot.

Tehát az egyik webhelyemen a harmadik lehetőséget használtam:

A "HTML-code" modul létrejött, és ott a "Sourcerer" kiterjesztés használatával, amely lehetővé teszi bármilyen kód hozzáadását az anyaghoz, a gomb kódját beillesztették.

Munkagomb kódom:

A szöveg kissé nyíllal díszített a bootstrap 3 összetevőiből, és maga a gomb CSS -en keresztül van formázva.

Jó napot, felmerült egy kérdés, hogyan lehet a gombot visszahelyezni és a következő gomb mellé helyezni a megrendeléskor. Most így néz ki számomra. Https://yadi.sk/i/_ZNvGrvEhqSk3 ..

Van megoldás

Üdvözlet, ki tudja megmondani, hogyan készíthet vissza gombot, például a bevásárlókosárba, hogy egy személy visszatérhessen az előző oldalra?

Helyezzen be egy gombot a sablonba, ahová szeretné, például ezt

+1

Amikor megnyomom a Vissza gombot a böngészőben, úgy tűnik, hogy az összes stílus elrepül, amíg frissítem az oldalt. Az alapértelmezett téma az alábbi képernyőképen látható módon jelenik meg) Mondja el, mi a probléma

Sziasztok, csináltam egy "Vissza" gombot a bevásárlókosárban, nem is egy gombot, hanem csak egy linket kóddal Menj vissza most, amikor visszamegy a kosárba ...

Van megoldás

Jó napot! A következő problémával szembesült: amikor elemet tesz a kosárba, és a böngészőben a "Vissza" gombra kattint, a kosárban (a további blokkban) található termékekre vonatkozó információk nem kerülnek mentésre, amíg nem frissíti az oldalt. Azok. menj az oldalra, menj ...

Az Ön által megadott webhely beépülő modult használ a kosárhoz. Módosított opcióként az áruk hozzáadását nem a? Html = 1 címre, hanem a? Html = 1 & items = 1 címre küldheti, így a a szekeret.

Jó napot. A fizetés során minden lépésnél megjelenik a "Tovább" gomb. A "Suprime" témában megtaláltam a gomb kódját: Van megoldás

Sziasztok, szívesen segítünk: [e -mail védett]

Úr. x

Jó napot! Hiba történt. Az oldal atipikus kialakítású, és részben (a legtöbb funkciót megőrzik) a forráskódot - a bevásárlókosár felugró ablak formájában valósul meg. Az oldal üzembe helyezte úgy, ahogy van - dokumentáció, magyarázat, linkek a ...

Valaki rábukkant, az adminisztrációs panel rettenetesen lelassul, különösen akkor, ha egy terméket vagy sablont szerkeszt. Például a sablonban be kell illesztenie vagy le kell cserélnie a kiválasztott kódot az egérrel, majd a kiválasztás késleltetéssel történik, az új kód arányában is, késéssel. V ...

+4

Vigyázzon: https: // site/forum/386/predlozheniy ... a második számú pont még nem valósult meg, de megpróbálja szerkeszteni a listákat 500-1000 termékkel a betöltött lista további görgetésével, ez a probléma ismét kapcsolódik lényegre törő ...

Shop-Script frissítés 6.2.1

A Shop Script 6.2.1 ma jelent meg. Újdonságok: 1. Hozzáadva a terméklisták lusta betöltésének letiltásához a háttérben az oldalszámozás engedélyezéséhez. Hozzáadva ...

Jó napot, volt egy ilyen probléma - egy nem definiált hiba az adminisztrációs panelen, nem fognak menteni, a menü egy része eltűnt, amikor új blokkokat ad hozzá a WYSIWYG -hez, ez egy nem definiált hibát ad, amit nem frissítettem, mert módosítottam egy sok pkhp -ben, kérem, mondja meg, mit ...

+19 Kész

Ezt az oldal adminisztrációs paneljén kell elvégezni, az áruk oldal szerinti kategóriákba történő betöltésének lehetőségét, nem pedig rakodási lista szerint. Például 21 000 pozícióm van, és azokat szerkeszteni kell (különféle kategóriákhoz hozzá kell adni stb.). De ha például leáll a böngésző ...

Helló, ilyen problémával találkoztam, amikor a WebAssyst Shop-Script rendszerrel dolgoztam: egy online áruház webhelyére való belépéskor a 0 szám helyett a kosár mellett megjelenik a pénzösszeg, miközben maga a kosár üres. Ha a "Kosár" linkre kattint, így ...

Jó napot! Az üzlet minden oldalán található egy modul, amely megjeleníti a kosárban lévő tételek mennyiségét. A feladat az, hogy megjelenítse a kosárban lévő tételek számát. A sablon alapértelmezett. Az index.html fájlban a következőképpen változtattam meg a kódot: (ha $ wa-> shop)...

Jó napot. Hogyan lehet elérni, hogy a felhasználó információkat jelenítsen meg a kezelőfelületen arról, hogy jelenleg hány termék van a bevásárlókosarában? Vagyis hogyan lehet numerikus számlálót készíteni a kosár közelében, amely növekedni fog, ahogy növekszik ...

A kérdés a következő: hogyan lehet a kosár ablakában megjeleníteni a behelyezett áruk teljes mennyiségét, és hová írhatja a megjelenített összeg elé a tényleges szót "összeg:" vagy az "áru az összegért:" kifejezést?

Van megoldás

A következő kóddal rendelkezem: Jelenítse meg a linket mindenhol, kivéve a fő linket: (ha $ wa_url! = $ Wa-> currentUrl (0,1)) ... (/ ha) És nem kell megjelenítenem a linket három oldalon , ez a fő, on / cart / és on / checkout / Kérem, mondja meg, mit kell még ehhez hozzáadni ...

Néha a weboldalakon szükségessé válik, hogy ideiglenesen egy másik (nevezzük segédoldalnak) oldalra lépjen, majd menjen vissza, és folytassa a munkát vele. Ez lehet például egy súgóoldal, regisztráció.

Ebben az esetben nyilvánvalóan a visszaküldési cím nagyon eltérő lehet. Hogyan lehet végrehajtani egy ilyen fordított átmenetet az oldalon? A tiszta html / CSS itt nem lesz elég, javascriptet kell használnod.

A legegyszerűbb például, ha ezt a sort használja a segédoldal szkriptjében:

A történelem módszer megjegyzi az oldalon történt átmenetek történetét, és valójában a használata hasonló a böngésző "Előre" és "Vissza" gombjaihoz, csak valamivel funkcionálisabb. Ez a legegyszerűbb és legkényelmesebb módszer, de csak egy feltétellel: ha az új (segéd) oldalt nem új ablakban nyitják meg. Végül is, különben a segédoldal először nyílik meg (pontosabban a munkamenet lesz az első, még nem voltak rajta átmenetek). Ez azt jelenti, hogy valójában nincs hova visszamenni. Ezért ez a módszer nem nevezhető univerzálisnak. Nem fog működni, ha a felhasználó erőszakkal megnyitja az oldalt egy új lapon, vagy a böngésző megteszi érte - a beállításoknak megfelelően. Ebben az esetben a link target = "_ self" attribútuma nem segít: nem lehet visszalépni a nyitott segédoldalról (kivéve, ha természetesen megadja az eredeti oldal URL -jét a böngésző címében bár manuálisan).

Sokoldalúbb módszer

Ennek megvalósításához szkriptekre lesz szüksége mind a forrás-, mind a segédoldalon. Az elképzelés más is lehet. Az egyik azon alapul, hogy az eredeti oldal címe (URL) a böngésző címsorában GET kérésként van tárolva. Ezáltal. a segítő oldal, amikor ilyen kérést kap, ismeri a kérés eredetét. Ez alapján válik lehetővé a visszaváltás, azaz arra az oldalra, ahonnan az átmenet történt.

Ez sematikusan a következőképpen ábrázolható:

A forgatókönyv az eredeti oldalon

Az oldalon, MELYIKEN kell az átállást végrehajtani, a következő szkript található, amely egy függvény - az egérkattintás kezelője (onclick):

Annak érdekében, hogy a parancsfájl funkciója működjön, telepítenie kell a kezelőjét valamely elemre az egyik módon, például:

http://example.com "onclick =" to_comment_rules („http://example.com”); return false "> Kattintson az aloldalra lépéshez

Ne feledje, hogy ennek a hivatkozásnak a href attribútuma megfelelő címmel rendelkezik, amelyet az onclick eseménykezelő függvény ad meg. Ez azért történik, hogy a keresőrobotok megértsék, hogy a linkre kattintva melyik oldalra kerül a link. Ha erre nincs szükség, akkor üres href attribútumot kell létrehoznia, például

Ennek a szkriptnek az az elve, hogy a save_back (url) függvény meghívásakor megnyílik egy (segéd) oldal az url címmel. Ehhez meg kell határozni az oldal protokollját (például http vagy https), valamint az eredeti weboldal URL -jének többi részét, beleértve a GET kérés elérhető adatait is (ez az szerepel az URL -ben a "?" jel után). A kapott adatokat hozzáadja a megnyitott oldal URL -jéhez - és átmenetet hajt végre.

Forgatókönyv a segítő oldalon

Valami ehhez hasonló szkriptet kell tartalmaznia:

Ez a szkript akkor is elindul, ha az egérrel rákattintanak bármely elemre, amelyre a megfelelő kezelő telepítve van:

Visszatérés

Ez a sor felülírja az alapértelmezett linkkattintási műveletet. A tény az, hogy alapértelmezés szerint a linket követik. Ebben az esetben az átmenet pontosan a href attribútumban megadott címre történik. Ez a cím (különösen a segédoldalon) nem tartalmazhatja annak az oldalnak a visszaküldési címét, amelyről az átmenet történt (ha a segédoldalra való áttérés nem egyetlen konkrét, hanem több forrásoldalról lehetséges).

Tehát a segédoldal szkriptje elolvassa a címsáv tartalmát, majd felosztja egy "?" Elemek tömbjébe. Kérjük, vegye figyelembe, hogy az URL -ben két ilyen karakter lehet. Az első jelenik meg, amint azt már említettük, annak a ténynek köszönhetően, hogy az eredeti oldal címét (mínusz a protokoll) hozzáadtuk a segédoldal címéhez. A második pedig jelen lehet a GET kérés paramétereinek jelenléte következtében az eredeti oldal betöltésekor. Más szóval, egy vagy két kérdőjel lehet az aloldal címsorában. Ha a hivatkozásra kattintva a segédoldalról az eredeti oldalra szeretne lépni

Visszatérés

a kérést a címsorból olvassák be, és alakítsák át ugyanarra az űrlapra, mint az eredeti oldalon, majd az oldal betöltődik erre a címre.

Megjegyzések

Ezenkívül meg kell jegyezni, hogy a cikk valójában nem az eredeti oldalra való visszatérésről szól, hanem az újratöltésről. Ez persze csak a visszatérés utánzata. Különösen az ezen az oldalon megadott adatokat, annak beállításait nem lehet elmenteni. Ezenkívül a RETURN -nel ellentétben az oldal betöltésekor a webhely legelejétől fogva nyitva lesz (azaz felső része a képernyő tetején található). Míg az "igaz" visszalépés pontosan az (eredeti) oldalt adja vissza, ahol a navigáció történt. Ezért próbáljuk meg mindkét módszert kombinálni.

Kombinált módszer

Tehát tűzzük ki a feladatot:

ha a segédoldalt ugyanazon a lapon (ablakban) nyitják meg, akkor legyen elérhető a history.back () metódus;

de ha a segédoldal új ablakban nyílik meg, akkor a fent tárgyalt metódusnak működnie kell (mert ebben az esetben a history.back () nem fog működni).

A segédoldal szkriptje kissé megváltozik (a fenti sor hozzáadásra kerül):

Először is megpróbálunk visszamenni. Ha működik, akkor a szkript többi része nem fog működni, és ugyanott tér vissza az eredeti oldalra, ahonnan az átmenet történt. Ha nem, akkor a korábbiakhoz hasonlóan kivonjuk az eredeti oldal címét a GET kérés paramétereiből, és oda megyünk.

Következtetés

Természetesen ez a cikk csak a "visszatérési" technológia egyik lehetőségét mutatja be VISSZA- az eredeti oldalra. Ebből a célból a GET kérésen kívül más technológiák is használhatók, például a localStorage helyi tárolója. Ezen kívül, hogy teljes mértékben szimulálja a visszatérést VISSZA Jó lenne egy GET -kérésen keresztül elküldeni az eredeti oldal görgetésének mennyiségét - így később, még akkor is, ha a segédoldalt új ablakban nyitja meg, visszatérjen ugyanarra a helyre az eredeti oldalon, ahonnan az átmenet korábban történt .