Lo scorrimento è un componente chiave di qualsiasi progetto di sito Web che si estende oltre una singola pagina di destinazione. Chiunque pensi che la pergamena sia morta deve saltare fuori dal 2005!
Le azioni di scorrimento spostano gli utenti attraverso il contenuto verticalmente o orizzontalmente e sono uno schema utente comunemente accettato. La pergamena è viva e vegeta grazie a numerose tecniche di progettazione interessanti e uno spostamento verso l'accesso a siti Web completi su schermi più piccoli. Diamo un'occhiata!
6 modi per usare le azioni di scorrimento
Un'azione di scorrimento non è solo un trucco elegante per la progettazione del tuo sito web. Deve fare qualcosa e guidare gli utenti a interagire con contenuti specifici o eseguire una determinata azione. A meno che tali criteri non siano soddisfatti, le azioni di scorrimento sono solo trucchi sciocchi.
Esistono diversi modi per coinvolgere gli utenti con lo scorrimento:
- Scorri verticalmente: Questo è il modello più intuitivo in cui gli utenti si muovono su e giù per la pagina. Anche senza molte altre informazioni, gli utenti cercheranno di scorrere verso il basso se hanno qualche interesse nel design o nel contenuto.
- Scorri orizzontalmente: Mentre questo schema sta diventando più comune grazie a una proliferazione di cursori di immagine, la maggior parte degli utenti ha ancora bisogno di un segnale di scorrimento orizzontale, come una freccia o un'istruzione. Quindi devi decidere se lo scorrimento orizzontale è un'azione a una o due vie.
- Usa i livelli: La stratificazione di oggetti aiuta gli utenti a vedere schemi e movimenti (si pensi ai principi di Material Design). Impilando elementi su uno sfondo e un primo piano, puoi incoraggiare lo scorrimento.
- Indica agli utenti di scorrere: Non c'è niente di sbagliato in un'icona o un bit di microcopia che indica agli utenti dove e come scorrere. Includere l'elemento appena sopra il punto in cui lo schermo si rompe? e gli utenti dovrebbero scorrere per vedere di più.
- Usa clic per scorrere: Se utilizzi un'icona o un elemento per incoraggiare lo scorrimento, attivalo anche con un clic. (Gli utenti quasi non possono fare a meno di fare clic sugli elementi che assomigliano ai pulsanti.) L'uso di un clic per scorrere l'azione offrirà una piacevole sorpresa che rimanda gli utenti al prossimo bit sul contenuto.
- Scorri ovunque: Non esiste una regola che dice che scroll debba essere su e giù o sinistra e destra. Può muoversi in qualsiasi numero di modi. Considera modelli rotondi, diagonali o di altro tipo purché siano facili da comprendere per gli utenti in relazione al contenuto e incoraggiare l'impegno.
10 esempi di killer per l'ispirazione
Ora che hai un'idea di come progettare le azioni di scorrimento, lasciati ispirare da alcuni esempi di grande design. Per sfruttare al massimo tutti gli esempi riportati di seguito, assicurati di fare clic sui siti Web e di giocare per ottenere il massimo da ciascuna esperienza interattiva.
Noterai che ogni progetto si avvicina allo scrolling in modo leggermente diverso. Alcuni sono più intuitivi di altri, ma offrono tutti una base di partenza interessante per iniziare. Godere!
Produzioni IMS
IMS Productions utilizza lo scrolling verticale per presentare efficacemente le storie su uno schermo? Al tempo. Ogni scorrimento porta gli utenti a un nuovo profilo che riempie lo schermo e offre una mini esperienza a sé stante. Nota le sottili linee verticali e le frecce che indirizzano tutti gli utenti a scorrere lungo il design del sito web.
Amore istantaneo
Le coppie Instant Love eseguono lo scorrimento di azioni e suoni per un esperimento musicale molto divertente. Ogni azione di scorrimento presenta un nuovo brano che l'utente può ascoltare, completo di informazioni sulla traccia e sull'artista. Le azioni di scorrimento sono utilizzate come un gioco per incoraggiare l'impegno e l'interazione per un periodo prolungato.
Smart USA
Smart USA utilizza un sacco di fantastiche tecniche di scorrimento, tra cui una visione a 360 gradi, per aiutare a vendere auto. Questo tipo di funzionalità di scorrimento può essere utile per l'e-commerce e le vendite di prodotti perché gli utenti possono esplorare i prodotti in modo più dettagliato rispetto alle sole immagini.
Havaianas
Havaianas utilizza lo scorrimento orizzontale per mostrare i prodotti. La cosa bella di questo schema è che ogni diapositiva nello scroll include una chiamata all'azione e la barra di avanzamento in basso. Mentre i pannelli si spostano automaticamente, gli utenti possono prendere il controllo in qualsiasi momento per vedere solo il contenuto che stanno cercando.
PlayUP
Playup è un'avventura animata di parti in movimento che cambiano e si spostano con ogni tocco del mouse. C'è molto da fare con le azioni di scorrimento, ma i movimenti sono rapidi e allettanti, specialmente con le scelte di colori più audaci. Inoltre, gli utenti possono scorrere verso l'alto o verso il basso e c'è sempre un'indicazione visiva sulla destra che ti consente di sapere quali azioni sono disponibili.
Pharrell Williams
Pharrell Williams ha uno dei siti di scorrimento più divertenti che troverai. Si muove in ogni direzione, rimbalza, cambia e cambia forma sotto i tuoi occhi. E ogni parte del design è diretta da azioni di scorrimento. Una volta che gli utenti fanno clic sulle carte dalla homepage, le pagine interne sfruttano al meglio lo scorrimento continuo con il movimento della parallasse per mantenere la stessa vibrazione.
Tubelectric
Tubelectric non sembra un progetto che avrà molti effetti a scorrimento, ma utilizza una semplice stratificazione e animazione per evidenziare il prodotto. Ci sono delizie di design inaspettate con ogni colpo di mouse per un sito web che potrebbe avere un design generale piatto.
Il sito Web più alto del mondo
Il sito Web più alto del mondo è uno sciocco esempio di scorrimento all'estremo. Continua a scorrere per più di 11 miglia. Divertiti!
Rocket Lab
Rocket Lab utilizza uno scorrimento verticale più tradizionale sotto il video a pagina intera per presentare le informazioni. Ciò che è particolarmente bello è la microcopia -? Rotoliamo? - per dire agli utenti di continuare a scorrere di più.
Sliders
I cursori utilizzano un'azione di scorrimento parallasse per mostrare il ristorante e le voci di menu. Il design generale è piuttosto semplice e le azioni di scorrimento non sono complicate, ma tutto si unisce facilmente. Questo è un ottimo esempio di come combinare azioni interessanti dell'interfaccia utente con immagini stellari.
Conclusione
Lo scrolling ha molte forme diverse.Speriamo che questi esempi ti ispirino a creare qualcosa con uno schema di scorrimento interessante o nuovo per aiutare a coinvolgere una nuova base di utenti.
Ricorda solo, come con qualsiasi cosa di nuovo. Provalo. Guarda l'analisi. Apporta le modifiche necessarie per assicurarti che i tuoi modelli sperimentali di scorrimento e progettazione abbiano successo e servano gli utenti in modo corretto.