Pinceladas da Web » Arquitetura de Informação

Introdução à Arquitetura de Informação

Pedro Rogério — Thu, 18 Feb 2010 10:58:22 +0000

A definição de Arquitetura da Informação é o “estudo da organização da informação que permite ao usuário chegar ao entedimento”. Na prática, ela se refere à organização da estrutura de um website e seu conteúdo, rotulagem e categorização da informação e o design dos sistemas de navegação e de busca.

Visando ajudar os iniciantes nessa áera e até mesmo os mais experientes, vou postar aqui uma série de slides com abordagem sobre o assunto:

Aula 1 – Introdução à arquitetura de informação

Aula 2 – Sistema de organização

Aula 3 – Sistema de navegação

Aula 4 – Sistemas de Rotulação

Aula 5 – Sistemas de busca

Aula 6 – Metodologia e Processo

Aula 7 – Concepção – Criando Conceitos

Aula 8 – Concepção – Avaliando os Conceitos

Aula 9 – Concepção – Refinando e Documentando os Conceitos

Aula 10 – Especificacão

Aula 11 – Wireframes

Aula 12 – Implementação e Metodologias Ágeis

Aula 13 – Mundo AI

Aula 14 – Testes de usabilidade

Introdução à Arquitetura de Informação

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Boas práticas no desenvolvimento de formulários

Pedro Rogério — Thu, 13 Nov 2008 13:36:08 +0000

Formulários web podem ser desenvolvidos com vários objetivos diferentes, mas para obter êxito você irá depender e muito de como ele foi projetado. Best Practices for Web Form Design é um completo guia desenvolvido por Luke Wroblewski, onde ele detalha os diversoas aspectos a serem considerados no desenvolvimento de formulários web: Usabilidade, Organização dos elementos, Flexibilidade, quantidade dos elementos.

| View | Upload your own

Caso você não tenha interesse em estar vendo os Slides, você tem a opção de baixar uma versão em PDF. Via Leandono’s Blog.

Boas práticas no desenvolvimento de formulários

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Stencils para Omnigraffle

Pedro Rogério — Tue, 10 Jun 2008 09:00:44 +0000

Para você que faz o uso do Omnigraffle em seus trabalhos, você pode melhorar e muito o rendimento do seu trabalho utilizando alguns objetos prontos. Além do que você também pode encontrar Stencils para o Visio e o blueprint template para o Photoshop.

Via: elclerigo!

Stencils para Omnigraffle

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Yahoo! Design Stencil Kit

Pedro Rogério — Fri, 06 Jun 2008 09:00:29 +0000

Yahoo! Design Stencil Kit é uma excelente coleção deelementos gráficos que você pode utilizar em Wireframes, protótipos, disponibilizados em vários formatos como: OmniGraffle, Visio (XML), Adobe Illustrator (PDF e SVG) e Adobe Photoshop (PNG), contendo os seguintes elementos:

Anúncios e medidas
Calendários
Sliders
Listas e tabelas
Interfaces de usuário
Elementos de formulários
Grids
Menus e botões
Telefones móveis em geral
Elementos do iPhone
Navegacão e paginacão
Elementos do sistema operacional

Via: Carlos Leopoldo

Yahoo! Design Stencil Kit

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Criando Protótipos com o PowerPoint

Pedro Rogério — Mon, 05 May 2008 09:00:26 +0000

O PowerPoint está se tornando atualmente umas das ferramentas mais utilizadas para se criar protótipos, partes do Windows, Windows Live, Internet Explorer foram prototipadas com o PowerPoint. Com base nisso, você pode baixar um kit de prototipagem gratuito para PowerPoint e começar a criar hoje mesmo seus protótipos.

Referências

estándares y accesibilidad – Kit de Herramientas para Prototipado con PowerPoint

Criando Protótipos com o PowerPoint

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Como se faz um site?

Pedro Rogério — Tue, 29 Apr 2008 09:00:40 +0000

A Volkswagen nos mostra em um vídeo publicitário como foi feito o novo site da volkswagen.co.uk. Muito interessante, perca 1 minuto do seu tempo e veja o vídeo:

Como se faz um site?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Palestra gratuita sobre Arquitetura de Informação

Pedro Rogério — Mon, 28 Apr 2008 09:00:27 +0000

Quer conhecer pessoalmente grandes profissionais da Arquitetura de Informação? Alexandre Formagio deu a dica e eu vou reforçar a mesma. No dia 10 de Maio acontecerá na Faculdade Impacta um encontro e em seguida uma palestra sobre Arquitetura de Informação para marcar o início da primeira turma de Pós Graduação em Arquitetura de Informação na Faculdade Impacta Tecnologia em São Paulo.

Os palestrantes serão Guilhermo Reis e Silvia Melo, sem dúvida dois profissionais que eu adimiro e muito. Como sou um entusiasta da área, estarei presente lá. E aqueles que querem me pagar um café, um almoço, uma cerveja, ou trocar uma idéia, aconselho a fazer a sua inscrição.

Palestra gratuita sobre Arquitetura de Informação

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Como criar Protótipos Interativos com o Visio

Pedro Rogério — Wed, 23 Apr 2008 09:00:53 +0000

Se você irá mostrar a um cliente o desenho do site em um papel, sabe o valor de apresentá-lo em uma versão interativa com links. Os usuários do Visio sabem que é muito simples criar protótipos interativos em HTML a partir de um set de Wireframes (Arquivo > Salvar como página Web). Mas dessa forma ocorre uma desvantagem se você precisar enviar esses arquivos por e-mail, pois dependendo da complexidade do projeto, serão criados muitos arquivos HTML e várias imagens.

Os PDF’s são ideais para serem enviados por e-mail, mas leva-se tempo para criar protótipos interativos em PDF com o Visio. Abaixo você verá um tutorial de como fazer isso:

1. Crie links nas páginas de primeiro plano, não nas de segundo plano – utilize os stencils do documento para gerenciar suas modificações.: É uma pratica habitual quando se cria wireframes no Visio colocar os elementos standard das páginas – topo, conteúdo, navegação – em uma página de fundo (background), assim os elementos se repetem em cada página de primeiro plano (foreground). De qualquer forma, quando publicado em PDF, o Visio não cria links para as camadas de background. Para criar protótipos interativos em PDF eles devem estar na página em primeiro plano. Isso significa que para uma distribuição de página standard, todos os elementos de navegação devem estar em cada página do wireframe. Poderia-se copiar e colar os elementos de navegação em cada página, mas isso seria um trabalho duro. Ao invés disso, utilize os stencils do documento. Funciona assim:

1.1 – Crie um painel de navegação, utilizando uma forma distinta para cada link. Por exemplo, para criar 5 abas na parte superior da página, cosntrua cada aba em um bloco de texto separado.
1.2 – Para adicionar links, aperte CTRL + K para abrir o quadro de diálogos de links. Depois de adicionar o Sub-link (não o link direto), clique em browse (examinar) e encontre a página que está seu wireframe, ao qual deseja linkar (ou introduza a URL).
1.3 – Repita o primeiro e o segundo passo sempre que necessário. Uma vez que estiver pronto o painel de navegação, agrupeo (selecione todos os elementos, e aperte Shift+CTRL+G).
1.4 – Abra os Stencils do documento: Arquivo > Formas > Mostrar Stencils do documento.
1.5 – Arraste os elementos agrupados de navegação ao painel de Stencils.
1.6 – Clique com o botão direito sobre o grupo de elementos e renomeios (por exemplo: “NavBar”).
1.7 – Em cada página de seu wireframe, arraste oe elementos sobre a página de primeiro plano e os coloque em sua posição.
1.8 – Se necessitar fazer modificações no grupo de navegação, clique com o botão direito sobre o Stencil do documento, e selecione Edição Mestre > Edição de forma Mestre. Qualquer modificação feita será atualizada automaticamente em qualquer página.

2. Utilize o menu PDF no Visio, ao invés de imprimir através do Adobe PDF no menu de impressão.: Para que os links do PDF funcionem, utilize o menu PDF no Visio (Adobe PDF > Converter para Adobe PDF). Por alguma razão, se utilizar Arquivo > Imprimir e escolher Adobe PDF como impressora, os links do PDF não funcionam.; O resultado final será links funcionando em cada página. Para alterar os estados dos botões ou criar outros elementos interativos, é necessário editar os arquivos no Acrobat

Leve-o ao nível seguinte.: Esse artigo de Boxes & Arrows é uma fantástica revisão de como criar protótipos em PDF clicáveis com camadas, multimídia e muito mais. Foi centrado no uso avançado das ferramentas de edição do Acrobat

Referências

elclerigo! – Cómo crear prototipos interactivos en PDF’s desde Visio

Como criar Protótipos Interativos com o Visio

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Vídeo de um teste de Usabilidade com Prototipagem em Papel

Pedro Rogério — Fri, 18 Apr 2008 09:00:36 +0000

Aqui você pode ver um vídeo com um teste de usabilidade utilizando protótipos em papel que ajudou a equipe de Usabilidade da Corel a encontrar alguns defeitos em um desenho preliminar de um produto de criação de sites web:

Via: estándares y accesibilidad

Vídeo de um teste de Usabilidade com Prototipagem em Papel

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Fazendo Protótipos com o Fireworks CS3

Pedro Rogério — Wed, 16 Apr 2008 09:00:01 +0000

O Software Adobe Fireworks CS3 atualmente tem se tornado uma das ferramentas favoritas de Designers de Interação para o desenvolvimento de protótipos. Com a versão CS3, a Adobe adicionou novas funcionalidades que facilitam a criação de protótipos:

Você pode criar páginas ao invés de criar várias camadas.
Você pode criar uma página mestre com os elementos comuns em todas as páginas.
Vem com uma Biblioteca de elementos (widgets) de interface que pode ser utilizado com um simples arrastar e soltar.
Você pode criar seus próprios elementos (widgets).
Pode programar cliques a qualquer elemento e assim linkar outras páginas.
Pode exportar como uma página web e assim criar protótipos navegáveis.
Pode trabalhar desde rascunhos até desenhos complexos.

A seguir você pode ver um vídeo e alguns tutoriais sobre como fazer protótipos no Fireworks:

Fazendo Protótipos com o Fireworks CS3

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Como escolher gráficos para mostrar informações

Pedro Rogério — Mon, 14 Apr 2008 09:00:58 +0000

Quando se apresentam idéias que fazem referência a dados, pode ser de grande ajuda utilizar algum gráfico ou uma tabela. Isso nos permite comunicar de uma forma mais clara e efetiva uma informação relacionada a dados, ou também pode arruinar toda uma apresentação se não escolhermos o gráfico correto. No momento de escolher o gráfico correto, pode ser muito útil utilizar a tabela de decisões de Andrew Abela:

Uma vez que tenhamos selecionado nosso tipo de gráfico, um recurso muito útil criado pela empresa Juice Analitytics é Chart Chooser: uma ferramenta online que nos permite decidir que tipo de gráfico necessitamos para nossa apresentação, onde podemos efetuar o download de um template personalizado em formato Excel ou PowerPoint:

Referências

Usolab – Escoger un buen gráfico

Como escolher gráficos para mostrar informações

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Vídeo sobre Blueprint em Arquitetura de Informação

Pedro Rogério — Mon, 07 Apr 2008 09:00:00 +0000

Blueprint nada mais é do que o esquema do website sobre o qual todos os outros aspectos são construídos: forma, função, metáfora, navegação, interface, interação e design visual. Blueprints também são utilizados na Construção Civil. Abaixo você pode ver um vídeo que mostra o processo de Blueprint na Arquitetura de Informação:

Referências

elrodriWEB – Video sobre Blueprint en la Arquitectura de Información

Vídeo sobre Blueprint em Arquitetura de Informação

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Wireframes, Blueprints, Protótipos, Storyboards, Mock Ups, Diagramas de conteúdo…

Pedro Rogério — Thu, 27 Mar 2008 09:00:09 +0000

O que é um Wireframe?

É uma representação esquemática de uma página web sem elementos gráficos que mostram o conteúdo e o comportamento das páginas. Servem como ferramenta de comunicação e discussão entre arquitetos de informação, programadores, desenvolvedores e clientes.

Quando utilizar? Quais as vantagens? Que tipo de informação deve conter? Como fazer? Todas essas e outras várias perguntas são respondidas no ótimo Guia sobre Wireframes desenvolvido por Olga Carreras. Leitura obrigatória para Arquitetos de Informação e para aqueles que querem se aventurar nesse mundo.

Via: estándares y accesibilidad.

Wireframes, Blueprints, Protótipos, Storyboards, Mock Ups, Diagramas de conteúdo…

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Simplicidade no design

Pedro Rogério — Mon, 24 Mar 2008 09:00:33 +0000

Como você pode ver, as coisas são simples, é você quem acaba as complicando!!!

Via: JustaddWater.dk

Simplicidade no design

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Bad Usability Calendar

Pedro Rogério — Mon, 10 Mar 2008 08:00:49 +0000

Isso mesmo, calendário da má usabilidade. Ele existe desde 2005, e mostra exemplos de má usabilidade na Web. Você pode baixá-lo em várias línguas, e quem sabe até colocar em um quadro.

Bad Usability Calendar

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?