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