INSTITUTO INFNET

ESCOLA DE COMUNICAO DIGITAL

PS-GRADUAO MDD EM DESIGN DIGITAL

REDESIGN DO WEBSITE DO PROJETO SEEDUC CECIERJ: UMA

ABORDAGEM BASEADA NA EXPERINCIA DO USURIO

GUILHERME VINCIUS MENDES VIEIRA

2016

REDESIGN DO WEBSITE DO PROJETO SEEDUC CECIERJ:

UMA ABORDAGEM BASEADA NA EXPERINCIA DO USURIO

Guilherme Vincius Mendes Vieira

Trabalho

de

apresentado

Concluso
ao

curso

de
de

Curso
Ps

Graduao MDD em Design Digital, da

Escola de Comunicao Digital do
Instituto INFNET.

Orientador
Almir Mirabeau

Rio de Janeiro
01/2016

REDESIGN DO WEBSITE DO PROJETO SEEDUC CECIERJ: UMA

ABORDAGEM BASEADA NA EXPERINCIA DO USURIO

Guilherme Vincius Mendes Vieira

Monografia submetida ao curso de Ps Graduao em MDD em Design Digital,

da Escola de Comunicao Digital do Instituto INFNET, como parte dos requisitos
necessrios obteno do ttulo de especialista em Design Digital (Web Designer).

Aprovado por:

____________________________________
Almir Mirabeau
Coordenador
.

Rio de Janeiro
Janeiro/2016
2

RESUMO

REDESIGN DO WEBSITE DO PROJETO SEEDUC CECIERJ: UMA

ABORDAGEM BASEADA NA EXPERINCIA DO USURIO

Guilherme Vincius Mendes Vieira

O site do projeto SEEDUC destinado aos professores e tutores ligados aos

projetos da rede estadual de ensino e divulga informaes desses projetos. O antigo
site do projeto SEEDUC possua vrios problemas visuais de informao, de
organizao interna de arquivos e pastas, estruturao e lgica do cdigo interno e
design, fazendo-se necessrio uma reformulao completa do site.
Este trabalho visa apresentar a aplicao projeto de redesign, pensado na
experincia do usurio final, adotado no website do Projeto SEEDUC, suas etapas e
dificuldades encontradas ao longo do desenvolvimento.

Palavras chave: Redesign, Design Centrado no Usurio, Ensino a Distncia, EAD

Rio de Janeiro
Setembro/2015
3

SUMRIO
1

Introduo ........................................................................................................... 8

1.1

Objetivo .......................................................................................................... 9

1.2

Metodologia .................................................................................................. 10

1.2.1

Plano da Estratgia .................................................................................. 11

1.2.2

Plano do Escopo ...................................................................................... 11

1.2.3

Plano da Estrutura .................................................................................... 11

1.2.4

Plano do Esqueleto .................................................................................. 11

1.2.5

Plano da Superfcie .................................................................................. 11

2
2.1

O Projeto SEEDUC e seu website .................................................................... 12

Subprojetos .................................................................................................. 12

2.1.1

EJA ........................................................................................................... 12

2.1.2

Formao Continuada .............................................................................. 12

2.1.3

Reforo Escolar ........................................................................................ 13

2.1.4

Especializao.......................................................................................... 13

Avaliao do antigo website ............................................................................. 14

3.1

Layout das pginas web ............................................................................... 14

3.2

Navegao e contedo ................................................................................. 17

3.3

Problemas e falhas observadas ................................................................... 18

Anlise de Similares ......................................................................................... 22

Desenvolvimento .............................................................................................. 24

5.1

Plano da Estratgia ...................................................................................... 24

5.2

Plano do Escopo........................................................................................... 26

5.2.1
5.3
5.3.1

Requisitos ................................................................................................. 26
Plano da Estrutura ........................................................................................ 27
Diagrama da arquitetura ........................................................................... 27
4

5.4

Plano do Esqueleto....................................................................................... 28

5.4.1

Design de navegao ............................................................................... 29

5.4.2

Design de informao............................................................................... 30

5.4.3

Wireframe ................................................................................................. 30

5.5

Plano da Superfcie ...................................................................................... 32

5.5.1

Paleta de cores......................................................................................... 33

5.5.2

Tipografia ................................................................................................. 34

5.5.3

Construo das pginas ........................................................................... 34

5.5.4

Design responsivo .................................................................................... 39

5.5.5

Testes e correo de erros ....................................................................... 40

5.5.6

Teste de usabilidade ................................................................................ 42

Concluso ......................................................................................................... 46

REFERNCIAS ......................................................................................................... 47
Anexo A: Teste de usabilidade do website do Projeto SEEDUC............................... 49

LISTA DE FIGURAS
Figura 1: Layout da pgina web principal do antigo website........................................9
Figura 2: Planos de Desenvolvimento........................................................................11
Figura 3: Layout principal: pgina web inicial do antigo website................................14
Figura 4: Layout principal: pgina web de contato do antigo website........................15
Figura 5: Layout secundrio: pgina web do subprojeto EJA (Antigo NOVA EJA)..15
Figura 6: Layout secundrio: pgina web do subprojeto Formao Continuada.....16
Figura 7: Layout secundrio: pgina web do subprojeto Reforo Escolar.................16
Figura 8: Layout secundrio: pgina web do subprojeto Especializao..................17
Figura 9: Layout secundrio: pgina web do subprojeto Currculo Mnimo
(descontinuado).........................................................................................................17
Figura 10: Estrutura de pastas e arquivos do antigo website....................................19
Figura 11: Layout secundrio: pgina web do subprojeto EJA sem sua identidade
visual..........................................................................................................................20
Figura 12: Exemplo de estrutura do cdigo de programao....................................21
Figura 13: Jogos Olmpicos e Paralmpicos - Olimpadas Rio 2016..........................22
Figura 14: Globo.com.................................................................................................23
Figura 15: Diagrama da arquitetura do website do Projeto SEEDUC........................28
Figura 16: Navegao global do website do Projeto SEEDUC..................................29
Figura 17: Navegao local do website do Projeto SEEDUC....................................30
Figura 18: Wireframe do layout principal do website do Projeto SEEDUC................31
Figura 19: Wireframe do layout secundrio do website do Projeto SEEDUC...........32
Figura 20: Paleta de cores do website do Projeto SEEDUC......................................34
Figura 21: Modelo utilizado para o desenvolvimento.................................................35
Figura 22: Primeiro rascunho da pgina web inicial do Projeto SEEDUC................35
Figura 23: Layout da pgina web principal do redesign do Projeto SEEDUC..........36
6

Figura 24: Desenvolvimento.......................................................................................36

Figura 25: Design visual da pgina web do subprojeto EJA......................................37
Figura 26: Design visual da pgina web do subprojeto Formao Continuada.......37
Figura 27: Design visual da pgina web do subprojeto Reforo Escolar...................38
Figura 28: Design visual da pgina web do subprojeto Especializao.....................38
Figura 29: Design responsivo do website para resolues entre 991px e 768px de
largura........................................................................................................................39
Figura 30: Design responsivo do website para resoluo inferior a 612px de
largura........................................................................................................................40
Figura 31: Design final da pgina web inicial do Projeto SEEDUC............................41
Figura 32: Design final da pgina web de contato do Projeto SEEDUC....................41

Introduo
O Projeto SEEDUC nasceu a partir de uma parceria entre a SEEDUC

Secretaria de Estado de Educao do Rio de Janeiro e a Diretoria de Extenso da

Fundao CECIERJ Centro de Cincias e Educao Superior a Distncia do
Estado do Rio de Janeiro.
O CECIERJ um rgo vinculado SECTI RJ Secretaria de Estado de
Cincia, Tecnologia e Inovao do Rio de Janeiro o qual desenvolve projetos nas
reas de: Graduao a Distncia; Divulgao Cientfica; Pr-Vestibular Social;
Extenso e CEJA (2015a). Por organizar projetos atravs do Ensino a Distncia
(EaD)

faz

uso

de

Tecnologias

da

Informao

Comunicao

para

desenvolvimento destes, dentre eles esto as salas de aula virtual (plataformas de

EaD / Moodle) e websites de seus projetos.
A misso da Diretoria de Extenso do CECIERJ :
a difuso de conhecimentos filosficos, artsticos, literrios, cientficos e
administrativos. O objetivo oferecer cursos de capacitao, na perspectiva
da formao continuada, buscando o aperfeioamento individual e coletivo
de docentes, profissionais que cursam e cursaram licenciatura e para
aqueles que atuam a servio do bem pblico. (FUNDAO CECIERJ,
2015a)

O website do Projeto SEEDUC tem a finalidade de que reunir e divulgar

informaes aos usurios de quatro subprojetos bem como disponibilizar acesso as
salas de aula virtual para cada um destes subprojetos.
O antigo website (Figura 1) do projeto apresentava vrios problemas: a)
organizao de arquivos e pastas no servidor; b) estrutura e lgica de programao;
c) manuteno do website; d) organizao das informaes para o usurio; e e)
programao visual da pgina web. Fazendo-se necessrio uma reformulao
completa deste, pois como descreve Garret (2011) se o website voltado
principalmente para disponibilizao de informao, seu principal objetivo deve ser
realizar isso de maneira mais eficaz, a fim de poupar o tempo do usurio e fornecer
o que ele busca da maneira mais rpida e eficiente possvel.

Figura 1: Layout da pgina web principal do antigo website.

Fonte: FUNDAO CECIERJ (2012)

Vide o exposto, tal trabalho visa apresentar a nova formulao do website do

Projeto SEEDUC, a qual levou em considerao conceitos de User Centered
Design (Design Centrado no Usurio) em seu desenvolvimento e que atualmente
utilizado para o Projeto SEEDUC.
1.1

Objetivo
A desorganizao de arquivos e pastas no servidor do antigo website,

juntamente com a falta de uma boa estrutura e lgica de programao das pginas
acarretava na ineficiente e custosa manuteno das pginas do website. Essa
manuteno precria, por sua vez, gerava erros e problemas constantes na
programao visual das pginas web.
Devido aos erros apresentados, o website possua problemas de usabilidade,
as informaes dispostas no website no eram realizadas de maneira clara o que

10

ocasionava o recebimento de e-mails e telefonemas com reclamaes dos usurios.

Em suma, os usurios no conseguiam encontrar as informaes ou ficavam com
dvidas acerca delas. Tal como descreve Garret (2011, p. 16, traduo nossa)
produtos de tecnologia que no funcionam da maneira que os usurios esperam os
fazem sentir estpidos, mesmo que consigam realizar a tarefa posteriormente, j
Wrinckler e Pimenta (2002, p.24) corroboram quando dizem que uma pgina Web
bem projetada se a) revela claramente a estrutura da informao que ela contm; e
b) oferece pontos de acesso facilmente reconhecveis para esta informao. Esses
foram as principais motivaes para o redesign do website do Projeto SEEDUC por
demanda da Diretoria da Extenso.
Tal trabalho visa apresentar o desenvolvimento e resultado do redesign do
website para o Projeto SEEDUC, ou seja, a nova concepo visando corrigir os
problemas de interao dos usurios com o website, levando se em considerao os
conceitos de design centrado no usurio.
Qualquer esforo na direo da melhoria da experincia do usurio visa
melhorar a eficincia, basicamente, ajudando os usurios a trabalhar de
forma mais rpida e a cometer menos erros. [...] A prtica de se criar uma
atraente e eficiente experincia do usurio chamado de design centrado
no usurio e ela bem simples: Levar em conta o usurio a cada passo de
desenvolvimento do seu produto. (GARRET 2011, p.15 e 17, traduo
nossa)

1.2

Metodologia
No desenvolvimento deste trabalho levamos em conta a metodologia proposta

por Garret para a construo de um projeto de website usando os conceitos do

design centrado no usurio.
Este modelo prope a elaborao de cinco planos que so executados de
forma encadeada, porm para um plano de desenvolvimento iniciar no
necessrio que plano anterior esteja totalmente finalizado, alm de que esses planos
tambm no necessariamente executados apenas uma vez, pois ao realizar parte de
um determinado plano pode ser necessrio revisar e refazer partes do plano anterior
ou posterior (Figura 2).

11

Figura 2: Planos de Desenvolvimento

Fonte: GARRET (2011, p. 24)

1.2.1 Plano da Estratgia

O primeiro plano identifica o usurio alvo do website, o objetivo destes usurios
ao entrar no website e o que eles esperam dele.
1.2.2 Plano do Escopo
O segundo plano agrupa as funcionalidades atendidas e caractersticas
requeridas do website definindo assim o escopo que atende ao Plano de Estratgia.
1.2.3 Plano da Estrutura
O terceiro plano define a estrutura do website atravs do design de interao:
as possveis direes, categorias e elementos de navegao entre as pginas web
feita pelos usurios e a arquitetura da informao: o contedo a ser disponibilizado
aos usurios no website. Essa estrutura reflete assim o Plano de Escopo.
1.2.4 Plano do Esqueleto
O quarto plano apresenta o esqueleto dos elementos do website: o arranjo e
disposio dos botes, fotos, controles e blocos de texto definidos no Plano da
Estrutura.
1.2.5 Plano da Superfcie
O quinto plano contm as pginas web, imagens e texto arquitetados no Plano
do Esqueleto. Estas imagens podem ser somente para ilustrar algo ou fornecer
aes podem estar ligadas a estas imagens e textos.

12

O Projeto SEEDUC e seu website

O Projeto SEEDUC e seu website so destinados aos tutores e professores da

rede pblica de ensino que cursam ou trabalham em um ou mais dos seus

subprojetos. Ele tem a funo de divulgar informaes relacionadas a eles: avisos,
resolues, notas de esclarecimento, acesso a materiais e manuais, editais,
resultados de selees e acesso para as salas de aula virtual.
2.1

Subprojetos
Atualmente, o projeto abrange quatro subprojetos de EaD: EJA Educao de

Jovens e Adultos, Formao Continuada, Reforo Escolar e Especializao. Seu

antigo website ainda contemplava um quinto subprojeto, o de Currculo Mnimo, o
qual no implementado no novo website, pois foi descontinuado.
2.1.1 EJA
No antigo website era chamado de Nova EJA e durante o desenvolvimento
houve a mudana de nomenclatura para EJA. Este subprojeto:
[...] visa permitir que jovens e adultos que por algum motivo estavam
privados do saber bsico concluam em menor tempo essa etapa de ensino,
com resultados de aprendizagem e qualidade adequados para a
continuidade dos estudos. A proposta metodolgica procura valorizar as
vivncias de cada aluno; a experincia de vida adquirida na educao
extraescolar o ponto de partida e referencial permanente. Para isso,
preparado material didtico especfico e os professores participam de aes
de Formao Continuada com certificao. (FUNDAO CECIERJ, 2015b)

2.1.2 Formao Continuada

Tambm chamado de Formao Regular, este subprojeto oferece cursos que
buscam preencher lacunas de conhecimento dos professores da rede estadual do
Rio de janeiro e os capacitam para
a efetivao do Currculo Mnimo [no ensino mdio], a SEEDUC e a
Fundao CECIERJ, apoiadas pelas universidades do Consrcio CEDERJ,
prepararam cursos [...] para o uso desse currculo, inclusive elaborando
planos de trabalho que busquem cada vez mais a autonomia autoral.
(FUNDAO CECIERJ, 2015b)

13

2.1.3 Reforo Escolar

O subprojeto de Reforo Escolar possui trs frentes de ao articuladas que
envolvem: a produo de material didtico; [...] formao dos professores
(dinamizadores); e acompanhamento permanente da implementao do projeto
(FUNDAO CECIERJ 2015b) por meio da sala de aula virtual.
2.1.4 Especializao
O subprojeto de Especializao surge como uma complementao dos cursos
de aperfeioamento concludos dentro do subprojeto Formao Continuada.
Realizado em parceria com as universidades do consrcio CEDERJ do CECIERJ,
ele oferece disciplinas de especializao em certas reas do conhecimento.

14

Avaliao do antigo website

O antigo website do Projeto SEEDUC foi desenvolvido em 2012, aps a

formalizao a parceria entre a SEEDUC e o CECIERJ.

O projeto do website, inicialmente, foi desenvolvido utilizando a tecnologia do
gerenciador de contedo Wordpress, porm devido a falhas e problemas decorridos
em um dos sistemas de inscrio, esse website logo foi abandonado pela equipe
poca e foi desenvolvido, em um curto espao de tempo, um novo website utilizando
a tecnologia PHP.
3.1

Layout das pginas web

O antigo website do Projeto SEEDUC apresentava uma estrutura de layout

simples, composta por um layout principal (Figuras 3 e 4) e um layout secundrio

para cada subprojeto (Figuras de 5 a 9), os quais alternavam a identidade visual de
acordo com cada subprojeto como pode ser observado abaixo.

Figura 3 Layout principal: pgina web inicial do antigo website.

Fonte: FUNDAO CECIERJ (2012)

15

Figura 4 Layout principal: pgina web de contato do antigo website.

Fonte: FUNDAO CECIERJ (2012)

Figura 5 Layout secundrio: pgina web do subprojeto EJA (Antigo NOVA EJA).
Fonte: FUNDAO CECIERJ (2012)

16

Figura 6 Layout secundrio: pgina web do subprojeto Formao Continuada.

Fonte: FUNDAO CECIERJ (2012)

Figura 7 Layout secundrio: pgina web do subprojeto Reforo Escolar

Fonte: FUNDAO CECIERJ (2012)

17

Figura 8 Layout secundrio: pgina web do subprojeto Especializao

Fonte: FUNDAO CECIERJ (2012)

Figura 9 Layout secundrio: pgina web do subprojeto Currculo Mnimo (descontinuado)

Fonte: FUNDAO CECIERJ (2012)

3.2

Navegao e contedo
A navegao do usurio no website dava-se a partir da pgina web principal do

projeto, nela era possvel acessar cada subprojeto, atravs de imagens com links e o

18

nome referente a cada um, alm de um menu principal com pginas que eram
comuns a todos os projetos.
Nas pginas web de cada subprojeto eram disponibilizadas as informaes
referentes eles, tais como: editais, calendrios, resultados de selees etc. Alm de
possurem cada um, um menu prprio de navegao, contendo links para pginas
especficas de contedo caracterstico de seu subprojeto.
3.3

Problemas e falhas observadas

Segundo Winckler e Pimenta (2002) definem que a interface apresenta

problemas de usabilidade quando se um determinado usurio ou um grupo de

usurios encontra dificuldades para realizar uma tarefa com a interface.
A Diretoria da Extenso recebia e-mails e telefones de usurios que no
conseguiam realizar seu objetivo no website, o que claramente evidenciava um
problema de usabilidade. Outro problema que o website apresentava era a custosa
manuteno deste. So descritos a seguir alguns desses problemas observados.
Na avaliao desses problemas seguiremos os critrios apresentados por
Cavalcante e Brascher (2014, p. 195), que so:
Comunicabilidade, ou seja,
os conceitos abrangidos pela [sistemtica] navegacional devem ser
expressos por termos adequados e objetivos, de forma que, ao navegar
pela estrutura [..], o usurio identifique de imediato o contedo atrelado a
esses termos.

E Organizao, ou seja, contemplar os

relacionamentos semnticos entre os termos que [compe a sistemtica
navegacional]. Nesse sentido, a hierarquizao adequada das categorias
assume grande relevncia, j que esse o principal elemento responsvel
pela orientao da navegao do usurio.

A substituio do website desenvolvido utilizando Wordpress pelo antigo

website em PHP foi realizada de maneira inadequada, visto que antes do redesign
ainda encontravam-se arquivos da instalao do Wordpress na pasta raiz do
website, como se pode observar na Figura 10. Este processo inadequado causou
desorganizao generalizada entre os arquivos, alm de manter arquivos inteis online, o que ocasionava falhas de segurana.

19

Figura 10a Estrutura de pastas e arquivos do antigo website.

Fonte: Autor

Figura 10b Estrutura de pastas e arquivos do antigo website.

Fonte: Autor

A navegao apresentava caracterstica [s] em desacordo com o critrio

aplicado (CAVALCANTE & BRACHER, 2014, p. 195), tal como a identidade visual
que no se mantinha consistente: ela se alterava navegando dentro de um mesmo
layout secundrio (Figura 11); e a impossibilidade de acessar pginas web que no

20

pertencesse aquele mesmo layout, ou seja, no era possvel alternar entre os

subprojetos a menos que o usurio retornasse ao layout principal causando um
esforo desnecessrio do usurio.
Uma grande parte dos problemas relacionados interfaces Web diz
respeito a navegao, ou seja, os usurios tm dificuldade para encontrar a
informao desejada no site ou no sabem como retornar a uma pgina
anteriormente visitada. Outros problemas so ocasionados pelo uso de
recursos multimdia de maneira inadequada como, por exemplo, o uso
abusivo de muitas cores numa mesma pgina. (WINCKLER, PIMENTA,
2002, p.4)

Figura 11 Layout secundrio: pgina web do subprojeto EJA sem sua identidade visual.
Fonte: FUNDAO CECIERJ (2012)

Outro problema observado foi a ausncia de: hierarquizao visual de

informao; alm de coeso e correlao entre as informaes apresentadas, ou
seja, de uma organizao das informaes e o planejamento da maneira como os
usurios as encontraro (MOURA apud PASSOS, 2008, p 59)
A estrutura lgica da programao do cdigo em PHP do website tambm
apresentava grandes problemas (Figura 12), algumas pginas web usavam, de
forma desnecessria e ineficiente, um menu dinmico com uma programao muito
extensa, alm de demasiadamente confusa para um menu que prioritariamente
esttico. Um dos maiores problemas desse menu dinmico era utilizar o nome do

21

arquivo para montar sua estrutura, o que constantemente causava erros na interface
do website.

Figura 12 Exemplo de estrutura do cdigo de programao.

Fonte: Autor

22

Anlise de Similares
Aps a definio dos problemas presentes no antigo website do Projeto

SEEDUC, realizamos uma analise descritiva de similares. Uma analise descritiva

conforme Padovani, Spinillo, e Gomes (2009) explicam, tem o objetivo apenas da
observao das prticas adotadas sem avali-las. Eles descrevem tambm que os
objetivos gerais da anlise de similares no mbito do design de websites so:
a) identificar tendncias de soluo para os diversos elementos da interface;
b) identificar as melhores prticas nos websites concorrentes; c) identificar
deficincias recorrentes nos websites concorrentes; d) produzir uma
listagem de caractersticas desejveis para o futuro website, assim como de
aspectos desfavorveis a serem evitados. (Padovani, Spinillo, Gomes,
p.516).

Visto que o website do Projeto SEEDUC faz parte de uma instituio da esfera
publica, estudamos websites de projetos do governo estadual e municipal tais como
o website Cidade Olmpica, Jogos Olmpicos e Paralmpicos - Olimpadas Rio 2016,
Associao Ibero-Americana de Educao Superior a Distncia com o propsito de
analisar as prticas adotadas.

Figura 13 Jogos Olmpicos e Paralmpicos - Olimpadas Rio 2016.

Fonte: RIO 2016

Como o website do Projeto SEEDUC objetiva a divulgao de contedo e

informao a seus usurios, websites com essa finalidade tambm foram
analisados, como por exemplo, O Globo, Globo.com entre outros.

23

Figura 14 Globo.com
Fonte: GLOBO.COM

24

Desenvolvimento
O desenvolvimento do redesign do Projeto SEEDUC foi executado atravs dos

planos propostos por Garret, conceitos do design centrado no usurio e de

usabilidade. Alguns dos planos de desenvolvimento foram executados mais de uma
iterao quando necessrio, sendo revisados e postos em prtica novamente, em
especial os planos de estrutura, esqueleto e superfcie.
Devido ao escopo do trabalho, apenas utilizamos os conceitos de cada plano
aplicveis ao redesign do website do Projeto SEEDUC.
5.1

Plano da Estratgia
Garret (2011, p.36, traduo nossa) descreve que ao respondermos a pergunta

O que ns queremos mostrar com o nosso produto? identificamos o objetivo do

produto e a resposta pergunta O que nossos usurios querem de nosso produto?
identificamos as necessidades do usurio. Essas duas perguntas juntas formam o
plano da estratgia. Para o website do Projeto SEEDUC a resposta a ambas as
perguntas : acesso a informao de maneira eficiente.
Para prover o acesso informao de forma eficiente precisamos identificar
quem so nossos usurios, que no caso do website do Projeto SEEDUC so:
professores da rede pblica de ensino do estado do Rio de Janeiro, com faixa etria
de 20 a 60 anos de ambos os sexos. Esses professores so graduados na
modalidade licenciatura, em alguma das vrias reas do conhecimento. Esse perfil
de usurio nos fornece informaes teis que usufrumos no desenvolvimento dos
planos seguintes, como por exemplo, por sabemos a priori que todos nossos
usurios so letrados ento podemos usar textos mais objetivos para comunicao.
Aps traarmos o perfil do usurio de nosso website, precisamos entender
suas necessidades atravs de uma pesquisa com usurio, para tal utilizamos no
desenvolvimento do redesign do website do Projeto SEEDUC o testes com usurio
descrito por Garret.
Testes com usurio a forma mais utilizada de pesquisa com usurio.
Testes com o usurio no testar os seus usurios e sim os seus usurios
testarem o que voc produziu. s vezes os usurios testam um produto
finalizado, seja em preparao para redesign ou para erradicar quaisquer
problemas de usabilidade antes do lanamento. Em outros casos, usurios

25

podem testar um produto em progresso ou mesmo um prottipo do produto

finalizado. (GARRET 2011, p.46, 47, traduo nossa)

Conforme Wrinckler e Pimenta (2002) a maior parte dos problemas de

usabilidade so apenas detectados durante utilizao do produto. Eles descrevem
ainda que
o processo de desenvolvimento de interfaces com usabilidade [...] um
ciclo contnuo de design e avaliaes de usabilidade [...]. Neste ciclo, iniciase com a identificao de usurios, tarefas e requisitos para a aplicao.
Tais requisitos so utilizados como entrada para a construo de um
prottipo que, em seguida, avaliado com relao a sua usabilidade. Os
problemas de usabilidade identificados na avaliao so solucionados na
verso seguinte e uma nova avaliao de usabilidade se segue. O ciclo
termina quando nenhum problema de usabilidade for identificado ou, pelo
menos, os problemas mais graves tenham sido solucionados na interface.
(WINCLER, PIMENTA, 2002, p.4)

No caso do redesign do website do Projeto SEEDUC,

durante o

desenvolvimento ocorreram vrias iteraes de testes no estruturados, porm a

primeira delas utilizou o antigo website do Projeto SEEDUC afim se obter anotaes
das observaes feitas pelos usurios submetidos a test-lo. Essa primeira iterao
resultou em uma lista de problemas observados pelos usurios. A partir da segunda
iterao de testes, utilizamos a verso do website no estgio em que se encontrava
no desenvolvimento para realizar estes testes com o usurio.
Utilizamos em nossos testes cinco funcionrios da Diretoria da Extenso que
apresentavam perfil compatvel com o perfil identificado do usurio do website do
Projeto SEEDUC.
Uma das abordagens consideradas para a estratgia do redesign seria a total
reformulao do website como um todo, com um novo layout, esquema de cores etc.
Essa abordagem traria maior liberdade de criao e correo dos problemas
relatados, porm alm de mais custosa traria outro grande problema ao pblico alvo
que em sua maioria poderiam ficar perdidos com grandes mudanas. Como o
objetivo do website disponibilizar de maneira direta a informao aos usurios
essa abordagem foi descartada.
Outra abordagem seria a utilizao do website usando-se o gerenciador de
contedo Wordpress. Essa abordagem tambm se mostrou dispendiosa devido ao

26

processo de criao de um layout alm de que o Wordpress seria uma ferramenta

poderosa e melhor aproveitada para um website com maior volume de informaes
dinmicas o que no o caso do website do Projeto SEEDUC.
Contudo aps os testes com os usurios a abordagem a qual se mostrou mais
vivel para o redesign do website do Projeto SEEDUC foi manter o layout
visualmente prximo ao do antigo website, pois de tal forma o impacto de adaptao
sobre os usurios seria minimizada.
5.2

Plano do Escopo
Garret (2011) prope que definir o escopo do projeto resulta num bom

processo de desenvolvimento, uma vez que este pode prever os potenciais conflitos
que ocasionalmente surjam aps a finalizao do processo, com o produto pronto.
Esse processo deve resultar em um bom produto, pois todo o seu desenvolvimento
deve obedecer a uma mesma linguagem comum. Definir seus requisitos a priori
retira as ambiguidades do processo de desenvolvimento.
Ele tambm descreve que uma forma de se obter o escopo de um produto
atravs da definio de seus requisitos funcionais. Um requisito uma pequena
descrio de uma caracterstica nica que o produto deve ter. Neste trabalho apenas
apresentaremos alguns dos requisitos do redesign do Projeto SEEDUC.
5.2.1 Requisitos
Os requisitos necessrios para o desenvolvimento do redesign, do website do
Projeto SEEDUC, foram elaborados atravs das observaes feitas nos testes com
usurio utilizando o antigo website; das limitaes impostas ao desenvolvimento
pela Diretoria de Extenso; e das tecnologias a serem utilizadas.
Alguns exemplos de requisitos extrados dos testes com usurios so:
1. layout no deve divergir muito do antigo website;
2. manter o mesmo esquema de cores para cada subprojeto;
3. agrupar informaes textuais para melhorar a leitura e compreenso;
4. o usurio deve ter acesso a qualquer um dos subprojetos de qualquer
pgina do website;
5. breve explicao do que so os projetos na pgina inicial do website;
Como exemplo de requisito imposto pela Diretoria de Extenso tem-se:

27

1. manter o uso de imagens adotadas na identidade visual de casa

subprojeto por motivo de licena;
2. revisar gramaticalmente os textos do website.
Alguns dos requisitos voltados para a tecnologia foi:
1. construir um website para os diferentes dispositivos de mdia
2. utilizar HTML, PHP, JAVASCRIPT, CSS e BOOTSRAP
3. corrigir a estrutura dos arquivos e pastas
5.3

Plano da Estrutura
Segundo Garret (2011, 81, traduo nossa), para websites de divulgao de

contedo, estruturar a experincia do usurio uma questo de arquitetura da

informao.
Ele define a arquitetura da informao como campo de estudo que visa
organizar, agrupar, ordenar e apresentar a informao, alm de definir padres e
sequencias de opes que os usurios podero escolher e as possibilidades
envolvidas na transmisso de informaes a um usurio. A arquitetura da
informao, ao compreender melhor o usurio, ajuda a lhe garantir uma melhor
experincia no acesso informao. Alm disso, Wrinckler e Pimenta (2002)
descrevem que importante uma organizao da informao de uma forma que d
significado aos usurios e que ela seja consistente em todo o website.
5.3.1 Diagrama da arquitetura
Em websites de contedo, conforme Garret (2011) descreve, a arquitetura da
informao se encarrega de criar esquemas de organizao e navegao que
possibilitam aos usurios navegarem pelo contedo do website de maneira eficiente
e efetiva. Para VIDOTTI e SANCHES (2011) a arquitetura da informao
atua sobre os websites, determinando primeiramente pblico e objetivos, e
a forma de atingi-los com eficcia e eficincia. Por meio de desenhos, tentase traar, pensando como um usurio, os possveis caminhos que podem
ser utilizados, identificando o que pode ser interessante e o porqu, tendo
sempre uma percepo sensvel s suas necessidades. (VIDOTTI e
SANCHE, 2011, p.2)

Beneficiando-se de um diagrama podemos apresentar visualmente um

esquema de organizao da informao e de navegao levando-se o usurio em

28

sua concepo, dessa forma obtemos uma representao mais efetiva para
demonstrar

as ramificaes, agrupamentos e

relaes entre

os

diversos

componentes de um website.
Para o website do Projeto SEEDUC o diagrama de arquitetura (Figura 15)
exibe a configurao de navegao entre as suas pginas web agrupadas pelo seu
contedo. Iniciando-se a navegao a partir da pgina principal o usurio poder
optar entre um dos quatro subprojetos, acessar informaes do projeto ou acessar
os ambientes virtuais de sala de aula que so externos ao website. Ao acessar um
dos subprojetos o usurio poder navegar entre seu contedo pertinente ou trocar
de subprojeto.

Figura 15 Diagrama da arquitetura do website do Projeto SEEDUC

Fonte: Autor

5.4

Plano do Esqueleto
O plano do Esqueleto, descrito por Garret (2011) define qual forma assumiro

as funcionalidades da estrutura do website definida no plano de Estrutura,

expressando os componentes individuais e as relaes entre eles de forma mais
concreta e detalhada.

29

O design de navegao proporciona uma forma especializada de apresentar os

componentes de informao. O design de informao prov uma maneira de
comunicar a informao ao usurio da forma eficaz. (GARRET, 2011)
5.4.1 Design de navegao
Garret (2011, p. 118, traduo nossa) aponta trs objetivos concomitantes que
o design de navegao de qualquer website deve satisfazer:
1. a navegao deve prover ao usurio um meio de chegar de um ponto a outro
dentro do website. Como pode ser impraticvel e at mesmo no
aconselhado uma pgina ter links para todas as outras pginas do website, os
elementos de navegao devem facilitar essa tarefa;
2. a navegao deve se relacionar com os elementos que o contm,
fornecendo assim ao usurio o entendimento das opes que ele pode fazer;
3. a navegao deve apresentar o relacionamento entre o contedo e a pgina
web corrente, ajudando o usurio a entender melhor as opes disponveis
para completarem o seu objetivo.
Corrigindo os problemas do antigo website de navegao, o redesign do
website do Projeto SEEDUC possui dois tipos de navegao, uma global e uma
local. A navegao global (Figura 16) permite atravs de qualquer pgina web do
website acessar a pgina web inicial, as pginas web comuns do website ou acessar
um dos quatro subprojetos, enquanto a navegao local (Figura 17) permite a
navegao apenas s pginas web pertencente ao mesmo subprojeto em que se
encontra.

Figura 16 Navegao global do website do Projeto SEEDUC

Fonte: Autor

30

Figura 17 Navegao local do website do Projeto SEEDUC

Fonte: Autor

5.4.2 Design de informao

Para Garret (2011) o design de informao nos ajuda a fazer decises de como
apresentar a informao ao usurio de forma que ele possa compreend-la de mais
facilmente. As informaes textuais podem ser arranjadas

ou agrupadas

contextualmente para melhor compreenso pelo usurio. Algumas dessas

informaes podem ser visuais e a escolha de utilizar grficos para represent-las
deve ser feita de forma eficiente.
O website do Projeto SEEDUC agrupa os elementos visuais e textuais em
blocos nas pginas web para prover uma melhor compreenso. Conjuntamente faz
uso de wayfinding: cada subprojeto possui uma cor caracterstica que usada em
seu contexto de pginas web: cada subprojeto possui uma cor associada e esta
aplicada a ttulos, barras, caixas etc. e a identidade visual do subprojeto so usadas
na pgina web do projeto.
5.4.3 Wireframe
O layout de uma pgina web um esqueleto coesivo e unificado aonde o
design de navegao e o design de informao se renem. O layout deve incorporar
todo o sistema de navegao, os elementos de interface requeridos por qualquer
funcionalidade na pgina e o design de informao que d suporte a pgina e ao
contedo. Esse layout detalhado chamado de uma pgina esquemtica ou
wireframe. (GARRET, 2011)

31

Para produtos menos complexos, segundo Garret (2011), apenas um

wireframe necessrio para servir de modelo para todas as outras pginas que
sero construdas. Como esse o caso do website do Projeto SEEDUC, utilizamos
dois wireframes. Um deles detalha o layout principal das pginas web do website
(Figura 18) e o outro detalha o layout secundrio, que so utilizados nas pginas
web dos subprojetos do Projeto SEEDUC (Figura 19).

Figura 18 Wireframe do layout principal do website do Projeto SEEDUC

Fonte: Autor

O layout da pgina principal do redesign do Projeto SEEDUC apresenta no

topo superior esquerdo uma navegao comum a todos os subprojetos e no topo
superior esquerdo a navegao para os subprojetos. Logo abaixo o logo do
CECIERJ e a identidade visual do Projeto SEEDUC. No corpo principal esto quatro
colunas uma para cada subprojeto. Cada uma dessas colunas contm uma figura da
identidade visual, o acesso ao site externo da sala de aula virtual e um texto

32

explicativo sobre o do subprojeto associado. Na parte inferior do layout localiza-se

outra navegao comum a todo o website.

Figura 19 Wireframe do layout secundrio do website do Projeto SEEDUC

Fonte: Autor

O layout secundrio do redesign do Projeto SEEDUC associado a cada

subprojeto. No topo superior e na parte inferior do layout esto as mesmas
navegaes do layout principal. Abaixo do topo superior, a identidade visual e a
navegao local pertinente ao subprojeto. No corpo do layout, temos o texto
explicativo do subprojeto e blocos de informao para textos, imagens de noticias e
avisos.
5.5

Plano da Superfcie
No plano da superfcie comeamos de fato a construo do website do Projeto

SEEDUC e durante esse desenvolvimento usamos todos os produtos resultantes da

execuo parcial ou completa dos planos anteriores.

33

A primeira etapa foi a uma analise e reorganizao dos arquivos e pastas que
seriam reutilizados no website. Este era um grande problema do antigo website, pois
os arquivos no eram estruturados em pastas causando grande desordem. Essa
reestruturao foi feita tanto com os arquivos do website como arquivos CSS e
JAVASCRIPT quanto os arquivos de material para download de cada projeto.
O design visual do redesign do Projeto SEEDUC deveria se manter prximo do
antigo website como requisito, porm este deveria corrigir tambm os erros de falta
de consistncia e uniformidade que apresentava. Segundo Garret,
Manter a uniformidade em seu design um importante recurso que
assegura que o seu design comunica eficientemente sem confundir ou
sobrecarregar o usurio. (GARRET, 2011, p.141, traduo nossa)

E conforme Nielsen apud Wrinckler e Pimenta (2002) consistncia um dos

princpios bsicos de usabilidade.
Se os usurios souberem que um mesmo comando ou uma mesma ao
ter sempre o mesmo efeito, eles ficaro mais confiantes no uso do
software, e sero encorajados a fazerem novas descobertas. A mesma
operao dever ser apresentada na mesma localizao em todas as telas
e dever ser formatada da mesma maneira para facilitar o reconhecimento.
(Nielsen apud Wrinckler e Pimenta, 2002. p29)

5.5.1 Paleta de cores

Outro requisito do projeto manter a identidade visual dos subprojetos do
antigo website e essa era formada por uma por uma cor e uma imagem associada.
Em adio paleta de cores j predefinida foram adicionadas mais cores para criar
contrate (Figura 20). Essas cores e imagens foram utilizadas como parte do
wayfinding.

34

Figura 20 Paleta de cores do website do Projeto SEEDUC

Fonte: Autor

5.5.2 Tipografia
Utilizamos em nosso redesign a fonte sem serifa humanista Open Sans. Esta
fonte tambm usada em alguns similares estudados foi escolhida por ser de uso
livre, ser aprimorada para web e dispositivos de mdia e apresentar uma tima
legibilidade em seus tipos. Conforme Wrinckler e Pimenta (2002) a legibilidade do
texto um fator importante em websites bem projetados.
5.5.3 Construo das pginas
O redesign do Projeto SEEDUC apresenta dois layouts, um principal e um
secundrio, apresentados por seus respectivos wireframes. Para a construo das
pginas web que refletiram esses layouts foi estabelecido como requisito a utilizao
de PHP, CSS, HTML e BOOTSTRAP.
O BOOTSTRAP uma ferramenta gratuita de framework HTML, CSS e
Javascript para desenvolvimento de websites. Atravs da utilizao desse
framework aceleramos o processo de construo das pginas web. O BOOTSRAP
disponibiliza uma srie de modelos para iniciar o desenvolvimento. O modelo foi
escolhido pela maior proximidade como o wireframe e a partir desse modelo (Figura

35

21 e 22) foi construda a primeira verso rascunho da pgina web principal que
reflete seu wireframe.

Figura 21 Modelo utilizado para o desenvolvimento

Fonte: Autor

Figura 22 Primeiro rascunho da pgina web inicial do Projeto SEEDUC

Fonte: Autor

A finalizao do design visual da pgina principal web (Figura 23) foi realizada
apenas para dispositivos com largura superiores a de 1200px. A pgina web
rascunho foi desenvolvida em HTML e posteriormente transformada em PHP (Figura

36

24) e a partir dela desenvolvidas todas as demais pginas do layout principal e do

layout secundrio do website do projeto SEEDUC (Figuras 25 a 28).

Figura 23: Layout da pgina web principal do redesign do Projeto SEEDUC.

Fonte: FUNDAO CECIERJ, 2015

Figura 24 Desenvolvimento
Fonte: Autor

37

Figura 25 Design visual da pgina web do subprojeto EJA

Fonte: Autor

Figura 26 Design visual da pgina web do subprojeto Formao Continuada

Fonte: Autor

38

Figura 27 Design visual da pgina web do subprojeto Reforo Escolar

Fonte: Autor

Figura 28 Design visual da pgina web do subprojeto Especializao

Fonte: Autor

Depois de concludo essa etapa, novos testes de usurios foram realizados a

fim de obter retorno sobre as decises feitas acerca do design visual. A Diretoria da
Extenso tambm foi consultada nessa etapa. Esses testes resultaram em poucas
observaes dos usurios e corrigindo-as e submetidos aos testes novamente.

39

5.5.4 Design responsivo

Outro requisito do redesign do website do projeto SEEDUC que o website
fosse construdo para os diferentes dispositivos de mdia, ou seja, que o website
possua um design responsivo.
[...] o design responsivo ou layout responsivo expande e contrai com a
finalidade de se acomodar de maneira usvel e acessvel rea onde
visualizado ou, mais genericamente, ao contexto onde renderizado, seja
um smartphone, um tablet, um desktop, um leitor de tela, um mecanismo de
busca etc. (SILVA 2014, p.36)

Aps a finalizao da construo do design visual das pginas web este foi
adaptado para diferentes faixas de resoluo de renderizao. Essa adaptao foi
feita atravs da construo de cdigo CSS especfico para cada resoluo a ser
atendida. Finalizado, o website do projeto SEEDUC responde a cinco resolues
diferentes de dispositivos:
1. Dispositivos com largura superior a de 1200px;
2. Dispositivos com largura entre de 1199px e 991px;
3. Dispositivos com largura entre 991px e 768px (Figura 29);
4. Dispositivos com largura entre 768px e 612px;
5. Dispositivos com largura inferior a 612px (Figura 30).

Figura 29 Design responsivo do website para resolues entre 991px e 768px de largura
Fonte: Autor

40

Figura 30 Design responsivo do website para resoluo inferior a 612px de largura

Fonte: Autor

5.5.5 Testes e correo de erros

Posteriormente as adaptaes do website do Projeto SEEDUC para design
responsivo foram feitos testes em browsers e dispositivos de mdia a fim de eliminar
e corrigir eventuais erros do design visual do website. Esses testes incluram a
utilizao em browsers como. Google Chrome, Mozilla Firefox, Internet Explorer e
em outros dispositivos de mdia como celulares e tablets.
O site tambm foi validado no W3C, sendo corrigidos os eventuais erros de
sintaxe no cdigo apresentados pelo validador. Finalizado estes testes e correes,
o website do Projeto SEEDUC foi aprovado pela Diretoria da Extenso e sua verso
final disponibilizada on-line no lugar do antigo website (figuras 31 e 32).

41

Figura 31 Design final da pgina web inicial do Projeto SEEDUC

Fonte: FUNDAO CECIERJ (2015)

Figura 32 Design final da pgina web de contato do Projeto SEEDUC

Fonte: FUNDAO CECIERJ (2015)

42

5.5.6 Teste de usabilidade

Testes com usurios no estruturados foram feitos durante toda a fase de
desenvolvimento do website do Projeto SEEDUC, estes testes forneciam
informaes para que ajustes pontuais fossem feitos enquanto o website era
construdo. Contudo, aps a finalizao de sua construo fez a necessidade de
avaliar melhor a usabilidade do website atravs de um teste de usurio estruturado
(Anexo A). Este teste foi realizado com cinco usurios com perfil compatvel ao
usurio comum do website do Projeto SEEDUC:
1. MFD, 50 anos, sexo feminino;
2. FAM, 25 anos, sexo feminino;
3. PSCC, 31 ANOS, sexo feminino;
4. AC, 41 anos, sexo feminino;
5. ARA, 56 anos, sexo masculino.
Um grande nmero de usurios desejvel, mas por questes de custo e
tempo, tem se adotado um nmero reduzido em cada ciclo como forma de
viabilizar a avaliao de interfaces Web. (Nielsen, 1993) sugere que com 5
usurios pode-se identificar aproximadamente 70% dos problemas mais
crticos da interface. Isto caracteriza uma situao adequada para a maioria
dos projetos, embora 5 seja um nmero relativo para garantir a eficincia do
mtodo (Woolrych e Cockton, 2001). (WINCKLER, PIMENTA, 2002, p.33)

Foram elaborados uma srie de tarefas que os usurios deveriam realizar no

website, um questionrio para auto avaliar a percepo de suas tarefas e algumas
perguntas de respostas discursivas.
Durante a execuo das tarefas predefinidas, foi o observado que os usurios
as realizavam de modo eficiente, intuitivo e sem apresentar grandes dvidas ou
hesitao. Os comentrios em relao a essas tarefas foram:
1. Cumpri todas as tarefas com facilidade.
2. Posso definir a usabilidade como fcil, acessvel e funcional.
3. Realizei com facilidade;
4. As informaes disponibilizadas no site foram eficientes para a
realizao das tarefas.
5. Fcil acesso.

43

Aps a execuo das tarefas, cada usurio deveria auto avaliar alguns
aspectos do website de acordo com sua percepo levando-se em conta as tarefas
realizadas previamente. A anlise das repostas dos usurios demonstra (Tabela 1)
que os usurios apresentaram um alto grau de satisfao em relao ao website.
Quantidade de usurios que assinalaram
Concordo Totalmente Discordo Totalmente

Este website tem muito contedo que de

meu interesse.
difcil navegar neste website.

Eu consigo encontrar rapidamente o que eu

quero neste website.
Este website parece lgico para mim.
Este website precisa de mais explicaes
introdutrias.
As

pginas

deste

website

so

muito

atraentes.
Eu me sinto no controle quando eu estou
usando este website.
Este website muito lento.
Este website ajuda-me a encontrar o que
estou procurando.
Aprender a encontrar o que quero neste
website um problema.
Eu no gosto de usar este website.
Eu posso facilmente entrar em contato com
as pessoas que eu quero neste website.
Sinto-me eficiente quando estou usando este
website.

( 2 ) ( 3 ) (

) (

) (

) (

) (

) (

) ( 5 )

( 5 ) (

) (

) (

) (

( 5 ) (

) (

) (

) (

) (

) (

) ( 1 ) ( 4 )

( 2 ) ( 3 ) (

) (

) (

( 4 ) ( 1 ) (

) (

) (

) (

) (

) ( 1 ) ( 4 )

( 5 ) (

) (

) (

) (

) (

) (

) (

) ( 5 )

) (

) (

) (

) ( 5 )

( 4 ) ( 1 ) (

) (

) (

( 5 ) (

) (

) (

) (

44

difcil dizer se este website tem o que eu

quero.
fcil usar este website pela primeira vez.
Este website tem algumas caractersticas
irritantes.
Lembrar onde estou neste website difcil.
Usar este website um desperdcio de
tempo.
Eu obtenho o que eu espero quando eu clico
em recursos neste website.
Tudo neste website fcil de entender.

) (

) (

( 4 ) ( 1 ) (

) ( 1 ) ( 4 )

) (

) (

) (

) (

) ( 1 ) ( 4 )

) (

) (

) ( 1 ) ( 4 )

) (

) (

) (

) ( 5 )

( 5 ) (

) (

) (

) (

( 1 ) ( 4 ) (

) (

) (

Tabela 1 Auto avaliao dos usurios

Posteriormente a auto avaliao os usurios podiam responder a trs

perguntas discursivas no obrigatrias:
1) Algum comentrio, positivo ou negativo sobre a navegao, interface, contedo
etc.?
Respostas obtidas:
a) Material de fcil acesso;
b) Possui uma interface harmoniosa e comunicativa, sem atrapalhar a minha
usabilidade;
c) As pginas apresentam informaes diretas sem muitos textos longos e
desnecessrios;
d) Acho as imagens e os fundos pesados.
2) Qual a melhor caracterstica deste website e por qu?
Respostas obtidas:
a) Disposio do material. As cores;
b) Navegabilidade, reposta rpida, facilidade de download de arquivos;
c) Contedo bem organizado visualmente. Lgica clara;
d) Fcil acesso s informaes;
e) Facilidade de localizao dos assuntos.

45

3) Qual caracterstica deste website voc acha que deve ser melhorada e por qu?
Respostas obtidas:
a) Nada, as cores ainda que fortes, servem para definir com clareza a diferena
entre os projetos;
b) No h pois atende muito bem minhas necessidades;
c) Imagens com cores mais leves e reas coloridas menores.
Os pontos positivos citados no questionrio pelos usurios foram a navegao,
organizao e disposio de informaes e material e como ponto negativo as
imagens as cores. interessante notar que os poucos comentrios negativos
refletem algumas dos requisitos, como o uso de cores e imagens do antigo website
do projeto SEEDUC.
Concludo a anlise do resultado do teste com os usurios, podemos verificar
que o redesign do website do Projeto SEEDUC apresenta um alto grau de
aprovao no principal aspecto que motivou o seu redesign centrado no usurio: a
organizao de informao de forma eficiente e eficaz.

46

Concluso
O redesign de um website apresenta varias dificuldades, desde a expectativa

que o novo produto consiga superar sua verso anterior at as limitaes imposta a
seu desenvolvimento. O maior problema do antigo website do Projeto SEEDUC era
sua manuteno e a disponibilizao da informao de maneira clara a seus
usurios demonstrando a falta do design centrado ao usurio em seu
desenvolvimento.
As limitaes impostas eram muitas para o redesign, desde a reutilizao de
imagens at o design visual que deveria se manter prximo, porm este deveria
corrigir os vrios problemas apresentados de sua antiga verso. Finalizado todo o
processo de desenvolvimento utilizando os conceitos de design centrado no usurio
e boas prticas de design, mostrou-se eficiente em eliminar tais problemas do
website do Projeto SEEDUC (http://projetoseeduc.cecierj.edu.br).
Os testes com usurios realizados aps a concluso de sua construo,
mostraram um alto grau de aprovao pelos usurios do redesign do website,
enfatizando a organizao da informao e contedo.
O website do projeto SEEDUC possui acesso a quatro plataformas externas de
EaD, as salas de aula, as quais no foram contempladas pelo redesign do website,
devido a limitao de tempo de desenvolvimento, porm seria interessante que
estas apresentassem em seu design visual uma consistncia entre os quatro
subprojetos e com o visual do website do Projeto SEEDUC.

47

REFERNCIAS
AIESAD (Madrid). Organizao No Governamental. AIESAD: Associao IberoAmericana de Educao Superior a Distncia. 2015. Disponvel em:
<http://aiesad.cederj.edu.br/principal/>. Acesso em: 02 No um ms valido!
2016.
BOOTSTRAP (Califrnia). Empresa. CSS Bootstrap. 2015. Disponvel em:
<http://getbootstrap.com/css/>. Acesso em: 15 fev. 2016.
CAVALCANTE, Raphael da Silva; BRASCHER, Marisa. Taxonomias navegacionais
em stios de comrcio eletrnico: critrios para avaliao. Transinformao,
Campinas,

v.

26,

n.

2,

p.

191-201,

Ago.

2014.

Disponvel

em

<http://www.scielo.br/scielo.php?script=sci_arttext&pid=S010337862014000200191&lng=en&nrm=iso>. Acesso em 17 Jan 2016.

FUNDAO CECIERJ (Rio de Janeiro). Secretaria de Estado de Cincia e
Tecnologia.

Projeto

SEEDUC.

2012b.

Disponvel

em:

<http://projetoseeduc.cecierj.edu.br/principal/>. Acesso em: 15 jun. 2015.

___________________ (Rio de Janeiro). Secretaria de Estado de Cincia e
Tecnologia. Extenso: cursos gratuitos de atualizao. 2015a. Elaborada por
Diretoria de extenso. Disponvel em: <http://cederj.edu.br/extensao/>. Acesso
em: 15 jan. 2016.
___________________ (Rio de Janeiro). Secretaria de Estado de Cincia e
Tecnologia. Fundao CECIERJ / Consorcio CEDERJ. 2015. Disponvel em:
<http://cederj.edu.br/fundacao/fundacao-cecierj-consorcio-cederj/>. Acesso em:
15 fev. 2016.
___________________ (Rio de Janeiro). Secretaria de Estado de Cincia e
Tecnologia.

Projeto

SEEDUC.

2015.

Disponvel

em:

<http://projetoseeduc.cecierj.edu.br/>. Acesso em: 15 fev. 2016.

GARRETT, Jesse James. The Elements of User Experience: User-Centered
Design for the Web and Beyond. 2. ed. Berkeley: New Rides, 2011. 172 p.
GLOBO.COM (Rio de Janeiro). globo.com: Absolutamente tudo sobre notcias,
esportes e entretenimento. 2015. Elaborada por Globo Comunicao e

48

Participaes S.A.. Disponvel em: <http://www.globo.com/>. Acesso em: 16

fev. 2015.
GOOGLE.

Google

Fonts

Opens

Sans.

Disponvel

em:

<https://www.google.com/fonts/specimen/Open+Sans.> Acesso em: 03 de mar

de 2016.
O GLOBO (Rio de Janeiro). Jornal O Globo. 2015. Elaborada por Infoglobo
Comunicao e Participaes S.A.. Disponvel em: <http://oglobo.globo.com/>.
Acesso em: 15 fev. 2016.
PADOVANI, S.; SPINILLO, C. G.; GOMES, I. M. A. Desenvolvimento e aplicao
de modelo descritivo-normativo para anlise de websites. Produo, v. 19,
n. 3, p. 514-528, 2009.
RIO 2016 (Rio de Janeiro). Comit Organizador. Rio 2016. 2015. Disponvel em:
<http://www.rio2016.com/>. Acesso em: 15 fev. 2016.
RIO DE JANEIRO (Rio de Janeiro). Prefeitura. Cidade Olmpica. 2015. Disponvel
em: <http://www.cidadeolimpica.com.br/>. Acesso em: 15 fev. 2016.
VIDOTTI, S. A. B. G.; SANCHES, S. A. S.. Arquitetura da informao em web sites.
In: SIMPSIO INTERNACIONAL DE BIBLIOTECAS DIGITAIS, 2, 2004,
Campinas. Anais... .Campinas: Unicamp, 2014. p. 1 - 7. Disponvel em:
<http://www.bibliotecadigital.unicamp.br/document/?code=8302&opt=1>.
Acesso em: 15 fev. 2015.
WINCKLER, Marco Antnio; PIMENTA, Marcelo Soares. Avaliao de Usabilidade
de Sites Web. In: NEDEL, Luciana Porcher. (Org.). Escola de Informtica da
SBC SUl (ERI 2002). Porto Alegre, 2002, v. 1, p. 85-137.

49

Anexo A: Teste de usabilidade do website do Projeto SEEDUC

Usurio:________________________________________________________
Idade:_________________________________________Sexo:____________
1. Realize as seguintes tarefas:
a.
b.
c.
d.
e.
f.
g.
h.
i.
j.
k.
l.
m.
n.
o.
p.
q.
r.
s.
t.
u.

Acesse a Sala de Aula do projeto EJA.

Acesse a Sala do projeto Reforo Escolar.
Acesse a Sala do projeto Especializao.
Acesse a Sala do projeto Formao Continuada.
Faa o download do material de aluno do EJA: Cincias da Natureza - Volume 1 do
Mdulo 2.
Faa o download do material de aluno do EJA: Matemtica do Mdulo 4.
Faa o download do material de professor do EJA: Educao Fsica Volume 2 do
Mdulo 3.
Obtenha um endereo e um telefone para contato do projeto SEEDUC.
Faa o download da Portaria de Alocao de Professores do projeto Formao
Continuada.
Procure o endereo do polo METROPOLITANA II do Reforo Escolar da aula
presencial.
Procure o endereo do polo NORTE FLUMINENSE do Reforo Escolar da aula
presencial.
Procure o endereo da aula presencial da disciplina QUMICA do EJA.
Procure o endereo da aula presencial da disciplina MATEMTICA do EJA.
Faa o download do Manual do EJA.
Verifique o resultado do Edital 002/2015 do EJA.
Acesse o Projeto EJA e em seguida o Projeto Especializao.
Obtenha a informao sobre o que o Projeto SEEDUC.
O que o projeto EJA? (aonde obter essa informao no website)
O que o projeto Reforo Escolar?
O que o projeto Especializao?
O que o projeto Formao Continuada?

Algum comentrio, positivo ou negativo sobre a realizao das tarefas acima?

_______________________________________________________________

2. Avalie:
Concordo Totalmente Discordo
Totalmente
Este website tem muito contedo que de
meu interesse.

) (

) (

) (

) (

50

difcil navegar neste website.

Eu consigo encontrar rapidamente o que eu
quero neste website.
Este website parece lgico para mim.
Este website precisa de mais explicaes
introdutrias.
As pginas deste website so muito
atraentes.
Eu me sinto no controle quando eu estou
usando este website.
Este website muito lento.
Este website ajuda-me a encontrar o que
estou procurando.
Aprender a encontrar o que quero neste
website um problema.
Eu no gosto de usar este website.
Eu posso facilmente entrar em contato com
as pessoas que eu quero neste website.
Sinto-me eficiente quando estou usando este
website.
difcil dizer se este website tem o que eu
quero.
fcil usar este website pela primeira vez.
Este website tem algumas caractersticas
irritantes.
Lembrar onde estou neste website difcil.

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

51

Usar este website um desperdcio de

tempo.
Eu obtenho o que eu espero quando eu clico
em recursos neste website.
Tudo neste website fcil de entender.

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

) (

3. Responda:
- Algum comentrio, positivo ou negativo sobre a navegao, interface, contedo etc.?
_______________________________________________________________
- Qual a melhor caracterstica deste website e por qu?
_______________________________________________________________
- Qual caracterstica deste website voc acha que deve ser melhorada e por qu?
_______________________________________________________________