usabilidade para o site da revista cadernos unifoa
DESCRIPTION
trabalho de conclusão de cursoTRANSCRIPT
FUNDAÇÃO OSWALDO ARANHA
CENTRO UNIVERSITÁRIO DE VOLTA REDONDA – UNIIFOA CURSO DE GRADUAÇÃO EM DESIGN
TRABALHO DE CONCLUSÃO DE CURSO
LAERT DOS SANTOS ANDRADE
USABILIDADE PARA O SITE DA REVISTA CADERNOS UNIFOA
VOLTA REDONDA
2011
FUNDAÇÃO OSWALDO ARANHA
CENTRO UNIVERSITÁRIO DE VOLTA REDONDA – UNIIFOA CURSO DE GRADUAÇÃO EM DESIGN
TRABALHO DE CONCLUSÃO DE CURSO
USABILIDADE PARA O SITE DA REVISTA CADERNOS UNIFOA
Trabalho de Conclusão de Curso
apresentado ao Curso de Design, ênfase em
Design Gráfico, como requisito parcial para
obtenção do título de Bacharel em Design.
Aluno: Laert dos Santos Andrade
Orientadora: Prof.ª Mestra Ana Paula Zarur
VOLTA REDONDA
2011
FOLHA DE APROVAÇÃO
LAERT DOS SANTOS ANDRADE
USABILIDADE PARA O SITE DA REVISTA CADERNOS UniFOA
Banca Examinadora:
__________________________________________
Prof.ª Mestra Ana Paula Zarur
__________________________________________
Prof. Mestre Bruno Corrêa
__________________________________________
Prof.ª Dr.ª Daniella Regina Mulinari
__________________________________________
Prof. Mestre Darwin
VOLTA REDONDA 2011
AGRADECIMENTOS
A Deus primeiramente, à minha esposa e à
minha família que me ajudaram a chegar até
aqui para a realização desse sonho.
RESUMO
O objetivo deste projeto era desenvolver um novo website, mais acessível e de fácil
navegação, para a Revista Cadernos UniFOA. Este trabalho englobou uma ampla
pesquisa sobre Usabilidade, a partir da qual foram traçados os principais parâmetros
para o desenvolvimento do layout. Usabilidade é um termo usado para definir a
facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de
realizar uma tarefa específica e importante. Na interação humano-computador e na
ciência da computação, usabilidade normalmente se refere à simplicidade e
facilidade com que uma interface, ou um website pode ser utilizado. Ela está
diretamente ligada ao diálogo na interface e à capacidade do software permitir que o
usuário alcance suas metas de interação com o sistema. Um website que possui boa
usabilidade deve ser de fácil aprendizagem, permitir uma utilização eficiente e
apresentar poucos erros. No intuito de otimizar este aspecto no site do Cadernos
UNIFOA, foram realizados de dois testes de usabilidade da nova interface, em
etapas diferentes (wireframe e layout). Estes testes foram filmados para posterior
análise. Os dados levantados durante este período de testes permitiram uma boa
avaliação dos locais onde os itens deveriam ser posicionados para que o site fosse
de fácil navegação, reduzindo o tempo que usuário necessita para executar uma
tarefa ou pesquisa. O novo produto além de disponibilizar todas as edições da
revista, conta com uma área própria para envio e controle dos artigos.
Palavras-chave: Usabilidade, Cadernos UniFOA, website.
ABSTRACT
The objective of this project was to develop a new website, more accessible and
easier to navigate for the Magazine UniFOA’s notebooks. This work included
extensive research on Usability, from which we traced the main parameters for the
layout development. Usability is a term used to define the easiest way which a
people can use a tool or object in order to perform a important and specific task. The
human & computer interaction and computer science, usability refers to the simplicity
and ease way which an interface or a website shall be used. It is linked directly to the
dialogue at the interface and the ability of the software allows the user to achieve its
goals of interaction with it. A website with good usability should be easy to learn,
allowing an efficient and few errors. In order to optimize this aspect, the UniFOA’s
notebooks website, two tests were conducted the usability of the new interface, in
different stages (wireframe and layout). These tests were recorded for later analysis.
The data collected during this period of test allowed a good assessment of where the
items should be positioned, for the website would be easy to navigate, reducing the
time that an user would spend to perform a task or researching. The new product
besides of become available all editions, also has a suitable area for publishing and
articles control.
Key words: Usability, Cadernos UniFOA, website.
SUMÁRIO
1. INTRODUÇÃO .................................................................................................... 14
2. OBJETIVO DO PROJETO .................................................................................. 15
2.1. Objetivos Operacionais............................................................................... 15
2.2. Objetivos Específicos ................................................................................. 15
3. JUSTIFICATIVA .................................................................................................. 16
4. PÚBLICO ALVO .................................................................................................. 21
5. METODOLOGIA ................................................................................................. 22
5.1. Conteúdo .................................................................................................... 22
5.2. Mapa do site ............................................................................................... 22
5.3. Wireframe ................................................................................................... 22
5.4. Geração de Alternativas - Wireframe.......................................................... 24
5.5. Primeiro Teste de Usabilidade .................................................................... 24
5.6. Layout ......................................................................................................... 25
5.7. Design de Interface .................................................................................... 26
5.8. Segundo Teste de Usabilidade ................................................................... 27
5.9. Codificação e Publicação ........................................................................... 27
6. USABILIDADE .................................................................................................... 28
6.1. Definição ..................................................................................................... 28
6.2. Metas de usabilidade – da perspectiva do usuário ..................................... 29
6.3. Metas decorrentes da experiência do usuário ............................................ 30
6.4. Design e princípios de usabilidade ............................................................. 31
6.5. Heurística e princípios de usabilidade ........................................................ 32
6.6. Problemas em casos sem usabilidade ....................................................... 35
6.6.1. Problemas de ergonomia e de usabilidade .................................... 36
7. ACESSIBILIDADE............................................................................................... 37
7.1. Deficiência visual: ....................................................................................... 37
7.2. Baixa visão ................................................................................................. 37
7.3. Daltonismo .................................................................................................. 38
7.4. Deficiência auditiva ..................................................................................... 38
7.5. Visual e percepção auditiva ........................................................................ 38
7.6. Transtorno de déficit de atenção ................................................................ 38
7.7. Deficiência intelectual ................................................................................. 39
7.8. Deficiências de memória ............................................................................ 39
7.9. Saúde deficiência mental............................................................................ 39
7.10. Incapacidade física ..................................................................................... 39
7.11. Deficiência de fala ...................................................................................... 39
7.12. Desordens de apreensão ........................................................................... 40
8. CONTEÚDO DO SITE CADERNOS UNIFOA .................................................... 41
8.1. Página índex ............................................................................................... 41
8.2. Páginas internas ......................................................................................... 42
8.3. Área para envio de artigos .......................................................................... 43
9. ARQUITETURA DA INFORMAÇÃO ................................................................... 44
9.1. Vantagens para o projeto ........................................................................... 45
10. MAPA DO SITE .................................................................................................. 46
11. FLUXOGRAMA DO SISTEMA PARA ENVIO DE ARTIGOS .............................. 47
12. WIREFRAMES – GERAÇÃO DE ALTERNATIVAS ............................................ 49
12.1. Primeira proposta ....................................................................................... 49
12.2. Segunda proposta ...................................................................................... 50
12.3. Terceira proposta ....................................................................................... 51
13. WIREFRAME ADOTADO ................................................................................... 53
13.1. Páginas públicas ........................................................................................ 53
13.2. Acesso restrito - Usuário ............................................................................ 61
13.3. Acesso restrito – Avaliador ......................................................................... 67
13.4. Acesso restrito – Editora Chefe .................................................................. 70
14. PRIMEIRO TESTE DE USABILIDADE ............................................................... 72
14.1. Usuários Universitários ............................................................................... 73
14.2. Usuários Professores ................................................................................. 74
14.3. Resultado ................................................................................................... 75
15. LAYOUT .............................................................................................................. 76
15.1. Cores usadas ............................................................................................. 76
15.2. Acesso restrito - Usuário ............................................................................ 85
15.3. Acesso restrito - Avaliador .......................................................................... 91
15.1. Acesso restrito – Ed. Chefe ........................................................................ 94
16. SEGUNDO TESTE DE USABILIDADE ............................................................... 96
16.1. Usuários Universitários ............................................................................... 97
16.2. Usuários Professores ................................................................................. 98
16.3. Resultado ................................................................................................... 99
17. CONCLUSÃO ................................................................................................... 100
18. REFERÊNCIAS ................................................................................................ 101
LISTA DE TABELAS
Tabela 1 – Resoluções de tela .................................................................................. 25
Tabela 2 – Usabilidade usável: que termos empregar? ............................................ 35
Tabela 3 – Análise do 1º Teste de Usabilidade com Wireframe – Universitários ...... 73
Tabela 4 – Análise do 1º Teste de Usabilidade com Wireframe – Professores ......... 74
Tabela 5 – Análise do 2º Teste de Usabilidade com Layout – Universitários ............ 97
Tabela 6 – Análise do 2º Teste de Usabilidade com Layout – Professores .............. 98
LISTA DE FIGURAS
Figura 1 – Classificação da Revista Cadernos UniFOA ............................................ 16
Figura 2 – Visualização a página índex.html no modo Split do Dreamweaver. ......... 17
Figura 3 – Problema no topo e na tipografia. ............................................................ 18
Figura 4 – Recorte da página index.html mostrando a forma de envio de artigos ..... 19
Figura 5 – Navegação incorreta na página especiais_tcc2010-2.html ...................... 19
Figura 6 – Edital Produção Acadêmica UERJ ........................................................... 21
Figura 7 – Modelo de wireframe ................................................................................ 23
Figura 8 – Mapa do site ............................................................................................. 46
Figura 9 – Proposta 1 - wireframe ............................................................................. 49
Figura 10 – Proposta 2 - wireframe ........................................................................... 50
Figura 11 – Proposta 3 - wireframe ........................................................................... 51
Figura 12 – Wireframe da página índex .................................................................... 53
Figura 13 – Wireframe - Resultados da Busca .......................................................... 53
Figura 14 – Wireframe - Acessibilidade ..................................................................... 54
Figura 15 – Wireframe - Mapa do site ....................................................................... 54
Figura 16 – Wireframe - Expediente .......................................................................... 55
Figura 17 – Wireframe - Edições ............................................................................... 55
Figura 18 – Wireframe - Edição modelo .................................................................... 56
Figura 19 – Wireframe - Edições Especiais ............................................................... 56
Figura 20 – Wireframe - Edição Especial TCC .......................................................... 57
Figura 21 – Wireframe - Instruções para autores ...................................................... 57
Figura 22 – Wireframe - Permutas ............................................................................ 58
Figura 23 – Wireframe - Dúvidas frequentes ............................................................. 58
Figura 24 – Wireframe - Quem já enviou / Autores ................................................... 59
Figura 25 – Wireframe - Quem já enviou / Universidades ......................................... 59
Figura 26 – Wireframe - Envio de artigos .................................................................. 60
Figura 27 – Wireframe - Login ................................................................................... 60
Figura 28 – Wireframe - Área do usuário .................................................................. 61
Figura 29 – Wireframe - Artigo aprovado .................................................................. 61
Figura 30 – Wireframe - Artigo em análise ................................................................ 62
Figura 31 – Wireframe – Artigo com pendências ...................................................... 62
Figura 32 – Wireframe – Artigo reprovado ................................................................ 63
Figura 33 – Wireframe – Artigo publicado ................................................................. 63
Figura 34 – Wireframe - Usuário novo....................................................................... 64
Figura 35 – Wireframe - Usuário novo inserindo coautores ...................................... 64
Figura 36 – Wireframe - Usuário novo inserindo informações do artigo .................... 65
Figura 37 – Wireframe - Usuário novo confirmando dados ....................................... 65
Figura 38 – Wireframe - Usuário novo com dados enviados ..................................... 66
Figura 39 – Wireframe - Avaliador / nova avaliação .................................................. 67
Figura 40 – Wireframe - Avaliador / avaliando .......................................................... 67
Figura 41 – Wireframe - Avaliador / confirmando avaliação ...................................... 68
Figura 42 – Wireframe - Avaliador / avaliado ............................................................ 68
Figura 43 – Wireframe - Avaliador / artigo reapresentado ......................................... 69
Figura 44 – Wireframe - Avaliador / confirmando reavaliação ................................... 69
Figura 45 – Wireframe –Ed. Chefe / nova avaliação ................................................. 70
Figura 46 – Wireframe - Ed. Chefe / avaliando ......................................................... 70
Figura 47 – Wireframe - Ed. Chefe / confirmando avaliação ..................................... 71
Figura 48 – Wireframe - Avaliador / confirmando reavaliação ................................... 71
Figura 49 – Layout da página índex .......................................................................... 77
Figura 50 – Layout - Acessibilidade .......................................................................... 77
Figura 51 – Layout - Busca ....................................................................................... 78
Figura 52 – Layout - Mapa do site ............................................................................. 78
Figura 53 – Layout - Expediente ............................................................................... 79
Figura 54 – Layout – Edições .................................................................................... 79
Figura 55 – Layout - Edição modelo .......................................................................... 80
Figura 56 – Layout – Edições Especiais.................................................................... 80
Figura 57 – Layout – Edições Especiais TCC ........................................................... 81
Figura 58 – Layout – Instruções para autores ........................................................... 81
Figura 59 – Layout – Permutas ................................................................................. 82
Figura 60 – Layout – Dúvidas .................................................................................... 82
Figura 61 – Layout – Quem já enviou / autores ......................................................... 83
Figura 62 – Layout – Quem já enviou / universidades............................................... 83
Figura 63 – Layout – Envio de arquivos .................................................................... 84
Figura 64 – Layout – Login ........................................................................................ 84
Figura 65 – Layout – Área do usuário ....................................................................... 85
Figura 66 – Layout – Artigo aprovado ....................................................................... 85
Figura 67 – Layout – Artigo em análise ..................................................................... 86
Figura 68 – Layout – Artigo com pendências ............................................................ 86
Figura 69 – Layout – Artigo reprovado ...................................................................... 87
Figura 70 – Layout – Artigo aprovado ....................................................................... 87
Figura 71 – Layout – Usuário novo ........................................................................... 88
Figura 72 – Layout – Usuário novo inserindo coautores ........................................... 88
Figura 73 – Layout – Usuário novo inserindo informações do artigo ......................... 89
Figura 74 – Layout – Usuário novo confirmando dados ............................................ 89
Figura 75 – Layout – Artigo enviado .......................................................................... 90
Figura 76 – Layout - Avaliador / nova avaliação ........................................................ 91
Figura 77 – Layout - Avaliador / avaliando ................................................................ 91
Figura 78 – Layout - Avaliador / confirmando avaliação ............................................ 92
Figura 79 – Layout - Avaliador / avaliado .................................................................. 92
Figura 80 – Layout - Avaliador / artigo reapresentado .............................................. 93
Figura 81– Layout - Avaliador / confirmando reavaliação.......................................... 93
Figura 82– Layout –Ed. Chefe / nova avaliação ........................................................ 94
Figura 83 – Layout - Ed. Chefe / avaliando ............................................................... 94
Figura 84 – Layout - Ed. Chefe / confirmando avaliação ........................................... 95
Figura 85 – Layout - Avaliador / confirmando reavaliação......................................... 95
LISTA DE ANEXOS
Autorização CoEPS ................................................................................................. 104
Autorizações para uso de imagem .......................................................................... 105
Termos de Consentimento Livre e Esclarecido (TCLE) .......................................... 113
14
1. INTRODUÇÃO
A revista Cadernos UniFOA é o periódico mais importante do Centro
Universitário de Volta Redonda pois é classificado como Qualis B pela Capes. O site
foi desenvolvido juntamente com a edição impressa, a fim de facilitar a pesquisa e
leitura dos artigos. Na época, o site foi desenvolvido por meio de tabelas. Esse tipo
de tecnologia está defasado e o recebimento dos artigos é feito por e-mail, deixando
o processo lento e submisso a erros, pois são muitos e-mails até a finalização da
edição.
A aplicação de princípios de usabilidade no site do Cadernos UniFOA visa
atualizar o tipo de linguagem usada a fim de facilitar a navegação pelo internauta
durante o processo de pesquisa e cadastro de artigos. Existem várias definições
para usabilidade. Resumidamente, usabilidade está sempre voltada para o usuário,
àquele que utiliza uma determinada interface para obter as informações que
necessita.
Após levantar informações sobre usabilidade, a construção do website seguiu
esses parâmetros e iniciamos sua construção através de wireframes, que nos deram
as primeiras ideias de como ficaria a navegação no layout. Posteriormente, foi
executado o primeiro Teste de Usabilidade, onde foram gravadas as ações do
usuário e os semblantes num total de 6 usuários. Esses vídeos foram analisados
para entendermos quais os problemas encontrados pelos usuários durante a
navegação. Com estes dados analisados, iniciamos a construção do layout através
do Adobe Firewoks e de uma ferramenta online chamada 960 grid systens. Depois
de finalizado, o layout foi usado para a realização do segundo Teste de Usabilidade
– também com 6 usuários -, a fim de detectar problemas não encontrados no
primeiro teste.
15
2. OBJETIVO DO PROJETO
Desenvolver um site para administrar e publicar os artigos científicos na
revista Cadernos UniFOA.
2.1. Objetivos Operacionais
Levantar dados sobre o público alvo: professores e universitários;
Pesquisar sobre usabilidade e acessibilidade;
Determinar conteúdo da Index e páginas internas;
Criar sitemap;
Criar wireframes para pré-testes de navegação;
Desenvolver possíveis layouts;
Escolher e ajustar o layout final;
Desenvolver o layout da área administrativa (upload) para controle e
avaliação do Comitê Editorial;
Realizar testes de usabilidade e navegabilidade com profissionais e
estudantes de diferentes cursos da Instituição;
2.2. Objetivos Específicos
Disponibilizar todas as edições da revista para consulta e download;
Disponibilizar também as edições especiais, como: resumos do
Colóquio, Jornadas Científicas, Simpósios, Seminários entre outros;
16
3. JUSTIFICATIVA
A revista Cadernos UniFOA foi lançada em 2006 com a finalidade publicar os
artigos escritos por alunos e professores do Centro Universitário de Volta Redonda –
UniFOA e também de outras Instituições. Sua periodicidade é quadrimestral e são
aceitos artigos de todas as áreas de pesquisa. Já foram publicados 125 artigos. O
periódico chega este ano à sua 17º edição e é qualificada como B5 pela Qualis1.
Figura 1 – Classificação da Revista Cadernos UniFOA
No site da Revista Cadernos UniFOA estão disponíveis todas as edições,
onde pode-se realizar download de um artigo ou de uma edição. Estão disponíveis
também as edições especiais: Cadernos UniFOA Pós-graduação, Jornadas e
Eventos, Colóquio Técnico-Científico, Anais, Catálogos e os Resumos TCC dos
cursos do UniFOA. A primeira página contém textos sobre Missão, Visão, Valores e
Princípios. Mostra as seis últimas publicações em ordem de publicação e como deve
ser enviado o artigo para avaliação. 1 Conjunto de procedimentos utilizados pela Capes para estratificação da qualidade da produção intelectual. Foi concebido para atender as necessidades específicas do sistema de avaliação e é baseado nas informações fornecidas por meio do aplicativo Coleta de Dados. O Qualis afere a qualidade dos artigos e de outros tipos de produção, a partir da análise da qualidade dos veículos de divulgação, ou seja, periódicos científicos. A classificação de periódicos é realizada pelas áreas de avaliação e passa por processo anual de atualização. Esses veículos são enquadrados em estratos indicativos da qualidade - A1, o mais elevado; A2; B1; B2; B3; B4; B5; C - com peso zero.
17
Como é possível comprovar na figura abaixo, o layout do site foi construído a
partir do uso de tabelas.
Figura 2 – Visualização a página índex.html no modo Split2 do Dreamweaver3.
Este tipo de estruturação de layout é ultrapassado e fora dos padrões
recomendados pela W3C.4 Segundo Bill Merikallio, o uso de tabelas implica em uma
série de problemas:
misturam o conteúdo da formatação, fazem o redesign de sites de conteúdo extenso ser um trabalho intenso e caro, tornam extremamente difícil manter a consistência visual do site. Páginas baseadas em tabelas são também muito menos acessíveis para usuários com deficiências e para aqueles que usam celulares e PDAs (MERIKALLIO, www.plasmadesign.com.br).
Há ainda vários outros problemas relacionados ao aspecto visual da página.
Como é possível conferir na figura abaixo, a largura da imagem do topo está menor
do que ao restante da página, falta contraste entre as cores. Além disso, falta
hierarquia tipográfica: em todos os campos foram usados a mesma fonte e com o
mesmo tamanho, inclusive no menu e no rodapé.
2 Opção de visualização do layout e do código ao mesmo tempo. 3 Software usado para escrever o código HTML. 4 W3C - Consórcio World Wide Web é uma comunidade internacional que desenvolve padrões com o objetivo de garantir o crescimento da web.
18
Figura 3 – Problema no topo e na tipografia.
A usabilidade do site também está comprometida. A função do link do e-mail
para onde devem ser enviados os artigos não está explícita, apresentando uma
formatação igual ao do resto do texto, sem o sublinhado tradicional ou qualquer
outra forma de diferenciação e destaque. Deste modo o texto
“[email protected]” fica escondido, levando o internauta a perder tempo
para descobrir a forma de envio.
Além disso, para publicar o artigo, o autor precisa ler o texto em pdf (que se
encontra no link “Instruções para Autores”) e enviar por e-mail o arquivo segundo as
recomendações. Apesar de estarem claras estas regras básicas para o envio do
material, muitos autores esquecem-se de fornecer alguns dados, como por exemplo,
as informações pessoais, as traduções em inglês do título, o resumo e as palavras-
chave. Isto acaba deixando o processo mais lento, pois obriga a Editora FOA
solicitar os dados faltosos, um problema que seria facilmente resolvido se o site
simplesmente apresentasse um formulário para o envio do material.
19
Figura 4 – Recorte da página index.html mostrando a forma de envio de artigos
Também há problemas de estrutura e navegação. Quando visitamos a página
de Resumos TCC 2010-2, por exemplo, não há opção para escolher outras edições.
Figura 5 – Navegação incorreta na página especiais_tcc2010-2.html
20
Segundo Nielsen (apud Memória, 2005), algumas práticas devem ser
aplicadas ao projeto a fim de encontrarmos as seguintes respostas: Onde estamos?
Onde estive? Onde posso ir?
O site apresenta ainda problemas para ser atualizado, devido ao uso incorreto
do CSS e por não possuir um sistema para atualização. Quando são inseridos novos
dados, o trabalho para formatação é grande e demorado.
Este projeto visa colaborar com a comunidade acadêmica construindo um
novo website, com design e linguagem de programação corretos, usabilidade,
facilitando a leitura e principalmente o envio dos artigos para a Revista.
Do ponto de vista econômico e produtivo, Cleci Maraschin (2007) levanta uma
questão muito importante. Qual o futuro das revistas científicas impressas a partir da
Internet? Afirma ainda que o “gerenciamento eletrônico do processo editorial agrega
agilidade, mobilidade e reduz substancialmente os custos de circulação de material,
diminuindo o consumo e o armazenamento de papéis”. Por isso, é importante a que
as Instituições estejam preparadas e ofereçam seus edições via internet.
21
4. PÚBLICO ALVO
O público alvo do website do Cadernos UNIFOA é composto por alunos e
professores universitários. A Cadernos UniFOA tem qualificação “B” junto à Qualis5,
uma garantia de qualidade, que atrai pesquisadores interessados em publicar e
melhorar sua pontuação no Currículo Lattes.
Figura 6 – Edital Produção Acadêmica UERJ
5 Conjunto de procedimentos utilizados pela Capes para estratificação da qualidade da produção intelectual dos programas de pós-graduação. Tal processo foi concebido para atender as necessidades específicas do sistema de avaliação e é baseado nas informações fornecidas por meio do aplicativo Coleta de Dados.
22
5. METODOLOGIA
A primeira etapa metodológica iniciou-se com uma pesquisa bibliográfica
sobre questões relacionadas a usabilidade, acessibilidade e arquitetura de
informação de sites. O intuito foi buscar informações que servissem como base para
a elaboração de parâmetros a serem seguidos no desenvolvimento do layout do
portal. Foram utilizadas obras de autores como Jacob Nielsen, Walter Cybis, Felipe
Memória, Jennifer Preece, Yvonne Rogers, Helen Sharp, Luiz Agner, Steve Krug e
Marcelo Póvoa. Será utilizada também a apostila do e-gov para desenvolvedores de
sites.
5.1. Conteúdo
Concomitantemente à pesquisa sobre usabilidade, foi definido o conteúdo do
site do Cadernos Unifoa, feito em parceria com a Editora Executiva da revista, Flávia
Lages, que nos ajudou a definir todos os itens que compuseram a página índex e as
internas.
5.2. Mapa do site
Nesta etapa criamos o mapa do site para indexar as páginas quanto à
navegação do usuário, facilitando também a construção dos primeiros rabiscos para
criação do wireframe.
5.3. Wireframe
A partir das informações levantadas na primeira fase do projeto foi iniciada a
etapa de Geração de Alternativas com a elaboração dos primeiros wireframes. O
wireframe é um desenho básico, como um esqueleto, que apresenta de forma
simples a arquitetura de informação de uma interface. Trata-se de uma ferramenta
essencial na construção de websites.
23
Figura 7 – Modelo de wireframe
Segundo Memória (2006, pág. 37) os wireframes facilitam o processo de
aprovação do projeto porque começam a mostrar a estrutura do que está sendo
elaborado. Além disso, o wireframe também oferece à equipe técnica que vai
construir o produto uma noção mais clara da quantidade e complexidade do
trabalho.
Este “esqueleto da arquitetura” tem a função de estruturar o conteúdo de cada
página, indicando o peso e relevância de cada elemento do layout e sua relação
com os demais elementos formadores do todo. Sua meta é indicar a correta
24
marcação de textos, breadcrumbs6 de navegação, guidelines7 de marca e até
recursos de programação e tecnologia a serem utilizados pela equipe de
programadores (OLIVEIRA, 2009).
O wireframe foi criado com o Adobe Fireworks CS48. André Reinegger9 cita
em seu blog, 50 razões para usar o Fireworks e não o Photoshop para
desenvolvimento web. Entre estas razões, pudemos usar o “pdf interativo” que
permitiu “navegar pelas páginas” antes mesmo de transformá-las em conteúdo
HTML, o que facilitou a aplicação dos testes de usabilidade, bem como, alterações
no layout (REINEGGER).
5.4. Geração de Alternativas - Wireframe
Foram criadas 3 alternativas para analisarmos qual seria a melhor opção,
explorando mais conteúdo em um e menos em outro, para que a página não ficasse
pesada, com grande quantidade de textos e imagens.
5.5. Primeiro Teste de Usabilidade
Realizar o teste nesta fase permitiu detectarmos se havia algum problema no
posicionamento dos links das páginas, e se o usuário teria dificuldades em executar
as ações solicitadas durante a avaliação.
Segundo Steve Krug (2008, pág. 134) é melhor testar um usuário no início do
projeto do que cinquenta ao seu final, pois realizar um teste, mesmo simples,
enquanto você ainda tem tempo do usar o que aprendeu com ele, é bem mais
eficiente do que se realizar um teste sofisticado mais tarde e ter de voltar etapas.
O primeiro teste foi realizado em uma sala equipada com um computador e
uma câmera. Durante o processo, um software gravava os movimentos do mouse
enquanto uma câmera capturava a fisionomia e possíveis falas do usuário.
6 (Migalhas de pão). Esquema de navegação auxiliar que revela a localização do usuário em um site ou aplicação web. 7 Diretrizes explicam como tornar o conteúdo web acessíveis a pessoas com deficiência. 8 Software que fornece as ferramentas para que se criar gráficos expressivos, altamente otimizados para a Web ou praticamente para qualquer dispositivo - de smartphones a quiosques de exibições. 9 Diretor de Criação, freelancer para a Adobe Systems, é um especialista em produtos Web Suite e viaja por toda a Alemanha para realizar palestras técnicas e seminários.
25
5.6. Layout
A largura do layout é de 960 pixels. A definição desta medida baseou-se na
pesquisa elaborada pela W3C, vide quadro abaixo, sobre as resoluções de tela mais
usadas nos tempos atuais.10
Tabela 1 – Resoluções de tela
Segundo estes dados, a maioria dos internautas usa uma resolução de tela
superior a 1024x768 pixels. Isto justifica o uso de 960 pixels, o que deixam as
margens laterais com 32 pixels.
No intuito de agilizar o processo foi utilizada a ferramenta online “960 grid
system” 11. Este site disponibiliza templates com grids, colunas pré-marcadas por
linhas-guia que ajudam a estruturar uma boa diagramação. No site 960 grid system
ainda é possível gerar rapidamente um arquivo css12, com o número de colunas
desejável, acelerando a etapa de estruturação do site.
Nesta fase foram desenvolvidas, com base nas informações levantadas
anteriormente, as primeiras idéias de layout, até alcançar uma solução que fosse
plenamente satisfatória e atendesse a todos os requisitos impostos a este trabalho.
10 www.w3schools.com/browsers/browsers_display.asp 11 http://960.gs 12 Mecanismo simples para adicionar estilo (por exemplo, fontes, cores, espaçamento) a documentos web.
26
5.7. Design de Interface
Após realizarmos o primeiro teste de usabilidade e fazermos as devidas
modificações, começamos a desenvolver o layout, baseando-nos em diversos
quesitos do âmbito do Design. Em um site, a interface é o meio pelo qual a pessoa
intervém, dialoga, modifica o objeto da interação. Se a interface é fácil de aprender,
simples, direta e amigável, a pessoa estará inclinada a fazer uso da mesma.
A interface é uma das partes mais importantes de um website,
pois concentra a relação visitante-sistema. É o que apresenta informações e estímulos e recebe respostas, colocando a manipulação nas mãos do usuário. Por isso, muito mais que um visual bonitinho, deve ser o elemento de transição entre o mundo real e o digital. O ideal é que ela seja transparente, invisível, natural, sintética, intuitiva, prática. (RADFAHRER, 2008).
Bragaadequar (2004, pág. 8) afirma que “adequar um objeto funcional ao seu
usuário, através da estética, é o que caracteriza o sucesso em um trabalho de
design, contudo, tal estética pode estar na simplicidade de um trabalho que se vale
da pureza das formas básicas”. Aplicar design ao layout é utilizar elementos com os
quais o usuário se identifique de forma racional, consciente, e através de motivação
emocional gerando sensações em quem observa.
Através das cores, formas e tipografia é possível criar um layout claro, de fácil
leitura e entendimento, agradável que desperte interesse ao usuário.
Segundo AMBROSE, Gavin et al (2009, p. 106) a cor é um elemento
essencial do design devido a sua capacidade de gerar reações emocionais nos
leitores. Para o novo layout atribuímos em algumas partes o amarelo para dar
contraste com o azul - cor padrão da revista e do site. O amarelo é inspirador; traz
vibração positiva, corresponde ao conhecimento e à sabedoria; aqueceu a página.
Já o azul, estimula a imaginação, traz calma, serenidade e relaxamento (COSTA,
2011). Foram aplicadas sombras a algumas áreas para dar volume aos objetos.
Para o fundo, o uso do branco traz limpeza, simplicidade e sensação de espaço ao
layout (AMBROSE, 2009, p. 126).
27
Quanto às formas, foram usadas retangulares para delimitar uma determinada
área e separar o conteúdo. Para dar mais suavidade, caixas e botões possuem os
cantos levemente arredondados.
A fonte usada para o website foi a Tahoma; uma fonte padrão web, sem
serifa13, criada pelo designer Matthew Carter para ser usada em dispositivos virtuais
(MICROSOFT, 2011). Ela deu mais modernidade e inovação ao layout.
Para que a interface interaja com o usuário é necessário manter a
consistência no layout, mantendo todas as características citadas acima em todas as
páginas. (AGNER, 2009, p.29).
5.8. Segundo Teste de Usabilidade
O procedimento foi igual ao primeiro teste, porém, diretamente no layout,
onde o usuário pode entender ainda melhor o funcionamento do site, pois detinha de
dispositivos sensoriais como cores e imagens.
5.9. Codificação e Publicação
Caso haja interesse da Instituição, os arquivos serão enviados para o
Departamento de Informática do UniFOA e entrará em funcionamento no endereço
www.unifoa.edu.br/cadernos.
Para garantir que este website não tenha problemas de usabilidade e
acessibilidade durante o processo de escrita dos códigos, sugerimos que durante a
codificação, as páginas passem por uma validação do código através do link da
W3C - http://validator.w3.org/. Isto garantirá que o site tenha seu código escrito nos
padrões web atuais.
13 Pequenos traços ou espessamentos aplicados às extremidades das letras.
28
6. USABILIDADE
A aplicação de princípios de usabilidade no site do Cadernos UniFOA visou
facilitar a navegação pelo internauta durante o processo de pesquisa e cadastro de
artigos.
Usabilidade não é um termo tão novo como parece. Surgiu da indústria de
softwares, principalmente sistemas operacionais e processadores de texto. Com sua
aplicação, podemos perceber a transformação de letrinhas brilhantes em fundo preto
do antigo DOS14 por um desktop15 mais amigável com pastas e lata de lixo (PÓVOA,
2004a).
Com o surgimento da web, empresas e profissionais tiveram que se adaptar e
pensar em interfaces mais complexas, uma vez que, mercados como o varejo,
telecomunicações, bancos, mídia, petroquímico, migraram-se para a nova rede
(PÓVOA, 2004b).
6.1. Definição
Vários autores trabalharam na construção do conceito de usabilidade para
sites da internet. Shackel (1993 apud MEMÓRIA, 2005, p. 6) afirma que usabilidade
é a capacidade, em termos funcionais humanos, de um sistema ser usado
facilmente e com eficiência pelo usuário. Scapin (1993 apud MEMÓRIA, 2005, p. 6)
descreve usabilidade como algo que está diretamente ligado ao diálogo na interface
e que é a capacidade do software em permitir que o usuário alcance suas metas de
interação com o sistema. Segundo cartilha desenvolvida pelo Ministério do
Planejamento, Orçamento e Gestão, a usabilidade pode ser definida como o estudo
ou a aplicação de técnicas que proporcionem a facilidade de uso de um dado objeto
(E-GOV, 2010 pág. 7).
Preece, Rogers e Sharp (2005, pág. 42) citam maneiras de conceitualizar a
usabilidade de forma a orientar os designers sobre aspectos diferentes de seus
designs. Estes conceitos são prescritos sugerindo aos designers o que fazer e o que
não fazer no momento de se construir uma interface.
14 Sistema operacional licenciado pela Microsoft Corporation. 15 Computadores de mesa.
29
Todavia, não servem para especificar como realizar o design de uma interface real (p. ex.: dizer ao designer como projetar um certo ícone ou como estruturar um portal na web), mas servem mais como um conjunto de itens que devem ser lembrados, assegurando que certas coisas foram acrescentadas à interface (PREECE; ROGERS E SHARP, id. 2005, pág. 42).
Em resumo, usabilidade estará sempre voltada para o usuário, àquele que
utiliza uma determinada interface para obter as informações que necessita.
6.2. Metas de usabilidade – da perspectiva do usuário
Para garantir que sistemas sejam fáceis de usar, é necessário atentar para
algumas metas de usabilidade, conforme descrevem Preece, Rogers e Sharp (2005,
pág. 35 a 42).
Ter eficácia no uso: de forma geral refere-se em o quanto o é bom em
fazer o que se espera dele, permitindo que as pessoas realizem bem o
que precisam e acessem o que procuram de forma eficiente;
Ser eficiente: além de facilitar a interação, deve ensinar ao usuário
suas opções e ferramentas a fim de elevar o nível de produtividade do
usuário. Por exemplo, a opção one-click, que permie ao usuário realizar
outra compra com mais rapidez;
Ser seguro: o sistema deve impedir que o usuário realize ações
perigosas e indesejáveis acidentalmente. Deve também reduzir o medo
das pessoas mediante alguma situação de erro, o que afeta seu
comportamento. A interface não pode conter botões sair ou apagar
próximos ao comando salvar em um menu. Caso cometa algum erro,
deve oferecer várias formas de recuperação desses dados.
Ter utilidade: oferecer todas as opções necessárias para realizarem
suas tarefas livremente. No caso do cadastro de artigos, deve oferecer
campos para todos os dados básicos também aqueles necessários
para o bom funcionamento do processo de avaliação;
30
Ser fácil de aprender: o sistema precisa ser usado de maneira rápida,
pois é sabido que as pessoas não perdem seu tempo aprendendo
como usá-lo. É imprescindível determinar quanto tempo os usuários
estarão preparados para gastar conhecendo o sistema. Qual o sentido
de se desenvolver uma série de funcionalidade desnecessária para
realizar as tarefas ditas como básicas?
Ser fácil de lembrar como se usa: a interface deve fazer com que as
operações sejam lembradas, não precisando reaprendê-lo.
Desenvolver ícones representativos, nomes de comandos e opções de
menu podem servir de “migalhas de pão”, levando-o a conseguir
realizar o que precisa.
6.3. Metas decorrentes da experiência do usuário
As novas tecnologias estão oferecendo maiores oportunidades para fornecer
suporte às pessoas no seu cotidiano. Diante dessa nova realidade é preciso
considerar outras metas além da melhoria da eficiência e produtividade no trabalho.
Como afirmam Preece, Rogers e Sharp, o design de interação está cada vez mais
preocupados com a criação de sistemas que atendam que apresentem as seguintes
características:
Sejam satisfatórios;
Agradáveis:
Divertidos
Interessantes
Úteis
Motivadores
Esteticamente apreciáveis
Incentivadores de criatividade
Compensadores
Emocionalmente adequados
31
O objetivo de se desenvolver sistemas que possuam tais características está,
principalmente, na experiência que estes produtos proporcionarão ao usuário, isto é,
como o usuário se sentirá na interação com o sistema.
Reconhecer e entender o equilíbrio entre as metas de usabilidade e as decorrentes da experiência do usuário é importante. Em particular, permite aos designers conscientizar-se das consequências de buscas combinações diferentes dessas metas, levando em consideração as necessidades dos usuários. (PREECE, ROGERS e SHARP, 2005, pág. 41).
PREECE, ROGERS e SHARP (2005, pág. 41) dizem ainda que nem todas as
combinações entre metas de usabilidade e as decorrentes da experiência dos
usuários serão compatíveis e aplicáveis a todo produto em desenvolvimento. Irá
depender do contexto de uso, da tarefa a ser realizada e de quem são os usuários
pretendidos. Em exemplo, citam não ser possível projetar uma interface que seja ao
mesmo tempo segura e divertida.
6.4. Design e princípios de usabilidade
Uma forma de conceitualizar a usabilidade se dá em termos de princípios de
design, orientando os designers a pensar sobre aspectos diferentes de seus
designs. PREECE, ROGERS e SHARP (2005, pág. 42).
Os princípios de design são derivados de uma mistura de conhecimento baseado em teoria, experiência e senso comum. Tendem a ser escritos de maneira prescritiva, sugerindo aos designers o que utilizar e o que evitar na construção de uma interface – o “sim e não” (do’s and don’ts) do design de interação PREECE, ROGERS e SHARP (2005, pág. 42).
Segundo PREECE, ROGERS e SHARP (2005, pág. 42), vários princípios de
design já foram desenvolvidos. Os mais comuns determinam o que os usuários
devem ver e fazer quando realizam tarefas utilizando um produto interativo. Estes
princípios já foram descritos de forma extensiva por Dor Norman (1988) no livro The
design of everyday things:
Visibilidade – as funções de um determinado produto devem ser
visíveis para que os usuários saibam como proceder seu uso.
Diferenciar um controle de outro também é importante, assim como
32
exemplo, o motorista sabe a diferença entre os comandos dos faróis,
buzina, pisca-pisca etc;
Feedback – é o retorno das informações já realizadas, permitindo a
continuidade. Utilizar de maneira correta pode proporcionar a
visibilidade necessária para a interação do usuário;
Restrições – consiste em delimitar as ações dos usuários. Uma prática
comum é colocar as opções inativas em cinza. Essa prática para evitar
que o usuário selecione opções incorretas, reduzindo a chance de erro;
Mapeamento – refere-se à relação entre os controles e os seus
efeitos. Geralmente seguem uma convenção comum, como por
exemplo, o display de um CD player, apresentando uma sequência de
botões em que o play fica o meio, o rewind à esquerta e o fast forward
à direita.
Consistência – refere-se a projetar interfaces de modo que tenham
operações semelhantes e que utilizem elementos semelhantes para a
realização de regras similares. Deve seguir regras e assim, serão mais
fáceis de aprender e usar. A criação de categorias de comandos que
podem ser mapeados em subconjuntos de operações é uma ótima
solução de design.
Affordance – significa “dar uma pista”. São iscas que o designer cria
para que o usuário possivelmente siga os melhores caminhos. Um
exemplo em objeto físico é a maçaneta, que nos permite puxar. É
preciso ter cuidado para não se criar falsos affordances e tornar o
contexto enganoso.
6.5. Heurística e princípios de usabilidade
Nielsen (2001, apud CYBIS, BETIOL e FAUST, 2010, pág. 25) desenvolveu uma
heurística de usabilidade para aplicar em interfaces web, citada abaixo em 10 tópicos:
33
Visibilidade do status do sistema – o sistema deve manter
informados os usuários sobre que está acontecendo, fornecendo
feedback, dentro de um tempo possível;
Mapeamento do sistema com mundo real – o sistema precisa usar a
linguagem do usuário, utilizando palavras, frases e conceitos familiares
a ele, dentro de seu repertório.
Controle do usuário e liberdade – fornece maneiras de permitir que
os usuários saiam a qualquer momento, abortando ou desfazendo uma
tarefa facilmente dos lugares inesperados em que se encontram,
utilizando “saídas de emergência” claramente identificadas;
Consistência e padrões – evita fazer com que os usuários tenham
que pensar se palavras, situações ou ações diferentes significam a
mesma coisa, facilitando o reconhecimento de uma determinada tarefa;
Ajuda os usuários a reconhecer, diagnosticas e recuperar-se de erros – utiliza linguagem simples para descrever a natureza do
problema e sugere uma maneira de resolvê-lo;
Prevenção de erros – onde possível, impede a ocorrência de erros;
Reconhecimento em vez de memorização – tornar objetos, ações e
opções visíveis;
Flexibilidade e eficiência de uso – fornece aceleradores invisíveis
aos usuários inexperientes, os quais, no entanto, permitem aos mais
experientes realizar tarefas com mais rapidez;
Design Estético e minimalista – evita o uso de informações
irrelevantes ou raramente necessárias. As operações devem ser
compatíveis com o modo pelo qual o usuário realizará suas tarefas;
34
Ajuda e documentação – fornece informações que podem ser
facilmente encontradas e ajuda mediante uma série de passos
concretos que podem ser facilmente seguidos.
Aplicando os termos sugeridos, os designers terão mais embasamento e
conceitualização quando forem desenvolver uma interface com os requisitos
necessários para que haja a aplicação de usabilidade, contudo, Nielsen propõe a
simplicidade, devendo o designer analisar todos os elementos de seu projeto,
removendo-os um a um. Caso funcione bem sem um desses elementos, elimine-o.
Para compreender melhor e saber que termos de usabilidade empregar, veja
quadro abaixo:
35
Tabela com os conceitos apresentados acima facilitam uma breve
comparação e utilização. (PREECE, ROGERS e SHARP, 2005, pág. 50).
Conceito Nível de
orientação
Às vezes também
chamado de Como utilizar
Metas de usabilidade
Geral
Estabelecer critérios de usabilidade para
avaliar a aceitabilidade de um sistema (p. ex.:
“Quanto tempo leva para a realização de uma
tarefa?”).
Metas decorrentes da experiência do usuário
Geral Fatores de
satisfação
Identificar os aspectos importantes da
experiência do usuário (p. ex.: “Como se pode
tornar o produto interativo divertido e
agradável?”).
Princípios de design
Geral
Heurística,
quando
utilizados na
prática.
Conceitos de
design
Como lembretes do que fornecer e do que
evitar durante o design da interface (p. ex.:
“Que tipo de feedback você vai fornecer na
interface?”).
Princípios de usabilidade
Específica
Heurística,
quando
utilizados na
prática
Avaliar a aceitabilidade das interfaces,
utilizadas durante a avaliação heurística (p.
ex.: “O sistema fornece saídas claramente
indicadas?”).
Regras Específica
Determinar se uma interface adere a uma
regra específica, quando está sendo projetada
e avaliada (p. ex.: “Sempre oferecer um botão
backward e forward em um navegador”).
Tabela 2 – Usabilidade usável: que termos empregar?
6.6. Problemas em casos sem usabilidade
Os problemas de usabilidade ocorrem quando pessoas encontram
dificuldades para realizar alguma coisa que precisam fazer ou querem fazer com
uma interface.
36
Se o usuário se deparar com estes problemas, poderá demorar demais para
encontrar a informação que precisa, e tomar decisões erradas ou ainda sair da
página devido ao estresse sofrido.
Segundo a Cartilha Padrões Brasil e-GOV:
o desenvolvimento de sites utilizando a usabilidade tem como consequência comum uma redução nos custos e, posteriormente, uma diminuição no número de correções nas funcionalidades do site. Sites e serviços com boa usabilidade também requerem menos treinamento, suporte e manutenção.
6.6.1. Problemas de ergonomia e de usabilidade
Cybis, Betiol e Faust (2010, pág. 203) definem que os problemas de
ergonomia são identificados quando um aspecto da interface não está em acordo
com o público alvo, por conseqüência, geram problemas de usabilidade que são
observados pela perca tempo ao realizar uma determinada tarefa. Problemas de
usabilidade aparecerão quando houver problemas ergonômicos com o layout da
interface.
37
7. ACESSIBILIDADE
Acessibilidade caminha junto com usabilidade, porém trata do acesso a
locais, produtos, serviços ou informações efetivamente disponíveis ao maior número
e variedade possível de pessoas independente de suas capacidades físico-motoras
e perceptivas, culturais e sociais (Cartilha Padrões Brasil e-GOV, pág. 10). Para
CARRION (2005), acessibilidade significa “facilidade de interação” ou aproximação.
E quando focada em tecnologia, seu objetivo é tornar computadores e a internet
mais acessível para deficientes físicos e visuais.
A W3C cita em seu site uma lista de incapacidades e sua relação com as
questões da acessibilidade na web:
7.1. Deficiência visual:
Imagens que não têm texto alternativo “ALT”; Imagens complexas (gráficos ou cartas) que não são descritas
adequadamente; Vídeo que não está descrito no texto ou áudio; Tabelas que não fazem sentido quando lidas em série; Quadros que não têm alternativas "NOFRAME; Formulários que são mal rotulados; Navegadores e ferramentas que não possuem suporte de teclado para
todos os comandos; Navegadores e ferramentas que não utilizam interfaces programadas no
padrão do sistema operacional em que se baseiam; Documentos fora do padrão podem dificultar a interpretação do leitor de
ecrã.
7.2. Baixa visão
Páginas Web com tamanhos de fonte absoluto que bloqueiam o
navegador ampliar ou reduzir o texto;
38
Páginas da Web que, devido ao layout inconsistente, são difíceis de
navegar quando ampliadas, devido à perda do contexto envolvente; Páginas ou imagens da Web, que tem um contraste pobre, e que não
podem ser facilmente alterados através das folhas de estilo; Texto apresentado como imagens, o que impede a quebra de linha
quando ampliada;
7.3. Daltonismo
Cor que é usada como um marcador exclusivo para enfatizar o texto em
um site. Texto e fundo sem contrastes; Navegadores que não suportam substituir folhas de estilo.
7.4. Deficiência auditiva
Falta de legendas ou transcrições de áudio na Web, incluindo webcasts; Falta de imagens relacionadas ao conteúdo de páginas, dificultando o
entendimento de usuários cuja primeira língua seja a língua de sinais
em vez de uma escrita / linguagem falada; Falta de linguagem clara e simples; Requisitos para a entrada de voz em websites.
7.5. Visual e percepção auditiva
Falta de um texto alternativo que pode ser convertido para áudio ou a
falta de legendas para áudio.
7.6. Transtorno de déficit de atenção
Falta de atenção com elementos visuais ou de áudio que não podem
ser facilmente desativados; Falta de organização clara e consistente dos websites.
39
7.7. Deficiência intelectual
Uso da linguagem complexa; Falta de gráficos em sites; Falta de organização clara e consistente.
7.8. Deficiências de memória
Falta de organização clara e consistente das páginas dos sites.
7.9. Saúde deficiência mental
Distração provocada por elementos visuais ou de áudio que não pode
ser desativado facilmente; Páginas com tamanhos de fonte absoluto que não ampliar.
7.10. Incapacidade física
Tempo limitado de opções de resposta; Navegadores e ferramentas que não suportam as alternativas de
teclado para comandos de mouse;
Formulários que não podem ser tabuladas através de uma ordem lógica
(uso do TAB).
7.11. Deficiência de fala
Websites que requerem a interação baseada em voz e não têm opções
de entrada, por exemplo, o uso do teclado.
40
7.12. Desordens de apreensão
Utilização de frequências visuais ou de áudio que podem desencadear
crises convulsivas.
41
8. CONTEÚDO DO SITE CADERNOS UNIFOA
Como já foi explicitado no capítulo da metodologia, o levantamento do
conteúdo do site do Cadernos UniFOA foi um trabalho realizado em parceria com a
Editora FOA com o auxílio da Editora Executiva Flávia Lages.
Esta fase foi primordial ao bom desenvolvimento do projeto já que é
necessário, antes de mais nada, identificar o tipo de informação que será divulgado
pelo site para que se elabore uma arquitetura de fácil navegação.
8.1. Página índex
A nova página índex é composta pelo topo, coluna da esquerda, conteúdo e
rodapé. Uma composição simples, visando facilitar ao máximo a navegação e
consulta pelo usuário.
No topo encontramos:
Links externos para o sites da Editora FOA e Portal UniFOA;
Mecanismo de busca;
Links de acessibilidade;
Mapa do site.
A coluna da esquerda apresenta:
A logomarca, o menu, botão para enviar o artigo, link informando quem
já publicou na Revista e um link externo para o WebQualis.
A parte do conteúdo apresenta:
Banner mostrando as três últimas edições especiais;
Informativo sobre a última edição publicada, capa e parte do editorial;
Textos sobre Missão, Visão, Valores e Princípios;
A página mostrará as últimas publicações feitas pelo Cadernos UniFOA.
42
O rodapé contém:
A logomarca do UniFOA, selo de Instituição socialmente responsável,
todos os links das demais partes, endereço completo e links para as
redes sociais Linkedin, Twitter e Facebook.
A novidade do novo site é uma área para login16, onde o usuário fará seu
cadastro, bem como envio de seus artigos. Esta área servirá para controlar o
recebimento de dados, trazendo maior controle da informação, segurança e praticidade
ao usuário e ao Comitê Editorial.
8.2. Páginas internas
Edições – mostra ao usuário todas as revistas já publicadas.
Especiais – mostra as edições consideradas especiais como: Revista
Pós-graduação, Simpósios, Colóquio, Resumos TCC e outros mais;
Instruções para Autores – texto informando sobre como escrever
artigos nos padrões da Revista, como é o processo de seleção,
ineditismo do material, direitos autorais, que tipo de trabalhos são
aceitos, como trabalhar com as ilustrações, pesquisas envolvendo
seres humanos, agradecimentos e as referências; atualmente.
Declarações de Transferência de Direitos Autorais e de Conflitos de
Interesse – aparecerão durante o cadastro de artigos, onde o sistema
preencherá automaticamente, através de um banco de dados, as
informações já fornecidas como nome dos autores, título do trabalho e
data de envio. O autor precisará somente assinar e entregar à Editora.
Expediente – neste link são informados os nomes dos profissionais
responsáveis pela Revista Cadernos UniFOA.
16 Conjunto de caracteres que identifica uma pessoa perante um computador/sistema.
43
Permutas – contém o nome e e-mail da bibliotecária do UniFOA e a
lista das universidades que são realizadas permutas de periódicos;
Dúvidas frenquentes – foram inseridas para que o usuário possa
encontrar no próprio site as respostas para sanar suas dúvidas;
Quem já publicou – lista dos nomes dos autores e das Instituições de
Ensino que já submeteram artigos para a revista.
8.3. Área para envio de artigos
Esta é a parte mais inovadora do website. Através desta área os usuários
podem enviar seus artigos e obter informações sobre os mesmos.
44
9. ARQUITETURA DA INFORMAÇÃO
O termo Arquitetura da Informação foi cunhado em 1997 por Richard Saul
Wurman (1997) e passou a ganhar notoriedade em 1998 com Rosenfeld e Morville.
(ZILSE, p. 52-55, 2007).
A Arquitetura da Informação preocupa-se com o projeto, a implementação e a
manutenção de ambientes informacionais digitais de acesso humano, navegação o
uso. O foco é o projeto de estruturas, a fim de fornecer aos usuários recursos
necessários para transformar suas necessidades em ações, atingindo o objetivo com
sucesso (AGNER, 2009, p. 90).
Descreve ainda que para ser compreendida, são necessários quatro sistemas
interdependentes.
Sistema de organização – definem formas primárias, onde o usuário
pode navegar sendo divididos em taxonomias, bancos de dados e
redes.
Sistema de rotulação – é um dos mais difíceis e importantes a ser
realizado, pois dependem do tipo de empresa, das convenções, do
espaço disponível e deve ser escrito segundo a linguagem do usuário.
Sistema de navegação – compreende três subsistemas: a navegação
global, que mostra links para principais áreas do site; a local, que dá
acesso á subseções do site; a contextual, com referências cruzadas
que ligam a páginas temáticas relacionadas em outras seções.
Sistema de busca – são aplicações onde os usuários expressam sua
necessidade de informação. Essas informações cruzadas com
palavras-chave dos artigos, por exemplo, serão muito úteis aos
usuários.
45
9.1. Vantagens para o projeto
A Arquitetura de Informação ajudar a definir o melhor caminho de um link,
auxiliando o usuário a encontrar de forma clara a informação que deseja, para
acessá-lo mais facilmente. Ajuda o usuário a se localizar na interface, permite que
os visitantes saibam onde estão e para onde podem ir, e facilita sua interação com o
site. (WEBROOM, 2011).
Aplicando os conceitos no projeto, conseguiremos fazer com que o usuário
tenha sucesso em suas ações durante a navegação.
46
10. MAPA DO SITE
A partir da definição do conteúdo das páginas criamos o mapa do site para
indexar as páginas, conforme gráfico abaixo:
Figura 8 – Mapa do site
47
11. FLUXOGRAMA DO SISTEMA PARA ENVIO DE ARTIGOS
48
SÍNTESE
De acordo com os dados levantados e analisados, o projeto a ser
desenvolvido deverá apresentar as seguintes características:
Acessível – seguir os padrões de usabilidade e acessibilidade para
que qualquer usuário consiga pesquisar os textos da revista,
independente de sua localização, conexão ou mesmo dispositivo de
leitura.
De fácil aprendizagem – deve ter suas ações de fácil entendimento,
não precisando decorar o sistema, mas sim entender seu
funcionamento.
Ter um design agradável – o layout deve apresentar uso adequado
de cores, contraste, formas, iluminação, enfim, todas as características
estéticas deixando o usuário inspirado a pesquisar e alegre ao voltar
ao site.
Navegação de fácil entendimento – o usuário precisa entender onde
está, pra onde ir e como voltar durante a navegação das páginas.
Possibilitar o envio de artigos de forma rápida e clara – o sistema
deve fornecer somente as informações necessárias para o envio de
artigos, não deixando que o usuário se perca durante o processo.
Atalhos para os mais experientes – deve oferecer formas mais
rápidas para usuários que tem mais experiência com a internet.
Codificação W3C – a escrita do código deverá seguir os padrões web
atual, a fim de garantir que os conceitos de usabilidade não se percam
nesta etapa.
49
12. WIREFRAMES – GERAÇÃO DE ALTERNATIVAS
12.1. Primeira proposta
Figura 9 – Proposta 1 - wireframe
Nesta primeira proposta percebemos que no topo há um espaço em branco
entre a logo e a busca desequilibrando sua composição. Podemos ver que possui
duas áreas semelhantes nas colunas laterais (Qualis B e Quem já enviou), porém,
quando o usuário entrar nas páginas internas, seria necessário colocar a área do
‘Qualis B’ abaixo da ‘Quem já enviou’ para termos um campo maior para o conteúdo.
Essa mudança deixaria o usuário confuso, além de os desenvolvedores terem mais
trabalho para codificar este posicionamento variado.
50
12.2. Segunda proposta
Figura 10 – Proposta 2 - wireframe
Na segunda proposta, o espaço em branco no topo foi eliminado com o
reposicionamento do menu, porém dividido em duas colunas. Percebemos um
desalinho na coluna esquerda, visto da logo em relação á imagem da última edição.
Outro fato é que há muito conteúdo, o que deixaria o layout pesado, de difícil
assimilação e aprendizado.
51
12.3. Terceira proposta
Figura 11 – Proposta 3 - wireframe
Nesta terceira proposta, reposicionamos a busca junto das opções de
acessibilidade, facilitando a busca e aos deficientes ajustarem o site de acordo com
suas necessidades, seja aumentando a fonte, visualizando o site com contraste ou
lendo os comandos de acessibilidade via teclado. O espaço em branco que havia
nas demais alternativas foi eliminado, alinhando a logo com o banner das últimas
publicações, preservando o grid17.
17 Utilizado para facilitar o alinhamento e posicionamento de objetos no layout.
52
Na coluna da esquerda, abaixo do menu, vemos o link para submissão dos
artigos. Seu posicionamento é de fácil percepção, pois está na parte central
esquerda da tela.
Na parte principal, mantivemos apenas o editorial, deixando a página mais
limpa e fazendo com que o usuário se sinta atraído e clique para ver todo o
conteúdo. A pedido da Editora Executiva foram mantidos os textos de Missão, Visão,
Valores e Princípios.
Seguindo a leitura, no rodapé vem todos os links acima em forma textual e os
ícones de redes sociais, que tem um papel importantíssimo para divulgar as edições
e novas publicações feita pelo Cadernos UniFOA.
Este foi o wireframe escolhido. Veja a seguir todas as telas do wireframe.
53
13. WIREFRAME ADOTADO
13.1. Páginas públicas
Figura 12 – Wireframe da página índex
Figura 13 – Wireframe - Resultados da Busca
54
Figura 14 – Wireframe - Acessibilidade
Figura 15 – Wireframe - Mapa do site
55
Figura 16 – Wireframe - Expediente
Figura 17 – Wireframe - Edições
56
Figura 18 – Wireframe - Edição modelo
Figura 19 – Wireframe - Edições Especiais
57
Figura 20 – Wireframe - Edição Especial TCC
Figura 21 – Wireframe - Instruções para autores
58
Figura 22 – Wireframe - Permutas
Figura 23 – Wireframe - Dúvidas frequentes
59
Figura 24 – Wireframe - Quem já enviou / Autores
Figura 25 – Wireframe - Quem já enviou / Universidades
60
Figura 26 – Wireframe - Envio de artigos
Figura 27 – Wireframe - Login
61
13.2. Acesso restrito - Usuário
Figura 28 – Wireframe - Área do usuário
Figura 29 – Wireframe - Artigo aprovado
62
Figura 30 – Wireframe - Artigo em análise
Figura 31 – Wireframe – Artigo com pendências
63
Figura 32 – Wireframe – Artigo reprovado
Figura 33 – Wireframe – Artigo publicado
64
Figura 34 – Wireframe - Usuário novo
Figura 35 – Wireframe - Usuário novo inserindo coautores
65
Figura 36 – Wireframe - Usuário novo inserindo informações do artigo
Figura 37 – Wireframe - Usuário novo confirmando dados
66
Figura 38 – Wireframe - Usuário novo com dados enviados
67
13.3. Acesso restrito – Avaliador
Figura 39 – Wireframe - Avaliador / nova avaliação
Figura 40 – Wireframe - Avaliador / avaliando
68
Figura 41 – Wireframe - Avaliador / confirmando avaliação
Figura 42 – Wireframe - Avaliador / avaliado
69
Figura 43 – Wireframe - Avaliador / artigo reapresentado
Figura 44 – Wireframe - Avaliador / confirmando reavaliação
70
13.4. Acesso restrito – Editora Chefe
Figura 45 – Wireframe –Ed. Chefe / nova avaliação
Figura 46 – Wireframe - Ed. Chefe / avaliando
71
Figura 47 – Wireframe - Ed. Chefe / confirmando avaliação
Figura 48 – Wireframe - Avaliador / confirmando reavaliação
72
14. PRIMEIRO TESTE DE USABILIDADE
Neste projeto, o primeiro teste de usabilidade foi realizado após a escolha do
wireframe, pois já teremos a estrutura de navegação do website. O teste aconteceu
em uma sala fechada - para evitar interrupções -, que contou com 1 instrutor, 6
usuários sendo 3 professores e 3 alunos, um computador contendo o wireframe e
software gravando os movimentos do mouse e uma câmera que filmou todas as
ações, semblantes e falas do usuário (KRUG, pág. 146 a 155).
Através da análise desta filmagem conseguimos entender quais a dificuldades
que os usuários tiveram em “navegar pela página”, executar tarefas e também qual a
sua opinião sobre o que viram.
Os usuários fizeram as seguintes ações:
Ação 1: Encontre a Edição n° 4 da Revista Cadernos UniFOA.
Ação 2: Vá até as Instruções para Autores.
Ação 3: Volta à página inicial.
Ação 4: Encontre a Edição Especial Resumos TCC 2011-1.
Ação 5: Volte à página inicial.
Ação 6: Envie um novo artigo, simbolizando o preenchimento dos campos.
73
14.1. Usuários Universitários
Usuário Análise do Teste
Conseguiu realizar normalmente as tarefas.
Dúvidas
Ação 6: não compreendeu bem a ação, pois lhe foi pedido que
submetesse um novo artigo, e no botão está escrito Cadastro /
Submissão.
Camila Rodrigues Pacheco Soluções
Graduando em Odontologia Ação 6: Trocar o texto do botão por “Envie seu artigo”
Usuário Análise do Teste
Ficou à vontade e realizou tranquilamente as tarefas.
Dúvidas
Ação 6: não compreendeu bem a ação, pois lhe foi pedido que
submetesse um novo artigo, e no botão está escrito Cadastro /
Submissão.
Paola Tiburcio da Silva Soluções
Graduando em Eng. Mecânica Ação 6: Trocar o texto do botão por “Envie seu artigo”
Usuário Análise do Teste
Realizou normalmente as tarefas.
Dúvidas
Ação 6: não compreendeu bem a ação, pois lhe foi pedido que
submetesse um novo artigo, e no botão está escrito Cadastro / Submissão.
Eduarda Ferreira Cerqueira Soluções
Graduando em Design Ação 6: Trocar o texto do botão por “Envie seu artigo”
Tabela 3 – Análise do 1º Teste de Usabilidade com Wireframe – Universitários
74
14.2. Usuários Professores
Usuário Análise do Teste
Conseguiu realizar rapidamente as tarefas. Disse que este projeto
será inovador para a Instituição.
Dúvidas
Ação 3: demorou a descobrir como voltar à página inicial,
procurando várias vezes no menu a palavra “home”.
Jose Cristiano P. L. da Silva Soluções
Educação Física Ação 3: acrescentar a opção no menu.
Usuário Análise do Teste
Conseguiu realizar rapidamente as tarefas. Disse que achou
interessante a metodologia aplicada para testar o site.
Dúvidas
Ação 1: relatou dúvidas em saber se era edição normal ou especial.
Ação 3: demorou a descobrir como voltar à página inicial,
procurando várias vezes no menu a palavra “home”.
Antonio Carlos da Silva Soluções
Engenharia Civil Ação 1: O usuário irá aprender com o próprio erro, caso aconteça.
Ação 3: acrescentar a opção no menu.
Usuário Análise do Teste
Foi o usuário que realizou as tarefas com mais facilidade.
Dúvidas
Nenhuma.
Carlos M. de Oliveira Klein Soluções
Educação Física Nenhuma.
Tabela 4 – Análise do 1º Teste de Usabilidade com Wireframe – Professores
75
14.3. Resultado
Na ação 1, um único usuário teve dúvidas em clicar em “edições” ou “edições
especiais”. Não há como corrigir, caso o usuário escolha a opção errada, tentará a
outra e aprenderá com o próprio erro. Na ação 3, a “logo” que é direcionada para
voltar à página inicial pode ter comprometido os usuários, uma vez que, por se tratar
de wireframe, a nomeamos como logo e não como home, fazendo com que o
usuário não tentasse aquele campo. Isto não implica no posicionamento, porque
quando colocarmos a logo da revista e também usarmos o atributo Atl18 no HTML, o
usuário perceberá e conseguirá realizar a ação. Na ação 6, o erro aconteceu pela
inexperiência dos usuários universitários de não escreverem artigos para
publicações, mas podemos usar um termo mais fácil: Envie seu artigo.
Com estes dados podemos entender que os usuários de uma forma geral
realizaram com facilidade as ações, havendo mínimos ajustes a realizar.
18 Texto alternativo quando o mouse é deixado em cima de imagens
76
15. LAYOUT
Depois de fazer os devidos ajustes no wireframe começamos a desenvolver o
layout do website com base nas informações levantadas nos capítulos anteriores.
Percebemos também a necessidade de retirar nas páginas internas, o banner que
existe na página inicial, pois ocupava uma área muito grande e repetia a mesma
informação.
15.1. Cores usadas
As principais cores aplicadas no layout são:
Azul #006699
Amarelo #F4B335
Cinza #666666
Abaixo seguem as páginas desenvolvidas.
77
Figura 49 – Layout da página índex
Figura 50 – Layout - Acessibilidade
78
Figura 51 – Layout - Busca
Figura 52 – Layout - Mapa do site
79
Figura 53 – Layout - Expediente
Figura 54 – Layout – Edições
80
Figura 55 – Layout - Edição modelo
Figura 56 – Layout – Edições Especiais
81
Figura 57 – Layout – Edições Especiais TCC
Figura 58 – Layout – Instruções para autores
82
Figura 59 – Layout – Permutas
Figura 60 – Layout – Dúvidas
83
Figura 61 – Layout – Quem já enviou / autores
Figura 62 – Layout – Quem já enviou / universidades
84
Figura 63 – Layout – Envio de arquivos
Figura 64 – Layout – Login
85
15.2. Acesso restrito - Usuário
Figura 65 – Layout – Área do usuário
Figura 66 – Layout – Artigo aprovado
86
Figura 67 – Layout – Artigo em análise
Figura 68 – Layout – Artigo com pendências
87
Figura 69 – Layout – Artigo reprovado
Figura 70 – Layout – Artigo aprovado
88
Figura 71 – Layout – Usuário novo
Figura 72 – Layout – Usuário novo inserindo coautores
89
Figura 73 – Layout – Usuário novo inserindo informações do artigo
Figura 74 – Layout – Usuário novo confirmando dados
90
Figura 75 – Layout – Artigo enviado
91
15.3. Acesso restrito - Avaliador
Figura 76 – Layout - Avaliador / nova avaliação
Figura 77 – Layout - Avaliador / avaliando
92
Figura 78 – Layout - Avaliador / confirmando avaliação
Figura 79 – Layout - Avaliador / avaliado
93
Figura 80 – Layout - Avaliador / artigo reapresentado
Figura 81– Layout - Avaliador / confirmando reavaliação
94
15.1. Acesso restrito – Ed. Chefe
Figura 82– Layout –Ed. Chefe / nova avaliação
Figura 83 – Layout - Ed. Chefe / avaliando
95
Figura 84 – Layout - Ed. Chefe / confirmando avaliação
Figura 85 – Layout - Avaliador / confirmando reavaliação
96
16. SEGUNDO TESTE DE USABILIDADE
Realizado no mesmo formato que o primeiro, inclusive as ações:
Ação 1: Encontre a Edição n° 4 da Revista Cadernos UniFOA
Ação 2: Vá até as Instruções para Autores
Ação 3: Volta à página inicial
Ação 4: Encontre a Edição Especial Resumos TCC 2011-1
Ação 5: Volte à página inicial
Ação 6: Envie um novo artigo, simbolizando o preenchimento dos campos.
Veja a seguir a análise dos vídeos.
97
16.1. Usuários Universitários
Usuário Análise do Teste
Realizou rapidamente as ações sem nenhum problema.
Dúvidas
Nenhuma
José Altair F. Neto Soluções
Engenharia Elétrica Nenhuma
Usuário Análise do Teste
Realizou rapidamente as ações sem nenhum problema.
Dúvidas
Nenhuma
Hugo Leonardo L. Dias Soluções
Design Nenhuma
Usuário Análise do Teste
Ficou um pouco nervosa no início, mas se tranquilizou no decorrer
do teste, chegando até a sorrir ao encontrar a opção.
Dúvidas
Nenhuma.
Paloma Saldanha Campos Soluções
Nutrição Nenhuma.
Tabela 5 – Análise do 2º Teste de Usabilidade com Layout – Universitários
98
16.2. Usuários Professores
Usuário Análise do Teste
Conseguiu entender e realizar normalmente as tarefas.
Dúvidas
Ação 6: sugeriu incluirmos a palavra Departamento junto à opção
Instituição, justificando que o usuário não precisa estar ligado a
uma Faculdade, Universidade ou Escola para enviar um artigo.
Carlos Vitor de A. Carvalho Soluções
Engenharia Civil Ação 6: atender à solicitação.
Usuário Análise do Teste
Realizou rapidamente as tarefas.
Dúvidas
Nenhuma.
Marcelo Augusto Mendes Soluções
Nutrição Nenhuma.
Usuário Análise do Teste
Realizou perfeitamente as tarefas, entendendo de forma clara
como preencher os campos para enviar o artigo.
Dúvidas
Nenhuma.
Rogério Borba Soluções
Direito Nenhuma.
Tabela 6 – Análise do 2º Teste de Usabilidade com Layout – Professores
99
16.3. Resultado
Neste segundo teste, todos os usuários conseguiram realizar com sucesso as
tarefas solicitadas. Por experiência, o professor Carlos Vitor sugeriu incluirmos a
palavra “Departamento” junto a “Instituição” no formulário para envio de artigos, pois
não necessariamente o autor precisa estar ligado a uma Instituição.
Com estes resultados, entendemos que o layout atingiu as metas necessárias
para que o usuário consiga encontrar as edições, tirar suas dúvidas e principalmente
enviar um artigo. Este é um princípio de Usabilidade.
100
17. CONCLUSÃO
Acredita-se que este projeto tenha cumprido a meta de desenvolver um novo
web site para a Revista Cadernos UniFOA, otimizando o processo de submissão de
artigos para revista. O foco do trabalho seguiu uma linha funcionalista que visava
priorizar aspectos relativos a usabilidade e acessibilidade do site. O trabalho não se
esgota aqui, a interface desenvolvida poderá ainda sofrer algumas modificações
antes de sua aplicação final. Acredita-se que o resultado desta fase foi amplamente
satisfatório por ter sido inclusive bem avaliado pelo Comitê Editorial da Revista.
101
18. REFERÊNCIAS
Imasters. Acessibilidade + Teoria do Design. Acessibilidade Web. (2005) <http://imasters.com.br/artigo/3134/acessibilidade/acessibilidade_web/> Acesso em 24 de mai. 2011. Brasil Escola. Sistema Operacional DOS. <http://www.brasilescola.com/informatica/ms-dos.htm> Acesso em 24 de mai. 2011. W3C. Cascading Style Sheets. 2011. <http://www.w3.org/Style/CSS/> Acesso em 19 de mai. 2011. Suporte Microsoft. Definição e a descrição de um pixel. 2007. <http://support.microsoft.com/kb/253680/pt-br> Acesso em 19 de mai. 2011. REINEGGER, André. 50 reasons NOT to use Photoshop for Web Design. <http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html> Acesso em 19 de mai. 2011. OLIVEIRA, Leonardo. A importância do Wireframe para a construção de sites! 2009. <http://www.fabianosalomao.com.br/?p=413> Acesso em 19 de mai. 2011. W3C. Web Content Accessibility Guidelines 1.0 – 1999. <http://www.w3.org/TR/WCAG10/> Acesso em 19 de mai. 2011. <http://www.usability.gov/guidelines/> Acesso em 19 de mai. 2011. ZEMEL, Tárcio. Breadcrumbs: guia completo com exemplos e melhores práticas.17/05/2010 <http://desenvolvimentoparaweb.com/usabilidade/breadcrumbs-guia-completo-exemplos-melhores-praticas/> Acesso em 19 de mai. 2011. oquesiginifica.com.br – Nós temos a resposta! - O que significa LOGIN? 22 de dezembro de 2008 <http://oquesignifica.com.br/informatica/o-que-significa-login> Acesso em 19 de mai. 2011. PÓVOA, Marcello. Usabilidade de verdade - As verdades e os mitos em torno da usabilidade nos projetos. 2004. Disponível em <http://webinsider.uol.com.br/ 2004/03/17/usabilidade-de-verdade/> Acesso em 13 de mai. 2011.
102
Bill Merikallio; Scott Design, Inc.; Adam Pratt; Adobe Systems Incorporated; Sérgio Lima Jardim; Plasma Design (tradução); Danival A. Souza; Max Revenda (tradução). <http://www.plasmadesign.com.br/stupidtables/>. Acesso em 26 mar. 2011. http://www.w3c.br/Home/WebHome Ministério do Planejamento, Orçamento e Gestão - <http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov> Acesso em 04 abr. 2011. MEMÓRIA, Felipe. Design para a Internet – Projetando a experiência perfeita. Rio de Janeiro: Editora Campus, 2005. JARDIM, Sérgio Lima. Porque utilizar tabelas para layout é estupidez: problemas definidos, soluções oferecidas. Disponível em: <http://www.plasmadesign.com.br /stupidtables/everything.html>. Acesso em 20 mar. 2011. MENEZES, Pedro. Porque criar sites com CSS é melhor do que com tabelas. Disponível em: <http://pedromenezes.com/porque-criar-sites-com-css-e-melhor-do-que-com-tabelas>. Acesso em 20 mar. 2011. http://www.capes.gov.br/avaliacao/qualis http://michaelis.uol.com.br/moderno/portugues/index.php?lingua=portugues-portugues&palavra=achismo http://webinsider.uol.com.br/2011/08/10/como-recrutar-pessoas-para-um-teste-de-usabilidade/ http://www.acessobrasil.org.br/ http://acessibilidadelegal.com/ http://www.pessoacomdeficiencia.gov.br/app/ http://www.prosperaweb.com.br/usabilidade/melhorando-a-usabilidade-do-site-atraves-de-barras-de-navegacao http://arquiteturadeinformacao.com/tag/sitemap/ http://blog.brasilgraf.com.br/cores-e-as-reacoes-no-receptor/ http://www.pucsp.br/~braga/dissertacao.pdf
103
http://www.microsoft.com/typography/fonts/family.aspx?FID=19 http://www.scielo.br/scielo.php?pid=S0102-71822007000100001&script=sci_arttext http://www.scielo.br/pdf/ci/v27n2/king.pdf http://www.slideshare.net/robsonsantos/sistema-de-rotulagem http://webroom.com.br/conteudo.aspx?cont=78&pai=72
104
AUTORIZAÇÃO COEPS
105
AUTORIZAÇÕES PARA USO DE IMAGEM
106
107
108
109
110
111
112
113
TERMOS DE CONSENTIMENTO LIVRE E ESCLARECIDO (TCLE)