Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o...

38
Danielle Freitas 2015.1 http://docente.ifrn.edu.br/daniellefreitas Interação Humano-Computador Arquitetura de Informação

Transcript of Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o...

Page 1: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Danielle Freitas

2015.1http://docente.ifrn.edu.br/daniellefreitas

Interação

Humano-Computador

Arquitetura de Informação

Page 2: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Agenda

Introdução

O que é arquitetura da informação

Estratégia de conteúdo

Sistema de organização

› Mapa do site

› Storyboard

› Wireframe

Sistema de navegação

Sistema de rotulação

Sistema de busca

Page 3: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Arquitetura Informação

Page 4: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover
Page 5: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

As pessoas acessam a internet em busca de bom conteúdo. O que está em volta que vai melhorar a experiência em algum produto ou serviço.

Page 6: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

O que é arquitetura de informação

“A arte e a ciência de organizar informações para auxiliar os

indivíduos a satisfazerem as suas necessidades informacionais”

Por: ROSENFELD

Page 7: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Introdução

Tempo para encontrar uma informação

Prejuízo de não encontrar a informação

Manutenção da informação

Crescimento da informação

Page 8: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Estratégias de qualidade da informação

Os usuários não leem as porque:

› Estão ocupadas

› O conteúdo encontrado não é relevante para o que elas precisam

› Estão tentando encontrar a resposta para uma pergunta e não encontram

› Estão tentando formular uma questão e precisam de orientação

› Estão perdidos devido à sobrecarga de informação

Page 9: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Estratégia de conteúdo

É uma forma de lidar com a informação

Objetivos:

› Medir a quantidade de informação necessária

› Produzir o conteúdo

Page 10: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Estratégias de conteúdo

Usável e encontrável: fácil de encontrar, acessar e ler.

Claro e preciso: fácil de entender, coeso e correto.

Completo: atende a todas as necessidades dos usuários.

Consistente: tem o estilo, a linguagem e a abordagem necessária para o

usuário conseguir alcançar seus objetivos.

Útil e relevante: alcança os objetivos dos usuários e também de negócios. É

apropriado e pertinente.

Page 11: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover
Page 12: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Arquitetura de informação

Sistema de Organização: Classifica o conteúdo.

Sistema de Navegação: Especifica as maneiras de navegar, de se mover pelo

espaço informacional e hipertextual.

Sistema de Rotulação: Estabelece as formas de representação, de

apresentação, da informação definindo rótulos para cada elemento informativo.

Sistema de Busca: Determina as perguntas que o usuário pode fazer e o

conjunto de respostas que irá obter.

Page 13: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistemas de organização

Define regras de classificação e ordenação das informações

Objetivo: Organizar a informação para ajudar o usuário a encontrar o que

precisa e no tempo coerente

TAXONOMIA = Categorizar: Facilita o armazenamento das informações

Page 14: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistemas de organização :: Categorização

Page 15: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistemas de organização

Page 16: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistemas de organização :: Folksonomia

Page 17: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistemas de organização

Sistemas exatos

› Informação bem dividida

› Regras claras para inclusão de novas informações

› Exemplos: Alfabeto, tempo, localização, sequência, entre outros.

Sistemas ambíguos

› Categorias subjetivas

› Exemplos: divisão da informação por assunto, tarefa, público-alvo, entre outros.

Page 18: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Por tempo

Page 19: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Por assunto

Page 20: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Organização por ordem alfabética

Page 21: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Organização por ordem alfabética Organização por assunto

Page 22: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de organização: Mapa do site

Page 23: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de organização: Storyboard

Page 24: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de organização: Storyboard

Page 25: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de organização: Wireframe

Page 26: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de navegação

Embutido:

› Logotipo

› Navegação global

› Menu local

› Migalhas de pão

› Passo a passo

› Conteúdo cruzado

Remoto:

› Mapa do site

› Índice remissivo

› Visita guiada

Page 27: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Logotipo

Navegação local

Navegação globalMigalhas de pão

Conteúdo cruzado

Sistema de navegação embutido

Page 28: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Passo a passo

Sistema de navegação embutido

Page 29: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de navegação remoto

Mapa do site

Page 30: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de navegação remoto

Índice remissivo

Page 31: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de navegação remoto

Visita guiada

Page 32: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de Rotulação

Representação da informação

Exemplo de rótulos:

› Títulos de página

› Item de menu

› Ícones

› Entre outros...

Meta: Falar a linguagem do usuário

Page 33: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de Rotulação: Navegação

Page 34: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de Rotulação: Títulos

Page 35: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de Rotulação: iconográficos

Page 36: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de busca

Auxilia na busca por informações em um site

Os resultados devem ser coerentes

O site deve ter um sistema de organização bem elaborado

Page 37: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Sistema de busca

Page 38: Interação Humano-Computador · Arquitetura de informação Sistema de Organização: Classifica o conteúdo. Sistema de Navegação: Especifica as maneiras de navegar, de se mover

Referências

Arquiteturadeinformacao.com

http://alexpoole.info/portfolio/deliverables/

http://webinsider.com.br/2012/10/17/uniao-entre-estrategia-de-conteudo-e-

arquitetura-de-informacao/

http://www.agner.com.br/download/artigos/2CIPED_Uma_Introducao_AI.pdf

Livro: design de Navegação Web. James Kalbach.