Download - TCC Entrega Final
MURILO FERREIRA SOARES
RE-DESIGN DO WEBSITE DA ESCOLA
MICROCAMP INTERNACIONAL
Trabalho de conclusão do curso de Desenho Industrial – habilitação em Design Gráfico – da Universidade Federal do Paraná. Orientadora: Prof.ª Stephania Padovani
CURITIBA
2007
ii
AGRADECIMENTOS
À minha esposa, pela força, compreensão, atenção, apoio e carinho nos
momentos mais difíceis e exaustivos dessa trajetória.
À 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 além do design simplesmente criativo e estético.
Aos amigos, que torcem por nosso sucesso assim como torcemos por eles.
iii
RESUMO
Ao longo dos anos a Internet vem se tornando cada vez mais uma ferramenta
fundamental para a divulgação de serviços e produtos de empresas que buscam
conquistar o mercado com rapidez e eficácia.
No entanto, nessa busca desenfreada pela conquista de seu espaço na rede,
muitas empresas, tais como a escola Microcamp, optaram por criar seus próprios
sites sem o conhecimento necessário e deixaram a desejar colocando no ar sites
com pouco conteúdo ou precários que não contribuem muito para a conquista de
novos clientes.
Nesse trabalho buscamos mostrar que o papel do designer é fundamental na
criação de sites, pois com o entendimento adequado e multidisciplinar é possível
aplicar conceitos que favorecem o visual e a interatividade dos sites, contribuindo
dessa forma para um melhor aproveitamento dos espaços na rede.
Com o levantamento dos principais problemas através de listas heurísticas e
pesquisas junto aos usuários, pudemos definir os pontos a serem trabalhados e
redesenhados.
Seguindo o modelo de GARRET (2003) para o desenvolvimento de sites,
além do emprego de conceitos de usabilidade, e-Learning e arquitetura da
informação, buscamos propor melhorias funcionais e estéticas para o site da escola.
Como resultado apresentamos uma interface mais limpa, concisa, coerente e
funcional que contribuirá para a divulgação dos produtos e serviços da escola e que
apresenta alternativas de interatividade e desenvolvimento pessoal.
iv
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.
v
SUMÁRIO
AGRADECIMENTOS .................................... ........................................................................ II RESUMO .............................................................................................................................. III ABSTRACT .......................................... ................................................................................ IV
1. INTRODUÇÃO ............................................................................................................... 1
1.1. CONTEXTUALIZAÇÃO DO PROBLEMA .................................................................... 1
1.2. OBJETO DE ESTUDO ................................................................................................ 3
1.3. OBJETIVOS ................................................................................................................ 6
1.3.1. Objetivos Gerais ...................................................................................................... 6
1.3.2. Objetivos Específicos .............................................................................................. 6
1.4. JUSTIFICATIVA .......................................................................................................... 6
1.5. ESTRUTURA DA MONOGRAFIA ............................................................................... 7
2. REFERENCIAL TEÓRICO ............................... .............................................................. 9
2.1. E-LEARNING .............................................................................................................. 9
2.2. METODOLOGIAS DE DESENVOLVIMENTO PARA A WEB .................................... 15
2.3. ARQUITETURA DA INFORMAÇÃO .......................................................................... 20
2.4. PRINCÍPIOS DE USABILIDADE ............................................................................... 25
2.5. FERRAMENTAS DE IMPLEMENTAÇÃO .................................................................. 29
2.5.1. Utilitários e Recursos Disponíveis .......................................................................... 30
2.4.2. Linguagens ............................................................................................................ 36
3. DESENVOLVIMENTO PROJETUAL ......................... .................................................. 38
3.1. PESQUISA COM USUÁRIOS ................................................................................... 39
3.1.1. Desenvolvimento ................................................................................................... 39
3.1.2. Resultados Obtidos ............................................................................................... 41
3.2. BRIEFING ................................................................................................................. 46
3.2.1. Desenvolvimento ................................................................................................... 46
3.2.2. Resultados Obtidos ............................................................................................... 47
3.3. AVALIAÇÃO COM BASE EM HEURÍSTICAS ........................................................... 49
3.3.1. Desenvolvimento ................................................................................................... 50
3.3.2. Resultados Obtidos ............................................................................................... 52
3.4. ANÁLISE DE SIMILARES ......................................................................................... 58
3.4.1. Sites Escolhidos .................................................................................................... 59
3.4.2. Parâmetros de Comparação .................................................................................. 61
3.4.3. Resultados Obtidos (Ptos +; Ptos -) ....................................................................... 61
3.5. GERAÇÃO DE ALTERNATIVAS ............................................................................... 80
3.6. SELEÇÃO E DETALHAMENTO DA ALTERNATIVA ESCOLHIDA ........................... 87
3.7. AVALIAÇÃO DE USABILIDADE E VALIDAÇÃO DO SITE GERADO ........................ 91
4. CONCLUSÃO ......................................... ................................................................... 103
ANEXOS ........................................................................................................................... 108
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 1
1. INTRODUÇÃO
1.1. CONTEXTUALIZAÇÃO DO PROBLEMA
Alguns autores dividem a história da humanidade em três importantes eras:
agrícola, industrial e digital. Na era digital a sociedade tem recebido o nome de
“sociedade da informação”, aquela cuja cultura e economia dependem
essencialmente da tecnologia, da comunicação e da informação.
No Brasil, a história da Internet começou em 1991 com a RNP (Rede Nacional
de Pesquisa), uma operação acadêmica subordinada ao MCT (Ministério de Ciência
e Tecnologia). Com o surgimento da World Wide Web (Teia de Alcance Mundial),
também conhecida como Web, W3 e WWW, esse meio foi ainda mais enriquecido.
O conteúdo da rede ficou mais atraente com a possibilidade de incorporar imagens e
sons. Um novo sistema de localização de arquivos criou um ambiente em que cada
informação tem um endereço único e pode ser encontrada por qualquer usuário da
rede (GOTO & COTLER, 2005).
Constituída de documentos de conteúdo multimídia (contendo textos,
imagens, vídeos, sons) interativo, chamados web pages (páginas da internet), a
Web garante uma riqueza sensorial e cria um forte apelo (HOLZSCHLAG, 2004).
Esta característica contribuiu para sua utilização como veículo de negócios,
causando a explosão da Internet que estamos vivenciando e sua conseqüente
exploração em diversos setores do mercado consumidor.
Com a incontestável influência da Internet na sociedade, onde cada vez mais
empresas e instituições buscam alcançar o público com suas ofertas, produtos e
divulgações em geral (LEONEL, 2005), é imprescindível que exista uma
característica única para fortalecer sua marca e suas idéias em meio a tantas outras
(ROCHA & CHRISTENSEN, 1995), a qual pode ser alcançada através de um site
bem estruturado que vá ao encontro das necessidades do público a ser conquistado.
Nos dias de hoje, não é mais um luxo ou simples questão de opção uma
pessoa utilizar e dominar o manuseio e serviços disponíveis na Internet, pois é
considerado o maior sistema de comunicação desenvolvido pelo homem e, entre
outras coisas, uma das maiores e melhores ferramentas de alcance de mercados
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 2
potenciais para produtos e serviços (GARFINKEL, 1999) ofertados por empresas e
instituições que buscam se destacar em sua área de atuação oferecendo a seus
clientes uma forma mais prática, rápida e cômoda de consumir, aprender, entreter,
informar e comunicar.
A Web é responsável pela incorporação de multidões com uma velocidade
superior a qualquer empreendimento humano e é por este motivo que cada vez mais
empresas e instituições buscam marcar presença na rede criando seus próprios
Web sites, sejam eles com propósitos comerciais (e-Business), políticos (e-
Government) ou educativos (e-Learning). Esta criação envolve um plano de
marketing que se integra à estratégia da empresa, levando informações 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 divulgação de seus produtos e serviços através da Web,
apresentando-os de uma forma consistente, agradável e diferencial. Isso não é
diferente em Curitiba, onde a competição acirrada por um espaço no mercado torna
cada vez mais difícil se destacar entre a inúmera concorrência, o que retoma a
utilização da web como nova ferramenta de conquista de clientes e como diferencial
de mercado. Também podemos observar este tipo de comportamento em escolas de
informática, tais como a Microcamp Internacional, especializada nesse tipo de
ensino, a qual busca manter-se sempre atualizada e rentável através da divulgação
de seus cursos e serviços por meio da Web. Além disso, sua preocupação por
manter um site funcional e bem estruturado é ainda mais enfatizada uma vez que
um de seus principais cursos ofertados é o de Web Design, através do qual a
empresa busca ressaltar sua imagem de qualidade na formação de profissionais
capacitados a criar sites estáticos e dinâmicos com qualidade e consistência.
Tendo em vista a constante evolução neste meio de comunicação, é
importantíssimo para as empresas avaliarem com certa freqüência se os conteúdos
disponibilizados em seus sites realmente estão indo de encontro às necessidades do
público a ser alcançado, uma vez que muitas delas acabam projetando seus sites
com design centrado na própria estrutura organizacional ou mesmo considerando
somente a visão interna, ou seja, o que gostariam de passar a seus clientes, sem
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 3
levar em conta as necessidades do público a ser conquistado, o que acaba gerando
conseqüentemente, em curto ou médio 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 apresentação de suas
marcas e serviços através da Internet. E assim como essas empresas, a escola
Microcamp também se preocupa com a imagem passada a seus clientes, alunos e
funcionários, portanto busca, neste momento, adequar seu site às necessidades de
seu público-alvo.
1.2. OBJETO DE ESTUDO
O Instituto Microcamp Internacional é uma empresa engajada, desde 1977, na
capacitação de pessoas para o mercado de trabalho e no desenvolvimento de
talentos humanos através de cursos de idiomas e informática. Possui franquias em
diversas regiões do Brasil, Portugal, Argentina e Espanha. Cada unidade decide
pela utilização de site próprio ou simplesmente referencia ao endereço eletrônico
geral da instituição (http://www.microcamp.com.br) para divulgar suas atividades e
serviços.
A unidade a ser destacada para este trabalho é a franquia situada à Rua
Visconde de Nácar, 1455, no centro da cidade de Curitiba, no Paraná, cujo site,
principal foco de nossa pesquisa, está situado no seguinte endereço eletrônico:
http://www.microcamponline.com.br. Esse site atualmente possui uma estrutura
baseada em tabelas e imagens que formam o corpo das páginas que o compõem e
serve basicamente para divulgar cursos, promoções, atividades e eventos para seus
clientes e alunos. Esses últimos também contam com ferramentas tais como e-mail e
protocolo de transferência de arquivos.
Inicialmente projetado como um incentivo aos alunos do curso de Web
Design, através de um concurso interno que elegeu o melhor projeto, o site da
escola Microcamp Internacional, unidade Curitiba Centro, passou por recentes
mudanças em seu visual buscando torná-lo mais limpo e coerente, porém devido à
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 4
sua estrutura principal não ter sido projetada de forma adequada, o site ainda
apresenta algumas inconsistências que fazem com que o mesmo não atenda às
principais necessidades da escola e de seu público-alvo. Sua estrutura atual
consiste em cinco seções no menu principal (“Home”, “Escola”, “Cursos”, “Fale
Conosco” e “Localização”), onze no menu secundário (“Webmail”, “Aluno on-line”,
“Equipe Microcamp”, “Calendário”, “Acontece Microcamp”, “Credicamp”, “Criar E-
mail”, “Precisando de Emprego?”, “Destaque”, “Aniversariantes do Mês” e “Turmas
Abertas”) e mais sete seções individuais para os professores da escola (Figura 1),
todas essas desenvolvidas sem um estudo adequado para fundamentar sua
necessidade, o que também contribuiu para a existência de caminhos para seções
que nunca foram desenvolvidas, como no exemplo da seção “Credicamp” do menu
secundário (Figura 2).
Dessa forma, cada seção do site deverá ser detalhada mais adiante neste
projeto para facilitar o estudo e a identificação dos problemas estruturais, pois só
assim poderemos verificar a melhor forma de elaborar sua estrutura e quantificar as
seções adequadamente para atender às necessidades da empresa e de seus
usuários.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 5
FIGURA 1 - SEÇÃO "HOME" DO SITE ATUAL DA ESCOLA MICROCAMP
FONTE – http://www.microcamponline.com.br
FIGURA 2 - SEÇÃO "CREDICAMP" INACABADA
FONTE – http://www.microcamponline.com.br
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 6
1.3. OBJETIVOS
1.3.1. Objetivos Gerais
• Contribuir, através de um levantamento das necessidades do público
usuário, para a melhoria da apresentação visual e estética do site
institucional da escola de informática 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 usuário;
• Proporcionar uma melhor divulgação e aproveitamento de seus serviços.
1.3.2. Objetivos Específicos
• Avaliar, com base nas heurísticas, 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 apresentação gráfica;
• Propor novas ferramentas e seções específicas para os usuários -
internos e externos;
• Proporcionar uma interface mais usual e atraente;
• Melhorar a divulgação dos cursos ofertados;
• Facilitar o gerenciamento do conteúdo do site.
1.4. JUSTIFICATIVA
Segundo GARFINKEL (1999), a Internet tornou-se uma ferramenta de
marketing importantíssima, onde suas principais atribuições – informar, entreter e
comunicar – são enfatizadas de acordo com a necessidade ou natureza da
instituição que a utiliza. Desse modo, devemos ter em mente que a melhor forma
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 7
para conquistar novos clientes ou fidelizar àqueles já conquistados é manter sempre
um site com visual, consistente, agradável e funcional.
Uma empresa que não possui um site bem desenvolvido e apresentado perde
oportunidades de conquistar novos clientes, alavancar negócios e fortalecer o
comprometimento com os clientes já conquistados.
A empresa Microcamp Internacional busca, entre outros aspectos, manter-se
sempre atualizada e rentável, o que exige do instituto um acompanhamento contínuo
das tendências do mercado, sempre adotando as melhores práticas. Também, por
considerar que seus clientes tornaram-se ainda mais exigentes devido ao avanço
das tecnologias referentes à Web, a escola manifestou seu interesse por uma
revisão de seu site neste momento.
O site atual apresenta inconsistências em sua estrutura e apresentação, não
deixando claro ao visitante o propósito de sua existência. Navegação confusa e links
inativos acentuam ainda mais esta problemática, levando muitas vezes ao
desinteresse por parte de seus usuários, os quais não têm suas necessidades
atendidas.
Tendo em vista o principal foco da escola concentrar-se na divulgação de
seus cursos, no relacionamento com seus alunos (principais clientes) e na busca por
expandir seu mercado construindo uma imagem sólida, consistente e confiável,
devemos considerar a idéia de que um site bem resolvido e fundamentado nas
melhores práticas de web design venha a melhor servir o propósito desta instituição.
Além do interesse da empresa, também vejo nesse projeto uma excelente
oportunidade para exercitar, desenvolver e aprimorar conhecimentos
multidisciplinares adquiridos durante o curso de Design Gráfico, além de familiarizar-
me com as problemáticas existentes quando da elaboração 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:
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 8
O primeiro capítulo – Introdução 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 questão, além de abordar a necessidade da realização
deste projeto do ponto de vista institucional e pessoal.
O segundo capítulo – Referencial Teórico – apresenta os principais
fundamentos teóricos que serão abordados durante o desenvolvimento do projeto,
referenciando alguns autores, assim como expõe algumas metodologias passíveis
de aplicação neste trabalho e ferramentas necessárias à criação de sites.
O terceiro capítulo – Desenvolvimento Projetual – explica em detalhes os
procedimentos para o desenvolvimento do projeto, abordando as etapas a serem
concretizadas até a finalização do mesmo.
O quarto capítulo – Considerações Finais – analisa a pesquisa realizada para
este projeto chegando a conclusões sobre este estudo e sugerindo desdobramentos
para o desenvolvimento de novos trabalhos.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 9
2. REFERENCIAL TEÓRICO
Para a elaboração deste projeto será necessário o entendimento de algumas
teorias e conceitos estudados, definidos a seguir, e que serão fundamentais no
desenvolvimento de todo o trabalho.
2.1. E-LEARNING
Com o avanço das Tecnologias da Informação e da Comunicação (TIC) e
com o crescimento da Sociedade da Informação, devido ao uso da Internet, as
instituições, corporativas e acadêmicas, estão utilizando técnicas cada vez mais
sofisticadas para a geração e disseminação do conhecimento no meio em que
atuam.
O e-Learning surge como uma estratégia habilitada para a Web, que oferece
um amplo conjunto de soluções, que estimulam o crescimento de comunidades de
conhecimento/aprendizado, para aumentar o desempenho das instituições. É fruto
de uma combinação ocorrida entre o ensino com auxílio da tecnologia e a educação
à distância. Ambas as modalidades convergiram para a educação on-line e para o
treinamento baseado em Web. Sua chegada adicionou novos significados para o
treinamento e fez explodir as possibilidades para difusão do conhecimento e da
informação para todos. Em um compasso acelerado, abriu um novo mundo para a
distribuição e o compartilhamento de conhecimento, tornando-se também uma forma
de democratizar o saber para as camadas da população com acesso às novas
tecnologias (SHNEIDERMAN, 2002), propiciando a estas que o conhecimento esteja
disponível a qualquer tempo e hora e em qualquer lugar.
Usando a tecnologia de e-Learning, a aprendizagem não ocorre somente a
partir de instrução digital, mas principalmente a partir do acesso a informações bem
estruturadas, correspondendo a uma forma inovadora para o aprendizado.
Portanto, uma estrutura de e-Learning deve conter treinamento on-line e
sistemas de gestão do conhecimento (Knowledge Management Systems - KMS),
que necessitam fornecer o suporte necessário para a criação de uma cultura de
aprendizado na instituição (ALAVI & LEIDNER, 2001).
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 10
A estruturação do conhecimento é a base de um KMS para a implementação
do e-Learning. Quando um conteúdo é bem-estruturado, preciso e de fácil utilização,
o aprendizado ocorre. Caso contrário as informações perderão valor em pouco
tempo. Em função disso, é fundamental a forma de identificação, categorização,
organização e rotulação das informações, bem como seu gerenciamento.
De acordo com ALAVI & LEIDNER (2001), as principais vantagens de um
sistema de Knowledge Management bem estruturado são:
� Permite o aprendizado dos usuários na aplicação das informações
armazenadas;
� Deixa gravada a história da instituição, gerando uma memória on-line;
� Disponibiliza recursos adicionais para a manipulação de informações;
� Permite acrescentar idéias e insights dos usuários, aumentando o banco de
conhecimento da instituição.
Um dos avanços tecnológicos mais promissores na área do e-Learning é a
criação de soluções baseadas em objetos educacionais, onde cada um corresponde
ao menor bloco de instrução ou informação, elaborado de forma independente e
capaz de transmitir um significado.
Utilizando objetos educacionais, é possível criar bibliotecas de conhecimento,
permitindo que cursos diferentes utilizem um mesmo objeto. Outra vantagem está na
personalização do aprendizado a partir da seleção e configuração daqueles objetos
que atendam e auxiliem o aprendiz na construção e apropriação do próprio 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 simulação
(Figura 4).
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 11
FIGURA 3 – ANIMAÇÃO DE EXPERIMENTO HIDRÁULICO
FIGURA 4 – SIMULADOR DE EXPERIMENTO HIDRÁULICO
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 12
Para incentivar a utilização dessa tecnologia foi criado o consórcio
Educational Objects Economy (EOE), nos Estados Unidos, um consórcio mantido
pela National Science Foundation, agência federal que promove o progresso da
ciência. Deste fazem parte universidades, empresas e editoras envolvendo
educadores, desenvolvedores e comerciantes.
A fim de apoiar o processo, foram desenvolvidos também os LMS’s (Learning
Management System), sistemas de gestão de ensino e aprendizagem na web.
Softwares projetados para atuarem como salas de aula virtuais (Figura 5), gerando
várias possibilidades de interações entre os seus participantes. Com o
desenvolvimento da tecnologia na web, os processos de interação 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.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 13
Porém, viabilizar a educação a distância não depende apenas de um bom
software que gerencie os cursos e alunos. Além de um eficiente sistema de
gerenciamento é necessário deter conteúdos desenvolvidos com embasamento
pedagógico e teoria específica. É indispensável também expertise em gestão de
cada curso, o que envolve profissionais de recursos humanos, tutores e professores.
Projetos de e-Learning requerem ainda a participação 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 gerência e administração de projetos, ilustradores, programadores e
analistas.
Por isso, costuma-se dizer que os pilares do e-Learning são tecnologia,
conteúdo e gestão e que a ausência de qualquer um desses elementos torna
incompleto um projeto de ensino a distância.
Alguns autores como SHNEIDERMAN (2002) defendem ainda a idéia de que
o conceito do e-Learning contribuiu para um aprendizado mais consistente e
colaborativo, onde devemos repensar a educação como uma forma de aprendizado
coletivo onde todos nós podemos adquirir maiores conhecimentos contribuindo com
nossas experiências. O modelo de e-Learning proposto pelo autor (Figura 6) agrega
os conceitos de coletar informações, relacioná-las com idéias de outras pessoas,
criar novas idéias e conceitos em cima deste agregado e, finalmente, disponibilizar o
novo conteúdo de forma sucinta e útil para outros interessados no assunto. Esse
ciclo de atividades pode também ser facilmente aplicado em várias situações 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 expõe o processo de uma forma coerente
onde, na primeira etapa, coletamos informações referentes a determinados assuntos
junto ao meio em que vivemos (família, amigos, comunidade, vizinhança, etc),
depois nos relacionamos com colegas ou pessoas com maior conhecimento do
referido assunto, para aprofundarmos nosso entendimento, e então, agregando todo
esse conhecimento adquirido e essas trocas de informações, seremos capazes de
criar novos conceitos e idéias acerca daquele determinado assunto. Com esse
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 14
entendimento e aprofundamento adquirido no assunto, só nos resta a última etapa
do ciclo que seria o repasse ou doação do novo conhecimento gerado aos outros
envolvidos no processo, fechando dessa forma o ciclo de aprendizagem e
possibilitando o início de um novo processo para um aprimoramento ainda maior.
FIGURA 6 – E-LEARNING POR SHNEIDERMAN
FONTE – SHNEIDERMAN, B. (2002). Leonardo´s Laptop.
As vantagens observadas na aplicação do conceito de e-Learning englobam o
aumento do número de alunos regulares, a melhoria do acesso à educação em
lugares aonde isto seja difícil, a otimização do processo e da experiência de
aprendizagem dos alunos e a redução dos custos institucionais por aluno.
Este conceito de e-Learning poderá ser muito útil neste projeto quando da
elaboração de novas funcionalidades para o site da escola Microcamp, tais como
salas de bate-papo virtuais onde os alunos poderão trocar idéias sobre o conteúdo
das aulas e difundir conhecimentos adquiridos extraclasse.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 15
2.2. METODOLOGIAS DE DESENVOLVIMENTO PARA A WEB
Assim como os demais meios de atuação de um designer, o web design
tende à multidisciplinaridade, uma vez que criar páginas e documentos para a web
requer conhecimentos específicos não só na parte do design propriamente dito mas
também em áreas técnicas de programação, usabilidade e acessibilidade.
Hoje, os requisitos para um novo projeto web vão muito além de uma
comunicação eficiente ao consumidor. Projetos web passam por padrões de
qualidade como arquitetura de informação, usabilidade e navegação,
compatibilidade com navegadores e sistemas, funcionalidade, performance e carga,
conteúdo e segurança.
A principal preocupação de um web designer, além de oferecer aos visitantes
um visual mais atrativo, é conseguir agregar conceitos de usabilidade com o
planejamento da interface de modo a garantir que o usuário atinja seus objetivos de
forma intuitiva e confortável.
Muitos acreditam que pelo fato do visual ser a primeira impressão que se tem
de um site, isto torna o design visual o ponto de partida para o desenvolvimento de
um projeto como este. Porém, muito pelo contrário, GARRET (2003) argumenta que
o design visual deva ser a última instância quando da criação de sites intuitivos,
concisos e usáveis, pois acredita que o foco principal deva ser a identificação das
necessidades dos usuários (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 confortável
possível.
Uma implementação satisfatória é invariavelmente precedida de um
planejamento adequado e eficiente (BROWN, 2006), o qual deve levar em
consideração muitas variáveis tais como tecnologias atuais, usabilidade,
funcionamento, desempenho, portabilidade e muitas outras.
GARRET (2003) defende a idéia de que para se criar um site funcional e
eficiente é necessário entender o que seu usuário busca, do contrário não terá
resultados adequados para um retorno de seu investimento. Desse modo ele
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 16
acredita que para a realização de um projeto de web que gere o retorno adequado, o
design deve estar centrado na experiência do usuário.
Assim como GARRET (2003), a maioria dos autores estudados defende que a
principal variável a ser considerada na criação de sites ou softwares é a
necessidade do público-alvo. O design centrado na experiência do usuário é muito
mais eficiente e torna o site mais agradável, conciso e coerente (SHNEIDERMAN,
1998).
Em pesquisas apresentadas por MAGUIRE (2001), é possível reforçar ainda
mais a idéia de que o design centrado no usuário é a maneira mais consistente e
segura de se projetar interfaces que garantem a usabilidade. Os métodos
apresentados por esse autor baseiam-se no padrão ISO 13407, do design centrado
no usuário (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 exigências de usabilidade: Planejar o processo do design centrado
no usuário; Entender e especificar o contexto de uso; Especificar as exigências
organizacionais e do usuário; Produzir designs e protótipos e Finalizar com
avaliações baseadas no usuário. Todas Essas etapas compõem o ciclo chave para
desenvolvimento de projetos centrados no usuário, o qual é representado logo
abaixo (Figura 7).
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 17
FIGURA 7 - O CICLO DO DESIGN CENTRADO NO USUÁRIO
No desenvolvimento de sites baseados no design centrado no usuário, uma
das principais questões a serem trabalhadas é como fazer o usuário sentir-se seguro
o bastante para encontrar o que procura em pouco tempo. Uma interface clara com
ícones consistentes, identidade gráfica planejada, visual baseado no conteúdo
gráfico ou de texto e telas de resumo podem dar a confiança necessária para o
usuário encontrar o que procura sem desperdiçar tempo (LYNCH & HORTON,
2005).
GARRET (2003) sugere que enxerguemos a Web não só como um sistema
de hipertexto, mas também como uma interface de software e propõem um modelo
(Figura 8) para concepção de sites centrados nas experiências dos usuários, o qual
consiste na idéia de seguir uma linha de raciocínio partindo-se do abstrato para o
concreto, através de cinco níveis bem definidos: estratégia, escopo, estrutura,
esqueleto e superfície (Figura 9).
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 18
FIGURA 8 - DIAGRAMA ORIGINAL DE GARRET
FIGURA 9 - MODELO SIMPLIFICADO
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 19
Na estratégia teríamos a definição dos objetivos do site e das necessidades
dos usuários, desta forma constituiríamos toda a base para a elaboração do projeto.
Já no escopo deveríamos esclarecer todas as especificações funcionais e as
exigências de conteúdo para incorporação no site a ser desenvolvido.
Para a estrutura seria necessário desenvolver o design de interação e realizar
a Arquitetura da Informação para se definir exatamente onde cada informação será
relevante e como será feita a interação com o usuário.
Quando da elaboração do esqueleto trabalharíamos com o design de
interface, o design de navegação e o design da informação, garantindo deste modo
o posicionamento adequado do conteúdo, da informação e a forma como serão
apresentados.
Chegando-se à superfície nos preocuparíamos apenas com o design visual
do site para estabelecer características 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 divisão do conteúdo
a ser trabalhado com uma seqüência lógica de etapas que conferem melhor grau de
entendimento daquilo que se está desenvolvendo. Além disso, trabalhando-se com o
design visual em uma última instância, o grau de liberdade para trabalhar com a
criatividade torna-se ainda maior.
Estabelecer a função do objeto a ser criado, nesse caso o site, é uma etapa
crítica 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 discussões teóricas em estudos de casos reais, ROSSON & CARROLL (2002)
também acreditam que o design centrado no usuário seja a melhor forma de se
conseguir um resultado satisfatório quando da criação de sites. Por isso sugerem,
antes de tudo, a realização de testes e pesquisas para identificarmos as
necessidades a serem atendidas.
Os estudos de CATO (2001) convergem para a identificação do contexto de
utilização da interface a ser criada (sites ou softwares) e apontam para a elaboração
de cenários e utilização de personagens fictícios ou reais com características
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 20
semelhantes às dos nossos usuários. A utilização dessa técnica ajuda a mantermos
o foco nas necessidades de nosso público-alvo e favorece a identificação de
possíveis problemas de usabilidade.
Comparando algumas metodologias propostas pela literatura estudada,
podemos observar etapas comuns e de grande importância 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
utilização ________ ________ ________
Garret Plano
estratégico e de
escopo
Plano de
estrutura
Plano de
esqueleto
Plano de
superfície ________ ________ ________
Goto e Cotler Definir o projeto Desenvolver a
estrutura
Design visual e
teste
Produção e
garantia de
qualidade
Produção e
garantia de
qualidade
Lançamento e
além
(manutenção)
Lançamento e
além
(manutenção)
Lynch e Horton Definição do site
e planejamento
Arquitetura da
informação Design do site
Construção do
site
Rastreamento,
avaliação e
manutenção
Marketing
Rastreamento,
avaliação e
manutenção
Mayhew Análise dos
requisitos ________
Design, teste e
desenvolvimento Instalação ________ ________ ________
Rosenfeld e
Morville Pesquisa Estratégia
Design e
documentação Implementação ________ ________ Administração
Shneiderman Desenvolver o
conceito do
produto
Pesquisa e
análise das
necessidades
Projetar conceitos
e protótipos
Desenvolver
práticas de
design padrão
Fazer design
interativo e
refinamento
________ Fornecer
suporte
FONTE – FERREIRA, A. S., 2006
A análise das metodologias acima reforça ainda mais a escolha de GARRET
(2003) como referência nesse trabalho, pois as etapas sugeridas por ele convergem
com as idéias dos demais autores de uma forma mais sintética e clara, sem se
estender para as etapas do pós-projeto, as quais não serão necessárias para esta
proposta.
2.3. ARQUITETURA DA INFORMAÇÃO
Arquitetura de Informação (AI) consiste na estruturação das informações de
sistemas computacionais de forma lógica e na criação de soluções quanto à
organização visual destas informações. Envolve a organização do fluxo de
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 21
informação visando torná-la útil e inteligível. Na Web, envolve também a
estruturação do fluxo de navegação de uma página. Une três campos vitais, a
tecnologia, o design e produção de texto. É o desenho de uma interface, incluindo
todos seus fluxos de navegação e estruturação de conteúdo. Um bom planejamento
de todos os fluxos de informação e das funcionalidades de um site torna o produto
final muito mais usável e lucrativo (ROSENFELD & MORVILLE, 1998). Resumindo,
ela trata basicamente do gerenciamento e estruturação das informações.
Para uma idéia mais ampla do conceito envolvido na AI, podemos apresentar
as quatro definições de ROSENFELD & MORVILLE (1998) sobre o tema:
1. Combinação entre esquemas de organização, nomeação e navegação dentro
de um sistema de informação.
2. Design estrutural de um espaço de informação a fim de facilitar a realização
de tarefas (tasks) e o acesso intuitivo a conteúdos.
3. É a arte e a ciência de estruturar e classificar websites e intranets a fim de
ajudar as pessoas a encontrar e a gerenciar informação.
4. É uma disciplina emergente e uma comunidade de prática (community of
practice), focada em trazer para o contexto digital os princípios de design e
arquitetura.
Já o “arquiteto de informação” seria o indivíduo com a missão de organizar
padrões dos dados e de transformar o que é complexo em algo mais claro. Por um
lado, podemos dizer que se trata de alguém especializado apenas em estruturar e
organizar espaços de informação, uma descrição na qual se enquadram apenas
alguns milhares de pessoas no máximo.
Por outro lado, podemos dizer que um “arquiteto da informação” é alguém que
estrutura e organiza espaços de informação como parte de suas vidas e, aí, já
estamos falando em milhões de pessoas. O fato é que a maioria das arquiteturas da
informação é feita por gente que não se considera arquiteto da informação. Por isso
é que é tão importante compartilhar experiências além da nossa comunidade
profissional (ROSENFELD & MORVILLE, 1998).
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 22
Segundo WODTKE (2002) os primeiros passos para organizar informações
são classificar e agrupar. Isso pode ser feito de duas maneiras: baseando-se
unicamente na experiência do profissional da equipe ou ouvindo e interpretando
informações coletadas junto aos usuários.
Do ponto de vista de HOLZSCHLAG (2004), a AI para a Web surgiu para
resolver o problema definido por ela como a “síndrome do crescimento orgânico”, a
qual seria uma conseqüência da maneira inovadora, mas quase sempre acidental
pela qual os Web sites têm sido construídos nos últimos anos.
Para a realização de um projeto coerente e conciso, é fundamental o
desenvolvimento adequado de uma Arquitetura da Informação, o que pode ser
facilitado utilizando-se diagramas para a representação das páginas, links,
documentos e demais caminhos a serem seguidos pelos usuários no site. Esses
diagramas são constituídos de elementos básicos que auxiliam na visualização do
projeto como um todo, facilitando o design de interação com o usuário.
Para um melhor entendimento podemos citar as representações de páginas e
documentos, para as quais utilizaremos retângulos simples e ícones de documentos
com dobras nas pontas respectivamente (Figura 10).
FIGURA 10 - REPRESENTAÇÕES DE PÁGINAS E DOCUMENTOS
FONTE – Instituto de Arquitetura da Informação, GARRET (2002)
Outros elementos importantes são os conectores e as setas que simbolizam
as relações entre os elementos e são traduzidas como relações de navegação, ou
seja, nos dão a informação estrutural do site (Figura 11) e indicam como, ou em
quais direções os usuários poderão navegar dentro do sistema. As setas (Figura 12)
indicam apenas a direção em que o usuário está propenso a seguir, ou seja, não
representam o impedimento de se navegar na direção contrária, no entanto, se esta
for a intenção, deverá ser utilizada uma barra (crossbar) para este fim.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 23
FIGURA 11 – REPRESENTAÇÃO ESTRUTURAL
FONTE – Instituto de Arquitetura da Informação, GARRET (2002)
FIGURA 12 – REPRESENTAÇÕES DE SETAS
FONTE – Instituto de Arquitetura da Informação, GARRET (2002)
Além dos elementos já citados acima, também pode ser destacado o
elemento área, representado por um retângulo de bordas arredondadas (Figura 13),
que serve para identificar um grupo de páginas que possui um ou mais atributos
comuns (aparecer num pop-up, por exemplo).
FIGURA 13 – REPRESENTAÇÃO DE ÁREA
FONTE – Instituto de Arquitetura da Informação, GARRET (2002)
Quando projetamos levando em consideração nossas próprias expectativas
para o site, as necessidades do público ao qual pretendemos alcançar e o próprio
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 24
conteúdo a ser aplicado, o problema mais comum que enfrentamos na elaboração
da AI é a categorização do conteúdo. Existem basicamente duas formas de se
categorizar conteúdo em sites:
1. Agrupando o conteúdo de cima para baixo, ou seja, considerando apenas a
visão do(s) profissional(is) envolvido(s) na criação do site para classificar e
relacionar o conteúdo;
2. Agrupando-o de baixo para cima considerando somente o entendimento dos
usuários quanto à classificação e relacionamento do conteúdo.
GARRET (2003) defende que a melhor maneira para se fazer isso seria
considerando ambas as formas juntas, pois só desse modo evitaríamos que partes
importantes do conteúdo fossem deixados para trás ou até mesmo tornar o conteúdo
inflexível às mudanças.
É também nessa etapa de aplicação da AI que devemos definir a estrutura a
ser aplicada no site, a qual poderá ser hierárquica (Figura 14), matricial (Figura 15),
orgânica (Figura 16) ou seqüencial (Figura 17). A escolha dependerá dos objetivos
da escola e das necessidades dos usuários.
FIGURA 14 – ESTRUTURA HIERÁRQUICA
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 25
FIGURA 15 – ESTRUTURA MATRICIAL
FIGURA 16 – ESTRUTURA ORGÂNICA
FIGURA 17 – ESTRUTURA SEQÜENCIAL
2.4. PRINCÍPIOS DE USABILIDADE
Usabilidade é uma metodologia científica aplicada na criação e remodelação
de interfaces de sites, intranets, aplicativos, jogos e produtos de modo a torná-las
fáceis de aprender e de usar (ROSSON & CARROLL, 2002).
Historicamente, o termo surgiu como uma ramificação da ergonomia voltada
para as interfaces computacionais, mas acabou se difundindo para outras
aplicações.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 26
A usabilidade pode ser vista como um sinônimo de facilidade de uso, ou seja,
se um produto é fácil de usar, o usuário tem maior produtividade: aprende mais
rápido a usar, memoriza as operações 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 físico (ex: cafeteira) ou abstrato (ex:
software), onde podemos observar a usabilidade que esse objeto oferece.
Alguns benefícios da usabilidade são: maior número de transações bem
sucedidas no site; diminuição da evasão de usuários por desistência; aumento da
eficiência de seu site/intranet; custo menor de suporte e treinamento; maior
fidelidade do usuário ao seu aplicativo ou jogo e percepção positiva da empresa
(NIELSEN, 2000).
Para GOTO & COTLER (2005) os web designers de hoje precisam combinar
forma e funcionalidade para criar uma experiência intuitiva para o usuário.
A usabilidade pode ajudar ainda pessoas com necessidades especiais,
terceira idade e problemas cognitivos se encarada como uma medida relativa, por
exemplo: o mouse é fácil de usar, mas para quem? Uma trackball pode ser mais fácil
de usar por quem tem deficiência motora ou sofre de LER. A interface ideal é aquela
que está adaptada às necessidades de seus usuários. O usuário de terceira idade
pode precisar de textos com letras maiores e o usuário 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 publicitária que faça o produto parecer fácil do que
realmente torná-lo fácil através do envolvimento do usuário durante seu projeto. Ao
invés de estabelecer uma relação duradoura com seus clientes oferecendo um
produto ou serviço de alto nível, eles preferem obter o máximo de lucro no menor
tempo possível.
Contudo, o mercado de usabilidade, mesmo no Brasil, está em franca
expansão, pois aos poucos aqueles empresários mais atentos já percebem que vale
à pena investir nisso e estão contratando profissionais especializados e empresas
de consultoria.
O conceito de usabilidade deve ser entendido como uma qualidade que
atende às necessidades do usuário agregando-se às suas habilidades e aos seus
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 27
conhecimentos (LUNELLI, 1998). Sua avaliação pode ser feita através de testes com
usuários ou mesmo com base nas heurísticas.
A avaliação heurística é mais rápida, pois envolve apenas o trabalho interno
de consultores. Um teste de usabilidade, por exigir maiores preparativos e um
relatório final complexo, é mais demorado.
Grande parte dos problemas de uma interface pode ser revelada com a
aplicação de avaliações heurísticas, porém a combinação de ambos os métodos
(heurísticas e testes de usabilidade) seria a melhor escolha para a identificação e
correção dos problemas.
Autores como CATO (2001), ROSSON & CARROLL (2002) defendem que o
principal foco na realização de um projeto deve ser sempre o usuário, portanto a
realização de testes isolados ao invés de testes integrados a uma metodologia de
projeto centrada no usuário pode ser muito prejudicial para uma conclusão
satisfatória de um trabalho que envolve a usabilidade. É muito mais importante estar
em contato com o usuário desde o início do projeto do que somente testar se está
fácil de usar quando o produto já está acabado e, portanto, mais difícil de ser
alterado em virtude do teste.
ROSSON & CARROLL (2002) acreditam que a criação de cenários informais,
contendo usuários imaginários 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 questões de
controle e habilidade, ou seja, é importante garantir que os usuários sintam que têm
o controle sobre as aplicações disponíveis e não o contrário, também devem sentir
que a interface os apóia, complementa e reforça suas habilidades e experiências,
enfim que têm suas necessidades respeitadas.
Autores como NIELSEN (2000), MAYHEW (1992) e SHNEIDERMAN (1998)
propõem listas de heurísticas que podem ser empregadas neste projeto, quais
sejam:
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 28
Nielsen (2000)
• Simplicidade e clareza no diálogo;
• O sistema deve falar a língua do usuário;
• Minimizar a carga na memória do usuário;
• Consistência;
• Feedback;
• Apresentar de forma simples e clara a saída do sistema;
• Apresentação e conteúdo minimalistas;
• Mensagens de erro claras;
• Prevenir a ocorrência de erros;
• Providenciar help on-line e documentação sobre o sistema;
• Avaliar constantemente o sistema.
Mayhew (1992)
• Compatibilidade com o usuário;
• Compatibilidade entre produtos;
• Compatibilidade com a tarefa a ser realizada;
• Compatibilidade com o fluxo do trabalho;
• Consistência;
• Familiaridade;
• Simplicidade;
• Interface de manipulação direta;
• Controle do usuário sobre o sistema;
• Flexibilidade;
• Apresentar o resultado e o andamento dos processos;
• Tecnologia invisível;
• Robustez técnica;
• Proteção contra erros;
• Facilidade de aprendizado, entendimento e utilização.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 29
Shneiderman (1998)
• Reconheça a diversidade (de usuários e de tarefas);
• Utilize as oito golden rules de desenvolvimento de interfaces:
o Faça um grande esforço para ser consistente;
o Permita que usuários freqüentes usem shortcuts;
o Ofereça feedback informativo;
o Projete diálogos que tenham começo, meio e fim e mostre isso
ao usuário;
o Previna erros e permita fácil correção de erros que venham a
ocorrer;
o Faça com que reverter ações seja simples e fácil;
o Dê ao usuário a sensação de controle do sistema;
o Reduza a carga na memória de curta-duração.
As aplicações dessas heurísticas em projetos como este contribuem para a
criação de interfaces mais coerentes, concisas, amigáveis, úteis e eficazes.
Dentre as regras citadas pelos autores, podemos destacar algumas que serão
fundamentais no desenvolvimento deste trabalho, pois são apontadas pela maioria
dos autores estudados e facilmente empregadas em desenvolvimento de web sites.
São elas: Apresentar simplicidade e clareza no diálogo; Ter consistência; Prover
Feedback; Apresentar de forma simples e clara a saída do sistema; Prevenir a
ocorrência de erros; Prover facilidade de aprendizado, entendimento e utilização;
Permitir que usuários freqüentes utilizem shortcuts; Reduzir a carga na memória de
curta-duração.
2.5. FERRAMENTAS DE IMPLEMENTAÇÃO
No desenvolvimento desse projeto será fundamental o conhecimento de
ferramentas imprescindíveis à criação, estruturação e implementação de conteúdo
multimídia para web, os quais serão brevemente descritos nos tópicos a seguir.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 30
2.5.1. Utilitários e Recursos disponíveis
Autores como HOLZSCHLAG (2004) defendem a idéia de que um bom
Designer não precisa de muito mais do que um simples editor de textos, um
navegador Web, um software de edição de imagens e um cliente FTP para fazer um
excelente trabalho para Web, porém existe uma grande quantidade de ferramentas
que ajudam e facilitam o processo de criação para a Web. No caso deste projeto
destacarei apenas seis destas que contribuirão para um desenvolvimento mais
prático e satisfatório 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 páginas 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 são
interpretadas (ou não interpretadas) a fim de evitarmos possíveis frustrações tanto
para nós designers quanto para os próprios usuários.
Atualmente existe uma grande quantidade de navegadores e diversas
versões disponíveis, 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 (versão mais recente 8.1.3), Mozilla Firefox, Opera,
Safari e Lynx (navegador apenas de texto).
Para a realização deste projeto utilizarei apenas três: 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 consistência e suporte de
padrões, já o Mozilla Firefox, por ser um navegador sofisticado com excelente
suporte de padrões e consistência entre plataformas, além de possibilitar a utilização
de ferramentas de validação 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.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 31
FIGURA 18 - INTERNET EXPLORER 6.0
FIGURA 19 - MOZILLA FIREFOX
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 32
FIGURA 20 - LYNX
FIGURA 21 - FERRAMENTAS DE VALIDAÇÃO E DESENVOLVIMENTO (MOZILLA)
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 33
Editor de código:
Também será importante ter a mão alguns editores que permitam trabalhar
com as linguagens baseadas em ASCII (Código Americano Padrão para Intercâmbio
de Informações), como HTML, XHTML, XML, CSS, JavaScript e outros fundamentais
para a criação de páginas para a Web. Assim como os navegadores, os editores de
códigos se apresentam em diversas versões 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 pouquíssimos recursos, porém é excelente para
correções rápidas ou trabalhos completos, já o segundo possui recursos para se
trabalhar visualmente sem se preocupar com o código gerado, o que também será
muito útil na elaboração deste projeto, além de possuir ferramentas de validação de
conteúdo HTML, XHTML e CSS embutidas, o que contribuirá para um
desenvolvimento mais adequado e dentro dos padrões exigidos para a Web.
Programas de imagem de bitmap:
Para uma criação mais requintada e visualmente mais atrativa é essencial a
existência de gráficos e imagens nos sites para complementar as informações a
serem passadas aos usuários. No entanto, mesmo com a melhoria da qualidade das
conexões atuais, a utilização de imagens muito pesadas pode prejudicar em muito o
desempenho dos sites, portanto é imprescindível trabalhar as imagens a fim de
torná-las mais adequadas para utilização na Internet, o que pode ser conseguido
diminuindo-se o tamanho do arquivo gerado sem prejudicar a qualidade final. Para
tanto se faz necessário o conhecimento de programas que facilitem esse tratamento
e a criação dessas imagens.
Existem diversos programas que podem auxiliar nesta questão, 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
criação e o gerenciamento de tamanho das imagens bitmaps tratadas, o que
proporcionará uma maior vantagem quando de sua aplicação no site.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 34
Programas de imagem de vetor:
Para o tratamento de logotipos, criação de ícones ou outros recursos de
navegação que necessitem de um melhor acabamento gráfico com relação às
curvas e formas, enfim, para tarefas de desenho mais complexas, é necessária a
utilização de programas que auxiliem nesse trabalho. Um dos programas mais
utilizados e também o escolhido para o desenvolvimento deste projeto é o
CorelDraw, o qual será utilizado para a criação de ícones de navegação e demais
atributos visuais a serem empregados no novo site.
A diferença entre gráficos 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.
Utilitários de animação Web:
Recursos de animação são mais interessantes visualmente do que fotografias
e gráficos estáticos. Entretanto, o desenvolvimento de animações em Web sites
ainda é muito maior na área de publicidade. Quando se pretende chamar a atenção
dos usuários para que estes entrem em nossos sites, devemos investir na criação de
gráficos animados que, segundo estatísticas, despertam duas vezes mais o
interesse do leitor do que os anúncios comuns.
No entanto, na criação de efeitos de animação devemos atentar para o
tamanho dos arquivos gerados uma vez que arquivos de animação de maior porte
podem demorar a serem carregados em conexões mais lentas e isto pode fazer com
que os usuários desistam antes que o material seja completamente armazenado em
seus computadores. O ideal é construir animações mais leves e torná-las
condensadas o suficiente para que sejam recebidas com maior rapidez.
Animações bem produzidas tornam mais rico o projeto gráfico do web site e
despertam a atenção do leitor para o conteúdo noticioso.
A animação também pode conferir mais interatividade proporcionando
resposta às ações do usuário no site.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 35
Na elaboração deste trabalho utilizarei programas tais como o Macromedia
Flash e o ImageReady para a criação de animações e outros efeitos visuais
interativos.
A Cor:
Muito mais que um simples fenômeno óptico, a cor pode ser considerada uma
ferramenta essencial quando utilizada de maneira correta e adequada. O domínio e
o entendimento de suas aplicações para a Web podem contribuir para um resultado
visualmente mais elegante e eficiente.
De um modo mais técnico, a utilização 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 edição de imagem, esses valores são habitualmente
representados por meio de notação 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 não há projeção de nenhuma das três cores; em contrapartida, #FFFFFF
representa a cor branca, pois as três cores estarão projetadas em sua intensidade
máxima.
Já na questão estética, a cor será utilizada para agregar interesse visual
através do contraste e para criar harmonia através do equilíbrio e da ordem.
Segundo GOLDING (1997), a cor é considerada uma das ferramentas mais
importantes e versáteis para um designer gráfico, pois dentre suas inúmeras
aplicações, sua utilização adequada dentro de um site pode auxiliar no agrupamento
de elementos, na delimitação de espaços, no relacionamento entre objetos, na
ênfase de conteúdos, na organização de informação textual e, além disso,
proporcionar respostas emocionais nos observadores, o que pode ser muito útil
quando se pretende atrair novos usuários ou mesmo mantê-los por mais tempo
navegando em nosso site.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 36
2.4.2. Linguagens
Hoje em dia, muito mais que simplesmente uma linguagem de marcação 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 máximo aproveitamento em termos de acessibilidade e gerenciamento
de conteúdo.
Todo desenvolvimento de projeto Web consiste no conhecimento e na
utilização de linguagem próprias para a criação de páginas para a internet, portanto
é fundamental conhecermos algumas delas para podermos dar início ao nosso
projeto.
Abaixo descrevo algumas dessas linguagens que serão úteis para a
elaboração deste trabalho.
HTML:
Originalmente desenvolvida como ferramenta de comunicação e
disseminação de pesquisas, a HTML (Linguagem de Marcação de Hipertexto)
ganhou espaço na Internet e hoje é a principal linguagem utilizada para se produzir
páginas na Web.
Os documentos HTML são traduzidos pelos navegadores e disponibilizados
aos usuários na forma de páginas interativas, podendo conter imagens, textos, links
e outros elementos que formam um site.
O entendimento deste tipo de linguagem será necessário para o
desenvolvimento deste projeto, uma vez que toda a estrutura do site será
fundamentada em HTML.
DHTML:
A Linguagem Dinâmica de Marcação de Hipertexto, ou DHTML, é a união da
HTML com outras tecnologias tais como Java, JavaScript, ActiveX, CSS dentre
outras que permitem atribuir maior interatividade e elegância às páginas Web,
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 37
possibilitando que as mesmas sejam modificadas dinamicamente na própria
máquina do usuário, ou seja, um mesmo conteúdo pode ser visto de formas
diferentes, dependendo da interação do visitante com o site ou mesmo de variáveis
tais como a localização geográfica do usuário, a hora local da visita e outras
preferências do internauta.
Dentre as funcionalidades da DHTML está e possibilidade de atribuir recursos
de animação às páginas somente através de scripts, o que pode ser muito
proveitoso quando se pretende conferir ao conteúdo maior flexibilidade quando da
apresentação ao usuário.
O conhecimento desta linguagem será importante para o projeto uma vez que
buscarei seguir o conceito de design centrado no usuário, o qual remete às
necessidades do público ao qual se pretende alcançar, desta forma o emprego desta
linguagem permitirá ampliar o leque de alcance, uma vez que possibilitará flexibilizar
o conteúdo conforme a preferência do visitante.
XHTML:
O XHTML, ou Linguagem Extensível de Marcação de Hipertexto, é uma
reformulação da linguagem de marcação HTML. É um processo de padronização
que tem em vista a exibição de páginas Web em diversos dispositivos (televisão,
palm, celular, etc). A intenção é melhorar a acessibilidade.
O XHTML consegue ser interpretado por qualquer dispositivo,
independentemente da plataforma utilizada, pois as marcações possuem sentido
semântico para as máquinas. O HTML não consegue esta implementação. No
entanto, não existem muitas diferenças entre o HTML e o XHTML.
CSS:
Folhas de Estilo em Cascata, ou simplesmente CSS, é uma linguagem de
estilo utilizada para definir a apresentação de documentos escritos em uma
linguagem de marcação. Seu principal benefício é prover a separação entre o
formato e o conteúdo de um documento.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 38
Ao invés de colocar a formatação dentro do documento, o desenvolvedor
pode optar por criar uma ligação para uma página que contém os estilos,
procedendo de forma idêntica para todas as páginas de um portal. Quando
quisermos alterar a aparência 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 também um melhor gerenciamento do
conteúdo, uma vez que o estilo separado do conteúdo remete a uma maior
flexibilidade quando da implementação de novos recursos ou seções no site (BUDD;
COLLISON & MOLL, 2006).
Além das linguagens acima também será importante para este projeto o
conhecimento a respeito de outras linguagens tais como ASP, PHP e JSP, as quais
nos permitem criar sites dinâmicos possibilitando uma interação com o usuário
através de formulários, parâmetros do URL e links (ROCHA, 2003). Estas linguagens
possibilitam interagir com bancos de dados e aplicações 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 elaboração de um novo site mais atraente e útil para os usuários da
escola Microcamp Internacional. Estas etapas apresentadas a seguir serão sempre
conceituadas e embasadas nas pesquisas realizadas e também fundamentadas em
conceitos já mencionados nos capítulos anteriores.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 39
FIGURA 22 – ETAPAS DE DESENVOLVIMENTO
3.1. PESQUISA COM USUÁRIOS
Para aqueles autores que defendem o design centrado no usuário –
metodologia escolhida para este trabalho – todo projeto deve buscar antes de tudo
entender o que o público-alvo de fato precisa, para que desta forma possa atender
às necessidades dos mesmos de maneira plena e satisfatória. Assim, para que
possamos estabelecer um ponto de partida no desenvolvimento deste projeto,
precisamos elaborar uma pesquisa com os principais usuários para verificarmos
suas necessidades a fim de identificarmos o melhor conteúdo bem como as
melhores ferramentas a serem disponibilizadas no site.
3.1.1. Desenvolvimento
O levantamento das necessidades do público-alvo deste projeto foi realizado
através da elaboração e posterior distribuição de questionário (Anexo 01)
contemplando os principais dados necessários à identificação de possíveis falhas no
layout atual do site em estudo.
O questionário foi elaborado com quinze perguntas de caráter pessoal, onde
buscamos um maior entendimento das expectativas dos alunos perante o site da
escola, não só do ponto de vista enquanto “aluno” propriamente dito, mas também
enquanto principal “cliente” e interessado nos serviços oferecidos pela empresa.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 40
A pesquisa foi realizada com a distribuição do questionário, em meio digital, a
cinqüenta alunos, sendo dez alunos de cada um dos cinco cursos oferecidos pela
escola (“dotnet”, “Web Design”, “Hardware”, “Pacote Especialista” e “ABC”).
Dentre as quinze questões abordadas buscou-se a identificação dos
principais tópicos a seguir:
• Familiaridade;
• Freqüência de acesso;
• Navegabilidade;
• Grau de relevância de conteúdo;
• Necessidades do usuário.
Na compilação dos dados foram consideradas apenas as questões de
números 02 a 09, 11, 12 e 14, em virtude do agrupamento necessário a identificação
dos tópicos já mencionados acima.
O agrupamento se deu de acordo com a tabela abaixo:
TABELA II – AGRUPAMENTO DAS QUESTÕES
Tópico Questões
utilizadas
Descrição
Familiaridade 02, 05 e 06
Identificação direta da familiaridade;
Conhecimento do site;
Como conheceu.
Freqüência de Acesso 03 e 04 Quantidade de acesso ao site;
Freqüência de acesso.
Navegabilidade 07 e 08 Dificuldade geral de navegação;
Dificuldade para encontrar informações.
Grau de relevância de
conteúdo 09*, 11 e 12
Grau de relevância das seções no menu secundário;
Relevância das matérias divulgadas na seção Home;
Necessidade das seções dos professores.
Necessidades do usuário 14 Apontamento das melhorias e interesses no site.
* Para padronização e levantamento estatístico eficiente, consideramos os indicativos “0” e
vazio como grau “1” e os indicativos “x”, grau “5”.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 41
3.1.2. Resultados Obtidos
Dos cinqüenta questionários distribuídos, quarenta e oito foram respondidos e
com base nas respostas obtidas pudemos identificar as principais necessidades dos
usuários e os aspectos passíveis de melhorias no site.
Para exemplificar os resultados obtidos apresentamos os seguintes gráficos:
FAMILIARIDADE
GRÁFICO 1 - QUESTÃO 02
GRÁFICO 2 - QUESTÃO 05
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 42
GRÁFICO 3 - QUESTÃO 06
FREQÜÊNCIA DE ACESSO
GRÁFICO 4 - QUESTÃO 03
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 43
GRÁFICO 5 - QUESTÃO 04
NAVEGABILIDADE
GRÁFICO 6 - QUESTÃO 07
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 44
GRÁFICO 7 - QUESTÃO 08
GRAU DE RELEVÂNCIA DE CONTEÚDO
GRÁFICO 8 - QUESTÃO 09
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 45
GRÁFICO 9 - QUESTÃO 11
GRÁFICO 10 - QUESTÃO 12
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 46
NECESSIDADES DO USUÁRIO
GRÁFICO 11 - QUESTÃO 14
3.2. BRIEFING
Assim como a identificação das necessidades dos usuários, o conhecimento
daquilo que a escola busca com o site também é primordial para um
desenvolvimento adequado e satisfatório 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 usável. Portanto,
também é fundamental levantarmos as necessidades e as principais intenções da
escola para com o site, pois desse modo estaremos estabelecendo os principais
limites na criação do novo layout e identificando os padrões exigidos pela instituição
quando da apresentação de sua marca e na utilização de cores.
3.2.1. Desenvolvimento
Para o levantamento das necessidades da escola foi elaborado um
questionário (Anexo 02) contendo perguntas chaves para identificarmos o principal
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 47
foco de atuação da empresa, bem como sua intenção quando da utilização do site
para a divulgação de sua marca e serviços.
O questionário foi elaborado com perguntas abertas, fechadas e de múltipla
escolha para um melhor entendimento das necessidades a serem atendidas quando
da elaboração deste projeto e para a identificação dos padrões visuais adotados
pela empresa.
Com a aplicação do briefing buscou-se a identificação dos seguintes tópicos:
• Identificação da Instituição;
• Ramo de atuação e tempo de mercado;
• Produtos e serviços oferecidos;
• Concorrência;
• Diferencial da escola;
• Finalidade do site;
• Público-alvo;
• Imagem a ser transmitida;
• Padronização das cores.
3.2.2. Resultados Obtidos
Na resposta ao questionário pudemos entender que a empresa Microcamp
Informática atua a trinta anos no mercado, foi inicialmente focada no ensino de
idiomas e posteriormente expandida para o ramo de editoração e finalmente
agregou cursos técnicos e profissionalizantes de informática. Só no Brasil são
aproximadamente cento e trinta unidades franqueadas.
Especificamente na unidade foco de nossos estudos podemos encontrar
cursos de inglês, informática básica e avançada, hardware e desenvolvimento e
manutenção de sites.
Por apresentar um amplo leque de atuação no mercado, ou seja, possuir um
portfólio de serviços que engloba desde o ensino de idiomas até cursos técnicos e
profissionalizantes, a escola se destaca daquelas empresas que atuam no mesmo
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 48
mercado e fica difícil identificarmos algum concorrente direto, apenas podemos
verificar alguns que atuam isoladamente em determinados setores, os quais são
apresentados no estudo abaixo (Tabela III):
TABELA III - ESTUDO DE CONCORRENTES
Concorrente Área de atuação Diferencial
DATA BYTE Educação e treinamento em
Informática
Possui um material de apoio de informática
(apostilas) bem formatado
Microlins Cursos profissionalizantes Grande experiência no ensino da língua
inglesa
CEDASPY Centro de educação
profissional
Possui grande mercado no ensino
profissionalizante em Informática
DIAPAR Centro de treinamento e
preparação profissional
É a que mais se aproxima da formatação da
Microcamp e é detentora de grande fatia do
mercado de cursos profissionalizantes,
idiomas e de Informática
FACINTER e
demais faculdades
técnicas*
Ensino técnico Líderes no mercado do ensino técnico.
* Não se aplica à unidade em estudo, pois a mesma ainda não ministra cursos técnicos.
O maior diferencial da escola em relação a seus concorrentes é o fato desta
apresentar o maior ramo de atuação e possuir cursos muito bem elaborados e
aprofundados em todas as áreas, o que garante um melhor aproveitamento do
aprendizado para os alunos. Também vale ressaltar o grande reconhecimento no
mercado nacional e internacional devido ao tempo de atuação.
Na pesquisa aplicada pudemos definir também quais as principais intenções
da escola com relação ao site, dentre elas: construir uma imagem corporativa,
conquistar novos clientes, vender produtos ou serviços, reduzir os custos de suporte
ou marketing, divulgar eventos na escola, manter um canal de comunicação com
alunos e professores, disponibilizar conteúdo das aulas e reforçar o vínculo entre
alunos e escola através da disponibilização de recursos de comunicação direta (e-
mail) para obtenção de feedback constante, propiciando implementações e
aprimoramentos no trato com os clientes.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 49
Com relação ao público a ser alcançado com o site, a escola definiu que
deverá ser mais focado em alunos e interessados nos serviços oferecidos. Também
deixou claro que a comunicação interna (empresa – funcionários) se dará de outras
maneiras, não sendo necessário neste momento aprimorar ferramentas para tal
finalidade.
Para a captação 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 serviços
disponibilizados.
No quesito atualização, obtivemos a resposta de que as áreas de informativos
e eventos devem ser atualizadas pelo menos uma vez por semana, com exceção da
área de aniversariantes que deve ser atualizada, obrigatoriamente, uma vez por
mês.
Quanto às seções previstas para o site, prevaleceu o interesse inicial com
relação às já existentes no layout atual: Home, Escola, Cursos, Fale Conosco e
Localização, além daquelas do menu secundário já citadas no início 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 não
se assemelhar ao design dos concorrentes.
Quanto à aplicação de cor, identificamos a inexistência de um padrão
consistente, sendo informado pela empresa que o critério para a escolha baseou-se
na variação da cor verde, predominante na marca da instituição.
Por fim, a Microcamp solicitou que o redesign do site seja surpreendente,
inovador e que explore o inesperado através de efeitos e animações.
3.3. AVALIAÇÃO COM BASE EM HEURÍSTICAS
SHNEIDERMAN (1998) sustenta a idéia de que devemos fazer um grande
esforço para sermos consistentes no desenvolvimento de interfaces. Assim como
ele, CATO (2001), ROSSON & CARROLL (2002) também acreditam que a
consistência é uma das peças determinantes da usabilidade, por isso sugerem que
devemos realizar testes junto aos usuários desde o início da criação de um projeto,
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 50
para possibilitar a identificação de possíveis problemas em tempo hábil de serem
corrigidos. Porém, em virtude das análises já realizadas sobre eficácia de aplicação
de testes de usabilidade e por questões de tempo e viabilidade, adotaremos na fase
inicial deste projeto somente o método da avaliação heurística tomando como
referência as heurísticas dos autores NIELSEN (2000), MAYHEW (1992) e
SHNEIDERMAN (1998).
3.3.1. Desenvolvimento
Face às listas de heurísticas 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 avaliação do site atual da escola:
• Apresentar simplicidade e clareza no diálogo;
• Ter consistência;
• Prover Feedback;
• Apresentar de forma simples e clara a saída do sistema;
• Prevenir a ocorrência de erros;
• Prover facilidade de aprendizado, entendimento e utilização;
• Permitir que usuários freqüentes utilizem shortcuts;
• Reduzir a carga na memória de curta-duração.
Com a lista acima contemplamos todas as questões principais quando da
análise de usabilidade de uma forma mais resumida e direta, além de mantermos o
foco no usuário, que é a principal preocupação de todos os autores estudados.
A avaliação heurística da interface é feita com base em uma lista pré-
determinada de critérios de navegação e usabilidade. Cada critério é analisado em
separado para determinar se a interface apresenta problemas em relação àquele
critério e qual o grau de severidade do problema. Dessa forma podemos concentrar
melhor os esforços naqueles que realmente merecem uma maior atenção para
garantir o sucesso do projeto.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 51
A análise crítica dos resultados será tomada com base na escala de
gravidade dos problemas de usabilidade, os quais são avaliados pela combinação
de três fatores: freqüência, impacto e persistência.
A freqüência está ligada a quantidade em que o problema ocorre na interface
observando se sua ocorrência é comum ou rara.
Já o impacto seria a facilidade ou dificuldade de superação do problema por
parte dos usuários.
A persistência remete à quantidade de vezes em que o mesmo problema
afeta os usuários, ou seja, se afeta somente na primeira vez em que o usuário
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 atribuímos uma
escala de 1 a 4, sendo:
1. Relevante: só precisa ser solucionado se houver tempo;
2. Leve: sua solução pode ter baixa prioridade;
3. Sério: deve ser consertado logo;
4. Crítico: a solução deste problema deve ser dada prioridade absoluta, pois
ele de fato impede usuários de usar apropriadamente a interface.
Após a análise individual de cada problema encontrado, procedeu-se com a
reunião de todos em um único relatório contendo: Critérios Heurísticos, Análise dos
Fatores e Grau de severidade atribuído.
Nos critérios heurísticos foram apontadas as regras utilizadas para a
avaliação da interface.
Já no tópico de análise dos fatores foram indicados a freqüência, o impacto e
persistência do problema para cada heurística avaliada.
Por fim, no grau de severidade atribuído indicamos o grau de impacto de
acordo com a escala acima mencionada, o que servirá de referência para
identificarmos onde deveremos atuar de forma mais ativa na reestruturação e
redesign do site da escola.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 52
3.3.2. Resultados Obtidos
Aplicando a lista de heurísticas acima especificada, chegamos aos seguintes
resultados:
1. Apresenta simplicidade e clareza no diálogo?
Não. O site apresenta um menu principal bem definido, porém no menu
secundário e no conteúdo das páginas nos deparamos com informações ambíguas
que podem confundir o usuário. Ex.: no topo do corpo da página temos o campo “E-
mail”, no menu lateral temos “Webmail” e logo abaixo “Criar E-mail” (Figura 23).
Todas essas informações remetem a um mesmo assunto, porém os dois primeiros
campos executam a mesma função de formas diferentes e o último simplesmente
não funciona. Um caso semelhante também ocorre com os links “Precisando de
Emprego?” e “Vagas para Alunos” (Figura 24), que possuem conteúdo
completamente diferente, porém dão a mesma idéia.
FIGURA 23 – FALTA DE CLAREZA E SIMPLICIDADE
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 53
FIGURA 24 – FALTA DE CLAREZA E SIMPLICIDADE
2. O site é consistente?
Não. No menu secundário a apresentação do conteúdo não segue um padrão
definido, onde hora temos a abertura da seção no próprio corpo da página e hora
temos esta abertura em pop-ups (Figura 25). Além disso, existem links que remetem
a seções inacabadas (Figura 26) ou retornam erro por não existirem.
FIGURA 25 – FALTA DE CONSISTÊNCIA
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 54
FIGURA 26 – FALTA DE CONSISTÊNCIA
3. Provê Feedback?
Apenas podemos observar o fornecimento de feedback quando da tentativa
de login na seção de e-mail, porém isso não é realizado de forma adequada do
ponto de vista estético e visual (Figura 27).
FIGURA 27 – FALTA DE PADRONIZAÇÃO VISUAL
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 55
4. Apresenta de forma simples e clara a saída do sistema?
Sim e Não. Nesse aspecto devemos considerar não a saída propriamente dita
do site da escola, até porque isso não seria interessante, mas sim o retorno do
usuário a alguma seção anteriormente visitada e isso pareceu estar sendo atendido,
pois na maioria das seções ainda conseguimos visualizar os outros links para as
demais seções e, quando isso não ocorre (ex.: Seção “Webmail”), o sistema
apresenta um caminho de retorno bem definido (Figura 28). Por outro lado, nas
seções específicas dos cursos e dos professores observamos alguns problemas de
retorno (Figura 29), o que contribui para que o usuário se perca dentro do site só
conseguindo retornar através do botão de retorno do próprio navegador.
FIGURA 28 – SAÍDA BEM DEFINIDA
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 56
FIGURA 29 – SEM INDICATIVO DE SAÍDA
5. Previne a ocorrência de erros?
Não. Na seção “Fale Conosco”, por exemplo, quando da tentativa de envio de
mensagem sem conteúdo ou com alguma informação fundamental faltante, o
sistema deveria impedir o seu envio retornando ao usuário sobre a necessidade de
complementar os dados, porém isso não ocorre (Figura 30) o que sujeita a
ocorrências de erros tais como esquecimento por parte do usuário de informar seus
dados para contato, sendo necessário reescrever sua mensagem complementando
os dados faltantes.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 57
FIGURA 30 – ENVIO DE FORMULÁRIO EM BRANCO
6. Provê facilidade de aprendizado, entendimento e utilização?
Sim. Por estar focado atualmente mais no conteúdo informativo do que na
interação com os usuários, o site não apresenta grandes dificuldades de
aprendizado, entendimento e utilização.
7. Permite que usuários freqüentes utilizem shortcuts?
Não integralmente. O único atalho observado no site é o acesso direto a
seção “E-mail” observado no topo do corpo da página (Figura 31), porém outras
seções não contam com essa facilidade. Além disso, não existe um mapa do site
para uma referência mais direta de seu conteúdo como um todo.
FIGURA 31 – ATALHO PARA E-MAIL
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 58
8. Reduz a carga na memória de curta-duração?
Sim. Devido ao conteúdo limitado e ao baixo grau de interação com o usuário,
a carga na memória de curta-duração fica reduzida, pois os usuários não precisam
aprender tarefas com grau de complexidade relevantes, apenas navegam através de
links e esporadicamente acessam seus trabalhos através do recurso de FTP
(protocolo de transferência arquivo).
Aplicando a escala de gravidade e grau de severidade obtemos os seguintes
resultados (Tabela IV):
TABELA IV – ANÁLISE CRÍTICA DOS RESULTADOS
Heu
ríst
ica
anal
isad
a (n
r.)
Análise dos fatores: freqüência, impacto e persistê ncia
Grau de
severidade
atribuído
01 Problema de ocorrência comum, de difícil superação e baixa persistência. 4
02 Problema de ocorrência comum, de difícil superação e alta persistência. 4
03 Problema de ocorrência rara, de fácil superação e baixa persistência. 2
04 Problema de ocorrência rara, de difícil superação e alta persistência. 3
05 Problema de ocorrência rara, de fácil superação e alta persistência. 3
06 Problemas relevantes não observados. Não se aplica
07 Problema de ocorrência comum, de fácil superação e alta persistência. 4
08 Problemas relevantes não observados. Não se aplica
3.4. ANÁLISE DE SIMILARES
Tendo em vista o interesse da escola em fortalecer a imagem de sua marca,
também se torna importante para o projeto analisar a situação 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
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 59
poderá ou não ser utilizado como referência na reestruturação do site objeto de
estudo.
3.4.1. Sites Escolhidos
Em face da identificação dos concorrentes, conforme levantamento feito em
pesquisa junto à escola, pudemos definir quatro sites potenciais para estudos e
análise crítica quanto ao design, estrutura e disponibilização de recursos úteis aos
usuários, 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
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 60
FIGURA 33 – MICROLINS
FIGURA 34 – CEDASPY
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 61
FIGURA 35 – DIAPAR
3.4.2. Parâmetros de Comparação
Para se definir um padrão de comparação entre os sites analisados,
buscamos manter a lista de heurística já aplicada ao site da escola Microcamp, pois
dessa forma poderíamos identificar melhor os pontos a serem corrigidos
comparando-os com as soluções apresentadas em cada site dos respectivos
concorrentes.
3.4.3. Resultados Obtidos (Ptos +; Ptos -)
Na comparação dos sites pudemos identificar as principais questões de
usabilidade e verificar os pontos positivos e negativos de cada solução aplicada, o
que servirá para orientar-nos quando da geração de alternativas para o site no qual
trabalhamos.
Com o levantamento realizado e aplicação da lista já mencionada obtivemos
os seguintes resultados:
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 62
1. Apresenta simplicidade e clareza no diálogo?
Sim: Databyte e Microlins
Pontos positivos: Uma estrutura bem definida e a divisão clara do conteúdo
na bandeja de navegação (Figura 36) contribuem para uma melhor experiência do
usuário, bem como uma referência direta aos assuntos tanto no menu principal
(Figura 37) quanto no secundário (Figura 38) auxiliam na identificação do conteúdo.
FIGURA 36 – NAVEGAÇÃO DATABYTE
FIGURA 37 – MENU PRINCIPAL MICROLINS
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 63
FIGURA 38 – MENU SECUNDÁRIO MICROLINS
Não: Microcamp, Cedaspy e Diapar
Pontos negativos: Informações ambíguas, como as observadas no site da
Microcamp, dificultam a navegabilidade e contribuem para o desinteresse por parte
dos usuários, assim como informações mal resolvidas (Figuras 39 e 40) podem
confundir o usuário ou mesmo levá-lo a acreditar que pode seguir caminhos que na
verdade não existem (Figura 41). Outros fatores que contribuem para o desinteresse
do usuário além de dificultar a navegação são o baixo contraste e o excesso de
informações e links na página (Figura 42).
FIGURA 39 – INFORMAÇÃO EM LOCAL INADEQUADO
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 64
FIGURA 40 – NOTAÇÕES DIFERENTES PARA O MESMO SIGNIFICADO
FIGURA 41 – FALSOS LINKS
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 65
FIGURA 42 – EXCESSO DE INFORMAÇÕES E BAIXO CONTRASTE
2. O site é consistente?
Sim: Microlins
Pontos positivos: Um padrão bem definido em todas as seções do site
(Figura 43) contribui para manter a consistência e reforçam o interesse do usuário
na busca por informações.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 66
FIGURA 43 – PADRÃO E CONSISTÊNCIA
Não: Microcamp, Databyte, Cedaspy e Diapar
Pontos negativos: A falta de um padrão e inconsistências (Figura 44) ou
seções inacabadas, como as existentes no site da Microcamp, bem como mudanças
bruscas no menu de navegação principal (Figura 45), prejudicam a navegação,
confundem e frustram os usuários. Links para seções inexistentes (Figura 46)
também contribuem para a insatisfação dos mesmos.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 67
FIGURA 44 – FALTA DE PADRÃO E INCONSISTÊNCIA
FIGURA 45 – MUDANÇA NO MENU DE NAVEGAÇÃO
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 68
FIGURA 46 – SEÇÕES INEXISTENTES
3. Provê feedback?
Sim: Microcamp* e Cedaspy
Pontos positivos: Dar conhecimento ao usuário do efeito que suas ações
têm sobre o sistema é fundamental para a experiência do mesmo. Quando isto é
feito de maneira adequada (Figura 47) instrui o usuário e auxilia em seu
aprendizado.
* Como observado anteriormente, o site da Microcamp apresenta feedback,
porém de forma inadequada.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 69
FIGURA 47 – FEEDBACK ADEQUADO
Não: Databyte, Microlins e Diapar
Pontos negativos: Quando transmitido de forma inadequada pode não ser
assimilado pelo usuário que sem um retorno eficiente (Figura 48) fica sem entender
o erro e não sabe como proceder para corrigi-lo. O retorno inadequado (Figura 49)
também prejudica a experiência do usuário.
FIGURA 48 – RETORNO INEFICIENTE
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 70
FIGURA 49 – FEEDBACK INADEQUADO
4. Apresenta de forma simples e clara a saída do sistema?
Sim: Microcamp, Databyte, Microlins, Cedaspy e Diapar
Pontos positivos: Saídas bem definidas ajudam os usuários a se localizarem
dentro do sistema, o que é importantíssimo para mantê-los interessados no site
visitado. Todos os sites avaliados apresentam bandejas de navegação bem
definidas e com links permanentes (Figura 50), o que garante que seus visitantes
visualizem de forma clara e direta todas as seções dos mesmos.
FIGURA 50 – BANDEJAS DE NAVEGAÇÃO
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 71
Não: Microcamp
Pontos negativos: Como vimos anteriormente, algumas seções do site da
escola não possuem um retorno bem definido (Figura 51), o que prejudica muito a
navegação e acentua o desinteresse do usuário, pois os mesmos se vêm
freqüentemente diante de armadilhas sem saídas.
FIGURA 51 – SEÇÃO SEM RETORNO À PÁGINA ANTERIOR
5. Previne a ocorrência de erros?
Sim: Databyte e Microlins
Pontos positivos: A prevenção de erros (Figura 52) contribui para a
satisfação do usuário e para uma comunicação mais eficaz.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 72
FIGURA 52 – PREVENÇÃO DE ERROS
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 73
Não: Microcamp, Cedaspy e Diapar
Pontos negativos: A inexistência desse tipo de prevenção (Figura 53), ou
uma prevenção ineficaz com apenas indicações (Figura 54), sem nenhuma
informação de a que se referem, prejudica a comunicação com o usuário e
desfavorece o aprendizado do mesmo.
FIGURA 53 – RETORNO COM ERRO
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 74
FIGURA 54 – RETORNO INEFICAZ
6. Provê facilidade de aprendizado, entendimento e utilização?
Sim: Microcamp e Databyte
Pontos positivos: Uma estrutura simplificada e a navegação direta (Figura
55) propiciam o aprendizado não deixando muitas dúvidas quanto à utilização do
conteúdo apresentado.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 75
FIGURA 55 – NAVEGAÇÃO DIRETA
Não: Microlins, Cedaspy e Diapar
Pontos negativos: Sites mais elaborados e com maiores detalhes em sua
estrutura de navegação (Microlins e Cedaspy), pressupõem um tempo maior para se
alcançar familiaridade suficiente ao entendimento de utilização de seus links e
ferramentas. Já numa navegação muito extensa (Diapar), sem o devido
agrupamento de conteúdo (Figura 56), a navegação fica confusa e prejudicada, o
que também desfavorece sua utilização e entendimento de seu conteúdo.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 76
FIGURA 56 – FALTA DE AGRUPAMENTO
7. Permite que usuários freqüentes utilizem shortcuts?
Sim: Microlins
Pontos positivos: A disponibilização de atalhos (Figura 57) auxilia os
usuários mais freqüentes a evitar extensos diálogos e mensagens de informações
que eles não desejam ler. Isso contribui para uma experiência mais agradável e
satisfatória.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 77
FIGURA 57 – ACESSO DIRETO
Não: Microcamp, Databyte, Cedaspy e Diapar
Pontos negativos: A inexistência de atalhos favorece, em médio prazo, o
desinteresse dos usuários, uma vez que a necessidade de percorrer caminhos
extensos para se chegar ao conteúdo que os motivou a freqüentar o site faz com
que desistam de continuar acessando tal conteúdo.
8. Reduz a carga na memória de curta duração?
Sim: Microcamp
Pontos positivos: Não fazer com que o usuário tenha que relembrar coisas
de uma ação em uma próxima ação, ou mesmo não fazer com que se lembre do
caminho percorrido até um determinado assunto ajuda muito o usuário a manter a
atenção no conteúdo de seu interesse, contribuindo ainda mais para sua satisfação
com o site visitado.
Não: Microlins, Databyte, Cedaspy e Diapar
Pontos negativos: A sobrecarga na memória de curta duração (Figura 58)
contribui para o descontentamento dos usuários perante o sistema, tendo em vista o
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 78
estresse causado toda a vez que os mesmos buscam, sem sucesso, informações
por eles já acessadas anteriormente.
FIGURA 58 – SOBRECARGA DE MEMÓRIA
Para facilitar nosso entendimento e ajudar na visualização das soluções mais
adequadas a serem utilizadas como parâmetros na reestruturação do site da escola,
podemos destacar de um modo mais resumido (Tabela V) os resultados obtidos na
análise dos concorrentes.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 79
TABELA V – QUADRO COMPARATIVO DOS SITES H
eurí
stic
a an
alis
ada
(nr.
)
MICROCAMP DATABYTE MICROLINS CEDASPY DIAPAR
01 Não Sim Sim Não Não Ptos +/ - - + + - -
02 Não Não Sim Não Não Ptos +/ - - - + - -
03 Sim, porém inadequado
Não Não Sim Não
Ptos +/ - + e - - - + - 04 Sim / Não Sim Sim Sim Sim
Ptos +/ - + e - + + + + 05 Não Sim Sim Não Não
Ptos +/ - - + + - - 06 Sim Sim Não Não Não
Ptos +/ - + + - - - 07 Não Não Sim Não Não
Ptos +/ - - - + - - 08 Sim Não Não Não Não
Ptos +/ - + - - - -
Com este resultado concluímos nossa análise e identificamos os principais
pontos a serem trabalhados para melhorar a funcionalidade e aparência do site da
escola, de modo a proporcionar maior clareza de conteúdo e melhor entendimento
das tarefas a serem executadas pelos usuários, o que retoma a idéia principal de
nossos estudos acerca do design centrado no usuário.
Em síntese, os requisitos para a realização do re-design estariam
concentrados na correção e eventual melhoramento dos pontos negativos
apontados em nossa Tabela V, os quais, por ordem de prioridade, demandariam as
seguintes ações para o êxito de nosso projeto:
• Solucionar o problema das informações ambíguas, verificadas nos
campos de e-mail e menu secundário, de modo a simplificar e melhorar o diálogo;
• Padronizar a apresentação do conteúdo e abertura das seções, bem
como eliminar seções inacabadas e incoerentes para agregar maior consistência ao
site da escola;
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 80
• Disponibilizar recursos de atalhos e implementar mapa do site para
viabilizar acesso rápido e direto aos conteúdos de maior interesse dos usuários mais
experientes;
• Corrigir possíveis falhas observadas na navegação a fim de
proporcionar maior segurança aos usuários identificando de forma simples e clara a
saída ou retorno de seções visitadas;
• Propor melhorias na prevenção de erros adotando mensagens padrão
no preenchimento de formulários de forma a evitar esquecimentos de informações
importantes por parte dos usuários;
• Melhorar a forma de apresentação do feedback aos usuários propondo
soluções em design estético e funcional.
3.5. GERAÇÃO DE ALTERNATIVAS
Para e realização desta etapa, antes é preciso resgatar alguns conceitos já
estudados sobre arquitetura da informação, pois mantendo nossa linha de estudo
focada no modelo de GARRET (2003), observamos que ainda é necessário
definirmos a estrutura e o esqueleto antes de partirmos para o desenvolvimento da
superfície.
Portanto, lançando mão dos elementos representacionais existentes no
estudo da arquitetura da informação, podemos representar a estrutura atual do site
conforme segue:
Como podemos observar, a estrutura atual é do tipo seqüencial e apresenta
um elemento comum a todos as seções principais – menu secundário – o qual está
sempre visível e acessível aos usuários, proporcionando uma navegação mais direta
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 81
porém nem sempre muito eficaz, pois como vimos anteriormente, alguns links do
menu secundário apresentam problemas que devem ser resolvidos adequando-se a
atual estrutura.
Ainda no desenvolvimento da AI, para a categorização do conteúdo,
considerando ambos o entendimento dos usuários como o conhecimento dos
envolvidos no re-design do site, podemos proporcionar uma melhor classificação e
relacionamento do conteúdo subdividindo-o da seguinte forma:
� Home
o Equipe
o Aniversariantes do mês
� Escola
� Cursos
o Cursos Brindes
� Fale Conosco
o Localização
� Fotos e Eventos
� Aluno On-line
o Calendário acadêmico
o E-mail
o Oferta de empregos
o Assessoria e encaminhamento
o Acesso FTP
o Salas Virtuais*
* A seção das Salas Virtuais seria uma sugestão para implementação de
salas de bate-papo onde os alunos pudessem trocar idéias sobre o conteúdo das
aulas e desta forma aprimorar seus conhecimentos através do compartilhamento de
informações.
Com a disponibilização do conteúdo na forma acima apresentada estamos
otimizando a navegação e resolvendo os problemas de ambigüidade,
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 82
proporcionando também maior simplicidade e clareza no diálogo, uma vez que
atualmente não existe distinção entre os serviços 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 diagramação geral
voltada para o layout em duas colunas, conforme podemos observar logo abaixo
(Figura 59).
FIGURA 59 – DIAGRAMAÇÃO EM DUAS COLUNAS
De acordo com os estudos realizados, a intenção da escola é manter a
estrutura principal do site atual apenas conferindo-lhe melhorias na apresentação e
funcionalidades, fato que também pôde ser verificado quando do levantamento das
necessidades dos usuários, uma vez que a estrutura atual é de fácil entendimento e
memorização, o que vai de encontro aos fundamentos de usabilidade abordados
nesse projeto.
Desse modo, buscamos manter as seções principais e a estrutura linear,
porém não necessariamente na forma horizontal, mas mantendo sempre uma
navegação intuitiva e de fácil entendimento.
Para conferir um aspecto visual mais atrativo e uma melhor disposição do
conteúdo, sugerimos algumas mudanças no esqueleto do site propondo as
alternativas de diagramação abaixo:
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 83
1) Destaque na área do logotipo e manutenção do layout em duas colunas
2) Mudança de posicionamento do menu principal para o topo da página,
destaque para a área do logotipo e manutenção do layout em duas
colunas.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 84
3) Disposição do menu principal e secundário agregados na lateral esquerda,
destaque do logotipo na área superior e layout em três colunas.
4) Apresentação do menu principal e secundário em paralelo, ênfase do
logotipo na área superior e layout em uma coluna.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 85
5) Apresentação do menu principal e secundário em paralelo, ênfase do
logotipo na área superior e layout em duas colunas.
6) Deslocamento do menu principal para o canto superior esquerdo, criação
de uma área de destaque no topo da página para o logotipo, layout em
duas colunas e disponibilização de menu alternativo no canto inferior
direito.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 86
7) Disponibilização do menu principal e secundário agregados no canto
superior direito, criação de uma área de destaque no canto superior
esquerdo para o logotipo e layout em três colunas.
Todas as alternativas apresentadas garantem a navegação facilitada e
mantém os aspectos de usabilidade já comentados anteriormente neste trabalho.
Além disso, as diagramações sugeridas vão de encontro aos preceitos de criação de
sites defendidos pelos autores CULLEN (2005) e DAMASCENO (2003), os quais
destacam a importância de mantermos a simplicidade, clareza e concisão quando na
criação de páginas de um site.
Segundo a autora DAMASCENO (2003), a diagramação contribui para
harmonizar o visual de um site e deve, portanto, seguir os princípios de atração e
equilíbrio, aliando usabilidade e disposição adequada de quadros de conteúdo.
“... a diagramação e o enquadramento correto dos itens de uma página da
Web influenciam diretamente na legibilidade do conteúdo.” (DAMASCENO, 2003, p.
109)
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 87
3.6. SELEÇÃO E DETALHAMENTO DA ALTERNATIVA ESCOLHIDA
Antes de seguirmos para o último nível do modelo proposto por GARRET
(2003), Design Visual ou Superfície, devemos definir o esqueleto a ser considerado
para aplicação no site e, para tanto, buscamos alguns conceitos apontados pelos
autores CULLEN (2005) e DAMASCENO (2003) no que diz respeito à composição e
disposição dos elementos estruturais em uma página web.
De acordo com DAMASCENO (2003) a parte superior ou “topo” de uma
página web é a área de identificação do site, portanto é nessa região que deve ficar
o logotipo da empresa, fato que pudemos constatar nos sites dos concorrentes da
escola (Figura 60). Com relação a esse ponto, todas as alternativas sugeridas no
tópico anterior, com exceção da alternativa número 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
padrão para posicionamento do nome, logotipo ou identificação de uma empresa,
sendo assim, é para este local que os usuários olham quando buscam a
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 88
identificação da página. Além disso, o canto superior esquerdo remete à orientação
de leitura ocidental e, conseqüentemente, é o primeiro local visualizado pelo
visitante do site. Por esses motivos, DAMASCENO (2003) ressalta que qualquer
posicionamento do logotipo diferente daquele considerado padrão deve ser
cuidadosamente estudado para evitar frustrações aos usuários. Levando isso em
consideração, buscaremos manter o logotipo da escola nessa região, ficando,
portanto, descartada a alternativa de número dois.
Outra área de grande relevância dentro de um site é a região superior do
corpo da página, logo abaixo do topo. Essa área é denominada área de destaque e
é a mais importante do site, uma vez que é para ela que os usuários mais freqüentes
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 espaço tão importante, tentaremos
manter nessa região aquelas informações mais relevantes aos usuários freqüentes,
tais como atalho para e-mail, acesso FTP e mapa do site. Por ser uma área muito
visível, seria interessante trabalharmos sua aparência de forma a causarmos um
forte impacto visual, assim estaríamos reforçando a identidade do site.
No entanto, para comportar todos os elementos citados acima e ainda causar
o impacto desejável, é necessário que a área de destaque ocupe um espaço
considerável na página e, observando as alternativas sugeridas, percebemos que as
opções que nos melhor atenderiam seriam as de número seis e sete (Figura 61).
FIGURA 61 – ALTERNATIVAS SEIS E SETE
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 89
Além das considerações referentes às áreas, também devemos levar em
conta alguns princípios básicos na hora de projetar um site: a harmonia, o equilíbrio
entre elementos, a atração de elementos e a simplicidade da composição (CULLEN,
2005).
A harmonia remete à coerência visual e está diretamente ligada a composição
geral do site (cores, tamanhos de imagens, posicionamentos, etc) e é fundamental
para a identificação da qualidade de um projeto gráfico.
No que diz respeito ao equilíbrio entre elementos, devemos ter em mente as
questões relativas à proporcionalidade entre texto e imagens, combinação de cores,
hierarquização de elementos e a facilitação da identificação de todos os
componentes do site aos usuários.
Quanto à atração de elementos, está diretamente relacionada à organização
de um layout, onde os elementos correspondentes entre si devem permanecer
próximos uns dos outros, promovendo dessa forma uma organização facilitada das
informações visuais de uma composição (CULLEN, 2005). Quando projetamos um
layout de site esse princípio deve ser empregado de modo a se evitar possíveis
situações onde os visitantes são forçados a tentar organizar mentalmente as
informações, pois isso os faria abandonar rapidamente o site visitado.
Já no quesito da simplicidade da composição, cabe lembrarmos a
necessidade de se manter a objetividade, clareza e concisão na elaboração do
layout. Um design simples, sem um visual excessivamente rebuscado é facilmente
compreendido, identificado, assimilado e recordado pelos usuários e, além disso,
evita o desvio de atenção daquilo que realmente importa no site: transmitir
informações 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 utilização do esqueleto de número seis (Figura 62), pois o mesmo apresenta
áreas bem delimitadas, alinhadas e de fácil aproveitamento para encaixe do
conteúdo já existente no site da escola, sem deixar de fora a questão da usabilidade,
pois o mesmo prevê uma área para o menu alternativo que será muito útil quando os
usuários estiverem utilizando a barra de rolagem para leitura do conteúdo da página,
ocasião na qual não poderá mais ser visualizado o menu principal. Além disso, o
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 90
posicionamento do menu principal logo abaixo da área de identificação facilita a
navegação, pois será uma referência direta quando do primeiro acesso ao site.
FIGURA 62 – ALTERNATIVA ESCOLHIDA
Já com o esqueleto definido, podemos então seguir para a última etapa do
modelo de GARRET (2003): o Design Visual ou Superfície. Nessa fase, como
apontamos no tópico de metodologias, o grau de liberdade para se trabalhar com a
criação fica praticamente ilimitado, pois trabalhando o design em última instância 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 usuário, buscando dessa forma corrigir todas as falhas apontadas no
site atual da escola, concebendo então um design visual coerente, conciso, claro e
funcional.
Levando em consideração todos os fatos apontados acima, chegamos ao
seguinte resultado para o novo site:
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 91
No tópico seguinte abordaremos mais detalhadamente cada seção do site
gerado apontando, inclusive, as falhas corrigidas em cada seção e os respectivos
melhoramentos aplicados.
3.7. AVALIAÇÃO DE USABILIDADE E VALIDAÇÃO DO SITE GERADO
Nessa fase de avaliação é importante recordarmos os apontamentos feitos
com relação à lista de heurísticas 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 questão. Portanto, para facilitar a
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 92
visualização e análise do resultado, destacamos abaixo de forma comparativa os
pontos alterados em cada seção de acordo com a heurística avaliada:
1) Apontamento da Avaliação Heurística – Ambigüidade de informações
Grau de Severidade atribuído – “4”
Solução – Na reestruturação o menu secundário deixou de ser um elemento
comum a todas as seções e seus links passaram a integrar seções específicas
relacionadas a cada um deles, portanto houve simplificação e melhoria do diálogo, o
que contribui para uma navegação mais segura e coerente.
Antes – Informações ambíguas, excessivas e confusas.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 93
Depois – Simplificação da informação com criação de atalho direto para e-
mail ou através da seção exclusiva do aluno e clareza no diálogo quando se tratando
de assuntos diferentes.
2) Apontamento da Avaliação Heurística – Falta de consistência
Grau de Severidade atribuído – “4”
Solução – A padronização na abertura das seções com a exibição de todo o
conteúdo dentro do próprio corpo da página e a eliminação dos links para seções
inacabadas conferem maior consistência ao site da escola e evitam, portanto,
descontentamento por parte dos usuários.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 94
Antes – Inconsistência na abertura de seções (pop-up) e inexistência de
conteúdo para alguns links.
Depois – Maior consistência na abertura das seções e supressão dos links
para seções inacabadas.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 95
3) Apontamento da Avaliação Heurística – Feedback inadequado
Grau de Severidade atribuído – “2”
Solução – A incorporação de feedback constante nas áreas de login e
formulários contribui para a satisfação dos usuários e vai de encontro às
prerrogativas da usabilidade.
Antes – Carência de feedback e retorno inadequado do ponto de vista
estético e visual.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 96
Depois – Feedback constante e esteticamente adequado e coerente.
4) Apontamento da Avaliação Heurística – Problemas na saída do sistema
Grau de Severidade atribuído – “3”
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 97
Solução – Como observado nos estudos referentes a este caso, pelo fato da
navegação ser muito direta, ou seja, onde podemos visualizar constantemente os
links para todas as seções do site, não existiram muitas correções a serem feitas. No
entanto, para aquelas subseções onde o usuário possa sentir a necessidade de
retornar a uma tela anterior, criamos um botão para auxiliar nessa tarefa, o que
contribui para uma experiência mais agradável e intuitiva para os usuários.
Antes – Inexistência de caminhos de retorno nas subseções.
Depois – Todas as seções e subseções com caminhos de retorno bem
definidos.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 98
5) Apontamento da Avaliação Heurística – Falta de prevenção à
ocorrência de erros
Grau de Severidade atribuído – “3”
Solução – A criação de um retorno eficiente quando na tentativa de envio de
formulários com campos pendentes de preenchimento, confere maior credibilidade
ao site e passa segurança aos usuários.
Antes – Permissão de envio de formulários com dados insuficientes ou em
branco.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 99
Depois – Quando na tentativa de envio de formulários o sistema acusa os
campos faltantes.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 100
6) Apontamento da Avaliação Heurística – Falta de atalhos e mapa do site
Grau de Severidade atribuído – “4”
Solução – A disponibilização de atalhos para os usuários freqüentes contribui
para a satisfação dos mesmos e enriquece a interface em termos de usabilidade
viabilizando um acesso mais rápido e direto aos conteúdos de maior interesse dos
usuários mais experientes. Além disso, a existência de um mapa do site ajuda o
usuário a visualizar melhor todo o conteúdo do site, auxiliando-o quando na busca
por informações de seu interesse.
Antes – Somente atalho para e-mail.
Depois – Atalhos para as seções de maior interesse dos usuários freqüentes
(alunos) e disponibilização de mapa do site para referência direta ao conteúdo do
site.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 101
Além de todas as melhorias apontadas acima, baseados nos conceitos de e-
Learning, sugerimos a inclusão de uma seção de Salas Virtuais (Figura 63). Nessa
seção existem salas de bate-papo onde os alunos podem conversar uns com os
outros e trocar informações sobre o conteúdo das aulas, aprimorando dessa forma
seus conhecimentos através do compartilhamento de informações, conforme sugere
SHNEIDERMAN (2002) em seus estudos.
A criação dessa seção também vai de encontro às vantagens exaltadas por
ALAVI & LEIDNER (2001) quanto ao uso de um sistema de gestão do
conhecimento, pois amplia o aprendizado dos usuários, gera uma memória on-line e
aumenta o banco de conhecimento da instituição.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 102
FIGURA 63 – SEÇÃO SALAS VIRTUAIS
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 103
4. CONCLUSÃO
Este projeto buscou, entre outras coisas, a melhoria do visual e da
funcionalidade de um site já existente através do modelo de concepção sugerido por
GARRET (2003). Assim como ele, diversos outros autores defendem que o design
centrado na experiência do usuário 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 vínculo com aqueles já conquistados.
Portanto, ao seguir sua linha de estudos, obtivemos resultados muito satisfatórios
quanto à estética 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 negócios entre as empresas e
seus clientes e a decisão de compra desses clientes, por isso o site de uma
empresa deve ser conciso e coerente, deve ser tratado de forma a passar segurança
e clareza de conteúdo a seus visitantes e foi exatamente isso que conseguimos com
a finalização deste projeto. Um design bem estruturado e fundamentado nas
necessidades da empresa e dos usuários converge para a criação de um layout
mais atrativo e funcional para ambas as partes envolvidas e, no caso da escola
Microcamp, com a sugestão das salas virtuais, auxilia ainda na ampliação do
conhecimento de seus alunos e professores.
Fazendo avaliações com base em heurísticas identificamos os problemas
mais graves existentes no site da escola e pudemos sugerir melhorias viáveis para a
correção dos problemas de interface, navegabilidade, usabilidade e interatividade.
Com a criação de ferramentas e seções específicas para os usuários
pudemos adaptar melhor a estrutura do site à proposta de ensino da escola,
proporcionando também uma interface mais usual e atraente, inclusive com a
melhoria da divulgação dos cursos ofertados.
De um modo geral, a nova estrutura e o layout facilitam o gerenciamento de
conteúdo e conferem melhorias na apresentação gráfica do site.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 104
Para novos estudos fica a sugestão de aprofundamento na área de e-
Learning, a qual parece ter um futuro promissor na questão do ensino à distância e
no aprimoramento de seus recursos tecnológicos, tais como os objetos
educacionais, que favorecem a educação tornando-a mais eficiente, interativa e
acessível a todas as classes sociais.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 105
REFERÊNCIAS
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 Prática. Florianópolis: 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. Comércio & Segurança na Web . São Paulo: Market Books
Brasil, 1999.
10. GARRET, J. J. (2002). Um vocabulário visual para AI e Design de Interação . Disponível 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 . São 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 . Tradução de:
Marcos Vieira. Rio de Janeiro: Elsevier, 2004.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 106
15. KELLEY, T. A Arte da Inovação . 2ª Ed. São Paulo: Futura, 2002. 16. LEONEL, L. Internet como Ferramenta de Marketing . Cornélio Procópio,
2005. 47 f. Monografia (especialização em Marketing e Gestão de Pessoas) – Setor de Filosofia, Ciências e Letras, Faculdade Estadual de Cornélio Procópio.
17. LUNELLI, A. Projeto de Interfaces Homem-Computador na Internet .
Brasília, 1998. 113 f. Monografia (Pós Graduação Latu sensu) – Departamento de Engenharia de Computação e Sistemas Digitais, Escola Politécnica da Universidade de São Paulo.
18. LYNCH, P; HORTON, S. (2005). Web style guide, 2nd Edition . Disponível 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 interfac e design . New Jersey: Prentice Hall, 1992.
21. MICROCAMP Internacional. Disponível em: <http://www.microcamp.com.br> Acesso em: 03 mar. 2007.
22. NIEDERST, J. Aprenda web design . Tradução de: Rejane Freitas. Rio de Janeiro: Ciência Moderna, 2002.
23. NIELSEN, J. Designing web usability: the practice of simplicity .
Indianápolis: New Riders, 2000. 24. ROCHA, A; CHRISTENSEN, C. Marketing : Teoria e Prática no Brasil. São
Paulo: Atlas, 1995. 25. ROCHA, C. A. da. Desenvolvendo web sites dinâmicos: PHP, ASP e JSP.
Rio de Janeiro: Campus, 2003. 26. ROSENFELD, L; MORVILLE, P. Information architecture for the World
Wide Web . Sebastopol, CA: O’Reilly, 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.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 107
30. SHNEIDERMAN, B. Leonardo´s Laptop: Human Needs and the New Computing Technologies. Cambridge: The MIT Press, 2002.
31. WEB page design for designers. Disponível em: <http://www.wpdfd.com>
Acesso em: 05 mar. 2007. 32. WODTKE, Christina. Information Architecture: Blueprints for the Web.
Berkley: New Riders, 2002.
SOARES, M. - TCC 2007 – Re-design do Website da escola Microcamp Internacional 108
ANEXOS