Scrolling morbido con Javascript
Giovedì 5 Gennaio 2006 - 11:50
di Alessandro Fulciniti
Lo scrolling “soft” è un effetto che trovo molto accattivante. Inoltre, si basa su un ausilio che ritengo indispensabile su pagine lunghe o con molto testo: le ancore interne, cioè quei link che permettono la navigazione interna alla pagina.
Secondo me, è uno di quei casi in cui Javascript contribuisce a migliorare l’usabilità senza intaccare l’accessibilità del contenuto o la navigabilità. Infatti, le ancore restano accessibili anche con Js disabilitato e lo scrolling soft aiuta l’utente a capire che si sta spostando all’interno dellla stessa pagina.
Sono diverse le risorse che offrono script già pronti e/o tutorial per ottenerlo. In ordine di tempo, dal più recente: Scroll your internal links smoothly di Valerio Proietti, A (slightly) better technique for “Back to Top” links
di Dave Lindquist, Make Internal Links Scroll Smoothly with JavaScript di Stuart Landgridge (qui l’esempio, con la versione aggiornata dello script) e infine Scroll window di Travis Beckham.
Categoria: Scripting | Permalink
Commenti
1
Che aumenti l’usabilità ho i miei dubbi.
Test con gli utenti? Nulla?
Sicuramente aumenta il peso totale del documento e in alcuni casi rallenta l’esecuzione della pagina.ciao,
Andrea.# - postato da Andrea Paiola - 05 Gennaio 2006 - 12:44
2
concordo con Andrea, spesso tutti sti effetti “speciali” appesantiscono non di poco la pagina.
ricordo un sito che usa un effetto simile da diverso tempo, ma compatibile soltanto con internet explorer, il sito è www.froufrou.net
# - postato da Salvatore PECORARO - 05 Gennaio 2006 - 13:09
3
Io lo trovo comunque molto bello come effetto!!!
4
Caro Pugia,
nessuno toglie niente al valore estetico dell’aggeggio.
Molto spesso sti giochino sono più dannosi che altro.# - postato da Andrea Paiola - 05 Gennaio 2006 - 14:09
5
Andrea, in quanto al peso: non credo che un Kb in più possa considerarsi così dispendioso.
La questione usabilità è soggettiva (infatti ho scritto secondo me): personalmente, lo trovo un valido aiuto a capire che mi sto solo spostando all’interno della stessa pagina, oltre ad essere un’effetto decisamente accattivante.
In quanto alla dannosità: davvero non la vedo, nel momento in cui i link sono accessibili sia con javascript disabilitato che attivo.
Volendo essere puntuali… il problema dovrebbe essere a monte: le pagine (a parte le reference e simili) non dovrebbero essere così lunghe da avere link di navigazione interna, se non quelli di salto alla navigazione o ai contenuti per questioni di accessibilità.
Ho ritenuto si trattasse di alcune segnalazioni interessanti: ovvio che ognuno è liberissimo di considerarle valide e adottabili o meno :-)
# - postato da Alessandro Fulciniti - 05 Gennaio 2006 - 14:39
6
Ciao, Alessandro.
L’usabilità si valuta relativamente a degli utenti e quindi ad un progetto.
Il fatto che “ti piaccia” non lo rende usabile.
Forse non hai scelto il termine più adatto…ciao,
Andrea.# - postato da Andrea Paiola - 05 Gennaio 2006 - 16:54
7
A me fa venire il mal di mare questo effetto, non sto scherzando.
# - postato da uanne - 05 Gennaio 2006 - 17:28
8
Ciao Andrea Paiola,
Anche secondo me è una tecnica che puo’ definirsi usabile, in quanto gli utenti meno esperti si trovano spesso disorientati dai salti improvvisi.
“L’usabilità si valuta relativamente a degli utenti e quindi ad un progetto.” è senza dubbio vero, e per un progetto destinato ad essere visitato dai piu disparati tipi di persone (un sito!) è sicuramente un passo avanti per l’usabilità aggiungere un piccolo aiuto anche per i meno esperti :)# - postato da Valerio Proietti - 05 Gennaio 2006 - 19:11
9
simpatico.
10
mi viene un dubbio in mente, spesso si accosta usabilità, accessibilità e si mette anche in discussione il cosidetto presupposto che il sito dovrebbe essere a prova di stupido.
Anche secondo me è una tecnica che puo’ definirsi usabile, in quanto gli utenti meno esperti si trovano spesso disorientati dai salti improvvisi.
in merito a tutti sti pensieri, credo sia giunto il momento di distinguere due diverse tipologie di utenza del sito web
- il visitatore intelligente
- lo stupido analfabeta
il visitatore intelligente è colui che sa navigare, che sa spostarsi all’interno di un sito (semplice) usando logica e raziocinio, che usa un motore di ricerca per trovare quello che vuole, che sa inviare la posta, sa chattare, sa scaricare i file, installare programmi più o meno indispensabili per il sito web che vuole visitare.
lo stupido analfabeta non sa distinguere un “reset” da un “invia”, non sa distinguere l’italiano dall’inglese, non sa distinguere un testo da un collegamento, quando gli si chiedete se usa skype risponde “no, le casse sono trust”, se gli chiedete cos’è il browser impiega mezz’ora prima di indicarvi il monitor, lo stupido non è in grado di capire cambiando pagina che il testo che sta leggendo non ha un nesso logico col pezzo 10 secondi prima.
ripeto, troppo spesso ci si preoccupa di fare siti a prova di stupido, ma lo stupido, una volta raggiunto il contenuto del sito tramite ajax o meno, riuscirà a capirne il contenuto?
volendo fare il sito “comprensibilissimo” faremo perdere tempo a chi, utente normale, vuole navigare ma spreca secondi preziosi soltanto per spostarsi da un punto all’altro della pagina.
questo è solo un mio pensiero, però credo rappresenti realmente lo stato (lo stupido analfabeta) di più della metà degli internauti del globo.
A presto, Totò
# - postato da Salvatore PECORARO - 05 Gennaio 2006 - 20:39
11
Non esiste l’utente stupido come non esiste l’utente stupido (o analfabeta).
Esiste l’utente per cui si sta progettando il sito, il target del sito.
L’utente è una variabile da tenere in conto nel progetto.“spesso si accosta usabilità, accessibilità”
sbagliando perchè sono due variabili progettuali distinte… oltretutto con scopi diversi ed alle volte contrastanti.
” e si mette anche in discussione il cosidetto presupposto che il sito dovrebbe essere a prova di stupido.”
No: deve essere a prova di utente. Del TUO utente.
ciao,
Andrea.# - postato da Andrea Paiola - 05 Gennaio 2006 - 23:24
12
Scusate…
“Non esiste l’utente intelligente come non esiste l’utente stupido (o analfabeta).”
volevo scrivere.
:D# - postato da Andrea Paiola - 05 Gennaio 2006 - 23:26
13
Comunque sia non vedo che danni possa procurare questa soluzione dal punto di vista dell’accessibilità, i link rimangono sempre e comunque dei normali link…
14
Non mi sembra porti danni all’accessibilità, se non forse un relativo disorientamento dell’utente… ma è tutto da verificare.
# - postato da Andrea Paiola - 06 Gennaio 2006 - 09:45
15
Non per essere pugnolo (arrivo pure in ritardo), ma utilizzate il termine usabilità, ma a quanto pare c’è un pò di confusione.
L’usabilità di un sito si valuta rispetto al numero complessivi di click e alla facilità di reperimento delle informazioni: mi spiego!
Se ho un menu con le voci: Chi sono, Cosa faccio, Dove sono, Contattami; mi aspetterò che cliccando su ognuno dei seguenti link, appaiano proprio le informazioni promesse. Rispetto all’obiettivo del sito - in questo caso “parlare di me” - il menu è molto usabile, inquando con un solo click reperisco l’informazione.
Se per caso non ci fosse stato il link “Cosa faccio” e magari l’avessi messo all’interno della pagina “Dove sono”, il sito non sarebbe stato usabile; inquanto, razionalmente, non ha senso parlare di quello che faccio, all’interno della pagina che spiega dove sono.
Non ha nulla a che fare né col livello intellettivo medio del visitatore, né col target del visitatore. In un sito male organizzato anche un ingegnere del software non trova le informazioni, quindi…
Il problema, invece, di questo effetto javascript non è riconducibile all’usabilità del sito, ma all’accessibilità. Questo perché l’ancora funziona a prescindere, anche senza javascript; se c’è un problema di accessibilità non è riconducibile al js.
Un sito è accessibile quando è fruibile anche da chi soffre di particolari problemi di handicap, ad esempio ipovedenza, ipersensibilità e difetti motori; senza arrecare disagi ovviamente!
A primo acchitto, l’effetto molleggiato potrebbe creare problemi a soggetti ipersensibili, inquanto, come testimonia anche “uanne”, fa venire un certo mal di mare a vedere una pagina frullarti davanti.
Ad ogni modo questa tipologia di persone naviga con particolari tipologie di browser (in genere, anche se non sempre) che disabilitano questo tipo di effetti.
16
“L’usabilità di un sito si valuta rispetto al numero complessivi di click e alla facilità di reperimento delle informazioni: mi spiego!”
Non solo… si valuta tramite euristiche e test con utenti veramente… anche secondo me comunque il termine è stato usato da Alessandro impropriamente.
Non importa: la prossima volta lo sa e farà più attenzione :D# - postato da Andrea Paiola - 08 Gennaio 2006 - 14:56
17
Beh, con un buon sistema di tracking del sito non c’è bisogno di fare euristica e test.
Si può benissimo analizzare quanto tempo impiega un utente, opportunamente identificato e tracciato, per arrivare alla sua pagina voluta. In genere rimane più tempo sulla pagina che desidera.
Inoltre gioca un ruolo fondamentale l’esperienza e la maturità professionale. (IMHO)
N.B.:
Nel caso del sistema tracking, i dati sono statistici quindi sono verosimili solo con campioni piuttosto consistenti di visitatori.
18
i sistemi di tracking non ti dicono tutto… sono il 10% dell’usabilità (se va bene)
# - postato da Andrea Paiola - 08 Gennaio 2006 - 23:05
19
Se lo dici tu…
20
allora vi pongo un quesito…
ho creato una select dinamica (php) contenente i vari link alle ancore della pagina,poi con una funzione javascript ( ho provatoanche con ajax ma ho lo stesso effetto ) creo il link tipo < "a href="#ancora"> (togliere le ” iniziali)
naturalmente lo scriptino smoothscroll.js non funge perchè da quanto ho capito non riesce a fare il fixlink al momento dell’apertura della pagina…
come posso risolvere ( non ditemi non mettendo il menu nella select)
scusate sesono stato poco chiaro ma tardi ed il mio neurone sta per fondere# - postato da Antonio - 26 Gennaio 2007 - 03:09
21
Sono pienamente d’accordo con Alessandro sull’utilità dello script per migliorare l’accesso ai contenuti in casi di navigazione con ancore interne dove uno scroll manuale risulterebbe scomodo e noioso.
E’ chiaro che si ha la possibilità di decidere come organizzare i contenuti li si divide in pagine non troppo lunghe migliorandone la leggibilità.
A prescindere che lo smooth scrolling piaccia o no, io ho avuto un caso in cui è stato un vero esempio di utilità:
Protect Veritas personal home page on eBayIn casi come questi hai poco da scegliere, o usi una pagina sola, o usi una pagina sola.
Ho ricevuto feedback positivi per lo smooth scrolling, e non da webmaster.# - postato da emanueledg - 15 Febbraio 2007 - 12:16
22
Non riesco a far funzionare smoothscroll.js su Internet Explorer in un layout con elementi “fixed”; è un problema dovuto agli hack adottati per replicare il fixed su IE…
Aiutooooo…