Antes de mais nada, vou tratar neste post sobre como fazer avaliações heurísticas em sites, mas pode ser também traduzido para qualquer outra área do design, inclusive o de design gráfico e de produto.

O que é uma avaliação heurística?

De acordo com este site,

A avaliação heurística permite uma avaliação contínua do processo, com baixo custo. Envolve especialistas avaliando o design com base em um conjunto de critérios de usabilidade ou heurísticas. O design é examinado em busca de instâncias nas quais esses critérios são violados. Os critérios de usabilidade são relacionados a princípios e guidelines e podem ser selecionados ou derivados deles.

Nestas avaliações, um pesquisador age como o usuário-alvo e tenta completar uma série de tarefas pré-determinadas no site desenvolvido. Por exemplo, tentar comprar um produto, tentar fazer um pagamento de um produto ou até mesmo encontrar informações importantes (como telefone, endereço ou e-mail para contato).

Um conjunto de critérios para análise (neste caso, proposto por Nielsen e Molich (1990)), inclui:

1. Diálogo simples e natural;
2. Fala a língua do usuário;
3. Minimza a carga cognitiva do usuário (“não faça o usuário ter que pensar”);
4. Consistência;
5. Feedback;
6. Saídas marcadas claramente;
7. Atalhos;
8. Mensagens de erro precisas e construtivas;
9. Previne erros;
10. Ajuda e documentação;

Em resumo, avaliações heurísticas são uma forma barata e rápida de analisar se um site serve ao seu propósito.

O bom deste tipo de análise é que qualquer pessoa pode ser a cobaia destes testes e o custo deste tipo de teste é baixíssimo. Estes testes vão servir para analisar o que funciona e o que pode ser melhorado, além de servir como base para quando o designer estiver considerando novos protótipos.

O que preciso para uma avaliação heurística?

Um computador, um checklist e de 3 a 10 avaliadores. Uma câmera ou software que grava a sua tela (como Camtasia ou iShowU) também é recomendado para uma análise posterior mais a fundo.

É preferível que cada avaliador seja único. Procure escolher pessoas diferentes, como por exemplo alguém mais jovem, outra pessoa mais de idade, um designer, um analista, uma secretária, etc. Quanto mais diverso for seu grupo avaliador, melhor! E eles nem precisam ser seu público-alvo.

Estes avaliadores podem ser seus amigos ou familiares, pessoas envolvidas ou não no projeto. Você pode por exemplo pegar colegas de trabalho, levá-los para a sala de conferência, pedir umas pizzas e fazer os testes em grupo, ou ligar para amigos diferentes e convidar para tomar um café por sua conta em algum lugar que tenha wi-fi e de onde você pode usar seu notebook.

Alguns experts recomendam trabalhar com o grupo como um todo, mas o processo também pode ser feito individualmente. Vou relatar como fazer os dois tipos de testes.

O checklist deve conter os critérios que devem ser analisados. Os avaliadores precisam ter a opção de marcar “concluído” ou “não concluído”, dar uma nota de 0 a 5 referente a facilidade de concluir a tarefa, além de um espaço para observações. Vou colocar um checklist abaixo que pode ser usado em qualquer site. No entanto, o seu deve conter os critérios específicos do seu site – os objetivos que os usuários devem atingir; em um site de e-commerce, o objetivo é fazer com que o usuário faça uma compra. Em um site empresaria, é fazer com que o usuário entre em contato para mais informações, etc.

Caso o site não seja um projeto pessoal, lembre-se de perguntar ao cliente a quem você está trabalhando o objetivo dele.

Como fazer uma avaliação heurística individual?

Com sua checklist em mãos, está na hora de chamar um dos seus avaliadores. Explique o que será feito – você estará observando como ele usa o seu site e como completa as tarefas determinadas na lista. Lembre-o de que não está sendo avaliado sua inteligência ou conhecimento técnico e se um erro aparecer ou ele não conseguir efetuar uma tarefa, o avaliador não será culpado de nada. É importante deixar isto claro ao avaliador para que ele não ache que está sendo testado (o objetivo é você testar o site!), assim ele terá mais liberdade e usará o site como usaria normalmente, sem tentar agradar você. Informe também que se ela não conseguir concluir uma tarefa, ela não precisa se debater e deve passar para a próxima.

Se você possuir uma câmera, tente gravar a reação facial da pessoa afim de analisar se ela está com cara pensativa, de perdida ou se ela apenas segue seus instintos. Use um software para gravar o que ela faz no computador – cada click e movimento de mouse.

Assim que o avaliador conseguir concluir uma tarefa, peça para que ela preencha o checklist informando se conseguiu ou não, a dificuldade e qualquer observação que ela tenha.

Como exemplo, vamos supor que você pediu para que o avaliador encontrasse o e-mail para contato no site. Ele conseguiu, mas demorou muito tempo procurando pelo endereço no site apenas para descobrir que o link para a página de contato estava um pouco apagada, sem contraste e com um tamanho de fonte pequeno. No checklist, ele deve dar uma nota de 2 a 4 (já que ele conseguiu fazer a tarefa, mas não foi fácil) e no campo das observações deve notar que “o link foi difícil de ser encontrado”.

Em uma folha que só você pode visualizar, cronometre o tempo que a pessoa demorou para efetuar cada tarefa e note também se ela teve dificuldade (ficou mexendo muito o mouse, clicou em páginas que pareciam ter a informação, usou o sistema de busca, etc) ou se ela fez algo imprevisto para chegar na informação (ex: procurou no Google).

Como fazer uma avaliação heurística em grupo?

Entregue uma checklist a cada pessoa e projete o site na parede com um projetor (ou use uma tela grande para que todos consigam ver nitidamente tudo). Você pode continuar de duas formas:

1. Você pode guiar as ações e pedir para que os avaliadores acompanhem e analisem se parecer ser algo que eles fariam naturalmente;
2. Perguntar o que eles fariam para conseguir completar o ítem da lista deles.

Agora basta escutar o que eles tem a dizer. Lembre-os que não há uma má opinião e nenhuma deve ser sensurada por mais ninguém. Colete todo o feedback pertinente.

Formatando os dados

Depois de fazer todos os testes com todos os analisadores, está na hora de compilar tudo e ver o que precisa ser feito.

Você pode pegar um screenshot da tela e apontar o que gera problemas aos usuários ou fazer uma apresentação em PowerPoint / Keynote para mostrar ao seu chefe. Até mesmo uma planilha com o problema e o grau de dificuldade que os analisadores tiveram pode servir.

Aproveite para incluir o que pode ser feito para mudar os problemas apresentados. A fonte precisa ser aumentada em algum lugar? Alguma informação precisa ser relocada? Um formulário de contato deve pedir menos dados desnecessários?

Resultado de uma avaliação heurística

Faça uma outra checklist destes problemas e categorize a importância de cada problema em “Urgente”, “Importante” e “Implementação futura”. Vá marcando o que for feito e se não foi feito, especificar o por que.

Pronto. Sua avaliação heurística está feita, e agora você pode ter certeza que seu site serve ao propósito. Após as implementações terem sido feitas, você ainda pode efetuar um novo teste (pode ser um grupo misto: algumas pessoas que já participaram do teste antes, e algumas outras novas pessoas).

O importante é você atingir uma porcentagem mínima de sucesso, como por exemplo 90% de sucesso em um objetivo importante do site (comprar algo na loja online) e 70% em objetivos secundários (encontrar um número de telefone para tirar dúvidas).

A forma gratuita de fazer uma análise heurística

Sim, existe uma forma de fazer esta análise onde você não gastará um centavo e não precisa lidar com mais ninguém – basta você mesmo fazer o teste, usando seu bom senso. No entanto, lembre-se sempre de pensar como um usuário pensaria.

Checklist básico de usabilidade

A lista abaixo é o básico que pode (e deve) ser usado em qualquer análise heurística. Existem várias listas similares, no entanto essa lista do Dr. Peter Meyers serve a qualquer propósito.

Acessibilidade

• Tempo de abertura do site é razoável
• Contraste entre texto e fundo é adequado
• Tamanho de fonte / espaçamento facilita a leitura
• Flash e add-ons são usados moderadamente
• Imagens possuem ALT tags
• Site tem uma página de Erro 404

Identidade

• Logo do site está bem posicionado
• Tagline da empresa é clara
• Propósito do site é entendido em 5 segundos
• Acesso rápido a informação da empresa
• Acesso rápido a contato com a empresa

Navegação

• Navegação principal é facilmente identificável
• Itens de navegação são claros e concisos
• Quantidade de botões e links é razoável
• Logo do site é linkado à página inicial
• Links são consistentes e fáceis de serem identificados
• Caixa de busca é de fácil acesso

Conteúdo

• Títulos são claros e descritivos
• Conteúdo crítico está acima da dobra
• Estilos e cores são consistentes
• Ênfase (bold, etc) é usado de forma moderada e adequada
• Anúncios e pop-ups são não obstrutivos
• Texto é conciso e explicativo
• URLs são amigáveis
• Títulos HTML são explicativos

Simples, não?

Existem outras listas mais completas na web, inclusive Jakob Nielsen tem alguns livros interessantes sobre isto – como “Projetando Websites com Usabilidade” e “Usability Engineering“.

Lembre-se sempre de incluir na lista os objetivos do seu site!

Boa análise a todos! ;)

Bibliografia – Qualitative Web Analytics, Avaliação heurística, Jakob Nielsen, Wikipedia

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Análise: Sites de faculdades de design
• Como estragar seu site – parte 2
• Plakker Album – Pegue aqui sua figurinha exclusiva!

Para definir melhor o problema, a partir de agora o chamaremos  de falta de heirarquia visual. Em outras oportunidades já falei um pouco sobre isso, mas, agora eu pretendo aprofundar um pouco mais no assunto.

A heirarquia visual propõe um caminho para a visualização do conteúdo de acordo com a sua importância, comparada com as demais. Algumas palavras ou trechos são essenciais para o entendimento do contexto, ou seja, existem palavras que devem ser vistas primeiro, outras em segundo e assim por diante.

Como, pode se ver na imagem ao lado, existe um comparativo entre elementos com uma heirarquiva gráfica definida com outros que não seguem um padrão de leitura.

Alguns elementos pesam graficamente (certamente foi a primeira imagem que você olhou) mais do que os outros, como podemos perceber a heirarquia visual tem um forte apelo para o design gráfico, os elementos com maior destaque guia os usuários para o resto das informações de acordo com a sua evolução.

Quando essa heirarquia visual é evidente e direta, o usuário navega pelo site com grande clareza e objetividade, de certa forma, isso é criar meios coerentes para que os usuários tenham uma boa experiencia durante a navegação no seu site.

Informações objetivas os motivam a passar mais tempo no site procurando por outras informações que lhe podem ser uteis.

Peso Visual

O peso visual dos elementos reforçam a heirarquia dos mesmos. Criando contrastes de cores, posicionamento e tamanho dos elementos, podemos atribuir mais importância para alguns objetos, como eu já citei em outro artigo, o UX bem feito se parece com uma conversa, flui naturalmente.

No caso da heirarquia visual partimos do mesmo princípio, o conjunto visual é como se fosse uma narativa, se conseguirmos explicar bem os pontos chaves da história, ela é facilmente entendida e passada adiante.

Por exemplo, não deixando espaço suficiente entre as linhas de texto, você pode inadvertidamente criar uma seção que é visualmente densa e muitas vezes mais difícil de ler e distrair heirarquia visual estabelecida.

Ao aplicar o espaçamento adequado, você permite que o texto para respire e as posições ao redor também, imagens e texto para mantém a sua prioridade e equilíbrio em relação ao texto.

Por meio destes elementos podemos melhorar muito a experiência do usuário em busca de uma determinada informação, em meio a milhares de informações perdidas na web, cabe a nós UX designers tornar esse mundo virtual um lugar melhor.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Re-desenhando um site (dica)
• Erros em web design que devem ser evitados
• Criando wireframes online
• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1

Antes de começar os pitacos, vale lembrar que expêriencia do usuário ou simplesmente UX, é baseado em conceitos de ergonomia, usabilidade, arquitetura de informação e navegação.

Pronto, um erro comum nisso é pensar que que o UX designer é responsável por criar boas experiências, na verdade,  o UX cria artefatos que possibilitam um boa experiencia no site. O importante é desenvolver objetos sólidos que traduzem em experiências similares para todos os usuários.

Quando o trabalho de UX é bem feito, ele se torna invisível aos usuários comuns, ou seja, raramente será comentado sobre o grau de dificuldade do trabalho. Um trabalho de sucesso simplesmente guia o usuário para as informações, mas sem o usuário saber que na verdade existe um “mapa” que guia o caminho.

Um site bem feito é como uma boa conversa, flui naturalmente.  Em outras palavras é de suma importância o conteúdo, informações claras e objetivas contribuem para uma boa experiência.

A simplicidade vai além de “menos é mais” que normalmente lemos por aí, o simples tem a ver com clareza e não com elementos gráficos, animações e etc.

Quando alguém entende com clareza a proposta, significa que o UX designer foi claro, mesmo se a informação foi passada por meio de animações ou desenhos.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Hierarquia visual de elementos
• Como fazer avaliações heurísticas em sites
• Design e experiência – parte 2
• Aplicando a Lei de Fitts
• Entendendo a Lei de Fitts

Resumindo o artigo anterior: quanto maior a área de um objeto clicável em relação com a distância que precisa ser percorrida pelo ponteiro do mouse, mais fácil é de clicá-lo. E como aplica-se isto ao web design?

Formulários de contato

O formulário de contato é o exemplo mais clássico da aplicação da Lei de Fitts. Muitos sites colocam o botão de “Enviar” muito próximo do botão “Limpar” ou “Resetar”. Embora seja bom ter um botão para limpar todos os campos, muitas vezes pode se tornar um problema quando o formulário é muito extenso e a Lei de Fitts não é respeitada.

O que acontece? Você tá lá, preenchendo aquele formulário super longo e na hora de finalizar, em vez de clicar em “Enviar” você sem querer clica em “Limpar”. Pronto, foi-se tudo que você digitou. Não vou entrar na discussão sobre se o botão de limpar é realmente necessário, mas apenas vou mostrar o quão fácil é quando há uma diferenciação maior entre os dois botões.

Para evitar este problema, basta deixá-los bem à parte. Com isto, a distância percorrida pelo mouse será maior, dando tempo do usuário entender o que cada botão faz (pois terá tempo de lê-lo). Os botões em tamanhos diferentes também ajudam, pois você quer dar prioridade ao “Enviar” e, caso o usuário queira limpar o formulário, ele terá um pouco mais de dificuldade (já que precisa “mirar” o ponteiro do mouse).

O objetivo não é dificultar o envio do formulário para o usuário, mas sim facilitar para que ele não apague sem querer em vez de clicar em “Enviar”.

Links

Um exemplo da utilização da lei de Fitts na web pode ser encontrado neste link, que utiliza CSS para demonstrar como um botão com área maior é melhor clicável.

Em resumo, o ideal seria colocar no seu CSS:
a:link {
padding:15px 0px; //Ou seja, no topo e abaixo do link, há um espaço clicável de 15px e nas laterais não há
z-index:9; //Assim um link não altera o tamanho da linha toda
}


Um exemplo sem a aplicação da Lei de Fitts seria assim (coloque o mouse sobre o texto). Já um link com a aplicação da Lei ficaria com o seguinte aspecto quando você coloca o mouse sobre ele: coloque o mouse aqui em cima.

Notou como só bastou chegar perto do link para ele ficar clicável?

No entanto, algumas coisas devem ser notadas:

• Em textos com links demais, o usuário pode ficar confuso ao colocar o mouse sobre um link determinado. Portanto, nestes casos, procure usar uma diferenciação no estilo a:hover.
• Se você usa imagens ou cores como fundo de seus links, isto pode lhe trazer alguns problemas (veja o exemplo acima: o fundo acabou cobrindo parte das outras linhas).
• Em alguns navegadores, a cópia de um texto pode trazer problemas.
• Cuidado ao usar o padding lateral, pois o link pode acabar ficando afastado das palavras que antecedem e precedem-no.

Usando as laterais da tela

Uma das coisas que eu admiro no Mac é a possibilidade de programar determinadas funções para os quatro cantos da tela. Se eu jogo meu mouse pro canto superior direito, o Mac OS X mostra todas as janelas que tenho aberto. Quando jogo o mouse pro canto inferior direito, sou levado a outras telas de desktop.

Acesso rápido aos diferentes desktops graças a Fitts

Isso facilita pois são funções que qualquer power-user usa constantemente. A Lei de Fitts é aplicada, pois não há a necessidade de mirar em um determinado botão para que essa tarefa seja executada, diminuindo o tempo que se leva e aumentando a produtividade.

No Windows, por exemplo, se você jogar seu mouse pro canto inferior esquerdo e clicar, o menu Iniciar será ativado. Você nem precisa mirar naquele canto; basta jogar o mouse pra lá e pronto. Como é uma funcionalidade muito usada, o acesso ao menu Iniciar deveria ser rápido e sem a necessidade de parar para analisar se você está clicando no local certo.

A área das telas é limitada, o que oferece maior precisão para os elementos que se encontram na borda. Ou seja, quanto menos precisão for necessária para conseguir uma determinada funcionalidade (o click do mouse), mais rápido será de executar a tarefa (lembra da fórmula no artigo anterior?).

A Lei de Fitts pode parecer algo óbvio para muitos, mas para os que achavam que era bobeira “facilitar a vida do usuário”, agora vocês tem prova técnica para colaborarem.

Outras fontes de informação

Tem muitos artigos sobre a Lei de Fitts na web. O IBRAU (Instituto Brasileiro de Amigabilidade e Usabilidade) têm um exemplo perfeito da Lei de Fitts em prática, que mede o tempo que você gasta clicando em pequenos botões e depois compara com o tempo gasto clicando em grandes botões.

Eis alguns sites sobre a lei de Fitts que podem ser interessantes.

• Lei de Fitts no Wikipedia (BR)
• Lei de Fitts no Mac (BR)
• Usability First (ING)
• MindHacks (ING)
• Teste da aplicação da lei de Fitts (ING)
• Aplicação da Lei de Fitts em links

Espero que estes artigos tenham sido úteis a você.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Entendendo a Lei de Fitts
• Hierarquia visual de elementos
• Re-desenhando um site (dica)
• Como fazer avaliações heurísticas em sites
• Tipografia na web – parte 2

Na ergonomia, a Lei de Fitts (“Fitts’ law“) é um modelo de movimento humano que prevê o tempo necessário para rapidamente mover a uma área designada com base na distância e tamanho desta área.

Publicado por Paul Fitts em 1954, a Lei de Fitts é usada como modelo para o ato de apontar no mundo real (por exemplo, com uma mão ou dedo) e no mundo virtual (em computadores, como por exemplo com um mouse). Afinal de contas, o que diz a Lei de Fitts e por que ele está sendo usado muito hoje em dia na web?

O que diz a Lei de Fitts?

Em termos simples e aplicados ao web design, a Lei de Fitts diz que quanto maior a área de um objeto clicável em relação com a distância que precisa ser percorrida pelo ponteiro do mouse, mais fácil é de clicá-lo.

Ou seja, se um botão (ou qualquer elemento clicável) tiver uma largura maior e uma distância menor de qualquer outro elemento da tela, a probabilidade de clicar em um elemento errado é menor. Embora isto pareça ser óbvio, muita gente não entende isto.

Distância maior = menos chance de erro

A Lei de Fitts é uma equação que pode predizer quanto tempo demora para que você aponte seu mouse (ou dedo, em casos do mundo real) baseado no tamanho e distância do objeto.

Qual é a equação da Lei de Fitts?

Matemáticamente, a equação é a seguinte:

Equação da Lei de Fitts

Onde:

• T = Tempo de movimento. Ou seja, o tempo que decorre desde o início até o final do evento.
• a, b = Variáveis. Neste caso, a representa o tempo de início/término da ação e b representa a velocidade do mouse ou mão. Essas constantes podem ser determinadas experimentalmente colocando uma linha reta como exemplo.
• A = distância do movimento do início ao centro do alvo (ou botão).
• W = largura do alvo/botão ao longo do eixo do movimento.

Mas o que significa tudo isto?

“Ok Canha, agora você poderia explicar isto em português? Qual a aplicação dele no design de interfaces ou web design?”.
Certo, querido leitor. O tempo que leva ao usuário clicar em algo é medido através do tamanho do objeto a ser clicado e da distância percorrida (no caso do web design, com o mouse).

Se você quiser que o usuário dê mais importância a um determinado objeto, você deve levar em conta que uma área maior e distância menor (do ponteiro do mouse) equivale a um tempo menor para o click. Ou seja, há um senso de facilidade maior devido ao pouco tempo consumido.

Já se você quiser dificultar uma ação (click indesejável, por exemplo), vale o contrário: área menor e distância maior (do ponteiro do mouse). Isso faz com que o tempo gasto para se clicar naquele objeto seja maior, dando mais tempo ao usuário processar se é realmente necessário aquela ação (a de limpar todos os campos de um formulário, por exemplo) e evitando que erros sejam cometidos.

Aí vai algumas outras conclusões as quais você pode chegar aplicando a Lei de Fitts:

• Botões e outros controles de interface com um tamanho razoável são facilmente clicáveis
• Botões e outros controles de interface com um tamanho razoável têm menos chance de serem clicados “sem querer”.
• As bordas de tela do computador são os lugares ideais para se ter botões e outros controles importantes (mais sobre isto no próximo artigo).
• Menus abertos são acessados de forma mais rápida que menus pull-down, já que o usuário não precisa mover o mouse mais do que o necessário.
• Menus em forma de torta são mais rápidos de acessar

No artigo de amanhã, vou exemplificar como que a Lei de Fitts pode ser aplicada ao web design. Fique ligado!

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Aplicando a Lei de Fitts
• Hierarquia visual de elementos
• Re-desenhando um site (dica)
• Como fazer avaliações heurísticas em sites
• Tipografia na web – parte 2

Navegação inconsistente

A navegação de um site deve fazer duas coisas: mostrar uma lista de locais que você pode ir e mostrar sua localização atual. Ele deve manter-se consistente no site todo pois ele é uma âncora – deve ser familiar para que as pessoas entendam o que é e elas devem sentir que possuem controle de onde estão para continuar navegando. Alterando a navegação de página para página vai apenas criar uma confusão mental, então mantenha-o simples e consistente.

Links não identificados por cor e/ou sublinhado

Links são os elementos-chave em um site – eles são a fundação da web. Faça-os fáceis de serem identificados. A convenção é que os links sejam azuis e sublinhados. No entanto, você não precisa seguir essa convenção se não convir ao seu estilo do seu site, mas você deve destacá-los de uma maneira ou outra. Eu ficaria longe de links em preto, a não ser que sejam localizados no contexto certo (por exemplo, uma barra de navegação).

Registro necessário para visualizar conteúdo

Já esteve em uma situação onde você esteve procurando por algo no Google apenas para encontrar um site que pede um registro para visualizar ele? Escondendo conteúdo valioso do usuário é uma barreira séria e frustrante para seu visitante, que é propenso a não voltar mais.

Formulários de registro longos

E não são apenas os formulários longos que são ruins – qualquer coisa que seja longa é ruim. Formulários de registro são uma barreira séria: você está forçando ao usuário a trabalhar. Pessoas odeiam preencher formulários, então remova tudo aquilo que não é absolutamente necessário. Mesmo se o formulário parecer longo, as pessoas perdem o tesão. Lembre aos usuários que eles podem preencher campos opcionais mais tarde.

Paginação excessiva

Lembra daquele artigo interessante que começou bem, e no final dele você notou que ele possue outras páginas? É frustrante pois você agora precisa abrir mais páginas, esperá-las carregar para terminar de ler o artigo. Isso pode até aumentar seus pageviews e fazer com que você possa ganhar mais com publicidade, mas vale a pena? Além de ser irritante para seus usuários, é também ruim para o SEO pois você estaria separando conteúdo relevante em páginas. Isso faz com que o robô dos sistemas de busca fiquem confusos a ponto de não entender sobre o que é cada página.

Texto longo demais

Aí vai aquele “longo demais” de novo. Seus visitantes não vão ler a página toda pois geralmente eles estão procurando por algo específico ou algo de seu interesse. Eles fazem isto escaneando a página inteira procurando por algo no qual focar. Use texto negritado, títulos grandes e imagens para providenciar uma estrutura escaneável para seu conteúdo.

Sem informação de contato

Por último mas não menos importante, se seus visitantes tem um problema com seu serviço (ou talvez só queiram te parabenizar por algo), deve haver uma maneira de entrar em contato. Você também não precisa postar seu e-mail, telefone residencial e celular no site, mas deve haver pelo menos um formulário de contato. Existem sites que nem isto possuem.

Existem outros erros de usabilidade importantes? Deixe seu comentário abaixo!

Fonte: Usability Post (traduzido e adaptado por Canha)

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como fazer avaliações heurísticas em sites
• Hierarquia visual de elementos
• Princípios e boas maneiras de user experience
• Aplicando a Lei de Fitts
• Entendendo a Lei de Fitts

Identificando os problemas

Isso é extremamente importante. Se você está re-desenhando seu site é por que ele tem problemas. Quais? Qual o impacto desses problemas? Vou tomar como exemplo um site que estou re-desenhando:

Vamos fazer uma lista dos problemas que esse site apresenta:

• Pouco contraste entre texto e fundo
• Não há nenhuma descrição do que se trata o site
• Cadê o link para a página inicial?
• Cadê a busca?
• A imagem principal é o que? Qual o objetivo dela?
• O que é aquele “Hot news headlines”?

Há bem mais problemas (especialmente internamente), mas vamos nos focar nesses.

O ideal é que você tenha mais pessoas opinando sobre os problemas que o site pode apresentar. Faça um teste simples de usabilidade. Por exemplo, peça para alguém que você conhece que não saiba mexer muito com internet tentar navegar no site. Quais os problemas que ela encontra?

Com a lista de problemas em mãos, dá para começar a pensar em…

Possíveis soluções

Alguns problemas tem soluções fáceis e óbvias. Outras nem tanto. E é aí que vamos gerar outra lista oferecendo possíveis soluções aos problemas na mesma ordem (nesse exemplo, uso a / para oferecer mais de uma solução):

• Deixar texto com cor preta / Escurecer o fundo
• Colocar uma rápida descrição do que se trata o site no topo / Evidenciar o link “Sobre”
• Colocar o link “Home” no menu
• Criar uma caixa de busca rotulada “Busca” em um local específico do site
• Dar menos ênfase àquela imagem (que é o portfólio) / Deixar apenas uma chamada ao portfólio
• Remover o “Hot News Headlines” (que mostra as últimas do blog interno)

Faça tudo isso antes de começar a trabalhar no Photoshop ou desenhar rascunhos; com os problemas apontados e soluções oferecidas, o desenvolvimento do novo rosto do seu site vai ficar muito mais fácil.

Em tempo

Ando bem ocupado nessas últimas semanas com blog ficando fora do ar por problemas técnicos, novo emprego e vários serviços. Além disto, estou no processo de escrever um livro e atualizar o visual do Digital Paper. Eis um pequeno preview de como vai ficar:

Em breve, novidades e mais atualizações ;)

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Hierarquia visual de elementos
• Desenvolvendo sites para mobile
• Erros em web design que devem ser evitados
• Criando wireframes online
• Como lidar com projetos web? Parte 2

Encontrei um artigo intitulado “There is no fold“, que utiliza dados coletados pelo blog ClickTale em seu artigo “Unfolding the fold” (“Desdobrando a dobra”).

Mas antes de passar para os dados importantes, algumas explicações: web designers e profisionais de usabilidade vem debatendo o tópico sobre rolamento de páginas desde 1994. Nos primórdios da web, a maioria dos usuários não estavam familiarizados com o conceito de rolamento e não era algo natural a ser feito. Como resultado, web designers desenvolviam sites que mantinham todas as informações importantes “acima da dobra” ou pior: deixando o site inteiro na área inicial da tela. Esta prática de “compactação” (“squeezing“) continua até nos dias de hoje.

Hoje em dia, o rolamento de páginas se tornou uma prática natural quando se navega na web. Rolamento é também associado ao design estilo “web 2.0″ por causa do texto grande e limpo. E conteúdo espaçado e limpo implica em sites mais longos.

O post do ClickTale tem vários gráficos resultados de testes feitos para conferir quem rola a barra do site, e os resultados são previsíveis: 91% das páginas pesquisadas possuem barra de rolamento, 76% das pessoas rolaram a barra vertical até algum certo ponto, e 22% rolaram até o final da página.

Com isso, podemos tirar algumas conclusões:

• Não tente compactar seu site. Há pouco benefício em compactar suas páginas pois a grande maioria dos visitantes vai rolar a barra abaixo da “dobra da página” para conferir o site todo.
• Já que os usuários vão rolar a barra até o fim do seu site, facilite a vida deles e divida seu site em seções para facilitar o escaneamento de informações.
• Minimize a quantidade de texto escrito e maximize a quantidade de imagens; usuários geralmente não lêem textos – eles escaneiam sites.
• Dê algum encorajamento a seus usuários usando um layout dividido com informações semelhantes juntas.

Facilite a vida do usuário O importante é facilitar o usuário a encontrar as informações que ele precisa – informações imperativas para que ele entenda do que se trata o site. Por exemplo, aqui no Digital Paper você encontra o logo (“Digital Paper”) e em seguida, uma descrição do assunto tratado (“design gráfico e web design”). Só depois que o texto aparece. Agora imagine se tudo estivesse “acima da dobra”?

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como fazer avaliações heurísticas em sites
• Hierarquia visual de elementos
• Re-desenhando um site (dica)
• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1