56 :: Webdesign
Gastronomia
em tempos digitais colaborativos 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”.
estudo de caso - ComiAli.com :: 57
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
Guia por conter todas as informações frias que se
(http://migre.me/rvK). Quais foram os investimentos
espera desse tipo de publicação: endereço, telefone,
necessários para colocar o ComiAli.com no ar? E, até
foto, mapa etc. Wikipédia porque qualquer usuário
o momento, que tipo de retorno este projeto trouxe?
pode cadastrar restaurantes novos ou editar as informações ali disponíveis. O fator rede social está nas páginas pessoais que
Paulo :: Além do financeiro, o nosso maior investimento foi tempo e dedicação. Criar um portal com tanta interatividade necessita de muito
cada usuário tem no portal. Em seus perfis, os visitantes
planejamento, inspiração e suor. Hoje, quase dois
do site falam um pouco sobre si, se comunicam com
meses depois do lançamento, já temos restaurantes
outros usuários por mensagens e montam suas próprias
anunciantes, parcerias estratégicas (como, por
listas de restaurantes (“Já comi ali”, “Desejo comer
exemplo, o Outback) e estamos analisando a
ali”, “Recomendo comer ali” e “Nunca mais como ali”).
possibilidade de formar uma parceria com algum
Dessa forma, o ComiAli.com se torna uma espécie
grande grupo de mídia.
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
Wd :: No artigo “Adeus, usuários” (http://migre. me/rvM), René de Paula Jr. ressalta que “...Instant messengers, webmails, blogs, sites de fotos...
site foi o conceito “Twitter” de seguir as pessoas.
Essas coisas são ocas, elas só têm estofo quando as
Quando você segue alguém no ComiAli, você pode ver
pessoas as recheiam com mensagens e conteúdo.
todas as atualizações e contribuições daquele usuário
Essas coisas só têm vida porque as pessoas investem
na comunidade. A nossa proposta é que a opinião de
ali parte das suas vidas”. Quais foram as estratégias
todos tem o mesmo peso. Não importa se você estudou
que vocês criaram para tornar o projeto atrativo e de
no “Le Cordon Bleu” ou se é um simples apaixonado
uso habitual no cotidiano do usuário?
por comida sem formação acadêmica.
Paulo :: Tivemos um carinho muito grande com a parte visual do site. O designer responsável pelo site,
Wd :: O projeto foi lançado no final de fevereiro
Guilherme Neumann, é muito competente e fez vários
com uma grande festa que contou com a participação
testes até chegarmos ao layout atual. Focamos em um
de algumas personalidades do mundo artístico
layout simples, limpo e agradável. A home do portal é
58 :: Webdesign
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
completamente dinâmica. Portanto, todo dia que você
do projeto para melhorar a usabilidade. Analisando
entrar no portal, você vai ver as novas atualizações,
os casos de uso conseguimos realizar os ajustes
deixando a home sempre com uma cara nova.
necessários na navegação.
ZONAInternet :: A utilização de mashups, como
Conforme o projeto for crescendo, teremos
o Google Maps integrado, estimula a utilização do
novos testes e ajustes para atender cada vez mais às
site, concentrando todas as informações necessárias
necessidades dos visitantes.
em uma única interface. Wd :: Em termos gráficos, a paleta de cores Wd :: Na divisão dos elementos dispostos
do site envolve o uso do preto e do laranja na
pelas interfaces, vocês colocaram um campo de
apresentação das fontes, com um contraste em
buscas em lugar privilegiado no cabeçalho do site,
fundo branco. Quais fatores determinaram a escolha
dividindo espaço com o logotipo do projeto e com
da combinação cromática das interfaces?
a área de login. Quais estudos vocês realizaram
Paulo :: O uso dos tons alaranjados foi decidido
para definir qual seria a arquitetura de informação
principalmente por serem cores quentes e por
mais adequada para este projeto?
remeterem diretamente a comida/alimentação, o foco
Paulo :: Tivemos um grande cuidado ao
do site. O usuário, através da cor, já percebe que o
desenhar as interfaces. Todas as telas tiveram um
tema principal é comida. É um conjunto cromático
estudo cuidadoso em wireframes, nas quais os
quente, confortável e familiarizado com o tema
pesos de cada elemento foram minuciosamente
central do produto.
testados e melhorados. Depois que fechamos um modelo satisfatório,
O fundo branco com letras escuras (cinza escuro), além de facilitar a leitura do conteúdo, compõe o
fizemos testes de usabilidade com grupos distintos
padrão cromático do site, utilizado em toda linha
de usuários. Acertamos em alguns aspectos, mas em
gráfica on-line e off-line.
outros tivemos que ajustar e realizar afinamentos. Esse processo de melhorar a usabilidade é
Wd :: Outro detalhe é que a tipografia segue
contínuo e eterno. Quase que semanalmente estamos
uma família de fontes sem serifa e com tamanho que
adequando o layout para tornar a usabilidade mais
facilita a leitura do conteúdo publicado pelo site.
intuitiva para os nossos usuários.
Como vocês chegaram a tais definições e como elas
ZONAInternet :: Como o Paulo já mencionou acima, é necessário um constante acompanhamento
influenciam o período de experiência do usuário? Paulo :: A escolha da tipografia foi motivada,
estudo de caso - ComiAli.com :: 59
principalmente, por ser uma fonte de fácil leitura em
esta ferramenta e quais foram os desafios na
todos os tamanhos, simples, elegante, jovem e versátil
personalização de seu template?
- 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
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
Arial, não queríamos utilizar uma fonte que fosse
informativo gerado pelos administradores do site.
cansativa e exagerada. E é uma fonte semelhante
A maneira mais simples e eficiente de disponibilizar
à utilizada no logo do site (Helvetica), compondo a
esse conteúdo jornalístico é um blog.
identidade visual. ZONAInternet :: É um prazer trabalhar com um cliente que conhece o valor da Helvetica! (risos)
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
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
nos dá suporte e está sempre desenvolvendo novas funcionalidades e widgets. ZONAInternet :: O baixo custo e a flexibilidade
cuidados na hora de incluir este elemento dentro
que o WordPress oferece são imbatíveis. As
de um projeto interativo e digital? E, dentro de
possibilidades de customização são enormes e cada
um site, quando se nota a necessidade de criar
vez mais oferecemos este tipo de solução para nossos
um ícone para que o usuário consiga realizar uma
clientes. Outro ponto importante da utilização do
determinada função?
blog é que conseguimos ter mais controle sobre as
Paulo :: O uso de ícones em um projeto gráfico
informações relevantes para as ferramentas de busca.
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
Wd :: Falando ainda sobre o blog, alguns aspectos são essenciais para garantir sua evolução qualitativa (tanto em termos da publicação de
ou fazer um comentário sobre um restaurante, ele
posts, como a administração dos comentários por lá
sabe que o ícone “aspas” se refere a isso, agilizando e
postados) e evitar seu abandono meses após a sua
aprimorando a experiência dele no website.
publicação. Como vocês procuraram trabalhar esta
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
questão no blog do projeto? Paulo :: O relacionamento com leitores, respondendo às suas perguntas, gerando
60 :: Webdesign
“Baixo custo e a flexibilidade que o WordPress oferece são imbatíveis” (ZONAInternet) discussões e agradecendo por suas contribuições, é
ele é analisado por nossa equipe que vistoria
de extrema importância.
cuidadosamente o script para checar se não há
Temos também algumas regras que aderimos: por
nenhuma brecha de segurança. Além disso, é sempre
dia, nos comprometemos com o mínimo de dois posts
bom pesquisar sobre o aplicativo em fóruns, e
e, em relação aos comentários, temos uma regra de
conversar com alguém que já o instalou.
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
ZONAInternet :: Sempre aconselhamos a utilização de mashups, afinal, para que reinventar algo que temos a nossa disposição pronto e
em nossas reuniões com clientes. De nada vai
funcionando? Porém precisamos sempre avaliar se
adiantar um projeto bem realizado se as informações
este serviço é confiável, seguro e que impacto ele
e conteúdos necessários não estiverem atualizados
pode ter na performance do projeto.
constantemente. Precisamos utilizar a agilidade da internet a nosso favor.
Wd :: Durante os contatos pré-entrevista, vocês relataram que o desenvolvimento do projeto
Wd :: ASP.NET versão 3.5 e banco de dados
foi baseado na metodologia MVC (http://migre.
MySQL foram as tecnologias utilizadas para
me/rvN). Por que a escolha de tal metodologia
construção do ComiAli.com. Quais parâmetros
e quais são as suas principais vantagens na
a agência costuma avaliar na hora de definir as
concepção de projetos web?
plataformas de desenvolvimento de seus projetos? ZONAInternet :: Em nossos projetos, sempre
ZONAInternet :: A metodologia MVC é utilizada nos principais projetos desenvolvidos por nós. Essa
sugerimos a utilização de plataformas seguras,
metodologia se mostra fundamental em projetos de
que possuem grande aceitação do mercado e com
alta complexidade como o ComiAli. No nosso dia-a-
boa relação custo vs. benefício. Muitas vezes, o
dia, a principal vantagem é a separação dos arquivos
conhecimento que o cliente tem de uma plataforma é
usados pelos designers dos arquivos usados pelos
determinante para a sua utilização. Assim, adotamos a
desenvolvedores, diminuindo bastante os “conflitos”
plataforma mais adequada ao projeto.
entre as equipes e agilizando todo o processo.
Wd :: Na visualização das características sobre
Wd :: Na edição de abril, publicamos uma
um estabelecimento cadastrado no site, o usuário
entrevista sobre a influência das metodologias
conta com uma funcionalidade do Google Maps
ágeis na área de design de interfaces, incluindo
para localizá-lo geograficamente. Como surgiu
uma análise sobre o manifesto web design ágil
a ideia de utilizar este aplicativo e quais são os
(http://migre.me/rvO). Com a experiência na
cuidados na hora de implementar um serviço
construção do ComiAli.com, vocês poderiam
disponibilizado por terceiros?
relatar as transformações que estes conceitos têm
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
trazido no modelo de produção e estruturação das equipes das agências digitais? ZONAInternet :: Empresas como a nossa, que
tipo de mashup, portanto tivemos um suporte para
começaram como empresas de criação e com o
implementar essa funcionalidade.
tempo passaram a oferecer soluções complexas, são
Antes de instalar qualquer serviço de terceiros,
naturalmente avessas a longos processos de análise
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)