interface homem computador - aula06 - logo design e arquitetura da informação
TRANSCRIPT
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á?