SlideShare uma empresa Scribd logo
 
Quem sou Renato Rosa, 28 anos, 9 de internet Arquiteto de informação – Globo.com Núcleo de jornalismo Idealizador do NPI Núcleo de Projeto de Interface da AG2 Membro do IAI Information Architecture Institute
O que vamos ver ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Conceito de usabilidade
Conceito de usabilidade É a facilidade de uso que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica.
“ Usabilidade é a capacidade, em termos funcionais humanos, de um sistema ser usado facilmente e com eficiência pelo usuário.”  - Shackel (1993)  “ Usabilidade está diretamente ligada ao diálogo na interface. É a capacidade do software em permitir que o usuário alcance suas metas de interação com o sistema” - Scapin (1993)
Ergonomia Identifica fatores humanos referentes à eficiência de utilização de sistemas por parte dos usuários. Ergonomia
IHC Interação Humano-Computador (IHC) é uma área de pesquisa dedicada a estudar os fenômenos de comunicação entre pessoas e sistemas computacionais. Ergonomia IHC
IHC Interação Humano-Computador é uma das áreas mais recentes da Ergonomia. Ergonomia IHC Usabilidade
Aplicação de usabilidade
Percebemos a sua ausência As dificuldades são ampliadas pela imensa quantidade de itens a serem decodificados.
Mas está tão explicado... Instruções para uso de um controle remoto   de uma sala de videoconferências na USP
A aplicação de usabilidade não está em deixar um produto simples no  seu  ponto de vista. Simplicidade
Não resolve todos os problemas. Ergonomia
Desenvolvê-lo com as premissas centradas no usuário, deixá-lo o mais próximo do seu modelo mental. Orientação ao usuário
 
Em IHC, nosso desafio é contribuir para  diminuir essa frustração, projetando interfaces  intuitivas , seguras e  confiáveis para seus usuários. Em IHC
Objetivo final da usabilidade é que os usuários fiquem livres para se concentrarem naquilo que precisam. Resumindo
O que devemos considerar 1. Aspectos culturais
 
2. Limitações dos usuários O que devemos considerar
O que devemos considerar
O que devemos considerar
Nós sabemos prever erros? Esqueci meu username! O que devemos considerar
Usabilidade em interação
Usabilidade em interação 1. Fácil aprendizagem O usuário consegue rapidamente explorar o sistema e realizar suas tarefas 2.  Efetividade Aumento de produtividade em função da curva de aprendizado 3.  Memorização Os usuários precisam memorizar as suas tarefas sem sobrecarregar suas interações
4. Flexibilidade O sistema e a interface devem ser flexíveis aos erros dos usuários 5.  Eficiência Menos trabalho, mais resultado 6.  Satisfação Conforto, segurança e felicidade subjetiva Usabilidade em interação
Se um site for difícil de usar,  Porque usabilidade é importante? o usuário sai. Se a homepage não for clara o suficiente para mostrar o que a empresa oferece e o que é possível fazer, o usuário também sai. Se o usuário se perder, ele sai. Se demorar para carregar, ele definitivamente sai.
Quem são os responsáveis?
Arquiteto de informação Designer de interfaces
O que é AI? Arquitetura de informação não trata de mapas ou diagramas, mas de  COMUNICAÇÃO.  Organiza a informação de um ambiente de forma que seus usuários encontrem a informação que procuram.
O que é AI? quadrados verdes  círculos laranja triângulos azuis blocos oliva caixas sólidas bolinhas de gude esferas pequenas figuras ocas montanhas altas
4 boas maneiras de fazer AI ,[object Object],3. Olhar os seus logs de busca; 4. Aplicar um Card Sorting: estudar usuários  potenciais, através da organização de cartões. 1. Similaridade com o mundo real; O que é AI?
Estudar usuários? Segundo Nielsen (2004) Um erro nos sites e intranets é estruturar a informação baseado em como a empresa enxerga a sua informação. O que é AI?
ROSENFELD e MORVILLE O que é AI? Contexto Objetivos da organização, políticas, cultura, tecnologia e recursos humanos Usuários Audiências, tarefas, necessidades, comportamento de busca de informação, experiência, vocabulário Conteúdo Documentos, formatos/tipos, objetos, metadados, estrutura existente
Tradicionamente, um arquiteto de informação está envolvido com as seguintes etapas: 1. Pesquisa com o usuário O que as pessoas precisam saber  e encontrar em um website? 2. Definição de conteúdo e funcionalidades Textos, imagens, buscas, menus, botões, etc. O que é AI?
Tradicionamente, um arquiteto de informação está envolvido com as seguintes etapas: 3. Desenvolvimento e organização de esquemas  Como o site será dividido e organizado? Como o usuário navega pelo site? 4. Desenvolvimento de interface Integração com o designer gráfico. O que é AI?
Quem trabalha onde? Escopo Interfaces Direção de arte Informação Interação Apresentação Conteúdo Estrutura Arquitetura Interação Interfaces Componentes Design gráfico Branding
Escopo Interfaces Direção de arte Informação Interação Apresentação Conteúdo Estrutura Arquitetura Interação Interfaces Componentes Design gráfico Branding Arquiteto de informação Quem trabalha onde?
Direção de arte Informação Interação Apresentação Conteúdo Estrutura Arquitetura Interação Interfaces Componentes Design gráfico Branding Designer de interação Quem trabalha onde?
O que o AI entrega? O mais típico deliverable do arquiteto de informação é o  sitemap : a estrutura de informações do website. O AI define as opções de organização dos grupos de informação, tentando suprir as necessidades dos usuários e os objetivos do negócio.
 
Lista de funcionalidades Arquitetura (ou sitemap ou fluxograma) Descrição funcional de telas Lista de keywords Lista de paths (ou fluxos) Check-list de padrões O que o AI entrega?
O designer de interação recebe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Design de interação
Devemos seguir as convenções de navegação. As pessoas gastam mais tempo em “outros” sites, com isso, tudo que fosse uma convenção e utilizado na maioria destes “outros” sites seria fixado de forma muito forte em suas mentes. Modelo mental Design de interação
Marca (Link p/ a Home) Buscar Navegação global Navegação de rodapé Navegação  local Conteúdo global e contextual
Exemplificando Busca Posição mais usada em portais corporativos
Navegação global ou institucional Exemplificando
Navegação contextual (PORTAL) Exemplificando
Navegação contextual (Seção) Exemplificando
Conteúdo Exemplificando
A maioria das pessoas só pode memorizar de  4  a  7  pequenos fragmentos diferentes de informação na memória de curto prazo.  Organização é fundamental Fale com as pessoas que formam o seu público alvo e coloque os itens e serviços que elas desejam nos lugares de maior destaque da sua tela. Você sabia que...
O que devemos saber ,[object Object]
O que devemos saber Isso porque pensamos hierarquicamente. Hot Spots  (Eyetrack, 2004).
O que devemos saber ,[object Object]
Usabilidade em conteúdo, experiência e flow (ou experiência fluída – F. Memória)
Usabilidade em conteúdo, experiência e flow 1. Devemos entender que  o conteúdo é o rei . “ Content is king” – Jakob Nielsen
Mas não é tudo. Usabilidade em conteúdo, experiência e flow
A internet não é feita somente de notícias. Usabilidade em conteúdo, experiência e flow
Usabilidade em conteúdo, experiência e flow Conteúdo, interações e usuários . Comunicação.
 
Conteúdo, experiência e flow não são conceitos acadêmicos, são aplicações em questão práticas que melhoram a qualidade de vida. A boa experiência é aquela que faz o usuário esquecer o resto do mundo. Sua atenção está voltada aos objetivos alcancáveis. É o mais próximo que poderemos chegar de felicidade. Usabilidade em conteúdo, experiência e flow
WEB 2.0
Web 2.0 é a rede como uma plataforma que interliga todos os dispositivos conectados. O'REILLY Os sites Web 2.0 devem estimular os usuários a fornecer conteúdo e aplicar regras de direitos autorais flexíveis, que permitam a utilização deste conteúdo por parte de outros usuários. Além de desenvolver aplicações leves e fáceis de serem mexidas. Estas características criam um efeito de rede e uma “ arquitetura de participação ”, o que torna a experiência do usuário mais rica.  WEB 2.0
[object Object],[object Object],WEB 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WEB 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
Globo.com Equipe de Branding Agência Dept. Criação Equipe de Design de Interface Equipe de AI O processo de trabalho na Globo.com Foco na  experiência do usuário
O processo de trabalho na Globo.com A multidisciplinaridade já começa no Departamento de Criação in-house.  Ele é responsável por todos os projetos da empresa, mesmo aqueles que eventualmente são terceirizados.  Os projetos estratégicos e mais importantes são sempre feitos internamente, enquanto que os terceirizados contam com o acompanhamento constante de profissionais da equipe.
O processo de trabalho na Globo.com A equipe de  Arquitetura da Informação  faz o levantamento e categorização de todas as informações que existirão nos sites. Eles estimam a quantidade de páginas, o conteúdo e funcionalidades existentes em cada uma delas e importância de cada informação presenta na tela.
O processo de trabalho na Globo.com Além da  arquitetura da informação  propriamente dita, o grupo é responsável pelo  documento de descrição de telas , que explica o funcionamento de cada elemento da página. Esse documento é usado tanto pelos  designers de interface  e branding como pelos  profissionais de tecnologia . Os arquitetos da informação normalmente têm background em jornalismo e comunicação, biblioteconomia ou psicologia.
O processo de trabalho na Globo.com Já a equipe de  Design de Interface  se preocupa com a Usabilidade e Interação Humano-Computador de tudo que é projetado na Criação, na consistência entre todos os produtos.  São os responsáveis pela facilidade de uso, facilidade de aprendizado, memorização, tratamento de erros e até mesmo pela agradabilidade.
O processo de trabalho na Globo.com Ele projeta os  wireframes , que são como uma planta-baixa do site, prevendo cada detalhe e funcionalidade que será utilizada. O nível de complexidade do desenho depende do projeto. O designer de interface normalmente tem background em Design, com ênfase em design de interação, de produto ou IHC.
O processo de trabalho na Globo.com Já a equipe de  Branding  foca seu trabalho no Design gráfico, na parte visual.  Os profissionais de branding normalmente tem background em Design, com ênfase em comunicação visual ou publicidade e propaganda.
O processo de trabalho na Globo.com ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
O processo de trabalho na Globo.com
 
 
 
Consultoria em usabilidade
Como se avalia usabilidade? Avaliação heurística Teste de desempenho Eye-tracking  Inspeção de padrões Pesquisa por questionários (surveys) Teste de usabilidade Checklist de guidelines Inspeção de funcionalidades Teste de usabilidade Teste de desempenho Protótipos de baixa fidelidade Card-sorting e entrevistas Avaliação de melhores práticas de usabilidade Teste de usabilidade Análise de logs de busca e comunicação
Consultoria em usabilidade ,[object Object],[object Object],[object Object],Métodos, objetivos e prática
Análise heurística (ou avaliação heurística) Especialistas em usabilidade avaliam a interface e suas funcionalidades a partir de guidelines e julgam se os aspectos estão de acordo com princípios de usabilidade reconhecidos (heurísticas). Criador das 10 heurísticas mais aplicadas no mundo.
Quando aplicar? Uma avaliação rápida da interface a partir de critérios básicos de usabilidade que pode ser realizada principalmente na fase de  design e desenvolvimento , antes da realização de testes por usuários.  Como aplicar? Especialistas com domínio de princípios de IHC ou fatores humanos . O conhecimento do especialista afeta a qualidade do teste. Análise heurística (ou avaliação heurística)
Número de recursos 3 a 5 especialistas.  Pode-se estabelecer contextos (cenários) de uso e tarefas para servir de contexto para o teste. O que resulta Problemas da interface classificados por ordem de severidade e recomendações de design; heurísticas e critérios. Análise heurística (ou avaliação heurística)
Segundo Willis (2003), é uma técnica para compreender como o usuário agrupa informações dentro de um domínio. Os participantes organizam cartões representando tipos específicos de informação Card sorting
Card sorting Quando aplicar? No projeto de um novo site;  Na criação de uma nova área do site; No redesign de um site. Como aplicar? Online ou em papel.
Número de recursos Acima de  6 pessoas  (individual) ou  4-6 pessoas  (por grupo) representativas do público-alvo do instrumento a ser avaliado. Um facilitador, e observadores. O que resulta Arquitetura de informação Análise de similaridade Card sorting
Testes de usabilidade Requer um protótipo funcional  ou sistema, na qual são realizados testes de tarefas com os usuários, medições de desempenho, complementados com observações e questionários.
Quando aplicar? Quando  precisarmos testar um ou mais sistema(s)  ou protótipo(s)com o objetivo de assegurar um grau de facilidade de uso, satisfação e utilidade de seus componentes. Como aplicar? Teste de laboratório, presencial, com ambiente controlado; protocolos e questionários. Testes de usabilidade
Número de recursos Mínimo de  20 usuários representativos , considerando a avaliação de três sites; facilitador do teste, observadores. 60 a 90 minutos, por usuário. O que resulta Ferramentas de registro de logs, vídeos, computadores com o mesmo padrão. Análises estatísticas comparativas e representações de necessidades. Testes de usabilidade
Testes de usabilidade
A Globo.com foi a primeira empresa da América Latina a ter um Laboratório de Usabilidade in-house dedicado exclusivamente a esse tipo de pesquisa. CASE   Globo.com
CASE   Globo.com Premissas  de produto Avaliação da criação Dados do call center Pesquisas  com usuários + + + Dados de audiência + Roteiro de tarefas Lista de funções que devem ser testadas Teste Resultados tabulação de dados  + Relatório +  Propostas  para melhoria do produto Melhorias  no produto
Créditos Parte dos conteúdos dessa palestra foram baseados em publicações, livros e exposições dos seguintes autores / profissionais: Felipe Memória ( http://www.fmemoria.com.br ) Mônica Fernandes ( http://monicamcf.sites.uol.com.br/ ) Marcio Tristão  ( http://www.mtristao.com )
Muito obrigado! Renato Rosa [email_address] [email_address] Entre em contato para maiores informações.

Mais conteúdo relacionado

Mais procurados

Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
Wellington Marion
 
Modulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampasModulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampas
Thais Campas
 
Usabilidade, IHC - Definições
Usabilidade, IHC - DefiniçõesUsabilidade, IHC - Definições
Usabilidade, IHC - Definições
Luiz Agner
 
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane FidelixAula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Cris Fidelix
 
01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]
Robson Santos
 
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Maiara Zenatti
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
Wellington Oliveira
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Ros Galabo, PhD
 
Ihc 01-conceitos básicos
Ihc 01-conceitos básicosIhc 01-conceitos básicos
Ihc 01-conceitos básicos
Eduardo Xavier
 
Interface Homem Computador - IHC
Interface Homem Computador - IHCInterface Homem Computador - IHC
Interface Homem Computador - IHC
Neilda Costa
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
Bruno Biagioni Neto
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
Flavia Negrao
 
Modulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampasModulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampas
Thais Campas
 
Interação Humano Computador 1
Interação Humano Computador 1Interação Humano Computador 1
Interação Humano Computador 1
Robson Santos
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
Sidney Roberto
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
Luis Fernando Justus
 
Aula5 ihm
Aula5 ihmAula5 ihm
Aula5 ihm
Silvia Dotta
 
Newton Paiva - DI - Aula 06
Newton Paiva - DI - Aula 06Newton Paiva - DI - Aula 06
Newton Paiva - DI - Aula 06
Marcello Cardoso
 
Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04
Marcello Cardoso
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de Sites
Simone Cervantes
 

Mais procurados (20)

Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
 
Modulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampasModulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampas
 
Usabilidade, IHC - Definições
Usabilidade, IHC - DefiniçõesUsabilidade, IHC - Definições
Usabilidade, IHC - Definições
 
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane FidelixAula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
 
01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]
 
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
 
Ihc 01-conceitos básicos
Ihc 01-conceitos básicosIhc 01-conceitos básicos
Ihc 01-conceitos básicos
 
Interface Homem Computador - IHC
Interface Homem Computador - IHCInterface Homem Computador - IHC
Interface Homem Computador - IHC
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
 
Modulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampasModulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampas
 
Interação Humano Computador 1
Interação Humano Computador 1Interação Humano Computador 1
Interação Humano Computador 1
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
 
Aula5 ihm
Aula5 ihmAula5 ihm
Aula5 ihm
 
Newton Paiva - DI - Aula 06
Newton Paiva - DI - Aula 06Newton Paiva - DI - Aula 06
Newton Paiva - DI - Aula 06
 
Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de Sites
 

Destaque

Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
Karine Drumond
 
Mob apresentaçâo
Mob apresentaçâoMob apresentaçâo
Mob apresentaçâo
Cabral Micael
 
Unb -2011.2_-_arqi_-_04_-_ai_-_rotulagem
Unb  -2011.2_-_arqi_-_04_-_ai_-_rotulagemUnb  -2011.2_-_arqi_-_04_-_ai_-_rotulagem
Unb -2011.2_-_arqi_-_04_-_ai_-_rotulagem
Claudenio Alberto
 
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensarTrabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Rafael Berto
 
Arquitetura da Informação sem Wireframe
Arquitetura da Informação sem WireframeArquitetura da Informação sem Wireframe
Arquitetura da Informação sem Wireframe
Rodrigo Freese Gonzatto
 
Arquitetura de Informação (Parte 2)
Arquitetura de Informação (Parte 2)Arquitetura de Informação (Parte 2)
Arquitetura de Informação (Parte 2)
Carolina Leslie
 
Usabilidade & heurísticas para a todos guiar!
Usabilidade & heurísticas para a todos guiar!Usabilidade & heurísticas para a todos guiar!
Usabilidade & heurísticas para a todos guiar!
Henrique Perticarati
 
Sistemas de navegação global, local e contextual
Sistemas de navegação global, local e contextualSistemas de navegação global, local e contextual
Sistemas de navegação global, local e contextual
Luiz Agner
 
Palestra - Testes de Usabilidade
Palestra - Testes de UsabilidadePalestra - Testes de Usabilidade
Palestra - Testes de Usabilidade
Luiz Agner
 
Perfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCPerfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHC
Ros Galabo, PhD
 
Unify Your Deliverables
Unify Your DeliverablesUnify Your Deliverables
Unify Your Deliverables
nathanacurtis
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Sayanee Basu
 
CX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, LondonCX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, London
Precedent
 
Seven Philosophies to build a great customer experience
Seven Philosophies to build a great customer experienceSeven Philosophies to build a great customer experience
Seven Philosophies to build a great customer experience
Beyond Philosophy
 
Interfaces Digitais: Design, Estética e Interações 3
Interfaces Digitais: Design, Estética e Interações 3Interfaces Digitais: Design, Estética e Interações 3
Interfaces Digitais: Design, Estética e Interações 3
Guilherme Ranoya
 
A Persuasão como Ferramenta na Relação ‘Ergonomia, Design e Emoção’
A Persuasão como Ferramenta na Relação ‘Ergonomia, Design e Emoção’A Persuasão como Ferramenta na Relação ‘Ergonomia, Design e Emoção’
A Persuasão como Ferramenta na Relação ‘Ergonomia, Design e Emoção’
Eduardo Insaurriaga
 
Design para o Comportamento
Design para o ComportamentoDesign para o Comportamento
Design para o Comportamento
CogIgnition
 
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
Rodrigo Freese Gonzatto
 
Games e inovacao tecnologica
Games e inovacao tecnologicaGames e inovacao tecnologica
Games e inovacao tecnologica
Alexsandro
 
Questionário de ergonomia
Questionário de ergonomiaQuestionário de ergonomia
Questionário de ergonomia
Antonio Pereira
 

Destaque (20)

Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Mob apresentaçâo
Mob apresentaçâoMob apresentaçâo
Mob apresentaçâo
 
Unb -2011.2_-_arqi_-_04_-_ai_-_rotulagem
Unb  -2011.2_-_arqi_-_04_-_ai_-_rotulagemUnb  -2011.2_-_arqi_-_04_-_ai_-_rotulagem
Unb -2011.2_-_arqi_-_04_-_ai_-_rotulagem
 
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensarTrabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
Trabalho Acadêmico sobre os capítulos 1 e 2 do Livro Não me faça pensar
 
Arquitetura da Informação sem Wireframe
Arquitetura da Informação sem WireframeArquitetura da Informação sem Wireframe
Arquitetura da Informação sem Wireframe
 
Arquitetura de Informação (Parte 2)
Arquitetura de Informação (Parte 2)Arquitetura de Informação (Parte 2)
Arquitetura de Informação (Parte 2)
 
Usabilidade & heurísticas para a todos guiar!
Usabilidade & heurísticas para a todos guiar!Usabilidade & heurísticas para a todos guiar!
Usabilidade & heurísticas para a todos guiar!
 
Sistemas de navegação global, local e contextual
Sistemas de navegação global, local e contextualSistemas de navegação global, local e contextual
Sistemas de navegação global, local e contextual
 
Palestra - Testes de Usabilidade
Palestra - Testes de UsabilidadePalestra - Testes de Usabilidade
Palestra - Testes de Usabilidade
 
Perfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCPerfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHC
 
Unify Your Deliverables
Unify Your DeliverablesUnify Your Deliverables
Unify Your Deliverables
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
CX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, LondonCX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, London
 
Seven Philosophies to build a great customer experience
Seven Philosophies to build a great customer experienceSeven Philosophies to build a great customer experience
Seven Philosophies to build a great customer experience
 
Interfaces Digitais: Design, Estética e Interações 3
Interfaces Digitais: Design, Estética e Interações 3Interfaces Digitais: Design, Estética e Interações 3
Interfaces Digitais: Design, Estética e Interações 3
 
A Persuasão como Ferramenta na Relação ‘Ergonomia, Design e Emoção’
A Persuasão como Ferramenta na Relação ‘Ergonomia, Design e Emoção’A Persuasão como Ferramenta na Relação ‘Ergonomia, Design e Emoção’
A Persuasão como Ferramenta na Relação ‘Ergonomia, Design e Emoção’
 
Design para o Comportamento
Design para o ComportamentoDesign para o Comportamento
Design para o Comportamento
 
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
 
Games e inovacao tecnologica
Games e inovacao tecnologicaGames e inovacao tecnologica
Games e inovacao tecnologica
 
Questionário de ergonomia
Questionário de ergonomiaQuestionário de ergonomia
Questionário de ergonomia
 

Semelhante a Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa

29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
Rio Info
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e Usabilidade
Scriptutex
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de Informação
Instituto Faber-Ludens
 
Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013
Instituto Faber-Ludens
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Web Standards
Web StandardsWeb Standards
Web Standards
Pedro Tavares
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
wudrs
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Palestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaPalestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, Brasília
Luiz Agner
 
Arquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de DesignArquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de Design
Mauro Pinheiro
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
Marconi Pacheco
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
MBA em Marketing Digital e Gestão de Projetos Web
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
Patricia Mallmann
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
guest5ccda
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
Luiz Agner
 
O Arquiteto da Informação
O Arquiteto da InformaçãoO Arquiteto da Informação
O Arquiteto da Informação
Claudio Diniz - Designer Gráfico
 
Arquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e DesenvolvimentoArquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e Desenvolvimento
Claudio Diniz - Designer Gráfico
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
Marcello Cardoso
 
Aula 1
Aula 1Aula 1

Semelhante a Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa (20)

29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e Usabilidade
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de Informação
 
Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Palestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaPalestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, Brasília
 
Arquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de DesignArquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de Design
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
 
O Arquiteto da Informação
O Arquiteto da InformaçãoO Arquiteto da Informação
O Arquiteto da Informação
 
Arquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e DesenvolvimentoArquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e Desenvolvimento
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Aula 1
Aula 1Aula 1
Aula 1
 

Último

Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
Momento da Informática
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 

Último (8)

Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 

Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa

  • 1.  
  • 2. Quem sou Renato Rosa, 28 anos, 9 de internet Arquiteto de informação – Globo.com Núcleo de jornalismo Idealizador do NPI Núcleo de Projeto de Interface da AG2 Membro do IAI Information Architecture Institute
  • 3.
  • 5. Conceito de usabilidade É a facilidade de uso que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica.
  • 6. “ Usabilidade é a capacidade, em termos funcionais humanos, de um sistema ser usado facilmente e com eficiência pelo usuário.” - Shackel (1993) “ Usabilidade está diretamente ligada ao diálogo na interface. É a capacidade do software em permitir que o usuário alcance suas metas de interação com o sistema” - Scapin (1993)
  • 7. Ergonomia Identifica fatores humanos referentes à eficiência de utilização de sistemas por parte dos usuários. Ergonomia
  • 8. IHC Interação Humano-Computador (IHC) é uma área de pesquisa dedicada a estudar os fenômenos de comunicação entre pessoas e sistemas computacionais. Ergonomia IHC
  • 9. IHC Interação Humano-Computador é uma das áreas mais recentes da Ergonomia. Ergonomia IHC Usabilidade
  • 11. Percebemos a sua ausência As dificuldades são ampliadas pela imensa quantidade de itens a serem decodificados.
  • 12. Mas está tão explicado... Instruções para uso de um controle remoto de uma sala de videoconferências na USP
  • 13. A aplicação de usabilidade não está em deixar um produto simples no seu ponto de vista. Simplicidade
  • 14. Não resolve todos os problemas. Ergonomia
  • 15. Desenvolvê-lo com as premissas centradas no usuário, deixá-lo o mais próximo do seu modelo mental. Orientação ao usuário
  • 16.  
  • 17. Em IHC, nosso desafio é contribuir para diminuir essa frustração, projetando interfaces intuitivas , seguras e confiáveis para seus usuários. Em IHC
  • 18. Objetivo final da usabilidade é que os usuários fiquem livres para se concentrarem naquilo que precisam. Resumindo
  • 19. O que devemos considerar 1. Aspectos culturais
  • 20.  
  • 21. 2. Limitações dos usuários O que devemos considerar
  • 22. O que devemos considerar
  • 23. O que devemos considerar
  • 24. Nós sabemos prever erros? Esqueci meu username! O que devemos considerar
  • 26. Usabilidade em interação 1. Fácil aprendizagem O usuário consegue rapidamente explorar o sistema e realizar suas tarefas 2. Efetividade Aumento de produtividade em função da curva de aprendizado 3. Memorização Os usuários precisam memorizar as suas tarefas sem sobrecarregar suas interações
  • 27. 4. Flexibilidade O sistema e a interface devem ser flexíveis aos erros dos usuários 5. Eficiência Menos trabalho, mais resultado 6. Satisfação Conforto, segurança e felicidade subjetiva Usabilidade em interação
  • 28. Se um site for difícil de usar, Porque usabilidade é importante? o usuário sai. Se a homepage não for clara o suficiente para mostrar o que a empresa oferece e o que é possível fazer, o usuário também sai. Se o usuário se perder, ele sai. Se demorar para carregar, ele definitivamente sai.
  • 29. Quem são os responsáveis?
  • 30. Arquiteto de informação Designer de interfaces
  • 31. O que é AI? Arquitetura de informação não trata de mapas ou diagramas, mas de COMUNICAÇÃO. Organiza a informação de um ambiente de forma que seus usuários encontrem a informação que procuram.
  • 32. O que é AI? quadrados verdes círculos laranja triângulos azuis blocos oliva caixas sólidas bolinhas de gude esferas pequenas figuras ocas montanhas altas
  • 33.
  • 34. Estudar usuários? Segundo Nielsen (2004) Um erro nos sites e intranets é estruturar a informação baseado em como a empresa enxerga a sua informação. O que é AI?
  • 35. ROSENFELD e MORVILLE O que é AI? Contexto Objetivos da organização, políticas, cultura, tecnologia e recursos humanos Usuários Audiências, tarefas, necessidades, comportamento de busca de informação, experiência, vocabulário Conteúdo Documentos, formatos/tipos, objetos, metadados, estrutura existente
  • 36. Tradicionamente, um arquiteto de informação está envolvido com as seguintes etapas: 1. Pesquisa com o usuário O que as pessoas precisam saber e encontrar em um website? 2. Definição de conteúdo e funcionalidades Textos, imagens, buscas, menus, botões, etc. O que é AI?
  • 37. Tradicionamente, um arquiteto de informação está envolvido com as seguintes etapas: 3. Desenvolvimento e organização de esquemas Como o site será dividido e organizado? Como o usuário navega pelo site? 4. Desenvolvimento de interface Integração com o designer gráfico. O que é AI?
  • 38. Quem trabalha onde? Escopo Interfaces Direção de arte Informação Interação Apresentação Conteúdo Estrutura Arquitetura Interação Interfaces Componentes Design gráfico Branding
  • 39. Escopo Interfaces Direção de arte Informação Interação Apresentação Conteúdo Estrutura Arquitetura Interação Interfaces Componentes Design gráfico Branding Arquiteto de informação Quem trabalha onde?
  • 40. Direção de arte Informação Interação Apresentação Conteúdo Estrutura Arquitetura Interação Interfaces Componentes Design gráfico Branding Designer de interação Quem trabalha onde?
  • 41. O que o AI entrega? O mais típico deliverable do arquiteto de informação é o sitemap : a estrutura de informações do website. O AI define as opções de organização dos grupos de informação, tentando suprir as necessidades dos usuários e os objetivos do negócio.
  • 42.  
  • 43. Lista de funcionalidades Arquitetura (ou sitemap ou fluxograma) Descrição funcional de telas Lista de keywords Lista de paths (ou fluxos) Check-list de padrões O que o AI entrega?
  • 44.
  • 45. Devemos seguir as convenções de navegação. As pessoas gastam mais tempo em “outros” sites, com isso, tudo que fosse uma convenção e utilizado na maioria destes “outros” sites seria fixado de forma muito forte em suas mentes. Modelo mental Design de interação
  • 46. Marca (Link p/ a Home) Buscar Navegação global Navegação de rodapé Navegação local Conteúdo global e contextual
  • 47. Exemplificando Busca Posição mais usada em portais corporativos
  • 48. Navegação global ou institucional Exemplificando
  • 52. A maioria das pessoas só pode memorizar de 4 a 7 pequenos fragmentos diferentes de informação na memória de curto prazo. Organização é fundamental Fale com as pessoas que formam o seu público alvo e coloque os itens e serviços que elas desejam nos lugares de maior destaque da sua tela. Você sabia que...
  • 53.
  • 54. O que devemos saber Isso porque pensamos hierarquicamente. Hot Spots (Eyetrack, 2004).
  • 55.
  • 56. Usabilidade em conteúdo, experiência e flow (ou experiência fluída – F. Memória)
  • 57. Usabilidade em conteúdo, experiência e flow 1. Devemos entender que o conteúdo é o rei . “ Content is king” – Jakob Nielsen
  • 58. Mas não é tudo. Usabilidade em conteúdo, experiência e flow
  • 59. A internet não é feita somente de notícias. Usabilidade em conteúdo, experiência e flow
  • 60. Usabilidade em conteúdo, experiência e flow Conteúdo, interações e usuários . Comunicação.
  • 61.  
  • 62. Conteúdo, experiência e flow não são conceitos acadêmicos, são aplicações em questão práticas que melhoram a qualidade de vida. A boa experiência é aquela que faz o usuário esquecer o resto do mundo. Sua atenção está voltada aos objetivos alcancáveis. É o mais próximo que poderemos chegar de felicidade. Usabilidade em conteúdo, experiência e flow
  • 64. Web 2.0 é a rede como uma plataforma que interliga todos os dispositivos conectados. O'REILLY Os sites Web 2.0 devem estimular os usuários a fornecer conteúdo e aplicar regras de direitos autorais flexíveis, que permitam a utilização deste conteúdo por parte de outros usuários. Além de desenvolver aplicações leves e fáceis de serem mexidas. Estas características criam um efeito de rede e uma “ arquitetura de participação ”, o que torna a experiência do usuário mais rica. WEB 2.0
  • 65.
  • 66.
  • 67.  
  • 68. Globo.com Equipe de Branding Agência Dept. Criação Equipe de Design de Interface Equipe de AI O processo de trabalho na Globo.com Foco na experiência do usuário
  • 69. O processo de trabalho na Globo.com A multidisciplinaridade já começa no Departamento de Criação in-house. Ele é responsável por todos os projetos da empresa, mesmo aqueles que eventualmente são terceirizados. Os projetos estratégicos e mais importantes são sempre feitos internamente, enquanto que os terceirizados contam com o acompanhamento constante de profissionais da equipe.
  • 70. O processo de trabalho na Globo.com A equipe de Arquitetura da Informação faz o levantamento e categorização de todas as informações que existirão nos sites. Eles estimam a quantidade de páginas, o conteúdo e funcionalidades existentes em cada uma delas e importância de cada informação presenta na tela.
  • 71. O processo de trabalho na Globo.com Além da arquitetura da informação propriamente dita, o grupo é responsável pelo documento de descrição de telas , que explica o funcionamento de cada elemento da página. Esse documento é usado tanto pelos designers de interface e branding como pelos profissionais de tecnologia . Os arquitetos da informação normalmente têm background em jornalismo e comunicação, biblioteconomia ou psicologia.
  • 72. O processo de trabalho na Globo.com Já a equipe de Design de Interface se preocupa com a Usabilidade e Interação Humano-Computador de tudo que é projetado na Criação, na consistência entre todos os produtos. São os responsáveis pela facilidade de uso, facilidade de aprendizado, memorização, tratamento de erros e até mesmo pela agradabilidade.
  • 73. O processo de trabalho na Globo.com Ele projeta os wireframes , que são como uma planta-baixa do site, prevendo cada detalhe e funcionalidade que será utilizada. O nível de complexidade do desenho depende do projeto. O designer de interface normalmente tem background em Design, com ênfase em design de interação, de produto ou IHC.
  • 74. O processo de trabalho na Globo.com Já a equipe de Branding foca seu trabalho no Design gráfico, na parte visual. Os profissionais de branding normalmente tem background em Design, com ênfase em comunicação visual ou publicidade e propaganda.
  • 75.
  • 76. O processo de trabalho na Globo.com
  • 77.  
  • 78.  
  • 79.  
  • 81. Como se avalia usabilidade? Avaliação heurística Teste de desempenho Eye-tracking Inspeção de padrões Pesquisa por questionários (surveys) Teste de usabilidade Checklist de guidelines Inspeção de funcionalidades Teste de usabilidade Teste de desempenho Protótipos de baixa fidelidade Card-sorting e entrevistas Avaliação de melhores práticas de usabilidade Teste de usabilidade Análise de logs de busca e comunicação
  • 82.
  • 83. Análise heurística (ou avaliação heurística) Especialistas em usabilidade avaliam a interface e suas funcionalidades a partir de guidelines e julgam se os aspectos estão de acordo com princípios de usabilidade reconhecidos (heurísticas). Criador das 10 heurísticas mais aplicadas no mundo.
  • 84. Quando aplicar? Uma avaliação rápida da interface a partir de critérios básicos de usabilidade que pode ser realizada principalmente na fase de design e desenvolvimento , antes da realização de testes por usuários. Como aplicar? Especialistas com domínio de princípios de IHC ou fatores humanos . O conhecimento do especialista afeta a qualidade do teste. Análise heurística (ou avaliação heurística)
  • 85. Número de recursos 3 a 5 especialistas. Pode-se estabelecer contextos (cenários) de uso e tarefas para servir de contexto para o teste. O que resulta Problemas da interface classificados por ordem de severidade e recomendações de design; heurísticas e critérios. Análise heurística (ou avaliação heurística)
  • 86. Segundo Willis (2003), é uma técnica para compreender como o usuário agrupa informações dentro de um domínio. Os participantes organizam cartões representando tipos específicos de informação Card sorting
  • 87. Card sorting Quando aplicar? No projeto de um novo site; Na criação de uma nova área do site; No redesign de um site. Como aplicar? Online ou em papel.
  • 88. Número de recursos Acima de 6 pessoas (individual) ou 4-6 pessoas (por grupo) representativas do público-alvo do instrumento a ser avaliado. Um facilitador, e observadores. O que resulta Arquitetura de informação Análise de similaridade Card sorting
  • 89. Testes de usabilidade Requer um protótipo funcional ou sistema, na qual são realizados testes de tarefas com os usuários, medições de desempenho, complementados com observações e questionários.
  • 90. Quando aplicar? Quando precisarmos testar um ou mais sistema(s) ou protótipo(s)com o objetivo de assegurar um grau de facilidade de uso, satisfação e utilidade de seus componentes. Como aplicar? Teste de laboratório, presencial, com ambiente controlado; protocolos e questionários. Testes de usabilidade
  • 91. Número de recursos Mínimo de 20 usuários representativos , considerando a avaliação de três sites; facilitador do teste, observadores. 60 a 90 minutos, por usuário. O que resulta Ferramentas de registro de logs, vídeos, computadores com o mesmo padrão. Análises estatísticas comparativas e representações de necessidades. Testes de usabilidade
  • 93. A Globo.com foi a primeira empresa da América Latina a ter um Laboratório de Usabilidade in-house dedicado exclusivamente a esse tipo de pesquisa. CASE Globo.com
  • 94. CASE Globo.com Premissas de produto Avaliação da criação Dados do call center Pesquisas com usuários + + + Dados de audiência + Roteiro de tarefas Lista de funções que devem ser testadas Teste Resultados tabulação de dados + Relatório + Propostas para melhoria do produto Melhorias no produto
  • 95. Créditos Parte dos conteúdos dessa palestra foram baseados em publicações, livros e exposições dos seguintes autores / profissionais: Felipe Memória ( http://www.fmemoria.com.br ) Mônica Fernandes ( http://monicamcf.sites.uol.com.br/ ) Marcio Tristão ( http://www.mtristao.com )
  • 96. Muito obrigado! Renato Rosa [email_address] [email_address] Entre em contato para maiores informações.