8 erros de CSS que você não deve cometer

Inspirada pelo meu último post, e pelo artigo do Glen Stansberry resolvi aproveitar o momento para incentivar a avaliação não só da usabilidade de um site, mas também do CSS. Agradecendo a dica do Jamaica ;) segue a minha lista “adaptada” do que eu acho que ninguém deve fazer com o CSS do site:

1. Ignorar a compatibilidade de browser
A gente já falou um monte sobre crossbrowser aqui no Tidbits. Já falamos de truques para checar se o seu site está compátivel com todos os navegadores, ensinamos a utilizar os Global Resets para zerar as propriedades automaticamentes setadas pelos browsers, e o Danilo no post anterior falou sobre o CSS compatível sem uso de hacks. Com esse material todo, você não pode nem pensar em deixar o seu CSS “quebrar”…

2. Não validar o HTML e o CSS
Também no post sobre garantir a qualidade do seu site em todos os browsers, eu dei o link de ferramentas de validação. Passem por elas para garantir um código semântico!

3. Não utilizar classes para formatações que se repetem em vários elementos
Se você tem elementos que tem propriedades de formatação iguais, utilize apenas uma class para definir essas propriedades para todos elementos. Se você tem em uma página, por exemplo, todas as fotos e boxes de um site tem borda e flutuam a direita, você pode simplesmente criar uma class para definir esses atributos e invocá-la em todos os elementos que a utilizam. Se, por um acaso, você precisasse mudar a cor da borda, teria que fazer isso em todos os elementos, se não atribuir a propriedade uma única vez.

4. Utilizar nomeclaturas ruins para classes e ids
Isso pode ser uma questão aparentemente insignificante, mas se você precisar fazer qualquer alteração no CSS depois de um tempo, vai se arrepender amargamente de não ter gastado 2 segundos a mais do seu tempo para pensar em um nome mais descritivo do que #box_top ou .coluna_left. Rótulos orientados à posicionamento ou ao formato do conteúdo dificultam a manutenção e substituição desse CSS.

5. Usar CSS para tudo
Quando se abandonaram os layouts com tabelas as tabelas ficaram tão mal faladas que até quando se precisa de tabelas, as pessoas tentam fazê-las da maneira mais díficil. O conceito é “Tableless” e não “Tablenone” – com o perdão do trocadilho infeliz. Enfim, o HTML precisa ser semântico, e quando você exibe dados em uma tabela, nada mais semântico do que utilizar uma tabela mesmo, não?

6. Usar CSS inline
Um dos piores erros que se pode cometer, é não se utilizar o conceito de “layers” (camadas), na hora de desenvolver uma interface. Na época que eu aprendi a mexer com o Photoshop, eu levei um tempo até perceber o qual importante era esse conceito, de manter cada coisa, em um plano diferenciado, e como isso facilitava a aplicação, manutenção e alteração de qualquer erros. Esse conceito é igualmente aplicável para o CSS, mantenha ele sempre em um arquivo externo. Um dos principais problemas remete ao item 3 dessa lista: com o CSS inline, você precisaria atribuir os valores para cada elemento individualmente, o que se transformaria em um caos, quando precisasse fazer modificações no layout.

7. Carregar muitos arquivos de CSS
Dividir o conteúdo do CSS em arquivos separados, facilita a manutenção – até certo ponto. Se você divide demais o CSS, pode acabar dificultando não só a manutenção, pela dificuldade de encontrar o arquivo que exatamente está procurando, como também o carregamento da página. Arquivos de CSS são bem leves (em sua maioria), o problema é que muitas conexões com o servidor, que precisam ser feitas para cada arquivo de estilo que for baixado, normalmente demoram mais que o próprio download. Normalmente, eu e o Danilo utilizamos um arquivo default.css setando propriedades que replicam em todo o site, por exemplo o CSS do Header, Footer, Menu lateral, e coisas do tipo. E criamos para cada área, o arquivo nomedaarea.css com as propriedades específicas da página, ou por exemplo um conteudo.css com as propriedades de css de páginas geradas dinamicamente.

8. Não utilizar o Firebug para acelerar os ajustes do css
O Firebug é uma ferramenta mais importante que o editor de códigos. Se um layout está com problemas de posicionamento, ou você está com dificuldades de entender porque uma div está herdando um padding fantasma de algum lugar, o Firebug ajuda você identificar quais são as propriedades de css que estão influenciando aquele elemento. Além do CSS, ele também facilita visualizar a estrutura do HTML, e identificar possíveis erros.

Acho que seguindo essa lista, já é possível otimizar o tempo de desenvolvimento, e ao mesmo tempo fazer um CSS de melhor qualidade. E se alguém se lembrar de algum outro erro que também poderia ser evitado, fique a vontade para comentar, e construirmos nossa lista juntos :)

As 10 heurísticas de usabilidade do Nielsen

Jakob Nielsen é um cara polêmico no mundo da usabilidade, talvez pelo fato de ser o mais conhecido analista de usabilidade do mundo, ou talvez seja o mais conhecido analista de usabilidade do mundo pelo fato de ser polêmico. O fato é que ele fala de usabilidade há muito tempo, e mais do que falar, ele sempre promove testes e pesquisas para embasar suas falas (para quem costuma ler os rodapés das pesquisas, ele é o dono da Norman e Nielsen Group – uma grande empresa de pesquisas e análises de dados do mundo).

Ele também escreve uma coluna em seu site (Useit.com), chamada Alertbox, onde constantemente apresenta os resultados de várias dessas pesquisas, ajudando a implantar certos parâmetros de usabilidade que passam a ser adotados por um grande número de profissionais.

Um desses parâmetros, são suas heurísticas. São 10 itens para a avaliação da usabilidade de um site, com intuito de evitar erros comuns – as heurísticas foram baseadas em 294 tipos de erros de usabilidade que o Nielsen comumente encontrava em suas análises – e que podem prejudicar e muito a experiência do usuário em seu site. Uma avaliação heurística, ao pé da letra, é feita por no mínimo 3 e no máximo 5 profissionais especializados nesse tipo de avaliação.

Mas mesmo que você não seja nenhum analista de usabilidade, checar esses itens com certeza irá tornar a experiência do usuário em sua interface uma experiência menos frustante. Vamos às heurísticas:

1. Visibilidade de Status do Sistema
Isso significa que você precisa se certificar de que a interface sempre informe ao usuário o que está acontecendo, ou seja, todas as ações precisam de feedback instantâneo para orientá-lo. copy

2.Relacionamento entre a interface do sistema e o mundo real
Ou não usar palavras de sistema, que não fazem sentido pro usuário. Toda a comunicação do sistema precisa ser contextualizada ao usuário, e ser coerente com o chamado modelo mental do usuário.

3. Liberdade e controle do usuário
Facilite as “saídas de emergência” para o usuário, permitindo desfazer ou refazer a ação no sistema e retornar ao ponto anterior, quando estiver perdido ou em situações inesperadas.

4. Consistência
Fale a mesma língua o tempo todo, e nunca identifique uma mesma ação com ícones ou palavras diferentes. Trate coisas similares, da mesma maneira, facilitando a identificação do usuário.

5. Prevenção de erros
Na tradução livre das palavras do próprio Nielsen “Ainda melhor que uma boa mensagem de erro é um design cuidadoso que possa prevenir esses erros”. Por exemplo, ações definitivas, como deleções ou solicitações podem vir acompanhadas de um checkbox ou uma mensagem de confirmação.

6. Reconhecimento ao invés de lembrança
Evite acionar a memória do usuário o tempo inteiro, fazendo com que cada ação precise ser revista mentalmente antes de ser executada. Permita que a interface ofereça ajuda contextual, e informações capazes de orientar as ações do usuário – ou seja – que o sistema dialogue com o usuário.

7. Flexibilidade e eficiência de uso
O sistema precisa ser fácil para usuários leigos, mas flexível o bastante para se tornar ágil à usuários avançados. Essa flexibilidade pode ser conseguida com a permissão de teclas de atalhos, por exemplo. No caso de websites, uso de máscaras e navegação com tab em formulários são outros exemplos.

8. Estética e design minimalista
Evite que os textos e o design fale mais do que o usuário necessita saber. Os “diálogos” do sistema precisam ser simples, diretos e naturais, presentes nos momentos em que são necessários.

9. Ajude os usuários a reconhecer, diagnosticar e sanar erros
As mensagens de erro do sistema devem possuir uma redação simples e clara que ao invés de intimidar o usuário com o erro, indique uma saída construtiva ou possível solução.

10. Ajuda e documentação
Um bom design deveria evitar ao máximo à necessidade de ajuda na utilização do sistema. Ainda assim, um bom conjunto de documentação e ajuda deve ser utilizado para orientar o usuário em caso de dúvida. Deve ser visível, facilmente acessada, e com oferecer uma ferramenta de busca na ajuda.

[VÍDEO] The Machine Is Us/ing Us

Em momentos pós-eleições americanas, nas quais a web foi fundamental para a campanha de Obama e teve peso decisivo na escolha do novo grande líder mundial, é hora de nós repensarmos um pouco o espaço com o qual aprendemos, nos conectamos e principalmente, colaboramos – como não poderia deixar de ser em tempos “2.0” – embora essa palavra me parece uma gradessíssimo clichê.

Repensar nossa postura, como profissionais do meio, é uma reflexão necessária. O mundo moderno se tornou de tal forma tão dependente da rede, e ao mesmo tempo tão vulnerável em sua depêndencia que nossa responsabilidade cresce e muito.

Construir interfaces para web, também se tornou uma tarefa que vai além da relação com o desktop, e abrange um universo bem maior de gadgets, que aumentam ainda mais nosso desafio de planejar, desenvolver e apresentar essas interfaces.

Pra complementar a discussão, um vídeo interessante (que não é inédito) mas aborda de uma maneira bastante criativa a importância da web (e das novas tecnologias), e sua influência sobre nossas vidas, no presente e no futuro próximo.

Bom final de semana a todos.
;)

Livros com desconto na USP

Me desculpem os preguiçosos, mas ler é fundamental. E a vida não é feita só de blogs e twitters: bons livros possibilitam um conhecimento mais amplo e direcionado (diferente do modelo não linear da web, de hipermídia).

Os livros são também mais perenes, menos fluídos, rígidos e duradouros. E também mais caros do que estudar pela web. Por isso, quando se tem uma promoção, é preciso aproveitar ;) ehhee

Começa a partir do dia 12 de novembro, são dois dias de Festa do Livro na USP. É um evento que reúne várias editoras com os descontos em torno de 50% do valor… Bela oportunidade pra quem precisa completar a biblioteca mas está com as reservas em baixa.

10ª Festa do Livro da USP – Desconto de 50%
Data: 12 a 14 de novembro
Horário: 9h às 21h
Local: Saguão do prédio das faculdades de Geografia e História da USP
Av. Professor Lineu Prestes, 338 – Cidade Universitária – São Paulo (SP)

Dica do Kadu