Embed Size (px)
Citation preview
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
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
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://it.pinterest.com/
https://www.lefrecce.it/
News http://www.repubblica.it/
https://www.lefrecce.it/
News http://espresso.repubblica.it/
Simmetria radiale http://digitalchihua.com/
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
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/
