guia - achei a..z

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

UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA – DEPARTAMENTO DE INFORMÁTICA

ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB


Trabalho de pós-graduação apresentado à disciplina de Design de Interação, ministrada pelo professor Frederick Van

Amstel.

MARINGÁ 2010

Sumário 1. ESCOPO DO PROJETO ...............................................................................................4

2. ORDENAÇÃO DOS TRABALHOS ...............................................................................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


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.

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

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.

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

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.

9

Card Sorting em %

Card Sorting - Itens agrupados

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

11

Wireframe – Página Inicial

Wireframe – Resultado Busca Simples

12

Wireframe – Resultado Busca Avançada

Wireframe – Estrutura das Categorias

13

Wireframe – Cadastro de Usuário

9. COMBINAÇÃO DE CORES

Combinação de Cores - Logotipo

14

Combinação de Cores - Layout 1


15


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.

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.

guia - achei a..z

Technology