UNIVERSIDADE ESTADUAL DE MARINGÁ
ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB




                 Desenvolvimen...
UNIVERSIDADE ESTADUAL DE MARINGÁ
ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB




                 Desenvolvimen...
1. INTRODUÇÃO


       A idéia central teve início em um brainstorming, onde em duplas exibimos livremente
nossas idéias, ...
2. PESQUISA


       Nesta instancia do trabalho melhoramos nosso foco com definição do nosso Objetivo,
Objetivos Específi...
2.4 Procedimento para coleta de dados


       Em reunião via google docs, definimos o questionário a ser aplicado conform...
( ) SIM
( ) NÃO


6 - Gostaria de saber dos eventos da nossa cidade (Filmes, Teatro, Festivais, Shows, Jogos) tudo em
um m...
A aceitabilidade de nossa idéia é grande devido ao número de respostas com valor igual à
zero.
        Obtemos o maior núm...
3. MAPEAMENTO MENTAL


       Com o mapeamento mental, podemos organizar as idéias que surgem referente ao conteúdo
do sit...
O programa disponibiliza recursos gráficos para compararmos os resultados dos testes
feitos com os usuários, para definir ...
5. MAPA DO SITE


       Para elaborarmos o mapa do site, utilizamos o aplicativo http://writemaps.com/, criamos
novamente...
6 . LAYOUT


       Com utilização da ferramenta “Inkscape” realizamos o estudo de cores, tamanho e tipo de
letra, criação...
7. WIREFRAMES


       Elaboramos os layouts das páginas, construído a partir das etapas anteriores, é uma prévia
do site ...
9. CONCLUSÃO

       Em nosso projeto houve um ganho importante na usabilidade, com melhorias significativas
desde a idéia...
27 05-10-final se liga3
27 05-10-final se liga3
Próximos SlideShares
Carregando em…5
×

27 05-10-final se liga3

771 visualizações

Publicada em

Projeto apresentado na disciplina de desing de integação com o prof. Mestre Frederick Van Amstel.

Nossas aulas duraram poucas semanas, porem o conhecimento e as lições passadas duraram toda a vida. Obrigado Fred.

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
771
No SlideShare
0
A partir de incorporações
0
Número de incorporações
57
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

27 05-10-final se liga3

  1. 1. 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
  2. 2. 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
  3. 3. 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?
  4. 4. 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.
  5. 5. 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?
  6. 6. ( ) 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:
  7. 7. 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.
  8. 8. 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.
  9. 9. 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/ .
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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.

×