Share
Oggi esamineremo "F Pattern Layout". Piuttosto che cercare di forzare il flusso visivo dello spettatore, l'F-Layout si arrende ai comportamenti naturali della maggior parte dei navigatori e utilizza studi scientifici per sostenerlo. Questo tutorial ti guiderà attraverso i principi di F-Layout, perché funziona e come puoi crearne uno tuo.
Raggiungere una migliore comprensione di come i diversi layout possono cambiare il comportamento degli utenti è uno dei principi centrali per creare un'esperienza utente efficace.
Questo post segna il secondo di una serie in cui esamineremo l'ampia varietà di paradigmi di layout esistenti nel mondo del web design. L'obiettivo: capire meglio perché potresti scegliere un concetto di layout piuttosto che un altro. In questa serie, vedremo anche il layout a forma di "Z", il layout aperto e alcuni layout fuori dagli schemi che sono sicuri di darvi alcune grandi idee. Raggiungere una conoscenza migliore di come i diversi layout possono cambiare il comportamento degli utenti è uno dei principi centrali della creazione di un'esperienza utente efficace.
F-Layout si basa su vari studi di eyetracking per il suo concetto di base. Questi studi scientifici dimostrano che i navigatori del Web leggono lo schermo in uno schema a "F" - osservando la parte superiore, l'angolo superiore sinistro e il lato sinistro dello schermo quasi tutti ... solo occasionalmente guardano verso il lato destro dello schermo. Questi studi sull'orientamento degli occhi sostengono la possibilità di collocare gli elementi più importanti del tuo sito (branding, navigazione, call to action) sul lato sinistro del design.
Diamo un'occhiata a una heatmap usando Webdesigntuts + come esempio:
Questa heatmap mostra la forma astratta di F su cui gravitano i generali dell'utente. I punti caldi (rosso / arancione / giallo) rappresentano l'attenzione dell'utente più a lungo. Permettimi di guidarti attraverso il modello generale di comportamento:
Prendiamo un momento per trasformare questo schema in un wireframe di barebone:
Prenditi un momento per notare alcuni modelli comportamentali chiave; La lettura è in gran parte fatta nello stesso modo in cui si legge un libro: dall'alto in basso, da sinistra a destra; Il contenuto della barra laterale viene spesso ignorato sotto la "piega" e solitamente viene solo digitalizzato brevemente. La maggior parte dell'attenzione rimane all'interno della colonna del contenuto principale dove, in questo caso, si trova l'elenco degli articoli.
Un'ispezione ravvicinata rivela una gerarchia visiva che potresti aspettarti logicamente:
Come esercizio, passiamo attraverso la creazione di un disegno usando F-Layout. Innanzitutto, analizziamo il posizionamento approssimativo dei nostri principali elementi di contenuto utilizzando un metodo wireframe:
Si noti che stiamo cercando di rendere la nostra "mission statement" primaria il più vicino possibile alla parte superiore della pagina nel tentativo di comunicare rapidamente lo scopo del sito. Stiamo anche cedendo ai visitatori il desiderio di "scansionare" i contenuti rompendo il nostro design in due colonne principali ... una per il nostro contenuto principale, l'altra per le informazioni accessorie (la barra laterale).
Successivamente, aggiungiamo alcuni contenuti reali al design per vedere come appare:
È dura, ma gli ingredienti chiave sono lì. Noterai che l'intento principale del sito viene ora comunicato in pochi secondi ... la riga superiore di contenuti sta ora rispettando il suo dovere di "orientare" il visitatore; Se la tua navigazione è qui, sanno anche dove possono andare.
Sotto la riga superiore, stiamo usando immagini e titoli "orecchiabili" per attirare l'attenzione di un surfista ... anche se sono interessati solo a scansionare il contenuto, ci sono buone probabilità che siano in grado di trovare qualcosa di interessante.
Stiamo anche cercando di capitalizzare la seconda riga della "F" inserendo qui una pubblicità o "call to action" (n. 4).
Ora, sovrapponiamo il layout F originale per vedere come combaciano:
Non male vero? Potremmo voler armeggiare con i dettagli (stile, fraseggio dei titoli, ecc.), Ma per la maggior parte stiamo permettendo al comportamento di scansione del modello F di dettare il nostro design.
Una cosa da notare qui è che l'altezza di ciascuna delle due righe in cima alla "F" può essere variabile. Alcuni designer potrebbero scegliere di lasciarli il più sottili possibile per incoraggiare gli utenti a iniziare subito la scansione; altri potrebbero scegliere di renderlo una parte molto più dominante del design.
Cosa succede quando si vuole rompere il surfista dal "modello di scansione"? Sicuramente non trarrai beneficio da un utente annoiato se comincerà a smussare tutto, quindi aggiungiamo un elemento "scomodo" all'interno dell'area di scansione per mantenere l'utente interessato.
Questa tecnica di "rottura delle aspettative" del layout può essere utile quando si hanno lunghi intervalli verticali di contenuto che diventano noiosi o noiosi quando si scorre oltre i titoli della prima coppia. Lanciare allo spettatore una curva, puoi mantenere gli utenti in movimento intorno al tuo sito fornendo elementi visivamente interessanti 1000, 2000, anche 3000 pixel sotto la piega.
F-Layout funziona perché consente ai web-surf di eseguire la scansione dei contenuti in modo naturale. Il layout è confortevole perché le persone hanno letto da cima a fondo, da sinistra a destra per tutta la vita. Le implicazioni di questo modello comportamentale sono però qualcosa di un'arma a doppio taglio:
Se tutto questo sembra che stai progettando un sito più come un inserzionista che un designer, avresti ragione. La maggior parte dei siti che si basano in gran parte su F-Layout si basano anche su pubblicità o altri "call to action" nella barra laterale per generare entrate o qualche altro tipo di coinvolgimento degli utenti. Questa non è necessariamente una brutta cosa (ehi, sono quelle pubblicità laggiù sulla nostra barra laterale ?!), ma sottolinea la relazione tra il contenuto e la barra laterale ... il contenuto è re, la barra laterale di solito è lì per farti coinvolgere in qualcosa che ti porterà ad un altro livello.
Quindi cosa significa questo per una barra laterale? Una relazione efficace tra la colonna del contenuto e la colonna della barra laterale in un progetto utilizzerà la barra laterale in due modi:
Quindi, quale è venuto prima? L'F-Layout è stato progettato in risposta alle persone che scansionano i siti in F-Pattern, o i web-surfer hanno iniziato a scansionare le pagine in F-Pattern come risposta a così tanti siti progettati in quel modo ... La mia personale ipotesi è che si tratta di un un po 'di entrambi. Sì, le persone hanno sempre letto da cima a fondo, da sinistra a destra; ma la prevalenza del layout del sito a 2 colonne certamente incoraggia i visitatori del sito web a scansionare come fanno.
Il semplice fatto è che F-Pattern è supportato dalla ricerca, quindi se vuoi che il tuo layout aderisca strettamente ad esso, vale almeno considerando come i visitatori reagiranno al tuo sito se preferiscono "F-scan" la rete.
Ok, quindi prima che li elenchi, vale la pena dire che praticamente qualsiasi impostazione del sito web sul tradizionale layout di blog a 2 colonne utilizza un layout "F-Pattern", quindi è quasi troppo prevedibile mostrare più siti che utilizzano lo standard F-pattern.
Cosa noi siamo andando a guardare in questi esempi è come ognuno di questi disegni eccelle nel manipolare il flusso oculare del modello F ... notate che i disegni più efficaci sono quelli che anticipano il comportamento di scansione del modello F, e quindi lo usano a loro vantaggio.
DesignSnack.com non solo ti dice cosa sono in cima alla "F", ti coinvolge davvero prima ancora di iniziare a scorrere. 
Il sito di LAtimes.com è uno dei miei siti di giornali preferiti. Avrai voglia di notare quanto pesantemente "rompono le aspettative di layout" una volta che inizi a scorrere verso il basso. 
Kickstarter offre una dichiarazione di missione efficace nella parte superiore, ma si rompono dallo schema abbandonando completamente la barra laterale in favore della bontà della scansione pura al di sotto della piega. 
I phototuts (o qualsiasi sito sulla rete Tuts +) si basano fortemente sul flusso dell'occhio del modello F. Prendi nota di quella barra laterale laggiù. È noioso? No ... ogni widget della barra laterale include un po 'di design personalizzato che lo mantiene interessante e pertinente. Oh, e nota come i titoli siano leggibili ... a volte un modello di progettazione semplice e diretto è l'approccio migliore. 
CollegeHumor potrebbe essere l'ultimo posto in cui pensi per una lezione formale di design, ma dai un'occhiata alla loro prima pagina. Lo depongono su THICK nella parte superiore della porzione F ... così tanto che potresti chiamarlo layout FFFFF. Il ragionamento di questo è semplice: se non riesci a battere il desiderio di un utente di sfogliare rapidamente i tuoi contenuti alla ricerca di qualcosa di allettante, puoi anche unirti a loro. 
GigaOm è un altro sito che eccelle nel "rompere le aspettative di layout". Mentre visiti il sito, scorri verso il basso per vedere come distribuiscono contenuti interessanti fino in fondo. 
Il tour prodotto di SquareSpace mostra che non è necessario avere la barra laterale sul lato destro ... infatti, puoi sfruttare il fatto che gli utenti si aggirano verso il gambo della F posizionando una sotto-navigazione lì. 
Ho salvato CreativeSessions per ultimo perché stanno facendo qualcosa di completamente diverso. Essenzialmente usano la parte superiore della F come un enorme teaser (notate che non c'è nessun marchio o messaggio lassù). In questo modo, ti incoraggiano a leggere effettivamente ciò che è below the fold. Ci sono degli svantaggi nel basarsi troppo sul "F-Pattern" come fondamento del design. Per uno, i disegni che si attaccano troppo strettamente al layout F possono sembrare noiosi e prevedibili ... per combattere questo, tu come designer dovrai portare un certo livello di innovazione al tavolo. Widget della barra laterale ben progettati, titoli accattivanti e immagini coinvolgenti sono tutti trucchi utili, ma probabilmente vorrai fare un ulteriore passo avanti.
Una volta che si scende sotto le prime due righe della "F", spesso diventa una sfida per un designer mantenere le cose interessanti. Ho scoperto che molti designer vendono i migliori 600px di un sito ai loro clienti ... questo è tutto a posto (è ciò che i visitatori vedono per primi), ma le lezioni del layout F sono che è anche importante mantenere le cose interessante come si inizia a scorrere verso il basso.
Proprio come una canzone che ha un ritmo costante potrebbe darti un mal di testa, una pagina può spesso diventare noiosa e ripetitiva se non ti preoccupi di inserire un elemento interessante di tanto in tanto. Rompere il ritmo di un disegno limitando gli elementi ripetitivi è una tecnica cruciale che vorrete progettare nei vostri siti per portare il vostro lavoro al livello successivo.
Assicurati di controllare anche il post "Z-Layout"!
Hai i tuoi pensieri o commenti? Condividili in basso!
Accentsconagua