6 Problemas comuns de Usabilidade Web

1. Navegação complicada e/ou confusa

Principalmente em casos onde há uma grande quantidade de páginas e categorias, é essencial haver um indicador para situar o usuário de onde ele está, em qual seção ou categoria, e deixar claro uma maneira de voltar para a página inicial.

É interessante utilizar um menu de navegação com as páginas mais “importantes”, utilizando-o em todo website sem modificações, gerando assim uma familiaridade com o usuário.

2. Links não identificados, seja por cor ou sublinhado

Nunca deixe o usuário em dúvida se algo é clicável ou não. Por mais que pareça claro pra você, pra ele talvez não seja assim tão simples.

3. Registro obrigatório para acessar o conteúdo do website

Prática muito utilizada em fóruns, para gerar um maior número de usuários. Estes administradores acreditam que se o visitante se registrar ele participará da comunidade. Puro mito.

O que ele realmente irá fazer será sair da página e buscar uma nova fonte.

4. Formulários de registro extensos

Tempo é dinheiro, esta é sua máxima e a do usuário de seu website também.

5. Excesso de páginações

É frustrante para qualquer um lêr um ótimo artigo e ao chegar ao fim da página se deparar com links de paginação para inúmeras outras páginas.

Tenha cuidado de separar um bom espaço em seu website para o conteúdo, não restringindo-o a um pequeno bloco soterrado por propagandas. Se o conteúdo for tão longo assim, divida-o em partes.

6. Nenhuma informação para contato

Problemas podem ocorrer, ou alguém pode querer lhe dar um feedback positivo sobre seu site. Não encontrar como se contactar é realmente frustrante para o usuário.

Obviamente não é necessário exibir seu e-mail, telefone, endereço, um simples formulário de contato daria conta de todo o problema.

Referências - Usability Post

Bug no Flash Prejudica Navegação

Apresentações e baners em flash são exclentes para firmar a idéia de seu website, principalmente pelo destaque que estes ganham em comparação a outros elementos, mas cuidado, você pode estar prejudicando o acesso de diversos usuários!

Como é visível, no Firefox do Ubuntu, o Flash sempre acaba sobrepondo qualquer elemento da página. O mesmo ocorre com banners expansíveis, onde o espaço fica alocado, prejudicando a navegação.

Até o momento, este bug ainda não foi solucionado nas versões do Flash Player para Linux, então tenha cuidado ao utilizá-lo, tendo em vista que poderá prejudicar a navegação de certos usuários se aplicá-lo em posições que outros objetos devam ser sobrepostos.

Sistema de Suporte Gratuito

Oferecer um suporte de qualidade aos seus clientes é o básico para manter qualquer negócio em funcionamento, mas como você proporciona este suporte? através de e-mails? telefonemas? cartas?

Existem diversos sistemas de suporte hoje em dia no mercado, mas para muitos deles, é necessário pagar uma boa mensalidade, e caso a licença for completa, o custo é muito superior.

Buscando um sistema para o suporte, encontrei o Trellis Desk, e me surpreendi bastante com ele. Não sei porque, mas as pessoas tem mania de associar gratuidade com baixa qualidade, mas neste caso, passa a realmente ser só uma mania, pois o sistema não decepciona.

Algumas de suas funções básicas:

• Tickets organizados por departamento
• Notificação por E-mail
• Nível de prioridade para os Tickets
• Multi-funções de moderação

A única coisa que faltou para ser nota dez, foi uma integração com chat, mas para um sistema onde não é necessário nem chegar com a mão perto do bolso, está mais do que excelente.

» Demonstração
» Download

Transparência com CSS em qualquer Browser

Levei algum tempo pesquisando até encontrar uma maneira para controlar o nível de transparência que realmente funcionasse, mas esta busca me retornou um resultado muito simples e útil.

Para os indivíduos que desejam adquirir o mesmo efeito, estas são as propriedades:

filter:alpha(opacity=50);
moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5; 

Deste modo você estará definindo uma transparência de 50%, para aumentar ou diminuir a transparência, basta editar os valores destacados.

Para facilitar a utilização, preferi adicionar as propriedades em uma classe, podendo assim, utilizá-las em quantos elementos desejar.

.transparencia {
filter:alpha(opacity=12);
-moz-opacity:0.12;
-khtml-opacity: 0.12;
opacity: 0.12;
}

Alterarando a cor do texto selecionado

A cor padrão dos textos selecionados é bastante neutra, em certo ponto é bom, por se adaptar bem a qualquer tipo de layout, mas se você prefere algo mais “personalizado”, elas com certeza deixam muito a desejar.

A modificação é realizado com o auxílio do CSS, e como era de se esperar, não funciona no Internet Explorer (o que funciona nele afinal?).

/*Firefox*/
::-moz-selection{
background:#F84; /*Cor de fundo*/
color:#FFF; /*Cor do Texto*/
}

/*Safari*/
::selection {
background:#F84;
color:#FFF;
}

Estatísticas no Wordpress - WassUp

Para blogueiros que se importam com o número de acessos em seus blogs, a utilização de algum sistema de estatísticas sobre os visitantes é imprescindível.

Atualmente existem vários destes sistemas, mas de todos que conheço o Google Analytics é o melhor, bastando somente a inserção de um código nas páginas que deseja monitorar e está pronto. Mas existem pessoas que preferem utilizar um plugin no próprio blog para visualizar as estatísticas. Para estas pessoas indico o WassUp.

Características

Como grande parte dos plugins para Wordpress, ele possui uma instalação extremamente simples e configurações apresentadas de forma dinâmica, para que ninguém possua dificuldades em realizar modificações.

Exibe graficamente:

• O número de visitantes;
• O número de pageviews;
• A média de páginas visualizadas por usuário;
• A quantidade de possíveis acessos de spams em seu blog.

Além de exibir em forma de lista, organizada por horário:

• O IP do visitante;
• O sistema operacional;
• O browser;
• O país;
• A página de origem;
• E as páginas que este visitante acessou no blog.

Caso o visitante tenha encontrado seu blog através de algum sistema de busca, ele mostra qual foi este sistema, qual foi o termo utilizado e em qual página seu site apareceu.

Instalação

É necessário realizar o download do plugin neste site para que possamos dar início a instalação, após:

1. Descompacte o arquivo e envie a pasta com os arquivos do plugin para o diretório:

   /seublog/wp-content/plugins/

2. Acesse o painel de administração do seu blog e clique na aba plugin para ativar o WassUp
3. Utilize!

Optimização do Blog para Buscadores

A importância que os buscadores desempenham no nível de audiência do blog é inegável. Se você busca um alto nível de visitantes, posso assegurar que sem um bom “relacionamento” com os buscadores esta tarefa será bastante complicada.

Os algoritmos dos sistemas de busca são modificados constantemente, por isso não existe uma fórmula de SEO (Search Engine Optimization) mágica, que você faça durante a noite e no outro dia pela manhã, seu blog esteja como primeiro nos resultados para determinado assunto. É uma tarefa que demora tempo para que se possa perceber os primeiros resultados positivos, e pode gerar um pouco de trabalho, mas com toda certeza este trabalho será retribuído futuramente.

Não falando de SEO como um todo, e sim algumas técnicas para melhorar a indexação de seu blog nos buscadores, pode-se destacar plugins como o All in one SEO e o Google XML Sitemaps.

All in one SEO - Facilita a edição de várias informações que fazem a diferença na indexação de seu blog, como o título da página inicial, keywords, descrição, formato do título das página de categoria, arquivo, busca, além de prevenir contra conteúdos duplicados e gerar automáticamente descrições para as páginas de seu blog.

Google XML Sitemap Generator - É um rápido e prático gerador de Sitemaps. Em poucos minutos você possui um mapa de seu site pronto para ser utilizado pelo Google e sem necessidade de tocar em código algum, todos as opções e modificações são realizadas através do próprio plugin.

Instalação dos Plugins

A instalação de ambos os plugin é extremamente simples, e de acordo com o padrão.

1. Faça o Download dos arquivos do plugin.

2. Envie a pasta do plugin para o diretório /seublog/wp-content/plugins/

3. Acesse a aba ‘plugins’ no painel de administração do Wordpress e ative o plugin desejado.

Depois de instalado os plugins, recomendo instalar um plugin de estatísticas no wordpress e/ou utilizar o Google Analytics, para verificar como os visitantes chegaram ao seu blog, podendo indentificar com maior precisão qual é o melhor método de divulgação de seu blog, e com qual tipo de visitante você está lidando.

O que é Javascript Obstrutivo?

Não é necessário deixar de utilizar o javascript, até porque, com ele pode-se fazer coisas excelentes e totalmente profissionais, mas utilizar em tudo é um grande problema, e assim “gera-se o javascript obstrutivo”.

Pensando no próprio conceito da palavra obstrução, compreendemos o conceito do javascript obstrutivo, que nada mais é do que a utilização do javascript que caso seja desativado ou bloqueado por algum motivo, lhe impeça de desenvolver uma tarefa básica e/ou necessário.

Como assim?

Você está mostrando aquele ótimo menu em javascript para seu cliente, ele é totalmente moderno e vai combinar com o layout do site, principalemente pela série de efeitos adicionados, mas você pensou como ele irá se comportar caso o javascript não seja executado?

O menu é básico em um website, se ele não funcionar perfeitamente, você estará perdendo visitantes e automaticamente possíveis clientes.

Um outro exemplo, seria em um formulário de contato, onde normalmente utilizamos javascript para verificar se os campos foram preenchidos, mas dependendo de como você criar esta verificação, caso o javascript esteja desativado ele não permitirá o envio do formulário, o que é totalmente inaceitável.

O melhor a se fazer nestes casos, é criar uma verificação em javascript e criar outra em php, caso o javascript esteja desativado, o php da conta do recado.

Como Resolver?

É aconselhável que sempre que for desenvolver alguma aplicação, considere estes fatos, e não utilize javascript em pontos cruciais, mas, caso seja realmente necessário, verifique como a aplicação responderá com o javascript desativado para que o cliente não perca nada de importante.

Buscador de Arquivos em PDF

É fato que grande parte das documentações, tutorias e dissertações sobre determinado assunto são criadas em PDF. E foi pensando nesta grande disseminação do PDF, e da quantidade de informações úteis que são passadas através dele, que foi criado o PDF Search Engine.

Sistema de busca baseado no Google, onde os resultados são arquivos em .pdf relacionados ao que você procura. Caso tenha dúvidas quanto a qualidade do arquivo que irá fazer o download, ele possui um funcional pré-visualizador.

A única coisa incômoda, é o aparecimento frenético de pop-ups, mas todo mundo precisa ganhar um trocado de alguma forma.

Ruby on Rails, porque utilizar ?

Existem diversos tipos de linguagens de programação disponíveis no mercado hoje em dia, e é por conta desta grande variedade que muitas vezes são geradas confusões para os desenvolvedores iniciantes que acabam ficando em dúvida quanto a qual linguagem seria melhor para se trabalhar.

Este slide visa esclarecer algumas vantagens de se trabalhar com Ruby on Rails.