Usabilidade

A preocupação com a usabilidade deve ser premissa incontestável para a Celepar no desenvolvimento de sistemas, sites e tecnologias móveis e deve ser considerada em todas as fases da construção de um projeto.

A usabilidade é um atributo de qualidade relacionado à facilidade do uso de algo. Mais especificamente, refere-se à rapidez com que os usuários podem aprender a usar alguma coisa, a eficiência deles ao usá-la, o quanto lembram daquilo, seu grau de propensão a erros e o quanto gostam de utilizá-la. Se as pessoas não puderem ou não utilizarem um recurso, ele pode muito bem não existir.

De acordo com a norma da International Organization for Standardization (ISO) 9241-11, a usabilidade é medida pela eficácia, eficiência e satisfação, conforme as seguintes definições:

  • Usabilidade: é a medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com eficácia, eficiência e satisfação em um contexto de uso específico.
  • Eficácia: acurácia e completude com as quais usuários alcançam objetivos específicos.
  • Eficiência: recursos gastos em relação à acurácia e à abrangência com as quais os usuários atingem objetivos.
  • Satisfação: ausência do desconforto e presença de atitudes positivas no uso de um produto.

A eficácia permite que o usuário alcance os objetivos iniciais de interação, que é tanto avaliada em termos de finalização de uma tarefa, quanto também em termos de qualidade do resultado obtido.

A eficiência se refere à quantidade de esforço e recursos necessários para se chegar a um determinado objetivo. Os desvios que o usuário faz durante a interação e a quantidade de erros cometidos pode servir para avaliar o nível de eficiência do site/sistema.

A satisfação é a mais difícil de medir e quantificar, pois está relacionada a fatores subjetivos. De maneira geral, satisfação se refere ao nível de conforto que o usuário sente ao utilizar a interface e qual é a aceitação na maneira de alcançar seus objetivos ao navegar no site.

Outras perspectivas:

Partindo-se da interação humano-computador, a usabilidade aborda a forma como o usuário se comunica com a máquina e como a tecnologia responde à interação do usuário, considerando-se as seguintes habilidades, de acordo com a norma ISO 9241:

  • Facilidade de aprendizado: a utilização do sistema requer pouco treinamento.
  • Facilidade de memorização: o usuário deve lembrar como utilizar a interface depois de algum tempo.
  • Maximização da produtividade: a interface deve permitir que o usuário realize a tarefa de forma rápida e eficiente.
  • Minimização da taxa de erros: caso aconteçam erros, a interface deve avisar o usuário e permitir a correção de modo fácil.
  • Maximização da satisfação do usuário: a interface deve dar-lhe confiança e segurança.

No contexto da Engenharia de Software, a usabilidade é englobada dentro da qualidade e visa a garantir uma parte da eficiência e da eficácia do sistema. A eficiência refere-se a uma interação produtiva entre o usuário e o sistema, o que permite a realização de tarefas com menor esforço sob uma experiência agradável. A eficácia pode ser entendida como a capacidade do sistema e da interface possibilitarem ao usuário a completude da tarefa e o alcance de seus objetivos no sistema.

Segundo Lev Vygotsky, teórico do ensino como processo social, o desenvolvimento cognitivo é entendido como referência ao contexto social no qual ocorre. Assim, o levantamento de instrumentos e signos pertinentes ao usuário/cliente é certamente um passo de assertividade para o desenvolvimento do projeto. Ou seja, é preciso levar em conta a experiência da pessoa, o que ela já sabe.

Nessa mesma linha de que a aprendizagem, compreensão e incorporação se dão com mais tranquilidade a partir do que já se sabe, esse entendimento impactará seguramente na redução de tempo e de custo em manutenção, suporte e treinamento. Os profissionais envolvidos em cada fase devem preocupar-se com as individualidades de seus clientes e considerar com atenção o contexto de utilização da tecnologia a ser desenvolvida.

Objetivos

A usabilidade busca assegurar que qualquer pessoa consiga usar um sistema e que este funcione da forma esperada. Em resumo, tem como objetivos a:

  • Facilidade de uso
  • Facilidade de aprendizado
  • Facilidade de memorização de tarefas
  • Produtividade na execução de tarefas
  • Prevenção, visando à redução de erros
  • Satisfação do usuário

A usabilidade permite ao usuário que um produto seja utilizado com propriedade, fidelizando-o pela facilidade de uso e resposta, dentro ou acima do esperado. Tratar a usabilidade no desenvolvimento de sistemas, sites e tecnologias móveis se faz essencial. Além da busca pela melhoria da relação custo e benefício, atender à satisfação do usuário se traduz em produzir interfaces consistentes, em altos padrões de qualidade, capacitando-as a resultados positivos.

 
Usabilidade de sistemas
 
Projeto centrado no ser humano

Um sistema orientado para a usabilidade possui uma interface que deve ser usada para se executar uma tarefa sem chamar nenhuma atenção para si, de modo a permitir que os usuários não precisem focalizar a sua energia na interface, mas apenas no trabalho que eles desejam executar. Isso permite que a informação flua naturalmente. Assim, as interfaces devem ser projetadas visando a atender às necessidades e expectativas dos usuários, permitindo que eles direcionem a sua atenção para os objetos com os quais trabalham diretamente e que devem refletir o mundo real do trabalho deles.

A falta de softwares de sistemas de informação bem projetados do ponto de vista de suas interfaces com os usuários tem sido responsável por perdas de diversos tipos. Uma interface mal projetada pode causar danos graves e dificuldades na execução do trabalho. Mesmo assim, poucas organizações consideram esse fator quando estão planejando as suas aplicações.

 
Interação humano-computador

A interação deve surgir a partir da interface com o usuário, já que o sistema deve se adaptar aos usuários para agir de forma cognitiva. A interface deve ser um fator de inclusão nesse processo do conhecimento.

A tecnologia ganhou um espaço imprescindível. Portanto, são necessárias a interpretação e, consequentemente, a atualização dos sistemas conforme a cultura do homem. Os sistemas de informação devem ser desenvolvidos de forma cognitiva, para que os usuários possam executar as tarefas como se fossem simples. Não deve haver dúvidas ao executar tarefas.

As áreas de uma interface precisam ser bem definidas, para proporcionar uma boa interação humano-computador. Cada dúvida que surge na navegação distrai a atenção do usuário da tarefa executada e, quando acumuladas, podem confundi-lo. Toda a solução visual deve ser bem clara para a percepção do usuário, a fim de acelerar o processo de navegação e tornar o sistema bem mais funcional e intuitivo. Portanto, deve existir essa preocupação entre os diálogos e ações entre homem e máquina.

O que fazer:

  • Entenda os sistemas de informação de forma abrangente, em seus diferentes níveis: informal, formal e técnico.
  • Considere a diversidade de contextos e situações de uso.
  • Valorize a diversidade de usuários em suas capacidades perceptuais, cognitivas e motoras.
  • Recorra explicitamente à participação dos usuários em espaços colaborativos de design – na concepção, na proposição e na avaliação dos sistemas.
 
Consistência e padrões

A consistência é uma das principais características para a usabilidade de uma interface. Ela reduz a frustração provocada por comportamentos inesperados e logicamente incompreensíveis do sistema. Além disso, permite que uma pessoa generalize o conhecimento de um aspecto do sistema para os outros. Para ser consistente, é necessário que os menus, comandos de entrada, exibições de informação e todas as funções de uma interface possuam a mesma apresentação visual e o mesmo comportamento.

O que fazer:

  • Utilize sequências consistentes de ações em situações similares.
  • Use terminologia idêntica em prompts, menus e telas de ajuda.
  • Ofereça atalhos aos usuários experientes.
  • Envie feedbacks informativos.
  • Apresente as etapas do processo.
  • Ofereça uma forma simples de correção de erros.
  • Permita fácil reversão de ações.
  • Projete o sistema para deixar os usuários como iniciadores das ações em vez de reagentes.
  • Reduza a carga de memória curta do usuário.
  • Mantenha apenas as informações úteis, diretas e claras: o diálogo do sistema com o usuário não deve conter informações desnecessárias.
  • Forneça ajuda documentada, em caso de necessidade.

O que evitar:

  • Comportamentos inesperados.
  • Uso de diversos nomes para um mesmo assunto.
  • Uso de um mesmo ícone para funções diferentes.
 
Qualidade em uso

A qualidade em uso visa a cobrir não apenas a facilidade de uso, mas também as funcionalidades e o suporte apropriado às atividades de uso em cenário real. É considerado não somente a visão do usuário, mas do contexto de uso em ambiente de trabalho.

Qualidade em uso é um termo cunhado em meados da década de 1990 por Nigel Bevan e incorporado à norma ISO/IEC 9126, originalmente se referindo à qualidade de software. Ela estende a caracterização da qualidade e ergonomia de software contida em determinadas normas ISO, englobando o contexto do ambiente de trabalho para identificar a satisfação de uso, focando não apenas o usuário, mas o seu comportamento ao interagir com um sistema computacional. A qualidade interna (propriedades do código) e a qualidade externa (comportamento do software durante a execução) influenciam a qualidade em uso e estão contidas nela. Dessa forma, tem-se a percepção da qualidade verificada por meio do uso.

Objetivos da qualidade em uso:

A qualidade em uso tem como principal objetivo a avaliação de como o software atende às necessidades dos usuários. É analisada sob quatro características:

  • Eficiência: capacidade do produto de software de permitir ao usuário atingir metas específicas como completude, em um contexto de uso específico
  • Produtividade: capacidade do produto de software de permitir que seus usuários empreguem quantidade adequada de recursos em relação à efetividade alcançada em um contexto de uso específico
  • Segurança: capacidade do produto de software de apresentar níveis aceitáveis de riscos de danos a pessoas, negócios, software, propriedade ou ambiente em um contexto de uso específico
  • Satisfação: capacidade do produto de software de satisfazer usuários em um contexto de uso específico
 
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 para usuários avançados.

Tomar atalhos, entender abreviações, ler texto rápido, passar telas com um leve movimento dos dedos são ações muito comuns para a maioria das pessoas. Este tipo de eficiência torna a experiência muito mais prática e satisfatória. O que uma interface de dispositivo móvel necessita para ter esse benefício é a ergonomia, a compreensão do funcionamento do usuário, tanto cognitivo quanto tátil. Uma vez que o sistema é intuitivo o bastante, ele auxilia tanto os leigos, que nunca tiveram acesso a ele, quanto aos mais avançados, que conseguem facilmente acessar as informações necessárias com um breve combinado de comandos.

O que fazer:

  • Centre no usuário o design de seu sistema.

 

 
Usabilidade de soluções web
 
Página inicial

A página inicial deve deixar claro qual é o objetivo do site, as informações e serviços nele disponíveis. A inicial não é como as outras páginas – ela tem fardos diferentes para carregar e promessas diferentes a cumprir. Às vezes, conforme o perfil do público-alvo, não haverá navegação fixa nela, no padrão que apresenta cabeçalhos com logomarcas e menus na vertical ou horizontal, e serão necessários rótulos e design diferenciados.

 
Ver exemplo
Exemplo de identificação do site

 

Considere o usuário, com todas as suas especificidades de maior ou menor conhecimento em informática, escolaridade, faixa etária e frequência de utilização, e oferte a ele o maior nível possível de autonomia, porém sem a expectativa de que, a partir da utilização de seu produto, ele se torne um usuário avançado.

Lembre-se que a velocidade é o conceito que guia as ações do usuário. Ele deve saber sobre o que fala ou o que seu site oferece em poucos segundos. Também deve entender por que deve permanecer navegando em seu site ou sistema com rapidez, senão irá procurar outro lugar.

Não exija um registro, a menos que seja necessário. Ao navegar, o usuário busca obter informações e não o contrário. Não o obrigue a registrar-se ou deixar seu endereço de e-mail e outros detalhes, a menos que seja absolutamente necessário.

O que fazer:

  • Crie uma hierarquia visual clara na página, dividindo-a em áreas bem definidas. As coisas devem ser “aninhadas” visualmente, para mostrar o que faz parte de quê.
  • Dê nomes óbvios às coisas: “Empregos” não é “Emp” nem “Oportunidade de Emprego”.
  • Se for necessária uma tela de abertura, forneça opção de navegação que permita pulá-la.
  • Inclua título na janela no navegador.
  • Forneça um meio de comunicação com o proprietário do site (por exemplo: Fale Conosco, e-mail, telefone ou endereço). E, ainda, informe ao usuário quando uma resposta lhe será enviada.
  • Reduza o peso da página inicial. Os elementos que a compõem, como imagens, textos e código, devem ser leves, para que o tempo de carregamento seja o menor possível. Do contrário, se o peso ultrapassar 100kb, pode significar a desistência da visita do usuário, que não irá aguardar o tempo de carregamento.

O que evitar:

  • Telas de abertura desnecessárias, como as que têm abertura em Flash, a menos que elas forneçam ao usuário conteúdo útil ou feedback sobre o estado da aplicação.
 
Navegação

A navegação não é apenas um recurso do site, ela é o site. Portanto, deve:

  • Ajudar a encontrar o que se procura.
  • Dizer onde se está e como usar o site.
  • Apresentar o que o site contém, seguindo uma hierarquia.
  • Transmitir confiança nas pessoas que construíram o site.

As convenções de navegação na web especificam a aparência e a localização dos elementos do site, para que se saiba o que e onde procurar. Colocá-las num lugar padrão permite localizá-las rapidamente, com o mínimo de esforço. Padronizar sua aparência torna fácil sua distinção no todo.

O que fazer:

  • Identifique o site em todas as páginas. Utilize a logomarca ou o nome do proprietário do site. Recomenda-se utilizar a área superior à esquerda para a identificação.
 
Ver exemplo
Exemplo de identificação do site
  • Inclua um meio de busca.
 
Ver exemplo
Exemplo de identificação do site

 

  • Inclua um menu para os links das seções principais do site. Recomenda-se utilizar a área lateral à esquerda para menus extensos.
 
Ver exemplo
Exemplo de identificação do site

 

  • Inclua um link para a página inicial (home page).
 
Ver exemplo
Exemplo de identificação do site

 

  • Inclua links para elementos importantes que não fazem parte da hierarquia do conteúdo, o que vai variar conforme o tipo de site. Exemplos: Ajuda, Mapa do site, Carrinho de compras, Fale Conosco etc.
  • Inclua botões de navegação com opções “voltar/próximo” ou outras que sejam necessárias, separadas do botão “voltar” do navegador.
  • Inclua “rastros”, também chamados “migalhas de pão” ou “placas de rua”, pois mostram ao usuário onde ele está. Serve para facilitar a localização do usuário no site, principalmente naqueles sistemas de informação mais complexos, com nível hierárquico profundo.
 
Ver exemplo
Exemplo de identificação do site

 

  • Se necessário, no caso de sites com muitos conteúdos, inclua "nuvem de tags", que, se bem utilizada, é um recurso rápido e poderoso de busca no site.
 
Ver exemplo
Exemplo de identificação do site

 

O que evitar:

  • Deixar de incluir um botão "voltar" na página do site. Não é recomendável depender do botão "voltar" do navegador.
  • Precisar da rolagem horizontal da tela. Observe o uso de textos, imagens ou tabelas que fiquem mais largas que a janela, forçando a rolagem.
  • Abrir janelas desnecessárias. A abertura de novas janelas pode distrair, confundir ou impedir os usuários por diversos motivos:

- podem sobrepor-se à janela principal e esconder informação relevante;
- podem tornar mais difícil a compreensão da estrutura de navegação, com efeitos negativos, tanto para a usabilidade quanto para a acessibilidade;
- requerem ações adicionais do usuário para fechar as janelas indesejadas;
- causam irritação ao usuário, especialmente quando se trata de propaganda. O uso de janelas pop-up (janelas que abrem instantaneamente ao abrir um site) é uma forma de publicidade negativa, pois cria repulsa no utilizador.

  • A exceção para utilizar nova janela é quando o link leva o usuário para um outro site. Nesse caso, o usuário saberá que está indo para outro lugar. Ou, então, quando é preciso abrir arquivos PDF, DOC, XLS etc.

Importância dos rastros (migalhas de pão)

Este item é importante, pois as pessoas não usarão seu site se não encontrarem um caminho, se não encontrarem o que procuram ou não descobrirem como o site é organizado. Algumas dicas para uma boa utilização dos rastros são:

  • Não utilizá-los em sites simples.
  • Colocá-los na parte superior da tela, abaixo da marca da empresa.
  • Utilize algum sinal que demonstre continuidade entre os itens (por exemplo, >)
  • Utilize tipografia em corpo pequeno.
  • Utilize duas linhas, quando necessário.

Nuvem de tags

A nuvem de marcadores (tags ou palavras-chave) é uma forma de navegação suplementar que incrementa a visualização com um tamanho de fonte referente à quantidade de citações ou número de requisições. É uma forma de apresentar os itens de conteúdo do site.

O resultado visual de uma nuvem depende da frequência com que os marcadores ou tags são repetidos, o que faz com que haja maior destaque para as repetições mais frequentes. Estes marcadores podem ser utilizados, também, como medidores estatísticos que ajudam a definir a qualidade de um diálogo de uma arquitetura de informação em termos de simplicidade, objetividade e eficiência.

 
Menu

Um menu eficiente deve ser capaz de informar, de forma imediata, se estamos no site ou no conteúdo desejado. O menu é uma lista em que cada item ou opção chama uma página, arquivo ou outro site. Muitas vezes, é pelo menu que o usuário entende a estrutura do site.

O que fazer:

  • Apresente de imediato o que a instituição ou empresa oferece.
  • Adote um critério de relevância para exibir uma ordem para os itens de menu – por exemplo, defina uma ordem hierárquica, como Institucional, Programas, Serviços etc.
  • Mantenha a mesma estrutura de menu em todas as páginas.
  • Permita ao usuário utilizar o menu como ponto de referência.
  • No caso de menus de anos, meses, cidades, estados ou assuntos categorizados, solicite o preenchimento ou uma lista para seleção, em vez de apresentar uma lista fixa muito grande, como, por exemplo, o nome dos 399 municípios do Paraná.
 
Ver exemplo
Exemplo de identificação do site

 

  • Padronize os rótulos, para que o usuário não precise elaborar a mesma lógica que você teve. Deixe que ele apenas a reconheça como facilitadora.

O que evitar:

  • Títulos muito extensos, pois a leitura de um menu é dinâmica.
  • Menus que abrem para a direita.
 
Ver exemplo
Exemplo de identificação do site

 

  • Siglas e abreviações. A utilização de siglas e abreviações deve ser sempre acompanhada da palavra por extenso ou acompanhada de texto explicativo, a não ser que seja algo já bastante difundido, como por exemplo IPTU, IPVA etc.
  • Menu com muitos níveis hierárquicos.
 
Ver exemplo
Exemplo de identificação do site

 

 

Rótulos de Menu

Rótulos nos sites são títulos que contêm a denominação dos assuntos abordados. O desafio na rotulação é manter uma consistência perfeita de definições ou nomenclaturas em todos os níveis de informação e navegação.
Para a escolha de rótulos, é preciso definir o contexto de informação que o site pode oferecer e então definir quais rótulos de menu podem traduzir essa ideia com transparência e naturalidade. Os rótulos devem ser atrativos e persuasivos, para fisgar o usuário e convencê-lo de que é preciso navegar pelo site.

O que fazer:

  • Utilize rótulos compreensíveis para o usuário. Para isso, é necessário compreender o usuário, entender seu contexto, suas rotinas. Quando o conjunto de usuários é eclético, a solução é definir a maior audiência e oferecer elementos que sejam familiares a essa maioria.
  • Seja direto com o usuário, para fazê-lo clicar e obter como retorno o que é esperado.
  • Faça rótulos informativos, concisos e, ao mesmo tempo, claros e descritivos a respeito do conteúdo por trás deles.
  • Utilize rótulos iguais para funções iguais.
 
Ver exemplo
Exemplo de rótulos iguais

 


O que evitar:

  • Rótulos enganosos, que causam confusão, mas parecem ter um significado claro. Dão ao usuário uma ideia clara de que seria levado ao lugar certo, mas não o faz, o que causa frustração e descrédito.
 
Ver exemplo
Exemplo de rótulo enganoso

 

 

  • Rótulos imprecisos, que não passam ao usuário nenhuma ideia do que significa ou para onde o levará.
  • Rótulos inconsistentes, que ocorrem quando a mesma página é referenciada de forma diferente. Se o usuário encontra diferentes denominações durante a navegação, pensará que estão sendo oferecidas novas informações. Embora pareça um problema insignificante, o resultado do uso de rótulos inconsistentes é fazer um bom site parecer pobre e confuso. O ideal é utilizar para o título da página o mesmo vocabulário do rótulo.
 
Ver exemplo
Exemplo de rótulos inconsistentes

 

  • O uso de jargões, que deve ser cautelosamente avaliado, bem como o uso de novos termos, que pode ser uma barreira de difícil aceitação pelos usuários.
 
Conteúdos

Os conteúdos podem ser compostos de imagens, textos, sons e animações. De forma geral, devem oferecer uma fácil leitura, por meio de linguagem coloquial, descontraída, direta, em parágrafos curtos, com espaçamentos entre eles, e uso de links oportunos.

O que fazer:

  • Estabeleça periodicidade de atualização e revisão das informações corporativas, porque esse é um processo que deve ocorrer sempre.
  • Segmente em função de seu público-alvo, se necessário.
 
Ver exemplo
Exemplo de segmentação de público

 

  • Subdivida conteúdos longos, anexe e resuma.
 
Ver exemplo
Exemplo de página com conteúdo longo

 

  • Fale sobre a história da organização, enfatize a prestação diferenciada de serviços, descreva a missão, valores, objetivos e visão.
  • No texto referente à organização, responda àss perguntas básicas: Quem é? O que é? O que faz? Como faz? Para quem faz? Onde faz?
  • Utilize linguagem simples e didática. O uso de termos e palavras técnicas dificulta o entendimento do usuário comum. O sucesso do site está na oferta da informação, sem demanda de esforço desnecessário do usuário.
  • Organize o conteúdo de forma que a informação central de sua página venha antes da necessidade de qualquer rolagem.
  • Utilize subtítulos, listas de marcadores, palavras-chave destacadas e parágrafos curtos.
  • Todas as páginas ou janelas de um site devem ser facilmente identificáveis como partes deste site – podem, por exemplo, ser marcadas com a logomarca da empresa.
  • Escreva para a web e não para impressão, mas forneça versões para ser impressas.
  • Se sua página tem link para download, acrescente as informações de formato e tamanho dos arquivos.
  • Deixe os textos sempre alinhados à esquerda. Por uma questão de acessibilidade, a apresentação dos textos deve ser com alinhamento à esquerda. Mesmo que o texto justificado possa parecer mais estético e agradável, ele gera problemas de leitura, principalmente para disléxicos, que encontram dificuldades na mudança de foco de uma sílaba à seguinte e não conseguem distinguir onde termina uma palavra e começa outra, quando o texto tem espaçamento diferente entre palavras. De acordo com a Associação Brasileira de Dislexia, este distúrbio atinge entre 5% e 17% da população mundial.

O que evitar:

  • Departamentalizar ou inserir siglas setoriais, pois os conteúdos devem trazer informações da organização em sua totalidade.
  • Escrever em excesso. Tente equilibrar o texto com informações claras, objetivas e completas. Omita palavras desnecessárias.
  • Esconder a informação no meio de slogans, banners e imagens, pois os usuários não têm tempo para ler tudo e desistirão de procurar a informação.
  • Utilizar neologismos ou outros modismos que podem não ser comuns a todos os usuários.
  • Inserir artigos nos títulos dos conteúdos.
  • Redigir textos vagos demais, que, em vez de estimular a curiosidade do usuário, eliminam a paciência dele.
  • Redigir textos densos demais, com terminologia burocrática e complexa.
  • Criar páginas com conteúdo longo.
  • Criar páginas sem conteúdo útil, como "em construção".
  • Privilegiar a quantidade em detrimento da qualidade da informação.
 
Fontes

A leitura em ambientes digitais é prejudicada devido à emissão de luz pelo meio. Portanto, para facilitar a leitura e evitar o cansaço, é recomendado que haja cuidado tanto com o contraste quanto com o tamanho das fontes utilizadas.

O que fazer:

  • Utilize folhas de estilo para controlar estilos de fonte e eliminar o elemento FONT.
  • Utilize fontes de tamanho adequado. Isto é essencial para garantir que usuários que não tenham uma visão perfeita consigam ler o texto.
  • Defina, no máximo, duas fontes para o trabalho, pois facilitam uma composição harmônica. Para o corpo do texto, utilize uma fonte básica, como Arial, Helvética ou Verdana. Para títulos, se necessário, é possível aplicar uma fonte mais elaborada.
  • Use fontes de tamanho pequeno apenas para informações de rodapé e de responsabilizações legais, que, geralmente, não são o foco do usuário.
  • Inclua um recurso de manipulação do tamanho de fonte. Permita que o usuário tenha liberdade para adaptar o tamanho do texto às suas necessidades, garantindo a idosos e pessoas com deficiências visuais legibilidade e conforto na leitura do texto.

O que evitar:

  • O uso de fontes pequenas no conteúdo, pois torna a leitura difícil e desconfortável.
 
Ver exemplo
Exemplo de fontes pequenas

 

  • Fontes com serifa para textos longos são adequadas apenas em aplicações com tamanhos grandes, pois estes tipos perdem a definição e legibilidade no monitor. Se for escolher uma fonte serifada, use Georgia, que tem mais legibilidade, pois foi criada especialmente para a leitura na tela. Ainda assim, prefira as fontes sem serifa.
 
Ver exemplo
Exemplo de fontes com serifa

 

  • Fontes com cores claras sobre fundos claros.
 
Ver exemplo
Exemplo de fonte cor clara

 

  • Fontes com cores escuras sobre fundos escuros.
 
Ver exemplo
Exemplo de fonte cor escura

 

  • Fontes decorativas. Utilize-as apenas quando for realmente necessário e nunca em textos longos.
 
Ver exemplo
Exemplo de fonte decorativa

 

  • Texto em itálico, pois torna-o menor e prejudica a leitura. Ainda que seja para citações de palavras estrangeiras ou para refrenciar a autoria de algum conteúdo, só a utilize se realmente houver necessidade. Pense que idosos e pessoas com deficiência visual encontrarão dificuldades para a leitura.
 
Ver exemplo
Exemplo de fonte em itálico

 

  • Excesso de texto em negrito. Um trecho em negrito chama a atenção para palavras-chave na frase, como se ela fosse falada mais alto. Porém, deve ser usado com cuidado. Sua aplicação é ideal em palavras isoladas em uma frase, pois uma frase inteira em negrito pode fazer que se perca seu valor retórico.
 
Ver exemplo
Exemplo de fonte em negrito

 

  • Excesso de texto com letras maiúsculas. Um texto com todas as letras maiúsculas deve ser usado somente em situações de muita ênfase, pois a estrutura retangular das letras dificulta e reduz a velocidade da leitura.
 
Ver exemplo
Exemplo de fonte em maiúscula

 

  • Mudança de cor do texto. Conforme a posição e o contraste com o resto do layout, uma pequena palavra pode chamar mais atenção que o negrito, que o texto inteiro, ou ainda pode ser confundido com links.
 
Links

São um fator chave no processo de navegação, pois usuários excluem links que foram infrutíferos em suas visitas anteriores. Por outro lado, podem rever as ligações úteis que encontraram no passado.

Links que representam a estrutura principal de navegação devem utilizar termos familiares ao usuário, com base em seu conhecimento geral, experiência prévia no domínio da aplicação ou experiência na utilização de outros sistemas.

O que fazer:

  • Altere a cor dos links visitados. Utilize cores diferentes para links visitados e não visitados. Quando os links visitados mudam de cor, orientam o usuário a não revisitar as mesmas páginas repetidamente.
  • Utilize cores que resultem em um bom contraste e que tenham proximidade entre a cor do link e o link visitado. Cores muitos diferentes podem confundir o usuário, especialmente em sites que apresentam títulos e imagens com cores variadas. Por exemplo, se o link é azul, o link visitado pode ser em outro tom de azul ou, então, uma outra cor próxima.
 
Ver exemplo
Exemplo de cores de links

 

  • Para links de conteúdos externos ao site (outros sites) ou para arquivos PDF, DOC etc, devem ser abertos em novas janelas, para que o usuário não perca a navegação já iniciada.
  • Priorize posicionar o link sempre em grupos de elementos de navegação.
  • Utilize com cautela símbolos gráficos ou ícones, para não correr o risco de não dar transparência ao negócio da instituição. O usuário precisa entender o que significa o link. Uma forma de minimizar a confusão na leitura de imagens ou ícones é oferecer dicas textuais associadas. Bons exemplos são links comuns e usados frequentemente, como o símbolo de um carrinho de compras em uma aplicação de comércio eletrônico ou ícones de redes sociais como Facebook, Twitter etc.

O que evitar:

  • Links quebrados, porque causam uma experiência ruim para o usuário e passam a impressão de que o site não é atualizado.
  • Links não funcionais. Não inclua links que levem a “páginas em construção”, que abrem sem conteúdo.
  • Links que não alteram a cor após ser utilizados.
  • Cores muito distantes, como, por exemplo, um link verde e um link vermelho para o visitado. Podem causar poluição visual, atrapalhando a compreensão do usuário em saber o que é link ou não.
  • A utilização de termos genéricos, como “ir”, “clique aqui”, “leia mais” ou "saiba mais", pois, para a navegação com leitor de tela, links deste tipo não descrevem o destino do link. Portanto, devem ser evitados. O ideal é que o próprio título do assunto seja o link, de modo que o usuário não precise navegar por todo o entorno para saber qual é a finalidade do link.
 
Ver exemplo
Exemplo de link com texto clique aqui

 

  • Elementos visuais que parecem ser links, mas que não os são.
  • Sublinhado em textos que não são links.
 
Banners

Devem ser utilizados para destacar ou facilitar o acesso às informações que são mais procuradas. Em sua maioria, são compostos por título, texto, imagem e legenda da imagem e não há por que repetir aspectos de uma informação em cada um dos elementos do destaque. Ou seja, se o título do destaque aborda um determinado dado sobre a informação, ela não deve se repetir no texto. Isso também não deve acontecer entre a imagem e sua legenda.

A atenção seletiva é muito poderosa e os usuários da web aprenderam a parar de prestar atenção em todos os anúncios que ficam no caminho de sua navegação, mas também ignoram legítimos elementos de design que parecem formas predominantes de publicidade. Portanto, a aplicação de banners deve ser cautelosa, adequada ao espaço possível que o site permitir, com a finalidade de evidenciar somente as informações mais importantes e que mereçam destaque.

O que fazer:

  • Quanto mais importante for alguma coisa, mais destacada ela deve ser.
  • Faça algo clicável parecer obviamente clicável; faça um link parecer um link; faça um botão parecer um botão.
  • Diminua a poluição visual (excesso de textos, cores e imagens).
  • Diminua a quantidade de elementos e seu contraste.
  • Se houver informações de focos diferenciados, o ideal será utilizar áreas físicas de destaque também diferenciadas.
  • No caso de vários banners, use formatos maiores, com anúncios “giratórios”.
 
Ver exemplo
Exemplo de cores de links

 

  • Utilize slogans claros, informativos e curtos. Bons slogans têm de seis a oito palavras, demonstram a diferenciação e um benefício claro, comunicando rapidamente o propósito do anúncio.

O que evitar:

  • Chamar muito a atenção, o que pode ser opressivo.
  • Palavras desnecessárias (devem ser omitidas).
  • Banners pop-up. O uso de pop-up não é indicado, pois os usuários o fecham antes mesmo da exibição do conteúdo.
  • Banners ilegíveis, com textos impossíveis de ler.
 
Ver exemplo
Exemplo de banner com texto ilegível

 

  • Banners animados, pois distraem o usuário e dificultam a percepção dos conteúdos ou da informação que de ele realmente precisa.
  • Inclusão de muitos banners no site. Excesso de banners pode causar a "cegueira de banners" – os usuários nunca fixam os olhos em qualquer coisa que se parece com um banner, devido à quantidade, forma ou posição na página.
 
Ver exemplo
Exemplo de banners no site

 

  • Que todos os elementos se pareçam com anúncios.
 
Ver exemplo
Exemplo de banners no site

 

  • Slogans ruins, que pareçam genéricos e vagos.
 
Formulários

É a forma usual de interação da organização com o usuário. Deve ter a funcionalidade de encaminhar com agilidade as mensagens de dúvidas, reclamações, sugestões, elogios e o que mais o usuário precise expressar em relação aos serviços oferecidos pela página que está visitando.

O que fazer:

  • Crie o formulário com texto objetivo.
  • Indique os campos obrigatórios ou opcionais sempre que não forem unanimidade.
  • Estruture em passos quando a quantidade de campos a ser preenchida for muito numerosa.
 
Ver exemplo
Exemplo de formulário em passos

 

  • Exemplifique o formato desejado. Por exemplo: em um campo para o CPF, informe “digite apenas os números”.
 
Ver exemplo
Exemplo de campo no formulário

 

  • Só deixe no campo o número de caracteres desejado.
  • Confirme o preenchimento correto.
  • Dê retorno no preenchimento de formulários, por meio de validação on-line.
 
Ver exemplo
Exemplo de campo no formulário

 

  • Informe prazo para resposta.
 
Ver exemplo
Exemplo de resposta

 

  • Comunique erros de formulário com contraste visual e indique também ações para correção, associando corretamente o campo responsável ao erro principal.
  • Quando possível, prefira alinhar os campos à esquerda.
 
Ver exemplo
Exemplo de alinhamento

 

O que evitar:

  • Aproximar botões de ação. Ações primárias e secundárias devem ser separadas, para prevenir erros. Ações como Salvar, Continuar e Enviar são consideradas primárias. Ações como Limpar, Cancelar e Voltar são consideradas secundárias.
  • Limpar o conteúdo do formulário inteiro por causa de um erro.
  • Obrigar o usuário a memorizar dados de uma página para utilizá-los em outra. Números de protocolo ou qualquer outro tipo de cadastro devem ser fornecidos e enviados em cópia por e-mail.
  • Contrastar cores de fundo. Mantenha uma cor única.
 
Ver exemplo
Exemplo de formulário com cores de fundo

 

  • Usar barra de rolagem na horizontal.
 
Ver exemplo
Exemplo de formulário com barras de rolagem

 

 

 
Notícias

São um importante canal de comunicação para informar ações e atualizar usuários. Portanto, a busca eficaz de notícias impacta instantaneamente no grau de satisfação do visitante,o que justifica um maior apuro no tratamento das informações, com indexação simples e organização por temas/assuntos/editorias.

O que fazer:

  • Reduza a carga de informação.
  • Diagrame o texto de forma que se facilite o entendimento da informação.
  • Leve em conta o conhecimento das pessoas que acessam o site.
  • Redija textos objetivos.
  • Focalize a atenção do visitante ao objetivo (serviço) da página.
  • Forneça data e hora da atualização.
  • Organize o arquivo de notícias de maneira estruturada, utilizando taxonomias pré-definidas e opção de busca. Para sites de Prefeituras, Governo Estadual e Federal, Agência de Notícias e outros com muita quantidade de notícia, o ideal é classificar por temas, como Finanças, Meio Ambiente, Segurança etc.
 
Ver exemplo
Exemplo de temas para notícias

 


O que evitar

  • Quantidade excessiva de notícias na página inicial. O excesso só é aceitável em sites especializados em notícias e comunicação, como o aen.pr.gov.br, folha.com, globo.com etc.
 
Ver exemplo
Exemplo excesso de notícias

 

  • Títulos de notícias muito longos e difíceis de ler on-line.
  • Área insuficiente ou pouco destacada para as notícias.
  • Falta de atualização permanente nessa área do site.
  • Arquivo de notícias sem opção de busca.
 
Busca

É a tábua de salvação do usuário quando a navegação falha. E tão importante quanto o serviço de busca é o resultado da pesquisa. Proporcionar possibilidades de utilizar filtros e refinar os resultados da busca demonstra preocupação com a satisfação do usuário e garante o consumo da informação. Mas usuários que sabem o que querem esperam resultados diferentes dos que não sabem o que procuram. A apresentação dos resultados, nesse caso, pode variar de informações simples e sem detalhes (título e autor, por exemplo) a informações completas (sumário descritivo sobre o conteúdo encontrado).

Filtros, classificações e refinamentos nos resultados de busca oferecem liberdade para aprofundar a pesquisa e ajudam a direcionar os resultados. O uso de símbolos para refinamento (?, * e !), operações booleanas (and, or, not), tesauros e buscas especializadas são recursos que, apesar de ser úteis, são pouco utilizados. Mais difícil ainda é encontrar esses recursos sendo utilizados conjuntamente.

Existem algumas formas clássicas de apresentação dos resultados: alfabética, cronológica, listados por relevância, por popularidade, exibidos de acordo com o perfil do usuário, por investimento no pagamento de propagandas... Por exemplo, uma opção de busca é fornecida para livros (título, autor), porque a navegação hierárquica iria requerer muito esforço, considerando que provavelmente o usuário possui alguma informação sobre o livro no qual está interessado.

O que fazer:

  • Deixe a busca disponível em todas as páginas.
  • Utilize um campo de busca grande o suficiente para exibir completamente uma pergunta comum.
 
Ver exemplo
Exemplo de identificação do site

 

  • No resultado da busca, auxilie a decisão do usuário, apontando e classificando informações, como área do site em que se encontra a informação, assunto ao qual se refere, data de publicação do conteúdo. E mantenha os parâmetros pesquisados.
 
Ver exemplo
Exemplo resultados de busca

 

  • Faça com que a função de busca retorne resultados úteis, mesmo que sejam digitados termos imprecisos ou incorretos. Ofereça um verificador ortográfico, em geral na forma de um link perguntando “Você quis dizer...”, com a proposta de ortografia correta.
 
Ver exemplo
Exemplo resultados de busca

 

  • Ofereça um atalho (link) para a busca avançada, pois facilita o acesso e reduz a carga de trabalho do usuário avançado, que já sabe o que deseja.
 
Ver exemplo
Exemplo resultados de busca

 

  • Exiba um número pequeno de resultados por página e deixe o usuário configurar listas maiores, pois os resultados apresentados estarão associados ao tempo de download do conteúdo e a resoluções utilizadas pelo usuário.
 
Ver exemplo
Exemplo resultados de busca

 

  • Inclua a busca preferencialmente no canto superior direito, de tamanho não menor que 27 caracteres, o que permite a visualização completa de cerca de 90% das buscas.
  • Permita que as funções de busca sejam adequadas aos objetivos e à expectativa do usuário.

O que evitar:

  • Que o acesso a determinados conteúdos específicos sejam impedidos pelas limitações/restrições da tecnologia usada na funcionalidade de busca.
  • Não incluir link para a busca avançada, especialmente em sites com muitos conteúdos, o que obriga o usuário a uma busca qualquer para poder ter acesso à busca avançada.
 
Ver exemplo
Exemplo resultados de busca

 

  • Retornar uma grande quantidade de informações, que pode causar um esforço desnecessário para a análise do resultado.

 

 

 
Usabilidade de soluções mobile
 
Projeto para uma web única

Se o seu projeto de conteúdo leva em conta os diferentes dispositivos, seus custos serão reduzidos, sua página será mais flexível e atenderá às necessidades de um número maior de usuários.

O que fazer:

  • Certifique-se de que o conteúdo que se obtém a partir de um endereço web (URL) traz as mesmas informações essenciais ao usuário, independente do dispositivo usado.
  • Aproveite os recursos dos dispositivos para proporcionar ao usuário uma experiência de navegação mais rica.
  • Tome as medidas convenientes para evitar problemas na implementação.
  • Teste em dispositivos móveis e emuladores.
 
Padrões web

Em um mercado tão fragmentado como o dos dispositivos e navegadores, os padrões são a melhor garantia de interoperabilidade.

O que fazer:

  • Crie documentos que sejam válidos conforme a sintaxe formal amplamente conhecida.
  • Envie o conteúdo em um formato que seja compatível com o dispositivo.
  • Sempre que possível, envie o conteúdo no formato desejado pelo usuário.
  • Certifique-se de que a codificação de caracteres do conteúdo é compatível com o dispositivo.
  • Indique a codificação de caracteres que se está utilizando.
  • Utilize folhas de estilo para controle de layout e apresentação, a menos que o dispositivo não os aceite.
  • Garanta que suas mensagens de erro sejam informativas e permitam regressar ao conteúdo anterior.
 
Riscos conhecidos

Um desenho bem planejado ajuda a reduzir os problemas de usabilidade causados por telas e teclados pequenos ou características dos dispositivos móveis.

O que evitar:

  • Janelas pop-ups
  • Tabelas aninhadas
  • Layout com tabelas
  • Imagens de espaçamento
  • Frames
  • Imagens mapeadas
 
Limitações dos dispositivos

Quando escolher uma tecnologia web em particular, tenha em conta que varia muito a capacidade dos dispositivos móveis em suportá-la. Para além dos desafios de interoperabilidade e baixo poder de processamento, existem outras limitações a ser consideradas.

O que fazer:

  • Organize seus documentos de forma que seja possível lê-los sem folhas de estilo.
  • Certifique-se de que a informação apresentada em cores também pode ser vista sem cor.

O que evitar:

  • Cookies: não conte com a plena disponibilidade de cookies.
  • Objetos ou scripts: não dependa dos objetos ou scripts integrados.
  • Tabelas: sempre que possível, utilize alternativas à apresentação tabular.
  • Tipos de letra: é arriscado confiar na disponibilidade de suporte a todos os tipos.
 
Navegação

A simplificação da navegação e do uso do teclado são fatores essenciais quando se utilizam telas e teclados pequenos e se tem uma largura de banda limitada.

O que fazer:

  • Concentre a navegação na parte superior da página e a reduza ao mínimo.
  • Utilize mecanismos de navegação consistentes.
  • Identifique claramente o destino de cada link.
  • Indique o formato do arquivo do destino, a não ser que saiba com segurança que o dispositivo é compatível.
  • Associe teclas de acesso rápido aos links nos menus de navegação e nas funções mais utilizadas.

O que evitar:

  • URLs longas
  • Muitos links em uma página
  • Direcionamento para outro site ou página
 
Gráficos e cores

As imagens, as cores e o estilo dão destaque ao conteúdo, porém existem dispositivos com telas de baixo contraste ou com problemas de compatibilidade com alguns formatos.

O que fazer:

  • Redimensione as imagens no servidor se ela tiver um tamanho intrínseco (por ex.,bitmap).
  • Especifique o tamanho da imagem na marcação.
  • Forneça um equivalente em forma de texto para cada elemento não textual.
  • Certifique-se de que haja suficiente contraste entre cor de fundo e de primeiro plano.
  • Confirme que o conteúdo continua legível no dispositivo móvel no caso da utilização de imagem de fundo.

O que evitar:

  • Imagens que não podem ser mostradas no dispositivo – grandes ou de alta resolução.
  • Medidas em pixels ou unidades absolutas nos valores dos atributos de linguagem de marcação.
 
Tamanhos reduzidos

Um site de tamanho reduzido resultará em economia de tempo e dinheiro para os usuários.

O que fazer:

  • Utilize uma marcação concisa e eficaz.
  • Certifique-se de que o tamanho total de página é apropriado para as limitações de memória do dispositivo.
  • Utilize folhas de estilo pequenas.
  • Limite a rolagem de tela a uma só direção.
 
Economia do uso da rede

As funções dos protocolos web podem melhorar a experiência do usuário, ao reduzir os gargalos e o tempo de espera na rede.

O que fazer:

  • Reduza ao mínimo o número de links externos.
  • Forneça informações para a cache nas respostas HTTP.

O que evitar:

  • Páginas com atualização automática e periódica, a não ser que tenha informado o usuário e que esse possa desativá-la.
  • Marcação para redirecionar páginas automaticamente.
 
Entrada de dados

Nos dispositivos móveis, os teclados e outras maneiras de entrar com dados podem ser desconfortáveis para o usuário. Um projeto adequado minimiza as dificuldades.

O que fazer:

  • Reduza ao mínimo o uso do teclado.
  • Forneça valores pré-definidos para ser usados.
  • Crie uma ordem lógica no uso de links, controles de formulários e objetos.
  • Rotule adequadamente todos os controles de formulários com a marca <label>, associando-os explicitamente.

O que evitar:

  • Que o usuário tenha que entrar com texto.
 
Usuário da web móvel

Os usuários da web móvel necessitam de informação resumida porque dispõem de pouco tempo e, simultaneamente, se ocupam de muitas outras coisas.

O que fazer:

  • Escolha um título para a página que seja curto, mas autoexplicativo.
  • Utilize linguagem simples e clara.
  • Certifique-se de que o conteúdo relevante da página seja apresentado primeiro.
  • Verifique se o conteúdo está adequado para ser usado em um dispositivo móvel.
  • Divida as páginas em seções utilizáveis, mas de tamanho limitado.