Usabilidade, Faça jus ao seu projeto

Salve, salve!!

Peço permissão aos moderadores para falar um pouco sobre usabilidade na web. Nosso maior intuito neste ambiente é compartilhar idéias, conhecimentos, experiências entre outros… contudo vaí aí algumas informações que podem ser úteis para nós desenvolvedores (seja ele iniciante, intermediário ou avançado). O objetivo é mudar comportamentos e fazer com que a usabilidade faça parte de seus futuros websites.
Como webdesign, quero poder oferecer um melhor serviço aos usuários, por isso espero que você também se sinta pronto para agir em seu projeto de design. As maneiras que podem ser tomadas para tornar a vida dos usuários mais felizes são várias. Você poderá utilizar métodos e técnicas de usabilidade, pois muitos são extremamente fáceis de aprender. Além de obter melhorias no seu site estará contribuindo para que os usuários voltem a visitá-lo.
Infelizmente a maioria dos webdesigners ignoram totalmente a usabilidade e criam designs para seu bel prazer ( ou pior, para o prazer do chefe) ao invés de satisfazer as necessidades do usuário.

Que vença a simplicidade!!

POR QUE A USABILIDADE NA WEB?

A usabilidade assumiu uma importância muito maior na economia da Internet.
No desenvolvimento de produto físico tradicional, os clientes só experimentavam a usabilidade quando já tinham comprado e pago. Digamos, por exemplo, que você compre um vídeo cassete e descubra que é difícil acertar a hora, além de não conseguir como programar a gravação de seus programas favoritos. Azar o seu – o fabricante ri enquanto sua conta bancária cresce.

A web não funciona assim. Ela inverte esse quadro. Atualmente, os usuários experimentam a usabilidade de um site antes de se comprometeram a usá-lo e antes de gastarem dinheiro em possíveis aquisições. Vejam como é simples a equação:

:: No projeto de produto e de software, os clientes pagam primeiro e experimentam a usabilidade depois.
:: Na web, os usuários experimentam a usabilidade primeiro e pagam depois.

Fica bem claro por que a usabilidade é mais importante para o webdesign.

CSS E A USABILIDADE

É impossível falar de usabilidade e não falar de CSS. As folhas de estilo em cascata são apenas uma das maiores esperanças de recapturar o ideal da web de separar apresentação e conteúdo. A web é o máximo em termos de sistema multiplataformas e seu conteúdo será apresentado em uma variedade tão grande de dispositivos que as paginas devem especificar o significado das informações e deixar os detalhes da apresentação a uma intercalação (ou “cascata”) de folhas de estilo especificadas pelo site e às preferências do usuário.

Em suma, CSS e usabilidade resulta em simplicidade, a qual deve ser a meta do design da página. Com exceção de nós (desenvolvedores) os usuários raramente encontram-se em um site para desfrutar do design; em vez disso, preferem concentrar sua atenção no conteúdo. É também importante garantir que as páginas sejam perfeitamente visualizadas em uma série de plataformas e que possam ser acessados por pessoas que usam tecnologia antiga.
Garanta que todas as páginas funcionem em browsers e versões de dois anos de idade de todos os plug-ins e outros softwares.

NO FRAMES (ou não use quadros)

A primeira recomendação com respeito a quadros é:
Quadros: diga não.
As pessoas que realmente sabem o que estão fazendo podem às vezes usar quadros para obter um bom efeito, embora até mesmo os designers experientes sejam aconselhados a usar quadros o mínimo possível.
Se insistir no uso de quadros apesar de meu conselho para que faça o oposto, pelo menos forneça uma versão sem quadros para os vários usuários que preferem evitar quadros. Em particular, o conteúdo alternativo pode ser fornecido em uma seção <NOFRAMES> que será exibida aos usuários que desativaram as quadros ou que usam um browser que não ofereça um suporte a quadros.
A versão 2.0 do Netscape foi o primeiro browser a oferecer suporte aos quadros, mas o fez de uma forma terrível, introduzindo um dos piores problemas de usabilidade encontrado na web até agora: o botão Voltar no browser simplesmente não funcionava com os sites com quadros.

Portanto, quebrar o botão Voltar é nada mais nada menos que uma catástrofe em termos de usabilidade.
Felizmente, quase ninguém mais usa o Netscape 2.0; foi um verdadeiro desastre.

O DESIGN DO CONTEÚDO: Mantenha os textos breves

Uma pesquisa mostrou que ler da tela do computador é cerca de 25% mais lento do que ler do papel. Mesmo os usuários que desconhecem essas pesquisas sobre fatores humanos geralmente dizem que sentem desconforto ao lerem texto on-line. Como resultado as pessoas não querem ler muito texto das telas de computador. Portanto, deve-se escrever 50% menos texto – não apenas 25% menos – pois não se trata apenas de velocidade de leitura, mas de uma questão de conforto. Sabemos também que os usuários não gostam de rolar a tela: mas uma razão para manter a brevidade das páginas.
Já que é tão custoso ler texto em telas do computador e já que a experiência on-line parece fomentar uma certa dose de impaciência, os usuários tendem a não ler totalmente fluxos de texto. Invés disso, passam os olhos pelo texto e escolhem palavras-chave, sentenças e parágrafos de interesse enquanto pulam as partes de texto que menos lhe interessam.

Com relação aos títulos de página, em HTML, cada página tem um título especificado na seção de cabeçalho. É importante especificar bons títulos de página, pois os títulos são muitas vezes usados como a principal referencia às páginas. Os títulos de páginas também são usados em muitos menus de navegação como listas de Boockmarks e listas de históricos.

Concluindo, o conteúdo é o foco de atenção do usuário da web. É a razão dos usuários se conectarem e é a primeira coisa que olham quando carregam uma página. O conteúdo de qualidade é um dos dois determinantes mais importantes da usabilidade da web o outro é se os usuários podem achar a página que desejam.

ANIMAÇÃO

As imagens em movimento têm um efeito indiscutível na visão periférica humana. Alguns usuários dizem que acham as animações legais ou indicam que houve muito trabalho de design de site. As animações podem, portanto, ter uma função semelhante às colunas de mármore nos bancos: demonstrar visivelmente o status e a afluência. No entanto, a maioria dos usuários diz que ficam irritados com as animações. Em particular, quase todos os usuários detestam textos em movimento e marquees.
Segundo Jakob Nielsen, a animação é boa para sete finalidades, são elas:
:: Mostrar continuidade nas transições
:: Indicar dimensionalidade nas transições
:: Ilustrar a mudança no tempo
:: Multiplexar o monitor
:: Enriquecer as apresentações gráficas
:: Visualizar estruturas tridimensionais
:: Chamar atenção.

No caso de “chamar atenção” o texto deve ser desenhado por uma animação não-repetível (por exemplo, um texto que desliza da direita para a esquerda, aumentando a partir do primeiro caractere ou crescendo suavemente) e nunca por uma animação continua, pois é muito mais difícil ler texto em movimento do que texto estático. O usuário deve ser atraído ao texto novo pela animação inicial e depois deve se deixá-lo em paz para ler o texto sem outras distrações.

Vá com calma com as animações em seu projeto, pois o feitiço da animação virar contra o feiticeiro.

A WebTV

O futuro está ai e não podemos esquecer disso. A web provocou a introdução de um dos primeiros aparelhos de informação na forma da WebTV em 1996. Antes, a WebTV não era um grande produto sendo de certa forma uma decepção em termos de venda. Na verdade, a WebTV é um produto irado em termos de usabilidade e design. Nos dias atuais com a chagada das telonas em plasma pode se dizer que a qualidade está cada vez mais agradável, e ficar sentado interagindo com a Internet é mais empolgante.

Ao criar para a WebTV para que respeitem os usuários é preciso seguir as seguintes diretrizes:
:: Não utilizar imagens grandes (mais de 544 pixels de largura ou 376 pixels de altura) a menos que ainda funcionem após o redimensionamento automático da WebTV para a área de viso disponível;
:: Reserve o uso de imagemaps para os casos absolutamente necessários;
:: Não inclua texto nas imagens pois os caracteres serão de difícil leitura na tela;
:: Não use um layout com várias colunas, se seu design exigir colunas, use no máximo duas colunas e garanta que funcionem em uma tela de 544 pixels de largura;
:: Divida as informações em um espaço de hipertexto rico com um número maior de nós menores;
:: Se possível faça com que cada unidade seja suficientemente pequena para que caiba em uma única tela da WebTV a fim de eliminar a rolagem;
:: Brevidade: escreva menos texto.

ACESSIBILIDADE PARA USUÁRIOS PORTADORES DE DEFICIÊNCIA

A legislação americana para portadores de deficiências e as leis e regulamentações semelhantes em outros paises muitas vezes exigem acesso igual a sistemas de computadores para os usuários portadores de deficiências. Em particular, haverá freqüentemente uma obrigação legal para facilitar o uso da intranet e Internet por funcionários e usuários deficientes que talvez não sejam capazes de realizar suas tarefas caso não possam acessar os websites da empresa.

Tornar a web mais acessível a usuários com varias deficiências resume-se, até certo ponto, a usar o HTML da forma pretendida: para codificar significado em vez de aparência. Desde que a página seja codificada para o significado, é possível que os browsers alternativos apresentem esse significado de formas otimizadas às capacidades de usuários individuais e, assim facilitem o uso da web por usuários deficientes.

Deficiências visuais
Os problemas de acessibilidade mais sérios, dado o atual estado da web, relacionam-se a usuários cegos e usuários com outras deficiências visuais, posto que a maioria das paginas da web é altamente visual.
Para aumentar a acessibilidade, garanta sempre um auto contraste entre as cores de primeiro e segundo plano e evite padrões de fundo confusos que interfiram na leitura. Qualquer coisa que reduza a legibilidade de seus textos é suficientemente irritante para os usuários com visão perfeita que definitivamente não gostam de ser retardados quando estão na web, mas fundos com texturas ou cores sutis podem ser a gota d´agua que faz com que sua página fique abaixo do limite de legibilidade para um usuário com visão parcial.

Para os desenvolvedores é importante lembrar que, para facilitar os usuários cegos ao passar os olhos no conteúdo, é recomendável enfatizar a estrutura da página através de marcações adequadas de HTML: use <H1> para o cabeçalho de nível superior, <H2> para as principais partes das informações dentro de <H1>, e <H3> e níveis inferiores para divisões ainda mais sutis de informação.

Assim, o usuário cego pode ter uma panorâmica da estrutura de uma página quando <H1> e <H2> forem lidos em voz alta e pode rapidamente pular uma seção desinteressante ao instruir uma leitura de tela a pular para o próximo cabeçalho de nível inferior.

Alem de tornar o texto legível, você também deve oferecer um método alternativo para “exibir” as imagens a pessoas vê-las. A principal solução a esse problema a essa altura é usar o atributo ALT.
Os usuários que não podem ver a foto verão ou ouvirão o texto alternativo “Nome da foto”.

Deficiências auditivas
É rara a situação em que o som é necessário para a compreensão; na maioria das vezes os efeitos sonoros na web são gratuitos – um dos poucos benefícios de design ruim, creio. A usabilidade de um site quase sempre continua a mesma quando o som é desativado, mas com a tendência crescente da multimídia, esse não continuara sendo o caso.

Independente da gratuidade do som ou de sua exigência pela multimídia, crie seu site tendo em mente um público com deficiências auditivas.

Deficiências de fala
No momento, não importa se o usuário da web é capaz de falar já que toda a entrada do computador é feita com um mouse e um teclado. É provável que as várias formas de interfaces com o usuário ativadas por voz fiquem mais populares no futuro para casos em que o uso do teclado seja incomodo ou apenas para oferecer suporte a usuários que prefiram falar os comando em vez de digitá-los.

Será muito mais problemático quando passarmos para interfaces nas quais a fala é a principal ou a única modalidade de entrada. Espero que a maioria dos sistemas de bate-papo logo se torne baseada na fala, já que esta é a forma natural de conversa para a maioria das pessoas.

Qualquer sistema de bate-papo que dependa da fala deve manter a possibilidade de participação de usuários não-falantes através de texto digitado.

Deficiências motoras
Muitos usuários têm dificuldade com movimentos detalhados do mouse e pode também ter problemas em pressionar várias teclas simultaneamente. A maioria dessas questões deve ser tratada por um melhor design de bowser e não deve preocupar os designers de conteúdo, exceto no que tange ao conselho de não criar imagesmaps que exijam o posicionamento extremamente preciso do mouse. Imagine que você tenha de deslocar seu mouse com os pés: leva muito tempo para chegar a um alvo pequeno.

Quaisquer applets que usem dispositivos de interação além do HTML padrão devem ser implementados a fim de permitir a operação sem o mouse. Esses recursos são incluídos como padrão tanto no Java quanto no ActiveX; portanto, é uma mera questão de implementar o código corretamente de acordo com as diretrizes oficiais da Sun Microsistems, Microsoft e outros fornecedores de ferramentas de software.

Deficiências cognitivas
Nos primeiros anos, a web era acessada era apenas por pessoas apenas muito inteligentes que eram pioneiras na tecnologia avançada. Mas, com a crescente popularidade da web, haverá mais usuários medianos e também usuários de inteligência abaixo da média. Para satisfazer esses usuários, será importante aumentar a usabilidade e garantir que o conteúdo seja compreensível em nível de leitura primária.

Uma forma simples de verificar muitos problemas de acessibilidade é acessar seu website em um browser apenas de texto como o Lynx. Se o site parecer bom e funcionar bem nesse browser, provavelmente será razoavelmente acessível para muitos usuários com deficiências.

Por último seria melhor realizar testes de usabilidade com uma série de usuários com várias deficiências, mas já que há tantos tipos diferentes de deficiências para atender, esse não é um conselho muito pragmático, exceto no caso de sites que atendam especificamente a usuários deficientes.

Fonte: Informações extraídas do livro “Projetando Web Sites de Jakob Nielsen”

SITES RELACIONADOS

Português
Usability
Usabilidade.com
Usabilidade Br
Webinsider >> Usabilidade
Usabilidoido
Blog de Usabilidade
Usabilidade Net
Fator W
Atípico
FechaTAG
Felipe Memória
Alexandre Sadi
Rodrigo Muniz

Inglês
Useit – Jakob Nielsen
Asktog
UsableWeb
Usability first

LIVROS lendo.gif

Português
Imagem do IPB
Usabilidade na Web
Mais informações e onde comprar

Imagem do IPB
Não me faça pensar
Mais informações e onde comprar

Imagem do IPB
Homepage: Usabilidade: 50 Websites Desconstruídos
Mais informações e onde comprar

Imagem do IPB
Projetando Websites
Mais informações e onde comprar

Imagem do IPB
Design para Quem Não é Designer
Mais informações e onde comprar

Imagem do IPB
Design e avaliação de interfaces humano-computador
Mais informações

Imagem do IPB
Design para a Internet: Projetando a Experiência Perfeita
Mais informações e onde comprar

Imagem do IPB
250 Segredos para Web Designers
Mais informações e onde comprar

Inglês
Usability Engineering (The Morgan Kaufmann Series in Interactive Technologies)
Mais informações e onde comprar

Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests
Mais informações e onde comprar

Lembre-se dos usuários ao projetar Websites

Texto original: http://forum.ievolution.com.br

Fonte: Informações extraídas do livro “Projetando Web Sites de Jakob Nielsen”

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s