![Page 1: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/1.jpg)
PATTERNSLAYOUT SCROLLPattern visivi
Tipi di layout
Tipi di scroll
![Page 2: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/2.jpg)
Pattern visivipattern F e pattern Z
L'utente scansiona visivamente un'interfaccia secondo
dei modelli comportamentali chiamati pattern
Pattern diffusi:
F-pattern
Z-pattern
![Page 3: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/3.jpg)
Pattern F
E' un pattern che l'utente segue quando si trova a
dover scansionare un sito denso di contenuto
siti di notizie, wiki e blog
È valido per le lingue scritte da sinistra verso destra
![Page 5: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/5.jpg)
Pattern F
1. L'utente guarda inizialmente in alto a sinistra (punto 1)
2. Scansiona visivamente la header del sito fi no all'angolo destro (punto 2)
3. Scorre dall'alto in basso la parte sinistra dello schermo cerando elementi d'interesse (punto 3)
4. Se trova qualcosa che lo colpisce prosegue la lettura da sinistra verso destra disegnando con lo sguardo una serie di linee orizzontali (punto 4)
![Page 6: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/6.jpg)
Pattern FSuggerimenti
● Considerare che diffi cilmente l'utente legge un testo per intero
● Suddividere il contenuto in sezioni facilmente scansionabili
● Considerare che i primi blocchi sono i più importanti per catturare l'attenzione
● Iniziare paragrafi e sezioni con parole accattivanti
● Utilizzare gli elenchi puntati
● Interrompere la monotonia inserendo elementi diversi nel fl usso di lettura (es. call to action, approfondimenti, immagini, pubblicità)
![Page 7: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/7.jpg)
https://www.lefrecce.it/
Pattern-F https://www.amazon.it/
![Page 8: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/8.jpg)
https://www.lefrecce.it/
Pattern-F https://www.entrepreneur.com/
![Page 9: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/9.jpg)
https://www.lefrecce.it/
Pattern-F http://tympanus.net/codrops/
![Page 10: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/10.jpg)
Pattern Z
E' un pattern che l'utente segue quando si
trova a dover scansionare un sito basato su
contenuti visivi
landing page, siti visivi
![Page 13: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/13.jpg)
Pattern Z
1. L'utente guarda inizialmente in alto a sinistra (punto 1)
2. Scansiona visivamente la header del sito fi no all'angolo destro (punto 2)
3. Esplora la pagina in diagonale (punto 3)
4. Scansiona la parte bassa del sito (punto 4)
5. Prosegue la lettura a zig-zag
![Page 14: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/14.jpg)
Pattern FSuggerimenti
● Curare la grafi ca nel dettaglio
● Defi nire i contenuti principali della pagina (punto 3)
● Inserire le call-to-action nella parte bassa dello schermo
![Page 15: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/15.jpg)
https://www.lefrecce.it/
Pattern-Z https://www.homeaway.co.uk/
![Page 16: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/16.jpg)
https://www.lefrecce.it/
Pattern-Z https://www.dunckelfeld.de/en/
![Page 17: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/17.jpg)
Altre tipologie di layout
● Cards● Grid● News● Libero● Diviso
● Web App ● Simmetria orizzontale● Simmetria radiale● Asimmetria
![Page 18: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/18.jpg)
https://www.lefrecce.it/
Cards https://plus.google.com/
![Page 19: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/19.jpg)
https://www.lefrecce.it/
Cards https://www.facebook.com/
![Page 20: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/20.jpg)
https://www.lefrecce.it/
Cards https://www.twitter.com/
![Page 21: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/21.jpg)
https://www.lefrecce.it/
Grid https://www.youtube.com/
![Page 23: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/23.jpg)
https://www.lefrecce.it/
Grid https://it.pinterest.com/
![Page 25: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/25.jpg)
https://www.lefrecce.it/
News http://www.repubblica.it/
![Page 26: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/26.jpg)
https://www.lefrecce.it/
News http://espresso.repubblica.it/
![Page 37: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/37.jpg)
Simmetria radiale http://digitalchihua.com/
![Page 43: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/43.jpg)
Scrollingscrolling lungo
Takeit http://www.takeitapp.co/en
Monochrome http://www.monochrome.paris/
Saint Paix http://saintepaix.com/
Flickr https://www.fl ickr.com/explore
Zalando https://www.zalando.it/donna-casual-abbigliamento/
![Page 44: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/44.jpg)
Scrollingscrolling lungo fi sso
UXPin Tour https://www.uxpin.com/tour.html
Lana Papiers http://www.studiometa.fr/lana-papiers/
Hello Monday http://hellomonday.com/
![Page 45: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/45.jpg)
Scrollingscrolling infi nito
Tumblr https://www.tumblr.com/explore/photos
Pinterest https://it.pinterest.com/categories/everything/
![Page 46: PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente l'utente legge un testo per intero Suddividere il contenuto in sezioni facilmente scansionabili](https://reader035.vdocuments.us/reader035/viewer/2022071503/6123ab62d5a64167ca47b508/html5/thumbnails/46.jpg)
Scrollingscrolling in parallasse
Superlime http://www.superlime.fr/#
Porsche Evolution http://porschevolution.com/
The Boat http://www.sbs.com.au/theboat/