Il flusso visivo trasporta l'occhio dello spettatore attraverso il documento in modo che tutti gli elementi importanti ricevano risalto, e nulla strappa la visione o fa sì che lo spettatore perda il senso del pezzo. L'utilizzo di elementi di flusso ovvi come frecce o numeri è il modo più comune in cui i progettisti Web utilizzano il flusso, ma ci sono altri tipi di elementi che possono essere utilizzati e utilizzati in modo scorretto per indirizzare i lettori a spostarsi lungo un percorso specifico. I passaggi di questo tutorial ti mostreranno esempi di flusso buono e cattivo e ti aiuteranno a imparare il vocabolario del flusso visivo nel design.
Cos'è Visual Flow?
Il flusso visivo può essere raggiunto in molti modi:
- frecce
- Immagini sequenziali o elementi di testo
- Prospettiva
- Sfumature
- Le dimensioni cambiano
- curve
- Movimento in immagini
- Volti - specialmente gli occhi
Le seguenti immagini ti mostreranno alcuni errori comuni nel flusso sulle pagine web e su come correggerli.
02 del 07Il testo occidentale scorre da sinistra a destra
Se sei cresciuto leggendo una lingua occidentale, sei abituato a pensare che il testo debba spostarsi da sinistra a destra. Quindi, mentre l'occhio si sposta su una riga di testo, si sposta da sinistra a destra.
Nell'immagine sopra, la cascata scorre in direzione da destra a sinistra e il testo scorre lungo la cascata. Poiché sappiamo tutti che le cascate cadono, c'è una disconnessione nella direzione del flusso di acqua con il flusso del testo. L'occhio dello spettatore si muove nella direzione sbagliata per leggere il testo.
03 di 07Il tuo testo dovrebbe fluire con le immagini
In questo caso, l'immagine è stata invertita in modo che il testo fluisca nella stessa direzione dell'acqua. Tutti gli elementi portano lo sguardo dello spettatore verso il basso con il flusso dell'acqua e il flusso del testo.
04 di 07Da sinistra a destra è uguale a veloce
Il cavallo in questa foto va da destra a sinistra, ma il testo è inglese e quindi da sinistra a destra. L'impatto visivo del cavallo che corre in una direzione rallenta il ritmo dell'intero documento perché sta andando in una direzione diversa rispetto al testo.
Nelle culture occidentali, poiché le nostre lingue si spostano da sinistra a destra, siamo arrivati ad associare una direzione visiva da sinistra a destra come avanti e veloce, mentre da destra a sinistra è più arretrata e lenta. Quando crei un layout con una connotazione di velocità, dovresti ricordarlo e mantenere le immagini in movimento nella stessa direzione del testo.
05 di 07Non forzare l'occhio dello spettatore a rallentare
Quando il cavallo e il testo vanno entrambi nella stessa direzione, la velocità implicita aumenta.
06 di 07Guarda gli occhi nelle foto Web
Molti siti web con foto fanno questo errore - mettono una foto di una persona sulla pagina e la persona sta guardando lontano dal contenuto Questo può anche essere visto sul sito Web Design di About.com nel vecchio design.
Come puoi vedere, la mia foto è posizionata accanto ad un testo. Ma sto guardando lontano da quel testo, mi sono quasi voltato le spalle. Se vedessi quel linguaggio del corpo tra due persone in un gruppo, sarebbe facile presumere che non mi piaccia la persona a cui sono accanto (in questo caso il blocco di testo).
Molti studi di eye tracking hanno dimostrato che le persone vedono volti sulle pagine Web. E studi correlati hanno dimostrato che guardando le immagini, la gente seguirà inconsciamente gli occhi per vedere che cosa sta guardando l'immagine. Se una foto sul tuo sito guarda fuori dal browser, è lì che guardano i tuoi clienti, quindi premi il pulsante Indietro.
07 di 07Gli occhi in ogni foto dovrebbero affrontare il contenuto
Nel nuovo design di About.com, la foto è leggermente migliore. Ora i miei occhi guardano più avanti, e c'è un leggero indizio che sto guardando alla mia sinistra - dove si trova il testo.
Una foto ancora migliore per quella posizione sarebbe quella in cui anche le mie spalle erano inclinate verso il testo. Ma questa è una soluzione molto migliore rispetto alla prima foto. E, per le situazioni in cui l'immagine sarà a destra del contenuto così come a sinistra, questo potrebbe essere un buon compromesso.
Ricorda anche che mentre le immagini dei volti delle persone attirano la maggior attenzione, lo stesso vale per le foto di animali. Ad esempio, in questo esempio di layout, ho i miei cani che sembrano a sinistra, ma l'immagine è a filo a destra. Quindi stanno guardando fuori dalla pagina. Questo layout sarebbe migliorato se avessi cambiato l'orientamento dei cani in modo che guardassero al centro dello schermo.
