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 CordeiroKá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:

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.

15,41

84,59NÃO

SIM

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.