Nova geração de Web Design

Artigo que apresenta opiniões sobre tendências na área de web design, que caracterizam uma nova geração no mundo web.

Introdução

A Web surgiu como hipertextos bastante simples. A primeira geração gráfica ficou marcada por uma extensa lista de sites com gifs animados, textos coloridos e layout com tabela. Mais tarde começaram a pipocar sites montados com frames, onde se separava título, menu e conteúdo em frames separados. Com o passar dos anos os web designers passaram a adotar os padrões da W3C e utilizar corretamente a semântica das tags (tableless). Mais recentemente, ocorreu uma explosão de sistemas Web de alta popularidade, que exploraram a chamada Web 2.0, com recursos mais interativos sustentados basicamente por JavaScript. Porém, do ano passado para cá, tenho notado uma nova geração de Web Design. Neste artigo, vamos discutir alguns elementos que tem surgido e o que cada um pode impactar na usabilidade.


Layout limpo

Uma das mudanças mais notáveis que posso destacar, é que, cada vez mais, os grandes sistemas e portais web estão buscando deixar o layout mais limpo. Acredito que a principal razão para isso seja porque finalmente começaram a perceber que uma página com duzentos blocos de textos misturados com mais uns cinquênta menus espalhados pela página inicial não levava os usuário a lugar nenhum.

A limpeza pode se dar na quantidade de elementos apresentados, mas também pode estar relacionado à organização dos elementos na tela, o estilo aplicado a cada um deles para que fiquem bem delimitados e à estrutura navegacional para se chegar a cada um deles.

Mas acho que o principal detalhe relacionado ao layout limpo seja, mesmo, o estilo aplicado aos elementos. Nada de colorir demais o site. É muito melhor padronizar. Se os links serão verdes, então coloque todos eles verdes, de preferência. Se colocar algum de outra cor, que seja por uma boa razão (por exemplo, os links do menu ficarão de outra cor pois o menu é bastante intuitivo que possua links).

O quesito layout limpo talvez seja o mais impactante tanto na usabilidade (facilidade de "usar" o site) quanto na acessibilidade (possibilidade de qualquer pessoa usar).

Elementos Estáticos em uma Região da Tela

Outro recurso que começou a ser mais utilizado é o posicionamento estático de alguns elementos na tela. Por exemplo, quando o menu do site fica sempre visível em uma determinada altura da página, independente da posição da barra de rolagem vertical.

Este efeito pode ser feito com CSS, através da propriedade "position" com valor "fixed". Isso significa que o elemento ficará fixo à janela do browser e não ao site. Embora este recurso seja interessante para menus suspensos, ele pode ser um problema quando não sabemos o tamanho da tela do usuário. Se temos um menu fixo com altura de 200px, ele será perfeitamente usual em qualquer tela com altura maior que 200px, mas haverá problemas para acessar todas as partes deste menu se a tela for pequena (de um dispositivo móvel, por exemplo). Embora isso possa ser contornado aplicando-se um CSS diferenciado para dispositivos móveis, ainda assim não garantiríamos a acessibilidade para usuários que usam o browser em uma tela grande, mas no modo janela (não ocupando tela cheia, ou "maximizado").

Para solucionar este inconveniente, tem surgido alguns sites com elementos semi-fixos. Eles possuem uma posição no site, mas, caso a barra de rolagem seja usada, eles passam a ter o comportamento fixo. Um exemplo é visto no Gmail, onde a barra de menu de operações sobre um e-mail aberto fica posicionada acima do e-mail, mas, caso a barra de rolagem vertical seja usada, o menu fica estático no topo da tela. Este comportamento, no entanto, precisa ser feito com programação (JavaScript).

Mostrar Detalhes sob Demanda

Um hipertexto, por característica, possui diferentes elementos misturados e agrupados (parágrafos, links, imagens, formulários, listas, etc.). Cada elemento, possui características próprias e pode ter um estilo diferenciado. Se mostrados de forma crua, o site fica com aspecto de um monte de peças montadas. Embora o usuário consiga distinguir onde começa uma e onde termina outra, a impressão é de que o visual fica "pesado".

Por exemplo, nem sempre é agradável observar um texto e notar trechos de cor diferente para indicar os link. Uma solução que torna o texto mais homogêneo é aplicar o mesmo estilo do texto do parágrafo ao texto do link (inclusive a cor), e, ao passar o mouse sobre o parágrafo (ou bloco superior, que contém vários parágrafos), os links podem mudar de cor e ficam "visíveis" ao usuário. Ou seja, o link só é mostrado quando o usuário, de fato, está navegando por aquela região do site. Talvez algumas pessoas possam me criticar em função do exemplo com links, que poderia prejudicar a acessibilidade, mas o exemplo pode ser expandido para caixas de ajuda que só ficam em destaque ao passar o mouse sobre uma região do site.

Outro exemplo que encontrei hoje foi de um site que tinha um elemento DIV com um texto muito grande (que precisava de barra de rolagem vertical), mas ele omitiu a barra de rolagem através da propriedade CSS "overflow" com valor "hidden". Ao passar o mouse sobre o DIV, ele passa a mostrar a barra de rolagem, pois o valor da propriedade muda para "auto" (e este valor mostra a barra de rolagem quando ela é necessária). Este comportamento deixou o site bastante agradável de se navegar.

E um caso que tem sido muito usado em sistemas que guardam uma foto do usuário (como o Facebook, Orkut, etc.) é mostrar o link "trocar imagem" ao parar o mouse sobre a própria foto atual. Embora o texto fique escondido por padrão, é intuitivo para o usuário que ele vá ali para trocar a foto.

Carregamento sob Demanda

O carregamento sob demanda está relacionado ao carregamento de informações do site sob demanda. Isso é sustentado basicamente por Ajax, mas não apenas. O carregamento pode ser de imagens. Este recurso está diretamente relacionado à performance do site e ao tráfego de informações entre cliente/servidor, que é otimizado para trafegar o mínimo possível (apenas o necessário).


Conclusão

Antigamente, para organizar muito conteúdo e operações em um site dinâmico, os web designers procuravam estruturar a navegação de forma que se chegasse às operações específicas através de um caminho de links. Atualmente, podemos notar uma tendência de oferecer operações "escondidas" dentro de uma única interface inicial. A partir das ações do usuário (como um passar de mouse ou clique), estas operações são mostradas sob demanda. Notamos uma limpeza cada vez maior do layout e um amadurecimento dos padrões da Web.

3 comentários

Everton Balduino disse...

Apenas complementando seu excelente post:

Em termos de cores, nota-se atualmente uma grande tendência na utilização de tons pastéis, mais próximos das cores neutras e a não utilização das cores neutras "puras". Também, percebe-se grande uso nas libraries JavaScript (ex.: jQuery), em resposta ao Flash que não possui a mesma eficiência quando o assunto é SEO.

Por fim, percebe-se recentemente um aumento no uso dos webkits que oferecem as implementações do CSS 3 que ainda não vieram (mas que estão por vir).

Posso estar errado, mas esses pontos podem ser bem observados aqui nesse Blog, que possui um visual bem atual.

rubS (autor do blog) disse...

Everton Balduino, você lembrou muito bem alguns pontos que não citei.

De fato, quando me lembro de sites dos anos 90, me lembro de fundos pretos com letras amarelas que até pareciam radiativas. Hoje é bem diferente (ainda bem).

SEO também é uma tendência que não citei explicitamente, mas que vem junto com a utilização correta da semântica dos elementos web. Afinal, o SEO é, em partes, consequência de um site que segue os padrões Web. Pra mim, colocar conteúdo (conteúdo de fato) em Flash é errado pela própria essência da web.

Eu ainda tenho alguma dificuldade de identificar o uso do CSS 3 nos sites. Afinal, várias coisas podem ser simuladas com imagens ou JavaScript. Mas, realmente, é mais uma nova tendência. Eu utilizo principalmente onde sei que o conteúdo será corretamente apresentado mesmo em navegadores sem suporte ao CSS 3 (ou ao que já existe de CSS 3). Mas creio que com os avanços que estão por vir, os usuários da Internet sejam mais "forçados" a atualizarem seus navegadores para uma versão atual e decente.

No mais, agradeço ao elogio e à visita ao blog. Fique a vontade para comentar e discutir os assuntos.

Anthony Collucci disse...

Quanto ao layout Limpo, isso e um fato, recentemente entrei em uma empresa onde o site institucional possui um menu com uma 20 abas que se abrem em cascata. Nos hotsites que desenvolvi pra eles eliminei essa característica.

Outra coisa e que o proprio amadurecimento dos internautas vem ajudando a tornar a navegação mais visual e menos literária. Antigamente a maioria dos forms vinham com um texto, "Os campos com * são obrigatórios", hoje em dia quando o usuário vê o símbolo já sabe que é obrigatório.

Muito bom o seu blog!