O fluxo visual carrega o olho do espectador pelo documento de forma que todos os elementos importantes recebam destaque, e nada obstrui a visão ou faz com que o espectador perca o sentido da peça. Usar elementos de fluxo óbvios, como setas ou números, é a maneira mais comum pela qual os Web designers usam o fluxo, mas há outros tipos de elementos que podem ser usados e usados de forma incorreta para direcionar os leitores para um caminho específico. As etapas deste tutorial mostram exemplos de fluxo bom e ruim e ajudam você a aprender o vocabulário do fluxo visual no design.
O que é fluxo visual?
O fluxo visual pode ser alcançado de várias maneiras:
- Setas; flechas
- Imagens sequenciais ou elementos de texto
- Perspectiva
- Gradientes
- Alterações de tamanho
- Curvas
- Movimento em imagens
- Faces - especialmente os olhos
As imagens a seguir mostrarão alguns erros comuns no fluxo das páginas da Web e como corrigi-las.
02 de 07Texto ocidental flui da esquerda para a direita
Se você cresceu lendo uma língua ocidental, está acostumado a pensar que o texto deve se mover da esquerda para a direita. Então, quando o olho se move através de uma linha de texto, ele está se movendo da esquerda para a direita.
Na foto acima, a cachoeira está fluindo na direção da direita para a esquerda, e o texto está fluindo pela cachoeira. Como todos sabemos que as cachoeiras caem, há uma desconexão na direção do fluxo de água com o fluxo do texto. O olho do espectador se move na direção errada para ler o texto.
03 de 07Seu texto deve fluir com as imagens
Nesse caso, a imagem foi invertida para que o texto esteja fluindo na mesma direção da água. Todos os elementos levam os olhos do observador para baixo com o fluxo da água e o fluxo de texto.
04 de 07Da esquerda para a direita é igual a rápido
O cavalo nesta foto está correndo da direita para a esquerda, mas o texto é em inglês e assim da esquerda para a direita. O impacto visual da corrida de cavalos em uma direção desacelera o ritmo de todo o documento porque está indo em uma direção diferente do texto.
Nas culturas ocidentais, porque nossas línguas se movem da esquerda para a direita, associamos uma direção visual da esquerda para a direita como sendo direta e rápida, enquanto a direita para a esquerda é mais lenta e atrasada. Quando você está criando um layout com uma conotação de velocidade, você deve se lembrar disso - e manter suas imagens se movendo na mesma direção do texto.
05 de 07Não force o olho do espectador a desacelerar
Quando o cavalo e o texto estão indo na mesma direção, a velocidade implícita é aumentada.
06 de 07Assista os olhos nas fotos da web
Muitos sites com fotos cometem esse erro - eles colocam uma foto de uma pessoa na página e a pessoa está procurando longe do conteúdo. Isso pode até ser visto no site de design da Web da About.com no design antigo.
Como você pode ver, minha foto é colocada ao lado de algum texto. Mas estou desviando o olhar daquele texto, quase estou de costas para ele. Se você visse essa linguagem corporal entre duas pessoas em um grupo, seria fácil assumir que eu não gosto da pessoa que estou próximo (neste caso, o bloco de texto).
Muitos estudos de rastreamento ocular mostraram que as pessoas veem rostos em páginas da Web. E estudos relacionados mostraram que, ao olhar para fotos, as pessoas, então, inconscientemente, seguem os olhos para ver o que a imagem está olhando. Se uma foto em seu site estiver aparecendo na borda do navegador, é onde seus clientes procurarão e, em seguida, aperte o botão Voltar.
07 de 07Os olhos em qualquer foto devem enfrentar o conteúdo
No novo design para About.com, a foto é um pouco melhor. Agora meus olhos estão olhando mais para frente, e há um pequeno indício de que estou olhando para a esquerda - onde está o texto.
Uma foto ainda melhor para essa posição seria aquela em que meus ombros também estavam inclinados em direção ao texto. Mas esta é uma solução muito melhor que a primeira foto. E, para situações em que a imagem estará à direita do conteúdo, bem como à esquerda, isso pode ser um bom compromisso.
Lembre-se, também, que enquanto as imagens dos rostos das pessoas atraem mais atenção, o mesmo acontece com as fotos de animais. Por exemplo, neste layout de amostra, tenho meus cachorros olhando para a esquerda, mas a imagem está à direita. Então eles estão olhando para fora da página. Esse layout seria melhorado se eu mudasse a orientação dos cães para que eles estivessem olhando para o centro da tela.
