Magel Studio

Este mês fui um dos convidados para fazer uma entrevista para a matéria de capa da edição da revista Webdesign que fala da produção de wireframes e a organização da estrutura de um site.
A revista está mudando de nome, dando lugar à revista Wide, que terá uma gama mais ampla de assuntos ligados a internet e começará a circular em setembro.
Antes da publicação, o Luis Rocha, ex-diretor de redação da revista me enviou as perguntas que serviram para a elaboração da matéria junto com outros dois profissionais, porém nem todas as respostas foram publicadas, e como achei interessante a discussão em cima do assunto, pedi a permissão da editora para que eu pudesse publicar as perguntas e respostas na íntegra. Aí estão elas:

1 – Em nossas últimas edições, profissionais do mercado brasileiro de internet apontaram a arquitetura de informação como uma área promissora para quem está decidido a se especializar na área. Diante da sua experiência no segmento, quais são os principais desafios para tornar esta prática comum na criação e no desenvolvimento de projetos digitais e interativos?
O desafio, como toda nova profissão está na cultura dos profissionais que ainda não sabem muito bem o que é e para que serve a AI, principalmente o próprio cliente. Não saber o valor que a área pode proporcionar ao negócio dificulta na hora pedir um prazo maior para uma pesquisa de usuários, card sorting ou um estudo de personas, por exemplo. O que acaba acontecendo na maior parte das vezes é partir direto para a prototipação, sem passar pelas etapas anteriores que também são muito importantes. Então o que pesa muito no dia-a-dia são os prazos. Apesar de sabermos em nossa formação que todas as etapas são importantes, muitas empresas e clientes ainda não sacaram o real valor das etapas que um projeto de AI precisa ter, então o desafio é usarmos nosso conhecimento para mostrar que todos os passos são muito importantes para um melhor resultado no retorno sobre o investimento do cliente.

2 – Dentre as principais atribuições envolvidas no trabalho com arquitetura de informação, o wireframe surge como o documento que vai apresentar a estrutura funcional e os elementos que vão compor uma interface. Na delimitação das áreas e na distribuição e atribuição de pesos dos elementos a serem incluídos em ambientes interativos e manipuláveis, quais são os subsídios fundamentais para se garantir a produção adequada de um wireframe?
Primeiramente saber quem é o público e qual o objetivo do projeto, sempre. Depois disso definir junto à área de tecnologia quais são as plataformas ideais que podem atender as necessidades deste público em questão e, por último e não menos importante, das informações que serão inseridas neste site/software, afinal nós arquitetos temos como principal matéria prima, a informação.

3 – Podemos dizer que a produção de wireframes é o pontapé inicial no processo de diagramação de interfaces digitais. Pensando nisso, de que maneira outras áreas (design e tecnologia) devem ser envolvidas neste processo? E como garantir um bom fluxo de trabalho para evitar ruídos/atritos entre arquiteto de informação e designer?
As duas áreas são muito importantes para a construção de um wireframe. A área de tecnologia deve ser envolvida para alinharmos as expectativas tecnológicas do projeto, suas limitações técnicas e até no sentido de nos ajudar a encontrar uma solução que pode ser mais simples do que estávamos imaginando.
Arquitetos de Informação nem sempre foram designers no passado. Uns vieram do Jornalismo, da publicidade, da biblioteconomia e etc., por isso é muito importante que o designer exponha a sua visão sobre a forma que isso pode ter e o nível de interações que ele imagina de acordo com o briefing, então para que não hajam esses ruídos, acho que o projeto precisa ser sempre alinhado com todos, desde o início.

4 – No artigo “Quanto mais simples o Wireframe, melhor” (http://tinyurl.com/79-capa-5), Frederick van Amstel analisa o envolvimento de clientes na etapa de produção do wireframe. Pela sua experiência, quais são as vantagens dessa estratégia?
Envolver o cliente na criação do wireframe pode ajudar na visão que ele tem sobre a estratégia de negócio, aprendemos muito com eles. Neste ponto eu concordo. Por outro lado não é ele quem vai navegar no site e sim o cliente dele (o usuário). Quem nos contrata pode acabar influenciando no nosso estudo com aqueles achismos que nós sempre tememos, por isso tem que haver um limite. Fazemos os wireframes porque temos embasamento de estudos, padrões de comportamento, navegação e de um briefing anterior.
O que pode ser ainda melhor então é envolver o cliente do cliente, que é o modelo mental e usuário final do produto. Este sim pode nos mostrar como é a interface ideal para ele.

5 – No artigo “Wireframe, documento cada vez mais importante” (http://tinyurl.com/79-capa-4), Leonardo Oliveira ressalta que “o arquiteto pode contribuir com a usabilidade de um site no momento em que está construindo os wireframes, ao evitar conteúdos redundantes e sobreposição de conteúdo, além de layouts complexos ou links escondidos”. Pensando nisso, como os conceitos de usabilidade devem ser aplicados na produção de wireframes?
A Arquitetura de Informação envolve o conhecimento de várias disciplinas. É importante saber um pouco de programação, de design e saber escrever bem. É difícil prever o comportamento do usuário por mais que o estudemos. Só iremos descobrir se a usabilidade é eficiente após alguns testes, porém, seu conceito deve andar junto com a criação de um wireframe, assim minimizamos a probabilidade de erros no final.

6 – Em discussão levantada no fórum Rede Design Digital (http://tinyurl.com/79-capa-1), arquitetos de informação analisam as transformações causadas no processo de trabalho desses profissionais pelas metodologias de desenvolvimento ágil. Em sua opinião, quais mudanças essas metodologias trouxeram para a produção de wireframes?
Como muitos disseram no fórum e como o próprio nome do método diz, o wireframe acaba tendo que ser feito por etapas, por isso algumas funcionalidades devem ser desenhadas no Sprint em que as Histórias serão escritas. Então certos detalhamentos e avanços devem ser deixados de lado, construindo as telas do wireframe aos poucos de acordo com as prioridades elencadas pelo P.O. Tive um pouco de dificuldades com o método no início, pois era difícil enxergar o projeto fragmentado e ter que fazê-lo em pequenas dosagens.
Na atual empresa costumo ler planejamento, escopo e ter uma visão macro. Construo o wireframe enxergando o projeto como um todo, envolvendo a área de TI, conteúdo e design e finalizando o protótipo antes do início da produção.
Também acho que metodologias ágeis não se aplicam a tudo, principalmente quando não há prazos. Neste caso o que acaba sendo aplicado é a boa e velha metodologia tipo WaterFall.

7 – No artigo “Design estrutural (wireframes)” (http://tinyurl.com/79-capa-2), é apresentada uma lista de softwares para produção de wireframes. Além do processo computadorizado, é possível também criar wireframes através de lápis e papel, com o uso até de régua especial (http://tinyurl.com/79-capa-3). Dentre as opções disponíveis pelo mercado, quais são os parâmetros que você utiliza na hora de analisar/escolher a ferramenta mais apropriada?
O primeiro parâmetro é o próprio prazo. Dentro do tempo normal costumo realizar meus protótipos em Axure, ele é prático e permite que alterações de estrutura sejam rapidamente feitas. Contudo a ferramenta é o de menos, o importante é a agilidade que o Arquiteto tem em trabalhar com ela e o entendimento do cliente na visualização desta documentação.
Quando precisamos de mais agilidade na entrega de um projeto, faço sketches de algumas telas e funcionalidades junto com o Diretor de Arte, assim ele já vai trabalhando na arte enquanto eu fotografo os esboços e envio com explicações para o cliente aprovar. De qualquer maneira gosto sempre de documentar via software, mesmo que o faça depois dos esboços já encaminhados para a arte.

8 – Falando especificamente sobre tecnologia, a produção dos wireframes poderá exercer algum tipo de influência na escolha adequada das plataformas tecnológicas a serem aplicadas nas etapas de desenvolvimento e programação funcional das interfaces?
Desde o início as áreas de TI, gerência de projeto e design devem ser envolvidas. Nas conversas iniciais conseguimos definir qual será tecnologia a ser utilizada, evitando que a etapa de arquitetura influencie nos demais processos.

9 – Existem três modelos para o desenvolvimento de um wireframe: de baixa fidelidade (protótipo com pouco detalhamento), de média e de alta fidelidade (com alto nível de detalhamento). Considerando as atuais necessidades e particularidades envolvidas com a produção de projetos web, é possível apontar um modelo ideal? Quais são as vantagens e as desvantagens na aplicação de cada um desses modelos?
Como já dito aqui, um dos parâmetros para se definir qual modelo a ser aplicado é o próprio prazo. Para prazos curtos, sketches e protótipos de baixa fidelidades ou para projetos que não exijam tantos detalhamentos, deixando também a equipe de arte mais livre para criar. E protótipos de alta fidelidade para projetos que necessitem de maiores detalhamentos, como portais, aplicativos, softwares, sites de bancos e comércio online.

Veja também:
Entrevista na revista Plug