USABILIDADE PARA O SITE DA REVISTA CADERNOS UNIFOA

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.

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.

3

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

“cadernosunifoa@foa.edu.br” 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 palavraschave. 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 http://960.gs 12 Mecanismo simples para adicionar estilo (por exemplo, fontes, cores, espaçamento) a documentos web.

11

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 15

Sistema operacional licenciado pela Microsoft Corporation.

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).

Nível de

Conceito

orientação

Às vezes também

Como utilizar

chamado de Estabelecer critérios de usabilidade para

Metas de

avaliar a aceitabilidade de um sistema (p. ex.:

Geral

usabilidade

“Quanto tempo leva para a realização de uma tarefa?”).

Metas

Identificar os aspectos importantes da

decorrentes da experiência do

Geral

Fatores de

experiência do usuário (p. ex.: “Como se pode

satisfação

tornar o produto interativo divertido e

usuário

agradável?”).

Heurística,

Princípios de

Geral

design

quando

Como lembretes do que fornecer e do que

utilizados na

evitar durante o design da interface (p. ex.:

prática.

“Que tipo de feedback você vai fornecer na

Conceitos de

interface?”).

design

Princípios de

Específica

usabilidade

Heurística,

Avaliar a aceitabilidade das interfaces,

quando

utilizadas durante a avaliação heurística (p.

utilizados na

ex.: “O sistema fornece saídas claramente

prática

indicadas?”).

Determinar se uma interface adere a uma

Regras

regra específica, quando está sendo projetada

Específica

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 Engenharia Civil

Soluções 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. <http://support.microsoft.com/kb/253680/pt-br> Acesso em 19 de mai. 2011.

2007.

REINEGGER, André. 50 reasons NOT to use Photoshop for Web Design. <http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesi gn.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 <http://www.w3.org/TR/WCAG10/> Acesso em 19 de mai. 2011.

–

1999.

<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/breadcrumbsguia-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-doque-com-tabelas>. Acesso em 20 mar. 2011. http://www.capes.gov.br/avaliacao/qualis http://michaelis.uol.com.br/moderno/portugues/index.php?lingua=portuguesportugues&palavra=achismo

http://webinsider.uol.com.br/2011/08/10/como-recrutar-pessoas-para-um-teste-deusabilidade/ http://www.acessobrasil.org.br/ http://acessibilidadelegal.com/ http://www.pessoacomdeficiencia.gov.br/app/ http://www.prosperaweb.com.br/usabilidade/melhorando-a-usabilidade-do-siteatraves-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)