interface homem computador - aula06 - logo design e arquitetura da informação

Interface Homem-ComputadorAula 06 – Logo design e Arquitetura da Informação

P R O F. M A I G O N N A C I B P O N T U S C H K Am a i g o n p @ g m a i l . c o m1 ° S e m e s t r e 20 1 6

C o n t e ú d o d e A r q u i t e t u r a d a I n f o r m a ç ã o t r a d u z i d o d e I n t r o d u c t i o n t o I n f o r m a t i o n A r c h i t e c t u r ed e M i ke C r a b b , Ro b e r t G o r d o n U n i v e r s i t y

2

Logotipos

XEROX

Aula de hoje• Introdução ao problema do “information overload”

• O que é arquitetura?

• Arquitetura no contexto da informática

• Usuários, contexto e conteúdo

• Projetando a arquitetura da informação

Wireframes

Mockups

Protótipos

• Criando a arquitetura da informação

Usabilidade não é apenas o usuário conseguir usar o produto!

• Cinco atributos da usabilidade de Nielsen

1. Facilidade de aprendizagem

2. Eficiência de uso

3. Facilidade de memorização

4. Baixa taxa de erros

5. Satisfação subjetiva

O que os arquitetos da informação fazem?

Antes Depois

Quem é o arquiteto da informação

• “Indivíduo que organiza padrões inerentes aos dados, transformando o que é complexo em algo claro.

• Uma pessoa que “cria a estrutura ou o mapa de determinada informação, dde modo a possibilitar a outras que criem o seu caminho pessoal em direção ao conhecimento.”

• “A.I. é a profissão emergente do século XXI cujo escopo é formado por necessidades atuais focalizadas na clareza, na compreensão humana e na ciência da organização da informação”.

ARQUITETURA DA INFORMAÇÃO

OBJEIVO

• Organizar grandes volumes de informação de modo que usuários tenham acesso à informação de forma fácil e eficiente

O que é arquitetura?

Resultado do planejamento e construção de edifícios

Liberty Square

Fantasyland

Tomorrowland

Frontierland

AdventurelandMain Street

USA

Arquitetura de sistemas

Arquitetura de software

Arquiterura de redes

Arquitetura da informação

• O design estrutural de ambientes de informação compartilhados

• Combinação de organização, titulação, pesquisa e sistema de navegação nos sites web e intranets

LOGO LINKS PRIMÁRIOS PESQUISA

LINKS SECUNDÁRIOS IMAGENS (CONTEÚDO) INFO (CONTEÚDO)

Arquitetura da informação

USUÁRIOS

• Entender os usuários

• Quem são? Demografia?

• Que informação eles querem do seu sistema?

• Qual a resposta certa para uma necessidade de informação?

• Todas as respostas possíveis?

• Como se comportam?

• Existem tipos diferentes de comportamento?

• Eles ficam satisfeitos ou frustrados?

CONTEXTO

• Todas as páginas web/apps existem em um contexto

• Parte do contexto:

• Necessidades do negócio

• O que o sistema de informação deve fazer?

• Missão e objetivos e estratégia da organização

CONTEÚDO

• Qualquer coisa que um usuário queira encontrar

• Artigos

• Links externos/fontes

• Outras mídias (vídeos/imagens/etc.)

• Preocupações sobre conteúdo

• Direitos autorais

• Formatos, metadados, estrutura

De que vale uma interface com boa usabilidade, se o usuárionão acha a informação que

procura?

PROJETANDO A ARQUITETURA DA INFORMAÇÃO

• WIREFRAMEEsquetes básicos da estrutura, layout e componentes de um site. Primeiro passo do processo de design

• MOCKUPFoca mais no design visual de um site, mais próximo do produto final

• PROTÓTIPOLayout semifuncional implementado em HTML e CSS

WIREFRAME é uma representação de baixa fidelidade de um design

• Deve mostrar

• Os principais grupos de conteúdo (O QUÊ)

• A estrutura da informação (ONDE)

• Descrição da reação esperada com relação à interface (COMO)

CONTEÚDO DO WIREFRAME

• Elementos estruturais da interface

• Cabeçalhos, navegação, conteúdo principal, barras laterais

• Layout dos elementos estruturais

• Posição, tamanho

• Tipos de conteúdo que serão apresentados

• Texto, Imagens, Video

MOCKUP- Representação de baixa/média fidelidade de um design

• Deve aperfeiçoar o Wireframe e mostrar

• Que cores serão usadas

• Que fontes serão usadas

• Não deve mostrar

• Conteúdo específico do site

MOCKUP- Representação de baixa/média fidelidade de um design

• Um bom Mockup deve:

• Representar a estrutura da informação

• Visualizar o conteúdo do site e

• Demonstrar a funcionalidade do site de modo estático

Um PROTÓTIPO é uma representação de média/alta fidelidade do site

• Um protótipo deve permitir ao usuário

• Experienciar o conteúdo e interações com a interface

• Testar as principais interações de modo que seja semelhante ao produto final

USO Forma

WIREFRAMEDocumentação, comunicação

rápidaRabiscos, esquetes, representação

em preto e branco

MOCKUPObter feedback, aprovação das

partes interessadasVisualização estática

PROTÓTIPOTeste do usuário, estrutura básica

para o desenvolvimentoInterativo

MÃOS À OBRA

• Recriar site da organização para a qual fizemos a análise heurística

GASTE 5 MINUTOS OLHANDO OUTROS SITES DE ORGANIZAÇÕES SEMELHANTES AO QUE

VOCÊ ESTÁ TRABALHANDO E OBSERVE SUAS ESTRUTURAS

PERGUNTAS IMPORTANTES

1. Qual é a principal coisa que chama a sua atenção quando você visita o site?

2. Que informação você esperaria ver no site que ESTÁ lá?

3. Que informação você esperaria ver no site que NÃO está lá?

4. Que páginas estão presentes no site? (Home, contato, etc)

5. Pense sobre a página principal. Que conteúdo está lá?