Html atgriezties iepriekšējā lapā. Izveidojiet pogu "atgriezties"

Daudzi lietojamības pētījumi liecina, ka lietotāji (gan iesācēji, gan pieredzējuši) pārlūkprogrammā bieži izmanto pogu Atpakaļ. Diemžēl priekšgala dizaineri un mārketinga speciālisti reti aizdomājas par to izmantojamību, ņemot vērā mūsdienu tīmekļa dizaina modeļus, ko izmanto lietotnes, animācijas, videoklipi un daudz kas cits. Bieži vien šādu izkārtojumu tehniskā struktūra slikti reaģē uz atgriešanās funkciju, kas pārtrauc lietotāja garīgo modeli un pasliktina viņa pieredzi.

Tā sekas var būt drausmīgas: eksperimentu laikā vietnes neatbilstošā reakcija uz pogas "Atpakaļ" nospiešanu bija iemesls daudziem lietotājiem aiziet, turklāt ar ļaunprātīgu izmantošanu un neglaimojošām atsauksmēm. Vairumā gadījumu pat cienījamie, pelēkmatainie testa subjekti šausmīgi zaudēja savaldību.

Šajā rakstā jūs uzzināsit:

  • ko lietotāji sagaida no pogas Atpakaļ;
  • kādas ir 5 visbiežāk pieļautās kļūdas;
  • vienkāršs risinājums šīm problēmām.

Risinājums patiešām ir ļoti vienkāršs, taču pat lielākie zīmoli to bieži atstāj novārtā. Vai mēs labosim šo kļūdu?

Lietotāju cerības

Īsumā: lietotāji sagaida, ka atgriešanās poga parādīs to, ko viņi uztver kā iepriekšējo lapu. Vārds "uztvert" ir ļoti svarīgs, jo pastāv kolosāla atšķirība starp to, kas, šķiet, ir iepriekšējā lapa un kas ir tehniski.

Rodas jautājums: ko tieši lietotāji interpretē kā jaunu lapu? Vairumā gadījumu, ja lapa vizuāli būtiski atšķiras, bet tajā pašā laikā ir konceptuāli saistīta ar vietni, tad tā tiek uztverta kā jauna. Tāpēc ir ļoti svarīgi izsekot, kā vietne apstrādā dažādus interaktīvus elementus: gaismas kastes, veidlapas, filtrus un daudz ko citu.

Lielākā daļa apmeklētāju nesaprot tehniskas problēmas, bet paļaujas tikai uz intuitīvām idejām par resursa darbību. Tāpēc, noklikšķinot uz pogas Atpakaļ, viņi sagaida lapu, kas jau ir ieguvusi svarīgu pieredzi, un saņem lapu ar nedaudz pārveidotu interfeisu.

Zemāk ir populārākie interaktīvie elementi un to izmantošana, lai maksimāli palielinātu lietotāju pieredzi un lietojamību.

Pārklājumu un gaismas kastes iegulšanas mērķis ir parādīt lietotājam elementu, kas parādās lapas augšpusē. Tāpēc lietotāji šādus elementus uztver kā jaunas lapas un nospiež pogu "Atpakaļ", lai atgrieztos sākotnējā pozīcijā, taču viņi nenonāk tur, kur bija gaidījuši. Tas ir īpaši žēl, jo gaismas kārbu izmantošana tikai vairo tīmekļa lapas negatīvo uztveri - lielākajai daļai lietotāju šie elementi nepatīk interneta veikalu vietnēs.

Filtru izmantošana bieži pārveido lapu un sniedz personai jaunu pieredzi. Tāpēc lapa pēc šķirošanas tiek uztverta kā jauna, pat ja tajā nekas netika ielādēts. Tas notiek tāpēc, ka pēc katras apmeklētāja mijiedarbības ar interneta veikala lapu tiek iegūts jauns rezultātu attēlojums.

Šis piemērs uzsver, ka cilvēki, definējot jaunu lapu, neiedziļinās tehniskajos aspektos, bet izmanto tikai intuīciju un veidotu uztveri.

3. Reģistrācijas / maksājuma veids

Maksājumu lapa tiek uztverta kā jaunas lapas, un vēl ļaunāk - kā daudzpakāpju process, kura katru posmu var atcelt, izmantojot pogu "atgriezties".

Šī pieeja var radīt problēmas, vienkāršs piemērs - persona vēlas atgriezties, aizpildot veidlapu, lai rediģētu ievadīto informāciju. Nospiežot pogu "atpakaļ", tas tiek atgriezts grozā un tiek dzēsti visi (!) Ievadītie dati. Kairinājums un vietas atstāšana ir dabisks efekts.

AJAX tehnoloģija var neattaisnot lietotāju cerības: tehniski katrai AJAX lapai ir viens un tas pats URL, taču izskatās, ka tiek atvērtas jaunas lapas.

E-komercijas kontekstā lietotājiem ir skaidrs priekšstats, ka 3. un 4. lapa ir atsevišķi, un no ceturtās līdz trešajai lapai var pārvietoties, izmantojot pogu Atpakaļ.

Lietotāji nav gatavi atteikties no pogas Atpakaļ

Ņemot vērā to, cik plaši tiek izmantota šī interneta pārlūka funkcija, jautājums par lietotāju cerību neatbilstību izstrādātāju redzējumam kļūst kritisks - tas nav jāuztver viegli.

Poga "atgriezties" īpaši patika mobilo lietotņu un vietņu lietotājiem. Kā parādīts vietņu mobilo versiju pētījumā, lielākā daļa lietotāju izmantoja šo funkciju visos piedāvātajos resursos. Turklāt pogas izmantošana neaprobežojas tikai ar vienas lapas atvēršanu - daži subjekti to nospieda līdz 15 (!) Reizēm pēc kārtas.

Datoru lietotāji bieži vien arī nospiež pogu, bet ne tādā pašā veidā kā mobilo ierīču lietotāji, jo galddatoru lietotāji var viegli pārvietoties vietnē.

Risinājums

Labā ziņa ir tā, ka HTML5 ir samērā vienkāršs problēmas risinājums, un to sauc par HTML5 vēstures API. Konkrētāk, funkcija history.pushState () ļauj mainīt URL, atkārtoti neielādējot lapu. Attiecīgi vietne rīkosies atbilstoši lietotāja cerībām, kurš ir nospiedis pogu "atgriezties".

Šajā rakstā mēs apskatīsim, kā jūs varat izveidot pogu “Atgriezties” jebkurā jums vajadzīgā vietā. Es domāju, ka no pašas pogas nosaukuma jau ir skaidrs, kas notiks, noklikšķinot uz tās. Šādu pogu var ievietot gan kategorijā, gan pašā materiālā. Viss tiek darīts pavisam vienkārši.

Ir vairākas iespējas, kā pievienot pogu, bet es personīgi izmantoju tikai vienu metodi. Proti, trešais variants no trim manis piedāvātajiem. Nedaudz tālāk es jums pastāstīšu, kāpēc viņš ir.

Kādas iespējas mums vispār ir:

  1. Rediģēt Jooml veidņu failus.
  2. Vienkārši ielīmējiet pogas kodu, kur vēlaties.
  3. Izveidojiet “HTML koda” moduli, ievietojiet tur pogas kodu un pēc tam parādiet šo moduli pareizajā vietā.

Pluss trešajā variantā ir tāds, ka, ja jums ir jārediģē pogas teksts vai jāmaina / jāpievieno stila klase, tad jums būs jālabo pats modulis, nevis jālabo poga visās vietās, kur tā atrodas.

Tātad, vienā no manām vietnēm es izmantoju trešo iespēju:

Tika izveidots modulis "HTML-code" un tur, izmantojot paplašinājumu "Sourcerer", kas ļauj materiālam pievienot jebkuru kodu, tika ievietots pogas kods.

Mans darba pogas kods:

Atgriezies

Teksts ir nedaudz dekorēts ar bultiņu, izmantojot bootstrap 3 komponentus, un pati poga ir veidota, izmantojot CSS.

    Labdien, bija jautājums, kā pārvietot pogu atpakaļ un novietot to blakus pogai, veicot pasūtījumu. Tagad man tas izskatās šādi. Https://yadi.sk/i/_ZNvGrvEhqSk3 ..

    Ir risinājums

    Sveicināti, kurš var pateikt, kā jūs varat izveidot pogu Atpakaļ, piemēram, iepirkumu grozā, lai persona varētu atgriezties iepriekšējā lapā?

    Ievietojiet pogu veidnē, kur vēlaties, piemēram, šo

    +1

    Nospiežot pārlūkprogrammas pogu Atpakaļ, šķiet, ka visi stili lido, līdz atsvaidzinu lapu. Noklusējuma motīvam vajadzētu parādīties, kā parādīts zemāk esošajā ekrānuzņēmumā) Pastāstiet man, kāda ir problēma

    Labdien! Grozā es izveidoju pogu "Atgriezties", pat ne pogu, bet tikai saiti ar kodu Atgriezties tagad, kad atgriezīsities grozā ...

    Ir risinājums

    Labdien! Saskāros ar šādu problēmu: pievienojot grozam preci un pārlūkprogrammā noklikšķinot uz pogas "Atpakaļ", informācija par grozā esošajām precēm (papildu blokā) netiek saglabāta, kamēr neatjaunojat lapu. Tie. dodieties uz vietni, dodieties ...

    Jūsu norādītā vietne grozam izmanto spraudni. Kā papildinājumu ar izmaiņām varat nosūtīt preču pievienošanu nevis uz? Html = 1, bet uz? Html = 1 & items = 1, tādējādi tiks atgriezts viss ratiņi.

    Labdien. Katrā izrakstīšanās posmā tiek parādīta poga "Tālāk". Tēmā "Suprime" es atradu pogas kodu: Ir risinājums

    Labdien, mēs ar prieku palīdzēsim: [e -pasts aizsargāts]

    Mr. X

    Labdien! Saskārāmies ar problēmu. Vietnei ir netipisks dizains un daļēji (lielākā daļa funkciju tiek saglabātas) avota kods - iepirkumu grozs tiek ieviests uznirstošā loga veidā. Vietne to sāka lietot tādu, kāda tā ir - bez dokumentācijas, paskaidrojumiem, saites uz ...

    Kāds saskārās, administratora panelis šausmīgi palēninās, it īpaši, ja rediģējat produktu vai veidni. Piemēram, veidnē jums ir jāievieto vai jāaizstāj atlasītais kods ar peli, tad atlase notiek ar kavēšanos, arī jaunā koda ātrumā ar aizkavi. V ...

    +4

    Pievērsiet uzmanību https: // site/forum/386/predlozheniy ... otrais punkts vēl nav ieviests, bet jūs mēģināt rediģēt sarakstus ar 500–1000 produktiem, ritinot ielādēto sarakstu tālāk, problēma, kas atkal ir saistīta līdz punktam ...

    Veikala skripta atjauninājums 6.2.1

    Šodien tika izlaists veikala skripts 6.2.1. Kas jauns: 1. Pievienota iespēja atspējot produktu sarakstu slinko ielādi aizmugurē, lai iespējotu lappušu numurēšanu. Pievienots ...

    Labdien, radās šāda problēma - nenoteikta kļūda administratora panelī, tie netiks saglabāti, daļa no izvēlnes pazuda, pievienojot jaunus blokus WYSIWYG, tas rada nenoteiktu kļūdu, kuru neatjaunināju, jo mainīju daudz pkhp, lūdzu, pastāstiet man, ko ...

    +19 Pabeigts

    Tas ir jādara vietnes administratora panelī, iespēja ielādēt preces kategorijās pēc lapas, nevis pēc kravas saraksta. Piemēram, man ir 21 000 amatu, un tie ir jārediģē (jāpievieno dažādām kategorijām utt.). Bet, ja, piemēram, pārlūks uzkaras ...

    Labdien, strādājot ar WebAssyst Shop-Script sistēmu, es saskāros ar šādu problēmu: ieejot tiešsaistes veikala vietnē, skaitļa 0 vietā naudas summa tiek parādīta blakus grozam, bet pats grozs ir tukšs. Noklikšķinot uz saites Grozs, kā šis ...

    Labdien. Visās veikala lapās ir modulis, kas parāda grozā esošo preču daudzumu. Uzdevums ir parādīt grozā esošo preču skaitu. Veidne ir noklusējuma. Failā index.html es mainīju kodu šādi: (ja $ wa-> veikals)...

    Labdien. Kā jūs varat likt lietotājam priekšpusē parādīt informāciju par to, cik daudz preču pašlaik ir viņu iepirkumu grozā? Tas ir, kā pie groza izveidot skaitlisku skaitītāju, kas pieaugs, palielinoties ...

    Jautājums ir šāds: kā panākt, lai groza logā tiktu parādīts kopējais tajā ievietoto preču daudzums, un kur pirms parādītās summas var uzrakstīt faktisko vārdu "summa:" vai frāzi "preces par summu:"?

    Ir risinājums

    Man ir šāds kods: parādīt saiti visur, izņemot galveno: (ja $ wa_url! = $ Wa-> currentUrl (0,1)) ... (/ ja) Un man nav jāparāda saite trīs lapās , tas ir galvenais, uz / grozs / un ieslēgts / izrakstīšanās / Lūdzu, pastāstiet man, kas vēl jāpievieno šim ...

Dažreiz tīmekļa lapās kļūst nepieciešams īslaicīgi pāriet uz kādu citu (sauksim to par papildu) lapu un pēc tam atgriezties un turpināt darbu ar to. Piemēram, tā var būt palīdzības lapa, reģistrācija.

Acīmredzot šajā gadījumā atgriešanās adrese var būt ļoti atšķirīga. Kā vietnē ieviest šādu reverso pāreju? Ar tīru html / CSS šeit nepietiks, jums būs jāizmanto javascript.

Vienkāršākais ir, piemēram, izmantot šo rindu skriptā palīga lapā:

Vēstures metode atceras lapas pāreju vēsturi, un patiesībā tās izmantošana ir līdzīga pārlūkprogrammas pogu “Pārsūtīt” un “Atpakaļ” izmantošanai, tikai nedaudz funkcionālāka. Tas ir vienkāršākais un ērtākais veids, bet tikai ar vienu nosacījumu: ja jaunā (palīg) lapa netiek atvērta jaunā logā. Galu galā, pretējā gadījumā palīglapa tiks atvērta pirmo reizi (precīzāk, sesija tai būs pirmā, tajā vēl nav bijušas pārejas). Tas nozīmē, ka patiesībā nav kur atgriezties. Tāpēc šo metodi nevar saukt par universālu. Tas nedarbosies, ja lietotājs piespiedu kārtā atver lapu jaunā cilnē vai pārlūks to dara viņa vietā - saskaņā ar iestatījumiem. Šajā gadījumā saites atribūts target = "_ self" nepalīdzēs: nebūs iespējams atgriezties no atvērtās palīglapas (ja vien, protams, pārlūkprogrammas adresē neievadīsit sākotnējās lapas URL) joslu manuāli).

Daudzpusīgāks veids

Lai to ieviestu, jums būs nepieciešami skripti gan avota, gan palīglapās. Ideja var būt dažāda. Viens no tiem ir balstīts uz faktu, ka sākotnējās lapas adrese (URL) tiek saglabāta pārlūkprogrammas adreses joslā kā GET pieprasījums. Tādējādi. palīga lapa, saņemot šādu pieprasījumu, zina pieprasījuma izcelsmi. Pamatojoties uz to, kļūst iespējams pārslēgties atpakaļ, t.i. uz lapu, no kuras tika veikta pāreja.

To var shematiski attēlot šādi:

Skripts sākotnējā lapā

Lapā, AR KURU jāveic pāreja, ir šāds skripts, kas ir funkcija - peles klikšķa apstrādātājs (onclick):


Lai skripta funkcija darbotos, jums ir jāinstalē tā apstrādātājs uz kāda elementa vienā no veidiem, piemēram, šādi:

http://example.com "onclick =" to_comment_rules (“http://example.com”); return false "> Noklikšķiniet, lai pārietu uz apakšlapu

Ņemiet vērā, ka šīs saites atribūtam href ir atbilstoša adrese, kas norādīta onclick notikumu apstrādātāja funkcijā. Tas tiek darīts, lai meklēšanas roboti, noklikšķinot uz saites, saprastu, uz kuru lapu tiks novirzīta saite. Ja tas nav vajadzīgs, jums jāizveido tukšs href atribūts, piemēram

Šī skripta princips ir tāds, ka, izsaucot funkciju save_back (url), tiek atvērta (palīg) lapa ar URL adresi. Lai to izdarītu, tiek definēts lapas protokols (piemēram, http vai https), kā arī pārējais sākotnējās tīmekļa lapas URL, tostarp, iespējams, ar pieejamajiem GET pieprasījuma datiem (tas ir tas, atrodas URL aiz zīmes "?"). Saņemtie dati tiek pievienoti atvērtās lapas URL - un notiek pāreja uz to.

Skripts palīga lapā

Tam vajadzētu būt apmēram šādam skriptam:

Šis skripts tiks palaists arī tad, ja uz peles tiks noklikšķināts uz jebkura elementa, uz kura ir instalēts atbilstošais apstrādātājs:

Atgriezties

Šī rinda ignorē noklusējuma saites klikšķa darbību. Fakts ir tāds, ka pēc noklusējuma tiek ievērota saite. Šajā gadījumā pāreja notiks tieši uz adresi, kas norādīta atribūtā href. Šajā adresē (jo īpaši palīglapā) nedrīkst būt tās lapas atgriešanās adrese, no kuras tika veikta pāreja (ja pāreja uz palīglapu ir iespējama nevis no vienas konkrētas, bet no vairākām avota lapām).

Tātad palīglapas skripts nolasa adreses joslas saturu un pēc tam sadala to “?” Elementu masīvā. Lūdzu, ņemiet vērā, ka vietrādī URL var būt divas šādas rakstzīmes. Pirmais parādīsies, kā jau minēts, sakarā ar to, ka palīglapas adresei ir pievienota sākotnējās lapas adrese (mīnus protokols). Otrais varētu būt GET pieprasījuma parametru klātbūtnes rezultāts, ielādējot sākotnējo lapu. Citiem vārdiem sakot, apakšlapas adreses joslā var būt viena vai divas jautājuma zīmes. Noklikšķinot uz saites, lai pārietu no palīglapas uz sākotnējo

Atgriezties

pieprasījums tiek nolasīts no adreses joslas un pārveidots tādā pašā formā, kādā tas bija sākotnējā lapā, pēc tam lapa tiek ielādēta šajā adresē.

Piezīmes

Turklāt jāatzīmē, ka raksts patiesībā nav par atgriešanos sākotnējā lapā, bet gan par tās pārlādēšanu. Tas, protams, ir tikai atdeves imitācija. Jo īpaši šajā lapā ievadītie dati, tās iestatījumi var netikt saglabāti. Turklāt, atšķirībā no RETURN, kad lapa ir ielādēta, tā būs atvērta no paša vietnes sākuma (t.i., tās augšējā daļa atradīsies ekrāna augšdaļā). Tā kā “patiesa” atgriešanās atgriež (oriģinālo) lapu tieši tajā vietā, kur tika veikta navigācija. Tāpēc mēģināsim apvienot abas metodes.

Kombinētā metode

Tātad, izvirzīsim uzdevumu:

    ja palīglapa ir atvērta tajā pašā cilnē (logā), tad ļaujiet izmantot history.back () metodi;

    bet, ja palīglapa tiek atvērta jaunā logā, iepriekš aprakstītajai metodei vajadzētu darboties (jo šajā gadījumā history.back () nedarbosies).

Palīglapas skripts nedaudz mainīsies (tiks pievienota iepriekšējā rindiņa):

Pirmkārt, mēs cenšamies atgriezties. Ja tas darbojas, pārējais skripts nedarbosies un atgriezīsies sākotnējā lapā tajā pašā vietā, no kuras tika veikta pāreja. Ja nē, tad, tāpat kā iepriekš, mēs iegūstam sākotnējās lapas adresi no GET pieprasījuma parametriem un dodamies uz to.

Secinājums

Protams, šajā rakstā ir parādīta tikai viena no "atgriešanās" tehnoloģijas iespējām ATPAKAĻ- uz sākotnējo lapu. Šim nolūkam papildus GET pieprasījumam varētu izmantot arī citas tehnoloģijas, piemēram, vietējo krātuvi localStorage. Turklāt, lai pilnībā simulētu atgriešanos ATPAKAĻ Būtu jauki pārsūtīt sākotnējās lapas ritināšanas apjomu, izmantojot GET pieprasījumu - lai vēlāk, pat atverot palīglapu jaunā logā, atgrieztos tajā pašā vietā sākotnējā lapā, no kuras tika veikta pāreja agrāk .