Ho visto altri siti web mantenere la pagina corrente completamente visibile mentre l’altra pagina viene caricata e la barra di caricamento si sposta sullo schermo. Forse vale la pena provare quella versione.
8 Mi Piace
Voglio aggiungere un’altra cosa. Credo di aver notato un’altra grande differenza tra Discourse e alcuni altri siti web che utilizzano una barra di caricamento. I tre siti con cui sto confrontando sono https://www.youtube.com, https://github.com e https://bookmeter.com. Ecco le differenze principali:
- Come menzionato nel mio post precedente, invece di sostituire il contenuto con una pagina vuota, questi siti mantengono il contenuto precedente sullo schermo (senza dissolvenza o effetti simili) fino a quando il nuovo contenuto non è stato caricato.
- Generalmente, molto più contenuto rimane sullo schermo anche dopo il caricamento della nuova pagina. Questi siti hanno molto più contenuto nel menu superiore e talvolta persino un menu secondario superiore che può rimanere a seconda del link cliccato. Hanno anche menu laterali che a volte rimangono anche dopo la navigazione a una nuova pagina. Al contrario, Discourse ha un menu superiore molto semplice, e solo l’icona di ricerca, l’icona del menu hamburger e l’icona dell’utente rimangono sempre.
Forse passare a un comportamento che mantiene il vecchio contenuto fino a quando il nuovo non è pronto potrebbe funzionare bene. Ma è anche possibile che non funzioni bene semplicemente perché, indipendentemente da dove si naviga in Discourse, viene sostituito così tanto contenuto.
7 Mi Piace
Nel mio caso, utilizzo banner per le categorie, banner per i tag e una barra laterale che mostra le categorie nelle liste di argomenti. Discourse include anche di default alcune rotte che mantengono le barre superiori o laterali, come i profili utente o i gruppi. Preferisco molto mantenere la vecchia visualizzazione prima della transizione, in modo che questi elementi sullo schermo non scompaiano per riapparire nello stesso punto.
7 Mi Piace
Sì, è così che utilizziamo il nuovo componente del tema slider di Discourse, da circa una settimana, e ci piace molto. Abbiamo semplicemente disabilitato il codice di transizione del corpo e usiamo solo lo slider.
L’azione naturale del browser di caricare (o ricaricare) una pagina si occupa della transizione; quindi non è necessario alcun codice aggiuntivo per la dissolvenza o lo svuotamento di qualsiasi HTML. Questo slider è fantastico senza alcun codice di transizione della pagina aggiuntivo (dissolvenza, svuotamento, ecc.) ed è così che lo stiamo utilizzando sul nostro sito da una settimana.
Grazie per questo ottimo slider e per la possibilità di personalizzarlo come componente del tema!
4 Mi Piace
Forse hai frainteso ciò che ho scritto, ma ciò che ho descritto non è il modo in cui Discourse funziona attualmente con il componente tema. Al momento, Discourse rende la maggior parte del contenuto una pagina vuota mentre viene caricato il nuovo contenuto. Gli altri siti web che ho collegato mantengono il contenuto corrente mentre viene caricato il nuovo contenuto. Non è la stessa cosa.
1 Mi Piace
Sono abbastanza sicuro di aver capito esattamente cosa hai menzionato @seanblue (sopra). È piuttosto semplice quello che hai detto, e il tuo post era facile da capire, a mio avviso.
Se commenti la transizione del corpo SCSS (l’animazione) nel componente del tema slider originale di Discourse (FWIW, ho modificato il componente del tema facendone un fork una settimana fa, ma ci sono altri modi per modificare un componente del tema).
Allora, il comportamento è esattamente come lo descrivi.
La pagina corrente (nella nostra modifica) viene visualizzata mentre viene caricato il nuovo contenuto (che è semplicemente il comportamento normale di una pagina che si carica senza alcuna animazione del corpo aggiunta. Il “sfumare” e il “schermare” che vedi negli attuali esperimenti di Discourse era dovuto al codice di animazione CSS del corpo nella versione del tema (vedi sotto) quando è stato rilasciato una settimana fa.
Senza l’animazione CSS del corpo, lo slider di caricamento segue il suo corso normale e non c’è “schermatura” o “sfumatura” del corpo perché quell’animazione era specificata nel CSS del componente del tema (originale). La maggior parte dei siti web (come hai menzionato) non aggiunge animazioni aggiuntive al corpo, ed è per questo che hai detto:
Questo è “la norma”… che accade dopo che l’animazione del corpo è stata rimossa dal CSS (sto parlando del rilascio di una settimana fa, poiché non ho seguito, cioè, GitHub dice, la nostra versione modificata è:
Dopo aver apportato questa modifica, una settimana fa, lo slider è risultato ottimo (così dicono i nostri utenti) e non richiede alcuna animazione aggiuntiva del corpo (dissolvenze in entrata o in uscita, animazioni di schermatura, ecc.).
Di seguito c’era il CSS che abbiamo commentato nel “rilascio iniziale” di questo fantastico slider. Questo ha funzionato così bene per noi (e i nostri utenti lo amano), quindi non abbiamo seguito tutti i cambiamenti successivi del codice sperimentale per le animazioni “spinner combinati, schermatura”, corpo, dopo averlo fatto funzionare bene per noi; tranne i risultati che vedo con gli esperimenti su meta).
// body #main-outlet {
// transition: opacity 0.2s ease;
// }
// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }
Spero che questo sia utile.
5 Mi Piace
Ah, non avevo capito che stessi usando una versione modificata/forkata. Mia colpa. Sono contento che questa versione stia funzionando bene per te. Spero che qui su Meta proveranno lo stesso approccio.
6 Mi Piace
@david / @awesomerobot So che abbiamo discusso a lungo su questo, ma penso che dovremmo provare l’implementazione originale (con piccole rifiniture) prima di applicare una dissolvenza. Lascia che riassuma le opzioni disponibili al clic:
-
Mantenere il contenuto vecchio sullo schermo e passare a quello nuovo non appena è pronto.
-
Visualizzare uno “schermo bianco” e passare al contenuto nuovo non appena è pronto.
-
Effettuare una transizione verso un contenuto opaco (con opacità compresa tra 0 e, diciamo, 40%) e passare al contenuto nuovo non appena è pronto.
Con tutte queste opzioni, siamo inoltre certi di voler aggiungere: “Se il contenuto impiega più di 2 secondi, visualizza un indicatore di caricamento (spinner)”.
(1) è l’unica soluzione che minimizza gli stati di transizione; sì, richiede un po’ di abitudine: “Ehi, ho cliccato qualcosa e sembra non sia successo nulla”. Ma è così che funziona il web quando si clicca su un iperlink. Il browser non visualizza uno schermo bianco né sfuma gli elementi quando si clicca su un link che porta a un altro sito.
(2) è ciò che abbiamo attualmente; per alcuni è considerato troppo brusco, poiché uno dei principali vantaggi di questo modello è proprio evitare gli schermi bianchi. Rispetto al vecchio indicatore di caricamento, il cambiamento è davvero minimo.
(3) può essere molto distraente; trovare l’opacità giusta è difficile. Per esperienza, quando l’ho provato, dopo un’ora di utilizzo diventava estremamente stancante.
@david abbiamo dato una vera possibilità a (2); possiamo ora provare seriamente (1) per circa una settimana? Credo sia la scelta migliore perché minimizza i cambiamenti sullo schermo.
9 Mi Piace
Questo… non è vero. C’è un’animazione di caricamento che inizia immediatamente al clic. Guarda la scheda nel tuo browser mentre clicchi su un link. Nota che al clic o al tocco passa immediatamente dall’icona del sito al caricamento con il cursore di rotazione.
5 Mi Piace
Scusa, sì, era proprio questo il mio punto: possiamo simulare qui qualcosa di molto vicino alla navigazione “standard” (ad esempio, possiamo cambiare l’icona della scheda durante il caricamento, possiamo modificare il testo della scheda).
Quando si clicca su un link qualsiasi in un sito, la pagina corrente non diventa completamente bianca né diventa opaca. Il contenuto vecchio rimane sullo schermo per un certo periodo di tempo finché il DNS non risolve il nuovo sito e il contenuto è pronto per essere renderizzato.
Per me, il grande vantaggio di questo componente sta nella riduzione degli stati intermedi. Se riusciamo a far “sentire” la navigazione come quella standard del browser fingendola, sarebbe ottimo.
12 Mi Piace
Nessun problema. Ci piace molto lo slider (con qualche pixel aggiunto per il desktop), ma abbiamo scoperto che non c’era bisogno di animazioni del corpo della pagina (sbiancamento, dissolvenza in entrata/uscita o simili).
Lo slider indica il caricamento in modo adeguato; la pagina si caricherà e cambierà naturalmente, senza aggiungere CSS di transizione per il corpo della pagina o spinner extra. Lo stiamo utilizzando così da 8 o 9 giorni, gli utenti sono soddisfatti e anche a me piace. Gli utenti non gradivano le animazioni di “dissolvenza in entrata/uscita”, né quelle di “sbiancamento della pagina”, né l’“animazione aggiuntiva con spinner + slider”; ma del resto, i nostri utenti non sono generalmente entusiasti delle animazioni non necessarie e degli extra gadget web.
Spero che il team di Meta mantenga questo codice come componente del tema, o almeno permetta ai proprietari dei siti di sovrascrivere qualsiasi cosa decidano di implementare; sembra infatti che ciò che piace ai nostri utenti e ciò che piace ad altri, per quanto riguarda le transizioni di pagina, sia diverso.
Quando si è in dubbio, “essere gentili e dare ai siti la possibilità di scegliere” è un buon approccio, a mio avviso.
3 Mi Piace
Suona bene, ho ripristinato il componente alla sua implementazione originale.
7 Mi Piace
Credo che il “oh no, sono passati 2 secondi, mostra un indicatore di caricamento” sia sicuramente un dettaglio minore ma importante da aggiungere.
A parte questo, vediamo cosa dicono le persone; penso che questa sia probabilmente la versione che lanceremo.
8 Mi Piace
Dove dovrebbe essere visualizzato? Come una sorta di modale? O #main-outlet dovrebbe essere nascosto dopo 2 secondi per fare spazio a un indicatore di caricamento?
4 Mi Piace
Penso che dovremmo nascondere la presa principale. Potremmo voler regolare la soglia: 2 è un po’ arbitrario, forse 3, 4 o 5?
6 Mi Piace
Lo spinner verrà ora visualizzato dopo 2 secondi:
12 Mi Piace
È davvero interessante: senza il layer aggiuntivo dello spinner dopo 2 secondi, le cose diventerebbero strane per gli utenti. In questo modo abbiamo il meglio di entrambi i mondi: 1. Fingere di essere velocissimi grazie allo slider (qui stiamo barando, TBO). 2. Colmare il vuoto se il caricamento si blocca (transizione psicologica).
Ottimo lavoro! 
8 Mi Piace
L’ho appena provato su una rete simulata lenta e, dopo 2 secondi, il caricamento mi sembra decisamente appropriato. Vorrei però ribadire che, su desktop (almeno su un monitor di dimensioni medio-grandi), la barra di caricamento è praticamente invisibile. Secondo me, aggiungere altri 2-3 pixel in verticale farebbe una grande differenza.
5 Mi Piace
Seguo questa conversazione da quando sono un nuovo utente di Discourse. Devo dire che sono molto impressionato dal livello di riflessione e dal duro lavoro che sta dietro a questa funzionalità UX così “moderna”. Scusa se mi sono allontanato dall’argomento… ma questa è una conversazione davvero impressionante per qualcuno che utilizza da anni altri software per forum.
Continuate così… adoro questa funzionalità.
11 Mi Piace
Forse dovrei precisare che ho appena cliccato su un argomento già selezionato perché pensavo di aver cliccato per sbaglio, anche se era già in caricamento dal primo clic. Probabilmente devo solo abituarti alla mancanza dell’indicatore di caricamento…
5 Mi Piace