Princípios de design para a internet (sem dogmas)

Uma “salada de conceitos” com ingredientes produzidos nos últimos dez anos pelos nossos raros e jovens gurus. Vamos ficar com os princípios e deixar os dogmas no passado.

Trabalhamos numa indústria órfã de referências.

No ramo do desenvolvimento de produtos interativos ocorre uma notada raridade de papas, patriarcas, gurus e sumidades, o que nos dá ao mesmo tempo um sentimento de vazio e uma oportunidade incrível.

Na nossa identidade, o campo de paternidade está vazio, mas o de naturalidade não deixa dúvida. A Califórnia, capital da internet no mundo, já vivenciou um cenário parecido há um século e meio atrás, quando os “fourty-niners” buscavam terras repletas de ouro. Hoje, nós corremos atrás de verdades que pautem a maneira de projetar para a internet.

As dúvidas superam as certezas: Qual o processo de desenvolvimento perfeito? Que empresas (fora o Google) sobreviverão? Qual o melhor modelo de negócio? Que formato comercial vai prevalecer?

Aqui, o objetivo é abordar princípios que possam orientar a atuação do designer durante o projeto. Por mais órfã que seja, nossa indústria chegou à sua adolescência e já é possível citar fatos ocorridos há dez anos atrás. O mais antigo ponto de referência da minha memória é Jakob Nielsen. No fim da década de 90, seu site “Use It” e sua newsletter “Alertbox” me converteram a uma estranha seita chamada usabilidade.

A idéia central era fazer que o usuário completasse tarefas mais facilmente, otimizando sua curva de aprendizado em cada objeto projetado. Eu tinha dez anos a menos do que tenho hoje e defendia os dogmas de Nielsen com unhas e dentes, contra as demoníacas forças dos designers gráficos que queriam fazer da internet um imenso cartaz publicitário. Cheguei ao ápice quando comprei uma camiseteta que retratava o guru como uma espécie de Che Guevara dos geeks (que vergonha!).

O evangelho segundo Nielsen era rígido e dividia os designers em dois grupos bem definidos. Os seguidores do Jacozão e os designers-gráficos-frustrados. No segundo grupo há que se destacar os amantes da tipografia estilo “TDR” (The Designers Republic), os adeptos do “Flash artístico“ estilo Kioken Design, os pixelmaníacos, os neo-barrocos da ilustração vetorizada e todos aqueles cujos trabalhos nunca conhecemos por falta de paciência de esperar que eles carregassem em nosso browser.

Em 2001, os caras da publicação de design interativo A List Apart (também conhecida como ALA) apostaram todas as suas fichas no CSS. Jeffrey Zeldman & Cia já criticavam Nielsen duramente há anos, alegando que seus dogmas ignoram aspectos importantes da experiência do usuário como apelo visual, e o conjunto de fatores que mais tarde chamaríamos de agradabilidade.

No auge do movimento anti-Nielsen, Joshua Davis (designer-rockstar inicialmente da Kioken) resumiu a questão: “Alguns estúdios assumem que o usuário médio é um idiota. E fazem design de modo que todos continuem sendo idiotas.”.

Corte para o tempo presente. Estamos em 2008 e os xiitas perderam espaço. O “new black” do design pra internet é o minimalismo de carga gráfica em benefício do lado ergonômico-funcional e da clareza de leitura. É claro que existem áreas reservadas para aplicação do branding em toda sua plenitude, mas as telas dos sites de sucesso nunca estiveram tão limpas. Não se engane quem acha que esta é uma tendência inédita: estamos falando de conceitos da Bauhaus aplicados às novas mídias, onde três fatores são inegociáveis: a elegância pela economia de formas, o enfoque funcional e a redução de custos de produção.

Outro conjunto de princípios clássicos que deve pautar a atuação do web designer é a Gestalt. Você pode escolher uma entre as dezenas de definições possíveis para o termo: “aquilo que é exposto ao olhar“, “o que é colocado diante dos olhos” ou “a percepção do todo em detrimento das partes”, mas há de concordar que cada conceito que forma a Gestalt se encaixa perfeitamente na atividade de projetar sites.

Não por acaso, Walter Gropius (fundador, professor e líder da Bauhaus) defendia que a escola formasse um “gestalter”, termo que ouso traduzir como “designer de percepção” ou (mais adequado às novas mídias) “designer de experiência”.

Além das escolas tradicionais, é impossível ignorar a influência do trabalho de alguns gurus da era do design de interação. Jason Fried e os caras da 37 Signals fincaram a bandeira do “design less” com sua filosofia “Getting Real”, onde pregam simplicidade e clareza em times pequenos e com muito feedback dos usuários.

Bruce Tognazzinni, ou simplesmente “Tog”, como prefere ser chamado, é uma espécie de Nielsen versão light, tendo atuado por 15 anos na Apple, como evangelista de design de interfaces. Quando se fala em princípios de design da Apple não é preciso dizer muito. Os produtos da empresa provam que interfaces funcionais, simples e limpas podem ser ao mesmo tempo emocionais, lindas e excitantes.

Essa “salada de conceitos” representa bem nosso cenário. Dois quilos de Bauhaus, uma colher de ergonomia, um punhado de Jakob Nielsen, outro punhado dos anti-Nielsen. Duas lascas de 37 signals e três fatias de Apple. Não se esqueça de misturar três xícaras de Gestalt e de temperar a gosto com seu próprio bom senso. Se a receita ficou muito complicada é melhor virar psicanalista e devorar Freud. Quando se fala de internet é necessário balancear as refeições.

Para ser mais objetivo na minha visão sobre design para a internet, listei princípios que considero a base de qualquer bom projeto. Alguns são conceitos clássicos de design, outros são frutos da minha experiência aplicada em design interativo.

Princípio: (do latin principium, início, fundação) Pressuposto fundamental de determinado assunto, que permite a construção de uma norma ou lei através de interpretação humana.

Dogma (do grego ?????, opinião, o que se pensa ser verdade): Crença ou doutrina imposta, que não admite contestação.

Procurei não determinar dogmas, mas sim indicar princípios, para que cada um escolha os caminhos mais adequados a cada projeto. Numa oportunidade futura espero poder descrever e exemplificar cada um destes pontos:

1. Hierarquize antes

Antes de começar a fazer o layout tenha certeza do que é mais importante e procure orientar o caminho que você espera que os olhos do usuário tracem.

2. Seja coerente

Elementos iguais devem ter a mesma função. O usuário aprende padrões de uso a cada clique. Tenha certeza que ele não os desaprenda.

3. Desenhe menos

Se estiver em dúvida se precisa ou não de determinado elemento, prefira deixá-lo de fora. Pode ser duro, mas um bom designer é aquele que escolhe o que não fazer, esperando que o feedback do usuário esclareça as dúvidas.

4. Aplique Gestalt

Use os conceitos de agrupamento, distância e alinhamento para dar clareza ao que está sendo apresentado. Alinhe o que deve representar um fluxo de leitura. Desalinhe o que merece uma interrupção. Agrupe conjuntos e subconjuntos de informação. Estabeleça o ritmo adequado explorando as distâncias entre os objetos da tela.

5. Projete em camadas

Faça primeiro o que é genérico. O que será utilizado em vários momentos da experiência do usuário. Só parta paro o que é específico e para os detalhes depois de ter uma estrutura satisfatória.

6. Onde estou?

Não deixe o usuário sem resposta para essa pergunta. Ofereça sempre uma sinalização clara e um porto seguro para a navegação.

7. Faça sistemas modulares

Atente para a flexibilidade do layout, pois é bom que ele contemple múltiplas situações. Lembre-se que cada objeto projetado pode ser reutilizado em outras páginas, sem acréscimo de custo ou tempo.

8. Preocupe-se com a unidade do layout

O conjunto de objetos visíveis deve ser harmônico e criar a percepção correta no usuário. Tire o foco do seu olhar deixando os olhos quase cerrados, sem atentar para os detalhes. O layout deve dizer ao que veio mesmo assim.

9. Crie a impressão de ser “ao vivo” e pessoal

Lembre-se que o usuário está sozinho, segurando um mouse e olhando para o que você projetou. Se ele sentir frieza não vai se sentir à vontade. Se sentir que a página está atualizada e viva vai voltar lá mais vezes.

10. Resolva a regra

Deixe a exceção para depois. É muito comum se perder em meio a milhares de situações possíveis. Esse é o momento de estabelecer qual o uso mais comum e tratá-lo como prioridade.

11. Atente para os contrastes

Eles servem para melhorar a leitura, diferenciar elementos e criar peso em elementos que precisam ter peso.

12. Deixe espaço para o usuário

Projetamos objetos interativos e não só de leitura. Deixar o resultado das interações vir à tona cria mais interesse e ajuda a deixar o produto final menos frio.

13. Deixe a tela respirar

Não caia na armadilha de cobrir todos os buracos disponíveis com conteúdo. Em alguns momentos, um espaço vazio é importante.

14. Dê feedback

Cada ação do usuário deve gerar uma reação clara e imediata do sistema interativo.
15. Adequado é melhor do que bom

Não fique refém de um layout só porque você decidiu que ele é bom. É comum ver boas soluções totalmente inadequadas ao problema em questão.

16. Foque no produto final

PSDs, HTMLs estáticos, especificações funcionais e documentações semelhantes são ferramentas para atingir o objetivo final. Cuidado para não se deixar seduzir pela sua entrega individual em detrimento do benefício para o usuário final.

17. Ponha no ar

Em vez de perder muito tempo discutindo qual é a melhor solução, lance uma versão beta e observe a utilização dela. Se não puder fazer isso, fazer testes de usabilidade é a solução, mas monitorar os padrões de comportamento pós-lançamento é indispensável.

18. Pense na experiência total

Se você já foi um designer gráfico, largue o vício de tratar um site como uma coleção de peças gráficas independentes. O foco deve ser na experiência do usuário como um todo e no fluxo de navegação entre as telas.

autor: Marcelo Gluz
fonte: [Webinsider]