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.3. AVALIAÇÃO COM BASE EM HEURÍSTICAS ........................................................... 49



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


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


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 à


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.


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


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


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:


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.


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


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


FIGURA 3 – ANIMAÇÃO DE EXPERIMENTO HIDRÁULICO

FIGURA 4 – SIMULADOR DE EXPERIMENTO HIDRÁULICO


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.


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


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.


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


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


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


FIGURA 8 - DIAGRAMA ORIGINAL DE GARRET

FIGURA 9 - MODELO SIMPLIFICADO


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


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


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


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.


FIGURA 11 – REPRESENTAÇÃO ESTRUTURAL


FIGURA 12 – REPRESENTAÇÕES DE SETAS


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


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


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


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.


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


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:


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.


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.


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.


FIGURA 18 - INTERNET EXPLORER 6.0

FIGURA 19 - MOZILLA FIREFOX


FIGURA 20 - LYNX

FIGURA 21 - FERRAMENTAS DE VALIDAÇÃO E DESENVOLVIMENTO (MOZILLA)


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.


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.


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.


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,


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.


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.


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.


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


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




FREQÜÊNCIA DE ACESSO




NAVEGABILIDADE




GRAU DE RELEVÂNCIA DE CONTEÚDO



NECESSIDADES DO USUÁRIO


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.


Para o levantamento das necessidades da escola foi elaborado um

questionário (Anexo 02) contendo perguntas chaves para identificarmos o principal


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.


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


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.


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,


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


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.


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.



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


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


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


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


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.


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


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


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


FIGURA 33 – MICROLINS

FIGURA 34 – CEDASPY


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:


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


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


FIGURA 40 – NOTAÇÕES DIFERENTES PARA O MESMO SIGNIFICADO

FIGURA 41 – FALSOS LINKS


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.


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.


FIGURA 44 – FALTA DE PADRÃO E INCONSISTÊNCIA

FIGURA 45 – MUDANÇA NO MENU DE NAVEGAÇÃO


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.


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


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


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.


FIGURA 52 – PREVENÇÃO DE ERROS


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


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.


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.


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.


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


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.


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;


• 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


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,


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:


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.


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.


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.


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)


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


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


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


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:


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


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.


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


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.


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.


3) Apontamento da Avaliação Heurística – Feedback inadequado


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.


Depois – Feedback constante e esteticamente adequado e coerente.

4) Apontamento da Avaliação Heurística – Problemas na saída do sistema



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.


5) Apontamento da Avaliação Heurística – Falta de prevenção à

ocorrência de erros


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.


Depois – Quando na tentativa de envio de formulários o sistema acusa os

campos faltantes.


6) Apontamento da Avaliação Heurística – Falta de atalhos e mapa do site


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.


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.


FIGURA 63 – SEÇÃO SALAS VIRTUAIS


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.


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.


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.


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.


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.


ANEXOS

tcc entrega final

Documents