Este documento descreve o projeto de um serviço web chamado "Rua da Gastronomia" desenvolvido por alunos da Universidade Estadual de Maringá. O serviço permite que usuários encontrem restaurantes em seu local e vejam detalhes como cardápios, fotos, vídeos e avaliações. Os alunos conduziram entrevistas, mapeamento mental, card sorting e wireframes para projetar e testar o site antes do desenvolvimento.

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. 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. 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. 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. 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.
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. Imagem 5 – Writemaps Horizontal
Imagem 6 – Writemaps Vertical

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. Imagem 8 – Wireframe “Resultado da busca”
Imagem 9 – Wireframe “Avaliação”

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. 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