7 Suggerimenti per la progettazione su come scegliere, modificare e migliorare l'immagine del dispositivo di scorrimento

Negli ultimi 7 anni, gli slider (o i caroselli se vuoi) sono qualcosa che quasi tutti i siti web hanno. È una pratica comune. Qualcosa a cui tutti siamo abituati. È la prima cosa che il tuo visitatore vedrà sul tuo sito web. È il momento del fai o rompi. Le immagini del dispositivo di scorrimento devono fare un'ottima prima impressione, altrimenti perderai il tuo visitatore per sempre.

Quando guardo i siti Web realizzati dai nostri clienti con i nostri temi WordPress, vedo spesso immagini di slider mal preparate. La maggior parte delle volte le foto sono troppo grandi o troppo piccole. Il testo sul dispositivo di scorrimento non è sufficientemente visibile e le immagini non sono ottimizzate, quindi la pagina stessa si carica molto lentamente.

Il mio cuore si spezza un po' quando vedo un sito web nel complesso buono con una buona copia, ma immagini di scorrimento scadenti. Ho deciso di fermare questa follia condividendo alcuni semplici trucchi.

1. Scegli la foto giusta

Innanzitutto. Scegli la foto giusta. Scegli un'immagine che sia sufficientemente descrittiva e abbia abbastanza spazio bianco. Dai un'occhiata dove appare il testo sul cursore e scegli l'immagine che ha il minor rumore visivo possibile in quell'area.

2. Una foto ad alta risoluzione è d'obbligo

Usa la risoluzione consigliata dal creatore del tema. Negli ultimi 4 anni, ho visto un miliardo di siti Web con foto a piccola risoluzione allungate su tutto lo schermo. Non puoi mancare se scegli un'immagine larga 1920px. Niente scoraggia il tuo visitatore più di una foto pixelata nel dispositivo di scorrimento. Un'eccellente risorsa di foto gratuite e di alta qualità è Unsplash. Se hai un budget, ti consiglio di acquistare foto premium su Shutterstock. L'investimento ripagherà.

3. Scurire o schiarire la foto

Un buon trucco per rendere più visibile un testo sul tuo dispositivo di scorrimento è scurire (o schiarire) la foto. Questo potrebbe essere fatto in Photoshop o qualsiasi altro programma di fotoritocco. Per questo tutorial, utilizzerò un'app di progettazione gratuita chiamata Canva. Dopo esserti registrato a Canva, fai clic su "Crea un design" nell'angolo in alto a sinistra. Quindi nell'angolo in alto a destra fai clic su "Utilizza dimensioni personalizzate" e inserisci le dimensioni consigliate dallo sviluppatore del tema. Se non esiste una risoluzione consigliata, vai al sito demo del tema WordPress e controlla la foto (o cambia il provider del tuo tema WordPress con noi).
Fai clic su "Progetta!" e vai su "Caricamenti" nel menu a sinistra. Carica la tua immagine di scorrimento e trascinala sulla lavagna. Nel menu in alto, fai clic su "Filtro" e riduci la "Luminosità" e il "Contrasto" del 10-20%. Se il colore del testo sul tuo dispositivo di scorrimento è bianco, vuoi rendere la tua foto un po' più scura per migliorare il contrasto. Se hai del testo nero sul tuo dispositivo di scorrimento, vuoi fare l'opposto.

Fai un passo avanti. Colora la tua foto con i colori del tuo marchio spostando leggermente il carosello "Tinta" (Tonalità) a sinistra o a destra.

4. Sovrapposizione di colore semitrasparente

A volte non riesci a trovare una foto con spazio bianco sufficiente per il testo o il tuo cliente vuole che tu usi un'immagine troppo saturata in cui il tuo testo non sarebbe abbastanza visibile. In quella situazione, la cosa più semplice che puoi fare è creare una sovrapposizione di colori semitrasparente.

Per farlo, vai all'app Canva > Elementi > Forme e trascina e rilascia il primo rettangolo bianco o il secondo rettangolo scuro sulla lavagna (dove dice libero). Ridimensiona quel rettangolo da un bordo all'altro e coloralo in nero nell'angolo in alto a sinistra. Quindi nell'angolo in alto a destra imposta la trasparenza per il tuo rettangolo su ~ 50%, dipende da quanto contrasto hai bisogno.

5. Aggiungi bagliore interiore alla tua foto

Un altro ottimo trucco per rendere più interessante la tua foto del cursore è aggiungere un bagliore interno semitrasparente nero. Questo metodo renderà il tuo sito ancora più professionale. Metterà l'attenzione al centro dello schermo. Nell'app Canva, questo effetto è chiamato "Vignettatura" e puoi trovarlo nel menu in alto "Filtro" > "Opzioni avanzate". Quando sei soddisfatto della tua foto del dispositivo di scorrimento, puoi salvarla facendo clic sul pulsante "Download" nell'angolo in alto a destra.

6. Scegli il tipo di file giusto

Quando si salva l'immagine del dispositivo di scorrimento modificata, è importante (a causa delle dimensioni del file) scegliere il tipo di file corretto. Non preoccuparti; la regola è semplice. Se l'immagine del dispositivo di scorrimento è una foto reale, salvala come .jpg. Se è qualcosa di diverso da una foto (ad esempio, motivo, icona, doodle), salvalo come .png. Questo è importante perché vuoi che le tue immagini del dispositivo di scorrimento siano il più leggere e ottimizzate possibile.

7. La velocità della pagina conta molto

Sia per Google che per il tuo visitatore. Le immagini del dispositivo di scorrimento sono le immagini più grandi (forse anche i file) del tuo sito Web, quindi è importante ottimizzarle. Un ottimo strumento per ridurre le dimensioni di un'immagine è TinyPNG. La loro semplice interfaccia drag & drop ti consente di ridurre le dimensioni dell'immagine senza perdere la qualità. Consulta le guide definitive per l'ottimizzazione delle immagini e l'ottimizzazione della velocità della pagina.

Suggerimento bonus: utilizza le dimensioni consigliate per l'immagine del dispositivo di scorrimento

Quando sviluppiamo temi WordPress, facciamo uno sforzo extra nella scelta della giusta dimensione e proporzione della foto del dispositivo di scorrimento. La foto stessa deve funzionare bene su tutte le dimensioni dello schermo. Vedo molti casi in cui gli utenti utilizzano dimensioni diverse da quelle consigliate. Il più delle volte, le foto nel dispositivo di scorrimento occupano troppo spazio verticale.

Questo non è un problema per la funzionalità dello slider stesso, ma se il tuo visitatore deve scorrere molto per arrivare al contenuto, non fa nulla di buono per quanto riguarda l'esperienza dell'utente.

Se desideri comunque utilizzare immagini più grandi di quelle consigliate, tieni almeno a mente una buona vecchia regola above the fold.

Il dispositivo di scorrimento è la prima cosa che il tuo visitatore vedrà sul tuo sito web. Migliora la loro esperienza utente implementando alcuni dei trucchi di cui sopra. Non ci vorrà molto tempo, ma migliorerà la felicità di te, del tuo cliente e del visitatore del tuo cliente.

Quindi ora che hai un'idea su come migliorare le tue immagini di slider, discutiamo i pro ei contro dell'utilizzo degli slider. A quanto pare, ci sono molte ricerche che affermano che gli slider possono danneggiare il tuo sito Web più di quanto possano aiutarlo. Anche gli autori del plugin Yoast SEO affermano che gli slider dovrebbero essere banditi dal tuo sito, quindi vale sicuramente la pena discutere dei vantaggi e degli svantaggi degli slider, nonché quando sono appropriati e quando è meglio evitarli.

Contro dell'utilizzo degli slider sul tuo sito web

Per prima cosa, diamo un'occhiata agli svantaggi più importanti degli slider.

Pochissimi plugin di slider sono veramente mobile responsive

Ti sei mai imbattuto in un sito Web che utilizza uno slider e hai provato a visualizzarlo sul tuo telefono? Sebbene sia vero che i telefoni stanno diventando più grandi, il semplice fatto è che la maggior parte dei cursori si ridimensiona per adattarsi alle dimensioni dello schermo più piccole.

Ciò si traduce in immagini e testo troppo piccoli per essere letti e visualizzati su schermi più piccoli. Alla fine, il tuo bellissimo dispositivo di scorrimento sarà molto probabilmente ignorato sui telefoni, quindi pensaci due volte al contenuto che stai aggiungendo alla tua presentazione.

Se sei abbastanza fortunato da utilizzare un plug-in di scorrimento reattivo come Soliloquy, preparati a dedicare un po' di tempo a personalizzare i tuoi dispositivi di scorrimento per assicurarti che abbiano un bell'aspetto su tutti i dispositivi. Già che ci sei, assicurati di testare il dispositivo di scorrimento e vedere come appare su una varietà di dimensioni dello schermo e dispositivi.

La maggior parte dei visitatori non si fermerà oltre le prime due diapositive

Se prendi in considerazione che la nostra capacità di attenzione si sta accorciando sempre di più, è lecito ritenere che la maggior parte dei visitatori non si fermerà oltre le prime due diapositive.

Quando i visitatori atterrano sul tuo sito, vogliono sapere immediatamente cosa fai e come puoi aiutarli. Se le tue diapositive non rispondono a queste domande, è probabile che vadano avanti.

I controlli a scorrimento possono essere facilmente persi

I controlli a scorrimento sono generalmente icone discrete progettate e progettate in modo da non sminuire il contenuto effettivo della diapositiva. In quanto tali, le frecce utilizzate per navigare attraverso il dispositivo di scorrimento possono essere facilmente perse.

Questo problema è ancora più evidente su schermi più piccoli, il che significa che i tuoi visitatori mobili avranno difficoltà ad andare avanti e indietro tra le diapositive o a fare clic sul pulsante che li porta in un'altra parte del tuo sito web.

Gli slider possono rallentare il tuo sito

Se non stai attento a ottimizzare le tue immagini per gli slider e per il Web in generale, gli slider possono rallentare il tuo sito. Inoltre, gli slider utilizzano spesso file JavaScript ricchi di risorse.

Ognuno di questi file JavaScript è un'altra richiesta che un browser deve fare al server di hosting su cui si trova il tuo sito web. Mentre il browser effettua tali richieste, i tuoi visitatori aspettano il caricamento del tuo sito Web poiché il browser non può procedere fino a quando i file JavaScript necessari (così come i file di stile per gli slider e il tuo sito) non sono stati caricati.

Di conseguenza, i visitatori potrebbero sentirsi frustrati e partire per un altro sito Web che si carica molto più velocemente e fornisce loro la stessa soluzione per cui sono venuti sul tuo sito.

Vale anche la pena ricordare che, a causa dell'impatto sui tempi di caricamento del sito Web, gli slider potrebbero influire negativamente sulla tua SEO.

L'occhio umano reagisce al movimento

Infine, tieni presente che i nostri occhi sono naturalmente attratti dal movimento. Se utilizzi gli slider in tutto il tuo sito web, possono distrarre gli utenti e far sì che smettano di prestare attenzione al resto del contenuto del tuo sito.

Ogni volta che una diapositiva cambia, corri il rischio che il tuo visitatore che stava per fare clic su quel pulsante di prenotazione per concentrarsi su qualcos'altro. Ciò potrebbe portare a una perdita di conversioni che quindi porta a meno vendite e meno profitti complessivi.

Un'altra cosa da tenere a mente è che se stai utilizzando un dispositivo di scorrimento, non utilizzare l'opzione di scorrimento automatico in quanto può peggiorare rapidamente l'esperienza utente per i tuoi visitatori. Immagina se qualcuno inizia a leggere il testo sulla diapositiva e quindi l'immagine cambia prima che abbiano finito di leggerla. Ciò potrebbe lasciare i tuoi utenti frustrati e indurli a lasciare il tuo sito.

Vantaggi dell'utilizzo degli slider sul tuo sito web

Ora che abbiamo coperto i contro dell'utilizzo dei cursori, diamo un'occhiata al motivo per cui potresti prendere in considerazione l'utilizzo di uno.

Puoi mostrare più contenuti in meno spazio

Per loro natura, gli slider rendono facile mostrare più contenuti above the fold o in qualsiasi altra parte del tuo sito senza creare pagine lunghe. Puoi utilizzare tutte le diapositive che desideri per condividere il messaggio che desideri attraverso le diapositive e presentarlo in un modo visivamente accattivante.

Ciò ti consente di mantenere la tua home page breve e dolce, concentrandoti sugli elementi più importanti invece di utilizzare tutto quello spazio per raccontare una storia visiva su un singolo prodotto o servizio.

I cursori semplificano l'aggiunta di testo alle immagini senza utilizzare Photoshop

La maggior parte dei plug-in di scorrimento ti consente di caricare la tua immagine e aggiungere testo senza utilizzare Photoshop o altri programmi di modifica delle immagini. Alcuni dispositivi di scorrimento consentono persino di aggiungere pulsanti e inviti all'azione o collegamenti ad altre parti del tuo sito web.

Grazie all'interfaccia di amministrazione dello slider, puoi facilmente scrivere e formattare il tuo testo utilizzando strumenti simili a quelli che si trovano nell'editor dei post o in Word. Puoi persino personalizzare il design della diapositiva aggiungendo colori o caratteri personalizzati, regolando il tipo di transizione e la durata e altro ancora.

Gli slider obbligano gli utenti a interagire con il tuo sito web

Per quanto grezzo possa sembrare, gli slider rendono impossibile agli utenti di non interagire con il tuo sito web. Se non vogliono aspettare che appaia la prossima diapositiva, possono semplicemente fare clic sulle frecce per andare avanti e indietro attraverso tutte le diapositive.

Se hai incluso collegamenti o pulsanti che li portano a una pagina diversa, possono fare clic sui pulsanti ed esplorare tutto ciò che hai da offrire sul tuo sito web. In altre parole, le diapositive forniscono un maggiore coinvolgimento per i tuoi utenti, quindi se desideri che i visitatori interagiscano con il tuo sito dalla prima volta che ci atterrano, gli slider potrebbero essere la risposta.

Gli slider sono un ottimo modo per condividere il tuo lavoro

Se sei un designer, un illustratore, un fotografo o un artista, gli slider sono un ottimo modo per mostrare il tuo lavoro senza che il tuo portfolio occupi l'intera pagina. Puoi mettere insieme una presentazione del tuo lavoro migliore e condividerla come diapositiva sulla tua home page o persino sulla pagina del tuo portfolio.

I cursori sono utili anche se vendi prodotti in quanto possono essere utilizzati per mostrare i prodotti più popolari, i nuovi arrivi o categorie specifiche.

Il verdetto: dovresti usare gli slider?

Con pro e contro fuori mano, è tempo di prendere una decisione: dovresti usare gli slider sul tuo sito web? La risposta a questa domanda si può riassumere in due parole: dipende.

Quando l'uso di uno slider è una buona scelta?

Pro e contro a parte, ci sono ancora alcuni buoni scenari in cui l'utilizzo di uno slider è una buona idea e una scelta solida.

• Usa un dispositivo di scorrimento quando vuoi mostrare il tuo lavoro o una galleria. Come accennato in precedenza, gli slider si prestano bene alla visualizzazione di gallerie fotografiche o elementi del portfolio. Se il tuo sito web appartiene a quella categoria, allora l'utilizzo di uno slider è un ottimo modo per mostrare il tuo lavoro senza sovraccaricare i tuoi visitatori.
• Usa un dispositivo di scorrimento per mostrare un prodotto. Allo stesso modo, se stai lanciando un nuovo prodotto o servizio; uno slider potrebbe essere un ottimo modo per mostrare il prodotto in azione o per evidenziarne vantaggi e caratteristiche.
• Usa un dispositivo di scorrimento per condividere una storia coerente. Questa potrebbe essere la storia del tuo marchio e della tua azienda oppure potresti mettere in evidenza i membri del tuo team e le loro competenze. Indipendentemente dal tipo di storia che decidi di condividere nel tuo dispositivo di scorrimento, assicurati che la storia abbia un senso, altrimenti i tuoi visitatori vedranno un mucchio di diapositive non correlate che non hanno senso. Allo stesso tempo, assicurati che ogni diapositiva crei anticipazione per la diapositiva successiva e incuriosisca i tuoi visitatori in modo che rimangano fino all'ultima.

Quando non dovresti usare gli slider?

Inutile dire che se il tuo sito Web non appartiene a una delle categorie precedenti o se non stai utilizzando gli slider da aggiungere al tuo sito Web, dovresti stare alla larga dagli slider. Ecco alcuni altri scenari in cui l'utilizzo dei cursori non è una buona idea.

• Se stai usando solo una diapositiva perché è alla moda. Solo perché tutti gli altri lo stanno facendo, ciò non significa che devi farlo anche tu. Non solo corri il rischio di non aggiungere nulla di prezioso al tuo sito con un dispositivo di scorrimento, ma corri anche il rischio di confonderti e sembrare uguale alla concorrenza.
• Se il tuo sito web è già lento, evita di usare gli slider. Come abbiamo detto sopra, gli slider possono essere piuttosto pesanti in termini di risorse, quindi l'ultima cosa che devi fare è rendere il tuo sito ancora più lento da caricare. Lavora prima per correggere la velocità del tuo sito, quindi considera l'aggiunta di un dispositivo di scorrimento.
• Se non sai cosa mettere nel tuo dispositivo di scorrimento, non aggiungerne uno. Uno slider funziona meglio quando c'è una storia dietro. Senza una storia, hai un pasticcio di immagini che non aggiungono alcun valore al tuo sito e potrebbero persino confondere i tuoi visitatori.
• Se puoi condividere il contenuto in un modo più semplice, fallo. Non ha senso complicare eccessivamente il design del tuo sito o sacrificare la velocità per il bene delle ultime tendenze di design. Una soluzione più semplice di solito significa che il tuo sito sarà più facile da aggiornare e mantenere, per non parlare più veloce da caricare. Pertanto, rinunciare a un dispositivo di scorrimento a favore di una soluzione più semplice è una scelta molto migliore.

Conclusione

Ora che conosci i pro e i contro dell'utilizzo degli slider, puoi prendere una decisione informata se l'utilizzo di uno slider è una buona scelta per il tuo sito web. E con i suggerimenti sull'ottimizzazione delle immagini di scorrimento, sarai sulla buona strada per creare diapositive attraenti che non danneggeranno l'esperienza dell'utente ma ti aiuteranno invece a ottenere più conversioni.