TCC Entrega Final

MURILO FERREIRA SOARES

RE-DESIGN DO WEBSITE DA ESCOLA MICROCAMP INTERNACIONALTrabalho 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

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

v

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

1

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


2

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


3

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


4

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.


5

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


6

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


7

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:


8

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.


9

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 METODOLOGIASAutorCato

Etapa 1Identificar o contexto de uso Plano

Etapa 2________

Etapa 3Projetar a estrutura e o design visual

Etapa 4Testar 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

e

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 utilizadasIdentificao 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 ConcorrenteDATA BYTE

rea de atuaoEducao e treinamento em Informtica Cursos profissionalizantes Centro de educao profissional

DiferencialPossui 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 RESULTADOSanalisada (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

Documents

TCC Entrega Final