PATTERNS LAYOUT SCROLL - WordPress.comPattern F Suggerimenti Considerare che difi cilmente...

PATTERNSLAYOUT SCROLLPattern visivi

Tipi di layout

Tipi di scroll

Pattern visivipattern F e pattern Z

L'utente scansiona visivamente un'interfaccia secondo

dei modelli comportamentali chiamati pattern

Pattern diffusi:

F-pattern

Z-pattern

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

https://www.lefrecce.it/

Pattern-F

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)

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à)

https://www.lefrecce.it/

Pattern-F https://www.amazon.it/

https://www.lefrecce.it/

Pattern-F https://www.entrepreneur.com/

https://www.lefrecce.it/

Pattern-F http://tympanus.net/codrops/

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

https://www.lefrecce.it/

Pattern-Z

Pattern-Z https://evernote.com/intl/it/

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

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

https://www.lefrecce.it/

Pattern-Z https://www.homeaway.co.uk/

https://www.lefrecce.it/

Pattern-Z https://www.dunckelfeld.de/en/

Altre tipologie di layout

● Cards● Grid● News● Libero● Diviso

● Web App ● Simmetria orizzontale● Simmetria radiale● Asimmetria

https://www.lefrecce.it/

Cards https://plus.google.com/

https://www.lefrecce.it/

Cards https://www.facebook.com/

https://www.lefrecce.it/

Cards https://www.twitter.com/

https://www.lefrecce.it/

Grid https://www.youtube.com/

https://www.lefrecce.it/

Grid https://www.etsy.com/

https://www.lefrecce.it/

Grid https://it.pinterest.com/

https://www.lefrecce.it/

News http://time.com/

https://www.lefrecce.it/

News http://www.repubblica.it/

https://www.lefrecce.it/

News http://espresso.repubblica.it/

Libero http://startuplab.no/

Libero http://ciennenewyork.com/

Libero http://lookbook.wedze.com/winter-2016-2017/en

Diviso http://www.peugeot.com/en

Diviso http://www.62models.com/

Diviso http://jorisdelacroix.com/

Web App https://play.google.com/

Simmetria orizzontale http://www.motocms.com/

Simmetria orizzontale https://www.bitrix24.com/

Simmetria orizzontale http://www.city-dog.co.uk/

Simmetria radiale http://digitalchihua.com/

Simmetria radiale https://www.wikipedia.org/

Simmetria radiale http://www.technics.com/global/

Asimmetria http://www.jennyjohannesson.com/

Asimmetria http://www.duhaihang.com/portfolio/2016/

Asimmetria http://projections.pl/?lang=en

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/

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/

Scrollingscrolling infi nito

Facebook

Tumblr https://www.tumblr.com/explore/photos

Pinterest https://it.pinterest.com/categories/everything/

Scrollingscrolling in parallasse

Superlime http://www.superlime.fr/#

Porsche Evolution http://porschevolution.com/

The Boat http://www.sbs.com.au/theboat/