La tua guida allo scorrimento in parallasse

Lo scorrimento in parallasse non ha bisogno di presentazioni quando si tratta di discutere le pratiche di progettazione più accattivanti. In generale, lo scorrimento del parallasse è ampiamente visto sui siti Web WordPress. È un effetto in cui l'immagine di sfondo si sposta a una velocità inferiore rispetto agli elementi in primo piano. Questo dà l'illusione di avere tre dimensioni in una superficie piana bidimensionale. Molti giochi utilizzano questa tendenza da molto tempo, tuttavia, si è fatta strada nel web design relativamente di recente e ha guadagnato un'enorme popolarità. È così diffuso che molto probabilmente l'hai visto da qualche parte mentre navigavi sul web, anche se non sapevi cosa fosse. Il concetto di scorrimento parallasse lavora sulla creazione di un'illusione che sembra accattivante e unica. Aggiunge valore estetico al web design e attira l'attenzione sul contenuto del rotolo di parallasse, che aiuta a evidenziare i contenuti di valore dal disordine.

Questa tendenza di design ha avuto origine quando la tendenza del design piatto ha preso piede. Prima della tendenza del design piatto, il design del realismo era di tendenza. Con questa tendenza, l'enfasi sarebbe su ombre, riflessi e altri trucchi simili per creare un senso di profondità e un aspetto tridimensionale. Il design piatto era eccessivamente bidimensionale e tali trucchi non avrebbero funzionato con loro per creare un aspetto tridimensionale. Vedendo questo divario, lo scorrimento del parallasse è emerso come un concetto per introdurre tre dimensioni in un design piatto.

Per comprendere lo scorrimento in parallasse in modo più dettagliato, dovremmo prima esaminare perché è una pratica in cui vale la pena investire.

1. L'esperienza utente migliora notevolmente:

Spillo

Alcune persone ritengono che lo scorrimento del parallasse sia una funzionalità aggiuntiva che aggiunge complessità all'interfaccia utente senza alcun contributo. Tuttavia, non è vero in quanto le micro-interazioni e le animazioni fanno una grande differenza per creare interfacce utente accattivanti rispetto ai volti utente piatti. Ha un valore eccellente per l'esperienza utente (UX).

2. Aiuta il processo di narrazione:

Spillo

Se dovessimo narrare una storia a un'altra persona, potremmo farlo senza sforzo. Tuttavia, avere la stessa facilità e flusso di narrazione nella progettazione di siti Web può essere molto impegnativo. Collegare i punti e facilitare la transizione e mantenere il pubblico agganciato è spesso complicato. Lo scorrimento del parallasse aiuta con questo problema creando un'esperienza coinvolgente e coinvolgente per far scorrere la storia. Poiché c'è una differenza nella velocità degli elementi in background e in primo piano, il ritmo degli elementi in modo efficiente può migliorare significativamente l'esperienza di narrazione.

3. Significativa riduzione delle frequenze di rimbalzo:

Spillo

La frequenza di rimbalzo si riferisce al numero di persone che fanno clic sul sito Web e fanno clic sul pulsante Indietro nella scheda prima di esplorare completamente il sito Web. Le frequenze di rimbalzo frequenti e elevate possono influenzare in modo significativo il posizionamento SEO. I siti Web a scorrimento in parallasse hanno frequenze di rimbalzo significativamente inferiori poiché la maggior parte di essi sono siti a scorrimento a pagina singola. L'esperienza dinamica che gli utenti ottengono assistendo allo scorrimento del parallasse li tiene coinvolti.

Ora che abbiamo coperto i vantaggi dell'utilizzo dello scorrimento in parallasse, possiamo discutere i vari tipi di tecniche di scorrimento in parallasse disponibili per i web designer. Ci sono due grandi categorie per gli effetti di parallasse. Effetti di parallasse basati sullo scorrimento ed effetti di parallasse basati sul mouse.

Gli effetti di parallasse basati sullo scorrimento sono effetti di parallasse che sperimenteresti quando scorri verso il basso un sito Web. Ogni tipo di scorrimento parallasse soddisfa un'esigenza e uno scopo diversi. Alcuni degli effetti di scorrimento della parallasse sono:

1. Scorrimento sfondo parallasse:

È uno dei modi più antichi ma efficaci di usare lo scroll di parallasse. Utilizzando questo, quando l'utente scorre sul sito Web, l'immagine di sfondo cambia. Questo aiuta a raccontare storie avvincenti con stile.

2. Scorrimento verticale parallasse:

Parallax Vertical Scroll è l'ideale per i siti Web in cui si desidera che gli utenti sentano che il sito Web si sta muovendo con loro, utilizzando elementi mobili che si sposterebbero a velocità diverse. Questo può essere fatto anche in più livelli.

3. Effetto di trasparenza della parallasse:

L'effetto di trasparenza parallasse è un effetto uniforme in cui il testo o l'immagine svaniscono lentamente quando l'utente scorre verso il basso. Sarebbe anche svanito quando l'utente scorreva verso l'alto.

4. Scorrimento orizzontale parallasse:

Parallasse Lo scorrimento orizzontale crea un senso di movimento in orizzontale quando l'utente scorre il sito Web verso il basso. Gli elementi a sinistra si avvicinano al centro. Questo crea un senso di movimento.

5. Effetto scala parallasse:

Effetto scala parallasse consente all'utente di creare uno zoom avanti e indietro dell'effetto tunnel. Lo zoom è proporzionato alle proporzioni, quindi crea un'illusione unica che sembra interessante. Sembra un effetto di distorsione che porta l'utente in un'altra dimensione.

Ora che abbiamo discusso le diverse varianti degli effetti di scorrimento in parallasse, possiamo passare alla discussione delle pratiche di progettazione essenziali da tenere a mente durante la progettazione di un effetto di scorrimento in parallasse per il tuo sito web:

1. Ricorda sempre l'obiettivo principale del tuo sito web:

Spillo

Lo scorrimento del parallasse è divertente e può diventare accattivante. Non solo per gli spettatori, ma anche per il designer. Questo non dovrebbe tradursi nell'avere un sito web che ha un impressionante effetto di scorrimento della parallasse e nessuna focalizzazione sui contenuti. Lo scorrimento in parallasse come altri elementi di design dovrebbe funzionare come segnali visivi che dovrebbero guidare il visitatore nei luoghi in cui intendi trovarlo. Dovrebbe aiutare a raggiungere gli obiettivi di business come vendere un prodotto, diffondere contenuti o generare lead.

Se utilizzi eccessivamente lo scorrimento in parallasse senza alcun contesto o scopo in mente, potresti impressionare gli spettatori sul tuo sito, ma non si tradurrebbero in lead o conversioni efficaci. Usa lo scorrimento in parallasse per aumentare le possibilità di ciò che vuoi che l'utente faccia. Un ottimo trucco per questo è bloccare un CTA avvincente ma sottile a piè di pagina della pagina. In questo modo, quando gli utenti scorreranno il sito, vedranno lo scorrimento del parallasse in azione. Avrebbero anche uno o due pulsanti costanti che sono statici e onnipresenti. Ciò attirerebbe il visitatore a fare clic sul pulsante per vedere cosa succede.

2. Non abusare dell'effetto di scorrimento della parallasse:

Spillo

L'effetto di scorrimento della parallasse ha un certo fattore wow. Si rompe per la natura banale e stagnante di qualsiasi sito Web che crea un improvviso interesse nell'occhio del visitatore. Poiché l'utilizzo dello scorrimento in parallasse fa muovere gli elementi del sito Web a velocità diverse, trovare il giusto equilibrio tra divertimento e caos è essenziale quando si utilizza lo scorrimento in parallasse. Se il sito Web ha molti elementi in rapido movimento o anche troppi elementi in movimento, potrebbe diventare opprimente per il visitatore tenere il passo. Eliminerebbe la loro guida visiva in tutto il sito Web e creerebbe confusione.

3. Crea prototipi di effetti di scorrimento di parallasse e testali:
Spillo

È sempre una buona idea costruire un prototipo interattivo prima di finalizzarlo nella fase di sviluppo. Questo aiuta i progettisti a testare il loro effetto di scorrimento parallasse prima di renderlo attivo. I progettisti dovrebbero testare l'effetto sull'usabilità e sull'esperienza dell'utente. Poiché il parallasse è così versatile e diverso nel suo approccio, può influenzare persone diverse in modi diversi. È facile deviare dall'utile parallasse per creare effetti di scorrimento del parallasse che causano distrazione. Quindi testalo a fondo con utenti reali che sono obiettivi e hanno un senso del web design. Inoltre, provalo con un pubblico generico poiché sono quelli per i quali stai facendo l'effetto.

4. Pianifica il contenuto per l'uso mobile:

Spillo

La navigazione in rete non è più limitata ai computer. Più della metà degli utenti preferisce invece navigare su smartphone e tablet. Google ha anche modificato i risultati dei suoi motori di ricerca in base ai quali regola e classifica i siti Web in modo diverso per dispositivi mobili rispetto a desktop. Ciò significa che se il tuo sito Web si posiziona bene sulla navigazione desktop, ma ha un design mobile ostile, non si classificherebbe in alto su Google quando lo cerchi tramite il telefono. Lo scorrimento in parallasse non è ottimizzato per i dispositivi mobili. I tablet lo supportano in una certa misura, ma non i cellulari. La soluzione pratica per questo è non utilizzare gli effetti di parallasse per il tuo sito mobile.

Il layout di base del tuo sito dovrebbe essere progettato in modo tale da essere facilmente traducibile su dispositivi mobili. Bisogna fare attenzione a tutte le sezioni che si sovrappongono e traboccano. Gli sfondi non devono entrare in conflitto con la leggibilità del contenuto. Per il sito mobile, mantieni solo gli elementi di progettazione necessari. Questo ti aiuterebbe in due modi: gli utenti che utilizzano il browser sul proprio cellulare potrebbero utilizzare i dati mobili. Avere un sito più leggero li aiuterebbe a caricare il sito più velocemente e spendere meno dati per navigare attraverso il tuo sito. Inoltre, non influenzerebbe il tuo posizionamento SEO in questo modo.

5. Reattività del tuo sito web:

Spillo

Non abbiamo più connessioni di rete che impiegano minuti o ore per caricare un sito web. Tutti hanno accesso a Internet alla velocità in cui gli utenti potrebbero essere su un sito Web per un secondo e passare a un altro in un secondo che passa. Con questa facilità di velocità arriva la facilità delle opzioni. Le persone navigano attraverso diversi siti web ogni giorno. Se il tuo sito Web non si carica in modo relativamente veloce, non rimarranno in attesa che il tuo sito Web si carichi e mostri il suo straordinario effetto di parallasse. La parallasse è un trucco pesante e anche quando la ottimizzi; ci vorrebbe un colpo sul tempo di caricamento della pagina. Diventa tuo dovere ottimizzarlo il più possibile se ritieni che mantenere lo scorrimento del parallasse contribuisca in modo significativo al tuo sito web.

Ora che comprendiamo tutti gli aspetti dello scorrimento in parallasse e come sfruttarlo al meglio, diamo un'occhiata ad alcuni dei siti Web che hanno implementato con successo lo scorrimento in parallasse nella progettazione di siti Web in modo efficiente:

1. La storia dei Goonies:

Spillo

Questo sito Web ha utilizzato un effetto di scorrimento parallasse dedicato per evidenziare il film classico The Goonies. Utilizza lo scorrimento immersivo della parallasse per parlare della trama del film e altri dettagli come il nome del regista, la data di uscita, i profili dei personaggi e altro ancora. È stato creato utilizzando WebFlow e funziona come tributo al film classico. Quando visiti il ​​sito Web, la prima interazione utilizza l'effetto scala parallasse che aiuta l'utente a sentirsi come se stesse viaggiando all'interno della storia con il sito Web. Ogni effetto di parallasse viene utilizzato per indirizzare segnali visivi per il visitatore e viene eseguito senza sforzo. Utilizza anche l'audio per un'esperienza narrativa coinvolgente.

2. Studio per cani:

Spillo

Dogstudio è uno studio creativo che fonde arte, tecnologia e design. Per mostrare, questo hanno progettato in modo intelligente il loro sito web. Il centro del sito Web ha un cane che si ridimensiona e ruota mentre l'utente continua a scorrere il sito Web. Anche la luce sul cane continua a cambiare quando passi il mouse sui loro progetti recenti. Ci sono anche effetti di parallasse basati sul mouse. All'inizio della pagina web, se passi il mouse verso sinistra, il cane si inclina verso destra e viceversa. È un uso efficace dello scorrimento in parallasse.

3. Firewatch:

Spillo

Firewatch è un gioco creato da Campo Santo. C'è un sito web per promuovere questo gioco che fa un uso sottile ma impressionante dello scorrimento del parallasse. Quando visiti il ​​sito, vieni trattato con un'immagine banner che sembra coinvolgente così com'è. Quando scorri il sito Web verso il basso, l'immagine e il contenuto si spostano verso l'alto, creando un effetto di scorrimento parallasse semplice ma efficace. Il sito Web utilizza 6 livelli per renderlo liscio così com'è. Il resto del sito Web è statico, dove risiede tutto il contenuto. Questo ti aiuta a leggere il contenuto e a conoscere meglio il gioco senza avere il mal di mare con effetti di parallasse esagerati. Usano un effetto di parallasse per catturare l'attenzione, quindi forniscono informazioni rilevanti per catturare l'interesse del visitatore.

Ora sai perché lo scorrimento parallasse è una tendenza di design così popolare ai giorni nostri. Ha molti vantaggi che i web designer possono sfruttare. Non c'è possibilità di ripetitività con un altro sito Web a causa delle numerose varianti di scorrimento parallasse disponibili. I siti Web menzionati in questo elenco illustrano anche come l'effetto può essere utilizzato interamente a scopo narrativo o come elemento aggiuntivo per migliorare l'atmosfera del sito Web. Comprendi perché e dove dovresti usare lo scorrimento in parallasse nel tuo sito web e sfruttalo. Non forzarlo solo per il valore estetico.