Universidade Estadual de Maringá Centro de Tecnologia Departamento de Informática Curso de Especialização Desenvolvimento de Sistemas para Web

Transcrição

1 1 Universidade Estadual de Maringá Centro de Tecnologia Departamento de Informática Curso de Especialização Desenvolvimento de Sistemas para Web Um Modelo Teórico Prático para a Construção de Interfaces para Websites Kátia Pereira Gasparello Sforni Prof. Dr. Dante Alves Medeiros Filho Orientador Maringá, 2011

2 2 Universidade Estadual de Maringá Centro de Tecnologia Departamento de Informática Curso de Especialização Desenvolvimento de Sistemas para Web Kátia Pereira Gasparello Sforni Um Modelo Teórico Prático para a Construção de Interfaces para Websites Trabalho submetido à Universidade Estadual de Maringá como requisito para obtenção do título de Especialista em Desenvolvimento de Sistemas para Web. Orientador: Prof. Dr. Dante Alves Medeiros Filho Maringá, 2011

3 3 Universidade Estadual de Maringá Centro de Tecnologia Departamento de Informática Curso de Especialização Desenvolvimento de Sistemas para Web Kátia Pereira Gasparello Sforni Um Modelo Teórico Prático para a Construção de Interfaces para Websites Maringá, 20 de Dezembro de Prof. MSc. José Roberto Vasconcelos Prof. MSc. Paulo César Gonçalves Prof. Dr. Dante Alves Medeiros Filho (Orientador) Ass.: Ass.: Ass.:

4 4 Dedico este trabalho aos meus pais, minha irmã, meu marido e minha sogra.

5 5 AGRADECIMENTOS Primeiramente agradeço a Deus que me deu o dom da vida, e a várias pessoas que influenciaram diretamente na realização deste trabalho as quais citarei: A meus pais Nelson e Maria pelo imenso amor, incentivo; A minha irmã Carina pelas críticas construtivas; A meu marido Fábio pelo auxílio na realização deste; A minha sogra Marinez pelo apoio e carinho; Ao professor Dr. Dante Alves Medeiros Filho por toda atenção, orientação, amizade e confiança depositada em mim; A todo corpo docente do DIN - Departamento de Informática da UEM que neste período compartilhou conhecimento, disponibilizando recursos num aprendizado mais comprometido; A empresa Microline por ter permitido a realização deste trabalho; A todos da turma, pela amizade e compartilhamento de conhecimentos; E a todos pelo incentivo.

6 6 RESUMO O presente trabalho realiza um estudo sobre construção de interfaces web utilizando conceitos práticos e teóricos de usabilidade e ergonomia. Este estudo vale-se de um estudo de caso para mostrar como alguns conceitos de ergonomia e usabilidade podem melhorar a comunicação de um website. Neste sentido, foi realizada uma análise de um site existente onde detectou-se a ausência de critérios mais elaborados para seu desenvolvimento. Com esta análise foi possível propor um novo website com a utilização de critérios ergonômicos e de usabilidade. O resultado é ilustrado com a apresentação do novo site. Palavras-chave: Ergonomia, Modelo, Interface, Usabilidade, Website. ABSTRACT This paper conducts a study on building web interfaces using practical and theoretical concepts of usability and ergonomics. This study draws on a case study to show how some concepts of ergonomics and usability can improve the communication of a website. In this sense, we performed an analysis of an existing site where they detected the absence of more sophisticated the criteria for its development. This analysis was possible to propose a new website with the use of ergonomic and usability the criteria. The result is illustrated with the presentation of the new site. Key Words: Ergonomics, Model, Interface, Usability, Website.

7 7 LISTA DE FIGURAS Figura 1 - Arquitetura projetada da informação Figura 2 - Componentes da usabilidade Figura 3 - Organização da interface muito utilizada na internet Figura 4 - Exemplo de wireframe Figura 5 - Layout Figura 6 - Home do website em estudo Figura 7 - Página empresa Figura 8 - Página curso Figura 9 - Página detalhes do curso Figura 10 - Página serviços Figura 11 - Página jogos Figura 12 - Página Fale Conosco Figura 13 - Diagrama da arquitetura da informação Figura 14 - Wireframe da página principal Figura 15 - Paleta de cores Figura 16 - Esboço do layout... 45

8 8 LISTA DE QUADROS Quadro 1 - Cronograma de atividades Quadro 2 - Conteúdo Quadro 3 - Reestruturação das taxonomias Quadro 4 - Checklist de inspeção de interface para websites... 47

9 9 SUMÁRO INTRODUÇÃO Objetivo Geral Objetivos Específicos Justificativa Metodologia da pesquisa Tipo de estudo Quais procedimentos para coleta e análise dos dados Estrutura do trabalho INTERFACE WEB Conceituar, pesquisar e organizar conteúdo Especificações funcionais e esboço da aparência e sensação Diagramas e fluxogramas para tratar da funcionalidade e navegação Tipografia: legibilidade e estética para realização do esboço das páginas Produção de imagens gráficas e documentos HTML Criação do protótipo para análise Configuração no servidor final, e avaliação novamente ESTUDO ORGANIZACIONAL Estrutura atual PROPOSTA PARA NOVO WEBSITE Cronograma de atividades Etapa 1 - Atividade: Conceituar, pesquisar e organizar conteúdo Etapa 2 - Definição das novas taxonomias Etapa 3 - Diagramas e fluxogramas para tratar da funcionalidade e navegação Etapa 4 - Tipografia: legibilidade e estética para realização do esboço das páginas Etapa 5 - Produção de imagens gráficas e documentos HTML Etapa 6 - Criação do protótipo para análise Etapa 7 - Configuração no servidor final, e avaliação novamente CONCLUSÕES Contribuições teóricas Contribuições práticas Limitações do trabalho... 50

10 Sugestões para trabalhos futuros REFERÊNCIAS ANEXOS Anexo 1 - Wireframe da página Sobre Anexo 2 - Wireframe da página Serviços Anexo 3 - Wireframe da página Cursos Anexo 4 - Wireframe da página Blog Anexo 5 - Wireframe da página Contato Anexo 6 - Wireframe da página Parceiros Anexo 7 - Layout da página Sobre Anexo 8 - Layout da página Serviços Anexo 9 - Layout da página Cursos Anexo 10 - Layout da página Detalhe do Curso Anexo 11 - Layout da página Blog Anexo 12 - Layout da página Contato Anexo 13 - Layout da página Parceiros APÊNDICE Apêndice 1 - Checklist de avaliação website... 67

11 11 INTRODUÇÃO Atualmente as empresas têm utilizado websites para realizar mais que marketing web estático, elas estão cada dia mais interagindo com as pessoas, destacando suas redes sociais e até solicitando a opinião de seus usuários e clientes para determinado serviço ou produto oferecido. Esta interação é possível, pois além da tecnologia embutida na lógica do sistema, as interfaces estão cada vez mais bem preparadas para recepção de seus usuários. Para que a recepção dos usuários seja eficaz, e sua navegação no website seja eficiente, notase a transformação que as interfaces têm apresentado com: conteúdo consistente de textos curtos e claros; layout arrojado, leve e fácil de entender; sistema de navegação funcional; imediatez nas informações solicitadas; feedback informativo disponibilizando ambiente em que o usuário sinta-se no controle com finalidade de atrair visitantes e fazer com que voltem. Observa-se com isto que as empresas precisam sempre se atualizar frente às novas demandas. Neste sentido é imperativo que seus serviços web para a satisfação das necessidades de seus usuários utilizem no desenvolvimento de website conceitos como usabilidade e a ergonomia. Neste contexto é que surgiu a motivação para a realização deste trabalho que procura mostrar como estes conceitos podem contribuir no desenvolvimento de páginas web, de forma significativa para a melhora da interação-humano-computador. Para ilustrar como estes conceitos podem auxiliar no desenvolvimento dessas aplicações será realizado um estudo de caso com um site de uma empresa, com o objetivo de elaborar um website utilizando conceitos e métodos que serão discorridos no embasamento teórico. Assim, esta pesquisa justifica-se a desenvolver um ambiente web com foco na facilidade de uso, articulando interesses e expectativas dos envolvidos, maximizando a interação com usuários com finalidade de promover marketing web em uma escola de cursos profissionalizantes. Para alcançar a realização deste trabalho no tópico seguinte está o objetivo geral e a relação dos objetivos específicos.

12 12 1 Objetivo Geral Mostrar como os conceitos de usabilidade e ergonomia no desenvolvimento de interfaces web podem promover um ambiente colaborativo, de fácil interação, de layout claro e sucinto, contribuindo de maneira expressiva para a melhoria da interação-humano-computador. 1.2 Objetivos Específicos Para alcançar o objetivo geral, cabe salientar alguns objetivos específicos: Destacar a importância que a usabilidade e a ergonomia proporcionam na produção de interfaces web desenvolvendo um modelo para produção de websites; Desenvolver um estudo organizacional de um website existente, destacando sua estrutura atual; Sugerir por meio de um estudo de caso um novo projeto web com base na revisão da literatura e no estudo organizacional realizado; Organizar um plano expresso em cronograma para execução do projeto; Executar o cronograma e publicar o mesmo; 1.3 Justificativa Frente a esta revolução tecnológica que as interfaces bem planejadas possuem de interação com usuários a necessidade de desenvolver uma aplicação web que de suporte de marketing a organização em observação, parte do princípio da criação de um modelo que possa conduzir a produção da interface a fim de oferecer a organização mecanismos de coleta de dados do fluxo de visitantes e que possua além do design belo de leveza, ter atualizações constantes de notícias sobre o que acontece de novo na instituição. A realização de um modelo para construção de interfaces para websites é estudada a partir da organização de um website de uma instituição de ensino tomado com estudo de caso, a fim de promover aos alunos e não-alunos acesso a conteúdo de alta qualidade, com atualizações

13 13 constantes sobre novidades de cursos, promoções, eventos e sorteios intensificando a relação web com visitantes, com mecanismos sistêmicos que conduzam os visitantes ao preenchimento de formulário facilitando a entrada, a guarda, o tratamento e a apresentação das informações dos perfis dos usuários em forma de relatórios na intranet, sendo uma ferramenta web de fácil acesso e usabilidade. 1.4 Metodologia da pesquisa A metodologia deste trabalho é apresentada contextualizando e destacando o tipo de estudo que será empregado e os procedimentos para coleta e análise de dados Tipo de estudo Este trabalho apresenta uma característica descritiva e qualitativa. É descritiva, pois analisa o ambiente a fim de relacionar as principais características com o objeto estudado para proporcionar uma nova visão do problema e tornar mais fácil a relação ambiente e objeto que neste trabalho são respectivamente a empresa, o sistema web e visitantes. È qualitativa, pois segundo Roesh (1996, p. 117) o pesquisador qualitativo sai a campo não estruturado, justamente para captar as perspectivas e interpretações das pessoas. Assim perante aos fatos que serão observados este trabalho realizará análise no website existente, a fim de construir um novo com base na revisão da literatura Quais procedimentos para coleta e análise dos dados Com visualização sistêmica da problemática em questão será utilizada para a coleta e análise dos dados a observação seguida de análise do website existente para interpretação e formulação de um novo website. Após a documentação da estrutura atual serão executadas as seguintes etapas: 1 - Reorganização do conteúdo, e das taxonomias que serão utilizadas + feedback com cliente.

14 14 2 Esboço do wireframe da estrutura da interface + feedback com cliente 3 Construção do diagrama de navegação a partir das taxonomias + feedback com cliente. 4 - Escolha da Tipografia: legibilidade e estética + feedback com cliente. 5 Construção do protótipo para análise e avaliação. 6 - Apresentação ao cliente. 7 - Organização dos detalhes finais solicitados. 8 Teste no servidor final e Publicação Estrutura do trabalho Para um melhor entendimento sobre as etapas ou elementos que compõem este trabalho, a seguir será detalhado o que será estudado nos próximos capítulos. O capítulo 2 mostra passo a passo os métodos para construção de interfaces web, também traz os conceitos de usabilidade, ergonomia, bem como as ferramentas utilizadas para criação do da arquitetura e layout web, com foco no projeto antes da programação enfatizado a utilização dos conceitos e documentação para realização de interfaces. O 3º capítulo traz o estudo organizacional da estrutura atual do website existente, para coleta de dados seguida de análise e reorganização do conteúdo, com base no levantamento teórico realizado no 2º capítulo, destacando os dados que serão reutilizados para construção do novo website. O 4º capítulo apresenta um cronograma de atividades como um plano de implantação do modelo proposto da nova interface com wireframes, diagrama de navegação e layout gráfico das páginas definidos. Finalmente, no capítulo 5 apresentam-se as conclusões, as contribuições teóricas e práticas, as limitações encontradas para realização deste trabalho e as sugestões para trabalhos futuros.

15 15 2 INTERFACE WEB O design de interface determina a estrutura lógica das páginas web, de como os usuários visualmente de maneira simples em sua busca encontre as informações que estão disponíveis espontaneamente. Para que este processo entre usuários e páginas web seja em sua dimensão espontâneo o profissional de design de interface utiliza vários métodos como: dicas visuais, agrupamento de itens, codificação de cores, ferramentas para navegação, entre outros, dependendo da natureza e do tamanho do projeto. Porém, para que o design de interface realize a lógica das páginas web visualmente, primeiramente o conteúdo que será na web colocado deve ser organizado, procedimento este executado pelo design de informação ou especialista em arquitetura da informação que organiza e planeja como os usuários encontrão as informações disponíveis. Nesse sentido, este capítulo apresentara a fundamentação teórica de um modelo de criação de website, com foco no projeto antes da programação e na avaliação das interfaces. 2.1 Conceituar, pesquisar e organizar conteúdo Por se tratar o conteúdo da parte mais importante de um site web, sendo algo para ler ou fazer, nele deve haver algo de valor para atrair visitantes e fazer com que voltem, assim, o design de informação realiza a primeira etapa do processo de criação de websites (NIEDERST; FREITAS, 2002). Para os autores as etapas padrão que compõem o processo de design de informações são: Realizar inventário das informações que serão exibidas no site, que consiste em realizar uma lista de tudo o que deve ser colocado no site, nesse momento alguns pontos são importantes como a definição de: Traçar estratégias: porque construir um website; o que oferecer; o que os usuários precisam ver no meu website para que voltem; o que e quem espero atingir. Quais são os concorrentes. Detalhar: será para promoção, marketing, ponto de venda, definir da missão global. Conhecer o Público-alvo: obter conhecimentos sobre o público que será atingido com website é um excelente recurso para saber quais conteúdos colocar para atrair acessos.

16 16 Designar responsável pela geração do conteúdo: de maneira consistente de redação sólida. Organizar as informações utilizando estratégias de classificação: existem vários métodos de classificação: Alfabética: como listas de A a Z; Cronológica: por ordem de data de acontecimento; Tipo: grupos de informações similares; Hierárquica: divide as informações em seções; Espacial: informações organizadas geograficamente; Magnitude: classifica continuamente, como do maior para o menor entre outras. O método escolhido dependerá do tipo de informações que você possui. Formatar a estrutura do site ao cliente: refere-se a fornecer por meio de diagramas, fluxogramas a lógica de navegação e estrutura das informações, consciente do orçamento, pessoal e tempo disponível para realização do projeto. Para um melhor entendimento a figura 1 ilustra a hierarquia das páginas web.. Figura - 1 Arquitetura projetada da informação Fonte: AMSTEL(2005)

17 17 Com este exemplo de arquitetura projetada conforme figura 1 é possível visualizar de maneira rápida e detalhada a quantidade de páginas que farão parte do projeto, como elas estão distribuídas e que tipo de informação haverá em cada uma delas. A documentação mais detalhada de todo o conteúdo e funcionalidades de cada uma das páginas também é de responsabilidade do arquiteto de informações, documentação esta que posteriormente serão utilizadas pelos designers de interface. (MEMÓRIA, 2006). Outro aspecto que usualmente é utilizado para organização das informações é a utilização da usabilidade na web que combina estilo de redação, texto conciso, layout fácil para leitura e linguagem objetiva: Os estudos de usabilidade indicam um violento foco no conteúdo por parte dos usuários. Quando chegam a uma nova página, olham imediatamente para a principal área do conteúdo da página e buscam títulos e outras indicações do teor da página. Só mais tarde, caso decidam que o conteúdo não lhes interessa, é que buscarão na área de navegação da página outras idéias de sites a visitar. O conteúdo vem em primeiro lugar. (NIELSEN, 2000, p.100) Ainda na visão de Nielsen (2000), existem três principais diretrizes para escrever na web utilizando a usabilidade como condição de controle: Ser sucinto: com texto objetivo e conciso; Escreva tendo em vista a facilidade de leitura: realizar layout fácil de ler, utilizando textos curtos e listas; Use hipertexto para segmentar informação longa em várias páginas: consiste em dar destaque e ênfase para palavras importantes do texto realçando-as diferentemente dos outros links existentes, a fim de que estas palavras importantes levem o usuário à outra página que terá as informações mais detalhadas referente ao assunto. A norma ISO (2002, p.3) define a usabilidade como: Medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com eficácia, eficiência e satisfação em um contexto específico de uso. Para Schuhmacher (2007) a existência da usabilidade depende de três componentes: o usuário, a interface e a interaçãohumano-computador, elementos que estão identificados na figura 2.

18 18 Figura 2 Componentes da usabilidade Fonte: SCHUHMACHER (2007,p. 87) Estes elementos identificados na figura 2 seguem mais detalhadamente. O usuário: Que na fase de pesquisa fora identificado como seu púbico-alvo, sendo mais fácil nesse momento focar claramente suas necessidades, características e particularidades. Interação-Humano-Computador: Abrange todos os aspectos relacionados com a interação entre usuários e computadores que acontece por meio da interface. Emerge da necessidade de estudo dos principais fenômenos ao redor da interação entre usuários e computadores além do design de interfaces com utilização de avaliações e implementações de sistemas computacionais interativos para uso partindo das necessidades, capacidades e preferências dos usuários. Interface: É o meio que permite a comunicação entre o usuário e o computador, transformando as ações dos usuários em entradas, conduzindo as entradas para serem processadas pelo sistema e apresentando os resultados solicitados. Com a definição de usabilidade conforme a norma ISO e seus componentes segundo Schuhmacher verifica-se que trata-se de um conceito que permite que as informações presente na interface sejam mais intuitivas para usuário. Nesse sentido, adotar a usabilidade desde início em um projeto web permite: redução de erros e de procedimentos de correção; diminuição do tempo de construção da interface; redução de custos de treinamento, de manutenção e de suporte ao usuário e, como resultado, assegura no uso, eficácia, eficiência, segurança, utilidade, fácil aprendizagem e fácil de lembrar.

19 Especificações funcionais e esboço da aparência e sensação Segundo Nielsen (2000,p.10) Se não conseguirem descobrir como usar um website em aproximadamente um minuto, concluem que não vale a pena gastar seu tempo. E saem. Para que isso não ocorra o design de interface determina como a estrutura lógica de um site aparece visualmente na página e como o usuário chega aquela informação, esta etapa do projeto envolve como realizar: Diagramas e fluxogramas para tratar da funcionalidade e navegação e escolha da Tipografia: legibilidade e estética para realização do esboço das páginas que serão programadas. Manter a distância de confusão visual é a chave para Krug (2008): Os usuários têm tolerâncias variadas a complexidade e distrações. Algumas pessoas não têm problema com páginas cheias e confusão em segundo plano, mas muitas sim. Quando você estiver projetando páginas web, é provavelmente uma boa idéia supor que tudo seja confusão visual até prova em contrário. (Krug,2008, p.39) Diagramas e fluxogramas para tratar da funcionalidade e navegação Memória (2006, p. 50) define: A Web é, por essência, um sistema baseado em navegação. É sua característica mais básica e primordial, que possibilita o acesso a informações de forma não linear. Assim, os padrões de navegação quando bem projetados funcionam como recomendações para que a compreensão das interfaces seja facilitada de modo que: A interface navegacional precisa mostrar todas as alternativas disponíveis ao mesmo tempo, de forma que os usuários possam tomar uma decisão fundamentada com relação à opção que melhor satisfará às suas necessidades. (NIELSEN, 2000, p.196). A figura 3 ilustra com clareza o padrão de posicionamento de certos elementos de interface de websites.

20 20 Figura 3 Organização da interface muito utilizada na internet Fonte: MEMÓRIA (2006, p. 59) Para Memória segundo seus estudos e avaliações com base em vários pesquisadores da área de interfaces a figura 3 ilustra o posicionamento mais indicado para os elementos: Marca: canto superior esquerdo; Busca: parte superior; Navegação global: coluna esquerda; Beadcrumbs: parte superior e abaixo da marca da empresa; Conteúdo global e contextual: área central; Navegação de rodapé: parte inferior. Neste contexto percebe-se que a interface e o sistema de navegação são aliados e funcionam em sincronia para recepção e passeio do usuário pela aplicação, fornecendo ao usuário onde ele se encontra na aplicação e onde ele pode ir, de forma Clara: onde as ferramentas de navegação são intuitivas e rapidamente entendidas; Eficiente: evitando excesso de cliques utilizando atalhos para chegar ao desejado mais rapidamente; e Consistente: opções de navegação coerentes e disponíveis. (MEMÓRIA, 2006) A ferramenta de navegação mais comum atualmente é o menu, que geralmente está na parte superior da página e as vezes ao lado esquerdo ou direito dependendo do design de interface existente, que, possibilita uma visão do todo da aplicação ao usuário de forma resumida, além do menu outras duas ferramentas bastante utilizadas são: mapa de site e a função de busca. O mapa do site fornece ao usuário uma visão detalhada do todo da aplicação e a ferramenta de

21 21 busca auxilia o usuário a realizar pesquisa da informação desejada dentro ou fora da aplicação web. (NIEDERST, 2000) Já em uma aplicação web de comércio eletrônico o mais comum em ferramenta de busca aos produtos são as categorias e marcas, mas o top do momento sendo comércio eletrônico ou não tem sido a navegação por nuvem de tags, que é uma nova forma de expor aos visitantes os itens de conteúdo do website, podendo ser organizado de acordo com os clics dos usuários no site. Consiste em uma maneira inteligente que as interfaces inovadoras estão utilizando para melhor sinalização de navegação no meio de uma grande variedade de produtos ou informações Tipografia: legibilidade e estética para realização do esboço das páginas Adotando como referência a documentação de arquitetura projetada que o design de informação criou para especificar as informações que vão compor cada página o design de interface para realização do esboço das páginas web que serão programadas utiliza como base a logomarca, folders, identidade visual, concorrência e cultura da empresa, buscando transmitir a mensagem central desejada no projeto, refletindo os atributos da marca e sua personalidade. Para início da organização destes elementos visuais, o design de interface projeta com wireframes que segundo Memória (2006): são um rascunho de uma tela específica que posiciona a informação e a navegação, incluindo-se aí agrupamento, ordem e hierarquia do conteúdo. É um esqueleto que organiza os elementos de interface, sem a interferência do projeto visual. (Memória 2006, p. 36) Amstel (2005) define wireframe como documento que deve servir de referência ao designer gráfico da página, e passa a seguinte dica: Wireframe não é para ser bonito é para ser entendido. A figura 4 ilustra um caso real de um wireframe criado por Amstel que nos transmite outra dica: que além de informar ao cliente antes de entrega-los para discusões explica que se trata de esboço feito para visualização/decisão do posicionamento dos elementos que vão compor a página, e ainda reforça esta questão escrevendo em cima do documento: Este wireframe não define design gráfico, sua função é apresentar elementos que vão compor a página.

22 Figura 4 Exemplo de wireframe Fonte: AMSTEL(2005) 22

23 23 Após a construção dos wireframes prevendo cada detalhe e funcionalidade que será utilizada em cada página, o próximo passo é definição do design gráfico das páginas: escolha de fonte, cores, alinhamento dos elementos e hierarquia visual. Nesta fase de construção do esboço além de se basear na imagem corporativa da empresa e na documentação realizada pelo design de informação o profissional de design de interface deve ter conhecimento de como organizar dados Mullet and Sano (1995) descrevem como deve ser este procedimento: Elegância e simplicidade: unidade, refinamento, adequação; Escala: contraste e proporção: clareza, harmonia, atividade e restrições; Organização e estrutura visual: agrupamento, hierarquia, relacionamento e equilíbrio; Módulo e programa: foco, flexibilidade e aplicação consistente; Imagem e representação: imediatez, generalidade, sistematização e caracterização; e Estilo: distinção, integridade, abrangência e adequação; Estes dados tratam-se da organização formal de elementos visuais, tanto textuais quanto não textuais que necessitam do arranjo adequado de arte e tecnologia para a transmissão de idéias com objetivo expressamente comunicacional permitindo que os usuários sempre esteja no controle disponibilizando atalhos; projeção de diálogos com feedback informativo; consistência nas informações disponibilizadas, com tratamento de erros; e tornando tudo isso fácil de usar e lembrar deixando o ambiente intuitivo ao usuário. Shneiderman (1998). A figura 5 ilustra o layout gráfico da página com base na utilização do wireframe da figura 4.

24 Figura 5 - Layout Fonte: AMSTEL(2005) 24

25 25 Amstel (2005) autor do wireframe (figura 4) utilizado como referência para construção do layout da figura 5 enfatiza que o wireframe realizado sem definição: de grid de alinhamento; tamanho de fonte; e tipografia; o designer pode encontrar melhor disposição para os elementos de acordo com sua criação, sem se sentir engessado com informações já préestabelecidas. É importante ressaltar que, todas as páginas que vão compor website devem possuir seu wireframe, pois é com base na estrutura criada no wireframe que será produzido o design gráfico das páginas. Assim novamente, a documentação é fundamental para que outras equipes entendam o que foi realizado e continue o trabalho, prevendo que pessoas envolvidas no projeto podem adoecer ou escolher outra oportunidade de carreira. Com design gráfico da interface de todas as páginas finalizado com foco: no público-alvo, nos objetivos do produto e suas principais tarefas, com textos curtos, claros e consistentes, e navegação óbvia, simples e transparente ao usuário com tratamento de erros. (MEMÓRIA, 2006) O projeto está pronto para ser apresentado ao cliente que e se aprovado passa para fase da produção de imagens e documentos HTML, caso contrário, é verificada as alterações solicitadas e apresenta-se novamente ao cliente para aprovação. 2.3 Produção de imagens gráficas e documentos HTML Somente após a aprovação do layout é que o site entra em processo de produção. Os designers gráficos das páginas serão transformados para incorporar documentos HTML, assim como, o conteúdo que também será formatado para adequação de sua visualização na web. Em fim, nesta etapa do projeto todos os elementos do site devem ser criados e unidos em páginas HTML. (NIEDERST, 2002) Para Lynch e Horton (2002) apud Schuhmacher (2007) os elementos que devem estar em ordem neste momento são: textos editados e corrigidos; especificação do designer gráfico de todas as páginas; cabeçalhos, logotipos, botões e fundos definidos; ilustrações; fotografias; e demais elementos que irão compor o website. A finalização desta etapa se dá com diversos testes em diferentes navegadores e monitores para verificação do comportamento dos elementos da interface até que tudo se encaixe conforme layout aprovado pelo cliente.

26 Criação do protótipo para análise Com exibição das páginas HTML nos mais diversos navegadores, é hora de fazê-las funcionar. A escolha do banco de dados e da linguagem de programação dependerá do nível de grandiosidade do projeto e de seus requisitos. Como o foco deste trabalho é interface web não abordaremos mais a fundo esta questão de programação, e sim, de como após as funcionalidades ativadas nas páginas HTML podem ser analisadas. Na visão de Schuhmacher (2007. p. 76) protótipos são modelos funcionais construídos a partir de especificações preliminares para simular a aparência e a funcionalidade, ainda que de forma primitiva e incompleta, de um software a ser desenvolvido. Para Memória (2006. p.164) A prototipação é importante não só para apresentações para clientes e diretores, como também para que as próprias pessoas envolvidas no projeto possam avaliar o funcionamento da navegação e dos demais elementos do site. O Desenvolvimento do presente trabalho utilizará princípios ergonômicos visando atingir melhor usabilidade. Para tanto será construído um protótipo para análise dos resultados com objetivo de observação da comunicação visual causada que, deve transmitir a devida usabilidade visando gerar acessibilidade e comunicabilidade. Segundo Cybis (2007, p.175) Enquanto a usabilidade é medida, a ergonomia da interface só pode ser inspecionada e/ou avaliada a partir de recomendações ou critérios ergonômicos. Para o autor a avaliação da ergonomia das interfaces pode ser classificada como: analíticas, heurísticas ou por lista de verificação. Avaliações analíticas: são realizadas por projetistas ou especialistas em usabilidade, que realizam inspeções na realização das tarefas a fim de verificar a complexidade e estimar o tempo das interações propostas. Avaliações heurísticas: baseada nos conhecimentos ergonômicos dos avaliadores que percorrem a interface a fim de diagnosticar os problemas e barreiras que os usuários podem encontrar durante as interações, Entretanto, seus resultados dependem da competência dos avaliadores e das estratégias de avaliações empregadas. CYBIS (2007, p.183). Inspeções por lista de avaliações: neste tipo de técnica, ao contrário das avaliações analíticas e heurísticas que são realizadas por profissionais de usabilidade e ergonomia

27 27 respectivamente, são as qualidades da ferramenta (checklists) que decide o sucesso da inspeção. Para Cybis deve-se ter muita atenção com qualidade das listas, Listas mal elaboradas, que apresentam questões subjetivas e em número insuficiente, podem levar à produção de resultados duvidosos, pouco uniformes e pouco abrangentes. (CYBIS 2007, p.188). Perante aos critérios de avaliações de interfaces expostos: analíticas, heurísticas e por listas, neste trabalho será utilizado o método de inspeções por lista, por se tratar de um método que não demanda profissional específico em usabilidade e ergonomia e por conduzir a avaliação das interfaces de maneira sistêmica garantindo resultados mais estáveis, pois as questões/recomendações presente no checklist sempre serão efetivamente verificadas mesmo quando aplicada por diferentes avaliadores. O apêndice traz o modelo de checlist que será utilizado para avaliação das interfaces efetivamente. Ainda na visão de Cybis (2007, p.173) É importante salientar que um problema de usabilidade ocorre durante a interação, atrapalhando o usuário na realização de sua tarefa, mas tem sua origem em um problema da ergonomia da interface. E ressalta que, a ergonomia está na origem da usabilidade, visando proporcionar eficiência e eficácia, além do bem-estar e saúde do usuário, neste contexto, avaliações ergonômicas das interfaces garantem sistemas adaptados à maneira que o usuário necessita, utiliza e se satisfaça na interação-humanocomputador. 2.5 Configuração no servidor final, e avaliação novamente. A etapa final do processo da criação de interfaces para websites é a hospedagem da versão final do website no servidor, que o tornará disponível para o mundo. É uma boa ideia fazer uma rodada final de testes para se certificar que tudo foi transferido com sucesso e de que ás páginas funcionam adequadamente sob a configuração do servidor final. (NIEDERST, 2002, p. 69). A checagem em todas ás páginas, para verificação se todas ás imagens gráficas aparecem, se os links estão funcionando de maneira correta, se as funcionalidades como o envio de está transmitindo a mensagem, é muito importante para garantir os sucesso do website, enfim, atenção aos detalhes é essencial. (NIEDERST, 2002).

28 28 3 ESTUDO ORGANIZACIONAL Este capítulo apresenta o estudo organizacional da estrutura atual do website existente, verificando layout, taxonomias e conteúdo para coleta de dados seguida de análise e reorganização do conteúdo, destacando os dados que serão reutilizados para construção do novo website. A organização escolhida como estudo de caso para a realização da pesquisa foi a Miroline de Marialva-PR, criada em 24 de julho de 2000 esta instituição de ensino de cursos profissionalizantes atualmente possuí cursos nas áreas administrativa, design, informática, inglês e mecânica de motos. É uma em empresa socialmente responsável, pois desenvolve programa de incentivo aos estudantes de terceira idade, facilitando o acesso ao ensino de informática a eles. Além de cursos a Microline ainda realiza venda de computadores e suprimentos, assistência técnica em hardware e software, soluções técnicas para web e cyber café. A pesquisa é de cunho, descritiva e explicativa, por meio de um estudo de caso a partir do website existente visa à possibilidade de aumentar a abrangência, a facilidade de uso, o design e o poder de atração do site da Microline. 3.1 Estrutura atual O website atual possuí seis páginas principais sendo elas: Home, Empresa, Cursos, Serviços, Jogos e Fale Conosco. Esta etapa é decisiva no processo de reestruturação do website, pois é neste momento que se conhece, com detalhe, todos os recursos que o website tem para oferecer, assim como é apresentado o seu conteúdo, sendo necessário ao inspetor a navegação e exploração de todas as partes que compõem o website a fim de detectar os problemas de navegação, mensagens, conteúdo, formulários, ferramentas e, através disto, documentar toda a estrutura do website. A seguir a página Home conforme figura 6:

29 29 Figura 6 - Home do website em estudo Na Home é possível verificar conforme a figura 6 há a ausência na imediatez do foco do website, ou seja, o detalhamento juntamente a logomarca no topo mostrando do que se trata este portal se é para promoção, marketing, ponto de venda etc. Também nota-se uma área muito grande destinada aos parceiros, deixando a desejar de conteúdo sobre a empresa em si ao leitor justamente na home que é a página principal de um website. O banner se tornou o principal informativo da missão global do website, porém, alguns usuários não possuem tolerância para aguardar a passagem do banner pausadamente. As notícias, que é o conteúdo atualizado do dia-a-dia da organização não possuí interação com usuários como atualmente, em que a página Blog do website além de permitir a atualização constante de notícias ainda permite interação com usuários onde os mesmos além de ver as notícias podem comentá-las e

30 30 compartilhar as mesmas em redes sociais. E por fim, o rodapé com os direitos autorais somente, onde poderia haver um menu de navegação com todas as páginas da empresa. Quanto à tipografia: legibilidade e estética, o layout esta comprometido com as cores utilizadas, pois causam cansaço aos olhos, por não possuírem contraste e proporção adequados para proporcionar ao usuário clareza e harmonia na visualização. A página possuí poucos elementos atrativos aos usuários para que os mesmos tenham interesse em navegar no restante do website, isto ocorre devido a ausência interatividade como: campo de busca no website, um clique no banner que o leve a maiores informações sobre o assunto, elementos de mídia como vídeo de assuntos direcionados ao ensino, atendimento on-line, redes sociais, filtro de busca de notícias por agrupamento em categorias e tags e navegação de rodapé. A próxima página a ser analisada é a página empresa. A página empresa expõe a história da organização, bem como sua visão missão e valores, e um espaço para a localização da empresa. O conteúdo da missão, visão e valores estão bem claros e concisos, mas a história necessita de uma revisão ou até reformulação. Segue na figura 7 o layout da página empresa.

31 31 Figura 7 Página empresa Outro elemento que há em alguns websites atualmente e poderia ser agregado aqui também na página empresa é toda equipe da organização cada indivíduo com foto, descrição de perfil e

32 32 contato. A próxima página a ser verificada é a página principal de Cursos que é o foco da empresa, nela existem nove cursos os quais são lecionados, porém já existem mais dois novos cursos que ainda não estão nesta página. Também nota-se uma área reservada novamente à localização da empresa, abaixo conforme a figura 8 segue a página Cursos. Figura 8 Página curso Ao clicar em algum dos cursos que existem na figura 8, o usuário é direcionado aos detalhes do curso desejado e nesta página o leitor encontra um resumo referente ao que se trata o curso, a carga horária e as disciplinas ministradas. A seguir na figura 9 a página do curso de Assistente Administrativo.

33 33 Figura 9 Página detalhes do curso Nesta página de detalhe do curso conforme figura 9, pode-se verificar que verdadeiramente o foco são os cursos, pois ao lado direito possuí um menu de acesso rápido a todos eles, o que favorece a navegação do usuário que esta a pesquisa de vários cursos. Já a página de serviços que é a agregação de atividades que a empresa oferece aos seus clientes possuí apenas a listagem de: nossos serviços; e vendas de. Conhecendo a empresa e sabendo do potencial que nela existe nota-se a ausência de conteúdo nesta página, a mesma necessita ser reformulada, encorpando mais este conteúdo existente e reorganizando-o. Abaixo segue layout da página de serviços conforme figura 10.

34 34 Figura 10 Página serviços A seguir a página Jogos, esta página tem como objetivo a atração de acessos de alunos e não alunos no website bem como a permanência nele. Ela é a principal interação com usuários existente neste portal, e possuí várias opções de jogos conforme a figura 11.

35 Figura 11 Página jogos 35

36 36 Verificando o layout da página de jogos conforme a figura 11, a mesma poderia ser mais explorada, com inserção de uma coluna lateral com acessos a outras áreas do website, e aprofundando um pouco mais nesta exploração a mesma poderia fazer parte de um acesso restrito somente a alunos com outras opções além de jogos como: promoções exclusivas, dicas de estudos e profissões, oportunidades de estágios e empregos e etc. E para finalização a página a ser examinada é a página Fale Conosco conforme figura 12. Figura 12 Página Fale Conosco Constata-se na página Fale Conosco figura 12 a presença do formulário de contato com a organização e novamente uma área destinada à localização da empresa. Esta página também é

37 37 muito importante para website, pois é por intermédio dela que os usuários podem se comunicar com a empresa. As sugestões estão centradas neste terceiro capítulo com avaliação da estrutura atual do website, com objetivo de torná-lo um ponto facilitador na comunicação entre a Microline e alunos correntes e alunos potenciais, contribuindo para melhorias no layout do website tornando-o um portal atrativo, amigável proporcionando interatividade com usuários e fortalecimento da marca na web. Para que a reestruturação seja realizada se faz necessário à realização de um cronograma de atividades a serem realizadas até que o novo website fique pronto, este cronograma e suas atividades serão realizados no próximo capítulo.

38 38 4 PROPOSTA PARA NOVO WEBSITE Neste capítulo será apresentada a proposta para novo website, com base no cronograma de atividades. As etapas de execução do projeto prevista no cronograma têm como objetivo utilizar as contribuições da usabilidade e ergonomia para o desenvolvimento de websites. Esta metodologia tem como foco a promoção da imagem da organização na web como um ponto facilitador de navegação, acessibilidade e permanência dos usuários. 4.1 Cronograma de atividades O cronograma de atividades é o agendamento de tarefas a serem desenvolvidas em um determinado tempo para efetivação de um projeto, sendo de fundamental importância para o controle do projeto. Neste trabalho que ilustra a contribuição da usabilidade e da ergonomia na construção de websites utilizou-se como referência um estudo do site de uma empresa, o qual foi analisado no terceiro capítulo, para que neste cronograma sejam listadas as contribuições para um novo website. O quadro 1 ilustra o cronograma em etapas de atividades a serem efetuadas. Cronograma de atividades para realização website Etapas Atividade Outubro Novembro Dezembro 3ªs 4ªs 1ªs 2ªs 3ªs 4ªs 1ªs 2ªs 1 Conceituar, pesquisar e organizar conteúdo 2 Definição das novas taxonomias 3 Diagramas e fluxogramas para tratar da funcionalidade e navegação 4 Tipografia: legibilidade e estética 5 Produção de imagens gráficas e documentos HTML 6 Criação do protótipo para análise 7 Configuração no servidor final, e avaliação novamente. Quadro 1 Cronograma de atividades

39 Etapa 1 Atividade: Conceituar, pesquisar e organizar conteúdo O conteúdo existente para melhor visualização fora tabulado para melhor visão de todo que foi aproveitado e reformulado conforme quadro 2 Conteúdo. Página Conteúdo Situação Critério Banner Mantido ok Home Notícias Reformulado Destaque Parceiros Reformulado Localização História Reformulada Forma Visão Mantida ok Empresa Missão Mantida ok Valores Mantida ok Localização Excluída Repetição Cursos Todos Mantidos ok Resumo Mantidos ok Curso / Detalhe Carga Horária Mantidos ok Disciplinas Mantidos ok Assistência Técnica Reformulada Forma Serviços Vendas Reformulada Forma Contato/Localização Excluída Repetição Jogos Todos Excluído Estratégia Fale conosco Formulário de contato Mantido ok Localização Mantido ok Quadro 2 - Conteúdo Conforme quadro 2 com a situação de cada conteúdo, a página home manteve o banner, as notícias ganharam destaque com listagem das ultimas três com título de blog, já os parceiros perderam espaço na home ficando somente a chamada da página no rodapé. Em pesquisa para incremento da home acrescentaram-se os elementos: registre-se neste site, assine nosso rss, campo de busca, chamadas para páginas de cursos, promoções, serviços, vídeo da semana, atendimento on-line, redes sociais, filtro de busca de notícias por agrupamento em categorias e tags e navegação de rodapé.

40 40 Na página empresa somente o conteúdo da história foi reformulado para maior destaque na página, sendo localização excluída e demais visão, missão e valores mantidos. Em verificação para incremento da página da empresa o novo elemento equipe foi acrescentado, com foto, descrição de perfil e nome de cada colaborador da empresa. Já na página principal de Cursos todos foram mantidos, pois os mesmos estão todos sendo lecionados, e acrescentaram-se mais dois que em pesquisa verificou-se a ausência dos mesmos no website. Nas páginas com detalhes de cada curso com, descrição, carga horária e disciplinas todos os conteúdos foram reaproveitados. A página de serviços ganhou destaque com um resumo de forma geral do que a organização realiza em: manutenção, vendas e suporte. E a assistência técnica foi agrupada por área de atuação. E novamente a Localização foi excluída, para que a mesma fique somente na página de contato. Em verificação a página jogos foi excluída neste primeiro momento, para que em uma segunda fase de incremento no website a mesma faça parte de uma área privada somente para alunos. E por fim a página fale conosco, mantém o formulário de contato e a localização. Com a realização deste mapeamento e reformulação de conteúdo a etapa 2 complementa a etapa 1 com reformulação das taxonomias Etapa 2 Definição das novas taxonomias A estrutura de navegação de um website é sua principal forma de organizar o conteúdo de cada página existente, bem como sua chamada que deve expressar todo conteúdo existente ali. Se não for consistente e fácil de utilizar com conteúdo esperado em cada página o usuário desiste por sua busca. Essa chamada das páginas para Amstel (2005 p.2) é uma classificação aplicada a um conjunto de páginas na Web, formando uma hierarquia que pode ser navegada através de menus, seguindo esta mesma linha de classificação organizada de fácil acesso é que foi realizada a reestruturação das taxonomias existentes conforme quadro 3.

41 41 Home Empresa Cursos Serviços Jogos Fale Conosco Existentes Taxonomias Home Sobre Cursos Serviços Blog Contato Reestruturação Quadro 3 Reestruturação das taxonomias Conforme quadro 3 somente foram reestruturadas as páginas Empresa para Sobre, Jogos para Blog e Fale Conosco para Contato, as demais: Home, Cursos, e Serviços permaneceram pois as mesmas retratam o conteúdo nela existente Etapa 3 Diagramas e fluxogramas para tratar da funcionalidade e navegação Com a reorganização das taxonomias, o menu esta composto, para visualização universal do novo website, é necessário a realização do diagrama de arquitetura de informação que é ilustrado conforme a figura 13, onde pode-se visualizar todas as páginas que farão parte website, assim como o conteúdo que deve existir em cada uma delas.

42 42 Figura 13 Diagrama da arquitetura da informação As páginas Home, Sobre, Serviços, Cursos, Blog e Contato fazem parte do menu superior principal, já a página de parceiros onde os links irão para fora do website, está presente somente no menu inferior juntamente com as outras páginas existentes e por fim a página Registre-se neste site que também não está no menu principal superior irá situar-se na barra do topo de website. A figura 14 ilustra o wireframe da página principal.

43 43 Figura 14 Wireframe da página principal A ilustração da página home com possíveis elementos para forma-la realiza-se com intuito de visualização de preenchimento da página, as outras principais páginas: sobre, serviços, cursos, blog e contato também possuem wireframe que estão anexos a este trabalho.

44 Etapa 4 Tipografia: legibilidade e estética para realização do esboço das páginas Quase todo conteúdo na web é texto e torná-lo atrativo de fácil visualização para que a leitura seja fluída titula-se legibilidade e estética. A escolha da fonte é geralmente o principal elemento a ser lembrado quando se fala em legibilidade na web, mas, existem outros elementos que contribuem para legibilidade como: espaçamento e margem, contraste, comprimento e alinhamento. A estética no projeto de interface web abrange o conforto visual que permite a utilização das cores e da arte de acordo com contexto aplicado. Diante destes elementos que facilitam aos usuários a compreensão do conteúdo na web é que se realiza a proposta para o esboço das páginas. Inicialmente a logomarca foi o principal elemento como base em cores, após vários detalhes em bate-papo com cliente que citou: leveza, slaids na home, layout com formas arredondadas, cores claras, logomarca no centro. Em estudo de todo contexto, chegou-se a seguinte definição de fonte e cores: Fonte do menu principal: Gnuolane Free, para diferenciar da fonte utilizada no conteúdo do website. Fonte do conteúdo: Helvetica Neue, Helvetica, Arial, sans-serif, que pelo modelo ser sem serifa permite melhor visualização de textos no monitor. A paleta de cores abaixo ilustra as quatro principais cores escolhidas para serem utilizadas na construção do layout. Figura 15 Paleta de cores Com definição de conteúdo, taxonomias, navegação, elementos que irão compor a página, fontes e cores o esboço pode ser realizado. A figura 16 ilustra o esboço do layout que foi aprovado para realização do html conforme etapa 5.

45 Figura 16 - Esboço do layout 45

46 46 No esboço aprovado comparado ao seu wireframe inicial apresentado na etapa 3, nota-se que os elementos foram reorganizados e que suas chamadas também mudaram, isso ocorre devido a harmonia e equilíbrio que deve existir na disposição dos elementos na web. As demais páginas, sobre, serviços, cursos, blog e contato tem seu layout anexo a este trabalho Etapa 5 Produção de imagens gráficas e documentos HTML Com objetivo de transformar todo conteúdo e imagens do layout planejado em páginas html a etapa 5 do projeto de construção de interface web é o momento em que o programador vincula tudo o que foi esquematizado em formato de documentos html, ou seja, páginas que são possíveis de visualização em um navegador de internet. Após, as páginas html, são conduzidas a etapa 6 de criação do protótipo para análise Etapa 6 - Criação do protótipo para análise Com as páginas html concluídas as funcionalidades são acionadas para que a interface possa conduzir os usuários a navegar e realizar tarefas, o que torna o projeto nesta fase um protótipo, assim, neste momento é possível a realização de análise ao modelo do website proposto com utilização de um checklist de inspeção. As listas de verificação possuem questões que devem ter como resposta sim ou não. Nestas questões, as respostas em não conformidade devem ter sua justificativa. O quadro 4 ilustra o checklist.

47 47 Checklist - Inspeção de interface website Acessibilidade Avaliação Comentários 1. O tempo de carregamento do site é razoável sim 2. Contraste do texto/fundo é adequado sim 3. Tamanho da fonte / espaçamento é fácil de ler sim 4. Flash & plug-ins são usados com moderação sim 5. Imagens têm tags ALT apropriado sim 6. Site tem página personalizada - não encontrada/404 sim Identidade 7. Logotipo da empresa é de forma destacada sim 8. Tagline(slogan descritivo) faz propósito empresa clara sim 9. Home-page é digerível em 5 segundos sim 10. Caminho claro para informações sobre a empresa sim 11. Caminho claro para informações de contato sim Navegação 12. A principal navegação é facilmente identificável sim 13. Rótulos de navegação são claras e concisas sim 14. Número de botões / links é razoável sim 15. Logotipo da empresa está ligada à home-page sim 16. Ligações são consistentes e fáceis de identificar sim 17. Pesquisa no site é de fácil acesso sim Conteúdo 18. Títulos principais são claros e descritivos sim 19. Conteúdo crítico está acima da "dobra" sim 20. Estilos e cores são consistentes sim 21. Ênfase (negrito, etc) é usado com moderação sim 22. Anúncios e pop-ups são discretos não Não se aplica 23. Página principal é concisa e explicativa sim 24. URLs são significativos e de fácil utilização sim 25. Títulos de páginas HTML são explicativas sim Quadro 4 Checklist de inspeção de interface para websites Fonte: MEYERS (2009) A ferramenta de avaliação de interface utilizada no protótipo evidencia as variáveis de verificação de: acessibilidade, identidade, navegação e conteúdo relacionados aos procedimentos de interação do usuário com website, que identificam o cumprimento para as tarefas de interação. A questão 22 que possuí não como resposta e comentário de que não se aplica, no protótipo em avaliação não possuí anúncios e pop-ups em sua estrutura.

48 48 Com a realização da inspeção da interface via checklist é possível perceber como é de fácil aplicação e entendimento a desenvolvedores não especialistas em avaliação ou interações, além, das contribuições incorporadas pela integração da ferramenta no modelo de construção de interfaces para websites que permite auxiliar na implementação de qualquer tipo de website Etapa 7 - Configuração no servidor final, e avaliação novamente. A configuração no servidor final é necessária para que o website se torne acessível para o mundo. Avaliar o website novamente aplicando o checklist utilizado na etapa 6 é certificar-se de que tudo esteja em conformidade para que seja possível o lançamento. A realização desta etapa não foi aplicada no protótipo criado para a efetivação do modelo de construção de interfaces para websites, procedimento que será realizado após o término deste estudo.

49 49 5 CONCLUSÕES A realização deste trabalho pode ser tomada como um guia para construção de interfaces web, que em conjunto com um checklist de análise, pode dar suporte efetivo a desenvolvedores de websites. Neste contexto este capítulo apresenta a conclusão deste trabalho com as seguintes etapas: Contribuições teóricas; Contribuições práticas; Limitações do trabalho e Sugestões para trabalhos futuros. 5.1 Contribuições teóricas A realização teórica deste trabalho proporcionou um aprofundamento na revisão da literatura sobre o tema em questão como conceitos de usabilidade e ergonomia podem contribuir no desenvolvimento de interfaces web, onde foi possível entender como a construção e avaliação de interfaces utilizando como base conceitos de ergonomia e usabilidade é relevante no produto final. Nesse sentido o sistema de avaliação funciona como retroalimentação para o desenvolvimento de interfaces. 5.2 Contribuições práticas Do ponto de vista prático, o novo modelo web proposto neste trabalho contribuiu em um melhoramento no layout, na disposição das notícias em formato de blog, na interação com usuários que poderão comentar e discutir no blog, no cadastro de usuários no site que permite a organização saber o perfil de seus assinantes, e que possibilitará efetividade no marketing web, em forma de mailing aos assinantes. O que ilustra que a utilização de critérios ergonômicos pode facilitar e melhorar o desenvolvimento de aplicações web.

50 Limitações do trabalho Na aplicação do modelo proposto, este trabalho se limitou a realizar um guia teórico prático para a construção de interface web que focou a sua solução somente na análise da interface, não se estendendo a outras áreas como programação. Outro fator limitante deste trabalho foi à impossibilidade da aplicabilidade e acompanhamento dos primeiros acessos reais para apresentação neste estudo. 5.4 Sugestões para trabalhos futuros O website desenvolvido, proposto como solução de marketing web e para guarda das informações dos perfis dos assinantes, pode ser ampliado com a disponibilização de seus produtos em e-commerce; realização de uma área restrita a alunos com novidades em: promoções exclusivas, dicas de estudos e profissões, oportunidades de estágios e empregos e etc; E ainda pode ser realizados testes com usuários para comprovação da melhora da interação.

51 51 REFERÊNCIAS AMSTEL, Frederick Van. Quanto mais simples o Wireframe, melhor. Usabilidoido, Disponível em < Acesso em: 17 mai AMSTEL, Frederick Van. Uma proposta semiótica para a avaliação de estruturas de navegação. Usabilidoido, Disponível em < vegacao.html> Acesso em: 02 nov ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. NBR 9241: Requisitos Ergonômicos para Trabalho de Escritórios com Computadores: Parte 11 Orientações sobre Usabilidade. Rio de Janeiro, CYBIS, Walter; BETIOL, Adriana Holtz; FAUST, Richard. Ergonomia e usabilidade: conhecimento, métodos e aplicações. São Paulo: Novatec, KRUG, Steve. Não me faça pensar!: uma abordagem do bom senso à usabilidade na WEB. São Paulo: Alta Books, MEMÓRIA, Felipe. Design para a internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, MEYERS, Dr. Peter J. 25 Pontos - Checklist de usabilidade site. User Effect Disponível em: < Acesso em: 15 nov MULLET, K; SANO, D. Designing visual de interfaces: communication oriented techniques, New Jersey, SunSoft Press, NIEDERST, Jennifer; FREITAS, Rejane. Aprenda Web design. Rio de Janeiro: Ciência Moderna, NIELSEN, Jacob. Projetando Websites. Rio de Janeiro: Campus, PREECE, Jennifer; ROGERS, Yvonne; POSSAMAI, Viviane; SHARP, Helen. Design de interação: além da interação homem-computador. Porto Alegre: Bookman, ROESCH, Sylvia Maria Azevedo. Projetos de estágios de curso de Administração: guia para pesquisas, projetos, estágios e trabalhos de conclusão de curso. São Paulo: Atlas, SCHNEIDERMAN, B. (1998) Design the User Interface - 3rd Edition. Reading, Mass.: Addison-Wesley. SCHUHMACHER, Vera Niedersberg. Comunicação visual para web I: livro didático. 3 ed. rev.palhoça: UnisulVirtual, 2007.

52 ANEXOS 52

53 Anexo 1 - Wireframe da página Sobre 53

54 Anexo 2 - Wireframe da página Serviços 54

55 Anexo 3 - Wireframe da página Cursos 55

56 Anexo 4 - Wireframe da página Blog 56

57 Anexo 5- Wireframe da página Contato 57

58 Anexo 6 - Wireframe da página Parceiros 58

59 Anexo 7 Layout da página Sobre 59

60 Anexo 8 Layout da página Serviços 60

61 Anexo 9 Layout da página Cursos 61

62 Anexo 10 Layout da página Detalhe do Curso 62

63 Anexo 11 Layout da página Blog 63

64 Anexo 12 Layout da página Contato 64