Paljud kasutatavusuuringud näitavad, et kasutajad (nii algajad kui ka kogenud) kasutavad sageli oma brauseris tagasinuppu. Kahjuks mõtlevad kasutajaliidese disainerid ja turundajad harva selle kasutatavusele, arvestades praeguseid veebidisaini mudeleid, mida rakendused, animatsioonid, videod ja palju muud kasutavad. Sageli ei reageeri nende paigutuste tehniline ülesehitus hästi tagasimineku funktsioonile, mis rikub kasutajate vaimset malli ja halvendab nende kogemusi.

Selle tagajärjed võivad olla kohutavad: katsete ajal oli saidi ebapiisav reaktsioon nupu "tagasi" vajutamisele paljude kasutajate lahkumise põhjus, pealegi kuritarvitamise ja ebameeldivate arvustustega. Enamasti kaotasid isegi auväärsed hallide juustega katseisikud kohutavalt tuju.

Sellest artiklist saate teada:

• mida kasutajad ootavad tagasinupult;
• millised on 5 levinumat viga;
• lihtne lahendus nendele probleemidele.

Lahendus on tõesti väga lihtne, kuid isegi suuremad kaubamärgid jätavad selle sageli tähelepanuta. Kas parandame selle vea?

Kasutajate ootused

Lühidalt: kasutajad eeldavad, et nupp Tagasi näitab neile seda, mida nad tajuvad eelmise lehena. Sõna "taju" on väga oluline, sest eelneva lehe ja tehniliselt selle vahel on kolossaalne erinevus.

Tekib küsimus: mida kasutajad täpselt uue lehena tõlgendavad? Enamikul juhtudel, kui leht on visuaalselt oluliselt erinev, kuid samal ajal on selle saidiga kontseptuaalselt seotud, siis tajutakse seda uueks. Seetõttu on väga oluline jälgida, kuidas sait käsitleb erinevaid interaktiivseid elemente: valguskaste, vorme, filtreid ja palju muud.

Enamik külastajaid ei mõista tehnilisi probleeme, vaid loodab ainult intuitiivsetele ideedele ressursi toimimise kohta. Nii et kui nad vajutavad nuppu Tagasi, ootavad nad lehte, millel on juba olulised kogemused, ja nad saavad veidi ümber kujundatud liidesega lehe.

Allpool on kõige populaarsemad interaktiivsed elemendid ja nende kasutamine kasutajakogemuse ja kasutatavuse maksimeerimiseks.

Ülekatete ja valguskastide manustamise eesmärk on näidata kasutajale lehe ülaosas olevat elementi. Seetõttu tajuvad kasutajad selliseid elemente kui uusi lehti ja vajutavad algsesse asendisse naasmiseks nuppu "tagasi", kuid nad ei lähe sinna, kuhu nad ootasid. See on eriti kahetsusväärne, sest valguskastide kasutamine ainult mitmekordistab veebilehe negatiivset ettekujutust - enamikule kasutajatele ei meeldi need elemendid veebipoodide veebisaitidel.

Filtrite kasutamine muudab lehe sageli ja annab inimesele uue kogemuse. Seetõttu peetakse lehte pärast sortimist uueks, isegi kui sellele pole midagi laaditud. Seda seetõttu, et pärast iga külastaja suhtlemist veebipoe lehega saadakse uus tulemuste kuvamine.

See näide rõhutab, et inimesed ei süvene uue lehe määratlemisel tehnilistesse aspektidesse, vaid kasutavad ainult intuitsiooni ja kujundatud taju.

3. Registreerimise / makse vorm

Makselehte tajutakse uute lehtedena ja veel hullem - mitmeastmelise protsessina, mille iga etapi saab tühistada nupuga "tagasi".

Selline lähenemine võib tuua probleeme, lihtne näide - inimene soovib sisestatud teabe muutmiseks astuda sammu tagasi vormi täitmisel. Nupu "tagasi" vajutamine tagastab selle ostukorvi ja kustutab kõik (!) Sisestatud andmed. Ärritus ja saidilt lahkumine on loomulik mõju.

AJAX -tehnoloogia ei pruugi vastata kasutajate ootustele: tehniliselt on iga AJAX -i leht sama URL -i all, kuid tundub, et uued lehed avanevad.

E-kaubanduse kontekstis on kasutajatel selge arusaam, et leht 3 ja leht 4 on eraldi ning neljandast kuni kolmandani saab navigeerida, kasutades tagasinuppu.

Kasutajad pole valmis tagasinupust loobuma

Arvestades selle Interneti -brauseri funktsiooni laialdast kasutamist, muutub kasutajate ootuste ja arendajate nägemuse mittevastavuse küsimus kriitiliseks - seda ei tohiks võtta kergelt.

Nupp "tagasi" meeldis eriti mobiilirakenduste ja veebisaitide kasutajatele. Nagu näitas saitide mobiiliversioonide uuring, kasutas enamik kasutajaid seda funktsiooni kõigi pakutud ressursside puhul. Pealegi ei piirdu nupu kasutamine ühe lehe tagasikerimisega - mõned subjektid vajutasid seda kuni 15 (!) Korda järjest.

Ka arvutikasutajad vajutavad sageli nuppu - kuid mitte samamoodi nagu mobiilikasutajad, kuna lauaarvuti kasutajad saavad saidil hõlpsalt navigeerida.

Lahendus

Hea uudis on see, et HTML5 -l on probleemile suhteliselt lihtne lahendus ja seda nimetatakse HTML5 ajaloo API -ks. Täpsemalt võimaldab funktsioon history.pushState () muuta URL -i ilma lehte uuesti laadimata. Sellest lähtuvalt käitub sait "tagasi" nuppu vajutanud kasutaja ootustele vastavalt.

Selles artiklis vaatleme, kuidas saate luua nupu "Tagasi" mis tahes vajalikus kohas. Ma arvan, et juba nupu nime järgi on selge, mis juhtub, kui sellele klõpsate. Sellise nupu saab sisestada nii kategooriasse kui ka materjali enda sisse. Kõik tehakse üsna lihtsalt.

Nupu lisamiseks on mitu võimalust, kuid isiklikult kasutasin ainult ühte meetodit. Nimelt kolmas variant minu pakutud kolmest. Natuke edasi räägin teile, miks ta on.

Millised võimalused meil üldse on:

1. Muutke Joomli mallifaile.
2. Kleepige lihtsalt nupu kood soovitud kohta.
3. Looge "HTML -koodi" moodul, sisestage sinna nupukood ja kuvage see moodul õiges kohas.

Kolmanda variandi pluss on see, et kui peate nupul olevat teksti muutma või stiiliklassi muutma / lisama, siis peate parandama moodulit ise, mitte parandama nuppu kõikides kohtades, kus see seisab.

Niisiis kasutasin ühel oma saidil kolmandat võimalust:

Moodul "HTML-code" loodi ja seal, kasutades laiendit "Sourcerer", mis võimaldab materjalile lisada mis tahes koodi, sisestati nupukood.

Minu töötava nupu kood:

Tekst on pisut kaunistatud noolega, kasutades bootstrap 3 komponente ja nupp ise on kujundatud CSS -i kaudu.

Tere pärastlõunal, tekkis küsimus, kuidas tellimust vormistades nuppu tagasi liigutada ja järgmise nupu kõrvale panna. Nüüd näeb see minu jaoks välja selline. Https://yadi.sk/i/_ZNvGrvEhqSk3 ..

Lahendus on olemas

Tervitused, kes oskab teile öelda, kuidas saate näiteks ostukorvi teha tagasinupu, et inimene saaks eelmisele lehele naasta?

Sisestage mallile soovitud nupp, näiteks see

+1

Kui vajutan brauseri tagasinuppu, näivad kõik stiilid lendavat, kuni lehte värskendan. Vaiketeema peaks ilmuma nagu alloleval ekraanipildil) Ütle mulle, milles probleem on

Tere, tegin ostukorvi nupu "Tagasi", isegi mitte nupu, vaid lihtsalt lingi koodiga Minge tagasi kohe, kui ostukorvi tagasi lähete ...

Lahendus on olemas

Tere pärastlõunal! Seistes silmitsi järgmise probleemiga: kui lisate kauba ostukorvi ja klõpsate brauseris nuppu "Tagasi", ei salvestata ostukorvis olevate (lisablokis) olevate kaupade kohta teavet enne, kui värskendate lehte. Need. mine saidile, mine ...

Teie määratud sait kasutab ostukorvi jaoks pistikprogrammi. Muudatustena saate saata kauba lisamise mitte aadressile? Html = 1, vaid aadressile? Html = 1 & items = 1, see tagastab kogu käru.

Tere pärastlõunal. Väljaregistreerimise igal sammul on märgitud nupp "Järgmine". Teemast "Suprime" leidsin nupu koodi: Lahendus on olemas

Tere, aitame hea meelega: [e -post kaitstud]

Härra. X

Tere pärastlõunal! Tekkis probleem. Sait on ebatüüpilise kujundusega ja osaliselt (enamik funktsioone on säilinud) lähtekood - ostukorv on rakendatud hüpikakna kujul. Sait võttis selle kasutusele sellisena, nagu see on - ilma dokumentide, selgitusteta, lingid ...

Keegi sattus, administraatori paneel aeglustab kohutavalt, eriti kui muudate toodet või malli. Näiteks peate malli sisestama või asendama hiirega valitud koodi, siis toimub valik viivitusega, uue koodi määraga ka viivitusega. V ...

+4

Pange tähele asja juurde ...

Shop-Scripti värskendus 6.2.1

Shop Script 6.2.1 ilmus täna. Mida uut: 1. Lisatud on võimalus keelata taustal tooteloendite laisk laadimine, et võimaldada lehe navigeerimist. Lisatud ...

Tere pärastlõunal, tekkis selline probleem - määratlemata viga administraatori paneelil, nad ei salvesta, osa menüüst on kadunud, uute plokkide lisamisel WYSIWYG -le annab see määratlemata vea, mida ma ei värskendanud, kuna muutsin palju pkhp -s Palun ütle mulle, mida ...

+19 Valmis

Seda on vaja teha saidi administraatoripaneelil, võimalus laadida kaupu kategooriate kaupa lehtede kaupa, mitte laadimisnimekirja järgi. Näiteks on mul 21 000 ametikohta ja neid tuleb muuta (lisada erinevatesse kategooriatesse jne). Aga kui näiteks brauser hangub ...

Tere, mul tekkis WebAssyst Shop-Scripti süsteemiga töötades selline probleem: veebipoe veebisaidile sisenedes kuvatakse numbri 0 asemel ostukorvi kõrval rahasumma, samas kui ostukorv ise on tühi. Kui klõpsate lingil "Ostukorv" niimoodi ...

Tere pärastlõunal. Kõikidel poe lehtedel on moodul, mis näitab ostukorvis olevate kaupade kogust. Ülesanne on näidata ostukorvis olevate kaupade arvu. Mall on vaikimisi. Failis index.html muutsin koodi järgmiselt: (kui $ wa-> shop)...

Tere päevast. Kuidas panna kasutaja kuvama kasutajaliideses teavet selle kohta, kui palju tooteid tal praegu ostukorvis on? See tähendab, kuidas teha korvi lähedale numbriloendur, mis suurenedes kasvab ...

Küsimus on järgmine: kuidas panna ostukorvi aken kuvama sellesse pandud kauba kogusummat ja kuhu saab enne kuvatavat summat kirjutada tegeliku sõna "summa:" või fraasi "kaup summa eest"?

Lahendus on olemas

Mul on järgmine kood: kuvage link kõikjal, välja arvatud peamine: (kui $ wa_url! = $ Wa-> currentUrl (0,1)) ... (/ kui) Ja ma ei pea linki kolmel lehel kuvama , see on põhilisel, on / cart / ja on / checkout / Palun öelge mulle, mida veel sellele lisada ...

Mõnikord on veebilehtedel vajalik ajutiselt minna mõnele teisele (nimetagem seda abileheküljeks) ja seejärel tagasi minna ning sellega edasi töötada. Näiteks võib see olla abileht, registreerimine.

Sel juhul võib tagastusaadress olla väga erinev. Kuidas sellist vastupidist üleminekut saidil rakendada? Siin ei piisa puhtast html / CSS -ist, peate kasutama javascripti.

Lihtsaim on näiteks kasutada seda rida abilehe skriptis:

Ajaloo meetod mäletab lehekülgede üleminekute ajalugu ja tegelikult on selle kasutamine sarnane brauseri nuppude "Edasi" ja "Tagasi" kasutamisega, ainult pisut funktsionaalsem. See on kõige lihtsam ja mugavam viis, kuid ainult ühel tingimusel: kui uut (abi) lehte ei avata uues aknas. Lõppude lõpuks avaneb abileht esimest korda (täpsemalt on selle jaoks mõeldud seanss esimene, sellel pole veel mingeid üleminekuid). See tähendab, et tegelikult pole kuhugi tagasi minna. Seetõttu ei saa seda meetodit universaalseks nimetada. See ei tööta, kui kasutaja avab jõuga lehe uuel vahelehel või brauser teeb seda tema eest - vastavalt seadetele. Sel juhul ei aita lingi atribuut target = "_ self": avatud abilehelt pole võimalik tagasi navigeerida (kui muidugi ei sisesta brauseri aadressile algse lehe URL -i) riba käsitsi).

Mitmekülgsem viis

Selle rakendamiseks vajate skripte nii lähte- kui ka lisalehtedel. Idee võib olla erinev. Üks neist põhineb asjaolul, et algse lehe aadress (URL) salvestatakse brauseri aadressiribale GET -päringuna. Seeläbi. abileht teab sellise päringu saamisel päringu päritolu. Sellest lähtuvalt on võimalik tagasi lülituda, s.t. lehele, kust üleminek tehti.

Seda saab skemaatiliselt kujutada järgmiselt:

Skript algsel lehel

Lehel, MILLEGA tuleks üleminek teha, on järgmine skript, mis on funktsioon - hiireklõpsu käitleja (onclick):

Selleks, et skripti funktsioon toimiks, peate selle käitleja mõnele elemendile installima ühel viisil, näiteks järgmiselt:

http://example.com "onclick =" kommenteerimise_reeglitele ("http://example.com"); return false "> Klõpsake alamlehele minemiseks

Pange tähele, et selle lingi atribuudil href on vastav aadress, mis on määratud onclicki sündmuste käitleja funktsioonis. Seda tehakse selleks, et otsingurobotid saaksid lingile klõpsates aru, millisele lehele link läheb. Kui seda pole vaja, peaksite tegema tühja href -atribuudi, näiteks

Selle skripti põhimõte on see, et funktsiooni save_back (url) kutsumisel avatakse URL -aadressiga (lisa) leht. Selleks on määratletud lehe protokoll (näiteks http või https), samuti ülejäänud algse veebilehe URL, sealhulgas koos GET -päringu saadaolevate andmetega (see on see, mida on URL -is pärast märki "?"). Saadud andmed lisatakse avatava lehe URL -ile - ja sellele üleminek toimub.

Skript abistaja lehel

Sellel peaks olema midagi sellist skripti:

See skript käivitatakse ka siis, kui hiirega klõpsata mis tahes elemendil, millele vastav käitleja on installitud:

Tagasi

See rida alistab vaikimisi lingil klõpsamise toimingu. Fakt on see, et vaikimisi järgitakse linki. Sel juhul toimub üleminek täpselt atribuudis href määratud aadressile. See aadress (eriti abilehel) ei pruugi sisaldada selle lehe tagastusaadressi, kust üleminek tehti (kui üleminek abilehele on võimalik mitte üheltki konkreetselt, vaid mitmelt lähtelehelt).

Niisiis, abilehe skript loeb aadressiriba sisu ja jagab selle siis "?" Elementide massiiviks. Pange tähele, et URL -is võib olla kaks sellist märki. Esimene, nagu juba mainitud, ilmub seetõttu, et abilehe aadressile on lisatud algse lehe aadress (miinus protokoll). Ja teine ​​võib esineda GET -päringu parameetrite olemasolu tõttu algse lehe laadimisel. Teisisõnu, alamlehe aadressiribal võib olla üks või kaks küsimärki. Lingile klõpsates abilehelt algsele lehele liikumiseks

Tagasi

päring loetakse aadressiribalt ja teisendatakse samale vormile, mis oli algsel lehel, pärast mida leht sellele aadressile laaditakse.

Märkused

Lisaks tuleb märkida, et artikkel ei räägi tegelikult algsele lehele naasmisest, vaid selle uuesti laadimisest. See on muidugi vaid tagasipöördumise jäljendus. Eelkõige sellele lehele sisestatud andmeid, selle seadeid ei pruugita salvestada. Lisaks on leht laadimisel erinevalt RETURN -ist avatud saidi algusest peale (st selle ülemine osa asub ekraani ülaosas). Arvestades, et "tõeline" tagasiminek tagastab (algse) lehe täpselt sinna, kus navigeerimine tehti. Seetõttu proovime ühendada mõlemad meetodid.

Kombineeritud meetod

Seame siis ülesande:

kui abileht avatakse samal vahekaardil (aknas), siis olgu meetod history.back () saadaval;

aga kui abileht avaneb uues aknas, siis peaks ülalkirjeldatud meetod toimima (sest sel juhul history.back () ei tööta).

Abi lehe skript muutub veidi (ülaltoodud rida lisatakse):

Esiteks proovime tagasi minna. Kui see töötab, ei tööta ülejäänud skript ja naaseb algsele lehele samas kohas, kust üleminek tehti. Kui ei, siis nagu varem, eraldame GET -päringu parameetritest algse lehe aadressi ja läheme sellele.

Järeldus

Loomulikult näitab see artikkel ainult ühte "tagastamise" tehnoloogia valikutest TAGASI- algsele lehele. Sel eesmärgil võiks lisaks GET -päringule kasutada ka muid tehnoloogiaid, näiteks kohalikku salvestusruumi localStorage. Lisaks, et täielikult simuleerida tagasipöördumist TAGASI Oleks tore saata GET -päringu kaudu algse lehe kerimise maht - nii et hiljem, isegi kui avate abilehe uues aknas, naaseksite algsele lehele samasse kohta, kust varem üleminek tehti .