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

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

Conceito de usabilidade

Aplicação de usabilidade

AI e Design de interfaces

Usabilidade em conteúdo, experiência e flow

Tendências de mercado e web 2.0

Processo de trabalho na Globo.com

Consultoria em usabilidade

CASE: Laboratório Globo.com

CASE: Flog 8P

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

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

Estudar o inimigo: visitar os sites concorrentes;

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

Arquitetura de informação

Conteúdo fechado pelo AI e cliente

Entrega

Wireframes desenhados e especificados,

Incluindo mensagens de erro, overs, animações,

respostas de sistema e até comportamentos

temporários.

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

A maior parte das interfaces gráficas digitais depende de hierarquias;

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

O que devemos saber

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;

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

Características

Os usuários adicionam valor;

WEB 2.0

Os usuários têm maior gerência sobre seus dados;

As restrições sobre as licenças de conteúdo são menores;

Novas funcionalidades são acrescentadas regularmente (eternamente Beta)

Os usuários são envolvidos como testadores;

As interfaces de serviços web permitem reutilização de serviços e dados alheios;

A programação é leve e permite a combinação de sistemas.

WEB 2.0

WEB 1.0

Produtos

Proprietária

Institucional

Pontual

WEB 2.0

Plataforma

Aberta

Social

Persistente

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

1. Demanda / Definição da estratégia

2. Benchmark

3. Levantamento de funcionalidades desejadas (Brainstorm)

4. Macro arquitetura da informação

5. Verificação da viabilidade tecnológica

6. Continuação do projeto

a. Detalhamento da arquitetura da informação

b. Desenho da experiência do usuário

c. Projeto da interface

d. Projeto de branding

e. Ajustes

7. Implementação

8. Desenvolvimento

9. Lançamento

O processo de trabalho na Globo.com

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

Análise heurística

Card sorting

Testes de usabilidade

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.