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. [Webinsider]
.
14 respostas
Esta matéria me lembrou um hit sábio do momento: Cada um no seu quadrado….
Acho que enquanto designer, tem dois princípios que norteiam o conceito – design é forma e função. Tentar este equilíbrio é difícil. Porém, ao termos um problema para resolver, já temos um norte para seguir e tentar adequar a melhor solução para determinada situação. Isto varia de cliente para cliente.
Estamos vendo que todos os dogmas estão caindo por terra. Nunca acreditei em radicalismos. Por exemplo, criticamos o socialismo, mas o capitalismo exercido em sua plenitude – o neoliberalismo – gerou a crise que estamos acompanhando, num mercado sem regras e que agora precisa da intervenção do Estado. Acho que tanto o excesso de regras como a falta de regras atrapalham. O melhor sempre será o bom senso.
Claro que pode usar, Henrique. Espero que seja útil pros seus alunos. Obrigado a todos pelos comentários.
Abs, Gluz
Belíssimo esforço de racionalizar e pescar o essencial.
Peço autorização para usar em minhas aulas, e de reinterpretar suas 18 luzes (prefiro chamar assim os seus pontos) para o design gráfico em geral. Com os devidos créditos, como disse o JF acima.
Gostaria de parabenizá-lo pelo artigo, está ótimo!
É sempre bom relembrar conceitos, muitos deles vistos no início dos cursos de Design, (Como Gestalt e Bauhaus) e que no decorrer de nossas atividades e da quantidade de informações absorvidas diariamente, acabamos deixando de lado. Serve como uma reflexão e só acrescenta no nosso trabalho.
Obrigada!!!
Parabéns pelo artigo, Marcelo. Finalmente vejo alguém da web falando de Gestalt e Bauhaus de modo pertinente. A seu texto consegue reunir os princípios sem se extender, e aponta direções para os interessados fazerem uma bela pesquisa.
Nex, discordo de você. Empirismo é o fundamento de toda a teoria, mas no mercado não há tempo para quem insiste em reinventar a roda. A criatividade é fruto do conhecimento, do estabelecimento de relações entre diversos assuntos (incluindo teorias).
A criatividade do brasileiro se deve muito à multiplicidade de culturas, religiões e conceitos que controem a nossa identidade, ou seja, a informação cultural planetária está em nosso DNA, mas não é o suficiente nem substitui o conhecimento específico. Além disso, é fundamental conhecer bem as ditas regras do design para saber quando é pertinente e como quebrá-las em benefício de uma idéia.
Excelente artigo. Muito obrigada 🙂
Obrigado pelo retorno, amigos. Fico feliz por tê-los feito refletir.
Nex, você tem razão. Criatividade é a matéria prima do que fazemos. Mas a criatividade trabalha melhor em cima de uma base conceitual firme, coisa bastante rara na nossa indústria. Num nível de profissionalismo mais avançado o instinto do designer acaba sendo insuficiente. Nesse caso, um pouquinho de teoria não faz mal a ninguém.
PS.: Seu comentário foi nota 3,5, mas tudo bem. Ainda dá tempo de melhorar 🙂
Mto bom o artigo, vc está embasado e entende do assunto. Ótima a sua relação dos princípios para o webdesign, posso até ver as carinhas dos meus alunos super inspirados, refletindo sobre o olhar da usabilidade, do usuário, da ergonomia, da funcionalidade e principalmente em atingir metas, não prêmios. Enfim, é preciso ler mto, epxerimentar mto mais e estar aberto a descobrir sempre novas experiêcias q venham a destacar nosso trabalho.
Há quase 10 anos na área, não havia visto meta-artigo, que esclarecesse tão bem questões básicas da área, utilizando técnicas do próprio código para esclarecer-se.
Perfeito e será usado como material de aula, com os devidos créditos.
Abraços e keep Rocking & Rolling.
Jorge JF Feldmann
Olá,esse texto trata de um assunto bastante debatido nos fóruns de discussão, mas parece que os iniciantes não se preocupam em absorverem tais informações, então sempre é válido abordar esses aspectos enquanto houver um grupo que prefere as ferramentas ao raciocínio.
http://www.danielemartins.com
Acredito que o melhor antes de começar qualquer coisa, é a observação em todos os aspectos.
Exemplos, conceitos, dogmas, seja o que for, tudo tem que ser observado com os olhos clínicos da curiosidade pelo conhecimeto. Mas nem por isso deve-se usar tudo isso, é preciso um filtro humano, daí o seu olhar clínico.
Depois disso CRIE sem medo, ciente do que observou, mas sem prender-se a nada, irá sair um belo trabalho, se não sair, com certeza alguém o dirá. O feedback é tudo para a conclusão que nunca conclui-se, essa é a minha opnião.
Exemplo vivo disso, é esse belo artigo.
Parabéns Marcelo.
Discordo bastante de vc, Nex. Acho que as grandes idéias criativas são feitas em cima conceitos sólidos. E achei o artigo bastante esclarecedor nesse sentido. Só discordo da parte que coloca o Tog como um Jakob Nielsen light. Ele significa mais pra isso, tanto nos anos de Apple quanto hoje em dia.
Abraços a todos,
Silvio
E ae galera!
Bom, vou ser menos dogmatico ( risos ) em meu comentário: Você já pensou que estilo não é igual a processo criativo? O que você citou em seu texto, são estilos, e não ajuda em nada, quem realmente quer uma dica construtiva. Acredite: Precisamos de gente criativa no Brasile lá fora e não um dicionário ambulante, que coloca a tona, um monte de técnicas – pragmáticas /dogmáticas. Acredite: O designer brasiliero destaque lá fora, devido a sua criatividade, e sua maleabilidade, e não pelo caminhão de conceitos. Antes de ficar praticando receitas, porque não tente ajudar o povo com um pouco mais de aplicabilidade criativa? É mais sensato, e muito menos massante! Mas no geral, o seu artigo tá 5,5!
Valew!
t+
Nex
Olá. Gostei muito da receita dada e o grande segredo está no velho ditado Nem tanto ao céu nem tanto ao mar. Radicalismos sempre nos impedem de ver o outro lado e de aproveitar as coisas boas que sempre existem em visões diferentes, mesmo que diametralmente opostas. Tem existir usabilidade carregando agradabilidade. Se assim não fosse todas as revistas nas bancas não precisariam passar de páginas brancas datilografadas com tinta preta. Todos os carros seriam iguais, sem os atributos que os tornam lindos. Já pensou uma Ferrari igual à um Porche? Que graça teria isso.
O apego do ser humano pelo belo deve ser respeitado, claro que não a ponto de sacrificar o seu tempo com produtos interativos lentos. Por esse ponto de vista você deu o melhor exemplo: Apple – simplicidade, elegância, beleza e funcionalidade.
Grande abraço. Gosto de artigos que nos fazem pensar.