Nos dias 21 e 22 de outubro aconteceu o 5º EBAI – Encontro Brasileiro de Arquitetura de Informação e desta vez resolvi fazer o registro do que rolou em forma de palavras-chave em meu Sketchbook.
Cada palestra ganhou uma folha de anotações e com elas fiz um painel para poder baixar e imprimir:

Além disso disponibilizei as páginas separadas de cada palestra para quem quiser baixar.
Então o que está esperando, baixe aqui o zip com os sketches!

UX no Limite: como fazer um bom trabalho em experiência do usuário apesar das limitações

Search Engine Optimization – SEO: a contribuição do Bibliotecário na otimização

Crowd Sourcing: Usando as comunidades virtuais para gerar e discutir ideias de design

Interatividade + Tv

A influência das cores na usabilidade de interfaces através do design centrado no comportamento cultural do usuário

UX=MKT²

Design Livre e Cultura Colaborativa

Interface para um ambiente de consumo + Participação: um widget social para a experiência Globo.com

Panorama do Mercado de Trabalho

Arquitetura de Informação sem wireframe

Design em sites de encontro: Promessas de amor verdadeiro, rápido, anônimo e gratuito

Pratique o que você prega: sua entrevista de trabalho é sua primeira entrega

Eric Reiss (Fat DUX)

E se você quiser baixar um ux-wallpaper maneiro para o seu Lap ou Desktop disponibilizei também em alguns tamanhos:

1366×768  |  1024×768  |  1280×800  |  1440×900  |  1280×1024  |  1920×1080  |  1680×1050

Baixe aqui o ZIP com todos eles! (A cara deles é essa aí em baixo)

Foi feito um resumão do EBAI 2011 no Blog Arquitetura de Informação do Fabricio Teixeira. Vale a pena dar uma olhada!

Curtiu? Comenta aí!

Passei a semana preparando a apresentação junto com a Lu, a Melina e a Tassia. Ensaiamos rapidamente durante a semana e fomos o segundo grupo a apresentar na sexta-feira.
?Eu nunca tinha apresentado para uma plateia grande como a do EBAI, somente para pequenos grupos na Faculdade e na Pós, mas a apresentação rolou legal e eu consegui falar com bastante tranquilidade.

Rolaram muitos cases e palestras interessantes, mas destaco a palestra apresentada pela Lu Cattony e João de Freitas. Eles falam do design estratégico e do papel do Arquiteto da Informação hoje, onde mostraram um vídeo sensacional feito por eles ilustrando um pouco do que o Arquiteto faz hoje e que nos faz refletir sobre o que e de que forma estamos trabalhando:

Modern Times 2.0 from João de Freitas on Vimeo.

Depois do vídeo, na apresentação é proposto uma forma mais ampla de pensar Arquitetura e um case muito rico em qualidade e inteligência de projeto. Me identifiquei bastante com o pensamento. Vale a pena ver a apresentação.

Outra palestra que também gostei bastante foi a última de sábado, apresentada pelo Marcelo Eduardo Oliveira do Institito Nokia de Tecnologia (INdT).
O Marcelo falou muito dos processos que os designers e desenvolvedores INdT usam para criar interfaces e soluções para celular e ainda fez uma brincadeira interativa legal utilizando o recurso de realidade aumentada com cartões coloridos distribuídos na platéia.

Além de assistir a palestras muito interessantes fiz alguns contatos bem legais e conheci pessoalmente uma galera gente boa pacas que eu já acompanhava a um tempo por Blogs e Twitter. Entre eles, a Luciana Cattony do Blog Planta Baixa, Rogério Pereira, Rodrigo Teixeira do Blog Alternativa Coletiva e o Fred van Amstel do Usabilidoido.

Então é isso.

Até o próximo EBAI!

Após a etapa de planejamento e início do levantamento de conteúdo, eu e as áreas envolvidas no início do projeto fomos até Brasília fechar algumas idéias e sketches juntamente com o cliente, pois o cronograma apertado não permitia que houvesse nenhum tipo de erro ou refação.

Numa situação dessas o exercício exige concentração, agilidade de resposta e que você esteja em um dia inspirador, de preferência

Abaixo alguns dos sketches feitos lá, iniciando com exemplos e sugestões de navegação a partir de poucos links:

Na volta, com uma idéia já desenvolvida na reunião, documentei a estrutura da informação colorizando algumas áreas que tinham relação para que o entendimento fosse facilmente assimilado pelo cliente na aprovação.

Infoestrutura aprovada, parti para a etapa de prototipação, construindo basicamente uma home, uma matriz de uma interna e uma página só com templates que pudessem se encaixar de acordo com os tipos de conteúdo que pudessem entrar (áudio, vídeo, galeria de fotos, etc).

Sabemos que em muitos casos, principalmente naqueles que envolve Flash, o designer não precisa seguir a risca o wireframe, possibilitando maior liberdade de criação, então a arte seguiu a informação e deu uma identidade legal para o assunto.

AI: Marco Moreira
Design: Caio Andreolli
Flash: Samir Saikali

Acesse o site

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

O planejamento, conteúdo, arquitetura de informação, design, animação e desenvolvimento foram feitos pela TV1. Eu cuidei da parte de Arquitetura de Informação, começando pela infoestrutura:

O especial fala da história de Brasília, e além de textos, contém vídeos, áudios e galerias de imagens. A proposta foi fazer uma linha do tempo diferenciada, um pouco fora do padrão de linha do tempo que estamos habituados a ver, então parti para a segunda etapa como de costume: os benchmarks e em seguida os Rafes:

Para que todo o conteúdo não ficasse dentro de menus tradicionais, a ideia é que a navegação fosse feita através de três principais áreas (A cidade, O povo e A história) e a partir daí filtros que o usuário pudesse selecionar conforme o seu interesse.

Enquanto os rafes passavam pela aprovação, passei para a arte ir adiantando, pois como não tínhamos muito prazo as etapas tiveram que ser feitas no mínimo de tempo.

Conceito aprovado, iniciei então o desenho dos wireframes.
Não costumo colorizar os protótipos que faço, justamente para que a cor não influencie nas decisões do cliente, mas desta vez fiz questão de colorir algumas áreas, pois a presença da cor neste caso foi essencial para mostrar o funcionamento da navegação do site.
E como não se trata de uma navegação comum, criamos também mais de uma opção de navegação: Através das setas do teclado, pela roda do mouse, clicando nos conteúdos e finalmente pela própria timeline padrão que fica localizada abaixo do conteúdo central.

E para que não precisasse desenhar todas as telas, fiz uma página só de templates prevendo comportamentos diversos, como texto+imagem, texto+vídeo, texto+áudio e etc. Assim o editorial poderia escolher o template de acordo com a característica de cada conteúdo.

Enfim algumas telas do layout que o Caio Andreolli, Diretor de Arte aqui da agência desenhou:

O trabalho de motion e programação foi feito pelo Alessandro Luz

Acesse o hotsite

Finalizei minha Pós Graduação em Arquitetura de Informação neste sábado, dia da apresentação final.  Trabalhos de alto nível que surpreenderam a banca. Foi show de bola!

Meu professor Fabio Palamedi fez um post no Blog dele passando suas impressões. Vale a pena ler.

Bom, nosso trabalho foi sobre futebol e aquele post que fiz de uma pesquisa a respeito nos ajudou muito no trabalho. Fico muito agradecido aos que gastaram o precioso tempo fazendo!
Por enquanto não posso revelar detalhes do projeto, mas posso mostrar algumas telas da apresentação que fiz em Flash:

A Capa

A escalação

Navegação tipo estratégia de jogo

Uma das telas dentro da navegação da apresentação

Não fazia parte do trabalho, mas aproveitei o gancho para inscrever mais um job no IdeaFixa:

Arte para o IdeaFixa

E os grandes méritos para o sucesso do meu trabalho de conclusão também se devem às talentosas meninas que estavam no meu grupo: Luciana Alencar, Tassia Spineli e Melina Aves (estão nesta mesma ordem na 2ª tela da apresentação). Valeu muito!

Hoje foi o dia de lançamento do novo Portal Brasil, o que para mim é motivo de grande orgulho. Com uma equipe de aproximadamente 200 profissionais de diversas áreas, pude participar no desenvolvimento da Arquitetura de Informação. Motivo de orgulho por fazer parte de um projeto desta dimensão e de colaborar com o lindo trabalho que está sendo feito para o País.
Há muito ainda o que fazer, muito trabalho pela frente para oferecer o melhor serviço para o cidadão brasileiro.

O novo Portal Brasil é um canal aberto para o brasileiro se informar do que está acontecendo no País, opinando, tendo acesso às novidades, serviços, entrevistas, áudios, vídeos nas áreas de economia, educação, esporte, meio ambiente, geografia, história, saúde e muito mais.

Você também pode seguir o Portal Brasil no Twitter

Bom, a edição saiu agora em agosto e o que eu não previa era mudar de empresa antes do lançamento da edição. Pois é, surgiu uma oportunidade na TV1 e agora estou indo cuidar de um grande projeto. Pois bem, avisei o pessoal da redação a respeito da mudança e eles atualizaram a matéria antes que fosse impressa. Veja como saiu:

VAGAS ABERTAS
No passado recente, eles não teriam emprego na Abril. Suas funções simplesmente não existiam
texto Amanda Zacarkim e Elisa Tozzi design Marina Brant foto Diogo Salles

Marco Moreira_Arquiteto de Informação_
Se você nunca construiu um prédio, como pode ser arquiteto? Essa é a pergunta a que o arquiteto de informação Marco Moreira, 32 anos, mais tem de responder. Para tanto, ele lança mão da metáfora: “Desenhar um site é como erguer um edifício. É preciso avaliar o terreno, entender o que o cliente quer e montar uma estrutura que priorize o usuário”. Webdesigner por formação, Moreira trabalhou na Abril até julho de 2009 e se envolveu com arquitetura de informação quando era estagiário, cinco anos atrás. Organizado e louco por planilhas, ele adora trabalhar nas etapas de criação de um site, que começam em pesquisas com internautas, passam por rascunhos de layout e chegam aos testes de navegabilidade. Testes que nunca terminam. “Sites são seres vivos; estão em constante mutação”, diz.

Abaixo a revista Plug 2009 completa para folhear:

Provavelmente você já escutou que um sistema precisa ser enxuto, objetivo e claro o suficiente para ser bem utilizado. Afinal, o tempo que se perde pensando ou fazendo uma ação errada é muito frustrante. Chega a dar vontade de falar aquela frase que brasileiro adora dizer – é tudo culpa do sistema – e no pior dos casos, ainda acredita-se que seja falha do usuário.

Tudo isso porque, quando pensamos em uma interface, em muitos projetos, a preocupação com o usuário final só se torna explícita antes da ação de lançamento. Principalmente quando temos um prazo e metas agressivas, tudo que envolve pesquisa qualitativa demonstra um outro lado da realidade. Porém, existem métodos não muito custosos que podem ser agregados a práticas de desenvolvimento ou de produto. Investigar necessidades e manter um estudo prévio centrado no usuário pode evitar retrabalhos e melhorar a produtividade do time.

O núcleo de UX pretende ser um laboratório de soluções baseados numa premissa de inovação que preza por um processo cíclico e incremental, composto de quatro etapas: pesquisa com usuários, ideação, prototipação e avaliação. Um profissional de UX inserido em seu projeto significa o amortecimento das barreiras criadas entre projetistas  e a aplicação de uma interface usável, útil e que proporcione uma experiência significativa.

Desde a sua formação, em maio, o NUX já começa a dar os primeiros passos. Contamos com 3 pessoas e as atividades diárias são atualmente baseadas em demandas e prioridades, as quais complementamos de acordo com a necessidade de cada projeto e o tempo que temos para executar as melhores práticas na área.

O compromisso do núcleo é a entrega de uma interação de qualidade antes do Product Backlog. Para garantir isso, o grupo participa e atua em definição de requisitos, sketches, storyboards, paper prototype e testes com usuários.

A área entende a estratégia de cada produto junto com os PO’s e avalia as necessidades frente a seu público alvo, através de interações contínuas e acompanhamento em todas as fases de vida de um projeto.”

Texto gentilmente cedido pelo Blog do NUXAbril escrito por Tássia Spinelli, Arquiteta de Informação, apaixonada pelo mundo dos games e do universo mobile.

O site da INFO possuia a área de downloads muito acessada, porém pouco explorada e o objetivo foi redesenhar para melhorar a usabilidade e deixar mais atrativo e captar novos usuários.
O cliente tinha como premissa a facilidade na busca da informação e a interação do usuário para comentar, avaliar e compartilhar o conteúdo.

Então iniciei os estudos primeiramente me familiarizando com referências que são conhecidas pelo público que costuma utilizar este tipo de serviço, já pensando na viabilidade técnica e sempre consultando o pessoal da programação. A Product Owner já conhecia muito bem o usuário e isso facilitou muito a minha vida.

Como vim da área de design, procuro manter também no wireframe proporções do tamanho dos elementos para que a localização e o estudo já feito na arquitetura não seja prejudicado na hora do layout.

No wireframe usei algumas cores para diferenciar os tipos de informação deixando claro para o cliente a localização e o espaço que cada um deles ocupariam:

Wireframe e layout:

Abaixo o wireframe de uma das páginas mais importantes do site, a página de downloads. Tentei deixar as opções de interação o mais claro e óbvio possível, podendo ser visto logo no primeiro scroll da página e logo abaixo desta parte, dados importantes para decisão do download do software.

E o layout feito pelo designer do site baseado na Arquitetura de Informação:

O admin utilizado para a inserção de conteúdo foi feito direto na programação enquanto a arquitetura do site não ficava pronta, ou seja, não foi feito a arquitetura do publicador devido ao prazo, mesmo assim fiz uma análise heurística e de layout para que a usabilidade não fosse comprometida na publicação dos conteúdos.