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

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

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

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

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

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

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

Card Sorting em % Card Sorting - Itens agrupados 9

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

Wireframe Página Inicial Wireframe Resultado Busca Simples 11

Wireframe Resultado Busca Avançada Wireframe Estrutura das Categorias 12

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

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

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

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

GUIA - Achei A..Z

by Daniel R. M. F. dos Santos on May 29, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 40

Statistics

GUIA - Achei A..Z — Document Transcript

http://artefatosinterativos.blogspot.com	39
http://www.artefatosinterativos.blogspot.com	1