São Paulo, 29 de setembro de 2011                     Faculdade Impacta de Tecnologia                Pós graduação em Arqu...
Introdução       O design dos websites evolui a cada ano. O design conciliam imagens ecódigo para construir uma página mel...
Parâmetros      Os padrões foram agrupados e separados em categorias para criarparâmetros que possam conciliar usabilidade...
Texto e imagens com o atributo Alt preenchido      Fornecer informações de contexto e orientações      Assegurar o control...
Análise       Os sites com layout inovador possuem acessibilidade e usabilidade? Porisso, o site escolhido para a análise ...
Animações que distraem                                      não   Projeto estético minimalista                            ...
Programação: códigos e padrões  Utilizar corretamente marcações e folhas de estilo                            sim  Fornece...
Usuário: design centrado no usuário  Controle: os usuários gostam de ter a sensação de estar no controle do  sistema      ...
O projeto de design da interação tem como objetivo integrar o usuário aproposta de sustentabilidade do site.
Nike.com – Nike Game ChangersParâmetrosDesign: layout e diagramação Consistência: padronização de layouts, cores, textos, ...
Utilizar soluções de transição                                         não   Utilizar tecnologias e recomendações do W3C  ...
Feedback informativo: toda ação do usuário requer uma resposta do   sistema                                               ...
Análise de Webstandars
Análise de Webstandars
Análise de Webstandars
Upcoming SlideShare
Loading in...5
×

Análise de Webstandars

422

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
422
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Análise de Webstandars

  1. 1. São Paulo, 29 de setembro de 2011 Faculdade Impacta de Tecnologia Pós graduação em Arquitetura da Informação Acessibilidade e usabilidadeAnálise dos site Nike Better World e Nike Game Changers dentro dos padrões de acessibilidade e usabilidadeNome: Carolina Arlindo de MeloTurma: 6Prof. Ana Laura GomesDisciplina: WebStandards e Acessibilidade
  2. 2. Introdução O design dos websites evolui a cada ano. O design conciliam imagens ecódigo para construir uma página melhor, mais leve e sem erros. A usabilidadejá este entre os pontos importantes de um projeto. Mas por que anda nãoconseguimos inserir a acessibilidade? A usabilidade ressalta: “A capacidade que um sistema interativo oferecea seu usuário, em um determinado contexto de operação, para a realização detarefas, de maneira eficaz, eficiente e agradável.” (ISO 9241-11, 1998) A acessibilidade garante que pessoas com deficiências possam utilizarqualquer sistema interativo. Ambas procuram facilitar o acesso do usuário, independente de suashabilidades ou deficiências, propondo padrões para o acesso de todos. Essespadrões são parecidos em alguns aspectos, como navegação simplificada.
  3. 3. Parâmetros Os padrões foram agrupados e separados em categorias para criarparâ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 posicionadosProgramaçã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 sejamtransformadas harmoniosamenteUsuário: design centrado no usuário Controle: os usuários gostam de ter a sensação de estar no controle dosistema 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 ouacessí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. 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 dosistema 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. 5. Análise Os sites com layout inovador possuem acessibilidade e usabilidade? Porisso, o site escolhido para a análise tem design inovador, utiliza CSS paratransição das imagens e navegação. O site escolhido foi Nike Better World (www.nikebetterworld.com). O siteapresenta idéias e produtos com foco na sustentabilidade. A descriçãocompleta dos produtos pode ser visualizada no site Nike Game Changers(www.nike.com/nikeos/p/gamechangers/pt_BR). Como os sites possueminformações complementares a análise foi realizada em ambos os sites. Além dos parâmetros, os sites foram submetidos a validação técnicapelo site Web@ax Examinator (www.acesso.umic.pt/webax/examinator.php).Nike Better WorldParâmetrosDesign: 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. 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 danavegação e interação. O foco do site é a apresentação dos produtos de formafluida e contínua porém não é totalmente acessível. Os usuários nãoconseguem ter a mesma experiência sem navegar através do mouse. Ao navegar pelo teclado as imagens se sobrepõem, atrapalhando aleitura e entendimento da página.
  7. 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çãoda 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. 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ãoNavegaçã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. 9. O projeto de design da interação tem como objetivo integrar o usuário aproposta de sustentabilidade do site.
  10. 10. Nike.com – Nike Game ChangersParâmetrosDesign: 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 eimagens de fundo com texto sobreposto. O layout mantém a consistência dodesign 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. 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çãoda 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) simNavegaçã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. 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 BetterWorld, 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.

×