Engenharia de Usabilidade

para sistemas web

hamilton@ime.usp.br
hamilton.mjunior@fatec.sp.gov.br

Hamilton Fernandes de Moraes Junior

Sites Interessantes

UXPA(User Experience Professionals Association)

http://www.uxpasaopaulo.com.br/

Nielsen Norman Group

http://www.nngroup.com/
Conferncia sobre Design de Interao

http://isa.ixda.org/2014/

Prof. Me. Hamilton Fernandes de Moraes Junior

2
47

Prof. Me. Hamilton Fernandes de Moraes Junior

3
47

Prof. Me. Hamilton Fernandes de Moraes Junior

4
47

Prof. Me. Hamilton Fernandes de Moraes Junior

5
47

Prof. Me. Hamilton Fernandes de Moraes Junior

6
47

Aula 1

Conceitos sobre engenharia de

usabilidade e design de
interao

Prof. Me. Hamilton Fernandes de Moraes Junior

7
47

Contedo do dia

Motivao
Interao Humano Computador
Ergonomia e Usabilidade
Engenharia de Usabilidade
Panorama atual
Consideraes Finais

Prof. Me. Hamilton Fernandes de Moraes Junior

8
47

Motivao

Prof. Me. Hamilton Fernandes de Moraes Junior

9
47

Motivao

Usurio cada vez mais exigente

Interface uma parte fundamental no sucesso de um sistema
Entender o impacto das interfaces junto a:
Usurios;
Tarefas;
Organizaes;

Prof. Me. Hamilton Fernandes de Moraes Junior

10
47

Interao Humano Computador

Prof. Me. Hamilton Fernandes de Moraes Junior

11
47

Interao Humano Computador

o canal de comunicao entre o homem e o
computador, atravs do qual interagem, visando
atingir um objetivo comum.

o conjunto de comandos de controle do

usurio + respostas do computador, constitudos
por sinais (grficos, acsticos e tcteis)

Sistema

ao

Interface

Usurio

Aplicao

interpretao

Prof. Me. Hamilton Fernandes de Moraes Junior

12
47

Interao Humano Computador

Porque necessrio estabelecer um bom nvel de conversao
entre o usurio e o sistema computacional

CONFORTO
(Confiabilidade)

DESEMPENHO
(Custo do trabalho)

Prof. Me. Hamilton Fernandes de Moraes Junior

13
47

Histrico

Primeiros programas

Prof. Me. Hamilton Fernandes de Moraes Junior

14
47

Histrico

Passado

Prof. Me. Hamilton Fernandes de Moraes Junior

15
47

Histrico

Presente

Prof. Me. Hamilton Fernandes de Moraes Junior

16
47

Histrico

http://takethewheel.nissan.com.au/
http://www.baixaki.com.br/info/2279uma-selecao-de-aplicacoes-de-realidadeaumentada-para-voce-mesmoexperimentar.htm

Futuro

Prof. Me. Hamilton Fernandes de Moraes Junior

17
47

Estilos de Interface

What You See Is What You Get (WYSIWYG)

A imagem de manipulao da interface a mesma
que a aplicao cria . Ex: Editores de texto do tipo
Word da Microsoft.
Manipulao direta
Windows Explorer (mover arquivo/ diretrio, ...)jogos
Windows, Icons, Menus and Pointers (WIMP)
Permite a interao atravs de componentes de
interao virtuais denominados widgets.
Estilo Menu
Logs de comando
Formulrios e Linguagem natural

Prof. Me. Hamilton Fernandes de Moraes Junior

18
47

Ergonomia e Usabilidade

Ergonomia visa proporcionar

eficcia e eficincia, alm do
bem estar e sade do usurio,
por meio da adaptao do
trabalho ao homem

Prof. Me. Hamilton Fernandes de Moraes Junior

19
47

Ergonomia e Usabilidade
Ergonomia fsica
Ergonomia cognitiva

Ergonomia organizacional

Prof. Me. Hamilton Fernandes de Moraes Junior

20
47

Ergonomia e Usabilidade
Segundo a ISO 9241:

Eficcia: A capacidade oferecida para alcanar seus objetivos

em nmero e com a qualidade necessria.
Eficincia: A quantidade de recursos necessrios que os sistemas
solicitam aos usurios para a obteno de seus objetivos com o
sistema.
Satisfao: A emoo que os sistemas proporcionam aos
usurios em face dos resultados obtidos e dos recursos
necessrios para alcanar tais objetivos.

Prof. Me. Hamilton Fernandes de Moraes Junior

21
47

Ergonomia e Usabilidade

Usabilidade Medida da
qualidade da experincia do
usurio ao interagir com um
sistema

Prof. Me. Hamilton Fernandes de Moraes Junior

22
47

Ergonomia e Usabilidade

Engenharia de
Usabilidade

Desenvolve o projeto da
lgica de utilizao
Observao
das
estratgias de uso do
sistema pelo usurio

Engenharia de Software

Desenvolve o projeto da
lgica do funcionamento
Identificam
requisitos
funcionais que o sistema
deve implementar

Prof. Me. Hamilton Fernandes de Moraes Junior

23
47

Ergonomia e Usabilidade
Usabilidade associada a 5 atributos:

Fceis de aprender
Fceis de lembrar
Maximizam a produtividade
Minimizam erros
Maximizam satisfao

Prof. Me. Hamilton Fernandes de Moraes Junior

24
47

Ergonomia e Usabilidade

Modelo de atributos de aceitabilidade do sistema (Nielsen)

Prof. Me. Hamilton Fernandes de Moraes Junior

25
47

Ergonomia e Usabilidade

Enquanto a usabilidade
medida, a ergonomia da
interface
s
pode
ser
inspecionada e/ou avaliada

Prof. Me. Hamilton Fernandes de Moraes Junior

26
47

Ergonomia e Usabilidade

Efeitos de um problema de usabilidade:

Sobrecarga Cognitiva;
Sobrecarga Perceptiva;
Sobrecarga Fsica;

Prof. Me. Hamilton Fernandes de Moraes Junior

27
47

Engenharia de Usabilidade

Prof. Me. Hamilton Fernandes de Moraes Junior

28
47

Prof. Me. Hamilton Fernandes de Moraes Junior

29
47

Prof. Me. Hamilton Fernandes de Moraes Junior

30
47

Prof. Me. Hamilton Fernandes de Moraes Junior

31
47

Ergonomia e Usabilidade

The three main dimensions on which users' experience differs

Prof. Me. Hamilton Fernandes de Moraes Junior

32
47

Usurios Iniciantes

Prof. Me. Hamilton Fernandes de Moraes Junior

33
47

Usurios Intermedirios

Prof. Me. Hamilton Fernandes de Moraes Junior

34
47

Usurios Avanados

Prof. Me. Hamilton Fernandes de Moraes Junior

35
47

Ergonomia e Usabilidade
Funcionalidade X Usabilidade

O foco dos projetistas a

funcionalidade, eficincia e custo

Porm se tudo funciona como

especificado, por que os usurios
no se satisfazem com muitos
sistemas?
Porque importante considerar mais
que a funcionalidade?

Prof. Me. Hamilton Fernandes de Moraes Junior

36
47

Ergonomia e Usabilidade

Prof. Me. Hamilton Fernandes de Moraes Junior

37
47

Engenharia de Usabilidade
Conhecer o usurio
Conhecer suas caractersticas individuais;
Conhecer a tarefa desempenhada pelo usurio;
Anlise funcional;
A evoluo do usurio e seu trabalho;
Anlise de produtos semelhantes;
Definir prioridade de usabilidade
Analise do impacto financeiro;
Design paralelo;
Design participativo com o usurio;
Design coordenado de toda a interface;
Aplicao de guidelines e anlise heurstica;
Prototipao;
Teste Empirico;
Design interativo;
Coleta de feedback do usurio.
Prof. Me. Hamilton Fernandes de Moraes Junior

38
47

Engenharia de Usabilidade

Tcnicas de anlise;
Tcnicas para implementao;
Prof. Me. Hamilton Fernandes de Moraes Junior

39
47

Avaliao de Usabilidade

O modelo estrela criado por Hix e Hartson

Prof. Me. Hamilton Fernandes de Moraes Junior

40
47

Avaliao de Usabilidade

Automtica: Softwares comparam as especificaes

listadas para a interface analisada com o resultado
final;
Emprica: Por meio de observao, a usabilidade da
interface verificada a partir de testes com usurios
reais;
Formal: Atravs de modelos e frmulas a usabilidade
medida;
Informal:
A avaliao realizada atravs de
heursticas e da experincia, conhecimentos e
habilidades do avaliador.

Prof. Me. Hamilton Fernandes de Moraes Junior

41
47

Avaliao de Usabilidade
Mtricas de Usabilidade

Tempo utilizado para a realizao de uma tarefa;

Nmero de cliques ou comandos efetuados;
Razo entre interaes de sucesso e erro;
Freqncia de uso de manuais de ajuda;
Nmero de vezes que o usurio expressou frustrao;
Taxa de tarefas completadas;

Prof. Me. Hamilton Fernandes de Moraes Junior

42
47

Avaliao de Usabilidade
Dentre as pesquisas realizadas na rea podemos dividi-las em
4 grupos:

Estudo sobre metodologias de desenvolvimento;

Estudo das tcnicas de avaliao;
Estudo de usabilidade;
Estudo sobre mtricas de usabilidade;

Prof. Me. Hamilton Fernandes de Moraes Junior

43
47

Consideraes

Tcnicas de avaliao so importantes para obter um feedback;

Diagnstico prvio traz economia em tempo e dinheiro;
A participao do usurio necessrio no processo de
desenvolvimento do site;
Quanto melhor a usabilidade maior o sucesso;

Prof. Me. Hamilton Fernandes de Moraes Junior

44
47

Projeto do Site
Para esta atividade deve-se entregar um documento do word,
seguindo as normas ABNT, e que contenha os seguintes tpicos:
Introduo
Objetivos, publico alvo e justificativa
O trabalho deve deixar claro como seu projeto ajudar os usurios.
Tcnicas de concepo de idias utilizadas (explicar quais foram
utilizadas e de que maneira)
Estrutura de menus (aqui deve-se mostrar o resultado obtido com o
card sorting na etapa final da atividade)
Estudo de cores (aqui deve-se apresentar quais cores foram
adotadas e porque, para o design do site)
Wireframes (aqui deve-se mostrar o layout definido com o uso das
cores escolhidas)
Avaliao heurstica de um site similar
Preparao
do
roteiro
para
teste
de
usabilidade
Concluso e referncias bibliogrficas
Prof. Me. Hamilton Fernandes de Moraes Junior

45
47

Atividade 1
Entre nos dois sites abaixo e de acordo com sua primeira impresso,
anote em um arquivo do google docs(ou similar) o que voc achou bom
e ruim.

De uma descrio da experincia do usurio resultante dessa

interao.

http://restaurantespot.com.br/

http://www.roverinformatica.com.br/

Prof. Me. Hamilton Fernandes de Moraes Junior

46
47

Referncias

ISO 9241. Ergonomic requirements for office work with visual display
terminals (VDTs). Part 10: Dialogue principles.
Nielsen, J. Usability Engineering. San Francisco, CA: Morgan Kaufmann,
1993.
Hix, D. Hartson.H.R.Developing User Interfaces:Ensure Usability Through
Poduct and Process. John Wiley and Sons, New York.

Prof. Me. Hamilton Fernandes de Moraes Junior

47
47