De forma a dar visibilidade ao documentário final completo (diferentes trechos juntos num só vídeo), eis uma versão do protótipo de alta fidelidade (media e cultura; web) + versão beta (mobilidade/transportes).
Note-se que as correcções feitas ao documentário, resultantes dos testes efectuados, já estão colocadas em prática.
Testes de Usabilidade
Para o teste de usabilidade, o grupo usou 3 ferramentas: um Cognitive Walktrough, com um guião de tarefas para o utilizador realizar, uma tabela de registo de dados / comentários do utilizador (através da técnica de Thinking Aloud) e um inquérito final de satisfação do utilizador.
Ao efectuar o teste, foi possível ao grupo identificar 3 problemas de usabilidade na nossa plataforma:
- A posição do formulário de contacto
- A posição do formulário de registo
- A colocação de vídeo nos comentários
Essas foram os aspectos que os utilizadores mais comentaram, mesmo que não se tenham reflectido em cliques ou erros, pois nos dois casos o problema era os utilizadores andarem a procura do modo de efectuar as tarefas, necessitando, no caso do upload de video, do auxílio do grupo.
Em relação ao formulário de contaco, o principal aspecto negativo era o facto de se localizar no fundo da página, no footer. A maior parte dos utilizadores demorava um pouco a encontrá-lo por ter de fazer o scroll ao longo da página.
Já o formulário de registo, o facto de não se localizar no header provoca um pouco de hesitação nos utilizadores, pois é o lugar comum onde estes elementos se encontram.
Estes dois pequenos problemas não são, no entanto, alarmantes, pois não causaram confusão nos utilizadores, como os mesmos apontaram nos inquéritos de satisfação. Apenas são os aspectos que demoram mais a ser encontrados.
Quanto à colocação do vídeo nos comentários, a opção de colocar o url do vídeo, sem precisar do embbed e apenas tendo de “deslinkar” o mesmo revelou-se complicada para os utilizadores. A tentativa de alertar os utilizadores para esse facto com uma tooltip informativa também se revelou pouco eficaz, pois os utilizadores não viam o botão. Esta é uma questão fundamental para o grupo resolver.
Outra das tarefas do questionário que causou alguma dificuldade aos utilizadores testados foi o sistema de legendagem do youtube que é pouco intuitivo e prático. Este, no entanto, não é algo que seja da responsabilidade do grupo, logo não o podemos resolver.
Outro aspecto constatado nos testes está relacionado com as próprias funcionalidades do wordpress. A partir do momento que o utilizador está logado, surge uma barra no topo que permite igualmente pesquisar na plataforma, terminar sessão e editar o perfil.
Assim, três dos cinco utilizadores testados utilizaram essa ferramenta, e não a barra implementada pelo grupo ou os botões de editar perfil e fazer logout. No entanto, pensamos que isto não é um problema, e dá liberdade ao utilizador de utilizar o que for mais intuitivo.
Para completar os elementos utilizados para o teste, e a título de curiosidade, o grupo usou uma ferramente online chamada “ClickTale” (http://www.clicktale.com/), que rastreia diversos elementos num site como o número de cliques, as “heat zones”, ou seja, que são mais clicadas ou onde o mouse passa mais frequentemente, etc.
O grupo fez o registo dos cinco testers e monitorizou as zonas mais clicadas e os locais de passagem do rato, originando os seguintes documentos:
(Obs.: no mapa de cliques há uma zona que está oculta por não apresentar nenhum clique)
Testes de Compatibilidade
Efectuando os testes de compatibilidade entre browsers e concluímos que grande parte dos problemas prendem-se com o não reconhecimento de CSS3 por parte do Internet Explorer. No entanto, não é grave uma vez que tudo está funcional, são pequenos pormenores como fade-ins nos botões ou os cantos dos formulários.
Dois outros problema surgiram recentemente e são esses que prendem agora a atenção do grupo: os comentários recentes, no footer, não estão a respeitar a grelha e ultrapassam o espaço que lhes é destinado, e o botão de pesquisa, a lupa, não está alinhada com o campo de inserção de texto.
Teste de acessibilidade:
W3C xhtml validation:
Foram detectados 12 erros:
•10 são referentes ao código de embed dos vários vídeos do youtube presentes na página, código este que é gerado automaticamente.
•1 um refere-se a uma tag cujo atributo alt não está atribuído definido. Este erro só aparece uma vez, porque só exite uma imagem que foi colocada através do plugin de inserção de ficheiros nos comentários, e sendo a imagem colocada automaticamente este atributo não lhe é atribuído pelo script base do plugin.
•1 refere-se a um uma incorrecta invocação de um tag HTML numa variável de javascript.
W3C CSS validation:
São reportados 56 erros de CSS 2.1. Todos estes erros se referem a tags de CSS3.
São ainda reportados 211 avisos referentes a contrastes de cor na plataforma
Relativamente aos resultados da validação do HTML, os 10 erros provenientes de código do youtube serão difíceis de corrigir, uma vez que é um código gerado automaticamente. Quanto ao erro relativo ao tag <img/> irá ser corrigido visto representar uma informação importante para os programas de varrimento.
Deste teste resultaram 7 issues: 1 importante, 5 de baixa importância e 1 informação
Abaixo serão apresentados em promenor os erros, bem como as sugestões para a sua resolução.
1.
2.
3.
4.
5.
6.
7.
Os resultados deste teste foram bastante positivos, ainda assim iremos trabalhar para corrigir as falhar encontradas.
Em sequência dos posts já efectuados sobre os testes ao documentário eis o último teste efectuado ao documentário.
posts anteriores:
- http://euragora.blogs.ua.sapo.pt/11773.h
tml - http://euragora.blogs.ua.sapo.pt/10613.h
tml
A realização deste teste deveu-se à possível má interpretação do inquérito previamente realizado e para tal decidiu-se realizar um novo teste, mais detalhado, que nos permitiu aprofundar algumas questões.
Em baixo encontra-se o documento produzido.
Teste
Para a entrega TP6 foi proposto inicialmente que seriam desenvolvidas as restantes páginas que consitutem a plataforma, bem como as 2 funcionalidades que estavam em falta na home: mostrar e inserir comentários e mostrar os comentários recentes.
Todos estes objectivos foram cumpridos, embora ainda tenham alguns bugs a resolver. Além deles ainda foi complementada a experiência de comentar com um botão de ajuda à acção e foram também corrigidos alguns pequenissimos pormenores a nivel gráfico de estruturação da página.
Comentários e formulário de comentários na HOME
Originalmente e após a implementação do template base para a plataforma, na homepage não apareciam nem os comentários efectuados nessa página, ou seja ao vídeo do documentário, nem o formulário de inserção de comentários para essa mesma página.
Após pesquisa sobre este problema, foi encontrada a simples solução de “dizer que a página tem comentários”: $withcomments = "1" e assim os comentários e o seu formulário já aparecem na home.
Com esta implementação apareceram 2 bugs: a barra que serve para o utilizador formatar o seu comentário não aparece na home e quando submetemos um novo comentário a página “salta” para a página de post único, página essa que aparece desformatada, pois não era suposto a mesma aparecer (deveria manter-se na página onde o comentário é inserido). Embora ainda não estejam corrigidos estes bugs, estes são a grande prioridade agora para que idealmente estejam resolvidos a tempo de serem testados.
Comentários recentes
Como o widget fornecido pelo Wordpress para colocar no footer não reconhecia a nova estrutura criada por nós, foi necessário construir todo o mecanismo de pesquisa na BD e impressão da informação no local correcto.
Para que estes comentários não extravasem os limites da sua área de aparição, foi limitado o número de caracteres a ser pesquisado a 95.
Tooltip em Jquery
Como mecanismo de ajuda ao utilizador foi criado um botão (
) por baixo do formulário em que, quando o rato passa no botão, aparece uma tooltip que informa o utilizador para a particularidade de ter de deslinkar o URL de sites como o youtube ou o vimeo para que o plugin instalado assuma o link e faça automaticamente o embed. Para este mecanismo funcionar, foi necessário “linkar” o ficheiro de jquery a partir do site do mesmo para que a tooltip funcione.
Com esta implementação apareceu um novo erro: a tooltip só aparece na homepage. Como a invocação desta acção está escrita no ficheiro header.php, que está presente em todas as páginas, supostamente deveria aparecer correctamente em toda a plataforma. Este também é um erro no qual está focada a atenção do grupo.
Ajustamentos gráficos
Após conversa com o professor Pedro Amado e tendo em conta os comentários efectuados aquando a última entrega, foram feitos alguns reajustamentos a nível de CSS, nomeadamente:
· Espaçamento superior do botão de login.
· Reforço da margem de identação da encadeação dos comentários.
Link para a plataforma:http://blogs.ua.pt/Euragora/
Continuidade dos posts realizados anteriormente, relacionados com a versão beta do documentário:
- http://euragora.blogs.ua.sapo.pt/10613.h
tml - http://euragora.blogs.ua.sapo.pt/10857.h
tml - http://euragora.blogs.ua.sapo.pt/11850.h
tml
Desenvolvimento dos gráficos
Nesta fase do desenvolvimento do projecto, deparamo-nos com a necessidade de agilizar o processo de animação dos gráficos. Para isso aplicamos códico Javascript based - predefinição do After Effects - para tornar o processo mais simples, intuitivo e rápido.
Passando a explicar: o valor em percentagem (numérico) está directamente relacionado com a percentagem do crescimento do círculo; ou seja, ao valor 38% corresponde um círculo 38% completo; para controlar estes valores, utiliza-se uma layer nula onde se encontram 3 sliders de controlo que, tal como o nome indica, controlam (e facilitam) os valores do gráfico.
Fig1. Comparação entre valores
Fig2. Sliders de controlo
Fig3. Layer nula com as sliders de controlo
Sonorização
Como resultado do teste de usabilidade feito ao trecho do documentário (protótipo de alta fidelidade), o grupo decidiu adoptar outra técnica para redução do ruído de fundo. Nota: apesar de o som ser suficientemente achamos conveniente melhora-lo.
Tendo em conta as dificuldades na redução do ruído, contactamos o prof. de Sonorização Hedisson Mota com o objectivo de esclarecer algumas dúvidas e utilizar as ferramentas mais eficientes.
Com isto, foi-nos aconselhada a utilização do plugin profissional WNS (White Noise Suppressor). Apesar de tudo, este plugin não se revelou eficaz pelo que a solução passou por aplicar, por cima do WNS, o reductor de ruído predefinido do Nuendo 4, DeNoiser.
Fig4. Plugins aplicados para redução do ruído de fundo
Versão beta:
Com a mudança da data da entrega, o grupo achou que seria benéfico alterar a calendarização dos testes da plataforma.
Assim, os únicos testes que se efectuarão antes da versão BETA serão o de Segurança, uma vez que já todos os módulos a ser testados estão totalmente implementados e o de Acessibilidade, a realizar no dia anterior à entrega, em que se espera que a plataforma já esteja numa versão pronta a entregar.
Assim, este é o novo calendário de testes à Plataforma Eurágora:
Os erros listados derivam da análise dos inquéritos realizados a 32 alunos e da análise crítica do documentário por parte do grupo de trabalho.
- Correcção de erros ortográficos, nomeadamente na sequência inicial: onde se lia “tracar objectivos” e “eramus”, lê-se agora “traçar objectivos” e “erasmus”;
- Alinhamento da logomarca em relação à área útil do ecrã e reposicionamento da estrela em relação à marca “Eurágora”:
Figura 1 – Comparação entre alinhamentos (antes e depois da correcção) - Separador “Media e Cultura” – correcção da animação do texto – verificava-se inconsistência ao nível da animação da opacidade (efeito de escrita à máquina) em relação aos restantes momentos do vídeo onde se aplicou o mesmo efeito;
- Separador “Web” – correcção da velocidade da animação do globo – verificou-se que a velocidade não era constante ao longo do separador (erro de redundância na utilização de keyframes);
Figura 2 – Redundância de frames - Gráfico “quantas horas de TV vês por dia?” – Correcção do momento (no tempo) em que surgem as percentagens respectivas a cada resposta: antes surgiam apenas quando todas as barras horizontais estavam completas e em simultâneo; agora surgem no final do movimento da respectiva barra (individualmente) por forma a facilitar a leitura da informação; verifica-se uma melhor leitura porque cada percentagem está mais tempo (segundos) presente no ecrã e é mais fácil associa-la à respectiva barra.
Figura 3 – Comparação entre alinhamentos no ecrã (antes e depois) – Na imagem da esquerda verifica-se um posicionamento deficiente dos conteúdos em relação à área total. A imagem da direita representa a correcção desse posicionamento assim como um aperfeiçoamento gráfico ao nível das animações e da posição dos conteúdos entre si com o objectivo de melhorar a eficiência na transmissão da mensagem. - Texto de suporte - Aperfeiçoamento da composição ao nível do tamanho da fonte e da opacidade por se ter verificado que as definidas não tornavam o texto totalmente perceptível aquando da visualização do vídeo sem ser em full-screen.
Figura 4 – A imagem da esquerda representa as características da fonte na versão do protótipo de alta-fidelidade; a imagem da direita representa a versão corrigida. - Texto de suporte - Aperfeiçoamento da composição ao nível do tamanho da fonte.
Figura 5 – A imagem da esquerda representa o tamanho da fonte na versão original enquanto a da direita representa a versão corrigida. - Correcção do período de permanência do texto no ecrã por se ter verificado que o tempo inicial não permitia uma leitura perfeita do texto.
Figura 6 – Representa o texto cuja permanência no ecrã foi prolongado de cerca de 1 segundo para 2 segundos. - Velocidade do gráfico circular e das animações dos respectivos dados: na versão original (protótipo de alta-fidelidade) identificaram-se algumas falhas ao nível das animações no gráfico circular, nomeadamente no que diz respeito à sincronia entre a “fatia” do gráfico que se está a formar e o respectivo valor em percentagem.
Figura 7 – Diferença entre as posições dos valores (%) em relação à animação das “fatias” nas diferentes versões.
Esta lista não se encontra fechada, pelo que podem ser acrecentados erros no decorrer do trabalho.
Na realização do teste ao documentário obtiveram-se 32 inquéritos preenchidos.
Os dados foram posteriormente inseridos no Microsoft Excel e foi gerado o seguinte conjunto de gráficos que correspondem a cada uma das perguntas do inquérito.
Figura 1 - Representação gráfica representativa dos dados recolhidos
Conclusões sobre os dados recolhidos
Depois de tratados os dados, e observando os gráficos, tendo em conta as respectivas escalas utilizadas em cada pergunta, as conclusões são:
“Que temas aborda este excerto do documentário?”
Todos os participantes assinalaram como resposta “Media e Cultura” e “Internet”. Sendo estes os temas que foram abordados neste trecho, pode-se concluir que os separados utilizados na identificação dos temas estão bem visíveis, sem necessidade de alteração.
“De um modo geral, quanto à velocidade da informação textual, consideras que seja:”
As respostas dividiram-se em 2 grupos: 19 dos inquiridos disse que a velocidade da informação textual é Algo lenta; 13 disseram que é Adequada.
Apesar dos resultados dizerem que a velocidade do texto é algo lenta, o grupo, depois de nova visualização e análise do doumentário, optou por prolongar o tempo de permanência de alguns trechos com informação textual, por considerar que a pergunta pode ter sido mal interpretada. Sendo assim, definiram-se os seguintes objectivos (com vista o melhoramento do produto):
- Observar as velocidades das informações textuais e identificar os casos onde surgem mais rapidamente;
- Reduzir as velocidades para dar mais tempo ao visualizador de perceber todos os conteúdos textuais.
De um modo geral, no que diz respeito à velocidade dos gráficos, consideras que seja:
Apesar das respostas se dividirem por 4 grupos, a maior concentração focou-se em dois: 18 dos participantes assinalaram que a velocidade dos gráficos é adequada; 11 disseram que era algo rápida. Só 2 afirmaram ser algo lenta e 1 demasiado rápida.
Pode-se concluir então que é necessário alterar a velocidade dos gráficos, tendo em conta a dispersão das respostas, forçando uma análise gráfico a gráfico.
Os objectivos serão:
- Observar a diferença nas velocidades das animações dos diferentes gráficos;
- Uniformizar a velocidade dos gráficos e reduzir um pouco a velocidade das animações.
Clareza da informação, sendo que 0 corresponde a nada clara e 10 a muito clara?
As respostas concentram-se nas possibilidades de resposta do 6 ao 10, existindo 2 pessoas que classificaram a clareza da informação com um 4.
Conclui-se que a informação está bem explicita, tendo sido a avaliação positiva.
Qualidade técnica, sendo que 0 corresponde a muito fraca e 10 a muito boa?
Tal como a resposta anterior, a avaliação é maioritariamente positiva. As respostas concentram-se nas possibilidades 5 a 10, havendo maior concentração na possibilidade 8 (11x) e 9 (9x).
Qualidade de som, sendo que 0 corresponde a muito fraca e 10 a muito boa?
Os resultados para esta questão foram mais dispersos. Apenas a classificação 1 e 2 não foram assinaladas por nenhum dos participantes. Apesar de termos um número significativo de possibilidades assinaladas compreendidas entre os valores 6 a 10 (27 das respostas), ainda existem participantes que assinalaram respostas consideradas negativas.
Como o objectivo é termos, não só um som razoável, mas uma qualidade de som elevada, concluiu-se que este deverá ser melhorado.
Os objectivos serão assim os seguintes:
- Identificar quais os momentos em que o som é de menor qualidade, isto é, com mais ruído associado, ou o volume inadequado;
- Suprimir o máximo de ruído possível dos momentos identificados.
Como classificas o volume (música de fundo):
Dos 32 participantes, só 4 é que classificaram o volume como Elevado, sendo que os restantes 28 referiram que o volume é Adequado.
Conclui-se que não surge a necessidade de alterar o volume da música de fundo.
Como classificas o volume (intervenções do focus group):
As respostas concentraram-se em 2 grupos: 25 dos participantes classificaram o volume das intervenções do focus group como Adequado; 7 assinalaram o volume como Baixo. Neste caso já existe uma percentagem mais considerável de participantes a identificar o volume como baixo.
Devido a estes resultados, e também pela existência de ruído em alguns dos trechos, concluiu-se que o som deverá ser editado.
Os objectivos serão:
- Identificar quais os momentos em que o som tem mais ruído e/ou se encontra mais baixo;
- Editar o som de forma a retirar o ruído e uniformizar os trechos de focus group existentes nesta parte do documentário.
