UNIVERSIDADE ESTADUAL DE MARINGÁ
ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB
Desenvolvimento de um site:
Pós-graduandos:
Emerson José Morgado Brito
Jader dos Santos Teles Cordeiro
Kátia Pereira Gasparello
Maycon Morgado
MARINGÁ - 2010

UNIVERSIDADE ESTADUAL DE MARINGÁ
ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB
Desenvolvimento de um site:
Trabalho de pós-graduação apresentado à
disciplina de Design de Interação, ministrada
pelo professor Frederick Van Amstel.
MARINGÁ - 2010

1. INTRODUÇÃO
A idéia central teve início em um brainstorming, onde em duplas exibimos livremente
nossas idéias, em busca de solução criativa para um dado problema. Montamos o projeto SE LIGA,
inicialmente “Um local onde qualquer pessoa possa denúnciar, sugerir, pesquisar, orientar-se a
respeito de acontecimentos, problemas, coisas boas ou ruins que acontecem nas cidades, relatados
por elas mesmas”.
Colocamos essa idéia em cartolina conforme abaixo:
Formulada essa idéia e “vendida” em sala de aula, para outra dupla nos tornamos em quatro
mentes pensantes para andamento deste projeto. E a próxima etapa foi verificar por meio de
pesquisa se nossa idéia é aceitável?

2. PESQUISA
Nesta instancia do trabalho melhoramos nosso foco com definição do nosso Objetivo,
Objetivos Específicos para definição de questionário a ser aplicado.
2.1 Objetivo
Desenvolver um local onde qualquer pessoa possa denunciar, sugerir, pesquisar, orientar-se
a respeito de acontecimentos, problemas, coisas boas que acontecem nas cidades, relatados por elas
mesmas.
2.2 Objetivos Específicos
• Destacar a importância deste projeto “SE LIGA” para nossa sociedade por meio de
pesquisa;
• Formação de um banco de dados, onde as autoridades possam consultar focos de problemas
das cidades com intuito de formular ações para sua solução;
• Desenvolver uma ferramenta que efetivamente seja interativa com sociedade;
2.3 Metodologia
A metodologia aplicada em nossa pesquisa será:
Quantitativa: Caracteriza-se pela atuação nos níveis de realidade e apresenta como objetivos
a identificação e apresentação de dados, indicadores e tendências observáveis e descritiva: Pois
analisa a pesquisa a fim de relacionar as principais características com o objeto estudado.

2.4 Procedimento para coleta de dados
Em reunião via google docs, definimos o questionário a ser aplicado conforme abaixo:
QUESTIONÁRIO
Curso: Especialização em Desenvolvimento de Sistemas para Web – UEM
Disciplina: Desing de Integração.
Proposta: Criação de um site - “SE LIGA”.
1 - Em que Cidade Reside?
( ) Maringá
( ) Arapongas
( ) Londrina
( ) Pérola
( ) Outra
2 - Você possui acesso a internet?
( ) SIM
( ) NÃO
3 - Tem conhecimento nos locais onde transita, com necessidade de recapagem ou manutenção no
asfalto?
( ) SIM
( ) NÃO
4 - Sabe de lugares que existe problemas com usuários de drogas ou prostituição infantil?
( ) SIM
( ) NÃO
5 - O trânsito de nossa cidade existe cruzamentos ou ruas que precisam de lombadas, pintura na
faixa ou semáforo?

( ) SIM
( ) NÃO
6 - Gostaria de saber dos eventos da nossa cidade (Filmes, Teatro, Festivais, Shows, Jogos) tudo em
um mesmo site?
( ) SIM
( ) NÃO
7 - Acredita ser importante saber quais os pontos turísticos de sua cidade ou de locais que vai
visitar?
( ) SIM
( ) NÃO
8 - Você entraria em um site para denunciar problemas urbanos?
( ) SIM
( ) NÃO
9 - Faria denúncias em um site identificando-se só por um apelido?
( ) SIM
( ) NÃO
10 - Gostaria de poder reclamar por escrito os problemas de sua cidade para que as autoridades
possam tomar providência?
( ) SIM
( ) NÃO
2.5 Tratamento dos dados
Após aplicação do questionário a uma população de 106 entrevistados e organização dos
resultados em uma tabela obtemos as seguintes conclusões:

A aceitabilidade de nossa idéia é grande devido ao número de respostas com valor igual à
zero.
Obtemos o maior número de SIM na questão 06 de 103 entrevistados. E o menor SIM foi na
questão 9 com 61 entrevistados.
O maior número de NÃO obtemos na questão 9 que foi de 45. E o menor número de NÃO
foi na questão 6 com 3 dos entrevistados.
No contexto geral da pesquisa temos que:
15,41
84,59
NÃO
SIM
Quase 85% dos entrevistados contribuiriam de alguma forma com o site em questão. Assim
demos seqüência no projeto com seguintes etapas Mapeamento Mental, Card Sorting, Mapa do Site.

3. MAPEAMENTO MENTAL
Com o mapeamento mental, podemos organizar as idéias que surgem referente ao conteúdo
do site, com a utilização de recursos para fazermos associações por assuntos e ainda incluir figuras
para destacar. O recurso mais interessante, foi o compartilhamento on-line para a construção do
projeto com participação dos integrantes do grupo em tempo real.
Utilizamos o aplicativo do site www.mindmeister.com e fizemos um agrupamento da
tempestade de idéias, resultando na imagem abaixo.
4. CARD-SORTING
Para aplicar o card sorting, montamos nossos menus de acordo com uma visão de projeto,
que é mais tecnicista e pelo conhecimento pessoal dos integrantes. A ferramenta permite aos
colaboradores testar, reorganizar os menus, fazendo uma associação dos conteúdos (itens dos
menus) mais apropriado ao Menu Principal.
Percebemos que é necessário, uma participação no projeto de leigos ou colaboradores na
área, para nos mostrar uma percepção mais próxima do usuário final, que muitas vezes não temos
possibilidade para instruir ou fornecer treinamento na utilização do sistema e temos que permitir
que seja utilizado de uma forma intuitiva.

O programa disponibiliza recursos gráficos para compararmos os resultados dos testes
feitos com os usuários, para definir qual direção para uma reestruturação.
É gerado um diagrama de navegação, como resultado da pesquisa com grupo de usuários do
aplicativo http://websort.net/ .

5. MAPA DO SITE
Para elaborarmos o mapa do site, utilizamos o aplicativo http://writemaps.com/, criamos
novamente o menu que foi definido pelo usuário ou o mais próximo do ideal, com base nos
resultados do card-sorting. Pedimos para os colaboradores ou usuários localizar um item de menu, e
acompanho a navegação para conferir se com as mudanças tivemos um efeito positivo no sistema.
Este software não possui relatórios nem gráficos para comparações, mas é um teste necessário para
uma comfirmação de estarmos no caminho certo.

6 . LAYOUT
Com utilização da ferramenta “Inkscape” realizamos o estudo de cores, tamanho e tipo de
letra, criação de logomarca e disposição de menu do site conforme figura a seguir.
Após este pré-layout e de todos os outros subsídios utilizamos wireframes, para
disponibilização dos layouts das páginas para validação com os usuários.

7. WIREFRAMES
Elaboramos os layouts das páginas, construído a partir das etapas anteriores, é uma prévia
do site para visualização e validação do usuário. Deve ter a participação de toda equipe na
construção, pela importância no projeto que permitirá definir qual caminho seguir, se estamos
acertando antes da codificação.

9. CONCLUSÃO
Em nosso projeto houve um ganho importante na usabilidade, com melhorias significativas
desde a idéia inicial, em cada etapa do desenvolvimento aplicamos diversas metodologias, foram
feitas algumas modificações com base nos resultados obtidos, e ficou constatado a importância dos
testes que reflete diretamente na qualidade do nosso no site, que divulga diversos serviços e
informações aos usuários, houe tambem um grande crescimento da equipe, pois podemos
experimentar ferramentas colaborativas online e técnicas de design.