Share
Come Web designer, seguiamo molti paradigmi di progettazione e principi di layout: griglie, coerenza verticale, F-Layout, Z-Layout, regola dei terzi, Golden-Ratio e così via. Prestare attenzione a questi principi produrrà un design visivamente accattivante e funzionale - vediamo ora la semplice divisione di una pagina in due parti uguali.
Anche se all'inizio potrebbe sembrare un po 'sciocco e ovvio, questo layout fondamentale può essere molto efficace. I nostri occhi tendono a seguire un movimento a zig-zag mentre sfogliano una pagina. Se l'occhio segue una linea dritta orizzontalmente - come nel layout Z, si sta concentrando (o sta provando a). Poiché il 90% del traffico Web proveniente dal tuo sito non presta particolare attenzione alla tua pagina, il tuo design "scremato" sicuramente pagherà.
Dagli studi di tracciamento degli occhi di Yahoo!
Gli utenti Web sono sempre di fretta. Hanno altre cose da fare e restare indietro per apprezzare la bellezza e l'estetica del tuo sito web è l'ultima cosa che puoi aspettarti che facciano. Anche se il buon design è di grande importanza, non ispira completamente il visitatore ad agire, a fare clic sul pulsante "Acquista ora" o "Conosci di più".
Non possiamo biasimarli. Ti ricordi mai quando hai voluto cercare qualcosa? Ti affretti a raggiungere il primo risultato di ricerca su Google e poi velocemente "potenzia", o piuttosto scorri attraverso la pagina generale. Il più delle volte, si scorre addirittura fino in fondo senza prestare molta attenzione. Dopo questa fase, se decidi che la pagina vale il tuo tempo, tornerai in cima e poi prendi l'effettivo sforzo di leggere e prestare attenzione.
Qual è lo scopo della scrematura iniziale? Per afferrare le informazioni massime che puoi ottenere sulla pagina a prima vista. Se in qualche modo "codifichiamo" questo schema di schieramento, dovremmo essere in grado di attirare l'attenzione di più visitatori. Dalle osservazioni a mappe di calore di vari siti, ho tratto una tendenza comune.
Noterai che puoi guardare le macchie rosse senza sforzo. Stranamente, dalla nostra esperienza, possiamo dire che i nostri occhi dovrebbero seguire facilmente le linee rette piuttosto che quelle ad angolo - dal momento che leggiamo in linea retta. Nota che sto parlando della fase di schiumatura iniziale, non della parte in cui presti attenzione ad ogni dettaglio del sito.
Ogni volta che non presti molta attenzione, questa è la naturale tendenza dei tuoi occhi: lo zigzag. A meno che non ci siano elementi che hanno un contrasto e un peso maggiori che ti urlano, probabilmente seguirai il modello sopra. Noterai anche che questo modello è simile al layout F e che gli endpoint rossi sono dove gli utenti fanno una pausa momentanea.
Questi punti di pausa momentanei sono dove un'istantanea viene presa dal tuo cervello. In un layout a zigzag con elementi contenenti importanti informazioni negli "Punti di pausa", il Cervello assorbe naturalmente più dettagli, poiché associa ogni punto finale a zig-zag come entità separate.
Il design non è solo ciò che sembra e sembra. Il design è come funziona. -Steve Jobs
È possibile (ad esempio) utilizzare questa funzione del layout Half Split per posizionare in modo efficace le anteprime del Portfolio di lavoro o le caratteristiche importanti del prodotto o del servizio, in modo che i visitatori se ne accorgano rapidamente. Questo alla fine li incoraggia a rimanere per più tempo sul tuo sito, e quindi li convince a intraprendere azioni. Il risultato? Migliori tassi di conversione per te e una migliore esperienza utente per loro.
Rendere la tua progettazione e il layout "compatibile con zig-zag" è molto semplice. In effetti, è facile come dividere la tua pagina in due metà uguali! Le metà uguali funzionano bene perché gli endpoint Zig-Zag sono allineati più o meno verso il centro di queste metà. Utilizzati in sovrapposizione, vanno bene insieme. Posiziona gli elementi di importanza nelle posizioni del punto finale rosso dello Zig-Zag della tua pagina. Questo è il concetto base dietro Half Split, o 1/2 Layout.
Di recente, stavo lavorando a una pagina di destinazione "Coming Soon". Ho sperimentato vari layout, ma niente ha funzionato bene. Ho provato di tutto: griglie, sezione aurea, layout F. Il momento Eureka è arrivato quando ho diviso la pagina in due parti uguali. La soluzione è stata così semplice! Sembrava elegante e pulito e mi ha ricordato il fatto importante che il semplice non è necessariamente cattivo. Hai visto il nuovo logo di Microsoft?
La semplicità è la sofisticatezza finale. -Leonardo Da Vinci
Puoi vedere come le metà danno una bella gerarchia visiva. Innanzitutto, viene notato il nastro rosso "Coming Soon" in alto. Successivamente, viene visualizzato il logo. Ora, seguendo lo Zig-Zag che ho menzionato prima, il visitatore finisce guardando il cursore Image nella metà destra e infine, il modulo di invio E-mail.
Ora vediamo come funziona il layout diviso per una pagina Portfolio di un Web Designer. Lo scopo di una pagina della Galleria in un Portfolio è mostrare rapidamente ai potenziali clienti un insieme di lavoro. Ci sono un sacco di opzioni per loro, in quanto questo settore è praticamente saturo in questo momento. Perché dovrebbero pagarti? Fare una grande prima impressione potrebbe far pendere la bilancia nella tua direzione. Vediamo cosa possiamo fare al riguardo.
Il layout sopra è diviso in due parti, ma non segue il principio del "zig-zag" che ho menzionato prima.
Mentre sembra un buon layout e facile per gli occhi, diventa piuttosto noioso dopo i primi due elementi. Aiuterà a spezzare il flusso per aumentare l'interesse visivo. Non solo quello; ma quando cerchi di sfogliare il layout sopra, i tuoi occhi dovrebbero vedere la prima immagine e poi saltare al testo del secondo oggetto. Dal momento che i tuoi visitatori non hanno intenzione di leggere in questa fase, passano a un altro punto o lasciano il tuo sito interamente!
Cosa succede se hai fatto un semplice cambiamento come questo?
Molto più interessante, vero? Semplicemente scambiando le posizioni del testo e l'immagine di ogni oggetto, aumenta l'interesse visivo in modo che la coerenza non renda il tuo visitatore annoiato. Puoi anche effettuare una chiamata al pulsante di azione seguendo il modello Zig-Zag.
Il pulsante "Contattami" ora avrà una maggiore possibilità di essere notato e cliccato da più dei tuoi visitatori (perché non eseguire un test A / B per ricontrollarlo?)
Il design è un piano per organizzare gli elementi in modo tale da raggiungere uno scopo particolare. -Charles Eames
Il layout diviso è entrato nelle luci della ribalta con il nuovo design Timeline di Facebook. Nota come i tuoi occhi "fluiscono" facilmente da un post all'altro.
Anche Apple segue il layout diviso. Ecco la pagina mini dell'iPad, vedi quanto è facile associare ciascuna immagine come funzionalità separate dell'iPad mini? Sembra giusto.
Microsoft ha avuto il merito di aver spianato molti nuovi modi con il loro recente rebranding, in seguito a un layout diviso nella sua pagina di informazioni sulla superficie.
Stacey è un ritratto minimalista del layout 1/2.
Adoro la homepage di Quora. È possibile dimostrare il layout diviso in modo più semplice?
Consumerbarometer.com lo porta al livello successivo con animazioni e una variazione triangolare dello Zig-Zag.
Quindi, cosa abbiamo imparato?
Questo articolo è solo un delicato promemoria sul fatto che l'utilizzo di layout di base e metodi di progettazione fondamentali non dovrebbe mai essere dimenticato. In effetti, può aumentare i tassi di conversione, se usato correttamente.
Accentsconagua