Arquivo da categoria: Usabilidade na internet

Usabilidade para desenvolvedores front-end

A usabilidade possui diversos critérios a serem trabalhados durante todo o processo de desenvolvimento de uma interface, mas no dia-a-dia podemos melhorar a experiência do usuário através de pequenos detalhes.

A usabilidade é uma qualidade das interfaces que caracteriza a facilidade de uso. Várias diretrizes sobre usabilidade de interfaces web foram desenvolvidas ao longo dos últimos 15 anos e o interesse em proporcionar interfaces de fácil utilização tem crescido entre designers e desenvolvedores.
Entre as várias diretrizes de usabilidade, os princípios convergem para a seguinte tríade:

  • Fácil de usar: o uso da interface deve ser intuitivo, com recursos de fácil reconhecimento e elementos que não dificultem a navegação, leitura, interpretação, clique, etc.
  • Fácil de aprender: uso de termos, ícones, padrões de interface e recursos de ajuda que possibilitem novos usuários reconhecer e facilmente aprender como utilizar a interface. Consistência é fundamental neste quesito.
  • Fazer com que o usuário não cometa erros: neste quesito entram entram dicas, ajuda, validação, boas mensagens de erro e outros recursos que possam prevenir a ocorrência de erros e ajudar o usuário na correção dos mesmos.

Mas, na prática, como podemos implementar estes princípios? Neste artigo apresento algumas dicas simples de usabilidade que podemos praticar efetivamente durante o rotina de desenvolvimento do HTML e do CSS.

Facilitando a leitura com line-height

Um espaçamento adequado entre linhas permite que as pessoas possam ler um texto com maior facilidade e mais rapidamente. O espaçamento não pode ser muito reduzido, pois pode deixar o texto “amontoado”, nem muito extenso, caso contrário as pessoas terão dificuldade de encontrar a próxima linha.
Particularmente recomendo utilizar espaçamento de 1.5 relativo ao tamanho da fonte, ou seja, se você utilizar fonte de 12px, o espaçamento entre as linhas será de 18px. No CSS, controlamos o espaçamento entre linhas com o line-height.

Utilize margins e paddings para distinguir itens

Espaços em branco entre os elementos da página podem ser usado a favor da usabilidade e também da arquitetura de informação do seu site. Creio que muitos já devem ter passado pela situação de alguém falar o seguinte a respeito de um site que você fez: “Ah, mas esse conteúdo X não tem a ver com o Y? É porque estava tudo junto então achei que tinha a ver”.
Os espaços entre itens permite identificar quais elementos estão relacionados e quais são distintos. Portanto, utilize margin e/ou padding mais generosas para afastar elementos que sejam distintos e aproxime os elementos que estejam relacionados, evitando erros de interpretação e mesmo de utilização de alguns recursos presentes na página. Isto serve principalmente para:

  • Estabelecer relação entre títulos e texto
  • Identificar rótulo de formulário e o campo a qual ele se refere
  • Imagens e o respectivo conteúdo textual
  • Páginas que tenham múltiplos formulários ou outros recursos com botões de ação que possam fazer com que o usuário clique em um determinado botão pensando ser relativo a outro recurso

O logo deve ser clicável

Por uma convenção que foi sendo consolidada ao longo do anos, os usuários tendem a clicar no logotipo para retornar à página inicial e é frustrante quando isso não ocorre, pois já é uma ação que o usuário espera ao clicar no logo. Independente do logo ser uma imagem ou um background dentro de uma outra tag, deve-se colocar um link para a página inicial do site.

Textos que não são links não devem ser sublinhados

Atualmente, nem todo link precisa estar sublinhado para transmitir a ideia de link, mas todo texto sublinhado ainda transmite a ideia de link. É intuitivo o usuário clicar em uma palavra sublinhada esperando acessar uma página (imagine então se, além de sublinhado, o texto estiver em azul, como já vi em alguns lugares). Portanto, é aconselhável que, para dar ênfase em palavras nos textos, sejam utilizadas as tags strong, em que já têm essa função.

Atributos “alt” e “title” para imagens

O atributo alt para a tag img tem a função de fornececer um texto alternativo caso a imagem não seja carregada ou caso um browser leitor de tela esteja analisando o conteúdo da página. Por isso, é importante que este texto tenha uma boa descrição sobre o conteúdo da imagem. Mas em algumas imagens é interessante que ela não somente tenha um texto alternativo, mas que também exiba uma dica descritiva da imagem ao passar o mouse sobre ela. Isto é muito útil, por exemplo, ao utilizar ícones que indiquem ações, status ou representem link para algum conteúdo sem o uso de um texto descritivo junto à imagem. Para isso, podemos utilizar o atributo title do HTML.

Associando label à campos de formulário

A tag label serve para associar um rótulo a um campo de formulário. Mas muitos desenvolvedores esquecem de realizar essa associação através do atributo for, que deve remeter ao id do campo de formulário.
A principal vantagem dessa associação é permitir que o usuário selecione o campo do formulário ao clicar no label, o que facilita muito especialmente no caso de campos do tipo checkbox ou radio, pois aumenta a região clicável, ajuda diminuir o tempo e a chance de erros para selecionar estes campos.

Destaque o campo ativo do formulário com :focus

Quando um usuário estiver preenchendo um formulário, ele deve perceber claramente em qual campo está inserindo os dados, pois somente mostrar o cursor dentro do campo pode não ser suficiente.
Para isso, pode-se utilizar a pseudo-classe :focus no CSS para o seletor de input, que possibilita aplicar um estilo ao elemento quando ele recebe foco para receber dados do teclado, como uma borda mais espessa ou de outra cor e um background diferenciado, como no exemplo abaixo:

/* Campos no estado normal possuem um background neutro e uma borda clara */
input.text, select, textarea
{ background: #FFF; border: 1px solid #999; }
 
/* Campos no estado :focus possuem um background diferenciado e uma borda de maior destaque */
input.text:focus, select:focus, textarea:focus
{ background: #FFC; border: 2px solid #D8A561; }

A usabilidade possui muitos outros critérios a serem trabalhados durante todo o processo de desenvolvimento de uma interface para a web, mas no dia-a-dia podemos melhorar a experiência do usuário através de pequenos detalhes.

Fonte: http://www.tableless.com.br | Por: Talita Pagani

Deixe um comentário

Arquivado em Usabilidade na internet

Gerador de embed YouTube válido W3C

Conheça a forma de inserir vídeos do YouTube em seu site, com código válido, de acordo com as normas da W3C.

Para solucionar este problema, criamos o Gerador de embed YouTube válido W3C que, obviamente, só precisa do URL além das dimensões desejadas para o vídeo; logo abaixo é gerado um código que você só precisa copiar e colar, garantindo que o seu código continue válido, além de funcionar em todos os browsers (inclusive IE6!).

Fonte

Deixe um comentário

Arquivado em Padrões W3C, Usabilidade na internet

A experiência do usuário além da usabilidade

Quantas vezes nos deparamos com burocracias e processos complicados para a realização de uma simples tarefa do dia-a-dia?

Alguns exemplos comuns…

Preciso aumentar o limite do cartão no site do cartão de crédito. Acesso o site e preencho a solicitação. Só depois eles apresentam mensagem informando que é necessário entregar um comprovante de renda.

experiencia_01.jpg

A transação está disponível no menu de navegação.

O sistema permite acessar um formulário e selecionar a opção de aumento de limite.

É frustrante, ao final, deparar com essa mensagem.

Ou preciso fazer uma TED (transferência para outro banco) pelo Internet Banking ainda hoje.

Após acessar o site e realizar o login, o sistema informa que só permite realizar transferências para contas que foram cadastradas na agência.

É necessário falar com o gerente ou ir até a agência para realizar a transferência.

experiencia_03.jpg

O menu possui a transação de TED sem cadastramento. Informa que essa operação só é válida para valores acima de R$5.000,00 e o limite do cliente é de R$1.000,00. Sem realizar cadastro, não permite efetuar o pagamento.

Ou ainda, uma empresa de telefonia permite acessar o site para consultar fatura, alterar a data de vencimento e solicitar reparos. Para isso, solicita login com usuário e a senha.

Após a identificação, para realizar qualquer consulta, o cliente precisa informar o número da linha que será consultada. Mas, se já estou logada, o sistema não deveria identificar o número das minhas linhas de telefone? É justo que para cada consulta eu tenha que digitar o número da linha se estou identificada?

experiencia_02.jpg

Após realizar o login, para cada consulta é necessário informar novamente os dados pessoais de identificação da conta.

São inúmeras situações corriqueiras no nosso dia-a-dia e as ferramentas digitais de conveniência, que surgiram para facilitar nossas vidas, acabam causando mais frustração, uma vez que vêm atreladas a diversos processos inconvenientes.

O que eu quero dizer com isso?

Ter uma boa interface, nomenclaturas adequadas e formulários que funcionam são itens muito importantes e fundamentais. Mas, a experiência do usuário vai além.

Uma boa usabilidade do site é primordial e temos que reformular processos e workflows, se preciso, para que a experiência do usuário seja positiva e completa.

Investir no site e em uma navegação intuitiva e agradável não é suficiente. Vamos rever os fluxos e processos por trás da interface. Nossos usuários não devem ser prejudicados por dificuldades internas da empresa, sistemas antigos ou processos formulados há muitos anos e que valem até hoje, independente da evolução tecnológica.

O mundo online é um grande desafio para todas as empresas. Ele exige rapidez, segurança e eficiência. Além disso, deve ser intuitivo, pois quem usará o serviço é o cliente. Todas essas qualidades não combinam com as estruturas burocráticas herdadas do século passado.

O dinamismo do mercado pede mudanças e quem tem exigido essa atitude é o cliente. Ele quer mais! Sendo assim, vamos pensar nas suas necessidades e como facilitar sua vida. A experiência deve ser planejada por completo e a usabilidade não deve estar restrita a trechos desconectados entre si.

Fonte

Deixe um comentário

Arquivado em Arquitetura da Informação, Usabilidade na internet

Validador WCAG 2.0 beta para testar as páginas via URL

T.A.W Validador de acessibilidade on-line beta.

T.A.W Validador de acessibilidade on-line beta.

Pode-se encontrar mais informações sobre este tipo de validação de acessibilidade com mais detalhes em http://www.w3.org/TR/WCAG-TECHS/G134.html e o http://www.webstandards.org/2007/02/08/what-to-do-with-wcag-2 .

Deixe um comentário

Arquivado em Acessibilidade na internet, Usabilidade na internet, Web 2.0

HTML5: a cara da próxima web

Nova versão da linguagem incorpora em seu código funções para áudio e vídeo, APIs e funcionalidades do Flash e Silverlight

Html 5

Html 5

Quem acessa a internet desde seu início comercial – meados dos anos 90 – acompanhou a evolução da rede mundial em diversos aspectos. Um dos pontos que mais sofreu mutações foi a interface: de páginas estáticas e meramente informativas, até interações complexas permitidas por meio de tecnologias como o Ajax. Por trás de todo esse desenvolvimento, está uma linguagem que poucos vêem, mas que é a base de um mundo de páginas da web: o HTML, casamento entre os padrões HyTime e SGML, que surgiu no início dos anos 90.

Depois de mais de dez anos do lançamento da última versão da linguagem, o HTML 4, o Web Hypertext Application Technology Working Group está dando os últimos passos para anunciar a tão esperada versão 5. A último draft foi anunciado no início do ano e as cerca de 500 empresas que participam do grupo devem enviar suas correções e sugestões até o final de junho de 2009. A partir daí, cria-se o padrão de fato para que aplicações e browsers possam se adequar às novas funcionalidades.

Novas funções

“A ideia é que ele seja liberado em 2010. O principal destaque do HTML 5 é a possibilidade de agregar no código comando para áudio e vídeo”, afirma Vagner Diniz, gerente geral do W3C Escritório Brasil, consórcio que define os padrões técnicos a serem utilizados na web. São comandos específicos no lugar das tags quebra-galhos usadas hoje em dia. As famosas object e embed poderão ser substituídas pelas etiquetas e , para inclusão dos respectivos objetos multimídia.

As novas tags trazem funções interessantes de maneira nativa, excluindo a necessidade de embutir elementos externos nas páginas. Funções obtidas com o uso de Ajax, como os movimentos de arrastar-e-soltar itens de uma página, poderão ser chamadas direto do código HTML. “O Javascript faz referência a elementos do HTML. Como o HTML terá novos elementos, então o Ajax também será aprimorado”, afirma Carlos Ceccone, analista de projetos do W3C.

Aplicações baseadas na web também serão mais ágeis, pois menos dados serão requisitados de servidores. O HTML 5 inclui a possibilidade de inserir APIs dentro do código. O acesso local às informações facilitará funções de cache, busca e o acesso off-line de serviços da web. O plugin Google Gears, por exemplo, já é compatível com HTML 5, assim como o Adobe Air. Mas o grande burburinho começou após a apresentação do novo Gmail para dispostivos móveis que já utiliza recursos do HTML5, como pode ser visto na apresentação do VP de engenharia do Google, Vic gundotra.

Diniz também atenta para a limpeza do código. Uma mesma página escrita em HTML 5 será bem mais simples do que a em HTML 4. Para o desenvolvedor, ficará muito mais simples de programar. É possível ver uma comparação de uma página de um blog escrita nas duas versões da linguagem no site Hobo Web.

Outra novidade é a incorporação de funcionalidades de tecnologias para gráficos dinâmicos, como o Flash e o Silverlight. Será possível criar animações com gráficos vetoriais diretamente no código, com o uso da tag <canvas&gt. A web semântica também começa a aparecer no HTML 5 – em vez de enxergar um elemento título, legenda ou parágrafo, a linguagem conseguirá interpretar o conteúdo que está naquela caixa de texto.

Navegadores compatíveis

Mas não basta o padrão HTML chegar em sua versão 5 e os browsers não se adequerem para conseguir a renderização completa das novas funcionalidades. A página na Wikipedia lista não só as novidades do HTML 5, como mostra qual ferramenta já faz a renderização adequada das novidades.

Cada browser tem seu engine ou adota um já existente. O Internet Explorer, inclusive na recente versão 8, utiliza o Trident. O Gecko, da fundação Mozilla, é utilizado pelo browser Firefox, entre outros; o WebKit, desenvolvido pela Apple a partir do engine de código aberto KHTML, é usado no Safári, no Google Chrome e nos celulares Nokia. Já o Presto é a ferramenta do Opera.

O W3C disponibiliza regurlarmente um estudo com comparações entre HTML 4 e 5, na medida em que a recomendação HTML 5 avança.

Fonte

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação, Browsers, Tecnologia e sistemas, Usabilidade na internet, XHTML

WEB 3.0 – A terceira geração da internet

O que via acontecer?

O que via acontecer?

Na nova internet, os computadores poderão compreender o significado de textos e imagens para adivinhar o que você quer.

O início, a web era marcada por sites estáticos, sem interação com os usuários. A primeira grande mudança na forma em que usamos a internet veio com a larga aplicação de sites de comércio eletrônico. Assim, a rede passou a nos oferecer produtos e serviços. Depois veio a fase dos sites de relacionamento e compartilhamento de conteúdos (web 2.0).

Esse cenário nos colocou em uma situação muito complicada: Como organizar a imensa vastidão de conteúdo que se tornou a internet, de forma simples, eficiente e focada em nossas necessidades?

Web Semântica ou 3.0

Web Semântica ou 3.0

A resposta para esta questão é a “web semântica” – ou, se preferir, a web 3.0.

A principal aplicação da web semântica se refere à capacidade de os sistemas computacionais interpretarem o conteúdo disponível nos sites da internet e conseguir entender de forma diferenciada uma página em que a palavra bala é um doce ou é um projétil de armas. Ou seja, o conteúdo é interpretado de acordo com seu contexto. A forma com o que os sistemas irão executar esse rastreamento e interpretação será com base em mudanças na forma com que as páginas são construídas.

Parece um conceito simples, não? Mas não é tão simples assim. A forma com que essa evolução será conduzida ainda não é totalmente clara, mas é espetacular imaginar esse novo horizonte em nosso dia-a-dia.

Mais que um simples entendimento de palavras soltas – como o exemplo da bala – a web semântica poderá (e deverá) levar em conta cada usuário de forma individual, traçando perfis e procurando entregar ao usuário exatamente aquilo que ele quer, com base no que os sistemas de informação conhecem de seu comportamento.

Um exemplo: Alguém entra em seu mecanismo de busca favorito, procura por hospedagem em Florianópolis. O mecanismo reconhece o usuário, sabe que tem dois filhos pequenos, então irá priorizar no resultado hotéis e pousadas que tenham opções de lazer para crianças.

A web semântica também terá aplicações relacionadas a mídias – publicidade – e serviços. As propagandas apresentadas aos usuários poderão ser direcionadas pela sua localização. Através da integração de sistemas GPS à internet, a propaganda poderá ser direcionada a anunciantes que atendem naquela região. Por exemplo: Você está em casa, e a propaganda da academia do seu bairro aparece quando você está lendo noticias de boa forma em um blog ou site.

Aliás, é importante dizer que a web da qual falo não é apenas esta que acessamos através de um computador – cada vez mais outros equipamentos passam a estar também on-line. Nossos celulares já são minicomputadores portáteis capazes de acessar praticamente todos os serviços na internet. A dimensão da aplicabilidade de uma web totalmente focada no usuário, que leva em consideração fatores como onde o usuário está e o que ele está fazendo (comprando, viajando, andando no parque) é imensa.

Essa nova internet pode não estar tão distante de nós. A compreensão dos profissionais quanto à aplicabilidade das tecnologias para tornar o conteúdo plausível de interpretação por parte dos sistemas está cada vez mais difundida.

Claro que existe um trabalho muito grande para tornar a codificação das páginas acessíveis aos servidores que irão interpretar seus conteúdos e principalmente os serviços que poderão integrar os conteúdos com o perfil de quem os acessa.
Não vou entrar em uma discussão sobre a ética e os limites da nova web com relação a nossa privacidade. Claro que isso deverá ser alvo de muitas discussões e deverão em muitos momentos balizar as decisões de como estas novas tecnologias serão aplicadas.

O que é importante é termos consciência dessa evolução que vem acontecendo diante de nossos olhos e irá causar impacto em nossas vidas em breve.

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação, Tecnologia e sistemas, Usabilidade na internet

Solução definitiva – PNG Transparente no IE6

Muitos desenvolvedores não sabem, mas o IE6 e versões anteriores possuem um terrível problema com PNG’s de 24 Bits, onde ele não processa o canal Alpha da imagem, com isso toda a transparência fica com o fundo meio “esverdeado” (problema esse já corrigido no IE7). Hoje em dia existem vários scripts que corrigem esse problema de transparência no IE, mas todos sofrem da mesma deficiência, que é a não implementação de background-position, background-repeat, link que não funciona entre outras coisas.

Já testei várias formas diferentes de correção, mas finalmente encontrei um script JS que funciona perfeitamente, onde é implementado o tão sonhado background-position e background-repeat, lhes apresento o DD_belatedPNG, um JavaScript extremamente pequeno, que em sua versão comprimida chega a aproximadamente 6KB. Sua utilização é extremamente simples, basta você baixar o arquivo JS e fazer uma chamada para o mesmo da seguinte forma dentro do header do seu site:

<!–[if IE 6]>
<script src=”DD_belatedPNG.js” type=”text/javascript”></script>
<script>
/* Exemplo de utilizacao */
DD_belatedPNG.fix(‘.png_bg’);
</script>
<![endif]–>

O Script foi inserido na página via comentários condicionais, para que seja lido somente pelo Internet Explorer 6 e menores, os outros browsers o consideram como um simples comentário HTML. Da forma citada, todos os elementos que possuírem a classe “png_bg” serão afetadas pelo Script as imagens começarão a funcionar corretamente. Uma outra forma de utilização é chamando os elementos DOM:

Exemplo 1

Exemplo 2 – Com background repeat

Exemplo 3 – Com background position

Fonte

Deixe um comentário

Arquivado em CSS . Cascading Style Sheets, Usabilidade na internet