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.
O que vamos ver <ul><li>Conceito de usabilidade </li></ul><ul><li>Aplicação de usabilidade </li></ul><ul><li>AI e Design de interfaces </li></ul><ul><li>Usabilidade em conteúdo, experiência e flow </li></ul><ul><li>Tendências de mercado e web 2.0 </li></ul><ul><li>Processo de trabalho na Globo.com </li></ul><ul><li>Consultoria em usabilidade </li></ul><ul><li>CASE: Laboratório Globo.com </li></ul><ul><li>CASE: Flog 8P </li></ul>

4.
Conceito de usabilidade

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

10.
Aplicação de 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

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

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

25.
Usabilidade em interação

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.
4 boas maneiras de fazer AI <ul><li>Estudar o inimigo: visitar os sites concorrentes; </li></ul>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?

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.

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.
O designer de interação recebe <ul><li>Arquitetura de informação </li></ul><ul><li>Conteúdo fechado pelo AI e cliente </li></ul><ul><li>Entrega </li></ul><ul><li>Wireframes desenhados e especificados, </li></ul><ul><li>Incluindo mensagens de erro, overs, animações, </li></ul><ul><li>respostas de sistema e até comportamentos </li></ul><ul><li>temporários. </li></ul>Design de interação

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

49.
Navegação contextual (PORTAL) Exemplificando

50.
Navegação contextual (Seção) Exemplificando

51.
Conteúdo 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.
O que devemos saber <ul><li>A maior parte das interfaces gráficas digitais depende de hierarquias; </li></ul>

54.
O que devemos saber Isso porque pensamos hierarquicamente. Hot Spots (Eyetrack, 2004).

55.
O que devemos saber <ul><li>Devemos atender às expectativas dos usuários. Uma organização lógica permite que estes usuários façam suposições corretas sobre onde encontrar o que desejam; </li></ul>

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.

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

63.
WEB 2.0

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.
<ul><li>Características </li></ul><ul><li>Os usuários adicionam valor; </li></ul>WEB 2.0 <ul><li>Os usuários têm maior gerência sobre seus dados; </li></ul><ul><li>As restrições sobre as licenças de conteúdo são menores; </li></ul><ul><li>Novas funcionalidades são acrescentadas regularmente (eternamente Beta) </li></ul><ul><li>Os usuários são envolvidos como testadores; </li></ul><ul><li>As interfaces de serviços web permitem reutilização de serviços e dados alheios; </li></ul><ul><li>A programação é leve e permite a combinação de sistemas. </li></ul>

66.
WEB 2.0 <ul><li>WEB 1.0 </li></ul><ul><li>Produtos </li></ul><ul><li>Proprietária </li></ul><ul><li>Institucional </li></ul><ul><li>Pontual </li></ul><ul><li>WEB 2.0 </li></ul><ul><li>Plataforma </li></ul><ul><li>Aberta </li></ul><ul><li>Social </li></ul><ul><li>Persistente </li></ul>

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.
O processo de trabalho na Globo.com <ul><li>1. Demanda / Definição da estratégia </li></ul><ul><li>2. Benchmark </li></ul><ul><li>3. Levantamento de funcionalidades desejadas (Brainstorm) </li></ul><ul><li>4. Macro arquitetura da informação </li></ul><ul><li>5. Verificação da viabilidade tecnológica </li></ul><ul><li>6. Continuação do projeto </li></ul><ul><ul><li>a. Detalhamento da arquitetura da informação </li></ul></ul><ul><ul><li>b. Desenho da experiência do usuário </li></ul></ul><ul><ul><li>c. Projeto da interface </li></ul></ul><ul><ul><li>d. Projeto de branding </li></ul></ul><ul><ul><li>e. Ajustes </li></ul></ul><ul><li>7. Implementação </li></ul><ul><li>8. Desenvolvimento </li></ul><ul><li>9. Lançamento </li></ul>

76.
O processo de trabalho na Globo.com

80.
Consultoria em usabilidade

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.
Consultoria em usabilidade <ul><li>Análise heurística </li></ul><ul><li>Card sorting </li></ul><ul><li>Testes de usabilidade </li></ul>Métodos, objetivos e prática

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

92.
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.