PROTOTIPAGEM E

USABILIDADE

PROF. ME. FABIO FONSECA

BARBOSA GOMES
Índice
• Prototipagem
– Descrição e Categorias
• Técnicas
– Paper-Prototyping
– “Wizard of Oz”
– Protótipos funcionais
– Etc…
• Considerações
• Usabilidade – alguns conceitos
• Prototyping
• “The creation of a model and the simulation of all
aspects of a product. CASE tools support different
degrees of prototyping. Some offer the end-user the
ability to review all aspects of the user interface and
the structure of documentation and reports before
code is generated.”

»Source: The Free On-line Dictionary of

Computing, © 1993-2004 Denis Howe
Prototipagem - Descrição

• Concretamente no campo da
engenharia de requisitos
– Prototipagem de interface
• Utilizada como modo de validação de
requisitos
– Mais compreensível pelos diferentes
stakeholders (especialmente os utilizadores
finais)
Prototipagem - Descrição

– Prototipagem de funcionalidade
• Utilizada para estudos de viabilidade /
orçamentação
–Diminuir hipóteses de se abordarem
soluções demasiado complexas ou
infazíveis
Prototipagem - Categoria
• Divisão em 2 grandes tipos
– Prototipagem de alta-fidelidade
• Implementação de funcionalidades chave /
criticas
• Utilização de ferramentas RAD para codificação
– Delphi, Visual Basic, Python, etc…
• Aspecto de aplicação “meio-acabada”
• Custos consideráveis de desenvolvimento
Prototipagem - Categoria
• Divisão em 2 grandes tipos (continuação)
– Prototipagem de baixa-fidelidade
• Visão do aspecto da Interface
• Poderá (deverá?) simular a navegação na mesma
• Utilização de diferentes métodos e técnicas
– Cartões de navegação, Paper-prototyping, etc…
• Aspectos muito distintos
• Rápida e barata de desenvolvimento
Categorias de prototipagem
• Comparação
Tipo Vantagens Desvantagens
Baixa- •Custos mais Baixos •Verificação de erros limitada
Fidelidade •Vários conceitos de design •Especificação de código fraca
•Problemas de layout ecrã •Facilitator-driven
•Identificar requisitos de mercado •Utilidade limitada depois da fase de
•Prova de conceito requisitos
•Pouco util para testes de usabilidade
•Limitações de fluxo e navegacionais

Alta- •Funcionalidade Completa •Mais caro para desenvolver

fidelidade •Interactivo Completamente •Consome muito tempo na criação
•User-Driven •Ineficiente para provas de conceito
•Esquema navigacional •Ineficaz para aquisição de requisitos
•Exploração e Teste •Look “Produto acabado”
•Look “Produto acabado”
•Especificação “viva”
•Ferramenta de vendas e marketing

In Interaction Design, Preece, Rogers and Sharp

Protótipos de baixa-fidelidade
• Storyboards
• Paper-prototyping
• Index-cards
• “Wizard-of-Oz”
Storyboards
• Tipo banda-desenhada
– Série de desenhos encadeados mostrando como o
utilizador utilizaria o dispositivo / interface para uma
tarefa
– Role-playing
– Usado muito cedo no design
– Interno à equipa
Paper-prototyping
• "Paper prototyping is a variation of usability testing
where representative users perform realistic tasks
by interacting with a paper version of the interface
that is manipulated by a person ‘playing computer,’
who doesn’t explain how the interface is intended to
work.“
• Paper Prototyping
Paper-prototyping
• Barato
• Alterável “on-the-fly”
• Interactivo
• Testável
• Fácil de fazer
Index-cards
• Variedade de paper-prototyping
• Cada cartão representa um ecrã do sistema (7.5 X
13 cm)
• Vários cartões com ecrãs de estados do sistema
– O utilizador faz a selecção
– O facilitador mostra-lhe as alterações ao ecrã dai
decorrentes (novo cartão ou modificações)
Wizard-of-Oz
• Protótipo realizado em computador
• Não contem funcionalidades
– Resposta à interação é produzida por um membro da
equipe
• No desenho inicial mede as expectativas do
utilizador
User

>Blurb blurb
>Do this
>Why?
PROTÓTIPOS DE ALTA-
FIDELIDADE
PROTÓTIPOS FUNCIONAIS
PROTÓTIPOS ABSTRATOS

Clique no ícone para adicionar uma

 Protótipos funcionais
• Semelhante ao sistema final
– Parece-se mais com o sistema final que os de baixa
fidelidade
• Ferramentas típicas Macromedia Director, Visual
Basic, e Smalltalk. 
• Usuários podem achar que estão vendo o produto
final

Tempo.exe Noticias.exe
Protótipos abstratos
• Utilização de símbolos convencionados para
representar interações
– From Abstraction to Realization in User Interface Designs:
Abstract Prototypes Based on Canonical Abstract Compo
nents [PDF, 1,52 MB]
 
• Apenas utilizável por técnicos
Considerações
• Compromissos na realização de protótipos
• Todo o protótipo envolve compromissos
• Dois tipos comuns de compromissos
– ‘horizontal’
• Grande quantidade de funcionalidades
• Baixo detalhe
– ‘vertical’
• Pequena parte de funcionalidades
• Muito detalhado
USABILIDADE

Clique no ícone para adicionar uma

Usabilidade
• Usability:
– The characteristic of being easy to use, usually applied to software,
but relevant to almost any human artifact. What makes an artifact
easy to use? Broadly, something is easy to use to the extent that it
effectively performs the task for which it is being used. Ease of use
can be measured by how quickly a task is performed, how many
mistakes are made, how quickly the system is learned and how
satisfied people are who perform the task. Usability may also
include factors such as safety, usefulness, and cost-effectiveness
» http://www.usabilityfirst.com/glossary/
Usabilidade
• Em protótipos?
– Facilita aceitação pelos utilizadores
– Facilmente transferível para o produto final
– Preocupações e estudos não se perderão
com o avançar do desenvolvimento
Usabilidade
• Algumas ferramentas:
– Heurísticas de Nielsen
– Lei de Fitts
MT = a + b log2(2A/W)
where
* MT = movement time
a,b = regression coefficients
A = distance of movement from start to target center
W = width of the target
Heurísticas de Nielsen
• Criada por Jakob Nielsen e R. Molich em 1990;

• Objetivo de melhorar a experiência do usuário com

interfaces práticas, amigáveis e eficientes;

• Baseado em 10 heurísticas, que são consideradas como

boas práticas para o desenvolvimento de interfaces.

• https://www.youtube.com/watch?v=oo1JrQ6jCEM
Heurísticas de Nielsen
• Visibilidade de qual estado estamos no sistema;

• Correspondência entre o sistema e o mundo real;

• Liberdade de controle fácil pro usuário;

• Consistência e padrões;
Heurísticas de Nielsen
• Prevenções de erros;

• Reconhecimento em vez de memorização;

• Flexibilidade e eficiência de uso;

• Estética e design minimalista;

Heurísticas de Nielsen
• Ajude os usuários a reconhecerem,
diagnosticarem e recuperarem-se de erros;

• Ajuda e documentação.
Lei de Fitts
• Criada por Paul Fitts e m1954;
• Modelo do movimento humano;
• Prediz o tempo necessário para mover-se
rapidamente desde uma posição inicial até uma
zona destino final como uma função da distância
até o objetivo e o tamanho deste;
• Modela o ato de apontar;
• O apontamento pode ser feito de forma manual
(ex: dedo da mão) ou através de ordenamento (ex:
cursor do mouse)
Lei de Fitts
• Compromisso velocidade-precisão relacionado
com o ato de apontar;

• Objetivos que são menores ou estão mais

distantes necessitam mais tempo para ser
alcançados.
Lei de Fitts
• Aplicada a tarefas em que o usuário deve
mover a posição do cursor sobre um objetivo
da tela;

• Modela as ações de assinalar e clicar e

de arrastar e soltar um objeto de um sistema
operacional amigável.
Lei de Fitts
• Atualmente, é um dos poucos modelos
preditivos de IHC sólidos e confiáveis.

https://www.youtube.com/watch?
v=O6L9TCOuTRs
 DÚVIDAS?

Clique no ícone para adicionar um

ATIVIDADES

Clique no ícone para adicionar uma

REFERENCIAS
• AFONSO, R., PROTOTIPAÇÃO, 2004.
Links
• Lei de Fitts
– http://ei.cs.vt.edu/~cs5724/g1/glance.html
– http://ei.cs.vt.edu/~cs5724/g1/
• Livro de usabilidade
– http://www.id-book.com
• Prototipos abstractos
– http://paginas.fe.up.pt/ipc/suporte/praticas/Constantine
2003FromAbstractionToRealizationCanonicalAbstractCom
ponents.pdf
Links
• Usabilidade
– http://www.useit.com
– http://www.asktog.com
– http://www.baddesigns.com/
– http://www.nngroup.com/
• Paper-prototyping
– http://www.paperprototyping.com