1. O documento descreve o desenvolvimento de um serviço Web 2.0 chamado "Guia de Serviços A..Z" na Universidade Estadual de Maringá. 2. Foi realizada uma pesquisa de mercado, mapeamento mental, card sorting e desenvolvimento de wireframes e protótipos. 3. O objetivo final era criar um guia online que permitisse a busca e avaliação de prestadores de serviços da região por meio de uma agenda colaborativa.

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
GUIA DE SERVIÇOS ACHEI A..Z
DANIEL RETALI MELO FREIXO DOS SANTOS
DORIVAL JOSÉ BASTISTA
HEMERSON FERNANDO GIACHINI
MAURÍLIO BOLONHESI II
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
GUIA DE SERVIÇOS ACHEI A..Z
Trabalho de pós-graduação apresentado
à disciplina de Design de Interação,
ministrada pelo professor Frederick Van
Amstel.
MARINGÁ
2010

3. Sumário
1. ESCOPO DO PROJETO ...............................................................................................4
2. ORDENAÇÃO DOS TRA BALHOS ...............................................................................4
3. PROTÓTIPO ...................................................................................................................5
4. PESQUISAS REALIZADAS ..........................................................................................6
5. PROPOSTA DE SERVIÇO ............................................................................................7
6. MAPEAMENTO MENTAL..............................................................................................8
7. CARD SORTING ............................................................................................................8
8. WIREFRAMES .............................................................................................................10
9. COMBINAÇÃO DE CORES ........................................................................................13
CONCLUSÃO .......................................................................................................................15
BIBLIOGRAFIA.....................................................................................................................16

4. SERVIÇO WEB 2.0
GUIA DE SERVIÇOS ACHEI A..Z
1. ESCOPO DO PROJETO
Criar um serviço WEB 2.0. O projeto escolhido foi um Guia de Serviços,
onde os internautas poderão consultar os serviços oferecidos por empresas e
profissionais liberais como, pedreiro, médicos, jardineiros, pintores, advogados,
etc.
O público-alvo do projeto será composto por pessoas que tenham a
necessidade de localizar empresas e prestadores de serviço em sua região
(Cidade/Estado).
2. ORDENAÇÃO DOS TRABALHOS
O desafio inicial, em sala de aula, foi desenvolver um Serviço WEB 2.0.
Nossa primeira ideia foi oferecer um sistema, em que as pessoas pudessem
encontrar um profissional liberal, de forma rápida e confiável.
A primeira tarefa foi mostrar o nosso plano para a turma. Preparamos
uma apresentação de slides indicando os serviços que iríamos disponibilizar
para os internautas. Foi apresentado o protótipo do projeto, isto é, uma
pesquisa que contém uma visão geral do mercado e uma proposta de
ferramenta serviço.
Em seguida, elaboramos o mapeamento mental do projeto para explorar
de forma visual a organização das ideias. Para essa tarefa utilizamos uma
ferramenta chamada Mindmeister (www.mindmeister.com).
Concluída a organização das ideias, iniciamos a taxonomia do Serviço
WEB 2.0. Para isso utilizamos a técnica de Card-Sorting com o auxílio de
uma ferramenta online chamada WebSort (www.websort.net). Foram efetuados
testes com usuários através dessa ferramenta. A análise dos resultados dos
testes possibilitou a classificação das categorias que seriam aplicadas no
projeto.
Posteriormente a definição da estrutura das categorias, começamos o
desenvolvimento dos Wireframes, utilizando uma ferramenta online chamada
Mockingbird (http://gomockingbird.com/). Essa ferramenta facilitou a criação e a
visualização de partes da nossa aplicação.
Com a estrutura em mãos, partimos para o esboço da identidade visual
do projeto, criando combinações de cores para o projeto.
4

5. 3. PROTÓTIPO
Seguem abaixo as telas apresentada nos slides. As telas possuem: a
página inicial do site, o resultado da busca e o detalhamento das informações
dos usuários.
Protótipo Tela Inicial, Busca, Perfil Detalhado
5

6. 4. PESQUISAS REALIZADAS
Para verificar a viabilidade do projeto, fizemos uma pesquisa com o
objetivo de ter uma visão geral do mercado, buscando identificar produtos
semelhantes e o diferencial apresentado por cada um.
Para essa tarefa, elaboramos o seguinte questionário:
Pesquisa: Visão geral do mercado
1) Quem são os seus maiores concorrentes?
2) Quais são seus pontos fortes e fracos?
Forte:
Fraco:
3) Identifique as diferenças entre os serviços oferecidos por eles?
4) Baseado no serviço de nossos concorrentes, como podemos nos
diferenciar?
Essa pesquisa foi realizada em duas etapas:
Primeira etapa: âmbito regional.
Pesquisamos os serviços de guias oferecidos na região de Presidente
Prudente, SP. Identificamos cinco empresas que ofereciam o serviço de
anúncio de empresas. Todas trabalhavam da mesma forma, por meio da venda
de anúncios de empresas em seu portal.
Segunda etapa: âmbito nacional.
Pesquisamos grandes empresas que ofereciam serviços de guia de
empresas e serviços no Brasil. Observamos que apesar de algumas empresas
se destacarem pela qualidade da busca avançada e dos filtros de busca, não
notamos nenhum aspecto que denotasse uma ampla diferença entre as
empresas.
Conclusão da pesquisa
Após termos uma visão geral do mercado, concluímos que
precisávamos criar um serviço de guia que apresentasse uma característica
que o diferenciasse dos demais. Tendo em vista que se produzíssemos um
serviço que se limitasse a oferecer apenas anúncios de profissionais liberais,
este seria rapidamente absorvido pelas empresas concorrentes. A partir dessas
constatações, decidimos criar uma proposta de serviço, que oferecesse algo
novo: uma agenda para os usuários do guia.
6

7. 5. PROPOSTA DE SERVIÇO
Esta proposta tem o intuito de criar um vínculo com os usuários. Iremos
oferecer uma agenda on-line, em que os usuários poderão cadastrar seus
contatos e realizar pesquisas em nossa base de dados. Além disso, os
usuários poderão atribuir estrelas para os nossos anunciantes, contribuindo
para que o sistema possa classificar os anunciantes pela qualidade do serviço
realizado. Com isso, teremos uma busca calibrada pela quantidade de votos
positivos que nossos anunciantes receberem.
Por se tratar de um Serviço WEB 2.0, criamos uma agenda colaborativa.
Em outras palavras, o usuário poderá compartilhar seus contatos com outras
pessoas, selecionar os contatos favoritos e criar grupos de contatos.
Protótipo - Agenda
7

8. 6. MAPEAMENTO MENTAL
Foi utilizado o Brainstorming para explorar os conceitos que seriam
abordados pelo nosso projeto. Utilizamos uma ferramenta de mapeamento
mental para organizar e combinar as ideias. Com o uso da Mindmeister
(www.mindmeister.com) foi possível criar um mapa mental colaborativo, em
que cada integrante do grupo contribuiu para que montássemos o projeto de
acordo com Imagem X.
Imagem X - Mapa mental Guia A..Z
7. CARD SORTING
Card Sorting é uma técnica simples que permite obter um feedback dos
seus usuários sobre como a informação do site deve ser organizada. Essa
técnica é usada para descobrir como o usuário classifica determinada
informação em sua mente.
Os arquitetos de informação escrevem cartões e pedem aos
participantes para classificar os cartões em pilhas que sejam semelhantes.
Aplicando estatística sobre os testes realizados pelos participantes, os
pesquisadores são capazes de criar a taxonomia do projeto.
A taxonomia é o conjunto das categorias em que será classificado cada
conteúdo do website.
Para auxiliar no desenvolvimento dessa tarefa, utilizamos o Websort
(www.websort.net). Uma ferramenta on-line, em que as pessoas podem
participar da pesquisa de qualquer lugar do mundo. Basta enviar o link da
pesquisa para os participantes.
Por meio do Websort foi possível organizar as informações do site, com
participação direta do usuário, que nos mostrou pequenas falhas na
organização das categorias e nos ajudaram a reformulá-las.
8

9. Card Sorting em %
Card Sorting - Itens agrupados
9

10. 8. WIREFRAMES
Foram elaborados Wireframes do projeto para auxiliar na composição
dos requisitos do projeto. Wireframe é um desenho simples que demonstra, de
forma direta, como será a interface do projeto.
As imagens abaixo auxiliaram no desenvolvimento do layout.
Mapa das categorias do Site
10

11. Wireframe Página Inicial
Wireframe Resultado Busca Simples
11

12. Wireframe Resultado Busca Avançada
Wireframe Estrutura das Categorias
12

13. Wireframe Cadastro de Usuário
9. COMBINAÇÃO DE CORES
Combinação de Cores - Logotipo
13

14. Combinação de Cores - Layout 1
Combinação de Cores - Layout 2
14

15. Combinação de Cores - Layout 3
CONCLUSÃO
A cada etapa de estudo e testes, o projeto foi sendo aprimorado e
ganhando qualidade em termos de usabilidade. Partindo da ideia inicial da
criação de um simples Fórum, para a formulação de um portal com diversos
serviços e informações. Assim, constatamos a importância da execução de
testes, da validação e da prototipagem no decorrer do desenvolvimento de
qualquer projeto de sistemas web.
15

16. BIBLIOGRAFIA
CAINDO NA REAL. Disponível em: <http://gettingreal.37signals.com/
GR_por.php>. Acesso em: 24 maio 2010.
GUIA COLABORATIVO DE DESIGN DE INTERAÇÃO. Disponível em:
<http://www.faberludens.com.br/pt-br/node/26>. Acesso em: 15 maio 2010.
BRAINSTORMING. Disponível em: <http://www.faberludens.com.br/pt-
br/node/59>. Acesso em: 24 maio 2010.
CARDSORTING. Disponível em: < http://usabilidoido.com.br/
cardsorting_e_melhor que_buraco.html>. Acesso em: 25 maio 2010.
CARDSORTING. Disponível em: < http://websort.net/learnmore>. Acesso em:
25 maio 2010.
WIREFRAMES. Disponível em: <http://gomockingbird.com/>. Acesso em: 22
maio 2010.
WIREFRAMES. Disponível em:<http://writemaps.com/sitemaps/shareMap/
fppo0eldi84vasna2clvy1m83cww1quw7gc9vtqslx8epuis9e>. Acesso em: 22
maio 2010.
WIREFRAMES. Disponível em: <http://www.baixaki.com.br/info/976-o-que-e-
wireframe-.htm >. Acesso em: 22 maio 2010.
16