Resumo Projeto Web

Prévia do material em texto

Arquitetura da Informação A.I.
Definições de A.I.
A arquitetura da informação é a categorização da informação em uma estrutura coerente, aquela que a maioria das pessoas possa compreender rapidamente
Definimos arquitetura de informação como: a arte e a ciência de organizar e catalogar websites, intranets, comunidades online e software de modo que a usabilidade seja garantida.
História da A.I.
Historicamente o termo "arquitetura da informação" é atribuído a Richard Saul Wurman.
Em 1976, Wurman entendeu que um arquiteto poderia ser tão essencial para o design do ambiente construído quanto para o design de um ambiente em 2 dimensões. Como presidente do congresso da AIA (American Institute of Architects), Wurman introduziu uma ideia que ele chamou de “Arquitetura de informação”.
Por que A.I. é importante?
Com a popularização das novas mídias, empresas começaram a investir em A.I., pois a usabilidade se torna um fator crítico para a navegação na interface digital.
Crenças equivocadas sobre o uso que as pessoas fazem da Internet
01. Pessoas leem na web.
02. Todas as páginas devem ser acessíveis em 3 cliques.
03. As pessoas não usam a barra de rolagem.
04. Design é fazer uma página bonita.
05. Acessibilidade é cara e difícil.
06. Sites acessíveis são feios.
07. Gráficos são os elementos das páginas mais visíveis.
08. Fotografias melhoram a experiência do usuário.
09. Design tem que ser original.
10. Se o design é bom, pequenos detalhes não importam.
11. Você precisa redesenhar seu site periodicamente.
12. Mais escolhas e recursos resultam e mais satisfação.
13. Ícones melhoram a usabilidade.
14. Você é como seus usuários
15. A homepage é a página mais importante.
16. Flash é diabólico.
17. Você não precisa de conteúdo para criar um site.
18. Se funciona para a Amazon, vai funcionar para você.
19. As pessoas podem te dizer o que elas querem.
20. Teste de usabilidade é caro.
21. As pessoas sempre usam seus produtos da maneira
como você imaginou que usariam.
22. Estética não é importante se você tem boa usabilidade.
23. Teste de usabilidade = grupo de foco.
24. UX design = usabilidade
25. Espaço branco é espaço desperdiçado.
26. Pessoas são racionais.
Onde se aplica Arquitetura da Informação
Interfaces digitais (web, celulares, tablets, quiosques, caixa eletrônico de bancos e outros, jogos, material instrucional, infográficos...)
Alguns dos mais graves erros de A.I. e usabilidade que encontramos em websites
TIPO ERROS ESTRUTURAIS
1. Falta de estrutura
Os usuários se perdem e não conseguem relacionar os itens com categorias de produtos, serviços etc.
2. Busca e estrutura não integradas
O usuário se perde pois não tem a indicação de sua localização.
O usuário é levado para fora do site.
3. Descategorização
As seções não estão definidas, dificultando a localização do
usuário
(Nestas situações o indicado é usar Breadcrumbs).
4. Extrapolação da múltipla hierarquia
Alguns itens aparecem em várias categorias, e o usuário não sabe se estão repetidos
5. Hotsites não integrados ao site principal
Hotsites abandonados com conteúdo desatualizado.
Tipo Erros de navegação
6. Opções invisíveis de navegação. 
As pessoas não devem ter que explorar o site para encontrar a informação.
Exemplo: conteúdos acessados apenas por banners podem passar despercebidos, pois são confundidos com publicidade.
7. Elementos de navegação incontroláveis
Elementos que se movem e o usuário precisa acessar o link.
8. Navegação inconsistente
O usuário se perde pois não sabe como voltar ou se movimentar pelo site.
9. Muitas técnicas de navegação empregadas simultaneamente
Diversos tipos de links não deixam claro a hierarquia de menus.
10.Criar terminologia própria de menu que nada significa para os usuários
Os usuários não podem encontrar as coisas se não sabem como são chamadas
- O designer que trabalha como arquiteto da informação deve conhecer a relação entre o usuário e a interface projetada.
O que os usuários esperam dela?
O que desejam encontrar?
Como e por quanto tempo será a interação?
Qual a motivação e o interesse do usuário na interface?
Qual o objetivo e o acréscimo dessa interface para o usuário?
- Para conhecer o usuário, deve-se traçar o perfil do público-alvo.
Para isso, para cada projeto, usamos testes instrumentos de coleta de dados como questionários, entrevistas e observação, entre outros.
Necessidades gerais dos usuários da web
Navegação clara.
Busca fácil.
Filtros.
Visualização rápida.
Interface esteticamente agradável
Navegar em um menu bem organizado.
Listas coerentes
Poder controlar o sistema (abortar uma tarefa, desfazer uma operação e retornar ao estado anterior).
As 10 Heurísticas de Nielsen
1) Feedback
O sistema deve informar continuamente ao usuário sobre o que ele está fazendo.
2) Falar a linguagem do usuário
A terminologia deve ser baseada na linguagem do usuário e as informações devem ser organizadas conforme o modelo mental do usuário.
3) Saídas claramente demarcadas
O usuário deve poder controlar o sistema (abortar uma tarefa, desfazer uma operação e retornar ao estado anterior).
4) Consistência
Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.
5) Prevenir erros
Evitar situações de erro.
6) Minimizar a sobrecarga de memória do usuário
O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico.
7) Atalhos
Para usuários experientes executarem as operações mais rapidamente.
8) Diálogos simples e naturais
Deve-se apresentar exatamente a informação que o usuário precisa no momento.
9) Boas mensagens de erro
Linguagem clara e sem “floreios”, para ajudar o usuário a entender e resolver o problema.
10) Ajuda e documentação
O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessário, deve estar facilmente acessível.
Levantamento de dados:
• BENCHMARKING
• INVENTÁRIO DE CONTEÚDO
• QUESTIONÁRIOS
BENCHMARKING (análise de similares)
• O processo de benchmark consiste em estabelecer comparações.
• Pela análise de produtos com propósitos semelhantes espera-se identificar
funcionalidades, conteúdos e detalhes estéticos e ergonômicos que podem ser
adaptados a novos projetos.
• Trata-se de um processo de descoberta e de uma experiência de aprendizagem.
Exige a identificação das melhores práticas no mercado.
• Sendo pouco provável que alguém seja sempre o melhor em tudo, aprender com modelos de outras empresas representa economia de tempo e trabalho.
• Ao se lançar mão do benchmarking, não se pretende copiar algo de forma idêntica. Dois projetos nunca serão iguais. As ideias vistas em outros lugares sugerem propostas a novos projetos.
• Também, espera-se que sempre haja ajustes, adaptação e aprimoramentos, que
implicam em modificações e talvez melhorias à ideia original.
Esquema de Sistemas
Arquitetura de informação é a combinação de esquemas de:
Sistema de Organização
Determina o agrupamento e a classificação do conteúdo.
Exatos: alfabeto, tempo, localização e sequência.
Divide a informação em categorias bem definidas e mutuamente exclusivas, com regras claras para incluir novos itens. Indicado quando o usuário sabe exatamente o que está procurando.
Ambíguos: temas, tarefas, audiências, metáforas e híbrido.
Divide a Informação em categorias subjetivas. Não possui regras claras de como incluir novos itens. Indicado quando o usuário não sabe exatamente o que está procurando.
Esquemas Exatos:
Alfabeto: Indicado para grandes conjuntos de Informação e público muito diversificado.
Ex: Dicionários, Enciclopédias, Listas Telefônicas
Tempo: Indicado para mostar a ordem cronológica de eventos.
Ex: Livros de História,Guia de TV, Arquivos de notícias
Localização: Compara informações vindas de diferentes locais.
Ex: Previsão do tempo
Sequência: Organiza itens por ordem de grandeza ou hierarquia. Indicado para conferir valor ou peso a informação.
Ex: Livros mais lidos, listas de preços, filmes mais vistos
Esquemas Ambíguos:
Tema: Divide a informação em diferentes tipos, modelos ou perguntas.
Ex: Supermercado, Páginas Amarelas.
Tarefa: Organiza a informação em conjuntos de ações. Em geral em sistemas, não é comum de se ver na web
Ex: Menu de opções do Windows (Editar, Exibir, Formatar)
Audiência: para customizar conteúdos para cada público-alvo.
Ex: sites institucionais, grandes lojas , bancos,supermercados…
Metáfora: Utilizado para orientar o usuário em novo baseado em algo familiar.
Ex: Desktop de computadores
Híbrido: Reúne 2 ou mais esquemas. Normalmente causa confusão ao
usuário. Normalmente limita muito a organização.
Ex: Desktop de um computador
Sistema de Navegação
Especifica os caminhos , bem como fornece informações para o usuário sobre localização e movimentação.
Tipos de navegação:
Global
Local
Contextual
Suplementar - Ex: mapas do site, índice, guia e sistema de busca.
Avançada - Ex: personalização, navegação social e
navegação visual.
Segundo NIELSEN (1999), as interfaces de navegação devem auxiliar o usuário a responder a três perguntas fundamentais;
Onde estou? De onde vim? Para onde eu vou?
De acordo com FLEMING (1998) apud MEMÓRIA (2005),o projeto de uma navegação
funcional deve ter as seguintes qualidades:
1- Ser facilmente aprendido
2- Ter consistência
3 - Dar retorno
4 - Contextualizando
5 - Oferecer alternativas
6 - Garantir economia de tempo e ações
7 - Promover mensagens visuais claras
8 - Criar nomenclaturas claras
9- Seguir o propósito do site
10 - Apoiar e ajudar os objetivos do usuário
Existem 3 estruturas básicas de navegação para uma interface gráfica digital:
Sequência
Posicionar a informação de maneira sequencial, cronológica, ou através de uma série de temas lógicos. Mais indicada para interface de treinamento ou fluxos com várias etapas (passos).
Hierárquicas
Melhor maneira de organizar a maior parte das estruturas complexas de informações.
Teias
Procura imitar o pensamento associativo e livre fluxo e ideias para que os usuários sigam os seus próprios interesses.
Sistema de Rotulagem
Estabelece formas de apresentação do conteúdo que incluam definição de rótulos para títulos, botões e áreas informativas de acordo com a estrutura de classificação e navegação do site.
Recebem rótulo os microconteúdos:
• Títulos
• Cabeçalhos
• Assuntos
• Links em geral
• Botões
• Tags
• Descrição de páginas
São rotulados por meio de:
• Texto verbal
• Imagens pictóricas – (símbolos icônicos como fotos, desenhos ou pictogramas)
De acordo com NIELSEN (2000):
Links Embutidos: Textos sublinhados que indicam a existência de “informação adicional” sobre um assunto qualquer.
Links Associativos: Usados para dar aos usuários dicas como “leia mais”,ou “veja também”.
Links Estruturais: Links que apontam sistematicamente para outros níveis da estrutura do site, bem como irmãos e filhos em uma hierarquia.
De acordo com NIELSEN (2000): 
Recomendações para o rótulo:
• Seguir a linguagem do usuário
• Estar claro
• Ser específico (ex. voltar para o cadastro)
• Indicar o destino a seguir
• Ter consistência
• Iniciar com uma palavra importante e significativa
• Evitar iniciar com artigos (o, a etc) no caso de ordem alfabética.
Evitar:
• Termos técnicos
• Palavras estrangeiras
• Linguagem rebuscada
• Uso de teasers
• Termos que possam gerar diferentes interpretações de acordo com a cultura e/ ou classe social do usuário
Sistema de Busca
Determina as perguntas que o usuário pode fazer e o conjunto de respostas que irá obter.
Diagrama de Navegação
Diagramas são ferramentas essenciais para comunicar a arquitetura de informação e design de interação em times de desenvolvimento na Web.
Um vocabulário visual é um conjunto de símbolos usados para descrever algo (geralmente um sistema, estrutura ou processo).
Os diagramas, são usados por cinco públicos primários:
- Gerentes e Patrocinadores de Projeto os utilizam para obter um sentido geral do escopo e forma do projeto.
- Geradores de Conteúdo os utilizam para direcionar os requerimentos de conteúdo.
- Designers Visuais e de Interface os utilizam para contar quantos designs de página únicos
devem ser produzidos e ter uma noção inicial da navegação e requerimentos para a interface destes designs.
- Tecnólogos os utilizam para derivar requerimentos funcionais
- Arquitetos de Informação e Designers de Interação os utilizam para desenvolver navegação detalhada e requerimentos de interface para cada página.
Em um diagrama de design de interação, os conectores demonstram direção para indicar o
fluxo da tarefa. O movimento não é necessariamente proibido na direção contrária. Os termos downstream e upstream se referem à posição dos elementos relativos a este movimento para frente.
Conjuntos concorrentes
Um conjunto concorrente (representado por um semicírculo) é usado quando a ação gera resultados múltiplos simultâneos (ex: pop-up ao mesmo tempo em que uma página é carregada na janela principal, ou o aparecimento de uma página enquanto um arquivo está sendo baixado).
Pontos de continuidade
Algumas arquiteturas são muito complexas para serem expressas num único diagrama.
Áreas e áreas interativas
O Elemento área (um retângulo de bordas arredondadas) é usado para identificar um grupo de páginas que possui um ou mais atributos comuns (ex: pop-up ter um tratamento gráfico
semelhante). Devemos usar labels para identificar esses atributos ou, fazer referências a notas anexadas.
Áreas de fluxo e referências
Alguns diagramas precisam que uma sequência de passos (ex: login) apareça várias vezes em contextos diferentes.
Pontos de decisão
Quando uma ação do usuário pode gerar apenas um entre alguns resultados, o sistema precisa tomar uma decisão sobre o que será apresentado.
Setas e conectores condicionais
Um conector condicional (representado por uma linha tracejada) é usado quando um caminho pode ou não ser apresentado ao usuário, dependendo se uma ou mais condições são satisfeitas.
Ramos condicionais
Quando um sistema deve selecionar um caminho entre um número de opções mutuamente
exclusivas a ser apresentadas ao usuário.
Seletores condicionais
Com o seletor, os vários caminhos abaixo não são mutuamente exclusivos, qualquer número de caminhos que satisfaçam as condições pode ser apresentado ao usuário.
A aplicação mais comum do seletor condicional é em resultado de busca.
Conjuntos
Algumas estruturas condicionais requerem que o sistema apresente mais de um caminho baseado em certas condições.
Áreas condicionais
Quando uma ou mais condições se aplicam a um grupo de páginas, essas páginas são agrupadas numa área condicional.
Card Sorting
É uma técnica utilizada para tentar definir a organização de uma estrutura pensada
para um projeto e apreender o modelo mental do público alvo do produto em desenvolvimento.
Card sortings podem ser fechados ou abertos.
Fechados: os participantes devem agrupar os cartões de acordo com as categorias pré-
estabelecidas por quem está desenvolvendo o trabalho.
Abertos: os participantes recebem os cartões que deve agrupar conforme considerarem mais adequado, criando categorias que englobem os grupos de cartões. Neste caso, os participantes também precisam nomear as categorias, de forma a retratar o que identificaram entre os itens escolhidos para formar cada grupo.
OBS: não depende dos participantes dos testes a montagem do mapa final do site. “O especialista é o arquiteto de informação e é ele quem deve saber conduzir os testes, analisar os resultados e propor a solução”. (RUIZ, Cinthia).
Vantagens da técnica:
• Simples e barato.
• Implementaçãorápida.
• Fundamentado – em uso há mais de uma década
• Envolve usuários.
Desvantagens:
• Pode apresentar resultados falhos por ser um teste superficial, em especial em se tratando de sites de grande porte e/ou se os participantes dos testes não forem parte do público alvo do site.
• Se o site for muito grande e forem muitos os participantes dos testes, a análise dos resultados pode levar muito tempo.
O TESTE
Seleção de conteúdo
Determinar a lista de tópicos. Esta lista pode ser elaborada a partir de:
• conteúdo online existente (site a redesenhar ou referências)
• conteúdo levantado pelo briefing com cliente
• conteúdo potencial futuro (proposto)