“Atenção senhores que fazem site:
- Acessibilidade, ou seu site tem, ou seu site não tem.”
Com a frase acima e com esse link: http://migre.me/3qwKH iniciou-se um debate interessante no Facebook, que agora trazemos aqui para o Dica1.
ACESSIBILIDADE.
É impressionante como nos preocupamos tanto com certos detalhes dos nossos produtos, como aquele layout bacana, aqueles efeitos de causar admiração, reparamos na velocidade, segurança, nas diferentes formas de divulgação e etc., mas deixamos de levantar muitas vezes um questionamento muito importante: Meu produto é acessível a todos?
A moda é ter sites e serviços mobile.
A moda é desenvolver para o iPhone e iPad.
Deveria ser moda também desenvolver para todos. Todos mesmo. Não apenas aqueles que tem um celular bacana. Mas aqueles que tem algum tipo de dificuldade em acessar a internet.
O vídeo produzido pelo pessoal do Acesso Digital é bem direto. Mostra claramente as dificuldades de acesso de pessoas com deficiência motora. Eu vou mais além. Acrescento na lista também pessoas “normais”, mas que também enfrentam dificuldades. Idosos, crianças e pessoas ainda não inseridas no mundo digital, por exemplo.
Apesar de o senso comum mandar não agradar a todos, devemos ao menos pensar no publico alvo de nossos projetos. Temos exemplos de falta de acessibilidade em vários lugares ‘reais’. Alguns aparentemente não tem solução. Mas NÓS fazemos a internet. E pelo menos aqui temos a chance de fazer a diferença.
Quero deixar claro que não sou perfeito. Não faço sistemas 100% acessiveis. Mas tenho elevado o meu percentual a cada dia. A cada nova tela. Tento ver meus produtos com os olhos do meu usuário, pois acredito que esse é o caminho para uma internet democrática.
Ficam aqui os prints do debate pelo Facebook e o convite: participe também. Comente! Dê sua opinião. Ajude a enriquecer o debate e tornar nossos produtos acessíveis a todos. Todos mesmo!
Zorro, famoso herói do cinema, conhecido por suas aventuras ao defender os fracos e oprimidos utilizando sua habilidade com a espada, inspirou vários filmes e livros da literatura popular, e depois deste post vai inspirar também Webdesigners.
O personagem adota a letra “Z” como sua assinatura (três linhas cruzadas), marcando-a com sua espada em paredes e nas roupas de seus inimigos, como sinal de sua passagem. (fonte: Wikipédia).
Apesar de possuir características bem semelhantes, nós sabemos que o Zorro na sua identidade secreta não era Webdesigner. Mas o que este herói pode nos ensinar?
Existem várias técnicas para elaborar layouts com o máximo de usabilidade e que sejam visualmente agradáveis. Uma destas técnicas tem tudo haver com o personagem em questão.
Este método é conhecido como Z-Layout e carinhosamente apelidado por mim como: a técnica de Zorro (rsrsrs).
O Z-Layout utiliza a letra “Z” como guia para a construção da página, sendo muito simples de ser aplicada, pois constituí em posicionar na parte superior do Z os itens que você deseja que o navegante visualize primeiro ao acessar a página e na parte inferior as chamadas a ação, levando em consideração que o usuário vai seguir de forma natural o caminho do Z da mesma forma que lêem livros (de cima para baixo, da esquerda para direita).
É bom deixar claro que esta não é uma solução definitiva e não é necessariamente aplicável a todos os projetos. Existem mecanismos com maior eficácia e que podem ser utilizados em conjunto com o Z-Layout.
O Z-Layout pode ser utilizado como ponto de partida para construção de um layout por abordar os requisitos fundamentais para qualquer site eficaz: hierarquia, marca, estrutura e apelo à ação.
Veja alguns exemplos de aplicações do Z-Layout:
O “Z” pode ser posicionado de diversas maneiras, buscando sempre a obtenção do melhor resultado.
Há uma longa e antiga discussão entre os Web Designers se o usuário utiliza ou não a barra de rolagem ao navegar no site, impulssionado por esta duvida, muitos projetistas preferem apertar “acima da dobra”* todo conteúdo considerado de maior importância.
*Acima da dobra é um termo referente ao conteúdo localizado na metade superior da primeira página de um jornal. É comumente utilizado na web para descrever a área que você vê em um site antes de ter que rolar a página.
Neste excelente artigo The myth of the page fold: evidence from user testing mostra que foram feitas mais de 800 seções de testes no período de 6 anos constatando que as pessoas não tem problema em utilizar a rolagem do site.
Assim como no jornal onde o objetivo é que ele seja todo lido e não apenas o conteúdo acima da dobra, o site deve ser planejado para que o usuário seja atraído a navegar por toda a página.
Sendo assim uma das coisas que pode definir se o usuário vai rolar ou não a página é o posicionamento do conteúdo. No texto citado acima o autor mostra que menos conteúdo acima da dobra incentiva o usuário rolar a página em busca de mais conteúdo.
Outra prática também citada no texto é posicionar o conteúdo abaixo da dobra de forma que parte dele apareça na área visível da página.
Um ótimo exemplo é o site da 37 Signals, o conteúdo está bem distribuído em uma longa página e a cada etapa da rolagem o usuário têm próximo de se a possibilidade de acessar as páginas dos produtos caso seja convencido.
Outro detalhe muito interessante é que no rodapé foram posicionadas as mesmas opções que estão no topo do site, poupando o usuário em ter que rolar até o início da página para acessar os produtos.
Como disse em um post anterior, a algum tempo venho estudando assuntos relacionados a Usabilidade.
Baseado em um frase que sempre digo (“A melhor forma de otimizar o conhecimento é praticando.”) resolvi por em prática estes estudos.
Passeia a analisar alguns sites em busca de possíveis erros ou acertos.
Como apontar o erro dos outros é fácil, a vitima da vez é o portal da ESPN Brasil.
Conversando pelo Gtalk com meu caro colega @jroqueweb grande conhecedor de PHP, Java Script e afins, um ótimo profissional (aproveitando para fazer um merchan dele, “risos”), ele mim indicou um blog que até então não havia conhecido: Porra Usabilidade. Um dos primeiros post deste blog comenta sobre a caixa de busca do ESPN.
Tenha em mente ao decorrer deste texto a primeira lei de Steve Krug: “Não me Faça Pensar”.
Descontente com a informação do blog e com minha dificuldade, mostrei o site para algumas pessoas, entre homens e mulheres (9 exatamente) dei um termo e pedi que elas pesquisassem no portal em questão.
O resultado foi exatamente o que esperava:
3 dos voluntários desistiram depois de passar alguns instantes subindo e descendo a página em busca de onde começar a pesquisar. 1 indicou a região onde procuraria o campo de pesquisa, mas não identificou a existência dele. 1 encontrou, seguindo a lógica de que aquele campo era o único que ela poderia digitar algo. 4 encontraram, mas demoraram muito, muito além do normal.
Agora tenho a certeza de que há algo errado.
Vou apontar quatro coisas que claramente contribuem para o fracasso desta caixa de pesquisa.
1 - O campo para digitar o termo está sem bordas. 2 - A barra “/” antes da palavra é incomum em campos de pesquisa. 3 - O campo de pesquisa está posicionado em um local que comumente é utilizado para colocar banners. 4 - Não há nenhuma sinalização clara que ali é um campo de pesquisa, como um icone de uma “lupa” ou as palavras “pesquisar”, “buscar”.
Depois de apontar os erros vamos às possíveis soluções.
Primeiro adicionei uma borda. Utilizei dois tons de cores para testar:
Troquei a palavra “agora” por ”buscar” e “pesquisar”:
Agora no contexto para visualizar melhor as alterações:
Ultimamente tenho pesquisado, lido e estudado bastante sobre usabilidade, uma área abrangente que têm me fascinado todos os dias.
Dentre vários artigos relacionados a usabilidade também conhecida como UX (User Experience), os que falam dos chamados Call to Action Buttons (Botões de chama a ação) têm uma atenção especial.
Minha intenção neste texto não é falar especificamente sobre os Botões, quem tiver curiosidade ou interesse sobre o assunto segue os links de meia dúzia de artigos bem interessantes.
Como disse e sugere o titulo, minha intenção não é falar sobre os Botões, mas sim falar sobre o botão. Estava a visitar os links que meus seletivos followings twittam, quando deparei com este, que apelidei de (Call to Action Button Big) Grande botão de chamada a ação, não resisti e resolvi escrever este rápido post.
Já tinha visto vários botões grandes, mas este superou todos eles. Tive que reduzir bastante a imagem para caber no post.
Uma coisa curiosa é que o Botão é tão grande que acaba tirando a atenção do usuário que está a utilizar o formulário, que deve ser preenchido antes de clicar no Big Button.
Faça sua analise sobre o Grande botão e deixe seu comentário.
