Entrevista concedida a revista webdesign para a reportagem de mesmo tema, que será publicada na edição de Ago/09.

Reportagem Navegadores, Ago/09 [PDF]

Com frequencia são atribuídas novas funcionalidades e características aos navegadores, algumas valem a pena se aprofundar mais, pois serão padrões em breve. É o caso do HTML5, suportado por alguns browsers recentes e está começando a ganhar espaço.

Por outro lado, para garantir a adequação dos projetos no dia a dia, penso que basta se ater aos padrões web e desenvolver um código consistente, o mais semântico possível, com foco nos navegadores que seguem essa linha.

2 – Como vimos acima, existe uma oferta variada de navegadores à disposição dos usuários, sendo que o IE e o Firefox parecem atrair a maior atenção do público. De que maneira os browsers podem influenciar no desenvolvimento do design de interfaces?

Diferentes browsers influenciam o desenvolvimento pois divergem na renderização de fontes, espaços e margens.
É preciso saber onde essas diferenças vão interferir no seu layout e já prever formas de contorná-las.

Conhecer o funcionamento dos browsers para estruturar um código bem feito também pode resultar em melhorias de performance do website.

3 – Nesta discussão, a aplicação do conceito de cross-browser se torna fundamental para garantir que um projeto seja suportado pelos diversos navegadores. Diante disso, o que você consideraria imprescindível na aplicação correta deste conceito na construção de um projeto digital?

Nem todo projeto deve ser totalmente cross-browser. Sempre que posso, idealizo projetos visando os principais navegadores que seguem os padrões web. Em navegadores antigos o site deve apenas funcionar bem, ou se possível, nem isso.

Ao ajustar o código para navegadores arcaicos (como o IE6), estamos investindo em postergar sua obsolência.
Como desenvolvedores, podemos induzir a atualização destes navegadores priorizando o código para os navegadores atuais (nivelar por cima).

4 – Ainda sobre esse assunto, quais são os erros mais comuns que dificultam a adequação de projetos web ao conceito de cross-browser?

A aplicação dos padrões web permite que os sites funcionem e sejam vistos corretamente em quase todos os navegadores. O IE, o browser com maior predominância no mercado, apresentou até agora grandes deficiências na implementação destes padrões, ampliando a divergência de renderização.

Algumas características às vezes precisam de ‘hacks’ ou programação extra para funcionarem corretamente, o que interfere diretamente no tempo e custo de desenvolvimento.

As divergências seriam minimizadas se a atualização dos navegadores fosse contínua, induzida pelo próprio software, como ocorre no firefox, por exemplo. As últimas versões dos navegadores mais populares já seguem os padrões web (inclusive o IE8).

5 – Quais ferramentas você utiliza para testar a eficácia de seus projetos nos diferentes navegadores disponíveis pelo mercado?

• litmusapp.com
• netrenderer
• browsershots.org

6 – Além das funções de navegação, os plugins agregados ao Firefox o tornaram em uma ferramenta muito utilizada por profissionais de internet. Você também utiliza o Firefox como ferramenta de trabalho? Caso sim, quais plugins você recomendaria para quem deseja trabalhar com o Firefox?

Acho indispensáveis o uso dos plugins Firebug + Colorzilla.
Com estes, na maioria dos ajustes de código não é necessário abrir mais nenhum outro programa além do navegador (e o editor com FTP, claro).

7 – Quais dicas de leitura você daria para o profissional que deseja se aprofundar neste assunto (cross-browser, navegadores, renderização etc.)?

• Comparativo de tecnologias
• Opera Web Standards Curriculum
• blog tableless (Não é o principal tema)
• Os blogs dos respectivos navegadores também são úteis para acompanhar mudanças e novidades.

Entrevista concedida a revista webdesign para a reportagem de mesmo tema, publicada na edição de Mar/09.

Siga o link abaixo para versão em pdf da matéria completa:
Reportagem Legibilidade, Mar/09

1 – Quais são os principais fatores que exercem influência na leitura visual de conteúdos digitais?

Conteúdos digitais normalmente são consumidos em concorrência com outros atrativos por estarem na web/pc/mobile, onde temos uma vasta gama de possibilidades para dispersão.

Ao navegar, estamos sempre “com pressa”, com frequência praticamos a leitura genérica e apenas se o conteúdo nos prender, damos atenção específica. Esse comportamento já é bastante conhecido e por isso devemos preparar conteúdos digitais para nos comunicar na forma mais breve, simples e incisiva possível.
Dessa forma, a tendência de se utilizar “menos” também se aplica ao conteúdo.

É pertinente lembrar que a leitura de textos na tela não é uma prática confortável, assim, podemos facilitar essa tarefa, se evitarmos uma disposição em que os textos atravessam a tela de ponta a ponta.

O uso de colunas, bem como quebrar o conteúdo em partes menores e utilizar tópicos em listas sempre que possível, são alguns recursos úteis para buscar maior clareza na apresentação dos textos e torná-los mais atraentes.

Além da legibilidade, temos que prover uma boa ‘leiturabilidade’, ou seja, garantir um bom nível de fluência durante a leitura dos elementos visuais da interface, buscando uma composição consciente e equilibrada.

2 – Um dos caminhos para garantir uma boa legibilidade em uma interface é a aplicação de espaçamentos e margens, além do adequado alinhamento dos objetos. De que maneira estes “conceitos” devem ser aplicados na concepção de uma interface?

Utilizar corretamente as áreas “em branco” é fundamental. Quando exploramos bem as áreas sem conteúdo, conseguimos destacar com maior facilidade as áreas de Informação. Áreas de respiro protegem os elementos de informação e acomodam o olhar durante a leitura.

O uso de grids também é um recurso inteligente para uma boa disposição dos elementos na interface.

3 – Outra questão fundamental envolve a escolha do tamanho da fonte e da família tipográfica a ser utilizada no projeto. Em termos de legibilidade, o que deve ser levado em consideração na hora de se definir esta etapa no processo de criação?

Atualmente é comum resoluções de tela maiores, isso nos permite utilizar com maior liberdade tamanhos diversos de fontes. Facilmente encontramos sites que utilizam chamadas e destaques textuais em tamanhos grandes, o que contribui com que determinadas informações sejam rapidamente notáveis. Dessa forma, podemos, apenas com o uso da tipografia, hierarquizar o conteúdo visualmente.

Ao escolher uma família, devemos ter atenção se ela foi projetada em determinadas formatações (bold/italic). Quando uma fonte não tiver algumas dessas variações, forçá-las pode trazer um resultado visualmente impreciso. É o que chamamos de “Faux Bold and Italics”.

Ao atribuir certas famílias tipográficas em textos com corpo reduzido pode fazer com que detalhes fiquem serrilhados, pois não se encaixaram perfeitamente na grade de pixels da tela. Neste caso, utilizar fontes não-serifadas (menor índice de detalhes gráficos nos tipos) ou projetadas especificamente para mídia digital são alternativas para se precaver de um resultado indesejado.

4 – Não podemos nos esquecer ainda do contraste de cores a serem utilizadas como plano de fundo e no uso das fontes. Em relação à percepção visual na web, quais seriam as recomendações na hora de se definir a combinação cromática de um site?

Uma boa prática é utilizar paletas com número reduzido de cores, com isso adquirimos com maior facilidade harmonia e consistência gráfica da interface como um todo.

Cores reagem de maneiras diferentes quando utilizadas em conjunto (contraste simultâneo), portanto, ao definí-las devemos evitar vibrações no contato entre as cores selecionadas. Um exemplo comum é o vermelho e verde, que, dependendo dos tons, podem apresentar vibrações que geram desconforto visual quando justapostas.

Dar atenção específica para a seleção das cores é essencial para adquirir um bom nível de legibilidade, além de contribuir com a acessibilidade do projeto.

5 – Quais são os erros mais comuns que podem prejudicar a legibilidade de um projeto interativo?

É bastante comum encontrar interfaces que não priorizam visualmente as informações de forma clara. As partes mais importantes do conteúdo devem ser facilmente notadas e nem sempre essa organização é feita com cuidado.

O uso inadequado de cores, contrastes, texturas (imagens), entre outros, são vistos todos os dias, além da frequente prática de saturar a interface com elementos decorativos, na maioria das vezes, desnecessários.

6 – Que tipo de testes você costuma realizar para medir a legibilidade de um projeto interativo?

Um método empírico que utilizo com frequência é visualizar o projeto em tons de cinza, assim, consigo analisar contrastes sem a interferência das cores. Testes básicos em diferentes OSs e browser também garantem a legibilidade em diferentes ambientes.
Mas o teste que considero o mais importante é o coletivo, pedindo opiniões e, de preferência, analisando reações das pessoas usando a interface.

7 – Citar dois bons exemplos de projetos interativos com boa legibilidade, justificando o porquê de sua escolha.

A List Apart – Site de artigos longos e grande quantidade de informações. Em um formato tradicional, mas que com a utilização de linhas e áreas em branco distingue claramente cada bloco de informação.
O uso de cores e variações tipográficas para links, títulos e outros, é bastante sutil e funcional. Informa visualmente a hierarquia do conteúdo.

twistori – Minimalista e vibrante, cada cor representa um filtro de sentimento, muito bem definido no menu.
Com a utilização do fundo escuro as cores se destacam e aguçam o sentidos que relacionam a cor selecionada às suas sensações.
O tamanho das fontes torna fácil a leitura e faz do texto o único elemento de composição da interface.

8 – Que tipo de bibliografia você indicaria para o profissional que deseja se aprofundar neste assunto?

Legibilidade é a clareza na identificação de elementos visuais, não se restringindo apenas ao uso de textos e está diretamente ligado à funcionalidade de uma interface. Leituras referentes a diagramação, o uso da tipografia como forma e composição são recomendáveis.

Para quem está começando, um livro bastante abrangente e que trata de assuntos fundamentais da comunicação gráfica de forma objetiva é o ‘Sintaxe da Linguagem Visual’, de Donis Dondis. Abrange temas como gestalt, semiótica, teoria da cor, tipografia, entre outros.

Já quem quiser uma abordagem mais prática e simplificada, uma boa pedida é o ‘Não me Faça Pensar’, do Steve Krug. O livro é bem-humorado e interpreta situações do dia a dia na prática do desenvolvimento de interfaces e também aborda formas eficientes de utilizar textos na web.

Especificamente sobre o uso da tipografia, há o ‘Tipografia: origens, formas e uso das letras’ de Paulo Heitlinger em que o autor discute a funcionalidade e estética das letras.

interessante perceber que o link que é apenas um “+” azul no meu site é o 2o item que mais recebe cliques da home…

mapa de calor de cliques gerado pelo crazy egg.

typeface.js permite escrever em HTML e CSS como se os visitantes tivessem a fonte instalada.
O resultado gera imagens vetoriais pelo browser.

nao testei ainda, mas eh um bom começo… Ja me questionei algumas vezes sobre o fato de jah termos tecnologia pra tanta coisa incrível, mas não haver uma forma de embedar efetivamente uma fonte no html..

Revendo um material da época da facul do curso de tipografia, me intrigou ao lembrar vanguarda de Jan Tschichold e seus mandamentos ao defender a “nova tipografia”.

O movimento que vemos hoje, de web 2.0, funcional, simplicidade, clareza com o usuário e o desprezo de informações visuais desnecessárias, já eram teclas esmagadas por ele antes da 1a GM! (ok, .. nada de teclado!)

Revendo conceitos, podemos dizer que na verdade não se trata de “vanguarda”, mas sim de lógica, de fazer o óbvio. Minimalizar é consequência da preocupação com o objetivo maior que é comunicar.

Como faz mais do que sentido nesse post, dei uma enxugada nos mandamentos do Jan:

1. A nova tipografia tem cariz funcional
2. A função de qualquer tipografia é a comunicar na forma mais breve, simples e incisiva possível.
3. Para que a tipografia possa ser meio de comunicação social, requer organização.
4. As áreas livres (não impressas) do papel são elementos de comunicação de importância igual à das partes impressas.
5. A organização externa é a composição feita com os contrastes mais intensos [simultaneidade], através de formas, tamanhos e pesos diferenciados.
6. Um desenho tipográfico consiste na criação da relação lógica e visual entre as letras, as palavras e o texto a serem compostos num layout.
7. Podem utilizar-se linhas (barras) de orientação vertical e diagonal, como meios de organização interna.
8. A prática do diagramação elementar exclui o uso de qualquer tipo de ornamento, deve-se evitar o uso decorativo, pseudo-artístico e especulativo de elementos.
9. A ordem dos elementos deve basear-se na estandardização do formato dos papéis.
10. Quer na tipografia, quer em outros campos, o desenho elementar não é absoluto ou definitivo.

Agora, …gostaria de saber pronunciar o sobrenome dele ;)

Como nao poderia ser diferente, está no ar a nova versão do meu site, totalmente html dessa vez!
Por enquanto com poucos trabalhos, em breve atualizações ;)

já era mais que tempo de mudar… ufa!

Normalmente o principal objetivo de um site é publicar um conteúdo que seja indexável e acessível, fatores que são prejudicados ao escolhermos uma solução full-flash.

Hoje ainda é recomendável publicar uma redundância do site em html, o que afeta diretamente o custo do projeto. Com o custo e benefício inferior, essa decisão precisa ter uma boa justificativa.

O uso do flash é pertinente em casos específicos, como produtos de publicidade, que exploram o apelo emocional, ou ainda, para aplicações didáticas como e-learning, entre outras. Os recursos interativos que o flash oferece se bem utilizados, podem enriquecer a experiência destes produtos.

Porém, ainda é recorrente o desenvolvimento de flash sites que poderiam ser totalmente em html e evitar que elementos fundamentais, como o nome da empresa, tenham a mesma prioridade semântica que o texto “fechar” em algum lugar do site. Uma perda considerável por conta de uma ou outra animação, que na prática não traz nenhum beneficio para o usuário. Para estes casos, estão cada vez mais à disposição frameworks e outros recursos que possibilitam a prática de elementos dinâmicos, fazendo uso apenas de javascript.

Mesmo que os processos de indexação do conteúdo em flash estejam sendo aprimorados, se não há um real motivo para o uso do flash, devemos optar por soluções em html ou pelo menos híbridas, separando conscientemente elementos que podem ser omitidos nas buscas.

Daniel Blumenthal
www.blumenthal.com.br

A imagem abaixo foi feita puramente por css+html.
Não acredita? Copie o código aqui e cole em um arquivo html para certificar ;D

Autoria: romancortes.com/blog/homer-css/

27 de abril é a dia do aniversário de fundação do ICOGRADA (International Council of Graphic Design Associations) e desde 1995 é celebrado como o Dia Mundial do Design Gráfico (World Graphics Day).Aos que inspiram/respiram design gráfico diariamente eis a oportunidade de comemorar!

PS. Alguns posteres comemorativos no site http://icograda.org/events/archive/category18.htm
+PS. O dia mundia mundial do design industrial (World Day of Industrial Design) é 29 de junho.

Quando: 8 a 11 de outubro de 2008
Onde: São Paulo
Oq: Congresso Brasileiro de Pesquisa e Desenvolvimento em Design. Maior congresso na América Latina na área do Design, é um evento bianual voltado para a discussão da pesquisa e ensino de design no Brasil.

Categorias:
1. Teoria e crítica do design
2. História do design
3. Metodologias do design
4. Pedagogia do design
5. Projetos em design
6. Design e tecnologia

Instruções
O processo de submissão e avaliação em blind review dos trabalhos será realizado eletronicamente via sistema JEMS. Todas as instruções para submissão de artigos serão divulgadas no site do evento: www.sp.senac.br/ped2008.

A terceira edição da Bienal Latino-Americana de Tipografia, a Tipos Latino, receberá as inscrições até o dia 15 de fevereiro de 2008. Os tipógrafos interessados poderão inscrever seus trabalhos nas modalidades “Design de fontes latino-americanas” e “Design com fontes latino-americanas”. Os projetos inscritos deverão ter sido publicados entre abril de 2006 e fevereiro de 2008.

Serão selecionados 70 trabalhos de desenvolvimento de fontes latino-americanas e dez projetos com uso de fontes latino-americanas. Os escolhidos participarão da exposição que irá compor o evento nas nove sedes da mostra.

A Bienal Latino-Americana de Tipografia ocorrerá, simultaneamente, no Brasil, Argentina, Chile, Colômbia, México, Peru, Uruguai e Venezuela, entre os meses de abril e julho de 2008. O Paraguai entrará na lista como país convidado.

O evento pretende criar um espaço de celebração, estímulo e divulgação do design tipográfico desenvolvido na região. Com isso, será apresentado um ciclo de exposições, palestras, oficinas e visitas monitoradas.

Os trabalhos selecionados serão publicados no site e nos catálogos da bienal. O regulamento e formulário de inscrição estão disponíveis no site.

Quando: Até 15 de fevereiro de 2008
+ Informações: www.tiposlatinos.com

Algumas conclusões adquiridas em pesquisas de Eye-tracking podem ajudar a aprimorar o design de interfaces

1. Textos atraem atenção antes das Imagens. Maior parte dos usuários chegam em um site procurando por informações, não imagens.
2. Inicialmente os olhos focam no canto superior direito da página.
3. Usuários olham para o topo esquerdo e percorrem movendo para direita inferior no formato de um “F”. Certifique-se de que os elementos importantes estão localizadas nessas áreas-chave para manter os leitores envolvidos.
4. Banners são ignorados. Geralmente mantém o foco por poucos segundos.
5. Formatações enfeitadas são ignoradas. Usuários confundem com anúncios e acham que nestas áreas não irão encontrar as informações que ele precisa. Manter o site racional, sem extravagância para não confrontar com os elementos mais importantes.
6. Mostrar números numericamente. São identificados muito mais rápido do que números por extenso.
7. Tamanho das fontes influenciam no comportamento. Fontes menores aumentam o foco (específico) enquanto fontes maiores induzem a varredura dos olhos (geral). O uso adequado irá depender da necessidade.
8. Usuários apenas olham para um sub-título se lhe interessar. Apenas inserir subtítulos para informações que possam ser relevantes.
9. Pessoas geralmente percorrem até partes inferiores da página. Para tirar vantagem disto, pode-se oferecer algo que o prenda ao longo da página. Destaques ou listas com marcadores podem demostrar que as informações são facilmente achadas no site.
10. Parágrafos curtos têm melhor desempenho do que longos. Informações devem ser concebidas para o curto tempo de atenção dos internautas. Mantê-las enxutas sempre que possível é fundamental.
11. Formatos de 1 coluna fixam mais os olhos do que os de várias colunas. Não sobrecarregar o visitante com muita informação. Muitas colunas poderão ser ignoradas pelos usuários. Evitar ruídos com a simplificação realmente é melhor em alguns casos.
12. Anúncios no topo esquerdo da página receberão maior atenção do olhar. Integrar anúncios no canto superior esquerdo aumentará sua visibilidade. Claro que não necessariamente serão clicados, portanto, não sacrifique o visual para ganhar visibilidade extra.
13. Anúncios posicionados próximos ao conteúdo principal são vistos com mais frequência.
14. Anúncios em texto foram intensamente mais vistos do que qualquer outro tipo testado. Não distraem e misturam-se com o conteúdo da página, são visualmente menos irritantes e mais aceitos.
15. Imagens grandes chamam mais atenção. As pessoas se interessam mais pelas imagens em que podem ver detalhes e informações claras. A maioria dos usuários têm conexão banda-larga atualmente e não sentem receio em optar por ver imagens grandes.
16. Imagens “limpas” atraem a atenção dos olhos. Obras de arte podem não atrair tanto o olhar das pessoas. Ao usar fotos de pessoas, prefira fotos limpas, de fácil compreensão. Inclusive, fotos com pessoas “reais”, e não modelos, têm melhor performance.
17. Títulos direcionam os olhos. Primeiras informações buscadas pelos leitores ao longo da página.
18. Usuários gastam muito tempo olhando para botões e menus. Por isso vale a pena dedicar tempo extra para garantir que serão bem concebidos, afinal, não só apresentam alto grau de fixação dos olhos, como também é um dos mais importantes elementos do site.
19. Listas prolongam a atenção do olhar. Quebrar os parágrafos em listas mantém os usuários mais concentrados. Usar números ou marcadores para destacar as informações mais importantes torna o site mais fluente e facilita que o usuário encontre as informações que procuram.
20. Longos blocos de texto são evitados. Estudos mostram que internautas não investem tempo lendo blocos longos, por mais relevante que possam ser. É preciso quebrá-los. em parágrafos menores, destacando áreas específicas.
21. Formatação pode chamar a atenção. Diferenciar a formatação de um texto destaca uma determinada informação, porém use com moderação para não tornar a página difícil de ler.
22. Espaço em branco é bom. Deixar áreas livres de qualquer informação, mantém as coisas simples e permite melhor acomodação visual.
23. Ferramentas de navegação funcionam melhor quando posicionadas no topo da página. Torna a navegação fácil de encontrar.

Texto original: Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies, de Christina Laun – Dica do Vitor Lourenço