UNIVERSIDADE ESTADUAL DE MARINGÁ
 CENTRO DE TECNOLOGIA – DEPARTAMENTO DE INFORMÁTICA
ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE ...
UNIVERSIDADE ESTADUAL DE MARINGÁ
 CENTRO DE TECNOLOGIA – DEPARTAMENTO DE INFORMÁTICA
ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE ...
Rua da Gastronomia




                           Imagem 1 – Layout Rua da Gastronomia


1.    Objetivos do projeto


    ...
equipes a participar do projeto. Dando seqüência ao projeto foram realizadas
entrevistas com possíveis usuários no intuito...
4.    Mapeamento Metal


      Utilizamos o método de captação de idéias (brainstorming) facilitando a
elaboração      do ...
 
                       Imagem 3 - Resultado Cardsorting em %




                                                       ...
Imagem 5 – Writemaps Horizontal




 Imagem 6 – Writemaps Vertical
7.    Wireframes


      A criação do wireframe é um passo importante no processo de criação do
website, visando o layout ...
Imagem 8 – Wireframe “Resultado da busca”




    Imagem 9 – Wireframe “Avaliação”
Imagem 10 – Wireframe “Detalhe do Restaurante”




                   Imagem 11 – Wireframe “Cadastro do Estabelecimento”
...
qualquer protótipo fosse desenvolvido. A identificação das melhorias demonstra que
  a visão do designer nem sempre corres...
Próximos SlideShares
Carregando em…5
×

Resenha Rua da Gastronomia "Final"

1.152 visualizações

Publicada em

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
1.152
No SlideShare
0
A partir de incorporações
0
Número de incorporações
36
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Resenha Rua da Gastronomia "Final"

  1. 1. UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA – DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB SERVIÇO WEB 2.0 ATIVIDADE: RUA DA GASTRONOMIA DEAN COSTA PINTO R.A.:60833 JEFFERSON VENTURA NUNES R.A.: 60843 MAURICIO MASSAKI YAZAWA R.A.: 60849 RANIERI ZAROWNY R.A.: 60853 VINICIUS FLORÊNCIO DA SILVA R.A.: 60862 MARINGÁ – 2010
  2. 2. UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA – DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB SERVIÇO WEB 2.0 ATIVIDADE: RUA DA GASTRONOMIA Trabalho da Disciplina de Design de Interação, ministrada pelo Prof.: Frederick van Amstel, pós-graduação em Desenvolvimento de Sistemas para Web – UEM. MARINGÁ – 2010
  3. 3. Rua da Gastronomia Imagem 1 – Layout Rua da Gastronomia 1. Objetivos do projeto Criação de um serviço web 2.0 para atender a demanda de busca de estabelecimentos para efetuar refeições. O serviço disponibilizara a localização através de um mapa do estabelecimento, mostrara também o cardápio, promoções, fotos, vídeos e ranking do estabelecimento. O estabelecimento poderá ser cadastrado no site, sendo assim a adição de fotos, vídeos, cardápio e promoções a critério do proprietário. Também haverá o sistema de ranking para os usuários opinarem sobre os seguintes quesitos: higiene, atendimento e qualidade da comida. 2. Organização dos trabalhos A atividade teve inicio pela definição do serviço web 2.0 a ser desenvolvido e elaboração de uma apresentação em cartolina da mesma para convencer outras
  4. 4. equipes a participar do projeto. Dando seqüência ao projeto foram realizadas entrevistas com possíveis usuários no intuito de verificar a viabilidade do projeto e levantar possíveis melhorias. Para estruturar e melhorar a visualização das possíveis ações do usuário no site foi montado um mapa mental utilizando a ferramenta online Mindmeister (HTTP://www.mindmeister.com) e após foi dado inicio ao estudo da taxonomia do site utilizando a ferramenta online Websort (HTTP://websort.net), através da técnica de “Card-Sorting”, para definir as classificações dos itens do site baseando-se no mapa mental. Foram realizados testes com usuários no intuito de verificar se a classificação definida para os itens estava de acordo com a visão do usuário. Com os resultados obtidos no “Card-Sorting”, foram criados diagramas de navegação utilizando a ferramenta online Writemaps (http://writemaps.com) e realizados testes com usuários para verificar a estrutura dos menus. Após definida a estrutura do site, foi iniciado o processo de desenvolvimento dos Wireframes utilizando ferramenta online Iplotz (http://www.iplotz.com) para definir os elementos das paginas. 3. Entrevistas Foi realizada a pesquisa com alunos do curso de informática 1A e 1B subseqüente noturno de Guarapuava; sendo na turma A contando com 11 mulheres e 20 homens e na turma B com 10 mulheres e 19 homens, com a faixa etária de 17 até 47 anos. Foi questionado as entrevistados se eles utilizariam o site, houve um retorno positivo na turma A de 3 mulheres e 17 homens, tendo um total de 66,66% e na turma B, 5 mulheres e 9 homens, tendo um valor de 48,27%, sendo um total de 56,66% de utilização do site. Os entrevistados sugeriam melhorias no site para que houvesse mais opções de busca foram citados os seguintes estabelecimentos: shopping center, sorveteria e praça de alimentação.
  5. 5. 4. Mapeamento Metal Utilizamos o método de captação de idéias (brainstorming) facilitando a elaboração do projeto. Usando a ferramenta MindMeister (http://www.mindmeister.com) obtivemos através do mapa metal melhor visualização, classificação e estruturação das idéias. Com isso a idéia principal foi definida com mais clareza e a importância relativa de cada idéia é indicada conforme sua aproximação do centro. Imagem 2 - Mapa Mental – Rua da Gastronomia 5. Card Sorting O Cardsorting é um método de usabilidade que identifica como o usuário classifica as informações, essas classificações são feitas através do modelo mental do usuário. São apresentadas cartas a fim de que o usuário organize de acordo com seu critério de classificação pessoal. Neste trabalho foram realizados vários testes com usuários para se ter uma melhor visão das categorias, levando em consideração o ponto de vista do usuário.
  6. 6.   Imagem 3 - Resultado Cardsorting em %   Imagem 4 - Resultado Cardsorting – Itens Agrupagos 6. Mapeamento do Site Essa técnica é utilizada para demonstrar os possíveis caminhos que um usuário poderá seguir no site. Sendo assim o mapeamento do site de acordo com a figura abaixo.
  7. 7. Imagem 5 – Writemaps Horizontal Imagem 6 – Writemaps Vertical
  8. 8. 7. Wireframes A criação do wireframe é um passo importante no processo de criação do website, visando o layout das paginas para a validação com os usuarios. Organizando e simplificando o wireframe representa visualmente o conteúdo do website. Possibilita ao desenvolvedor uma visão e percepção de onde a programação será implementada mostrando a ação que cada página exercerá, de forma mais clara e coesa. Imagem 7 – Wireframe “Home Page”
  9. 9. Imagem 8 – Wireframe “Resultado da busca” Imagem 9 – Wireframe “Avaliação”
  10. 10. Imagem 10 – Wireframe “Detalhe do Restaurante” Imagem 11 – Wireframe “Cadastro do Estabelecimento” 8. Conclusão A divisão do projeto em etapas, a diagramação de cada uma delas e o teste com o usuário levou a identificação de melhorias no projeto antes mesmo que
  11. 11. qualquer protótipo fosse desenvolvido. A identificação das melhorias demonstra que a visão do designer nem sempre corresponde com a visão do usuário e que testes com o usuário durante as etapas de desenvolvimento ajudam a melhorar o projeto, resultando em um produto final de maior qualidade. 9. Contato DEAN: dean@deancosta.com JEFFERSON: verd69@yahoo.com.br MAURICIO: joe-y@hotmail.com RANIERI: raniturvo@gmail.com VINICIUS: vinicius.florencio@hotmail.com

×