SITE Microcamp

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.3. AVALIAO COM BASE EM HEURSTICAS ........................................................... 49
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
1 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 (e-
Government) 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 E-
mail, 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;
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.

1.4. 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 familiarizar-
me 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).

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

FIGURA 3 ANIMAO DE EXPERIMENTO HIDRULICO

FIGURA 4 SIMULADOR DE EXPERIMENTO HIDRULICO


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.

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

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.

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

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

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

FIGURA 8 - DIAGRAMA ORIGINAL DE GARRET

FIGURA 9 - MODELO SIMPLIFICADO


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

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 Etapa 1 Etapa 2 Etapa 3 Etapa 4 Etapa 5 Etapa 6 Etapa 7

Cato

Identificar o
contexto de uso

Projetar a
estrutura e o
design visual

Testar a
utilizao

Garret
Plano
estratgico e de
escopo

Plano de
estrutura

Plano de
esqueleto

Plano de
superfcie

Goto e Cotler

Definir o projeto

Desenvolver a
estrutura

Design visual e
teste
Produo e
garantia de
qualidade
Produo e
garantia de
qualidade
Lanamento e
alm
(manuteno)
Lanamento e
alm
(manuteno)

Lynch e Horton

Definio do site
e planejamento

Arquitetura da
informao

Design do site

Construo do
site
Rastreamento,
avaliao e
manuteno

Marketing
Rastreamento,
avaliao e
manuteno
Mayhew
Anlise dos
requisitos

Design, teste e
desenvolvimento

Instalao
Rosenfeld e
Morville

Pesquisa

Estratgia
Design e
documentao

Implementao

Administrao

Shneiderman
Desenvolver o
conceito do
produto
Pesquisa e
anlise das
necessidades

Projetar conceitos
e prottipos
Desenvolver
prticas de
design padro
Fazer design
interativo e
refinamento

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

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

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.

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

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


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.

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

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:

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.

Shneiderman (1998)

Reconhea a diversidade (de usurios e de tarefas);

Utilize as oito golden rules de desenvolvimento de interfaces:

o Faa um grande esforo para ser consistente;

o Permita que usurios freqentes usem shortcuts;

o Oferea feedback informativo;

o 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 Faa com que reverter aes seja simples e fcil;
o D ao usurio a sensao de controle do sistema;
o 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.

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.

FIGURA 18 - INTERNET EXPLORER 6.0

FIGURA 19 - MOZILLA FIREFOX


FIGURA 20 - LYNX

FIGURA 21 - FERRAMENTAS DE VALIDAO E DESENVOLVIMENTO
(MOZILLA)


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.

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.

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.

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,

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.

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.

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.

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
Descrio

Familiaridade

02, 05 e 06
Identificao direta da familiaridade;

Conhecimento do site;
Como conheceu.

Freqncia de Acesso

03 e 04
Quantidade de acesso ao site;

Freqncia de acesso.

Navegabilidade

07 e 08
Dificuldade geral de navegao;

Dificuldade para encontrar informaes.

Grau de relevncia de
contedo

09*, 11 e 12
Grau de relevncia das sees no menu secundrio;

Relevncia das matrias divulgadas na seo Home;
Necessidade das sees dos professores.
Necessidades do usurio 14 Apontamento das melhorias e interesses no site.
* Para padronizao e levantamento estatstico eficiente, consideramos os indicativos 0 e

vazio como grau 1 e os indicativos x, grau 5.

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




FREQNCIA DE ACESSO




NAVEGABILIDADE




GRAU DE RELEVNCIA DE CONTEDO






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.


Para o levantamento das necessidades da escola foi elaborado um
questionrio (Anexo 02) contendo perguntas chaves para identificarmos o principal

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

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 rea de atuao Diferencial

DATA BYTE
Educao e treinamento em

Informtica
Possui um material de apoio de informtica

(apostilas) bem formatado

Microlins

Cursos profissionalizantes
Grande experincia no ensino da lngua

inglesa

CEDASPY
Centro de educao

profissional
Possui grande mercado no ensino

profissionalizante em Informtica

DIAPAR

Centro de treinamento e
preparao profissional
a que mais se aproxima da formatao da

Microcamp e detentora de grande fatia do
mercado de cursos profissionalizantes,
idiomas e de Informtica
FACINTER e

demais faculdades
tcnicas*

Ensino tcnico

Lderes no mercado do ensino tcnico.
* No se aplica unidade em estudo, pois a mesma ainda no ministra cursos tcnicos.

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 (e-
mail) para obteno de feedback constante, propiciando implementaes e
aprimoramentos no trato com os clientes.

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,

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


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 pr-
determinada 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.

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.


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 E-
mail, 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


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


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


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


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.

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


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

H
e
u
r
s
t
i
c
a

a
n
a
l
i
s
a
d
a

(
n
r
.
)

Anlise dos fatores: freqncia, impacto e persistncia

Grau de
severidade
atribudo
01 Problema de ocorrncia comum, de difcil superao e baixa persistncia. 4
02 Problema de ocorrncia comum, de difcil superao e alta persistncia. 4
03 Problema de ocorrncia rara, de fcil superao e baixa persistncia. 2
04 Problema de ocorrncia rara, de difcil superao e alta persistncia. 3
05 Problema de ocorrncia rara, de fcil superao e alta persistncia. 3
06 Problemas relevantes no observados. No se aplica
07 Problema de ocorrncia comum, de fcil superao e alta persistncia. 4
08 Problemas relevantes no observados. 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

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

FIGURA 33 MICROLINS

FIGURA 34 CEDASPY


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:

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


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


FIGURA 40 NOTAES DIFERENTES PARA O MESMO SIGNIFICADO

FIGURA 41 FALSOS LINKS


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.

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.

FIGURA 44 FALTA DE PADRO E INCONSISTNCIA

FIGURA 45 MUDANA NO MENU DE NAVEGAO


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.

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


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


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.

FIGURA 52 PREVENO DE ERROS


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


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.

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.

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.

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

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.

TABELA V QUADRO COMPARATIVO DOS SITES

H
e
u
r
s
t
i
c
a

a
n
a
l
i
s
a
d
a

(
n
r
.
)

MICROCAMP

DATABYTE

MICROLINS

CEDASPY

DIAPAR
01 No Sim Sim No No
Ptos +/- - + + - -
02 No No Sim No No
Ptos +/- - - + - -

03
Sim, porm
inadequado

No

No

Sim

No
Ptos +/- + e - - - + -
04 Sim / No Sim Sim Sim Sim
Ptos +/- + e - + + + +
05 No Sim Sim No No
Ptos +/- - + + - -
06 Sim Sim No No No
Ptos +/- + + - - -
07 No No Sim No No
Ptos +/- - - + - -
08 Sim No No No No
Ptos +/- + - - - -

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;

Disponibilizar recursos de atalhos e implementar mapa do site para
viabilizar acesso rpido e direto aos contedos de maior interesse dos usurios mais
experientes;

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

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,

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:

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.


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.


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.


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)

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

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


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

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:

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

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.


Depois Simplificao da informao com criao de atalho direto para e-
mail 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.

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.

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.

Depois Feedback constante e esteticamente adequado e coerente.

4) Apontamento da Avaliao Heurstica Problemas na sada do sistema


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.

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.

Depois Quando na tentativa de envio de formulrios o sistema acusa os
campos faltantes.


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.

Alm de todas as melhorias apontadas acima, baseados nos conceitos de e-
Learning, 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.

FIGURA 63 SEO SALAS VIRTUAIS


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.

Para novos estudos fica a sugesto de aprofundamento na rea de e-
Learning, 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.

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.

2. BROWN, D. Communicating Design: Developing Web Site Documentation
for Design and Planning. Berkley: New Riders, 2006.

3. BUDD, A.; COLLISON, S.; MOLL, C. CSS Mastery: Advanced Web
Standards Solutions. Friends of ED, 2006.

4. CATO, J. User-Centered Web Design. London: Addison-Wesley, 2001.

5. CLARKE, A.; HOLZSCHLAG, M. Transcending CSS: The Fine Art of Web
Design. Berkley: New Riders, 2006.

6. CULLEN, K. Layout Workbook: a real-world guide to building pages in
graphic design. Massachusetts: Rockport Publishers, Inc, 2005.

7. DAMASCENO, A. Webdesign: Teoria e Prtica. Florianpolis: Visual Books,
2003.

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

9. GARFINKEL, S. Comrcio & Segurana na Web. So Paulo: Market Books
Brasil, 1999.

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

11. GARRET, J. J. The Elements of User Experience: User-Centered Design for
the Web. New York: New Riders, 2003.

12. GOLDING, M.; WHITE, D. Guia de Cores para Web Designers. So Paulo:
Quark, 1997.

13. GOTO, K.; COTLER, E. Web Redesign 2.0: Workflow That Works. Berkley:
New Riders, 2005.

14. HOLZSCHLAG, M. E. 250 segredos para web designers. Traduo de:
Marcos Vieira. Rio de Janeiro: Elsevier, 2004.

15. KELLEY, T. A Arte da Inovao. 2 Ed. So Paulo: Futura, 2002.

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

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

18. LYNCH, P; HORTON, S. (2005). Web style guide, 2nd Edition. Disponvel
em: <http://webstyleguide.com> Acesso em: 05 mar. 2007.

19. MAGUIRE, M. Methods to support human-centred design. Int. J. Human-
Computer Studies, v. 55, p. 587-634, 2001.

20. MAYHEW, D. Principles and guidelines in software user interface design.
New Jersey: Prentice Hall, 1992.

21. MICROCAMP Internacional. Disponvel em: <http://www.microcamp.com.br>

22. NIEDERST, J. Aprenda web design. Traduo de: Rejane Freitas. Rio de
Janeiro: Cincia Moderna, 2002.

23. NIELSEN, J. Designing web usability: the practice of simplicity.
Indianpolis: New Riders, 2000.

24. ROCHA, A; CHRISTENSEN, C. Marketing: Teoria e Prtica no Brasil. So
Paulo: Atlas, 1995.

25. ROCHA, C. A. da. Desenvolvendo web sites dinmicos: PHP, ASP e JSP.
Rio de Janeiro: Campus, 2003.

26. ROSENFELD, L; MORVILLE, P. Information architecture for the World
Wide Web. Sebastopol, CA: OReilly, 1998.

27. ROSSON, M. B.; CARROLL, J. M. Usability Engineering: Scenario-Based
Development of Human-Computer Interaction. San Diego: Kaufmann, 2002.

28. SHEA, D.; HOLZSCHLAG, M. The Zen of CSS Design: Visual Enlightment
for the web. Berkley: New Riders, 2005.

29. SHNEIDERMAN, B. Designing the user interface: Strategies for effective
human-computer interaction. Maryland: Addison-Wesley, 1998.

30. SHNEIDERMAN, B. Leonardos Laptop: Human Needs and the New
Computing Technologies. Cambridge: The MIT Press, 2002.

31. WEB page design for designers. Disponvel em: <http://www.wpdfd.com>

32. WODTKE, Christina. Information Architecture: Blueprints for the Web.
Berkley: New Riders, 2002.

ANEXOS

SITE Microcamp

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

SITE Microcamp

Enviado por

Direitos autorais:

Formatos disponíveis

MURILO FERREIRA SOARES

RE-DESIGN DO WEBSITE DA ESCOLA

Você também pode gostar