Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Upcoming SlideShare
Loading in …5
×

Resenha Rua da Gastronomia "Final"

1,237 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×