Infografia do Melanoma

O meu projecto da infografia é em conjunto com a Elisa, sendo o tema o Melanoma.

Escolhemos esse tema para que se possa entender muito melhor como se dá o melanoma, numa altura em que há o aquecimento global.

Escolhemos também pelo desafio por ter muita informação e termos que pôr o mais simples possível uma matéria tão importante mas, obviamente, com toda a informação necessária.

Para melhor nos organizarmos, fizemos um prototipo que considero Low-fi, porque só tem uma ideia geral do que vai ser o trabalho final.

Apresento, então, a imagem do projecto, que irei mostrar os desenvolvimentos.

Site da Gaia Fm "alterado"

Como pedido, apresento o meu projecto que define quais as alterações que faria ao site que tenho vindo a analisar, tendo em conta várias questões como erros, a níveis de estética, usabilidade, etc.

Em primeiro lugar, passo a apresentar a página:

Eu penso que este site tem uma boa apresentação e não foge dos outros sites, mas ao mesmo tempo distingue-se deles por ter características próprias.

Umas das coisas que me agrada neste site é que mantém um menu ao longo de todas as páginas, permitindo uma navegabilidade fácil. Tem, ainda, um botão que permite, em qualquer altura, voltar ao início.



Contudo, há coisas que, mesmo assim, não me agradam muito, nomeadamente o elevado número de "notas soltas" que tem no site. Existe a possibilidade de navegar em 241 páginas! Isto é demasiado, já que não é de qualquer interesse ver as noticias de há 3 anos atrás... Ou pelo menos não ter as 241 páginas apresentadas!




Só há mais uma coisa que mudaria neste site:




A ordem das notícias não me agrada, na medida em que isto é uma rádio regional. A ordem de importância das notícias é Regional, Cultura, Desporto, Mundo e Nacional. No meu ponto de vista, deveria ficar Regional, Nacional, Desporto, Cultura, Mundo. Isto porque regional, porque a rádio é regional, Nacional porque são as notícias mais próximas, Desporto porque a rádio é muito ligada a essa temática, Cultura e, por fim, o mundo, exactamente por essa questão de ser mais "afastada" dos ouvintes.

De acrescentar, ainda,que o que mais mudaria é a pouca acessibilidade que tem.

De resto, penso que este site se estaca pela sua simplicidade mas, ao mesmo tempo, pela boa qualidade.

Acessibilidade na Web

No fundo, acessibilidade na Web significa que pessoas com necessidades especiais podem usar a web.

Existem ferramentas de avaliação que auxiliam a tarefa de avaliação. Contudo, nenhuma ferramenta pode determinar, por si só, se um site cumpre as directrizes de acessibilidade. Acaba por ser necessária uma avaliação humana.

Ainda assim, existem alguns "testes rápidos":

1. Verifique os textos alternativos para imagens que transmitam informação - Ao colocar o rato sobre a imagem, deve aparecer um quadrado amarelo que descreve a imagem. Porque em browsers que não suportem imagens, é esse texto que é lido/ouvido.
2. Verifique se há textos alternativos para imagens decorativas - Se há, não deve haver, porque não há razão para que o utilizador tome conhecimento de uma imagem meramente decorativa.
3. Ter atenção os sons - Estando sem volume, o website deve disponibilizar um conteúdo escrito para o conteúdo áudio.
4. Verifique a acessibilidade dos seus formulários – Normalmente, cada campo de um formulário possui texto, como “nome”, “Telefone”, entre outros. Clique sobre o texto descritivo do campo e deverá aparecer o cursor 'piscando' no campo respectivo. Se o cursor não aparecer é porque não foi usado o elemento no formulário e isto poderá tornar o formulário inacessível para alguns usuários.
5. Verifique se há possibilidade de aumentar o tamanho dos textos – No caso do Internet Explorer, que é onde navegam a maior parte das pessoas, há possibilidade de aumentar o tamanho do texto. Se isto não aconteceu, então o site estará inacessível para portadores de baixa visão.
6. Verifique o seu site no Browser Lynx – Se conseguirmos navegar neste browser com o site escolhido, então pode ter a certeza que muitos dos itens de acessibilidade estão em conformidade.
7. Verifique a navegabilidade sem uso do rato – Ou seja, deve-se usar somente o Tab/ Shift – Tab e Retroceder? Se não for possível, então o site não poderá ser navegado por utilizadores impossibilitados de usar o rato.
8. Verifique a existência de um mapa do site – Existe um mapa do site, facilmente localizável? Se não, os usuários poderão perder-se no site.
9. Assegure-se que os textos dos links sejam descritivos para o destino remetido – Os invisuais navegam por sites na Internet, valendo-lhe a tabulação pelos links. Esses textos têm sentido? O “Clique aqui” e “mais” são dois exemplos de textos não descritivos para links.
10. Verifique a sua página em programas automatizados – É o caso do Bobby e Wave. Embora não sejam capazes de verificar tudo na acessibilidade, mas ajuda a perceber a acessibilidade do site.

Tendo em conta o W3C, existem 65 pontos de verificação organizados por 3 níveis de prioridade:

Nível 1 - Onde um ou mais grupos de utilizadores ficarão impossibilitados de aceder a informações.

Nível 2 - Um ou mais grupos terão dificuldades.

Nível 3 - Poderão ter dificuldades.

Para verificar a acessibilidade do site da Gaia Fm, usei o site de Cynthiasays, onde obtive o resultado para os 3 níveis de prioridade apresentados.

No fundo, a conclusão que obtenho é que o site está bem feito, mas em termos de acessibilidade é muito mau, porque tem poucos meios de acessibilidade.

Avaliação Heurística

Este Post refere-se à avaliação heurística que é, no fundo, uma "inspecção" sistemática da usabilidade de uma interface com utilizadores.

Tendo em conta a metodologia de Nielsen, vou fazer uma análise mais aprofundada do site que analisei, o da Gaia FM.

A metodologia do Nielsen consiste em responder a 3 tópicos:

1. Conformance Question - é acerca do que o sistema deve fazer ou o que os utilizadores devem ser capazes de fazer para satisfazer a heurística.
2. Evidence of conformance - Coisas para procurar, por exemplo, características de design ou falta de características de projecto.
3. Motivation - Problemas de usabilidade que a heurística tenta evitar.

Site da Gaia FM

1- Visibilidade do estado do sistema:

Conforme Question - Os utilizadores são mantidos informados sobre o progresso do sistema com feedback apropriado dentro tempo razoável? Sim, o site é constantemente remodelado, até porque tem notícias, o que faz com que tenha que ser sempre seguido por quem o gere, para não ter informação desactualizada.

Evidence of conformance - Tem a ver com as provas necessárias, que devem ser identificadas através da análise de tarefas individuais. Não há, à primeira vista, nada que faça com que se possa receber informação, algum feedback. A não ser com o envio de e-mails pessoais, mas isso depende de cada um dos locutores. Mas a resposta costuma ser rápida.

Motivation - o feedback permite ao usuário acompanhar os progressos na solução das suas funções, permite o encerramento das tarefas e reduz a ansiedade do usuário. O que eu posso falar aqui, só se for na brevidade com as respostas são dadas, porque eles respondem rapidamente ao que lhes é enviado.

2- Correspondência entre o sistema e o mundo real

Conformance Question - Será que o sitema usa conceitos e linguagem familiar ao utilizador? E usa a informação numa ordem natural e lógica? Sim, a linguagem usada é simples, sendo entendida por quem visita o site.

Evidence of conformance - Provas necessárias devem ser identificadas através de estudos de usuário e através da análise de tarefas individuais. Isto não está perceptível no site.

Motivação - um bom jogo minimiza o conhecimento extra, necessário para utilizar o sistema.

3- Manual de controlo e liberdade

Conformance question - Os utilizadores podem fazer o que querem, quando querem? Sim, este site está, na minha opinião, muito bem construído, principalmente por essa liberdade que dá a quem visita o site, por ter um menu que se mantém ao longo de todas as páginas.

Evidence of conformance - Se tem recursos de design, como o "Desfazer / Refazer"; se estão claramente identificadas as saídas, ... Como o site é feito sem abrir novas páginas, não há necessidade de ter esses botões de "retroceder". A pessoa entre e sai directamente do site, não de alguma página que lhe pertence.

Motivation - Os utilizadores escolhem acções por engano. Muito dificilmente isto acontecerá, porque as informações estão claras.

4- Coerência e padrões

Conformance Question - Os elementos de Design, como objectos e acções têm o mesmo significado em situações diferentes? Sim, mantém-se ao longo de todo o site.

Evidence of Conformance - Coerência entre os métodos de tarefas. Sim, o site tem este tópico.

Motivation - Permite aos utilizadores generalizar a partir da experiência existente no sistema. Sim, porque é semelhante a muitos outros sistemas.

5- Prevenção de erros

Conformance question - Os utilizadores cometeriam esse erro se fosse um bom projecto? Penso que não, porque não encontrei grandes erros neste site.

Evidence of conformance - Adjacência de teclas de função e as opções de menu. Sim, também tem, porque tem um menu na parte de cima do site, assim como tem na inferior.

Motivation - Os erros são a principal fonte de frustração, ineficiência e ineficácia durante o uso do sistema? Não, como já referi, não encontrei erros neste site.

6 - Reconhecimento em vez de "recall"

Conformance question - São elementos de design como objectos, acções e opções visíveis? Sim

Evidence of conformance - Devem ser identificadas análise de tarefas individuais. Sim

Motivation - Os comandos ou opções disponíveis podem permitir que o utilizador preveja o seu significado. Sim, todos os comandos são extremamente claros quanto ao seu significado.

7- Flexibilidade e eficiência de utilização

Conformance question - Os métodos de trabalho são eficientes e os utilizadores podem usar atalhos? Como o site não tem muitas áreas, não é necessário recorrer a atalhos.

Evidence of conformance - Presença de características de design, como aceleradores de teclado - Não possui.

Motivation - Métodos ineficientes podem reduzir a eficácia do utilizador e causar frustração. Não, como a informação é reduzida e está explícita, o utilizador não fica frustrado.

8 - Estética e design minimalista

Conformance question - Não contêm diálogos irrelevantes? Não, a informação é, quase toda, relativa à rádio e a assuntos que nela são frequentemente retratados.

Evidence of conformance - Os objectivos devem ser identificados através da análise de tarefas individuais.

Motivation - Alguns utilizadores com um sistema podem ter que encontrar uma acção para atender a uma necessidade particular. Não, o sistema é simples e claro.

9 - Ajude os utilizadores a reconhecer, diagnosticar e recuperar de erros

Conformance Question - As mensagens de erro são expressas numa linguagem simples? Não encontrei nenhuma mensagem de erro.

Evidence of conformance - Os erros devem ser identificados por mensagens. Como não encontrei nenhum erro, não é possível responder.

Motivation - Os erros são a principal fonte de frustração, ineficiência e ineficácia durante o uso do sistema. Dou a mesma resposta que anteriormente.

10 - Ajuda e documentação

Conformance question - É fornecida informação de ajuda apropriada, sendo esta fácil para a pesquisa? Não. Como já disse, o navegador é simples.

Evidence of conformance - A ajuda deve ser de fácil pesquisa.

Motivation - Idealmente, um sistema não deve exigir documentação. O site só pede dados para fazer um registo.

Deste modo, a conclusão que posso chegar deste site é que é simples e conciso.

Web Design

Depois de num antigo Post ter falado de algumas “regras” para a criação de sites e ter serem esses, ao mesmo tempo, alguns princípios de Web design, resta-me tentar concluir esse tema.

No fundo, para se construir um site deve-se ter em conta algumas das regras mencionada, mas também se deve seguir um alinhamento lógico dos componentes do site, isto é, o site deve ter uma “linha-guia” que forneça um referencial para os itens que compõe a página Web.

Uma das coisas que se deve ter em conta é que para ter um bom site não é só ter um bom design gráfico, os aspectos relacionados com a usabilidade ou até mesmo com os aspectos de programação. Há outros factores, como:

• a procura de qualidade e credibilidade - se uma informação é credível, o utilizador tem tendência em voltar a esse site.

• o utilizador não lê toda a página - ele apenas procura as palavras que lhe interessam. Faz apenas uma chamada "leitura na diagonal".

• o utilizador procura a informação imediata - se não encontra logo a informação que quer, passa rapidamente para a página seguinte.

• os utilizadores usam a intuição - a intuição do utilizador é clicar. Se ele não encontra maneira de clicar, então desiste da página.

• o utilizador quer manter-se no controlo - ele não gosta de clicar e ir ter a outras páginas sem ser avisado, principalmente quando estas são de publicidade.

Estudos de Ben Shneiderman acerca do Web Design

Estas são as chamadas 8 regras de ouro do Web design, feitas pelo estudo de Shneiderman:

• Procurar a consistência
• Disponibilizar atalhos para utilizadores frequentes
• disponibilizar feedback informativo
• desenhar diálogos de modo que levem a um fim claro
• oferecer formas simples de lidar com erros
• permitir uma forma fácil de desfazer as acções
• fornecer a sensação de controlo
• reduzir a necessidade de memorização a curto termo

Principais erros do web design:

• impedir a utilização do botão "Back"
• Abrir novas janelas
• Mudar de URL
• entre outros
• ...

Através destas regras e da enumeração de alguns erros, é mais fácil percepcionar qual a melhor maneira de construir um site que agrade o utilizador.

Modelos conceptuais e Prototipagem

Um modelo conceptual é uma descrição de alto nível do sistema proposto. É feito para tentar controlar a execução das actividades, sendo necessário pensar como o sistema aparece aos utilizadores.

Antes de se desenhar, deve-se formular algumas questões, nomeadamente:

• Qual o problema?
• Quais as necessidades do utilizador?
• Quais os objectivos de usabilidade?
• O que queremos criar?
• Quais são as suposições?
• Será que se vai atingir o que se deseja?

Quanto aos protótipos feitos, existem vários tipos:

• Low-fi
• Medium-fi
• Hi-hi

Low-fi: É um esboço, que dá uma ideia geral do produto final, mas faltam bastantes pormenores. Tem a vantagem de ser feito rapidamente e fica também barato, por não ser preciso materiais muito caros para serem feitos.

Medium-fi: É uma mistura entre o Low-fi e o Hi-fi. É mais desenvolvido que o primeiro, mas ainda não tem tanta qualidade como o Hi-fi.

Hi-fi: É o que se assemelha mais ao produto final. É suficientemente realista para testar as ideias com o público-alvo antes de se fazer um investimento;

O protótipo deve ser feito para reduzir o tempo de execução e de colocação no servidor.

	Baixa Fidelidade	Média Fidelidade	Alta-fidelidade
Fase do processo de Design	Definição de requerimentos	Especificação da Arquitectura da Informação	Lançamento do produto
Tipo de protótipo	Esquemas feitos à mão	Detalhado e com recursos de interacção	Realístico
Ferramentas	Material de escritório	Word PowerPoint …	Dreamweaver Visual Basic FreeHand Photoshop …

Os protótipos feitos em papel têm as suas vantagens porque as pessoas são menos resistentes a mudanças; foi investido pouco tempo e poucos recursos no projecto; são construídos com ferramentas simples, que não requerem habilidades específicas;

Tipos de protótipo em papel:

Protótipo Horizontal	Protótipo Vertical	Protótipo T
•Representa a arquitectura de informação em amplitude •Tem pouca ou nenhuma funcionalidade ou conteúdo em profundidade •Usado para obter impressões gerais do design	•Representa uma pequena área do projecto com profundidade de interacções e funcionalidades •Usado para avaliar o modelo de interacção de uma área do projecto	•Representa toda arquitectura de informação em amplitude e profundidade •Combina as características dos protótipos verticais e horizontais •Usado para avaliar a arquitectura de informação em algumas áreas detalhadas •Permite generalizar as observações feitas para as diferentes áreas

Deste modo, antes de se fazer qualquer projecto, deve-se fazer um protótipo, tendo em conta todas as medidas apresentadas anteriormente, nomeadamente o uso do Low ou Hi-hi, dependendo do tempo e dinheiro disponíveis.

Teste com utilizadores

Tendo em conta que não foi possível fazer uma análise heurística do Site que apresentei anteriormente (www.gaiafm.com), decidi mostrar que já tinha feito uma análise, de outro site Apresento, deste modo, o teste com utilizadores que já tinha feito.

Este texto foi feito tendo em conta o site do FCPorto. Na altura que foi feito, era como está nas imagens. Entretanto foi remodelado. Por isso refiro que foi feito ano passado, sendo apenas a minha intenção mostrar que já fiz os ditos testes com utilizadores.

Sendo assim, na altura, decidi colocar três questões a três utilizadores distintos, que nunca tinham visitado o referido site. Deste modo, é muito mais fácil captar quais as dificuldades de quem visita o sítio da Internet.

O primeiro objectivo era ver qual a classificação do FCP na modalidade de hóquei em patins. Para isso, era necessário seguir 5 passos, para que fosse de uma maneira mais lógica, embora houvesse outras opções, como seguirem as notícias. Assim, acabariam por chegar à dita classificação.

Apresento, então, os resultados para o primeiro objectivo:

Utilizador 1	Passo 1	Passo 2	Passo 3	Passo 4	Passo 5
Cliques	1	1	1	1	1
Erro
Tempo Médio	46 segundos

Utilizador 2	Passo 1	Passo 2	Passo 3	Passo 4	Passo5
Cliques	1	1	1	1	1
Erro
Tempo Médio	1m e 26 segundos

Utilizador 3	Passo 1	Passo 2	Passo 3	Passo 4	Passo 5
Cliques	1	1	1	1	1
Erro
Tempo Médio	1m e 18 segundos

Conclusão: Com poucos cliques, os utilizadores conseguiram atingir o objectivo proposto. Mas demoraram bastante tempo, principalmente o utilizador número 2, que foi quem disse que havia de existir um link directo na barra de ferramentas principal do site dedicada às modalidades, coisa que não acontece, já que esta especialidade aparece apenas numa barra lateral e é só ao depois da pessoa ter clicado na parte relativa às informações – qualquer utilizador associa esta área a assuntos que se possam acrescentar, não a uma coisa primordial como o assunto de modalidades.

Imagem 1: Barra de ferramentas principal do site do FCPorto

Eu própria, que conheço o site, tive demasiadas dificuldades em atingir o segundo objectivo: encontrar a planta do estádio. Apesar de na barra de ferramentas haver uma secção dedicada ao Estádio, a verdade é que a planta não aparece nesse local.

Isto fez com que os resultados dos utilizadores fossem únicos:

Utilizador 1	Passo 1	Passo 2
Cliques
Erro	Desistiu
Tempo Médio

Utilizador 2	Passo 1	Passo 2
Cliques
Erro	Desistiu
Tempo Médio

Utilizador 3	Passo 1	Passo 2
Cliques
Erro	Desistiu
Tempo Médio

Conclusão: Todos os utilizadores desistiram. Os dois primeiros utilizadores ao fim de 2 minutos e o terceiro utilizador este 5,5 minutos. Todos disseram o mesmo: que a planta do estádio deveria estar na parte dedicada a isso, ou seja, na secção do estádio. Por isso, todos foram automaticamente a essa parte, mas em vão. Para encontrar a planta, era necessário clicar na secção de “Serviços”, o que levou um dos utilizadores a dizer “Isto não é um serviço!!”. Pode-se ver, então, um enorme lapso na organização deste site, já que os utilizadores nunca ficariam muito tempo à procura de uma planta, já que ela é quase impossível de encontrar de forma lógica.´

O último objectivo era encontrar o vídeo do golo do Benfica, na 2º Jornada.

Os resultados foram os seguintes:

Utilizador 1	Passo 1	Passo 2	Passo 3
Cliques	1	2	1
Erro
Tempo Médio		50 segundos

Utilizador 2	Passo 1	Passo 2	Passo 3
Cliques	2	1	1
Erro
Tempo Médio		31 segundos

Utilizador 3	Passo 1	Passo 2	Passo 3
Cliques	1	1	1
Erro
Tempo Médio		24 segundos

Conclusão: Este foi um dos objectivos mais rápidos a atingir, porque está tudo muito claro, já que se fala em vídeos e há um link directo na barra de ferramentas, que faz com que as pessoas vão lá directamente e encontrem facilmente o vídeo.

Depois desta análise, a principal conclusão que posso reter é que o site podia estar, de facto, mais bem organizado, se bem que em algumas coisas – como os vídeos, por exemplo – são mais fáceis de percepcionar. Em suma, há algumas coisas que os criadores de site devem alterar para que o site se torne mais rentável.