TCC Entrega Final

MURILO FERREIRA SOARES
RE-DESIGN DO WEBSITE DA ESCOLA MICROCAMP INTERNACIONAL

Trabalho de concluso do curso de Desenho Industrial habilitao em Design Grfico da Universidade Federal do Paran. Orientadora: Prof. Stephania Padovani
CURITIBA 2007
AGRADECIMENTOS
minha esposa, pela fora, compreenso, ateno, apoio e carinho nos momentos mais difceis e exaustivos dessa trajetria. minha filha, pois a alegria de sua chegada trouxe mais nimo e coragem para o cumprimento de mais esta etapa da vida. Ao meu pai, que sempre me apoiou e incentivou meus estudos. minha orientadora, por acreditar em mim e ajudar a direcionar meus estudos para uma rea alm do design simplesmente criativo e esttico. Aos amigos, que torcem por nosso sucesso assim como torcemos por eles.
ii
RESUMO
Ao longo dos anos a Internet vem se tornando cada vez mais uma ferramenta fundamental para a divulgao de servios e produtos de empresas que buscam conquistar o mercado com rapidez e eficcia. No entanto, nessa busca desenfreada pela conquista de seu espao na rede, muitas empresas, tais como a escola Microcamp, optaram por criar seus prprios sites sem o conhecimento necessrio e deixaram a desejar colocando no ar sites com pouco contedo ou precrios que no contribuem muito para a conquista de novos clientes. Nesse trabalho buscamos mostrar que o papel do designer fundamental na criao de sites, pois com o entendimento adequado e multidisciplinar possvel aplicar conceitos que favorecem o visual e a interatividade dos sites, contribuindo dessa forma para um melhor aproveitamento dos espaos na rede. Com o levantamento dos principais problemas atravs de listas heursticas e pesquisas junto aos usurios, pudemos definir os pontos a serem trabalhados e redesenhados. Seguindo o modelo de GARRET (2003) para o desenvolvimento de sites, alm do emprego de conceitos de usabilidade, e-Learning e arquitetura da informao, buscamos propor melhorias funcionais e estticas para o site da escola. Como resultado apresentamos uma interface mais limpa, concisa, coerente e funcional que contribuir para a divulgao dos produtos e servios da escola e que apresenta alternativas de interatividade e desenvolvimento pessoal.
iii
ABSTRACT
Over the years the Internet has become increasingly a fundamental tool for the dissemination of services and products to organizations seeking conquer the market with speed and efficiency. However, this unbridled quest for the achievement of your space in the network, many companies, such as school Microcamp, chose to create their own sites without the knowledge needed and left to be desired putting on the air sites with little content or insecure that do not contribute much for the conquest of new customers. In that job seeking show that the role of the designer is crucial in creating sites, as with the proper understanding and multidisciplinary you can apply concepts that favor the look and interactivity of sites, thereby contributing to a more efficient use of space in the network. With the lifting of the main problems through lists heuristics and research with users, we were able to define the issues to be worked and re-designed. Following the model of GARRET (2003) for the development of sites, in addition to the employment of concepts of usability, e-Learning and architecture of information, seek offer functional and aesthetic improvements to the site of the school. As a result present a cleaner interface, concise, coherent and workable that contribute to the dissemination of the products and services of the school and that presents alternatives for interactivity and personal development.
iv
SUMRIO
AGRADECIMENTOS ............................................................................................................ II RESUMO .............................................................................................................................. III ABSTRACT .......................................................................................................................... IV 1. INTRODUO ............................................................................................................... 1 1.1. CONTEXTUALIZAO DO PROBLEMA .................................................................... 1 1.2. OBJETO DE ESTUDO ................................................................................................ 3 1.3. OBJETIVOS ................................................................................................................ 6 1.3.1. Objetivos Gerais ...................................................................................................... 6 1.3.2. Objetivos Especficos .............................................................................................. 6 1.4. JUSTIFICATIVA .......................................................................................................... 6 1.5. ESTRUTURA DA MONOGRAFIA ............................................................................... 7 2. REFERENCIAL TERICO ............................................................................................. 9 2.1. E-LEARNING .............................................................................................................. 9 2.2. METODOLOGIAS DE DESENVOLVIMENTO PARA A WEB .................................... 15 2.3. ARQUITETURA DA INFORMAO .......................................................................... 20 2.4. PRINCPIOS DE USABILIDADE ............................................................................... 25 2.5. FERRAMENTAS DE IMPLEMENTAO.................................................................. 29 2.5.1. Utilitrios e Recursos Disponveis .......................................................................... 30 2.4.2. Linguagens ............................................................................................................ 36 3. DESENVOLVIMENTO PROJETUAL ........................................................................... 38 3.1. PESQUISA COM USURIOS ................................................................................... 39 3.1.1. Desenvolvimento ................................................................................................... 39 3.1.2. Resultados Obtidos ............................................................................................... 41 3.2. BRIEFING ................................................................................................................. 46 3.2.1. Desenvolvimento ................................................................................................... 46 3.2.2. Resultados Obtidos ............................................................................................... 47 3.3. AVALIAO COM BASE EM HEURSTICAS ........................................................... 49 3.3.1. Desenvolvimento ................................................................................................... 50 3.3.2. Resultados Obtidos ............................................................................................... 52 3.4. ANLISE DE SIMILARES ......................................................................................... 58 3.4.1. Sites Escolhidos .................................................................................................... 59 3.4.2. Parmetros de Comparao .................................................................................. 61 3.4.3. Resultados Obtidos (Ptos +; Ptos -) ....................................................................... 61 3.5. GERAO DE ALTERNATIVAS ............................................................................... 80 3.6. SELEO E DETALHAMENTO DA ALTERNATIVA ESCOLHIDA ........................... 87 3.7. AVALIAO DE USABILIDADE E VALIDAO DO SITE GERADO ........................ 91 4. CONCLUSO ............................................................................................................ 103 ANEXOS ........................................................................................................................... 108
SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional
1.
INTRODUO
1.1.
CONTEXTUALIZAO DO PROBLEMA
Alguns autores dividem a histria da humanidade em trs importantes eras: agrcola, industrial e digital. Na era digital a sociedade tem recebido o nome de sociedade da informao, aquela cuja cultura e economia dependem
essencialmente da tecnologia, da comunicao e da informao. No Brasil, a histria da Internet comeou em 1991 com a RNP (Rede Nacional de Pesquisa), uma operao acadmica subordinada ao MCT (Ministrio de Cincia e Tecnologia). Com o surgimento da World Wide Web (Teia de Alcance Mundial), tambm conhecida como Web, W3 e WWW, esse meio foi ainda mais enriquecido. O contedo da rede ficou mais atraente com a possibilidade de incorporar imagens e sons. Um novo sistema de localizao de arquivos criou um ambiente em que cada informao tem um endereo nico e pode ser encontrada por qualquer usurio da rede (GOTO & COTLER, 2005). Constituda de documentos de contedo multimdia (contendo textos, imagens, vdeos, sons) interativo, chamados web pages (pginas da internet), a Web garante uma riqueza sensorial e cria um forte apelo (HOLZSCHLAG, 2004). Esta caracterstica contribuiu para sua utilizao como veculo de negcios, causando a exploso da Internet que estamos vivenciando e sua conseqente explorao em diversos setores do mercado consumidor. Com a incontestvel influncia da Internet na sociedade, onde cada vez mais empresas e instituies buscam alcanar o pblico com suas ofertas, produtos e divulgaes em geral (LEONEL, 2005), imprescindvel que exista uma caracterstica nica para fortalecer sua marca e suas idias em meio a tantas outras (ROCHA & CHRISTENSEN, 1995), a qual pode ser alcanada atravs de um site bem estruturado que v ao encontro das necessidades do pblico a ser conquistado. Nos dias de hoje, no mais um luxo ou simples questo de opo uma pessoa utilizar e dominar o manuseio e servios disponveis na Internet, pois considerado o maior sistema de comunicao desenvolvido pelo homem e, entre outras coisas, uma das maiores e melhores ferramentas de alcance de mercados
potenciais para produtos e servios (GARFINKEL, 1999) ofertados por empresas e instituies que buscam se destacar em sua rea de atuao oferecendo a seus clientes uma forma mais prtica, rpida e cmoda de consumir, aprender, entreter, informar e comunicar. A Web responsvel pela incorporao de multides com uma velocidade superior a qualquer empreendimento humano e por este motivo que cada vez mais empresas e instituies buscam marcar presena na rede criando seus prprios Web sites, sejam eles com propsitos comerciais (e-Business), polticos (eGovernment) ou educativos (e-Learning). Esta criao envolve um plano de marketing que se integra estratgia da empresa, levando informaes para seus clientes, fornecedores e outros parceiros, aproximando a marca de seus consumidores. sabendo disso que muitas empresas no Brasil e no mundo buscam se destacar fazendo a divulgao de seus produtos e servios atravs da Web, apresentando-os de uma forma consistente, agradvel e diferencial. Isso no diferente em Curitiba, onde a competio acirrada por um espao no mercado torna cada vez mais difcil se destacar entre a inmera concorrncia, o que retoma a utilizao da web como nova ferramenta de conquista de clientes e como diferencial de mercado. Tambm podemos observar este tipo de comportamento em escolas de informtica, tais como a Microcamp Internacional, especializada nesse tipo de ensino, a qual busca manter-se sempre atualizada e rentvel atravs da divulgao de seus cursos e servios por meio da Web. Alm disso, sua preocupao por manter um site funcional e bem estruturado ainda mais enfatizada uma vez que um de seus principais cursos ofertados o de Web Design, atravs do qual a empresa busca ressaltar sua imagem de qualidade na formao de profissionais capacitados a criar sites estticos e dinmicos com qualidade e consistncia. Tendo em vista a constante evoluo neste meio de comunicao, importantssimo para as empresas avaliarem com certa freqncia se os contedos disponibilizados em seus sites realmente esto indo de encontro s necessidades do pblico a ser alcanado, uma vez que muitas delas acabam projetando seus sites com design centrado na prpria estrutura organizacional ou mesmo considerando somente a viso interna, ou seja, o que gostariam de passar a seus clientes, sem
levar em conta as necessidades do pblico a ser conquistado, o que acaba gerando conseqentemente, em curto ou mdio prazo, um desinteresse dos mesmos pelos sites disponibilizados. Devido ao constante melhoramento existente nas tecnologias aplicadas Web, fundamental para empresas que procuram se destacar entre suas concorrentes manter-se sempre atualizadas quando da apresentao de suas marcas e servios atravs da Internet. E assim como essas empresas, a escola Microcamp tambm se preocupa com a imagem passada a seus clientes, alunos e funcionrios, portanto busca, neste momento, adequar seu site s necessidades de seu pblico-alvo.
1.2.
OBJETO DE ESTUDO
O Instituto Microcamp Internacional uma empresa engajada, desde 1977, na capacitao de pessoas para o mercado de trabalho e no desenvolvimento de talentos humanos atravs de cursos de idiomas e informtica. Possui franquias em diversas regies do Brasil, Portugal, Argentina e Espanha. Cada unidade decide pela utilizao de site prprio ou simplesmente referencia ao endereo eletrnico geral da instituio (http://www.microcamp.com.br) para divulgar suas atividades e servios. A unidade a ser destacada para este trabalho a franquia situada Rua Visconde de Ncar, 1455, no centro da cidade de Curitiba, no Paran, cujo site, principal foco de nossa pesquisa, est situado no seguinte endereo eletrnico: http://www.microcamponline.com.br. Esse site atualmente possui uma estrutura baseada em tabelas e imagens que formam o corpo das pginas que o compem e serve basicamente para divulgar cursos, promoes, atividades e eventos para seus clientes e alunos. Esses ltimos tambm contam com ferramentas tais como e-mail e protocolo de transferncia de arquivos. Inicialmente projetado como um incentivo aos alunos do curso de Web Design, atravs de um concurso interno que elegeu o melhor projeto, o site da escola Microcamp Internacional, unidade Curitiba Centro, passou por recentes mudanas em seu visual buscando torn-lo mais limpo e coerente, porm devido
sua estrutura principal no ter sido projetada de forma adequada, o site ainda apresenta algumas inconsistncias que fazem com que o mesmo no atenda s principais necessidades da escola e de seu pblico-alvo. Sua estrutura atual consiste em cinco sees no menu principal (Home, Escola, Cursos, Fale Conosco e Localizao), onze no menu secundrio (Webmail, Aluno on-line, Equipe Microcamp, Calendrio, Acontece Microcamp, Credicamp, Criar Email, Precisando de Emprego?, Destaque, Aniversariantes do Ms e Turmas Abertas) e mais sete sees individuais para os professores da escola (Figura 1), todas essas desenvolvidas sem um estudo adequado para fundamentar sua necessidade, o que tambm contribuiu para a existncia de caminhos para sees que nunca foram desenvolvidas, como no exemplo da seo Credicamp do menu secundrio (Figura 2). Dessa forma, cada seo do site dever ser detalhada mais adiante neste projeto para facilitar o estudo e a identificao dos problemas estruturais, pois s assim poderemos verificar a melhor forma de elaborar sua estrutura e quantificar as sees adequadamente para atender s necessidades da empresa e de seus usurios.
FIGURA 1 - SEO "HOME" DO SITE ATUAL DA ESCOLA MICROCAMP
FONTE http://www.microcamponline.com.br FIGURA 2 - SEO "CREDICAMP" INACABADA
FONTE http://www.microcamponline.com.br
1.3.
OBJETIVOS
1.3.1. Objetivos Gerais
Contribuir, atravs de um levantamento das necessidades do pblico usurio, para a melhoria da apresentao visual e esttica do site institucional da escola de informtica Microcamp Internacional (Unidade Curitiba Centro);
Propor uma estrutura mais coerente e eficaz para o site fundamentado no modelo de Garrett (2003) para design centrado no usurio; Proporcionar uma melhor divulgao e aproveitamento de seus servios.
1.3.2. Objetivos Especficos
Avaliar, com base nas heursticas, o aspecto atual do site com vistas ao levantamento de problemas de interface, navegabilidade, usabilidade e interatividade;
1.4.
Adequar a estrutura do site proposta de ensino da escola; Melhorar a sua apresentao grfica; Propor novas ferramentas e sees especficas para os usurios internos e externos; Proporcionar uma interface mais usual e atraente; Melhorar a divulgao dos cursos ofertados; Facilitar o gerenciamento do contedo do site.
JUSTIFICATIVA
Segundo GARFINKEL (1999), a Internet tornou-se uma ferramenta de marketing importantssima, onde suas principais atribuies informar, entreter e comunicar so enfatizadas de acordo com a necessidade ou natureza da instituio que a utiliza. Desse modo, devemos ter em mente que a melhor forma
para conquistar novos clientes ou fidelizar queles j conquistados manter sempre um site com visual, consistente, agradvel e funcional. Uma empresa que no possui um site bem desenvolvido e apresentado perde oportunidades de conquistar novos clientes, alavancar negcios e fortalecer o comprometimento com os clientes j conquistados. A empresa Microcamp Internacional busca, entre outros aspectos, manter-se sempre atualizada e rentvel, o que exige do instituto um acompanhamento contnuo das tendncias do mercado, sempre adotando as melhores prticas. Tambm, por considerar que seus clientes tornaram-se ainda mais exigentes devido ao avano das tecnologias referentes Web, a escola manifestou seu interesse por uma reviso de seu site neste momento. O site atual apresenta inconsistncias em sua estrutura e apresentao, no deixando claro ao visitante o propsito de sua existncia. Navegao confusa e links inativos acentuam ainda mais esta problemtica, levando muitas vezes ao desinteresse por parte de seus usurios, os quais no tm suas necessidades atendidas. Tendo em vista o principal foco da escola concentrar-se na divulgao de seus cursos, no relacionamento com seus alunos (principais clientes) e na busca por expandir seu mercado construindo uma imagem slida, consistente e confivel, devemos considerar a idia de que um site bem resolvido e fundamentado nas melhores prticas de web design venha a melhor servir o propsito desta instituio. Alm do interesse da empresa, tambm vejo nesse projeto uma excelente oportunidade para exercitar, desenvolver e aprimorar conhecimentos
multidisciplinares adquiridos durante o curso de Design Grfico, alm de familiarizarme com as problemticas existentes quando da elaborao de um projeto voltado rea de Web Design, na qual almejo trabalhar.
1.5.
ESTRUTURA DA MONOGRAFIA
Este projeto apresenta uma estrutura bem definida e coerente, conforme apresentado abaixo:
O primeiro captulo Introduo geral contextualiza e delimita o problema existente, apresenta o objeto a ser trabalhado, define a estrutura do projeto, estabelece o foco do projeto, a linha de estudo principal a ser seguida e as expectativas do trabalho em questo, alm de abordar a necessidade da realizao deste projeto do ponto de vista institucional e pessoal. O segundo captulo Referencial Terico apresenta os principais fundamentos tericos que sero abordados durante o desenvolvimento do projeto, referenciando alguns autores, assim como expe algumas metodologias passveis de aplicao neste trabalho e ferramentas necessrias criao de sites. O terceiro captulo Desenvolvimento Projetual explica em detalhes os procedimentos para o desenvolvimento do projeto, abordando as etapas a serem concretizadas at a finalizao do mesmo. O quarto captulo Consideraes Finais analisa a pesquisa realizada para este projeto chegando a concluses sobre este estudo e sugerindo desdobramentos para o desenvolvimento de novos trabalhos.
2.
REFERENCIAL TERICO
Para a elaborao deste projeto ser necessrio o entendimento de algumas teorias e conceitos estudados, definidos a seguir, e que sero fundamentais no desenvolvimento de todo o trabalho.
2.1.
E-LEARNING
Com o avano das Tecnologias da Informao e da Comunicao (TIC) e com o crescimento da Sociedade da Informao, devido ao uso da Internet, as instituies, corporativas e acadmicas, esto utilizando tcnicas cada vez mais sofisticadas para a gerao e disseminao do conhecimento no meio em que atuam. O e-Learning surge como uma estratgia habilitada para a Web, que oferece um amplo conjunto de solues, que estimulam o crescimento de comunidades de conhecimento/aprendizado, para aumentar o desempenho das instituies. fruto de uma combinao ocorrida entre o ensino com auxlio da tecnologia e a educao distncia. Ambas as modalidades convergiram para a educao on-line e para o treinamento baseado em Web. Sua chegada adicionou novos significados para o treinamento e fez explodir as possibilidades para difuso do conhecimento e da informao para todos. Em um compasso acelerado, abriu um novo mundo para a distribuio e o compartilhamento de conhecimento, tornando-se tambm uma forma de democratizar o saber para as camadas da populao com acesso s novas tecnologias (SHNEIDERMAN, 2002), propiciando a estas que o conhecimento esteja disponvel a qualquer tempo e hora e em qualquer lugar. Usando a tecnologia de e-Learning, a aprendizagem no ocorre somente a partir de instruo digital, mas principalmente a partir do acesso a informaes bem estruturadas, correspondendo a uma forma inovadora para o aprendizado. Portanto, uma estrutura de e-Learning deve conter treinamento on-line e sistemas de gesto do conhecimento (Knowledge Management Systems - KMS), que necessitam fornecer o suporte necessrio para a criao de uma cultura de aprendizado na instituio (ALAVI & LEIDNER, 2001).
10
A estruturao do conhecimento a base de um KMS para a implementao do e-Learning. Quando um contedo bem-estruturado, preciso e de fcil utilizao, o aprendizado ocorre. Caso contrrio as informaes perdero valor em pouco tempo. Em funo disso, fundamental a forma de identificao, categorizao, organizao e rotulao das informaes, bem como seu gerenciamento. De acordo com ALAVI & LEIDNER (2001), as principais vantagens de um sistema de Knowledge Management bem estruturado so:
Permite o aprendizado dos usurios na aplicao das informaes armazenadas; Deixa gravada a histria da instituio, gerando uma memria on-line; Disponibiliza recursos adicionais para a manipulao de informaes; Permite acrescentar idias e insights dos usurios, aumentando o banco de conhecimento da instituio.
Um dos avanos tecnolgicos mais promissores na rea do e-Learning a criao de solues baseadas em objetos educacionais, onde cada um corresponde ao menor bloco de instruo ou informao, elaborado de forma independente e capaz de transmitir um significado. Utilizando objetos educacionais, possvel criar bibliotecas de conhecimento, permitindo que cursos diferentes utilizem um mesmo objeto. Outra vantagem est na personalizao do aprendizado a partir da seleo e configurao daqueles objetos que atendam e auxiliem o aprendiz na construo e apropriao do prprio saber. Um objeto educacional poder ser: um programa em Java, um arquivo de som, um arquivo de imagem, um filme (Figura 3) ou um programa de simulao (Figura 4).
11
FIGURA 3 ANIMAO DE EXPERIMENTO HIDRULICO
FIGURA 4 SIMULADOR DE EXPERIMENTO HIDRULICO
12
Para incentivar a utilizao dessa tecnologia foi criado o consrcio Educational Objects Economy (EOE), nos Estados Unidos, um consrcio mantido pela National Science Foundation, agncia federal que promove o progresso da cincia. Deste fazem parte universidades, empresas e editoras envolvendo educadores, desenvolvedores e comerciantes. A fim de apoiar o processo, foram desenvolvidos tambm os LMSs (Learning Management System), sistemas de gesto de ensino e aprendizagem na web. Softwares projetados para atuarem como salas de aula virtuais (Figura 5), gerando vrias possibilidades de interaes entre os seus participantes. Com o
desenvolvimento da tecnologia na web, os processos de interao em tempo real passaram a ser uma realidade, permitindo com que o aluno tenha contato com o conhecimento, com o professor e com outros alunos, por meio de uma sala de aula virtual.
FIGURA 5 EXEMPLO DE SALA DE AULA VIRTUAL
FONTE Universidade Corporativa Banco do Brasil.
13
Porm, viabilizar a educao a distncia no depende apenas de um bom software que gerencie os cursos e alunos. Alm de um eficiente sistema de gerenciamento necessrio deter contedos desenvolvidos com embasamento pedaggico e teoria especfica. indispensvel tambm expertise em gesto de cada curso, o que envolve profissionais de recursos humanos, tutores e professores. Projetos de e-Learning requerem ainda a participao de uma equipe multidisciplinar onde os clientes possam ter suporte de profissionais na rea de tecnologia educacional, a exemplo: pedagogos, conteudistas, designers
instrucionais, revisores, coordenadores de equipe, web designers, webmasters, equipe de gerncia e administrao de projetos, ilustradores, programadores e analistas. Por isso, costuma-se dizer que os pilares do e-Learning so tecnologia, contedo e gesto e que a ausncia de qualquer um desses elementos torna incompleto um projeto de ensino a distncia. Alguns autores como SHNEIDERMAN (2002) defendem ainda a idia de que o conceito do e-Learning contribuiu para um aprendizado mais consistente e colaborativo, onde devemos repensar a educao como uma forma de aprendizado coletivo onde todos ns podemos adquirir maiores conhecimentos contribuindo com nossas experincias. O modelo de e-Learning proposto pelo autor (Figura 6) agrega os conceitos de coletar informaes, relacion-las com idias de outras pessoas, criar novas idias e conceitos em cima deste agregado e, finalmente, disponibilizar o novo contedo de forma sucinta e til para outros interessados no assunto. Esse ciclo de atividades pode tambm ser facilmente aplicado em vrias situaes de nosso cotidiano, contribuindo ainda mais para o cumprimento de nossas metas. As quatro etapas do ciclo de aprendizagem sugeridas por SHNEIDERMAN (2002) refletem bem o nosso cotidiano e expe o processo de uma forma coerente onde, na primeira etapa, coletamos informaes referentes a determinados assuntos junto ao meio em que vivemos (famlia, amigos, comunidade, vizinhana, etc), depois nos relacionamos com colegas ou pessoas com maior conhecimento do referido assunto, para aprofundarmos nosso entendimento, e ento, agregando todo esse conhecimento adquirido e essas trocas de informaes, seremos capazes de criar novos conceitos e idias acerca daquele determinado assunto. Com esse
14
entendimento e aprofundamento adquirido no assunto, s nos resta a ltima etapa do ciclo que seria o repasse ou doao do novo conhecimento gerado aos outros envolvidos no processo, fechando dessa forma o ciclo de aprendizagem e possibilitando o incio de um novo processo para um aprimoramento ainda maior.
FIGURA 6 E-LEARNING POR SHNEIDERMAN
FONTE SHNEIDERMAN, B. (2002). Leonardos Laptop.
As vantagens observadas na aplicao do conceito de e-Learning englobam o aumento do nmero de alunos regulares, a melhoria do acesso educao em lugares aonde isto seja difcil, a otimizao do processo e da experincia de aprendizagem dos alunos e a reduo dos custos institucionais por aluno. Este conceito de e-Learning poder ser muito til neste projeto quando da elaborao de novas funcionalidades para o site da escola Microcamp, tais como salas de bate-papo virtuais onde os alunos podero trocar idias sobre o contedo das aulas e difundir conhecimentos adquiridos extraclasse.
15
2.2.
METODOLOGIAS DE DESENVOLVIMENTO PARA A WEB
Assim como os demais meios de atuao de um designer, o web design tende multidisciplinaridade, uma vez que criar pginas e documentos para a web requer conhecimentos especficos no s na parte do design propriamente dito mas tambm em reas tcnicas de programao, usabilidade e acessibilidade. Hoje, os requisitos para um novo projeto web vo muito alm de uma comunicao eficiente ao consumidor. Projetos web passam por padres de qualidade como arquitetura de informao, usabilidade e navegao,
compatibilidade com navegadores e sistemas, funcionalidade, performance e carga, contedo e segurana. A principal preocupao de um web designer, alm de oferecer aos visitantes um visual mais atrativo, conseguir agregar conceitos de usabilidade com o planejamento da interface de modo a garantir que o usurio atinja seus objetivos de forma intuitiva e confortvel. Muitos acreditam que pelo fato do visual ser a primeira impresso que se tem de um site, isto torna o design visual o ponto de partida para o desenvolvimento de um projeto como este. Porm, muito pelo contrrio, GARRET (2003) argumenta que o design visual deva ser a ltima instncia quando da criao de sites intuitivos, concisos e usveis, pois acredita que o foco principal deva ser a identificao das necessidades dos usurios (internos e externos), de modo a estabelecer um ponto comum entre elas, para formar a base de todo o desenvolvimento estrutural e visual do site e garantir o atendimento dos objetivos da maneira mais intuitiva e confortvel possvel. Uma implementao satisfatria invariavelmente precedida de um planejamento adequado e eficiente (BROWN, 2006), o qual deve levar em considerao muitas variveis tais como tecnologias atuais, usabilidade,
funcionamento, desempenho, portabilidade e muitas outras. GARRET (2003) defende a idia de que para se criar um site funcional e eficiente necessrio entender o que seu usurio busca, do contrrio no ter resultados adequados para um retorno de seu investimento. Desse modo ele
16
acredita que para a realizao de um projeto de web que gere o retorno adequado, o design deve estar centrado na experincia do usurio. Assim como GARRET (2003), a maioria dos autores estudados defende que a principal varivel a ser considerada na criao de sites ou softwares a necessidade do pblico-alvo. O design centrado na experincia do usurio muito mais eficiente e torna o site mais agradvel, conciso e coerente (SHNEIDERMAN, 1998). Em pesquisas apresentadas por MAGUIRE (2001), possvel reforar ainda mais a idia de que o design centrado no usurio a maneira mais consistente e segura de se projetar interfaces que garantem a usabilidade. Os mtodos apresentados por esse autor baseiam-se no padro ISO 13407, do design centrado no usurio (ISO, 1999), que descreve as principais etapas para o desenvolvimento adequado de projetos nessa rea. No processo estudado por MAGUIRE (2001) podemos observar cinco etapas fundamentais que devem ser obedecidas para incorporarmos as exigncias de usabilidade: Planejar o processo do design centrado no usurio; Entender e especificar o contexto de uso; Especificar as exigncias organizacionais e do usurio; Produzir designs e prottipos e Finalizar com avaliaes baseadas no usurio. Todas Essas etapas compem o ciclo chave para desenvolvimento de projetos centrados no usurio, o qual representado logo abaixo (Figura 7).
17
FIGURA 7 - O CICLO DO DESIGN CENTRADO NO USURIO
No desenvolvimento de sites baseados no design centrado no usurio, uma das principais questes a serem trabalhadas como fazer o usurio sentir-se seguro o bastante para encontrar o que procura em pouco tempo. Uma interface clara com cones consistentes, identidade grfica planejada, visual baseado no contedo grfico ou de texto e telas de resumo podem dar a confiana necessria para o usurio encontrar o que procura sem desperdiar tempo (LYNCH & HORTON, 2005). GARRET (2003) sugere que enxerguemos a Web no s como um sistema de hipertexto, mas tambm como uma interface de software e propem um modelo (Figura 8) para concepo de sites centrados nas experincias dos usurios, o qual consiste na idia de seguir uma linha de raciocnio partindo-se do abstrato para o concreto, atravs de cinco nveis bem definidos: estratgia, escopo, estrutura, esqueleto e superfcie (Figura 9).
18
FIGURA 8 - DIAGRAMA ORIGINAL DE GARRET
FIGURA 9 - MODELO SIMPLIFICADO
19
Na estratgia teramos a definio dos objetivos do site e das necessidades dos usurios, desta forma constituiramos toda a base para a elaborao do projeto. J no escopo deveramos esclarecer todas as especificaes funcionais e as exigncias de contedo para incorporao no site a ser desenvolvido. Para a estrutura seria necessrio desenvolver o design de interao e realizar a Arquitetura da Informao para se definir exatamente onde cada informao ser relevante e como ser feita a interao com o usurio. Quando da elaborao do esqueleto trabalharamos com o design de interface, o design de navegao e o design da informao, garantindo deste modo o posicionamento adequado do contedo, da informao e a forma como sero apresentados. Chegando-se superfcie nos preocuparamos apenas com o design visual do site para estabelecer caractersticas de cores, formas e demais elementos visuais. Dessa forma o modelo apresentado por GARRET (2003) ser adotado no desenvolvimento desse trabalho, pois proporciona uma perfeita diviso do contedo a ser trabalhado com uma seqncia lgica de etapas que conferem melhor grau de entendimento daquilo que se est desenvolvendo. Alm disso, trabalhando-se com o design visual em uma ltima instncia, o grau de liberdade para trabalhar com a criatividade torna-se ainda maior. Estabelecer a funo do objeto a ser criado, nesse caso o site, uma etapa crtica que remete a diversos questionamentos que informam o designer e ajudam a manter o foco no desenvolvimento do projeto. (CULLEN, 2005) Assim como GARRET (2003), outros autores tais como CATO (2001), que aplica discusses tericas em estudos de casos reais, ROSSON & CARROLL (2002) tambm acreditam que o design centrado no usurio seja a melhor forma de se conseguir um resultado satisfatrio quando da criao de sites. Por isso sugerem, antes de tudo, a realizao de testes e pesquisas para identificarmos as necessidades a serem atendidas. Os estudos de CATO (2001) convergem para a identificao do contexto de utilizao da interface a ser criada (sites ou softwares) e apontam para a elaborao de cenrios e utilizao de personagens fictcios ou reais com caractersticas
20
semelhantes s dos nossos usurios. A utilizao dessa tcnica ajuda a mantermos o foco nas necessidades de nosso pblico-alvo e favorece a identificao de possveis problemas de usabilidade. Comparando algumas metodologias propostas pela literatura estudada, podemos observar etapas comuns e de grande importncia para o desenvolvimento de interface de sites (Tabela I).
TABELA I QUADRO COMPARATIVO DE METODOLOGIAS

Autor
Cato
Etapa 1
Identificar o contexto de uso Plano
Etapa 2
________
Etapa 3
Projetar a estrutura e o design visual
Etapa 4
Testar a utilizao
Etapa 5
________
Etapa 6
________
Etapa 7
________
Garret
estratgico e de escopo
Plano de estrutura
Plano de esqueleto
Plano de superfcie Produo e garantia de qualidade Construo do site
________
________
________
Goto e Cotler
Definir o projeto
Desenvolver a estrutura
Design visual e teste
Produo e garantia de qualidade Rastreamento, avaliao e manuteno ________
Lanamento e alm (manuteno)
Lanamento e alm (manuteno) Rastreamento,
Lynch e Horton Mayhew Rosenfeld e Morville Shneiderman
Definio do site e planejamento Anlise dos requisitos Pesquisa Desenvolver o conceito do produto
Arquitetura da informao
Design do site
Marketing
avaliao e manuteno
________
Design, teste e desenvolvimento Design e documentao Projetar conceitos e prottipos
Instalao
________
________
Estratgia Pesquisa e anlise das necessidades
Implementao Desenvolver prticas de design padro
________ Fazer design interativo e refinamento
________
Administrao
________
Fornecer suporte
FONTE FERREIRA, A. S., 2006
A anlise das metodologias acima refora ainda mais a escolha de GARRET (2003) como referncia nesse trabalho, pois as etapas sugeridas por ele convergem com as idias dos demais autores de uma forma mais sinttica e clara, sem se estender para as etapas do ps-projeto, as quais no sero necessrias para esta proposta.
2.3.
ARQUITETURA DA INFORMAO
Arquitetura de Informao (AI) consiste na estruturao das informaes de sistemas computacionais de forma lgica e na criao de solues quanto organizao visual destas informaes. Envolve a organizao do fluxo de
21
informao visando torn-la til e inteligvel. Na Web, envolve tambm a estruturao do fluxo de navegao de uma pgina. Une trs campos vitais, a tecnologia, o design e produo de texto. o desenho de uma interface, incluindo todos seus fluxos de navegao e estruturao de contedo. Um bom planejamento de todos os fluxos de informao e das funcionalidades de um site torna o produto final muito mais usvel e lucrativo (ROSENFELD & MORVILLE, 1998). Resumindo, ela trata basicamente do gerenciamento e estruturao das informaes. Para uma idia mais ampla do conceito envolvido na AI, podemos apresentar as quatro definies de ROSENFELD & MORVILLE (1998) sobre o tema:
1. Combinao entre esquemas de organizao, nomeao e navegao dentro de um sistema de informao. 2. Design estrutural de um espao de informao a fim de facilitar a realizao de tarefas (tasks) e o acesso intuitivo a contedos. 3. a arte e a cincia de estruturar e classificar websites e intranets a fim de ajudar as pessoas a encontrar e a gerenciar informao. 4. uma disciplina emergente e uma comunidade de prtica (community of practice), focada em trazer para o contexto digital os princpios de design e arquitetura.
J o arquiteto de informao seria o indivduo com a misso de organizar padres dos dados e de transformar o que complexo em algo mais claro. Por um lado, podemos dizer que se trata de algum especializado apenas em estruturar e organizar espaos de informao, uma descrio na qual se enquadram apenas alguns milhares de pessoas no mximo. Por outro lado, podemos dizer que um arquiteto da informao algum que estrutura e organiza espaos de informao como parte de suas vidas e, a, j estamos falando em milhes de pessoas. O fato que a maioria das arquiteturas da informao feita por gente que no se considera arquiteto da informao. Por isso que to importante compartilhar experincias alm da nossa comunidade profissional (ROSENFELD & MORVILLE, 1998).
22
Segundo WODTKE (2002) os primeiros passos para organizar informaes so classificar e agrupar. Isso pode ser feito de duas maneiras: baseando-se unicamente na experincia do profissional da equipe ou ouvindo e interpretando informaes coletadas junto aos usurios. Do ponto de vista de HOLZSCHLAG (2004), a AI para a Web surgiu para resolver o problema definido por ela como a sndrome do crescimento orgnico, a qual seria uma conseqncia da maneira inovadora, mas quase sempre acidental pela qual os Web sites tm sido construdos nos ltimos anos. Para a realizao de um projeto coerente e conciso, fundamental o desenvolvimento adequado de uma Arquitetura da Informao, o que pode ser facilitado utilizando-se diagramas para a representao das pginas, links, documentos e demais caminhos a serem seguidos pelos usurios no site. Esses diagramas so constitudos de elementos bsicos que auxiliam na visualizao do projeto como um todo, facilitando o design de interao com o usurio. Para um melhor entendimento podemos citar as representaes de pginas e documentos, para as quais utilizaremos retngulos simples e cones de documentos com dobras nas pontas respectivamente (Figura 10).
FIGURA 10 - REPRESENTAES DE PGINAS E DOCUMENTOS
FONTE Instituto de Arquitetura da Informao, GARRET (2002)
Outros elementos importantes so os conectores e as setas que simbolizam as relaes entre os elementos e so traduzidas como relaes de navegao, ou seja, nos do a informao estrutural do site (Figura 11) e indicam como, ou em quais direes os usurios podero navegar dentro do sistema. As setas (Figura 12) indicam apenas a direo em que o usurio est propenso a seguir, ou seja, no representam o impedimento de se navegar na direo contrria, no entanto, se esta for a inteno, dever ser utilizada uma barra (crossbar) para este fim.
23
FIGURA 11 REPRESENTAO ESTRUTURAL
FIGURA 12 REPRESENTAES DE SETAS
Alm dos elementos j citados acima, tambm pode ser destacado o elemento rea, representado por um retngulo de bordas arredondadas (Figura 13), que serve para identificar um grupo de pginas que possui um ou mais atributos comuns (aparecer num pop-up, por exemplo).
FIGURA 13 REPRESENTAO DE REA
Quando projetamos levando em considerao nossas prprias expectativas para o site, as necessidades do pblico ao qual pretendemos alcanar e o prprio
24
contedo a ser aplicado, o problema mais comum que enfrentamos na elaborao da AI a categorizao do contedo. Existem basicamente duas formas de se categorizar contedo em sites:
1. Agrupando o contedo de cima para baixo, ou seja, considerando apenas a viso do(s) profissional(is) envolvido(s) na criao do site para classificar e relacionar o contedo; 2. Agrupando-o de baixo para cima considerando somente o entendimento dos usurios quanto classificao e relacionamento do contedo.
GARRET (2003) defende que a melhor maneira para se fazer isso seria considerando ambas as formas juntas, pois s desse modo evitaramos que partes importantes do contedo fossem deixados para trs ou at mesmo tornar o contedo inflexvel s mudanas. tambm nessa etapa de aplicao da AI que devemos definir a estrutura a ser aplicada no site, a qual poder ser hierrquica (Figura 14), matricial (Figura 15), orgnica (Figura 16) ou seqencial (Figura 17). A escolha depender dos objetivos da escola e das necessidades dos usurios.
FIGURA 14 ESTRUTURA HIERRQUICA
25
FIGURA 15 ESTRUTURA MATRICIAL
FIGURA 16 ESTRUTURA ORGNICA
FIGURA 17 ESTRUTURA SEQENCIAL
2.4.
PRINCPIOS DE USABILIDADE
Usabilidade uma metodologia cientfica aplicada na criao e remodelao de interfaces de sites, intranets, aplicativos, jogos e produtos de modo a torn-las fceis de aprender e de usar (ROSSON & CARROLL, 2002). Historicamente, o termo surgiu como uma ramificao da ergonomia voltada para as interfaces computacionais, mas acabou se difundindo para outras aplicaes.
26
A usabilidade pode ser vista como um sinnimo de facilidade de uso, ou seja, se um produto fcil de usar, o usurio tem maior produtividade: aprende mais rpido a usar, memoriza as operaes e comete menos erros (NIELSEN, 2000). Ela pode ser aplicada sempre que houver uma interface, ou seja, um ponto de contato entre um ser humano e um objeto fsico (ex: cafeteira) ou abstrato (ex: software), onde podemos observar a usabilidade que esse objeto oferece. Alguns benefcios da usabilidade so: maior nmero de transaes bem sucedidas no site; diminuio da evaso de usurios por desistncia; aumento da eficincia de seu site/intranet; custo menor de suporte e treinamento; maior fidelidade do usurio ao seu aplicativo ou jogo e percepo positiva da empresa (NIELSEN, 2000). Para GOTO & COTLER (2005) os web designers de hoje precisam combinar forma e funcionalidade para criar uma experincia intuitiva para o usurio. A usabilidade pode ajudar ainda pessoas com necessidades especiais, terceira idade e problemas cognitivos se encarada como uma medida relativa, por exemplo: o mouse fcil de usar, mas para quem? Uma trackball pode ser mais fcil de usar por quem tem deficincia motora ou sofre de LER. A interface ideal aquela que est adaptada s necessidades de seus usurios. O usurio de terceira idade pode precisar de textos com letras maiores e o usurio com desvantagem cognitiva pode precisar de alguns textos de ajuda a mais. No Brasil, poucas empresas reconhecem o valor da usabilidade. A maioria prefere investir numa campanha publicitria que faa o produto parecer fcil do que realmente torn-lo fcil atravs do envolvimento do usurio durante seu projeto. Ao invs de estabelecer uma relao duradoura com seus clientes oferecendo um produto ou servio de alto nvel, eles preferem obter o mximo de lucro no menor tempo possvel. Contudo, o mercado de usabilidade, mesmo no Brasil, est em franca expanso, pois aos poucos aqueles empresrios mais atentos j percebem que vale pena investir nisso e esto contratando profissionais especializados e empresas de consultoria. O conceito de usabilidade deve ser entendido como uma qualidade que atende s necessidades do usurio agregando-se s suas habilidades e aos seus
27
conhecimentos (LUNELLI, 1998). Sua avaliao pode ser feita atravs de testes com usurios ou mesmo com base nas heursticas. A avaliao heurstica mais rpida, pois envolve apenas o trabalho interno de consultores. Um teste de usabilidade, por exigir maiores preparativos e um relatrio final complexo, mais demorado. Grande parte dos problemas de uma interface pode ser revelada com a aplicao de avaliaes heursticas, porm a combinao de ambos os mtodos (heursticas e testes de usabilidade) seria a melhor escolha para a identificao e correo dos problemas. Autores como CATO (2001), ROSSON & CARROLL (2002) defendem que o principal foco na realizao de um projeto deve ser sempre o usurio, portanto a realizao de testes isolados ao invs de testes integrados a uma metodologia de projeto centrada no usurio pode ser muito prejudicial para uma concluso satisfatria de um trabalho que envolve a usabilidade. muito mais importante estar em contato com o usurio desde o incio do projeto do que somente testar se est fcil de usar quando o produto j est acabado e, portanto, mais difcil de ser alterado em virtude do teste. ROSSON & CARROLL (2002) acreditam que a criao de cenrios informais, contendo usurios imaginrios com os mesmos perfis daqueles que pretendemos conquistar, seja o suficiente para projetarmos interfaces coerentes e funcionais. J CATO (2001) sugere que devemos atentar principalmente para as questes de controle e habilidade, ou seja, importante garantir que os usurios sintam que tm o controle sobre as aplicaes disponveis e no o contrrio, tambm devem sentir que a interface os apia, complementa e refora suas habilidades e experincias, enfim que tm suas necessidades respeitadas. Autores como NIELSEN (2000), MAYHEW (1992) e SHNEIDERMAN (1998) propem listas de heursticas que podem ser empregadas neste projeto, quais sejam:
28
Nielsen (2000)
Simplicidade e clareza no dilogo; O sistema deve falar a lngua do usurio; Minimizar a carga na memria do usurio; Consistncia; Feedback; Apresentar de forma simples e clara a sada do sistema; Apresentao e contedo minimalistas; Mensagens de erro claras; Prevenir a ocorrncia de erros; Providenciar help on-line e documentao sobre o sistema; Avaliar constantemente o sistema.
Mayhew (1992)
Compatibilidade com o usurio; Compatibilidade entre produtos; Compatibilidade com a tarefa a ser realizada; Compatibilidade com o fluxo do trabalho; Consistncia; Familiaridade; Simplicidade; Interface de manipulao direta; Controle do usurio sobre o sistema; Flexibilidade; Apresentar o resultado e o andamento dos processos; Tecnologia invisvel; Robustez tcnica; Proteo contra erros; Facilidade de aprendizado, entendimento e utilizao.
29
Shneiderman (1998)
Reconhea a diversidade (de usurios e de tarefas); Utilize as oito golden rules de desenvolvimento de interfaces: o o o o Faa um grande esforo para ser consistente; Permita que usurios freqentes usem shortcuts; Oferea feedback informativo; Projete dilogos que tenham comeo, meio e fim e mostre isso ao usurio; o Previna erros e permita fcil correo de erros que venham a ocorrer; o o o Faa com que reverter aes seja simples e fcil; D ao usurio a sensao de controle do sistema; Reduza a carga na memria de curta-durao.
As aplicaes dessas heursticas em projetos como este contribuem para a criao de interfaces mais coerentes, concisas, amigveis, teis e eficazes. Dentre as regras citadas pelos autores, podemos destacar algumas que sero fundamentais no desenvolvimento deste trabalho, pois so apontadas pela maioria dos autores estudados e facilmente empregadas em desenvolvimento de web sites. So elas: Apresentar simplicidade e clareza no dilogo; Ter consistncia; Prover Feedback; Apresentar de forma simples e clara a sada do sistema; Prevenir a ocorrncia de erros; Prover facilidade de aprendizado, entendimento e utilizao; Permitir que usurios freqentes utilizem shortcuts; Reduzir a carga na memria de curta-durao.
2.5.
FERRAMENTAS DE IMPLEMENTAO
No desenvolvimento desse projeto ser fundamental o conhecimento de ferramentas imprescindveis criao, estruturao e implementao de contedo multimdia para web, os quais sero brevemente descritos nos tpicos a seguir.
30
2.5.1. Utilitrios e Recursos disponveis
Autores como HOLZSCHLAG (2004) defendem a idia de que um bom Designer no precisa de muito mais do que um simples editor de textos, um navegador Web, um software de edio de imagens e um cliente FTP para fazer um excelente trabalho para Web, porm existe uma grande quantidade de ferramentas que ajudam e facilitam o processo de criao para a Web. No caso deste projeto destacarei apenas seis destas que contribuiro para um desenvolvimento mais prtico e satisfatrio deste trabalho, os quais relaciono logo abaixo.
Navegadores Web:
Um navegador o principal software utilizado por designers e visitantes dos sites para se acessar as pginas Web, portanto torna-se fundamental incluirmos em nossa lista de ferramentas alguns navegadores Web com a finalidade de testarmos e verificarmos como as linguagens e tecnologias empregadas em nosso site so interpretadas (ou no interpretadas) a fim de evitarmos possveis frustraes tanto para ns designers quanto para os prprios usurios. Atualmente existe uma grande quantidade de navegadores e diversas verses disponveis, podendo variar de acordo com a plataforma operacional utilizada (Windows, Macintosh, Linux, etc). Como exemplo podemos destacar o IE (6.0, 5.0, 5.5, 5.01), Netscape (verso mais recente 8.1.3), Mozilla Firefox, Opera, Safari e Lynx (navegador apenas de texto). Para a realizao deste projeto utilizarei apenas trs: IE 6.0 (Figura 18), Mozilla Firefox (Figura 19) e Lynx (Figura 20). O IE 6.0, por ser um dos mais utilizados atualmente, servir como base para testes de consistncia e suporte de padres, j o Mozilla Firefox, por ser um navegador sofisticado com excelente suporte de padres e consistncia entre plataformas, alm de possibilitar a utilizao de ferramentas de validao e desenvolvimento embutidas (Figura 21), ser utilizado para o desenvolvimento e o Lynx para testar a acessibilidade, uma vez que um navegador apenas de texto.
31
FIGURA 18 - INTERNET EXPLORER 6.0
FIGURA 19 - MOZILLA FIREFOX
32
FIGURA 20 - LYNX
FIGURA 21 - FERRAMENTAS DE VALIDAO E DESENVOLVIMENTO (MOZILLA)
33
Editor de cdigo:
Tambm ser importante ter a mo alguns editores que permitam trabalhar com as linguagens baseadas em ASCII (Cdigo Americano Padro para Intercmbio de Informaes), como HTML, XHTML, XML, CSS, JavaScript e outros fundamentais para a criao de pginas para a Web. Assim como os navegadores, os editores de cdigos se apresentam em diversas verses dependendo da plataforma e dos recursos com os quais pretendemos trabalhar, no entanto, para este trabalho utilizarei apenas dois deles: Notepad (Bloco de Notas) e Macromedia Dreamweaver MX 2004. O primeiro apresenta pouqussimos recursos, porm excelente para correes rpidas ou trabalhos completos, j o segundo possui recursos para se trabalhar visualmente sem se preocupar com o cdigo gerado, o que tambm ser muito til na elaborao deste projeto, alm de possuir ferramentas de validao de contedo HTML, XHTML e CSS embutidas, o que contribuir para um desenvolvimento mais adequado e dentro dos padres exigidos para a Web.
Programas de imagem de bitmap:
Para uma criao mais requintada e visualmente mais atrativa essencial a existncia de grficos e imagens nos sites para complementar as informaes a serem passadas aos usurios. No entanto, mesmo com a melhoria da qualidade das conexes atuais, a utilizao de imagens muito pesadas pode prejudicar em muito o desempenho dos sites, portanto imprescindvel trabalhar as imagens a fim de torn-las mais adequadas para utilizao na Internet, o que pode ser conseguido diminuindo-se o tamanho do arquivo gerado sem prejudicar a qualidade final. Para tanto se faz necessrio o conhecimento de programas que facilitem esse tratamento e a criao dessas imagens. Existem diversos programas que podem auxiliar nesta questo, mas para este projeto escolhi um dos mais utilizados por web designers e no qual possuo maior conhecimento: o Photoshop. Este programa disponibiliza ferramentas que facilitam a criao e o gerenciamento de tamanho das imagens bitmaps tratadas, o que proporcionar uma maior vantagem quando de sua aplicao no site.
34
Programas de imagem de vetor:
Para o tratamento de logotipos, criao de cones ou outros recursos de navegao que necessitem de um melhor acabamento grfico com relao s curvas e formas, enfim, para tarefas de desenho mais complexas, necessria a utilizao de programas que auxiliem nesse trabalho. Um dos programas mais utilizados e tambm o escolhido para o desenvolvimento deste projeto o CorelDraw, o qual ser utilizado para a criao de cones de navegao e demais atributos visuais a serem empregados no novo site. A diferena entre grficos de bitmap e imagens baseadas em vetor consiste na capacidade de redimensionamento que estas ltimas possuem o que as permitem serem ampliadas ou reduzidas sem quaisquer perda de qualidade.
Utilitrios de animao Web:
Recursos de animao so mais interessantes visualmente do que fotografias e grficos estticos. Entretanto, o desenvolvimento de animaes em Web sites ainda muito maior na rea de publicidade. Quando se pretende chamar a ateno dos usurios para que estes entrem em nossos sites, devemos investir na criao de grficos animados que, segundo estatsticas, despertam duas vezes mais o interesse do leitor do que os anncios comuns. No entanto, na criao de efeitos de animao devemos atentar para o tamanho dos arquivos gerados uma vez que arquivos de animao de maior porte podem demorar a serem carregados em conexes mais lentas e isto pode fazer com que os usurios desistam antes que o material seja completamente armazenado em seus computadores. O ideal construir animaes mais leves e torn-las condensadas o suficiente para que sejam recebidas com maior rapidez. Animaes bem produzidas tornam mais rico o projeto grfico do web site e despertam a ateno do leitor para o contedo noticioso. A animao tambm pode conferir mais interatividade proporcionando resposta s aes do usurio no site.
35
Na elaborao deste trabalho utilizarei programas tais como o Macromedia Flash e o ImageReady para a criao de animaes e outros efeitos visuais interativos.
A Cor:
Muito mais que um simples fenmeno ptico, a cor pode ser considerada uma ferramenta essencial quando utilizada de maneira correta e adequada. O domnio e o entendimento de suas aplicaes para a Web podem contribuir para um resultado visualmente mais elegante e eficiente. De um modo mais tcnico, a utilizao de cores para este projeto se dar na escala RGB (Vermelho, Verde e Azul), a qual varia de 0 (mais escuro) a 255 (mais claro). Nos programas de edio de imagem, esses valores so habitualmente representados por meio de notao hexadecimal, indo de 00 (mais escuro) at FF (mais claro) para o valor de cada uma das cores. Assim, a cor #000000 o preto, pois no h projeo de nenhuma das trs cores; em contrapartida, #FFFFFF representa a cor branca, pois as trs cores estaro projetadas em sua intensidade mxima. J na questo esttica, a cor ser utilizada para agregar interesse visual atravs do contraste e para criar harmonia atravs do equilbrio e da ordem. Segundo GOLDING (1997), a cor considerada uma das ferramentas mais importantes e versteis para um designer grfico, pois dentre suas inmeras aplicaes, sua utilizao adequada dentro de um site pode auxiliar no agrupamento de elementos, na delimitao de espaos, no relacionamento entre objetos, na nfase de contedos, na organizao de informao textual e, alm disso, proporcionar respostas emocionais nos observadores, o que pode ser muito til quando se pretende atrair novos usurios ou mesmo mant-los por mais tempo navegando em nosso site.
36
2.4.2. Linguagens
Hoje em dia, muito mais que simplesmente uma linguagem de marcao de hipertexto (HTML), a Web utiliza-se de tecnologias cada vez mais enriquecidas, tais como DHTML, XHTML, CSS, JavaScript, ASP, PHP, JSP, Flash e muitas outras que garantem seu mximo aproveitamento em termos de acessibilidade e gerenciamento de contedo. Todo desenvolvimento de projeto Web consiste no conhecimento e na utilizao de linguagem prprias para a criao de pginas para a internet, portanto fundamental conhecermos algumas delas para podermos dar incio ao nosso projeto. Abaixo descrevo algumas dessas linguagens que sero teis para a elaborao deste trabalho.
HTML:
Originalmente
desenvolvida
como
ferramenta
de
comunicao
disseminao de pesquisas, a HTML (Linguagem de Marcao de Hipertexto) ganhou espao na Internet e hoje a principal linguagem utilizada para se produzir pginas na Web. Os documentos HTML so traduzidos pelos navegadores e disponibilizados aos usurios na forma de pginas interativas, podendo conter imagens, textos, links e outros elementos que formam um site. O entendimento deste tipo de linguagem ser necessrio para o desenvolvimento deste projeto, uma vez que toda a estrutura do site ser fundamentada em HTML.
DHTML:
A Linguagem Dinmica de Marcao de Hipertexto, ou DHTML, a unio da HTML com outras tecnologias tais como Java, JavaScript, ActiveX, CSS dentre outras que permitem atribuir maior interatividade e elegncia s pginas Web,
37
possibilitando que as mesmas sejam modificadas dinamicamente na prpria mquina do usurio, ou seja, um mesmo contedo pode ser visto de formas diferentes, dependendo da interao do visitante com o site ou mesmo de variveis tais como a localizao geogrfica do usurio, a hora local da visita e outras preferncias do internauta. Dentre as funcionalidades da DHTML est e possibilidade de atribuir recursos de animao s pginas somente atravs de scripts, o que pode ser muito proveitoso quando se pretende conferir ao contedo maior flexibilidade quando da apresentao ao usurio. O conhecimento desta linguagem ser importante para o projeto uma vez que buscarei seguir o conceito de design centrado no usurio, o qual remete s necessidades do pblico ao qual se pretende alcanar, desta forma o emprego desta linguagem permitir ampliar o leque de alcance, uma vez que possibilitar flexibilizar o contedo conforme a preferncia do visitante.
XHTML:
O XHTML, ou Linguagem Extensvel de Marcao de Hipertexto, uma reformulao da linguagem de marcao HTML. um processo de padronizao que tem em vista a exibio de pginas Web em diversos dispositivos (televiso, palm, celular, etc). A inteno melhorar a acessibilidade. O XHTML consegue ser interpretado por qualquer dispositivo,
independentemente da plataforma utilizada, pois as marcaes possuem sentido semntico para as mquinas. O HTML no consegue esta implementao. No entanto, no existem muitas diferenas entre o HTML e o XHTML.
CSS:
Folhas de Estilo em Cascata, ou simplesmente CSS, uma linguagem de estilo utilizada para definir a apresentao de documentos escritos em uma linguagem de marcao. Seu principal benefcio prover a separao entre o formato e o contedo de um documento.
38
Ao invs de colocar a formatao dentro do documento, o desenvolvedor pode optar por criar uma ligao para uma pgina que contm os estilos, procedendo de forma idntica para todas as pginas de um portal. Quando quisermos alterar a aparncia do portal basta, portanto, modificar apenas um arquivo (SHEA & HOLZSCHLAG, 2005). Este recurso ser muito til para criarmos um site mais atrativo e preciso do ponto de vista visual, proporcionando tambm um melhor gerenciamento do contedo, uma vez que o estilo separado do contedo remete a uma maior flexibilidade quando da implementao de novos recursos ou sees no site (BUDD; COLLISON & MOLL, 2006). Alm das linguagens acima tambm ser importante para este projeto o conhecimento a respeito de outras linguagens tais como ASP, PHP e JSP, as quais nos permitem criar sites dinmicos possibilitando uma interao com o usurio atravs de formulrios, parmetros do URL e links (ROCHA, 2003). Estas linguagens possibilitam interagir com bancos de dados e aplicaes existentes no servidor, o que ser muito conveniente quando buscarmos agregar novas funcionalidades ao site da escola, tais como consulta de notas, por exemplo, ou outras a serem discutidas com o cliente.
3.
DESENVOLVIMENTO PROJETUAL
O desenvolvimento deste trabalho consistir em sete etapas (Figura 22) principais para a elaborao de um novo site mais atraente e til para os usurios da escola Microcamp Internacional. Estas etapas apresentadas a seguir sero sempre conceituadas e embasadas nas pesquisas realizadas e tambm fundamentadas em conceitos j mencionados nos captulos anteriores.
39
FIGURA 22 ETAPAS DE DESENVOLVIMENTO
3.1.
PESQUISA COM USURIOS
Para aqueles autores que defendem o design centrado no usurio metodologia escolhida para este trabalho todo projeto deve buscar antes de tudo entender o que o pblico-alvo de fato precisa, para que desta forma possa atender s necessidades dos mesmos de maneira plena e satisfatria. Assim, para que possamos estabelecer um ponto de partida no desenvolvimento deste projeto, precisamos elaborar uma pesquisa com os principais usurios para verificarmos suas necessidades a fim de identificarmos o melhor contedo bem como as melhores ferramentas a serem disponibilizadas no site.
3.1.1. Desenvolvimento O levantamento das necessidades do pblico-alvo deste projeto foi realizado atravs da elaborao e posterior distribuio de questionrio (Anexo 01) contemplando os principais dados necessrios identificao de possveis falhas no layout atual do site em estudo. O questionrio foi elaborado com quinze perguntas de carter pessoal, onde buscamos um maior entendimento das expectativas dos alunos perante o site da escola, no s do ponto de vista enquanto aluno propriamente dito, mas tambm enquanto principal cliente e interessado nos servios oferecidos pela empresa.
40
A pesquisa foi realizada com a distribuio do questionrio, em meio digital, a cinqenta alunos, sendo dez alunos de cada um dos cinco cursos oferecidos pela escola (dotnet, Web Design, Hardware, Pacote Especialista e ABC). Dentre as quinze questes abordadas buscou-se a identificao dos principais tpicos a seguir:
Familiaridade; Freqncia de acesso; Navegabilidade; Grau de relevncia de contedo; Necessidades do usurio.
Na compilao dos dados foram consideradas apenas as questes de nmeros 02 a 09, 11, 12 e 14, em virtude do agrupamento necessrio a identificao dos tpicos j mencionados acima. O agrupamento se deu de acordo com a tabela abaixo:
TABELA II AGRUPAMENTO DAS QUESTES Tpico Questes utilizadas

Identificao direta da familiaridade; Familiaridade 02, 05 e 06 Conhecimento do site; Como conheceu. Freqncia de Acesso 03 e 04 Quantidade de acesso ao site; Freqncia de acesso. Dificuldade geral de navegao; Dificuldade para encontrar informaes. Grau de relevncia das sees no menu secundrio; 09*, 11 e 12 Relevncia das matrias divulgadas na seo Home; Necessidade das sees dos professores. 14 Apontamento das melhorias e interesses no site.
Descrio
Navegabilidade
07 e 08
Grau de relevncia de contedo Necessidades do usurio
* Para padronizao e levantamento estatstico eficiente, consideramos os indicativos 0 e vazio como grau 1 e os indicativos x, grau 5.
41
3.1.2. Resultados Obtidos
Dos cinqenta questionrios distribudos, quarenta e oito foram respondidos e com base nas respostas obtidas pudemos identificar as principais necessidades dos usurios e os aspectos passveis de melhorias no site. Para exemplificar os resultados obtidos apresentamos os seguintes grficos:
FAMILIARIDADE
GRFICO 1 - QUESTO 02
42
FREQNCIA DE ACESSO
43
NAVEGABILIDADE
44
GRAU DE RELEVNCIA DE CONTEDO
45
46
NECESSIDADES DO USURIO
3.2.
BRIEFING
Assim como a identificao das necessidades dos usurios, o conhecimento daquilo que a escola busca com o site tambm primordial para um desenvolvimento adequado e satisfatrio de um projeto para Web, pois segundo GARRET (2003) exatamente no ponto comum entre esses dois fatores que reside a chave para o desenvolvimento de um site coerente, conciso e usvel. Portanto, tambm fundamental levantarmos as necessidades e as principais intenes da escola para com o site, pois desse modo estaremos estabelecendo os principais limites na criao do novo layout e identificando os padres exigidos pela instituio quando da apresentao de sua marca e na utilizao de cores.
3.2.1. Desenvolvimento
Para o levantamento das necessidades da escola foi elaborado um questionrio (Anexo 02) contendo perguntas chaves para identificarmos o principal
47
foco de atuao da empresa, bem como sua inteno quando da utilizao do site para a divulgao de sua marca e servios. O questionrio foi elaborado com perguntas abertas, fechadas e de mltipla escolha para um melhor entendimento das necessidades a serem atendidas quando da elaborao deste projeto e para a identificao dos padres visuais adotados pela empresa. Com a aplicao do briefing buscou-se a identificao dos seguintes tpicos:
Identificao da Instituio; Ramo de atuao e tempo de mercado; Produtos e servios oferecidos; Concorrncia; Diferencial da escola; Finalidade do site; Pblico-alvo; Imagem a ser transmitida; Padronizao das cores.
Na resposta ao questionrio pudemos entender que a empresa Microcamp Informtica atua a trinta anos no mercado, foi inicialmente focada no ensino de idiomas e posteriormente expandida para o ramo de editorao e finalmente agregou cursos tcnicos e profissionalizantes de informtica. S no Brasil so aproximadamente cento e trinta unidades franqueadas. Especificamente na unidade foco de nossos estudos podemos encontrar cursos de ingls, informtica bsica e avanada, hardware e desenvolvimento e manuteno de sites. Por apresentar um amplo leque de atuao no mercado, ou seja, possuir um portflio de servios que engloba desde o ensino de idiomas at cursos tcnicos e profissionalizantes, a escola se destaca daquelas empresas que atuam no mesmo
48
mercado e fica difcil identificarmos algum concorrente direto, apenas podemos verificar alguns que atuam isoladamente em determinados setores, os quais so apresentados no estudo abaixo (Tabela III):
TABELA III - ESTUDO DE CONCORRENTES Concorrente

DATA BYTE
rea de atuao
Educao e treinamento em Informtica Cursos profissionalizantes Centro de educao profissional
Diferencial
Possui um material de apoio de informtica (apostilas) bem formatado Grande experincia no ensino da lngua inglesa Possui grande mercado no ensino profissionalizante em Informtica a que mais se aproxima da formatao da
Microlins
CEDASPY
DIAPAR
Centro de treinamento e preparao profissional
Microcamp e detentora de grande fatia do mercado de cursos profissionalizantes, idiomas e de Informtica
FACINTER e demais faculdades tcnicas* * No se aplica unidade em estudo, pois a mesma ainda no ministra cursos tcnicos. Ensino tcnico Lderes no mercado do ensino tcnico.
O maior diferencial da escola em relao a seus concorrentes o fato desta apresentar o maior ramo de atuao e possuir cursos muito bem elaborados e aprofundados em todas as reas, o que garante um melhor aproveitamento do aprendizado para os alunos. Tambm vale ressaltar o grande reconhecimento no mercado nacional e internacional devido ao tempo de atuao. Na pesquisa aplicada pudemos definir tambm quais as principais intenes da escola com relao ao site, dentre elas: construir uma imagem corporativa, conquistar novos clientes, vender produtos ou servios, reduzir os custos de suporte ou marketing, divulgar eventos na escola, manter um canal de comunicao com alunos e professores, disponibilizar contedo das aulas e reforar o vnculo entre alunos e escola atravs da disponibilizao de recursos de comunicao direta (email) para obteno de feedback constante, propiciando implementaes e aprimoramentos no trato com os clientes.
49
Com relao ao pblico a ser alcanado com o site, a escola definiu que dever ser mais focado em alunos e interessados nos servios oferecidos. Tambm deixou claro que a comunicao interna (empresa funcionrios) se dar de outras maneiras, no sendo necessrio neste momento aprimorar ferramentas para tal finalidade. Para a captao de dados a fim de promover o aprimoramento constante do site, a Microcamp apontou para a necessidade de entender o motivo pelo qual os alunos/clientes realizaram o acesso e qual o grau de interesse nos servios disponibilizados. No quesito atualizao, obtivemos a resposta de que as reas de informativos e eventos devem ser atualizadas pelo menos uma vez por semana, com exceo da rea de aniversariantes que deve ser atualizada, obrigatoriamente, uma vez por ms. Quanto s sees previstas para o site, prevaleceu o interesse inicial com relao s j existentes no layout atual: Home, Escola, Cursos, Fale Conosco e Localizao, alm daquelas do menu secundrio j citadas no incio deste trabalho. Para o design do layout, a escola apontou para a necessidade de transmitir uma imagem inovadora, futurista e com muita tecnologia, cuidando sempre para no se assemelhar ao design dos concorrentes. Quanto aplicao de cor, identificamos a inexistncia de um padro consistente, sendo informado pela empresa que o critrio para a escolha baseou-se na variao da cor verde, predominante na marca da instituio. Por fim, a Microcamp solicitou que o redesign do site seja surpreendente, inovador e que explore o inesperado atravs de efeitos e animaes.
3.3.
AVALIAO COM BASE EM HEURSTICAS
SHNEIDERMAN (1998) sustenta a idia de que devemos fazer um grande esforo para sermos consistentes no desenvolvimento de interfaces. Assim como ele, CATO (2001), ROSSON & CARROLL (2002) tambm acreditam que a consistncia uma das peas determinantes da usabilidade, por isso sugerem que devemos realizar testes junto aos usurios desde o incio da criao de um projeto,
50
para possibilitar a identificao de possveis problemas em tempo hbil de serem corrigidos. Porm, em virtude das anlises j realizadas sobre eficcia de aplicao de testes de usabilidade e por questes de tempo e viabilidade, adotaremos na fase inicial deste projeto somente o mtodo da avaliao heurstica tomando como referncia as heursticas dos autores NIELSEN (2000), MAYHEW (1992) e SHNEIDERMAN (1998).
3.3.1. Desenvolvimento
Face s listas de heursticas j apresentadas anteriormente neste trabalho e destacando as regras que prevalecem para todos os autores, assim como aquelas que mais se aplicam a este projeto, pudemos formar uma nova lista, a qual foi empregada na avaliao do site atual da escola:
Apresentar simplicidade e clareza no dilogo; Ter consistncia; Prover Feedback; Apresentar de forma simples e clara a sada do sistema; Prevenir a ocorrncia de erros; Prover facilidade de aprendizado, entendimento e utilizao; Permitir que usurios freqentes utilizem shortcuts; Reduzir a carga na memria de curta-durao.
Com a lista acima contemplamos todas as questes principais quando da anlise de usabilidade de uma forma mais resumida e direta, alm de mantermos o foco no usurio, que a principal preocupao de todos os autores estudados. A avaliao heurstica da interface feita com base em uma lista prdeterminada de critrios de navegao e usabilidade. Cada critrio analisado em separado para determinar se a interface apresenta problemas em relao quele critrio e qual o grau de severidade do problema. Dessa forma podemos concentrar melhor os esforos naqueles que realmente merecem uma maior ateno para garantir o sucesso do projeto.
51
A anlise crtica dos resultados ser tomada com base na escala de gravidade dos problemas de usabilidade, os quais so avaliados pela combinao de trs fatores: freqncia, impacto e persistncia. A freqncia est ligada a quantidade em que o problema ocorre na interface observando se sua ocorrncia comum ou rara. J o impacto seria a facilidade ou dificuldade de superao do problema por parte dos usurios. A persistncia remete quantidade de vezes em que o mesmo problema afeta os usurios, ou seja, se afeta somente na primeira vez em que o usurio acessa o site, e depois que aprende a resolv-lo o problema desaparece, ou se o mesmo prevalece por tempo indeterminado. No julgamento da severidade de um problema de usabilidade atribumos uma escala de 1 a 4, sendo:
1. Relevante: s precisa ser solucionado se houver tempo; 2. Leve: sua soluo pode ter baixa prioridade; 3. Srio: deve ser consertado logo; 4. Crtico: a soluo deste problema deve ser dada prioridade absoluta, pois ele de fato impede usurios de usar apropriadamente a interface.
Aps a anlise individual de cada problema encontrado, procedeu-se com a reunio de todos em um nico relatrio contendo: Critrios Heursticos, Anlise dos Fatores e Grau de severidade atribudo. Nos critrios heursticos foram apontadas as regras utilizadas para a avaliao da interface. J no tpico de anlise dos fatores foram indicados a freqncia, o impacto e persistncia do problema para cada heurstica avaliada. Por fim, no grau de severidade atribudo indicamos o grau de impacto de acordo com a escala acima mencionada, o que servir de referncia para identificarmos onde deveremos atuar de forma mais ativa na reestruturao e redesign do site da escola.
52
Aplicando a lista de heursticas acima especificada, chegamos aos seguintes resultados:
1. Apresenta simplicidade e clareza no dilogo?
No. O site apresenta um menu principal bem definido, porm no menu secundrio e no contedo das pginas nos deparamos com informaes ambguas que podem confundir o usurio. Ex.: no topo do corpo da pgina temos o campo Email, no menu lateral temos Webmail e logo abaixo Criar E-mail (Figura 23). Todas essas informaes remetem a um mesmo assunto, porm os dois primeiros campos executam a mesma funo de formas diferentes e o ltimo simplesmente no funciona. Um caso semelhante tambm ocorre com os links Precisando de Emprego? e Vagas para Alunos (Figura 24), que possuem contedo
completamente diferente, porm do a mesma idia.
FIGURA 23 FALTA DE CLAREZA E SIMPLICIDADE
53
FIGURA 24 FALTA DE CLAREZA E SIMPLICIDADE
2. O site consistente?
No. No menu secundrio a apresentao do contedo no segue um padro definido, onde hora temos a abertura da seo no prprio corpo da pgina e hora temos esta abertura em pop-ups (Figura 25). Alm disso, existem links que remetem a sees inacabadas (Figura 26) ou retornam erro por no existirem.
FIGURA 25 FALTA DE CONSISTNCIA
54
FIGURA 26 FALTA DE CONSISTNCIA
3. Prov Feedback?
Apenas podemos observar o fornecimento de feedback quando da tentativa de login na seo de e-mail, porm isso no realizado de forma adequada do ponto de vista esttico e visual (Figura 27).
FIGURA 27 FALTA DE PADRONIZAO VISUAL
55
4. Apresenta de forma simples e clara a sada do sistema?
Sim e No. Nesse aspecto devemos considerar no a sada propriamente dita do site da escola, at porque isso no seria interessante, mas sim o retorno do usurio a alguma seo anteriormente visitada e isso pareceu estar sendo atendido, pois na maioria das sees ainda conseguimos visualizar os outros links para as demais sees e, quando isso no ocorre (ex.: Seo Webmail), o sistema apresenta um caminho de retorno bem definido (Figura 28). Por outro lado, nas sees especficas dos cursos e dos professores observamos alguns problemas de retorno (Figura 29), o que contribui para que o usurio se perca dentro do site s conseguindo retornar atravs do boto de retorno do prprio navegador.
FIGURA 28 SADA BEM DEFINIDA
56
FIGURA 29 SEM INDICATIVO DE SADA
5. Previne a ocorrncia de erros?
No. Na seo Fale Conosco, por exemplo, quando da tentativa de envio de mensagem sem contedo ou com alguma informao fundamental faltante, o sistema deveria impedir o seu envio retornando ao usurio sobre a necessidade de complementar os dados, porm isso no ocorre (Figura 30) o que sujeita a ocorrncias de erros tais como esquecimento por parte do usurio de informar seus dados para contato, sendo necessrio reescrever sua mensagem complementando os dados faltantes.
57
FIGURA 30 ENVIO DE FORMULRIO EM BRANCO
6. Prov facilidade de aprendizado, entendimento e utilizao?
Sim. Por estar focado atualmente mais no contedo informativo do que na interao com os usurios, o site no apresenta grandes dificuldades de aprendizado, entendimento e utilizao.
7. Permite que usurios freqentes utilizem shortcuts?
No integralmente. O nico atalho observado no site o acesso direto a seo E-mail observado no topo do corpo da pgina (Figura 31), porm outras sees no contam com essa facilidade. Alm disso, no existe um mapa do site para uma referncia mais direta de seu contedo como um todo.
FIGURA 31 ATALHO PARA E-MAIL
58
8. Reduz a carga na memria de curta-durao?
Sim. Devido ao contedo limitado e ao baixo grau de interao com o usurio, a carga na memria de curta-durao fica reduzida, pois os usurios no precisam aprender tarefas com grau de complexidade relevantes, apenas navegam atravs de links e esporadicamente acessam seus trabalhos atravs do recurso de FTP (protocolo de transferncia arquivo).
Aplicando a escala de gravidade e grau de severidade obtemos os seguintes resultados (Tabela IV):
TABELA IV ANLISE CRTICA DOS RESULTADOS

analisada (nr.)
Grau de Anlise dos fatores: freqncia, impacto e persistncia severidade atribudo
Heurstica
01 02 03 04 05 06 07 08
Problema de ocorrncia comum, de difcil superao e baixa persistncia. Problema de ocorrncia comum, de difcil superao e alta persistncia. Problema de ocorrncia rara, de fcil superao e baixa persistncia. Problema de ocorrncia rara, de difcil superao e alta persistncia. Problema de ocorrncia rara, de fcil superao e alta persistncia. Problemas relevantes no observados. Problema de ocorrncia comum, de fcil superao e alta persistncia. Problemas relevantes no observados.
4 4 2 3 3 No se aplica 4 No se aplica
3.4.
ANLISE DE SIMILARES
Tendo em vista o interesse da escola em fortalecer a imagem de sua marca, tambm se torna importante para o projeto analisar a situao atual do mercado onde a empresa atua, fazendo um levantamento de sites similares de concorrentes da escola pudemos verificar quais os pontos fortes e fracos de forma a definir o que
59
poder ou no ser utilizado como referncia na reestruturao do site objeto de estudo.
3.4.1. Sites Escolhidos
Em face da identificao dos concorrentes, conforme levantamento feito em pesquisa junto escola, pudemos definir quatro sites potenciais para estudos e anlise crtica quanto ao design, estrutura e disponibilizao de recursos teis aos usurios, os quais apresentamos logo abaixo:
- http://www.databyte.com.br/ (Figura 32); - http://www.microlins.com.br/ (Figura 33); - http://www.cedaspy.com.br/v2/site/ (Figura 34); - http://www.diapar.com.br/ (Figura 35).
FIGURA 32 DATA BYTE
60
FIGURA 33 MICROLINS
FIGURA 34 CEDASPY
61
FIGURA 35 DIAPAR
3.4.2. Parmetros de Comparao
Para se definir um padro de comparao entre os sites analisados, buscamos manter a lista de heurstica j aplicada ao site da escola Microcamp, pois dessa forma poderamos identificar melhor os pontos a serem corrigidos comparando-os com as solues apresentadas em cada site dos respectivos concorrentes.
3.4.3. Resultados Obtidos (Ptos +; Ptos -)
Na comparao dos sites pudemos identificar as principais questes de usabilidade e verificar os pontos positivos e negativos de cada soluo aplicada, o que servir para orientar-nos quando da gerao de alternativas para o site no qual trabalhamos. Com o levantamento realizado e aplicao da lista j mencionada obtivemos os seguintes resultados:
62
1. Apresenta simplicidade e clareza no dilogo?
Sim: Databyte e Microlins Pontos positivos: Uma estrutura bem definida e a diviso clara do contedo na bandeja de navegao (Figura 36) contribuem para uma melhor experincia do usurio, bem como uma referncia direta aos assuntos tanto no menu principal (Figura 37) quanto no secundrio (Figura 38) auxiliam na identificao do contedo. FIGURA 36 NAVEGAO DATABYTE
FIGURA 37 MENU PRINCIPAL MICROLINS
63
FIGURA 38 MENU SECUNDRIO MICROLINS
No: Microcamp, Cedaspy e Diapar Pontos negativos: Informaes ambguas, como as observadas no site da Microcamp, dificultam a navegabilidade e contribuem para o desinteresse por parte dos usurios, assim como informaes mal resolvidas (Figuras 39 e 40) podem confundir o usurio ou mesmo lev-lo a acreditar que pode seguir caminhos que na verdade no existem (Figura 41). Outros fatores que contribuem para o desinteresse do usurio alm de dificultar a navegao so o baixo contraste e o excesso de informaes e links na pgina (Figura 42).
FIGURA 39 INFORMAO EM LOCAL INADEQUADO
64
FIGURA 40 NOTAES DIFERENTES PARA O MESMO SIGNIFICADO
FIGURA 41 FALSOS LINKS
65
FIGURA 42 EXCESSO DE INFORMAES E BAIXO CONTRASTE
2. O site consistente?
Sim: Microlins Pontos positivos: Um padro bem definido em todas as sees do site (Figura 43) contribui para manter a consistncia e reforam o interesse do usurio na busca por informaes.
66
FIGURA 43 PADRO E CONSISTNCIA
No: Microcamp, Databyte, Cedaspy e Diapar Pontos negativos: A falta de um padro e inconsistncias (Figura 44) ou sees inacabadas, como as existentes no site da Microcamp, bem como mudanas bruscas no menu de navegao principal (Figura 45), prejudicam a navegao, confundem e frustram os usurios. Links para sees inexistentes (Figura 46) tambm contribuem para a insatisfao dos mesmos.
67
FIGURA 44 FALTA DE PADRO E INCONSISTNCIA
FIGURA 45 MUDANA NO MENU DE NAVEGAO
68
FIGURA 46 SEES INEXISTENTES
3. Prov feedback?
Sim: Microcamp* e Cedaspy Pontos positivos: Dar conhecimento ao usurio do efeito que suas aes tm sobre o sistema fundamental para a experincia do mesmo. Quando isto feito de maneira adequada (Figura 47) instrui o usurio e auxilia em seu aprendizado. * Como observado anteriormente, o site da Microcamp apresenta feedback, porm de forma inadequada.
69
FIGURA 47 FEEDBACK ADEQUADO
No: Databyte, Microlins e Diapar Pontos negativos: Quando transmitido de forma inadequada pode no ser assimilado pelo usurio que sem um retorno eficiente (Figura 48) fica sem entender o erro e no sabe como proceder para corrigi-lo. O retorno inadequado (Figura 49) tambm prejudica a experincia do usurio.
FIGURA 48 RETORNO INEFICIENTE
70
FIGURA 49 FEEDBACK INADEQUADO
4. Apresenta de forma simples e clara a sada do sistema?
Sim: Microcamp, Databyte, Microlins, Cedaspy e Diapar Pontos positivos: Sadas bem definidas ajudam os usurios a se localizarem dentro do sistema, o que importantssimo para mant-los interessados no site visitado. Todos os sites avaliados apresentam bandejas de navegao bem definidas e com links permanentes (Figura 50), o que garante que seus visitantes visualizem de forma clara e direta todas as sees dos mesmos.
FIGURA 50 BANDEJAS DE NAVEGAO
71
No: Microcamp Pontos negativos: Como vimos anteriormente, algumas sees do site da escola no possuem um retorno bem definido (Figura 51), o que prejudica muito a navegao e acentua o desinteresse do usurio, pois os mesmos se vm freqentemente diante de armadilhas sem sadas.
FIGURA 51 SEO SEM RETORNO PGINA ANTERIOR
5. Previne a ocorrncia de erros?
Sim: Databyte e Microlins Pontos positivos: A preveno de erros (Figura 52) contribui para a satisfao do usurio e para uma comunicao mais eficaz.
72
FIGURA 52 PREVENO DE ERROS
73
No: Microcamp, Cedaspy e Diapar Pontos negativos: A inexistncia desse tipo de preveno (Figura 53), ou uma preveno ineficaz com apenas indicaes (Figura 54), sem nenhuma informao de a que se referem, prejudica a comunicao com o usurio e desfavorece o aprendizado do mesmo.
FIGURA 53 RETORNO COM ERRO
74
FIGURA 54 RETORNO INEFICAZ
6. Prov facilidade de aprendizado, entendimento e utilizao?
Sim: Microcamp e Databyte Pontos positivos: Uma estrutura simplificada e a navegao direta (Figura 55) propiciam o aprendizado no deixando muitas dvidas quanto utilizao do contedo apresentado.
75
FIGURA 55 NAVEGAO DIRETA
No: Microlins, Cedaspy e Diapar Pontos negativos: Sites mais elaborados e com maiores detalhes em sua estrutura de navegao (Microlins e Cedaspy), pressupem um tempo maior para se alcanar familiaridade suficiente ao entendimento de utilizao de seus links e ferramentas. J numa navegao muito extensa (Diapar), sem o devido agrupamento de contedo (Figura 56), a navegao fica confusa e prejudicada, o que tambm desfavorece sua utilizao e entendimento de seu contedo.
76
FIGURA 56 FALTA DE AGRUPAMENTO
7. Permite que usurios freqentes utilizem shortcuts?
Sim: Microlins Pontos positivos: A disponibilizao de atalhos (Figura 57) auxilia os usurios mais freqentes a evitar extensos dilogos e mensagens de informaes que eles no desejam ler. Isso contribui para uma experincia mais agradvel e satisfatria.
77
FIGURA 57 ACESSO DIRETO
No: Microcamp, Databyte, Cedaspy e Diapar Pontos negativos: A inexistncia de atalhos favorece, em mdio prazo, o desinteresse dos usurios, uma vez que a necessidade de percorrer caminhos extensos para se chegar ao contedo que os motivou a freqentar o site faz com que desistam de continuar acessando tal contedo.
8. Reduz a carga na memria de curta durao?
Sim: Microcamp Pontos positivos: No fazer com que o usurio tenha que relembrar coisas de uma ao em uma prxima ao, ou mesmo no fazer com que se lembre do caminho percorrido at um determinado assunto ajuda muito o usurio a manter a ateno no contedo de seu interesse, contribuindo ainda mais para sua satisfao com o site visitado.
No: Microlins, Databyte, Cedaspy e Diapar Pontos negativos: A sobrecarga na memria de curta durao (Figura 58) contribui para o descontentamento dos usurios perante o sistema, tendo em vista o
78
estresse causado toda a vez que os mesmos buscam, sem sucesso, informaes por eles j acessadas anteriormente.
FIGURA 58 SOBRECARGA DE MEMRIA
Para facilitar nosso entendimento e ajudar na visualizao das solues mais adequadas a serem utilizadas como parmetros na reestruturao do site da escola, podemos destacar de um modo mais resumido (Tabela V) os resultados obtidos na anlise dos concorrentes.
79
TABELA V QUADRO COMPARATIVO DOS SITES

Heurstica analisada (nr.)
MICROCAMP
DATABYTE
MICROLINS
CEDASPY
DIAPAR
01 Ptos +/02 Ptos +/03 Ptos +/04 Ptos +/05 Ptos +/06 Ptos +/07 Ptos +/08 Ptos +/-
No No Sim, porm inadequado +eSim / No +eNo Sim + No Sim +
Sim + No No Sim + Sim + Sim + No No -
Sim + Sim + No Sim + Sim + No Sim + No -
No No Sim + Sim + No No No No -
No No No Sim + No No No No -
Com este resultado conclumos nossa anlise e identificamos os principais pontos a serem trabalhados para melhorar a funcionalidade e aparncia do site da escola, de modo a proporcionar maior clareza de contedo e melhor entendimento das tarefas a serem executadas pelos usurios, o que retoma a idia principal de nossos estudos acerca do design centrado no usurio. Em sntese, os requisitos para a realizao do re-design estariam concentrados na correo e eventual melhoramento dos pontos negativos apontados em nossa Tabela V, os quais, por ordem de prioridade, demandariam as seguintes aes para o xito de nosso projeto:
Solucionar o problema das informaes ambguas, verificadas nos
campos de e-mail e menu secundrio, de modo a simplificar e melhorar o dilogo; Padronizar a apresentao do contedo e abertura das sees, bem
como eliminar sees inacabadas e incoerentes para agregar maior consistncia ao site da escola;
80
experientes;
Disponibilizar recursos de atalhos e implementar mapa do site para
viabilizar acesso rpido e direto aos contedos de maior interesse dos usurios mais
Corrigir possveis falhas observadas na navegao a fim de
proporcionar maior segurana aos usurios identificando de forma simples e clara a sada ou retorno de sees visitadas; Propor melhorias na preveno de erros adotando mensagens padro
no preenchimento de formulrios de forma a evitar esquecimentos de informaes importantes por parte dos usurios; Melhorar a forma de apresentao do feedback aos usurios propondo
solues em design esttico e funcional.
3.5.
GERAO DE ALTERNATIVAS
Para e realizao desta etapa, antes preciso resgatar alguns conceitos j estudados sobre arquitetura da informao, pois mantendo nossa linha de estudo focada no modelo de GARRET (2003), observamos que ainda necessrio definirmos a estrutura e o esqueleto antes de partirmos para o desenvolvimento da superfcie. Portanto, lanando mo dos elementos representacionais existentes no estudo da arquitetura da informao, podemos representar a estrutura atual do site conforme segue:
Como podemos observar, a estrutura atual do tipo seqencial e apresenta um elemento comum a todos as sees principais menu secundrio o qual est sempre visvel e acessvel aos usurios, proporcionando uma navegao mais direta
81
porm nem sempre muito eficaz, pois como vimos anteriormente, alguns links do menu secundrio apresentam problemas que devem ser resolvidos adequando-se a atual estrutura. Ainda no desenvolvimento da AI, para a categorizao do contedo, considerando ambos o entendimento dos usurios como o conhecimento dos envolvidos no re-design do site, podemos proporcionar uma melhor classificao e relacionamento do contedo subdividindo-o da seguinte forma:
Home o Equipe o Aniversariantes do ms Escola Cursos o Cursos Brindes Fale Conosco o Localizao Fotos e Eventos Aluno On-line o Calendrio acadmico o E-mail o Oferta de empregos o Assessoria e encaminhamento o Acesso FTP o Salas Virtuais*
* A seo das Salas Virtuais seria uma sugesto para implementao de salas de bate-papo onde os alunos pudessem trocar idias sobre o contedo das aulas e desta forma aprimorar seus conhecimentos atravs do compartilhamento de informaes.
Com a disponibilizao do contedo na forma acima apresentada estamos otimizando a navegao e resolvendo os problemas de ambigidade,
82
proporcionando tambm maior simplicidade e clareza no dilogo, uma vez que atualmente no existe distino entre os servios disponibilizados a todos e os exclusivos para alunos, fato que pode frustrar os visitantes do site. Considerando agora o esqueleto do site atual, temos sua diagramao geral voltada para o layout em duas colunas, conforme podemos observar logo abaixo (Figura 59).
FIGURA 59 DIAGRAMAO EM DUAS COLUNAS
De acordo com os estudos realizados, a inteno da escola manter a estrutura principal do site atual apenas conferindo-lhe melhorias na apresentao e funcionalidades, fato que tambm pde ser verificado quando do levantamento das necessidades dos usurios, uma vez que a estrutura atual de fcil entendimento e memorizao, o que vai de encontro aos fundamentos de usabilidade abordados nesse projeto. Desse modo, buscamos manter as sees principais e a estrutura linear, porm no necessariamente na forma horizontal, mas mantendo sempre uma navegao intuitiva e de fcil entendimento. Para conferir um aspecto visual mais atrativo e uma melhor disposio do contedo, sugerimos algumas mudanas no esqueleto do site propondo as alternativas de diagramao abaixo:
83
1) Destaque na rea do logotipo e manuteno do layout em duas colunas
2) Mudana de posicionamento do menu principal para o topo da pgina, destaque para a rea do logotipo e manuteno do layout em duas colunas.
84
3) Disposio do menu principal e secundrio agregados na lateral esquerda, destaque do logotipo na rea superior e layout em trs colunas.
4) Apresentao do menu principal e secundrio em paralelo, nfase do logotipo na rea superior e layout em uma coluna.
85
5) Apresentao do menu principal e secundrio em paralelo, nfase do logotipo na rea superior e layout em duas colunas.
6) Deslocamento do menu principal para o canto superior esquerdo, criao de uma rea de destaque no topo da pgina para o logotipo, layout em duas colunas e disponibilizao de menu alternativo no canto inferior direito.
86
7) Disponibilizao do menu principal e secundrio agregados no canto superior direito, criao de uma rea de destaque no canto superior esquerdo para o logotipo e layout em trs colunas.
Todas as alternativas apresentadas garantem a navegao facilitada e mantm os aspectos de usabilidade j comentados anteriormente neste trabalho. Alm disso, as diagramaes sugeridas vo de encontro aos preceitos de criao de sites defendidos pelos autores CULLEN (2005) e DAMASCENO (2003), os quais destacam a importncia de mantermos a simplicidade, clareza e conciso quando na criao de pginas de um site. Segundo a autora DAMASCENO (2003), a diagramao contribui para harmonizar o visual de um site e deve, portanto, seguir os princpios de atrao e equilbrio, aliando usabilidade e disposio adequada de quadros de contedo. ... a diagramao e o enquadramento correto dos itens de uma pgina da Web influenciam diretamente na legibilidade do contedo. (DAMASCENO, 2003, p. 109)
87
3.6.
SELEO E DETALHAMENTO DA ALTERNATIVA ESCOLHIDA
Antes de seguirmos para o ltimo nvel do modelo proposto por GARRET (2003), Design Visual ou Superfcie, devemos definir o esqueleto a ser considerado para aplicao no site e, para tanto, buscamos alguns conceitos apontados pelos autores CULLEN (2005) e DAMASCENO (2003) no que diz respeito composio e disposio dos elementos estruturais em uma pgina web. De acordo com DAMASCENO (2003) a parte superior ou topo de uma pgina web a rea de identificao do site, portanto nessa regio que deve ficar o logotipo da empresa, fato que pudemos constatar nos sites dos concorrentes da escola (Figura 60). Com relao a esse ponto, todas as alternativas sugeridas no tpico anterior, com exceo da alternativa nmero dois que considera o menu principal localizado nesta rea, atendem perfeitamente esse requisito.
FIGURA 60 REA DO LOGOTIPO DAS EMPRESAS
O canto superior esquerdo da tela consagrou-se ao longo dos anos como padro para posicionamento do nome, logotipo ou identificao de uma empresa, sendo assim, para este local que os usurios olham quando buscam a
88
identificao da pgina. Alm disso, o canto superior esquerdo remete orientao de leitura ocidental e, conseqentemente, o primeiro local visualizado pelo visitante do site. Por esses motivos, DAMASCENO (2003) ressalta que qualquer posicionamento do logotipo diferente daquele considerado padro deve ser cuidadosamente estudado para evitar frustraes aos usurios. Levando isso em considerao, buscaremos manter o logotipo da escola nessa regio, ficando, portanto, descartada a alternativa de nmero dois. Outra rea de grande relevncia dentro de um site a regio superior do corpo da pgina, logo abaixo do topo. Essa rea denominada rea de destaque e a mais importante do site, uma vez que para ela que os usurios mais freqentes olham quando acessam a home page. Quando bem trabalhada, essa rea tem a propriedade de identificar sozinha de que se trata o site (DAMASCENO, 2003). Portanto, para um melhor aproveitamento desse espao to importante, tentaremos manter nessa regio aquelas informaes mais relevantes aos usurios freqentes, tais como atalho para e-mail, acesso FTP e mapa do site. Por ser uma rea muito visvel, seria interessante trabalharmos sua aparncia de forma a causarmos um forte impacto visual, assim estaramos reforando a identidade do site. No entanto, para comportar todos os elementos citados acima e ainda causar o impacto desejvel, necessrio que a rea de destaque ocupe um espao considervel na pgina e, observando as alternativas sugeridas, percebemos que as opes que nos melhor atenderiam seriam as de nmero seis e sete (Figura 61).
FIGURA 61 ALTERNATIVAS SEIS E SETE
89
Alm das consideraes referentes s reas, tambm devemos levar em conta alguns princpios bsicos na hora de projetar um site: a harmonia, o equilbrio entre elementos, a atrao de elementos e a simplicidade da composio (CULLEN, 2005). A harmonia remete coerncia visual e est diretamente ligada a composio geral do site (cores, tamanhos de imagens, posicionamentos, etc) e fundamental para a identificao da qualidade de um projeto grfico. No que diz respeito ao equilbrio entre elementos, devemos ter em mente as questes relativas proporcionalidade entre texto e imagens, combinao de cores, hierarquizao de elementos e a facilitao da identificao de todos os componentes do site aos usurios. Quanto atrao de elementos, est diretamente relacionada organizao de um layout, onde os elementos correspondentes entre si devem permanecer prximos uns dos outros, promovendo dessa forma uma organizao facilitada das informaes visuais de uma composio (CULLEN, 2005). Quando projetamos um layout de site esse princpio deve ser empregado de modo a se evitar possveis situaes onde os visitantes so forados a tentar organizar mentalmente as informaes, pois isso os faria abandonar rapidamente o site visitado. J no quesito da simplicidade da composio, cabe lembrarmos a necessidade de se manter a objetividade, clareza e conciso na elaborao do layout. Um design simples, sem um visual excessivamente rebuscado facilmente compreendido, identificado, assimilado e recordado pelos usurios e, alm disso, evita o desvio de ateno daquilo que realmente importa no site: transmitir informaes e dados relevantes aos visitantes. Para agregarmos todos os conceitos mencionados acima e ainda conferirmos um visual simples, claro, coerente e atrativo ao site no qual trabalhamos, optamos pela utilizao do esqueleto de nmero seis (Figura 62), pois o mesmo apresenta reas bem delimitadas, alinhadas e de fcil aproveitamento para encaixe do contedo j existente no site da escola, sem deixar de fora a questo da usabilidade, pois o mesmo prev uma rea para o menu alternativo que ser muito til quando os usurios estiverem utilizando a barra de rolagem para leitura do contedo da pgina, ocasio na qual no poder mais ser visualizado o menu principal. Alm disso, o
90
posicionamento do menu principal logo abaixo da rea de identificao facilita a navegao, pois ser uma referncia direta quando do primeiro acesso ao site.
FIGURA 62 ALTERNATIVA ESCOLHIDA
J com o esqueleto definido, podemos ento seguir para a ltima etapa do modelo de GARRET (2003): o Design Visual ou Superfcie. Nessa fase, como apontamos no tpico de metodologias, o grau de liberdade para se trabalhar com a criao fica praticamente ilimitado, pois trabalhando o design em ltima instncia e com um esqueleto pr-definido, ficamos a vontade para exercitarmos nossa criatividade e o bom senso. nesse ponto que devemos recordar todos os diversos autores estudados at o momento e seus respectivos apontamentos relativos usabilidade e ao design centrado no usurio, buscando dessa forma corrigir todas as falhas apontadas no site atual da escola, concebendo ento um design visual coerente, conciso, claro e funcional. Levando em considerao todos os fatos apontados acima, chegamos ao seguinte resultado para o novo site:
91
No tpico seguinte abordaremos mais detalhadamente cada seo do site gerado apontando, inclusive, as falhas corrigidas em cada seo e os respectivos melhoramentos aplicados.
3.7.
AVALIAO DE USABILIDADE E VALIDAO DO SITE GERADO
Nessa fase de avaliao importante recordarmos os apontamentos feitos com relao lista de heursticas empregada e ao grau de severidade observado nos problemas apresentados pelo site atual da escola, para que possamos, com base nos detalhamentos de cada problema, comparar as interfaces e apontar as melhorias consideradas no re-design do site em questo. Portanto, para facilitar a
92
visualizao e anlise do resultado, destacamos abaixo de forma comparativa os pontos alterados em cada seo de acordo com a heurstica avaliada:
1) Apontamento da Avaliao Heurstica Ambigidade de informaes
Grau de Severidade atribudo 4
Soluo Na reestruturao o menu secundrio deixou de ser um elemento comum a todas as sees e seus links passaram a integrar sees especficas relacionadas a cada um deles, portanto houve simplificao e melhoria do dilogo, o que contribui para uma navegao mais segura e coerente.
Antes Informaes ambguas, excessivas e confusas.
93
Depois Simplificao da informao com criao de atalho direto para email ou atravs da seo exclusiva do aluno e clareza no dilogo quando se tratando de assuntos diferentes.
2) Apontamento da Avaliao Heurstica Falta de consistncia
Soluo A padronizao na abertura das sees com a exibio de todo o contedo dentro do prprio corpo da pgina e a eliminao dos links para sees inacabadas conferem maior consistncia ao site da escola e evitam, portanto, descontentamento por parte dos usurios.
94
Antes Inconsistncia na abertura de sees (pop-up) e inexistncia de contedo para alguns links.
Depois Maior consistncia na abertura das sees e supresso dos links para sees inacabadas.
95
3) Apontamento da Avaliao Heurstica Feedback inadequado
Soluo A incorporao de feedback constante nas reas de login e formulrios contribui para a satisfao dos usurios e vai de encontro s prerrogativas da usabilidade.
Antes Carncia de feedback e retorno inadequado do ponto de vista esttico e visual.
96
Depois Feedback constante e esteticamente adequado e coerente.
4) Apontamento da Avaliao Heurstica Problemas na sada do sistema
97
Soluo Como observado nos estudos referentes a este caso, pelo fato da navegao ser muito direta, ou seja, onde podemos visualizar constantemente os links para todas as sees do site, no existiram muitas correes a serem feitas. No entanto, para aquelas subsees onde o usurio possa sentir a necessidade de retornar a uma tela anterior, criamos um boto para auxiliar nessa tarefa, o que contribui para uma experincia mais agradvel e intuitiva para os usurios.
Antes Inexistncia de caminhos de retorno nas subsees.
Depois Todas as sees e subsees com caminhos de retorno bem definidos.
98
5) Apontamento da Avaliao Heurstica Falta de preveno ocorrncia de erros
Soluo A criao de um retorno eficiente quando na tentativa de envio de formulrios com campos pendentes de preenchimento, confere maior credibilidade ao site e passa segurana aos usurios.
Antes Permisso de envio de formulrios com dados insuficientes ou em branco.
99
Depois Quando na tentativa de envio de formulrios o sistema acusa os campos faltantes.
100
6) Apontamento da Avaliao Heurstica Falta de atalhos e mapa do site
Soluo A disponibilizao de atalhos para os usurios freqentes contribui para a satisfao dos mesmos e enriquece a interface em termos de usabilidade viabilizando um acesso mais rpido e direto aos contedos de maior interesse dos usurios mais experientes. Alm disso, a existncia de um mapa do site ajuda o usurio a visualizar melhor todo o contedo do site, auxiliando-o quando na busca por informaes de seu interesse.
Antes Somente atalho para e-mail.
Depois Atalhos para as sees de maior interesse dos usurios freqentes (alunos) e disponibilizao de mapa do site para referncia direta ao contedo do site.
101
Alm de todas as melhorias apontadas acima, baseados nos conceitos de eLearning, sugerimos a incluso de uma seo de Salas Virtuais (Figura 63). Nessa seo existem salas de bate-papo onde os alunos podem conversar uns com os outros e trocar informaes sobre o contedo das aulas, aprimorando dessa forma seus conhecimentos atravs do compartilhamento de informaes, conforme sugere SHNEIDERMAN (2002) em seus estudos. A criao dessa seo tambm vai de encontro s vantagens exaltadas por ALAVI & LEIDNER (2001) quanto ao uso de um sistema de gesto do conhecimento, pois amplia o aprendizado dos usurios, gera uma memria on-line e aumenta o banco de conhecimento da instituio.
102
FIGURA 63 SEO SALAS VIRTUAIS
103
4.
CONCLUSO
Este projeto buscou, entre outras coisas, a melhoria do visual e da funcionalidade de um site j existente atravs do modelo de concepo sugerido por GARRET (2003). Assim como ele, diversos outros autores defendem que o design centrado na experincia do usurio contribui em muito para o desenvolvimento de sites funcionais, atrativos, coerentes e, acima de tudo, teis, trazendo desta forma um melhor retorno do investimento para as empresas que escolhem a internet como meio de atrair novos clientes e fortalecer o vnculo com aqueles j conquistados. Portanto, ao seguir sua linha de estudos, obtivemos resultados muito satisfatrios quanto esttica e usabilidade do layout gerado. Devemos lembrar ainda que a Internet um eficiente canal de conquista de novos clientes e relacionamento com os clientes efetivos. um meio que oferece diversas vantagens competitivas e representa uma alternativa de publicidade e propaganda. De um modo geral, a Internet facilita os negcios entre as empresas e seus clientes e a deciso de compra desses clientes, por isso o site de uma empresa deve ser conciso e coerente, deve ser tratado de forma a passar segurana e clareza de contedo a seus visitantes e foi exatamente isso que conseguimos com a finalizao deste projeto. Um design bem estruturado e fundamentado nas necessidades da empresa e dos usurios converge para a criao de um layout mais atrativo e funcional para ambas as partes envolvidas e, no caso da escola Microcamp, com a sugesto das salas virtuais, auxilia ainda na ampliao do conhecimento de seus alunos e professores. Fazendo avaliaes com base em heursticas identificamos os problemas mais graves existentes no site da escola e pudemos sugerir melhorias viveis para a correo dos problemas de interface, navegabilidade, usabilidade e interatividade. Com a criao de ferramentas e sees especficas para os usurios pudemos adaptar melhor a estrutura do site proposta de ensino da escola, proporcionando tambm uma interface mais usual e atraente, inclusive com a melhoria da divulgao dos cursos ofertados. De um modo geral, a nova estrutura e o layout facilitam o gerenciamento de contedo e conferem melhorias na apresentao grfica do site.
104
Para novos estudos fica a sugesto de aprofundamento na rea de eLearning, a qual parece ter um futuro promissor na questo do ensino distncia e no aprimoramento de seus recursos tecnolgicos, tais como os objetos educacionais, que favorecem a educao tornando-a mais eficiente, interativa e acessvel a todas as classes sociais.
105
REFERNCIAS
1.
ALAVI, M.; LEIDNER, D. Review: Knowledge Management and Knowledge Management Systems: Conceptual Foundations and Research Issues, MIS Quarterly, v. 25, n 1, p. 107-136, 2001. BROWN, D. Communicating Design: Developing Web Site Documentation for Design and Planning. Berkley: New Riders, 2006. BUDD, A.; COLLISON, S.; MOLL, C. CSS Mastery: Advanced Web Standards Solutions. Friends of ED, 2006. CATO, J. User-Centered Web Design. London: Addison-Wesley, 2001. CLARKE, A.; HOLZSCHLAG, M. Transcending CSS: The Fine Art of Web Design. Berkley: New Riders, 2006. CULLEN, K. Layout Workbook: a real-world guide to building pages in graphic design. Massachusetts: Rockport Publishers, Inc, 2005. DAMASCENO, A. Webdesign: Teoria e Prtica. Florianpolis: Visual Books, 2003. FERREIRA, A. S., 2006, Um estudo comparativo de metodologias de projeto para o desenvolvimento de websites. Tese de M. Sc., COPPE/UFRJ, Rio de Janeiro, RJ, Brasil. GARFINKEL, S. Comrcio & Segurana na Web. So Paulo: Market Books Brasil, 1999. GARRET, J. J. (2002). Um vocabulrio visual para AI e Design de Interao. Disponvel em: <http://iainstitute.org/pt/translations/000332.html> Acesso em: 05 mar. 2007. GARRET, J. J. The Elements of User Experience: User-Centered Design for the Web. New York: New Riders, 2003. GOLDING, M.; WHITE, D. Guia de Cores para Web Designers. So Paulo: Quark, 1997. GOTO, K.; COTLER, E. Web Redesign 2.0: Workflow That Works. Berkley: New Riders, 2005. HOLZSCHLAG, M. E. 250 segredos para web designers. Traduo de: Marcos Vieira. Rio de Janeiro: Elsevier, 2004.
2.
3.
4. 5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
106
15. 16.
KELLEY, T. A Arte da Inovao. 2 Ed. So Paulo: Futura, 2002. LEONEL, L. Internet como Ferramenta de Marketing. Cornlio Procpio, 2005. 47 f. Monografia (especializao em Marketing e Gesto de Pessoas) Setor de Filosofia, Cincias e Letras, Faculdade Estadual de Cornlio Procpio. LUNELLI, A. Projeto de Interfaces Homem-Computador na Internet. Braslia, 1998. 113 f. Monografia (Ps Graduao Latu sensu) Departamento de Engenharia de Computao e Sistemas Digitais, Escola Politcnica da Universidade de So Paulo. LYNCH, P; HORTON, S. (2005). Web style guide, 2nd Edition. Disponvel em: <http://webstyleguide.com> Acesso em: 05 mar. 2007. MAGUIRE, M. Methods to support human-centred design. Int. J. HumanComputer Studies, v. 55, p. 587-634, 2001. MAYHEW, D. Principles and guidelines in software user interface design. New Jersey: Prentice Hall, 1992. MICROCAMP Internacional. Disponvel em: <http://www.microcamp.com.br> Acesso em: 03 mar. 2007. NIEDERST, J. Aprenda web design. Traduo de: Rejane Freitas. Rio de Janeiro: Cincia Moderna, 2002. NIELSEN, J. Designing web usability: the practice of simplicity. Indianpolis: New Riders, 2000. ROCHA, A; CHRISTENSEN, C. Marketing: Teoria e Prtica no Brasil. So Paulo: Atlas, 1995. ROCHA, C. A. da. Desenvolvendo web sites dinmicos: PHP, ASP e JSP. Rio de Janeiro: Campus, 2003. ROSENFELD, L; MORVILLE, P. Information architecture for the World Wide Web. Sebastopol, CA: OReilly, 1998. ROSSON, M. B.; CARROLL, J. M. Usability Engineering: Scenario-Based Development of Human-Computer Interaction. San Diego: Kaufmann, 2002. SHEA, D.; HOLZSCHLAG, M. The Zen of CSS Design: Visual Enlightment for the web. Berkley: New Riders, 2005. SHNEIDERMAN, B. Designing the user interface: Strategies for effective human-computer interaction. Maryland: Addison-Wesley, 1998.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
107
30.
SHNEIDERMAN, B. Leonardos Laptop: Human Needs and the New Computing Technologies. Cambridge: The MIT Press, 2002. WEB page design for designers. Disponvel em: <http://www.wpdfd.com> Acesso em: 05 mar. 2007. WODTKE, Christina. Information Architecture: Blueprints for the Web. Berkley: New Riders, 2002.
31.
32.
108
ANEXOS

TCC Entrega Final

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

TCC Entrega Final

Caricato da

Copyright:

Formati disponibili

MURILO FERREIRA SOARES

RE-DESIGN DO WEBSITE DA ESCOLA MICROCAMP INTERNACIONAL

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 1 - SEO "HOME" DO SITE ATUAL DA ESCOLA MICROCAMP

FONTE http://www.microcamponline.com.br FIGURA 2 - SEO "CREDICAMP" INACABADA

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

1.3.1. Objetivos Gerais

1.3.2. Objetivos Especficos

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 3 ANIMAO DE EXPERIMENTO HIDRULICO

FIGURA 4 SIMULADOR DE EXPERIMENTO HIDRULICO

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 5 EXEMPLO DE SALA DE AULA VIRTUAL

FONTE Universidade Corporativa Banco do Brasil.

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 6 E-LEARNING POR SHNEIDERMAN

FONTE SHNEIDERMAN, B. (2002). Leonardos Laptop.

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

METODOLOGIAS DE DESENVOLVIMENTO PARA A WEB

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 7 - O CICLO DO DESIGN CENTRADO NO USURIO

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 8 - DIAGRAMA ORIGINAL DE GARRET

FIGURA 9 - MODELO SIMPLIFICADO

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

TABELA I QUADRO COMPARATIVO DE METODOLOGIAS

Plano de superfcie Produo e garantia de qualidade Construo do site

Design visual e teste

Produo e garantia de qualidade Rastreamento, avaliao e manuteno ________

Lanamento e alm (manuteno)

Lanamento e alm (manuteno) Rastreamento,

Lynch e Horton Mayhew Rosenfeld e Morville Shneiderman

Design, teste e desenvolvimento Design e documentao Projetar conceitos e prottipos

Estratgia Pesquisa e anlise das necessidades

Implementao Desenvolver prticas de design padro

________ Fazer design interativo e refinamento

FONTE FERREIRA, A. S., 2006

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 10 - REPRESENTAES DE PGINAS E DOCUMENTOS

FONTE Instituto de Arquitetura da Informao, GARRET (2002)

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 11 REPRESENTAO ESTRUTURAL

FONTE Instituto de Arquitetura da Informao, GARRET (2002)

FIGURA 12 REPRESENTAES DE SETAS

FONTE Instituto de Arquitetura da Informao, GARRET (2002)

FIGURA 13 REPRESENTAO DE REA

FONTE Instituto de Arquitetura da Informao, GARRET (2002)

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 14 ESTRUTURA HIERRQUICA

SOARES, M. - TCC 2007 Re-design do Website da escola Microcamp Internacional

FIGURA 15 ESTRUTURA MATRICIAL

FIGURA 16 ESTRUTURA ORGNICA