A volte nelle pagine web diventa necessario andare temporaneamente su qualche altra pagina (chiamiamola ausiliaria), quindi tornare indietro e continuare a lavorarci. Ad esempio, può essere: pagina di aiuto, registrazione.
In questo caso, ovviamente, l'indirizzo del mittente può essere molto diverso. Come implementare una tale transizione inversa sul sito? Il puro html / CSS non sarà sufficiente qui, dovrai usare javascript.
La cosa più semplice è, ad esempio, usare questa riga in uno script su una pagina di supporto:
Il metodo della cronologia ricorda la cronologia delle transizioni sulla pagina e, infatti, il suo utilizzo è simile all'utilizzo dei pulsanti "Avanti" e "Indietro" del browser, solo leggermente più funzionali. Questo è il modo più semplice e conveniente, ma solo a una condizione: se la nuova pagina (ausiliaria) non viene aperta in una nuova finestra. Dopotutto, altrimenti la pagina ausiliaria si aprirà per la prima volta (più precisamente, la sessione per essa sarà la prima, non ci sono ancora state transizioni su di essa). E questo significa che, in effetti, non c'è nessun posto dove tornare indietro. Pertanto, questo metodo non può essere chiamato universale. Non funzionerà se l'utente apre forzatamente la pagina in una nuova scheda o se il browser lo fa per lui, in conformità con le impostazioni. In questo caso, l'attributo target = "_ self" del link non aiuta: non sarà possibile tornare indietro dalla pagina ausiliaria aperta (a meno che, ovviamente, non si inserisca l'URL della pagina originale nell'indirizzo del browser barra manualmente).
Un modo più versatile
Per implementarlo, avrai bisogno di script sia sulla pagina sorgente che su quella ausiliaria. L'idea può essere diversa. Uno di questi si basa sul fatto che l'indirizzo (URL) della pagina originale è memorizzato nella barra degli indirizzi del browser come richiesta GET. In tal modo. la pagina di supporto, quando riceve tale richiesta, conosce l'origine della richiesta. Sulla base di ciò, diventa possibile tornare indietro, ad es. alla pagina da cui è stata effettuata la transizione.
Questo può essere schematicamente rappresentato come segue:
La sceneggiatura nella pagina originale
Nella pagina, CON CUI dovrebbe essere eseguita la transizione, c'è il seguente script, che è una funzione - il gestore del clic del mouse (onclick):
Affinché la funzione nello script funzioni, è necessario installare il relativo gestore su un elemento in uno dei modi, ad esempio, in questo modo:
http://example.com "onclick =" to_comment_rules ("http://example.com"); return false "> Clicca per andare alla sottopagina
Nota che l'attributo href di questo collegamento ha un indirizzo corrispondente, che è specificato nella funzione del gestore dell'evento onclick. Questo viene fatto in modo che i robot di ricerca capiscano a quale pagina andrà il collegamento quando si fa clic sul collegamento. Se questo non è necessario, dovresti creare un attributo href vuoto, come
Il principio di questo script è che quando viene chiamata la funzione save_back (url), viene aperta una pagina (ausiliaria) con l'indirizzo url. Per fare ciò, viene definito il protocollo della pagina (ad esempio http o https), così come il resto dell'URL della pagina Web originale, includendo, forse, i dati disponibili della richiesta GET (questo è ciò che si trova nell'URL dopo il segno "?"). I dati ricevuti vengono aggiunti all'URL della pagina che viene aperta e avviene una transizione ad esso.
Script sulla pagina di supporto
Dovrebbe avere qualcosa di simile a questo script:
Questo script verrà lanciato anche quando si fa clic con il mouse su un qualsiasi elemento su cui è installato il relativo gestore:
Ritorno
Questa riga sostituisce l'azione di clic del collegamento predefinita. Il fatto è che per impostazione predefinita viene seguito il collegamento. In questo caso, la transizione avverrà esattamente all'indirizzo specificato nell'attributo href. Questo indirizzo (in particolare, sulla pagina ausiliaria) può non contenere l'indirizzo di ritorno della pagina da cui è stata effettuata la transizione (se la transizione alla pagina ausiliaria è possibile non da una specifica, ma da più pagine di origine).
Quindi, lo script nella pagina dell'helper legge il contenuto della barra degli indirizzi e poi lo divide in un array di "?" Elementi. Tieni presente che nell'URL possono essere presenti due caratteri di questo tipo. Il primo apparirà, come già accennato, per il fatto che all'indirizzo della pagina ausiliaria (meno il protocollo) è stato aggiunto l'indirizzo della pagina originale. E la seconda potrebbe essere presente in conseguenza della presenza dei parametri della richiesta GET durante il caricamento della pagina originale. In altre parole, potrebbero essere presenti uno o due punti interrogativi nella barra degli indirizzi della sottopagina. Per passare dalla pagina ausiliaria a quella originale quando si fa clic sul collegamento
la richiesta viene letta dalla barra degli indirizzi e convertita nello stesso modulo che aveva sulla pagina originale, dopodiché la pagina viene caricata a questo indirizzo.
Osservazioni
Inoltre, va notato che l'articolo non riguarda davvero il ritorno alla pagina originale, ma il ricaricamento. Questa è, ovviamente, solo un'imitazione di un ritorno. In particolare, i dati inseriti in questa pagina, le sue impostazioni potrebbero non essere salvati. Inoltre, a differenza del RETURN, quando la pagina viene caricata, sarà aperta fin dall'inizio del sito (ovvero la sua parte superiore si troverà nella parte superiore dello schermo). Mentre il "vero" backtracking restituisce la pagina (originale) esattamente dove è stata effettuata la navigazione. Pertanto, proviamo a combinare entrambi i metodi.
Metodo combinato
Quindi, impostiamo l'attività:
se la pagina ausiliaria è aperta nella stessa scheda (finestra), lasciare che sia disponibile il metodo history.back();
ma se la pagina ausiliaria si apre in una nuova finestra, allora il metodo discusso sopra dovrebbe funzionare (perché in questo caso history.back() non funzionerà).
Lo script nella pagina dell'helper cambierà leggermente (verrà aggiunta la riga sopra):
Per prima cosa, proviamo a tornare indietro. Se funziona, il resto dello script non funzionerà e tornerà alla pagina originale nello stesso punto da cui è stata effettuata la transizione. In caso contrario, come prima, estraiamo l'indirizzo della pagina originale dai parametri della richiesta GET e andiamo su di essa.
Conclusione
Naturalmente, questo articolo mostra solo una delle opzioni per la tecnologia "ritorno" INDIETRO- alla pagina originale. A tal fine, oltre alla richiesta GET, potrebbero essere utilizzate altre tecnologie, ad esempio lo storage locale localStorage. Inoltre, per simulare completamente il ritorno INDIETRO Sarebbe bello inviare tramite una richiesta GET la quantità di scorrimento della pagina originale - in modo che in seguito, anche quando si apre la pagina ausiliaria in una nuova finestra, torni nello stesso punto della pagina originale da cui è stata effettuata la transizione in precedenza .
Molti studi sull'usabilità mostrano che gli utenti (sia principianti che esperti) utilizzano spesso il pulsante Indietro nel proprio browser. Sfortunatamente, i designer e gli esperti di marketing di front-end raramente pensano alle implicazioni sull'usabilità di questo, dati gli attuali modelli di web design che app, animazioni, video e altri usano. Spesso la struttura tecnica di tali layout non risponde bene alla funzione go-back, che rompe gli schemi mentali degli utenti e degrada la loro esperienza.
Le conseguenze di ciò possono essere disastrose: durante gli esperimenti, la reazione inadeguata del sito alla pressione del pulsante "indietro" è stata la ragione dell'abbandono di molti utenti, inoltre, con abusi e recensioni poco lusinghiere. Nella maggior parte dei casi, anche i rispettabili soggetti del test dai capelli grigi perdevano terribilmente le staffe.
In questo articolo imparerai:
- cosa si aspettano gli utenti dal pulsante Indietro;
- quali sono i 5 errori più comuni;
- soluzione semplice a questi problemi.
La soluzione è davvero molto semplice, ma spesso viene trascurata anche dai più grandi brand. Risolviamo questo errore?
Aspettative degli utenti
In breve: gli utenti si aspettano che il pulsante torna indietro mostri loro ciò che percepiscono come la pagina precedente. La parola "percepire" è molto importante, perché c'è una differenza colossale tra ciò che sembra essere la pagina precedente e ciò che è tecnicamente.
La domanda sorge spontanea: cosa interpretano esattamente gli utenti come una nuova pagina? Nella maggior parte dei casi, se una pagina è visivamente significativamente diversa, ma allo stesso tempo è concettualmente correlata al sito, allora viene percepita come nuova. Pertanto, è molto importante tenere traccia di come il sito gestisce i vari elementi interattivi: lightbox, moduli, filtri e altro.
La maggior parte dei visitatori non comprende problemi tecnici, ma si basa solo su idee intuitive su come dovrebbe funzionare la risorsa. Quindi, quando fanno clic sul pulsante Indietro, si aspettano una pagina che ha già avuto un'esperienza importante e ottengono una pagina con un'interfaccia leggermente ridisegnata.
Di seguito sono riportati gli elementi interattivi più popolari e come utilizzarli per massimizzare l'esperienza utente e l'usabilità.
Lo scopo di incorporare sovrapposizioni e lightbox è mostrare all'utente un elemento che appare nella parte superiore della pagina. Pertanto, gli utenti percepiscono tali elementi come nuove pagine e premono il pulsante "indietro" per tornare alla posizione originale, ma non vanno dove si aspettavano. Ciò è particolarmente spiacevole, perché l'uso di lightbox moltiplica solo la percezione negativa della pagina web: alla maggior parte degli utenti non piacciono questi elementi sui siti dei negozi online.
L'uso dei filtri spesso trasforma la pagina e offre alla persona una nuova esperienza. Pertanto, la pagina dopo l'ordinamento viene percepita come nuova, anche se non è stato caricato nulla. Questo perché dopo ogni interazione del visitatore con la pagina del negozio online si ottiene una nuova visualizzazione dei risultati.
Questo esempio sottolinea che le persone non entrano negli aspetti tecnici quando definiscono una nuova pagina, ma usano solo l'intuizione e la percezione formata.
3. Forma di iscrizione/pagamento
La pagina di pagamento viene percepita come nuove pagine e, peggio ancora, come un processo a più fasi, ogni fase del quale può essere annullata con il pulsante "torna indietro".
Questo approccio può portare problemi, un semplice esempio: una persona vuole tornare indietro di un passo nella compilazione di un modulo per modificare le informazioni inserite. Premendo il pulsante "indietro" si ritorna al carrello e si eliminano tutti (!) i dati inseriti. L'irritazione e l'abbandono del sito sono un effetto naturale.
La tecnologia AJAX potrebbe non essere all'altezza delle aspettative degli utenti: tecnicamente, ogni pagina AJAX è sotto lo stesso URL, ma sembra che si stiano aprendo nuove pagine.
In un contesto di e-commerce, gli utenti hanno la netta percezione che la pagina 3 e la pagina 4 siano separate e che dalla quarta alla terza sia possibile navigare utilizzando il pulsante indietro.
Gli utenti non sono pronti a rinunciare al pulsante Indietro
Dato l'uso diffuso di questa funzionalità del browser Internet, il problema della mancata corrispondenza delle aspettative degli utenti con la visione degli sviluppatori diventa fondamentale, da non prendere alla leggera.
Il pulsante "torna indietro" è stato particolarmente apprezzato dagli utenti di applicazioni mobili e siti Web. Come dimostrato dallo studio delle versioni mobile dei siti, la maggior parte degli utenti ha utilizzato questa funzione su tutte le risorse proposte. Inoltre, l'uso del pulsante non si limita al rollback di una pagina: alcuni soggetti lo premono fino a 15 (!) volte di seguito.
Anche gli utenti di PC spesso premono un pulsante, ma non allo stesso modo degli utenti mobili, poiché gli utenti desktop possono navigare facilmente nel sito.
Soluzione
La buona notizia è che HTML5 ha una soluzione relativamente semplice al problema e si chiama HTML5 History API. In particolare, la funzione history.pushState() consente di modificare l'URL senza ricaricare la pagina. Di conseguenza, il sito si comporterà adeguatamente alle aspettative dell'utente che ha premuto il pulsante "torna indietro".
In questo articolo, vedremo come puoi creare un pulsante "Torna indietro" in qualsiasi luogo tu abbia bisogno. Penso che dal nome stesso del pulsante sia già chiaro cosa accadrà quando ci cliccherai sopra. Tale pulsante può essere inserito sia in una categoria che nel materiale stesso. Tutto è fatto semplicemente.
Esistono diverse opzioni su come aggiungere un pulsante, ma personalmente ho utilizzato solo un metodo. Vale a dire, la terza opzione delle tre che ho proposto. Un po 'più avanti ti dirò perché esattamente lui.
Quali opzioni abbiamo in assoluto:
- Modifica i file modello Jooml.
- Basta incollare il codice del pulsante dove vuoi.
- Crea il modulo "Codice HTML", inserisci lì il codice del pulsante, quindi visualizza questo modulo nel posto giusto.
Il vantaggio della terza opzione è che se è necessario modificare il testo sul pulsante o modificare / aggiungere una classe di stile, sarà necessario correggere il modulo stesso e non correggere il pulsante in tutti i punti in cui si trova.
Quindi, su uno dei miei siti ho usato la terza opzione:
È stato creato il modulo "HTML-code" e lì, utilizzando l'estensione "Sourcerer", che consente di aggiungere qualsiasi codice al materiale, è stato inserito il codice del pulsante.
Il mio codice del pulsante funzionante:
Il testo è leggermente decorato con una freccia che utilizza componenti di bootstrap 3 e il pulsante stesso è in stile CSS.
