Usabilidade - Metas, Principios e Heuristicas

Apresentação sobre

USABILIDADE – Metas da

Usabilidade, Princípios de

Design e Heurísticas de Nielsen

OBJETIVO

Compartilhar alguns conceitos e recomendar algumas técnicas de

Usabilidade consideradas úteis para aumentar a qualidade de seus produtos.

AGENDA

Benefícios das Boas Práticas de Usabilidade

Conceito de “Usabilidade”

Objetivos/Metas da Usabilidade

Princípios de Design

Heurísticas de Nielsen

Checklist para Testar a Usabilidade

Benefícios das Boas Práticas de Usabilidade

Menor custo de manutenção...

Maior eficiência (mais tarefas em menos tempo)

Menor custo em treinamentos

Satisfação do usuário

Segurança para explorar a aplicação

Confiança na utilização


É a medida pela qual um produto pode ser usado por usuários específicos para

alcançar objetivos específicos com eficácia, eficiência e satisfação em um

contexto de uso específico.

Norma ISO 9241-11

O que é Usabilidade?


“Pensar em usabilidade é pensar em produtos fáceis de usar”

Jesse James Garrett (The Elements of UserExperience)

Cafeteira de Carelman para masoquistas


1991

ISO 9126

Características da Qualidade

- Usabilidade

ISO 9241 - 11

1998

Requisitos Ergonômicos –

Orientações sobre Usabilidade

✓ Inteligibilidade

✓Apreensibilidade

✓Operacionalidade

✓Proteção frente a erros de

usuários

✓Estética/Atratividade

✓Acessibilidade

✓Contexto de Uso

✓Eficácia

✓Eficiência

✓Satisfação

Jakob Nielsen IHC* e Ergonomia

“Pai” da Usabilidade

1993

✓ PhD *Interface Humano

Computador

✓Condições adequadas de

uso

✓ Avaliação Heurística

Linha do tempo...


Objetivo e Metas da Usabilidade

✓Entender a necessidade do usuário

✓Buscar clareza e objetivo principal

✓Atributos para assegurar a qualidade de uso


✓Conhecimento teórico

✓Experiência

✓Senso comum


✓Método de inspeção de uma Interface

✓Conjunto de regras que estabelecem padrões

✓Garantir Interfaces mais fáceis de usar

PROJETO CONSTRUÇÃO AVALIAÇÃO/TESTES

ETAPAS DO CICLO DE DESENVOLVIMENTO DE UM PRODUTO


1. Visibilidade do status do sistema

2. Correlação entre o sistema e o mundo real

3. Controle e liberdade do usuário

4. Consistência e padrões

5. Prevenção de erros

6. Reconhecimento em vez de memorização

7. Flexibilidade e eficiência de uso

8. Projeto estético e minimalista

9. Suporte aos usuários no reconhecimento,

diagnóstico e recuperação de erros

10. Informações de ajuda e documentação

Heurísticas de NielsenPrincípios de Design

1. Visibilidade

2. Feedback

3. Restrições

4. Mapeamento

5. Consistência

6. Affordance

1. Utilidade

2. Eficácia

3. Eficiência

4. Segurança

5. Aprendizado

6. Memorização

Metas da Usabilidade

TÉCNICAS A SEREM USADAS NO CICLO DE DESENVOLVIMENTO DE UM PRODUTO


O usuário tem que conseguir usar

O usuário tem que querer voltar a usar


Propicia a funcionalidade adequada para o objetivo específico do usuário.

1. Utilidade


GuiasAcesso Rápido à opções

Seções

Botão MS Word

Nem sempre o que tem mais opções é o mais útil.

100x mais opções de

edição

1. Utilidade


Se refere a quão bem uma ferramenta auxilia na realização de uma atividade proposta, em um contexto de uso.

Depende, pra quem e pra quê?

2. Eficácia


2. Eficácia

9 / ( 5 * 4 / (5 + 5 ) ) =

TAREFA: Calcular a equação cujo resultado é igual 2. Considerando que o usuário sabe utilizar os 2 tipos de calculadoras

5 + 5 = MS 5 * 4 / MR = MS 9 / MR

Qual das duas foi mais eficaz?

2. Eficácia

As duas são eficazes pois deram o resultado correto.


O quanto uma ferramenta auxilia na economia de recursos para a realização de uma atividade proposta, em um contexto de uso.

3. Eficiência3. Eficiência


9 / ( 5 * 4 / (5 + 5 ) ) =

TAREFA: Calcular a equação cujo resultado é igual 2

5 + 5 = MS 5 * 4 / MR = MS 9 / MR

Qual das duas foi mais eficiente?

16 Passos14 Passos

3. Eficiência

A HP foi mais eficiente , foram gastos menos passos para se alcançar o resultado


Interface

Se refere a prevenção e recuperação de erros. Deve ser perceptível, transparente.

4. Segurança

Mascaramento de campos

Indicação de obrigatoriedade


Prevenção de Erros

4. Segurança4. Segurança

Pedir confirmação em ações

destrutivas


Clareza na interface, compreensão das funcionalidades

As funções fundamentais do sistema devem ser de fácil assimilação.

5. Aprendizado


Preciso ler o manual toda vez que vou utilizar o sistema?

Depois do treinamento, preciso anotar num papelzinho os comandos mais comuns do sistema?

5. Aprendizado


Facilidade de lembrar como utilizar um recurso do sistema, depois de já se ter aprendido a fazê-lo

6. Memorização6.Memorização


6. Memorização

Memória Visual : É a comunicação responsável por cerca de 75% do que

se grava na memória

6.Memorização


“...são derivados de uma mistura de conhecimento baseado em teoria, experiência

e senso comum [...]”

(PREECE, 2005)

Projetar dispositivos e interfaces usáveis

teoria

experiência

senso comum

Psicologia das ações


“...O sistema deve fornecer indicações do estado do sistema, que sejam prontamente perceptíveis e interpretáveis e que correspondam às intenções e às expectativas.”

(NORMAN, 2006)

1. Visibilidade

Às vezes, não sabemos onde estão os elementos de interação

1.Visibilidade


1. Visibilidade

É responsabilidade do sistema informar o que está acontecendo em real time pro usuário.

Quanto mais soubermos sobre as possibilidades de interação, melhor.

1.Visibilidade

Player mostra o vídeo que está em execução e o próximo da fila


“O feedback se refere ao retorno de informações a respeito da ação que foi feita e do que foi realizado, permitindo a pessoa continuar a atividade.”

(PREECE, 2005)

Auditivo

Tátil

Verbal

Visual

2. Feedback2. Feedback


“... refere-se as formas de delimitar o tipo de interação que pode ocorrer [...] para impedir o usuário de executar operações incorretas...”

(PREECE, 2005)Lógicas

Físicas

Culturais

2. Feedback3. Restrições3. Restrições


“Refere-se a projetar interfaces de modo que tenham operações semelhantes e que utilizem elementos semelhantes para a realização de tarefas similares”

(PREECE, 2005)

MS Word

MS Excel

MS Power Point

4. Consistências

Aplicações diferentes do mesmo fabricante

Aplicações diferentes e fabricantes diferentes

4. Consistência

Microsoft Apple


“É um atributo do objeto que permite ao usuário saber como utilizá-lo” (PREECE, 2005)

5. Affordance


“... refere-se a relação entre controles e seus efeitos no artefato”(PREECE, 2005)

5. Mapeamento

Deve haver coerência entre os controles e suas funções

6. Mapeamento


A palavra heurística vem da palavra grega Heuriskein, que significa descobrir (e que deu origem também ao termo Eureca).

(NIELSEN, 1993)

“As heurísticas são um conjunto de regras

e métodos que levam à descoberta e à

resolução de problemas “


Avaliação Heurística

É um método informal de inspeção de

interfaces. É uma maneira fácil, rápida e

barata de análise e diagnóstico de problemas

em interfaces.

Foram baseadas em 294 tipos de erros de usabilidade que o Nielsen comumente encontrava em suas análises – e que podem prejudicar e muito a experiência do usuário em seu site.


A interface deve sempre informar ao usuário o que está acontecendo, ou seja, todas

as ações precisam de feedback instantâneo para orientá-lo.

Vou almoçar...







Sistema deve falar a linguagem do usuário, com palavras, frases e conceitos que lhe

são familiares.

Bar

ra d

e Fe

rram

en

tas

Ph

oto

sho

p



Escolher as melhores palavras e imagens para levar o usuário ao caminho certo

Evitar de termos técnicos



Facilitar as “saídas de emergência” para o usuário, permitindo abortar uma tarefa,

desfazer uma operação e retornar ao estado anterior.

3. Controle e liberdade do usuário


Manter o padrão de cores, fontes, posicionamento de objetos em toda a aplicação.

Registro realizado com sucesso x

4. Consistências e padrões


Prevenir ocorrências de erro. Conhecer as situações que mais provocam erros e

modificar a interface para que estes erros não ocorram.





Tornar objetos, ações e opções visíveis e coerentes. Permitir que a interface ofereça

ajuda contextual, e informações capazes de orientar as ações do usuário



Breadcrumb (“Migalhas de Pão”)



O sistema precisa ser fácil para usuários leigos, mas flexível o bastante para se

tornar ágil à usuários avançados.





Os “diálogos” do sistema precisam ser simples, diretos e naturais, presentes nos

momentos em que são necessários.

✓ Visual limpo

✓ Navegação intuitiva

✓ Liberdade do usuário

8. Projeto e estética minimalista


Evite que os textos e o design fale mais do que o usuário necessita saber.

9. Projeto e estética minimalista


As mensagens de erro do sistema devem possuir uma redação simples e clara que

em vez de intimidar o usuário com o erro, indique uma saída construtiva ou possível

solução.

9. Suporte ao usuário no reconhecimento, diagnóstico e recuperação de erros


Redação simples e direta

Sugeriu 2 soluções

9. Suporte ao usuário no reconhecimento, diagnóstico e recuperação de erros


Desejável que tenha ajuda, neste caso a ajuda e documentação deve ser visível,

facilmente acessada, e com uma ferramenta de busca na ajuda.

10. Informação de ajuda e documentação


Tool Tips

10. Informação de ajuda e documentação

Mapa Mental das Técnicas de Usabilidade

CheckList para Testar a Usabilidade

Princípios de Design + Heurísticas = Testando a Usabilidade

Feedback das ações dos usuários

Layout

Consistências e Padrões

Controle e Liberdade do Usuário


Restrições

Suporte ao Usuário


Feedback das ações dos usuários

Verificar a situação do sistema para toda ação do usuário

✓ Realce dos Objetos e Itens Selecionáveis

✓ Estados de Processamentos

✓ Estados de Impressão

✓ Sistema Indisponível


Layout

Verificar se a legibilidade do sistema está fácil e agradável para o usuário, tais

como tamanho do texto, espaçamento entre linhas, contraste de cores,

distribuição do conteúdo, etc.

✓ Alinhamento dos Objetos e Exibição de Dados

✓ Bordas dos Painéis

✓ Agrupamento de Dados Similares

✓ Alinhamento Dados de Listas


Consistências e Padrões

Verificar se o sistema mantém uma consistência visual ao longo de todas as páginas:

✓ Cores Padrões

✓ Títulos de Telas, Menus e Campos

✓ Rótulos

✓ Distinção de Ícones

✓ Localização dos Dados

✓ Formato de Exibição dos Dados

✓ Cabeçalhos de Colunas de Dados

✓ Organização das Listas de Seleção

✓ Abreviaturas


Controle e Liberdade do Usuário

Verificar se para toda ação de erro/engano o usuário possui uma forma de

corrigir/voltar

✓ Navegação e Paginação

✓ Desfazer e Refazer

✓ Correção Parte Dados

✓ Abortar Processamentos



Verificar se o sistema auxilia o usuário ao máximo para que ele não cometa erros.

✓ Identificação de Campos Obrigatórios

✓ Separação Entre Áreas Selecionáveis

✓ Posicionamento de Botões com Funções "Perigosas"

✓ Mascara para Campos Numéricos Longos

✓ Botão Padrão de Comando

✓ Botões de Seleção de Ação Destrutiva

✓ Dupla Confirmação de Ação


Verificar se o sistema reduz as chances de o usuário cometer erros operação

✓ Delimitação de Ações do Usuário

Restrições


Suporte ao Usuário

Verificar que o sistema é objetivo em suas mensagens de erro, não informar apenas um

código, deve ajudar o usuário a sair de situações problemáticas. Fornecer manual de

operação e ajuda.

✓Se existem Mensagens de Erro e Alertas

✓Conteúdo da Mensagem de Erro

Mais informações sobre o assunto...

• Curso de Verão na IME-USP “Engenharia de Usabilidade para sistemas web” https://www.ime.usp.br/verao/

• Livros:• “Engenharia de Software - Uma Abordagem Profissional” - Roger S. Pressman• “O design do dia-a-dia” – Donald A. Normam

• Cartilha de Usabilidade - Projeto Padrões Brasil e-Govhttps://www.governoeletronico.gov.br/eixos-de-atuacao/governo/epwg-padroes-web-em-governo-eletronico/cartilha-de-usabilidade

• Sites/Blogs:

http://ux.sapo.pt/http://arquiteturadeinformacao.com/https://www.nngroup.com/articles/https://tadificil.com.br/

• Autores:• Jacob Nielsen• Donald A. Norman• Larry Constantine

https://www.ime.usp.br/verao/

https://www.governoeletronico.gov.br/eixos-de-atuacao/governo/epwg-padroes-web-em-governo-eletronico/cartilha-de-usabilidade

http://ux.sapo.pt/

http://arquiteturadeinformacao.com/

https://www.nngroup.com/articles/

https://tadificil.com.br/


“Engenharia de Software - Uma Abordagem Profissional” - Roger S. PressmanCapitulo 11 pg 345 - Projetos de Interfaces do Usuário


“Engenharia de Software - Uma Abordagem Profissional” - Roger S. PressmanCapitulo 12 pg 335 - Projetos de Interfaces do Usuário

Lidiane Carvalho, CBTS

Obrigada!

www.linkedin.com/in/lidianesantos

https://www.facebook.com/lidiane.dossantoscarvalho

@lidianesantos

http://pt.slideshare.net/lidianesantos

http://www.linkedin.com/in/lidianesantos

https://www.facebook.com/lidiane.dossantoscarvalho

https://twitter.com/lidianesantos

http://pt.slideshare.net/lidianesantos

Technology

Usabilidade - Metas, Principios e Heuristicas