Análise dos site Nike Better World e Nike Game Changers, visando padrões de acessibilidade e usabilidade.

1. São Paulo, 29 de setembro de 2011
Faculdade Impacta de Tecnologia
Pós graduação em Arquitetura da Informação
Acessibilidade e usabilidade
Análise dos site Nike Better World e Nike Game Changers
dentro dos padrões de acessibilidade e usabilidade
Nome: Carolina Arlindo de Melo
Turma: 6
Prof. Ana Laura Gomes
Disciplina: WebStandards e Acessibilidade

2. Introdução
O design dos websites evolui a cada ano. O design conciliam imagens e
código para construir uma página melhor, mais leve e sem erros. A usabilidade
já este entre os pontos importantes de um projeto. Mas por que anda não
conseguimos inserir a acessibilidade?
A usabilidade ressalta: “A capacidade que um sistema interativo oferece
a seu usuário, em um determinado contexto de operação, para a realização de
tarefas, de maneira eficaz, eficiente e agradável.” (ISO 9241-11, 1998)
A acessibilidade garante que pessoas com deficiências possam utilizar
qualquer sistema interativo.
Ambas procuram facilitar o acesso do usuário, independente de suas
habilidades ou deficiências, propondo padrões para o acesso de todos. Esses
padrões são parecidos em alguns aspectos, como navegação simplificada.

3. Parâmetros
Os padrões foram agrupados e separados em categorias para criar
parâmetros que possam conciliar usabilidade e acessibilidade.
O padrões agrupados foram:
• Regras de ouro Schneiderman
• 10 heurísticas de Jakob Nielsen
• Heurísticas para avaliação de usabilidade
• Recomendações para acessibilidade W3C
Categorias:
Design: layout e diagramação
Consistência: padronização de layouts, cores, textos, processos
Texto com tamanho pequeno
Texto sobrepostos com imagens e outros textos
Combinação de cores que confundem ou atrapalham o usuário
Animações que distraem
Projeto estético minimalista
Títulos de vídeos e músicas bem posicionados
Programação: códigos e padrões
Utilizar corretamente marcações e folhas de estilo
Fornecer alternativas equivalentes ao conteúdo sonoro e visual
Assegurar a clareza e a simplicidade dos documentos
Criar tabelas passiveis de transformação harmoniosa
Fornecer mecanismos de navegação claros
Assegurar a acessibilidade direta de interfaces do usuário integradas
Projetar páginas considerando a independência de dispositivos
Utilizar soluções de transição
Utilizar tecnologias e recomendações do W3C
Assegurar que paginas dotadas de novas tecnologias sejam
transformadas harmoniosamente
Usuário: design centrado no usuário
Controle: os usuários gostam de ter a sensação de estar no controle do
sistema
Baixa carga de memorização
Reversão de ações
Flexibilidade e eficiência de uso
Linguagem do usuário
Reconhecimento aos invés de memorização (instruções de uso ou
acessíveis)
Navegação: interação com o sistema
Navegação com teclado
Atalhos para usuários freqüentes: navegação simplificada
Prevenção e tratamento de erros (ocorrências)
Mensagens de erro devem ser claras, sem códigos e sugerindo solução
Ajuda e documentação fácil de pesquisar
Clique do mouse em áreas pequenas

4. Texto e imagens com o atributo Alt preenchido
Fornecer informações de contexto e orientações
Assegurar o controle do usuário sobre alterações temporais do conteúdo
Feedback informativo: toda ação do usuário requer uma resposta do
sistema
Visibilidade e reconhecimento do estado ou contexto atual
Textos que informem o termino da ação
Indicar claramente qual o idioma utilizado
Liberdade do usuário: desfazer ou refazer operações
Flexibilidade e eficiência de uso (personalização de ações)

5. Análise
Os sites com layout inovador possuem acessibilidade e usabilidade? Por
isso, o site escolhido para a análise tem design inovador, utiliza CSS para
transição das imagens e navegação.
O site escolhido foi Nike Better World (www.nikebetterworld.com). O site
apresenta idéias e produtos com foco na sustentabilidade. A descrição
completa dos produtos pode ser visualizada no site Nike Game Changers
(www.nike.com/nikeos/p/gamechangers/pt_BR). Como os sites possuem
informações complementares a análise foi realizada em ambos os sites.
Além dos parâmetros, os sites foram submetidos a validação técnica
pelo site Web@ax Examinator (www.acesso.umic.pt/webax/examinator.php).
Nike Better World
Parâmetros
Design: layout e diagramação
Consistência: padronização de layouts, cores, textos,
processos sim
Texto com tamanho pequeno não
Texto sobrepostos com imagens e outros textos sim
Combinação de cores que confundem ou atrapalham o
usuário não

6. Animações que distraem não
Projeto estético minimalista sim
Títulos de vídeos e músicas bem posicionados sim
O design da página foi muito elogiado por utilizar o código a favor da
navegação e interação. O foco do site é a apresentação dos produtos de forma
fluida e contínua porém não é totalmente acessível. Os usuários não
conseguem ter a mesma experiência sem navegar através do mouse.
Ao navegar pelo teclado as imagens se sobrepõem, atrapalhando a
leitura e entendimento da página.

7. Programação: códigos e padrões
Utilizar corretamente marcações e folhas de estilo sim
Fornecer alternativas equivalentes ao conteúdo sonoro e visual não
Assegurar a clareza e a simplicidade dos documentos sim
Criar tabelas passiveis de transformação harmoniosa sim
Fornecer mecanismos de navegação claros sim
Assegurar a acessibilidade direta de interfaces do usuário integradas não
Projetar páginas considerando a independência de dispositivos sim
Utilizar soluções de transição não
Utilizar tecnologias e recomendações do W3C sim
Assegurar que páginas dotadas de novas tecnologias sejam transformadas
harmoniosamente sim
Segundo o Web@x Examinator, o site obteve a nota 6,8. A construção
da página tem pontos positivos: não utilizam tabelas, uso correto da sintaxe,
código css correto, links separados para facilitar a leitura.
Não há identificação do idioma principal da página.

8. Usuário: design centrado no usuário
Controle: os usuários gostam de ter a sensação de estar no controle do
sistema sim
Baixa carga de memorização sim
Reversão de ações sim
Flexibilidade e eficiência de uso não
Linguagem do usuário sim
Reconhecimento aos invés de memorização (instruções de uso ou
acessíveis) não
Navegação: interação com o sistema
Navegação com teclado não
Atalhos para usuários freqüentes: navegação simplificada não
Prevenção e tratamento de erros (ocorrências) não
Mensagens de erro devem ser claras, sem códigos e sugerindo solução não
Ajuda e documentação fácil de pesquisar não
Clique do mouse em áreas pequenas ***
Texto e imagens com o atributo Alt preenchido não
Fornecer informações de contexto e orientações não
Assegurar o controle do usuário sobre alterações temporais do conteúdo não
Feedback informativo: toda ação do usuário requer uma resposta do
sistema não
Visibilidade e reconhecimento do estado ou contexto atual sim
Textos que informem o término da ação sim
Indicar claramente qual o idioma utilizado não
Liberdade do usuário: desfazer ou refazer operações sim
Flexibilidade e eficiência de uso (personalização de ações) não

9. O projeto de design da interação tem como objetivo integrar o usuário a
proposta de sustentabilidade do site.

10. Nike.com – Nike Game Changers
Parâmetros
Design: layout e diagramação
Consistência: padronização de layouts, cores, textos,
processos sim
Texto com tamanho pequeno sim
Texto sobrepostos com imagens e outros textos sim
Combinação de cores que confundem ou atrapalham o
usuário não
Animações que distraem não
Projeto estético minimalista sim
Títulos de vídeos e músicas bem posicionados sim
Essa seção segue o projeto de design do site da Nike, cores escuras e
imagens de fundo com texto sobreposto. O layout mantém a consistência do
design apresentado nas outras páginas e também no Nike Better World.
A apresentação dos produtos segue a linha de navegação horizontal.
Programação: códigos e padrões
Utilizar corretamente marcações e folhas de estilo não
Fornecer alternativas equivalentes ao conteúdo sonoro e visual não
Assegurar a clareza e a simplicidade dos documentos sim
Criar tabelas passiveis de transformação harmoniosa sim
Fornecer mecanismos de navegação claros sim
Assegurar a acessibilidade direta de interfaces do usuário integradas sim
Projetar páginas considerando a independência de dispositivos sim

11. Utilizar soluções de transição não
Utilizar tecnologias e recomendações do W3C sim
Assegurar que páginas dotadas de novas tecnologias sejam
transformadas harmoniosamente sim
Segundo o Web@x Examinator, o site obteve a nota 7,1. A construção
da página tem pontos positivos: não utilizam tabelas, uso correto da sintaxe,
código css correto, links separados para facilitar a leitura.
Usuário: design centrado no usuário
Controle: os usuários gostam de ter a sensação de estar no controle do
sistema sim
Baixa carga de memorização sim
Reversão de ações sim
Flexibilidade e eficiência de uso sim
Linguagem do usuário sim
Reconhecimento aos invés de memorização (instruções de uso ou
acessíveis) sim
Navegação: interação com o sistema
Navegação com teclado não
Atalhos para usuários freqüentes: navegação simplificada não
Prevenção e tratamento de erros (ocorrências) não
Mensagens de erro devem ser claras, sem códigos e sugerindo solução não
Ajuda e documentação fácil de pesquisar não
Clique do mouse em áreas pequenas sim
Texto e imagens com o atributo Alt preenchido sim
Fornecer informações de contexto e orientações não
Assegurar o controle do usuário sobre alterações temporais do conteúdo não

12. Feedback informativo: toda ação do usuário requer uma resposta do
sistema sim
Visibilidade e reconhecimento do estado ou contexto atual sim
Textos que informem o termino da ação não
Indicar claramente qual o idioma utilizado sim
Liberdade do usuário: desfazer ou refazer operações sim
Flexibilidade e eficiência de uso (personalização de ações) sim
A navegação não funciona via teclado. Assim como no Nike Better
World, a navegação foi proposta para interagir com o mouse. Os botões e
áreas de interação são pequenas e com pouco contraste.
Os status e/ou indicação de ação e seleção não estão bem identificados.