56 :: Webdesign

Sexta-feira chegando e vai batendo aquela

vontade de tomar uma cerveja estupidamente gelada,

acompanhada de uma porção generosa de bolinhos de

bacalhau. Agora, onde encontrar um lugar que forneça

boas dicas de estabelecimentos aptos a atender

tamanho anseio?

Talvez sua busca encontre tais respostas no

ComiAli.com (www.comiali.com), uma espécie de guia

on-line e rede social gastronômica, concebida através

dos princípios da web colaborativa e compartilhada.

O planejamento e o desenvolvimento tecnológico

do site ficaram a cargo da agência ZONAInternet.

com (www.zonainternet.com), e o designer Guilherme

Neumann (www.guilhermeneumann.com) pela

concepção do layout. Nesta entrevista, Paulo Klien

Veja, sócio do site, Daniel Maia e André Tenenbaum,

diretores da agência, explicam os desafios para tornar

funcional a dinâmica deste ambiente.

Wd :: Pesquisas recentes apontam que os usuários

brasileiros de internet são afeitos por mídias sociais

(http://migre.me/rvI). Como vocês procuraram

aperfeiçoar as boas práticas já aplicadas em outras

redes sociais populares pela web, como Orkut,

Facebook e Wikipédia, na construção deste projeto?

Paulo :: Gostamos de descrever o ComiAli.com

como uma mistura entre “Guia + Wikipédia + Orkut”.

Gastronomia em tempos digitais colaborativos

estudo de caso - ComiAli.com :: 57

Guia por conter todas as informações frias que se

espera desse tipo de publicação: endereço, telefone,

foto, mapa etc. Wikipédia porque qualquer usuário

pode cadastrar restaurantes novos ou editar as

informações ali disponíveis.

O fator rede social está nas páginas pessoais que

cada usuário tem no portal. Em seus perfis, os visitantes

do site falam um pouco sobre si, se comunicam com

outros usuários por mensagens e montam suas próprias

listas de restaurantes (“Já comi ali”, “Desejo comer

ali”, “Recomendo comer ali” e “Nunca mais como ali”).

Dessa forma, o ComiAli.com se torna uma espécie

de “Orkut gastronômico”, que reúne milhares de

pessoas em uma comunidade apaixonada por comida,

gerando discussões interessantes sobre o assunto.

Outro aspecto interessante que integramos ao

site foi o conceito “Twitter” de seguir as pessoas.

Quando você segue alguém no ComiAli, você pode ver

todas as atualizações e contribuições daquele usuário

na comunidade. A nossa proposta é que a opinião de

todos tem o mesmo peso. Não importa se você estudou

no “Le Cordon Bleu” ou se é um simples apaixonado

por comida sem formação acadêmica.

Wd :: O projeto foi lançado no final de fevereiro

com uma grande festa que contou com a participação

de algumas personalidades do mundo artístico

Google Maps ajuda a fornecer informações mais precisas sobre a localidade dos restaurantes pesquisados

O uso de ícones pela interface é um elemento que contribui para a navegação do usuário pelo site

(http://migre.me/rvK). Quais foram os investimentos

necessários para colocar o ComiAli.com no ar? E, até

o momento, que tipo de retorno este projeto trouxe?

Paulo :: Além do financeiro, o nosso maior

investimento foi tempo e dedicação. Criar um

portal com tanta interatividade necessita de muito

planejamento, inspiração e suor. Hoje, quase dois

meses depois do lançamento, já temos restaurantes

anunciantes, parcerias estratégicas (como, por

exemplo, o Outback) e estamos analisando a

possibilidade de formar uma parceria com algum

grande grupo de mídia.

Wd :: No artigo “Adeus, usuários” (http://migre.

me/rvM), René de Paula Jr. ressalta que “...Instant

messengers, webmails, blogs, sites de fotos...

Essas coisas são ocas, elas só têm estofo quando as

pessoas as recheiam com mensagens e conteúdo.

Essas coisas só têm vida porque as pessoas investem

ali parte das suas vidas”. Quais foram as estratégias

que vocês criaram para tornar o projeto atrativo e de

uso habitual no cotidiano do usuário?

Paulo :: Tivemos um carinho muito grande com a

parte visual do site. O designer responsável pelo site,

Guilherme Neumann, é muito competente e fez vários

testes até chegarmos ao layout atual. Focamos em um

layout simples, limpo e agradável. A home do portal é

completamente dinâmica. Portanto, todo dia que você

entrar no portal, você vai ver as novas atualizações,

deixando a home sempre com uma cara nova.

ZONAInternet :: A utilização de mashups, como

o Google Maps integrado, estimula a utilização do

site, concentrando todas as informações necessárias

em uma única interface.

Wd :: Na divisão dos elementos dispostos

pelas interfaces, vocês colocaram um campo de

buscas em lugar privilegiado no cabeçalho do site,

dividindo espaço com o logotipo do projeto e com

a área de login. Quais estudos vocês realizaram

para definir qual seria a arquitetura de informação

mais adequada para este projeto?

Paulo :: Tivemos um grande cuidado ao

desenhar as interfaces. Todas as telas tiveram um

estudo cuidadoso em wireframes, nas quais os

pesos de cada elemento foram minuciosamente

testados e melhorados.

Depois que fechamos um modelo satisfatório,

fizemos testes de usabilidade com grupos distintos

de usuários. Acertamos em alguns aspectos, mas em

outros tivemos que ajustar e realizar afinamentos.

Esse processo de melhorar a usabilidade é

contínuo e eterno. Quase que semanalmente estamos

adequando o layout para tornar a usabilidade mais

intuitiva para os nossos usuários.

ZONAInternet :: Como o Paulo já mencionou

acima, é necessário um constante acompanhamento

58 :: Webdesign

do projeto para melhorar a usabilidade. Analisando

os casos de uso conseguimos realizar os ajustes

necessários na navegação.

Conforme o projeto for crescendo, teremos

novos testes e ajustes para atender cada vez mais às

necessidades dos visitantes.

Wd :: Em termos gráficos, a paleta de cores

do site envolve o uso do preto e do laranja na

apresentação das fontes, com um contraste em

fundo branco. Quais fatores determinaram a escolha

da combinação cromática das interfaces?

Paulo :: O uso dos tons alaranjados foi decidido

principalmente por serem cores quentes e por

remeterem diretamente a comida/alimentação, o foco

do site. O usuário, através da cor, já percebe que o

tema principal é comida. É um conjunto cromático

quente, confortável e familiarizado com o tema

central do produto.

O fundo branco com letras escuras (cinza escuro),

além de facilitar a leitura do conteúdo, compõe o

padrão cromático do site, utilizado em toda linha

gráfica on-line e off-line.

Wd :: Outro detalhe é que a tipografia segue

uma família de fontes sem serifa e com tamanho que

facilita a leitura do conteúdo publicado pelo site.

Como vocês chegaram a tais definições e como elas

influenciam o período de experiência do usuário?

Paulo :: A escolha da tipografia foi motivada,

Comentários e sugestões dos usuários são um dos grandes atrativos para tornar o guia popular

Blog do ComiAli, concebido em WordPress, traz uma série de dicas e informações gastronômicas

principalmente, por ser uma fonte de fácil leitura em

todos os tamanhos, simples, elegante, jovem e versátil

- uma fonte padrão em todos os sistemas operacionais

e de fácil renderização nos browsers.

O usuário de internet já está acostumado com

Arial, não queríamos utilizar uma fonte que fosse

cansativa e exagerada. E é uma fonte semelhante

à utilizada no logo do site (Helvetica), compondo a

identidade visual.

ZONAInternet :: É um prazer trabalhar com um

cliente que conhece o valor da Helvetica! (risos)

Wd :: No processo de orientação visual do

ambiente, vocês utilizaram diversos ícones que

facilitam a navegação pelo projeto. Quais são os

cuidados na hora de incluir este elemento dentro

de um projeto interativo e digital? E, dentro de

um site, quando se nota a necessidade de criar

um ícone para que o usuário consiga realizar uma

determinada função?

Paulo :: O uso de ícones em um projeto gráfico

visa, além de facilitar navegação e entendimento dos

produtos, familiarizar o usuário com as ferramentas

que o ComiAli.com oferece.

Quando um visitante do site precisa encontrar

ou fazer um comentário sobre um restaurante, ele

sabe que o ícone “aspas” se refere a isso, agilizando e

aprimorando a experiência dele no website.

A escolha dos ícones foi definida após exaustiva

análise do uso de pictogramas na internet.

Precisávamos entender com o que o usuário estava

acostumado e familiarizado e, a partir disso,

desenharmos elementos que se adequassem com as

nossas necessidades e a identidade do portal.

ZONAInternet :: Não só os ícones, mas as

mensagens de alerta também foram pensadas

e planejadas para auxiliarem na navegação, não

deixando dúvidas sobre o uso das funcionalidades.

Wd :: O blog tem sido uma ferramenta

muito útil na produção de conteúdo pela web,

além de estimular a participação de usuários

em um ambiente. Neste projeto, vocês criaram

um blog (www.comialiblog.com), desenvolvido

em WordPress. Por que vocês escolheram

estudo de caso - ComiAli.com :: 59

esta ferramenta e quais foram os desafios na

personalização de seu template?

Paulo :: Queríamos ter uma separação muito

grande - e clara - entre o conteúdo colaborativo

gerado pelos usuários e conteúdo jornalístico e

informativo gerado pelos administradores do site.

A maneira mais simples e eficiente de disponibilizar

esse conteúdo jornalístico é um blog.

Escolhemos o WordPress porque é uma

ferramenta muito poderosa. Além de o módulo básico

ser gratuito, tem uma comunidade de apoio muito

ativa. Assim, podemos ter uma comunidade que

nos dá suporte e está sempre desenvolvendo novas

funcionalidades e widgets.

ZONAInternet :: O baixo custo e a flexibilidade

que o WordPress oferece são imbatíveis. As

possibilidades de customização são enormes e cada

vez mais oferecemos este tipo de solução para nossos

clientes. Outro ponto importante da utilização do

blog é que conseguimos ter mais controle sobre as

informações relevantes para as ferramentas de busca.

Wd :: Falando ainda sobre o blog, alguns

aspectos são essenciais para garantir sua evolução

qualitativa (tanto em termos da publicação de

posts, como a administração dos comentários por lá

postados) e evitar seu abandono meses após a sua

publicação. Como vocês procuraram trabalhar esta

questão no blog do projeto?

Paulo :: O relacionamento com leitores,

respondendo às suas perguntas, gerando

60 :: Webdesign

discussões e agradecendo por suas contribuições, é

de extrema importância.

Temos também algumas regras que aderimos: por

dia, nos comprometemos com o mínimo de dois posts

e, em relação aos comentários, temos uma regra de

aprovar ou recusar em, no máximo, quatro horas. É claro

que, se for de madrugada, fica para o dia seguinte.

ZONAInternet :: Este é um assunto recorrente

em nossas reuniões com clientes. De nada vai

adiantar um projeto bem realizado se as informações

e conteúdos necessários não estiverem atualizados

constantemente. Precisamos utilizar a agilidade da

internet a nosso favor.

Wd :: ASP.NET versão 3.5 e banco de dados

MySQL foram as tecnologias utilizadas para

construção do ComiAli.com. Quais parâmetros

a agência costuma avaliar na hora de definir as

plataformas de desenvolvimento de seus projetos?

ZONAInternet :: Em nossos projetos, sempre

sugerimos a utilização de plataformas seguras,

que possuem grande aceitação do mercado e com

boa relação custo vs. benefício. Muitas vezes, o

conhecimento que o cliente tem de uma plataforma é

determinante para a sua utilização. Assim, adotamos a

plataforma mais adequada ao projeto.

Wd :: Na visualização das características sobre

um estabelecimento cadastrado no site, o usuário

conta com uma funcionalidade do Google Maps

para localizá-lo geograficamente. Como surgiu

a ideia de utilizar este aplicativo e quais são os

cuidados na hora de implementar um serviço

disponibilizado por terceiros?

Paulo :: Já tínhamos visto esse aplicativo em sites

que frequentamos e achamos que seria muito prático

incluir essa função no site. O Google incentiva esse

tipo de mashup, portanto tivemos um suporte para

implementar essa funcionalidade.

Antes de instalar qualquer serviço de terceiros,

ele é analisado por nossa equipe que vistoria

cuidadosamente o script para checar se não há

nenhuma brecha de segurança. Além disso, é sempre

bom pesquisar sobre o aplicativo em fóruns, e

conversar com alguém que já o instalou.

ZONAInternet :: Sempre aconselhamos a

utilização de mashups, afinal, para que reinventar

algo que temos a nossa disposição pronto e

funcionando? Porém precisamos sempre avaliar se

este serviço é confiável, seguro e que impacto ele

pode ter na performance do projeto.

Wd :: Durante os contatos pré-entrevista,

vocês relataram que o desenvolvimento do projeto

foi baseado na metodologia MVC (http://migre.

me/rvN). Por que a escolha de tal metodologia

e quais são as suas principais vantagens na

concepção de projetos web?

ZONAInternet :: A metodologia MVC é utilizada

nos principais projetos desenvolvidos por nós. Essa

metodologia se mostra fundamental em projetos de

alta complexidade como o ComiAli. No nosso dia-a-

dia, a principal vantagem é a separação dos arquivos

usados pelos designers dos arquivos usados pelos

desenvolvedores, diminuindo bastante os “conflitos”

entre as equipes e agilizando todo o processo.

Wd :: Na edição de abril, publicamos uma

entrevista sobre a influência das metodologias

ágeis na área de design de interfaces, incluindo

uma análise sobre o manifesto web design ágil

(http://migre.me/rvO). Com a experiência na

construção do ComiAli.com, vocês poderiam

relatar as transformações que estes conceitos têm

trazido no modelo de produção e estruturação das

equipes das agências digitais?

ZONAInternet :: Empresas como a nossa, que

começaram como empresas de criação e com o

tempo passaram a oferecer soluções complexas, são

naturalmente avessas a longos processos de análise

“Baixo custo e a flexibilidade que o WordPress oferece são imbatíveis” (ZONAInternet)

estudo de caso - ComiAli.com :: 61

e documentação.

Nossa equipe, hoje com 11 pessoas, trabalha

com total integração, comunicação direta

em todos os níveis e todos possuem grandes

responsabilidades, e poder de decisão, nos projetos

que participam.

O ComiAli foi todo desenvolvido em torno de

sua interface e a documentação inicial do projeto era

composta pelo layout das telas, o wireframe e um

protótipo HTML. A documentação de TI foi feita só

depois da aprovação desses documentos iniciais.

Wd :: No artigo “Regras de uso e de

privacidade em sites e em portais”, o advogado

Gilberto Martins de Almeida destaca que

“à medida que websites e portais procuram

cativar visitantes e fidelizar clientela, formando

comunidades em ambientes tão autossuficientes

quanto seja possível, a atratividade e a segurança

do universo que visam formar dependem de certas

regras”. No formulário de cadastro de usuário

no ComiAli.com, o Termo de Uso e a Política de

Privacidade do site estão disponíveis de forma

bem clara. De que maneira esta etapa foi planejada

dentro do desenvolvimento do projeto?

Paulo :: Acho que a palavra mais importante é

“transparência”, afinal temos acesso às informações

pessoais dos usuários. Nossa obrigação é tratar

todos os visitantes do site com respeito e

sinceridade. É por isso que tanto nosso termo de

uso quanto a nossa política de privacidade estão

presentes (de forma visível e clara) no cadastro e no

rodapé do site. Os nossos usuários podem acessar

esses documentos sempre que lhes for conveniente.

“O ComiAli.com se torna uma espécie de ‘Orkut gastronômico’, que reúne milhares de pessoas em uma comunidade apaixonada por comida” (Paulo Klien)