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
Usurio

ao

Interface

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:
Eficcia A capacidade oferecida para alcanar
seus objetivos em nmero e com a qualidade
necessria.
Eficincia:
A
quantidade
de
recursos
Eficincia
necessrios que os sistemas solicitam aos
usurios para a obteno de seus objetivos
com o sistema.
Satisfao:
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
das
Observao
estratgias de uso do
sistema pelo usurio

Engenharia
Software

de

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 Avanado

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