Relatório do Trabalho Final da Disciplina

Transcrição

1 Universidade Federal do Rio Grande do Sul Instituto de Informática Departamento de Informática Aplicada Interação Homem-Computador INF01043 Alunos: Leonardo Garcia Fischer, Filipe Quadros Borges, Relatório do Trabalho Final da Disciplina Introdução Neste trabalho faremos uma análise das diversas características (usabilidade, aspectos cognitivos, esquema de cores, princípios de ergonomia, equívocos de Nielsen, acessibilidade, etc.) do site Também será feito um protótipo em html do site, com algumas das melhorias aqui sugeridas. Usabilidade A interface do site demonstrou ter tido uma boa usabilidade, visto que é um site simples, mas completo no que diz respeito à sua utilidade (ou seja, a venda de livros e Dvds pela internet). Quanto aos aspectos de usabilidade (descoberta, aprendizado, eficiência), o site demonstrou ser bem construído. As principais funcionalidades do site (busca de um livro ou Dvd, a compra de um produto) são simples, fáceis de aprender e bastante eficientes. Por exemplo, a busca de um livro por autor é feita informando-se o nome do autor no campo de busca do site (disponível em todas as páginas). Assim, todos os livros daquele autor vendidos pelo site serão exibidos. Caso o usuário não se lembre do nome completo do autor, basta informar uma parte do nome, para obter os livros de autores com nomes semelhantes ao informado. A compra de um produto também é bastante simples, bastando que o usuário clique na opção comprar do produto, confirme que os outros produtos selecionados anteriormente também serão incluídos na compra, e então é feita a identificação do usuário, para se efetuar uma compra.

2 Os Equívocos de Nielsen A seguir, faremos uma análise de alguns equívocos apontados por Nielsen encontrados no site avaliado. Longo tempo de download da página: a página possui um tempo de download muito grande, quando acessada de uma linha de internet discada. Isso ocorre principalmente pelo grande número de imagens existentes (muitas delas utilizadas apenas como elementos de formatação do site). Uma sugestão seria a remoção de muitas das imagens utilizadas, principalmente para as propagandas e para a formatação; Páginas órfãs: apesar de todas as páginas possuírem um link para a página principal e para as principais seções do site, não é possível para o usuário saber qual o caminho ele percorreu até chegar a uma determinada página. Uma sugestão seria o uso de links para os níveis superiores das páginas, desde a página principal, até a página atual; Uso de links não padronizados: as páginas não utilizam nenhum link com as cores consideradas como padrão (azul e vermelho), nem sublinha os links por padrão. Na maioria das páginas, os links possuem a mesma cor do texto (preto). Além disso, os links ficam sublinhados apenas se o mouse estiver sobre eles. Para este problema, sugerimos a mudança do esquema de cores do site, para adotar a cor azul para os links ainda não visitados, e a cor vermelha para os links já visitados. Além disso, recomendamos o uso de todos os links com o sublinhado normal. Uso inadequado de elementos da interface: analisando o código fonte da página (função disponível em praticamente todos os navegadores mais utilizados), facilmente percebemos o uso do elemento tabela (tags table, tr e th) para a formatação do site. Esse problema deve ser combatido utilizando-se das tags corretas para a formatação de páginas Html (como as tags div, por exemplo); Falta de identificação de autores do site: apesar de, facilmente, encontrarmos os autores dos livros vendidos no site, tivemos muita dificuldade em encontrar um meio de nos comunicar com os responsáveis pela página. Por exemplo, não encontramos um link do tipo webmaster para entrar em contato com os desenvolvedores do site. Este problema pode ser resolvido criando-se uma seção Entre em contato com o webmaster, e colocar um link para esta seção em todas as páginas. Essa seção poderia, então, ter o endereço de para que entrássemos em contato, ou então um formulário, para que pudéssemos enviar nossas dúvidas e sugestões para os responsáveis pelo site; O título da página é inadequado: o titulo de todas as páginas do site é extenso demais, e poderia ser bem menor. O titulo encontrado em todas as páginas foi Livraria Cultura: Temos mais de títulos esperando por você. O título das páginas poderia ser reduzido para apenas Livraria Cultura, facilitando com que o site seja facilmente encontrado por muitos sistemas de busca na internet; Uso de propagandas não solicitadas: apesar de ser um site de vendas, o site utiliza-se de propaganda excessiva para si própria. Acreditamos que seria suficiente a propaganda utilizada para a venda dos livros, deixando a página mais limpa e agradável para os usuários.

3 Uso de Javascript em links: em alguns links (como o link para a seção Cultura News ) utilizam-se de Javascript para abrir novas janelas do navegador, gerando uma descontinuidade na utilização do botão back. Recomendamos que o Javascript seja retirado, e as páginas continuem a serem abertas na mesma janela do navegador. Falta de uso de textos inteligentes na tag alt : o site não utiliza em nenhum momento a tag alt para incluir textos inteligentes nas imagens e outros elementos do site. Isso seria facilmente resolvido, adicionando-se um texto auto-explicativo em algumas imagens exibidas no site. Uso de urls complexas: apesar da quantidade de itens que são vendidos pelo site, algumas urls são desnecessariamente complexas. Por exemplo, a url para a seção do site Itens mais vendidos é a seguinte: isv.asp?sid= &k5=3b880260&uid= Como solução, sugerimos o uso de links mais simples para as principais seções do site. Um exemplo de link bastante simples para a seção Mais vendidos seria: Problemas encontrados no uso do site: durante a avaliação do site, durante alguns momentos, não conseguimos acessar a seção Novo cadastro do site, para criar um cadastro de usuário. Como o site requer que os usuários sejam cadastrados no site para que possam completar as suas compras, não poderíamos ter feito nenhuma compra naquele momento, se assim quiséssemos. A solução óbvia para o problema seria a sua correção no servidor do site, já que o problema nos não pareceu ser de compatibilidade de navegador ou plataforma utilizada. Esquema de cores do site O site avaliado utiliza um esquema de cores bastante simples, coerente e confortável. Exemplificando, o site utiliza tons verdes claros para destacar as seções referentes aos livros, e cores cinzas-azuladas para destacar as seções referentes aos Dvds e vídeos. O site também utiliza a cor vermelha para destacar os pontos referentes à compra de livros e Dvds (como o preço de um livro, ou o link para comprá-lo). Além disso, grande parte da página utiliza fontes com cores pretas e fundo branco para a descrição detalhada de livros e Dvds, proporcionando um contraste muito bom. O único problema encontrado no esquema de cores do site é referente aos links, que possuem a mesma cor do texto normal, além de não serem sublinhados, dificultando para os usuários de diferenciar um texto normal de um link para uma outra página. Aspectos cognitivos O site avaliado demonstrou um bom uso de elementos na interface, que facilitem o processo cognitivo do ser humano. Ele também se mostrou coerente, ao utilizar um esquema de cores para a seção de livros, e outro esquema de cores para a seção de Dvds e vídeos (dando a real impressão ao usuário de que ele trocou de seção

4 no site). Ele também faz uso de metáforas (como comprar e ir ao caixa, por exemplo). Além disso, ele tenta simular uma livraria real, associando as tarefas comuns que são realizadas em uma livraria real às tarefas permitidas pelo site. Assim, o usuário percorre a livraria a procura de um livro, lê um resumo ou uma descrição do livro (em alguns casos, também é possível se ler um capitulo gratuitamente), coloca os livros que gostou em um cesto de compras, e por fim vai até o caixa para efetuar a sua compra. Por exemplo, na janela a seguir, podemos ver destacados alguns dos itens que associam a vida real de um cliente de uma livraria e um usuário do site. Uso de diversos símbolos que exemplificam a utilização de elementos da interface No topo da janela, foram utilizadas imagens de bandeiras para indicar o idioma dos livros. Assim, um usuário poderia facilmente ver a imagem da bandeira, e lembrar-se do idioma em que prefere ler, e assim facilitar a sua busca; Nas partes altas da imagem foram utilizadas imagens de carrinhos de compra, para associar a compra de livros na livraria virtual com a compra livros em uma livraria real; No centro da janela, se percebe uma imagem de um pacote de presente, indicando que podemos comprar um livro para que o site entregue embalado para presente para uma a pessoa, no endereço que desejarmos; O uso de setas e símbolos X na parte mais baixa da página, para indicar a ação de ir ao caixa efetuar a compra, ou voltar para a página principal, ou então da seta curvada para indicar a adição de itens ao carrinho, ou um X para a exclusão deles.

5 Princípios de ergonomia utilizados Após analisar o site percebemos que ele faz um bom uso dos princípios de ergonomia estudados em aula. O site é bastante simples e intuitivo de ser utilizado, utilizando de elementos que auxiliam bastante na memorização e simplificação de atividades, como a compra de um livro de certo gênero ou a busca de um filme em DVD no site. A seguir, descreveremos como alguns dos princípios básicos de ergonomia são utilizados no site. Esforço mínimo do usuário: devido à simplicidade das atividades possíveis de serem utilizadas no site avaliado, o usuário precisa fazer um esforço muito pequeno para completar uma tarefa. Por exemplo, a compra de um livro pode ser feita com apenas alguns poucos cliques do mouse e a informação do login do usuário e a sua senha; Memória mínima do usuário: do mesmo modo, o site faz um bom uso do princípio da memória mínima, onde o usuário não deve memorizar comandos para serem informados, nem deve relembrar ações que ele tomou no passado para tomar uma ação em um determinado momento. Basicamente, o único tipo de informação que o site requer da memória do usuário é o seu login e a sua senha, informados no cadastro do site; Frustração mínima: o site apresentou um problema durante a nossa avaliação, que impossibilitou que pudéssemos fazer um cadastro para simular a compra de um livro. Apesar de termos conseguido algum tempo depois fazer este cadastro, isso teria sido bastante frustrante para um usuário comum, deixando uma má impressão junto a um futuro novo cliente do site; Uso de padrões e hábitos: o site é simples e coerente no uso de padrões, permitindo que as tarefas realizadas para a compra e a busca de um livro sejam realizadas de forma muito semelhante quanto os Dvds e vídeos; Máxima tolerância para mudanças ambientais: o site foi testado em ambiente Windows, com o uso dos navegadores Microsoft Internet Explorer 6.0, e Mozilla Firefox 1.0. Também foi testado em ambiente Linux, com os navegadores Mozilla, e Konqueror. Em todos os ambientes testados, o site se comportou corretamente. Apenas no navegador Konqueror foram detectados alguns pequenos problemas de interface, como o desalinhamento de alguns elementos na tela. Mas nenhum desses problemas detectados compromete a usabilidade do site. Prioridades de Acessibilidade Foi realizado um teste do site para se avaliar a acessibilidade do site. O questionário, junto com as respostas obtidas serão transcritas na tabela a seguir.

6 Prioridade 1- pontos de verificação Caráter geral (Prioridade 1) Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do conteúdo do elemento). Isso abrange: imagens, representações gráficas do texto (incluindo símbolos), regiões de mapa de imagem, animações (por ex., GIF animados), applets e objetos programados, arte ascii, frames, programas interpretáveis, imagens utilizadas como sinalizadores de pontos de enumeração, espaçadores, botões gráficos, sons (reproduzidos ou não com interação do usuário), arquivos de áudio independentes, trilhas áudio de vídeo e trechos de vídeo: não Assegurar que todas as informações veiculadas com cor estejam também disponíveis sem cor, por exemplo a partir do contexto ou de marcações: sim Identificar claramente quaisquer mudanças de idioma no texto de um documento, bem como nos equivalentes textuais (por ex., legendas): não Organizar os documentos de tal forma que possam ser lidos sem recurso a folhas de estilo. Por exemplo, se um documento em HTML for reproduzido sem as folhas de estilo que lhe estão associadas, deve continuar a ser possível lê-lo: sim Assegurar que os equivalentes de conteúdo dinâmico sejam atualizados sempre que esse conteúdo mudar: sim Evitar concepções que possam provocar intermitência da tela,até que os agentes do usuário possibilitem o seu controle: não Utilizar linguagem a mais clara e simples possível, adequada ao conteúdo do site: sim E, se você usar imagens e mapas de imagens (Prioridade 1) Fornecer links de texto redundantes relativos a cada região ativa de um mapa de imagem armazenado no servidor: não se aplica Fornecer mapas de imagem armazenados no cliente ao invés de no servidor, exceto quando as regiões não puderem ser definidas por forma geométrica disponível: não se aplica E, se você usar tabelas (Prioridade 1) Em tabelas de dados, identificar os cabeçalhos de linha e de coluna: não se aplica Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou de coluna, utilizar marcações para associar as células de dados às células de cabeçalho: não se aplica E, se você usar frames (Prioridade 1) Dar, a cada frame, um título que facilite a identificação dos frames e sua navegação: não se aplica E, se você usar applets e scripts (Prioridade 1) Assegurar que todas as páginas possam ser utilizadas mesmo que os programas interpretáveis, os applets ou outros objetos programados tenham sido desativados ou não sejam suportados. Se isso não for possível, fornecer informações equivalentes em uma página alternativa, acessível: não se aplica E, se você usar multimídia (Prioridade 1) Fornecer uma descrição sonora das informações importantes veiculadas em trechos visuais das apresentações multimídia, até que os agentes do usuário consigam ler, automaticamente e em voz alta, o equivalente textual dos trechos visuais: não se aplica Em apresentações multimídia baseadas em tempo (filme ou animação), sincronizar as alternativas equivalentes (legendas ou descrições sonoras dos trechos visuais) e a apresentação: não se aplica E, se tudo o mais falhar (Prioridade 1) Se, apesar de todos os esforços, não for possível criar uma página acessível, fornecer um link a uma página alternativa que utilize tecnologias do W3C, seja acessível, contenha informações (ou funcionalidade) equivalentes e seja atualizada tão freqüentemente quanto à página original, considerada inacessível: não se aplica

7 Prioridade 2 - pontos de verificação Caráter geral (Prioridade 2) Assegurar que a combinação de cores entre o fundo e o primeiro plano seja suficientemente contrastante para poder ser vista por pessoas com cromodeficiências, bem como pelas que utilizam monitores de vídeo monocromáticos. [Prioridade 2 para imagens; prioridade 3 para texto]: sim Sempre que existir uma linguagem de marcação apropriada, utilizar marcações em vez de imagens para transmitir informações: não Criar documentos passíveis de validação por gramáticas formais, publicadas: não Utilizar folhas de estilo para controlar a paginação (disposição em página) e a apresentação: não Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de marcação e nos valores das propriedades das folhas de estilo: sim Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações: não Marcar corretamente listas e pontos de enumeração em listas: não se aplica Marcar as citações. Não utilizar marcações de citação para efeitos de formatação, como, por exemplo, o avanço de texto: sim Assegurar a acessibilidade do conteúdo dinâmico ou fornecer apresentação ou página alternativas: sim Evitar situações que possam provocar o piscar do conteúdo das páginas (isto é, alterar a apresentação a intervalos regulares, como ligar e desligar),até que os agentes do usuário possibilitem o controle desse efeito: sim Não criar páginas de atualização automática periódica,até que os agentes do usuário possibilitem parar essa atualização: sim Não utilizar marcações para redirecionar as páginas automaticamente, até que os agentes do usuário possibilitem parar o redirecionamento automático. Ao invés de utilizar marcações, configurar o servidor para que execute os redirecionamentos: sim Não provocar o aparecimento de janelas de sobreposição ou outras quaisquer, e não fazer com que o conteúdo da janela atual seja modificado sem que o usuário seja informado disso, até que os agentes do usuário tornem possível a desativação de janelas secundárias: sim Utilizar tecnologias do W3C sempre disponíveis e adequadas a uma determinada tarefa; utilizar as versões mais recentes, desde que suportadas: sim Evitar funcionalidades desatualizadas de tecnologias do W3C: sim Dividir grandes blocos de informação em grupos mais fáceis de gerenciar, sempre que for o caso: sim Identificar claramente o destino de cada link: não Fornecer metadados para acrescentar informações semânticas a páginas ou sites: não Dar informações sobre a organização geral de um site (por ex., por meio de um mapa do site ou de um sumário): não Utilizar os mecanismos de navegação de maneira coerente e sistemática: sim E, se você usar tabelas (Prioridade 2) Não utilizar tabelas para efeitos de disposição em página, a não ser que a tabela continue a fazer sentido depois de ser linearizada. Se não for o caso, fornecer um equivalente alternativo (que pode ser uma versão linearizada): não Se for utilizada uma tabela para efeitos de disposição em página, não utilizar qualquer marcação estrutural para efeitos de formatação visual: não E, se você usar frames (Prioridade 2) Descrever a finalidade dos frames e o modo como se relacionam entre si, se isso não for óbvio a partir unicamente dos títulos: não se aplica E, se você usar formulários (Prioridade 2) Assegurar o correto posicionamento de todos os controles de formulários que tenham rótulos implicitamente associados, até que os agentes do usuário venham a suportar associações explícitas entre rótulos e controles de formulários: sim Associar explicitamente os rótulos aos respectivos controles: sim

8 E, se você usar applets e scripts (Prioridade 2) Em programas interpretáveis e applets, assegurar que a resposta a eventos seja independente do dispositivo de entrada: não se aplica Evitar páginas contendo movimento, até que os agentes do usuário possibilitem a imobilização do conteúdo: não se aplica Criar elementos de programação, tais como programas interpretáveis e applets, diretamente acessíveis pelas tecnologias de apoio ou com elas compatíveis [prioridade 1 se a funcionalidade for importante e não estiver presente em outro local; prioridade 2, se não for o caso]: não se aplica Assegurar que qualquer elemento dotado de interface própria possa funcionar de modo independente de dispositivos: não se aplica Em programas interpretáveis, especificar respostas a eventos, preferindo-as a rotinas dependentes de dispositivos: não se aplica Prioridade 3 - pontos de verificação Caráter geral (Prioridade 3) Especificar por extenso cada abreviatura ou sigla quando da sua primeira ocorrência em um documento: não Identificar o principal idioma utilizado nos documentos: não Criar uma seqüência lógica de tabulação para percorrer links, controles de formulários e objetos: não Fornecer atalhos por teclado que apontem para links importantes (incluindo os contidos em mapas de imagem armazenados no cliente), controles de formulários e grupo de controles de formulários: não Inserir, entre links adjacentes, caracteres que não funcionem como link e sejam passíveis de impressão (com um espaço de início e outro de fim), até que os agentes do usuário (incluindo as tecnologias de apoio) reproduzam clara e distintamente os links adjacentes: sim Fornecer informações que possibilitem aos usuários receber os documentos de acordo com as suas preferências (por ex., por idioma ou por tipo de conteúdo): não Fornecer barras de navegação para destacar e dar acesso ao mecanismo de navegação: sim Agrupar links relacionados entre si, identificar o grupo (em benefício dos agentes do usuário) e, até que os agentes do usuário se encarreguem de tal função, fornecer um modo de contornar determinado grupo: sim Se forem oferecidas funções de pesquisa, ativar diferentes tipos de pesquisa de modo a corresponderem a diferentes níveis de competência e às preferências dos usuários: sim Colocar informações identificativas no início de cabeçalhos, parágrafos, listas e etc: sim Fornecer informações sobre coleções de documentos (isto é, documentos compostos por várias páginas): sim Fornecer meios para ignorar inserções de arte ASCII com várias linhas: não se aplica Complementar o texto com apresentações gráficas ou sonoras, sempre que facilitarem a compreensão da página: não se aplica Criar um estilo de apresentação coerente e sistemático, ao longo das diferentes páginas: sim E, se você usar imagens e mapas de imagens (Prioridade 3) Fornecer links textuais redundantes para cada região ativa dos mapas de imagem no cliente, até que os agentes do usuário proporcionem equivalentes textuais dos links a mapas de imagem armazenados no cliente: não se aplica E, se você usar tabelas (Prioridade 3) Fornecer resumos das tabelas: não Fornecer abreviaturas para os rótulos de cabeçalho: não Proporcionar uma alternativa de texto linear (na mesma ou em outra página), em relação a todas as tabelas que apresentem o texto em colunas paralelas e com translineação, até que os agentes do usuário (incluindo as tecnologias de apoio) reproduzam corretamente texto colocado lado a lado: não E, se você usar formulários (Prioridade 3) Incluir caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto, até que os agentes do usuário tratem corretamente os controles vazios: não

9 A seguir, os resultados do teste serão resumidos. Prioridade Respostas sim Respostas não Não se aplica Prioridade Prioridade Prioridade Verificando-se os resultados, percebe-se que a principal atitude a ser tomada em nível de melhorar a acessibilidade do site é a implantação de textos alternativos nas imagens. Existem também outros problemas de prioridade 2 e 3 a serem resolvidos, como o uso correto de tabelas, e a adição de elementos de metadados nas páginas, para melhorar o desempenho em pesquisas na internet. Testes Realizados Foi desenvolvido um protótipo em html com as modificações sugeridas ao site. O protótipo está funcional em apenas algumas páginas, pois apesar de simples, o site é bastante extenso, com uma base de dados muito grande. O protótipo foi testado nas plataformas e nos navegadores descritos a seguir. Plataforma Navegador Versão Problemas encontrados Windows XP MS Internet Explorer 6.0 Nenhum problema encontrado Windows XP Firefox 1.0 Nenhum problema encontrado Windows XP Firefox 1.0 Nenhum problema encontrado Linux Mozilla Nenhum problema encontrado Linux Konqueror Nenhum problema encontrado Como podemos ver, o protótipo implementado funcionou corretamente nos navegadores mais comumente utilizados nos sistemas operacionais Windows e Linux. Conclusões O site avaliado apresentou poucos problemas de usabilidade e acessibilidade. O site é simples, claro, e bastante objetivo. Porém, o site apresentou pequenos problemas em algumas partes, tal como a criação de novos cadastros. O site também apresentou alguns dos equívocos apontados por Nielsen, o que tira alguns pontos de sua qualidade geral.