Posts Tagged arquitetura de informação

Um Sketch do que rolou no EBAI 2011

 

Nos dias 21 e 22 de outubro aconteceu o 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:

Clique aqui para baixar o painel em alta resolução (A4)

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í! :)

, ,

10 Comentários

EBAI 2010

Este ano inscrevemos o projeto Paixão Coletiva no EBAI e fomos selecionados para apresentá-lo.

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.

Arquitetos de Informação

Então é isso.

Até o próximo EBAI!

8 Comentários

AI: Rede de Tecnologia Social

Mais um projeto feito na TV1 como muitos outros que passaram por lá, mas destaco este em especial pela peculiaridade do processo de trabalho.

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.

Em uma 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:

Sketches

Sketches

Sketch

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 RTS

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).
Wireframe RTS

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.
Layout RTS

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

, ,

2 Comentários

Entrevista sobre wireframe na revista Webdesign

Revista Webdesign edição 79

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.

Foto da dupla da revista3 – 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

, ,

5 Comentários

Hotsite Brasília 50 anos

Este projeto foi lançado na data do aniversário de Brasília, porém somente agora pude divulgá-lo.

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:

Infoestrutura Minisite Brasilia 50 anos

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:

Sketches do projeto

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.

Hotsite Brasilia 50 anos - Wireframe da timeline

Hotsite Brasilia 50 anos - Wireframe dos filtros

Hotsite Brasilia 50 anos - Wireframe Brasília hoje

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.

Hotsite Brasilia 50 anos - Wireframe dos templates

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

Hotsite Brasília 50 anos - Layout da home

Hotsite Brasília 50 anos - Layout dos filtros

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

Acesse o hotsite

,

1 Comentário

Desconstruindo interfaces na Revista Webdesign

Este mês saiu uma matéria na revista Web Design: Desconstruindo Interfaces. Foram selecionados 12 projetos: 10 agências, um internacional e um governamental, que é o Portal Brasil (brasil.gov.br), projeto em que participei. Destacaram alguns elementos da interface e fizeram a desconstrução, que segundo eles foi inspirado no modelo de análise do livro “Homepage: Usabilidade – 50 websites desconstruídos” de Jakob Nielsen e Marie Tahir.

,

Nenhum comentário