1.
Design e Usabilidade
Campus Mobile
Escola Politécnica da Universidade de São Paulo
Julho de 2013

2.
Design e Usabilidade
►Quantos produtos interativos existem em
nossa vida cotidiana??
►Pense um minuto sobre o que você utiliza em um dia
normal.
►Agora pense em usabilidade!
►Quantos destes produtos interativos que você listou são
fáceis e agradáveis de usar?

3.
Design e Usabilidade
►Objetivo do Design de Interação
►Redirecionar a preocupação com o usuário, trazendo
a usabilidade para dentro do processo de design.
►Criar produtos interativos que sejam fáceis e
agradáveis de utilizar.

4.
Design e Usabilidade
►Quem irá utilizar?
►Onde serão utilizados?
►Quais tipos de atividades as pessoas irão
realizar?
►Como otimizar as interações do usuário com o
sistema de forma que combinem com as
atividades que estão sendo estendidas?

5.
Design e Usabilidade
►Metas de Usabilidade (Nilsen, 1993)
►Eficácia (o sistema faz o que se espera dele)
►Eficiência (one-click)
►Segurança (ergonomia/condições externas e ações
indesejáveis acidentalmente / confirmações)
►Utilidade (software de contabilidade x software de
desenho)
►Facilidade (capacidade de aprendizagem / quanto
tempo disponível??)
►Memorização (frequência de utilização / fornecer
suporte para lembranças)

6.
Design e Usabilidade
► Metas Decorrentes da Experiência do Usuário
► Satisfatórios
► Agradáveis
► Divertidos
► Interessantes
► Motivadores
► Esteticamente apreciáveis
► Incentivadores de criatividade
► Compensadores
► Emocionalmente adequados

7.
Design e Usabilidade
► Usabilidade em Dispositivos Móveis
►Restrições dos dispositivos móveis
►Ambiente de comunicação sem fio
►Pagamento pelos serviços
►Gastos com energia e bateria
►Habilidade e capacidade de acessar algumas
informações são menores

8.
Design e Usabilidade
► Usabilidade em Dispositivos Móveis
► Mecanismos de Interação Diferenciados
►Computadores de mesa possuem vários dispositivos de
entrada padronizados enquanto os dispositivos móveis
são mais restritos e necessitam de mecanismos
diferenciados para cada modelo.
►Dificuldade para realizar tarefas de forma eficiente
► Computadores são usados durante longo período
de tempo, enquanto que os dispositivos móveis
são utilizados para aplicações mais rápidas e
exclusivas do ambiente móvel.

9.
Design e Usabilidade
► Usabilidade em Dispositivos Móveis
► Características do Usuário:
►Flexibilidade e destreza -> tamanho dos dedos;
►Conhecimentos -> usuários leigos ou avançados;
►Nível de atenção -> aplicações não devem requerer alto
esforço cognitivo pois o usuário pode ser interrompido por
fatores externos
► Características do Ambiente:
►Deve operar em condições normais de funcionamento;
►Deve operar em condições externas -> calor, frio,
umidade, luz natural (sol) e artificial;

10.
Design e Usabilidade
► Vantagens dos Dispositivos Móveis
► Mobilidade:
► É muito mais fácil carregar um Smartphone do que uma bolsa com um
notebook:
► Permitem que a pessoa se conectem com o mundo em qualquer local,
horário e até mesmo em movimento.
► Enviar e receber dados de maneira fácil e rápida;
► Aumento de memória e processamento;
► Capacidade de reproduzir arquivos multimídia;

11.
Design e Usabilidade
► Vantagens dos Dispositivos Móveis
► Sistemas operacionais interativos (tela touch) e aplicações
que facilitam a vida do usuário:
► Bolsa de valores, saúde, informática, educação, entre outros;
► Melhoria nas conexões de rede
► w-fi, 3G, 4G;
► A integração com as redes sociais
► Orkut, Facebook e Twitter;
► Câmeras fotográficas embutidas:
► É possível tirar uma foto daquele local incrível e em cerca de 1 minuto
postar no Twitter;

12.
Design e Usabilidade
Para ter uma boa ideia, tenha várias ideias
 Algumas Técnicas
Fazer brainstorms;
Produzir vários esboços preliminares;
Descrições em linguagem natural;
Diagramas;
Construção de protótipos;

13.
Design e Usabilidade
► O processo de design de interação
constitui-se de quatro atividades básicas:
1. Identificar as necessidades e estabelecer
requisitos;
2. Desenvolver design alternativos;
3. Construir versões interativas;
4. Avaliação;

14.
Design e Usabilidade
2. Identificar as necessidades e estabelecer requisitos
Como escolher um entre diferentes designs?
 A maneira mais sensata de os usuários avaliarem
designs interativos é interagir:
Protótipos: baixa, média ou alta fidelidade
 Pode-se medir:
 o número de erros cometidos;
 se as interfaces são atraentes ou interessantes;
 se as propostas atendem aos requisitos;
 Deve-se desenvolver versões interativas alternativas;

15.
Design e Usabilidade
Prototipação e Construção
 Recomendações para Criação de Designs Físico
para dispositivos móveis:
 Utilizar menus curtos: é recomendado oferecer curta lista
de opções do que exigir entrada de dados que sejam
digitados pelo usuário.
 Reduzir rolagem horizontal: o espaço da tela é limitado,
logo, é importante fazer melhor uso desse espaço.
 Solicitar mínimo de dados do usuário: tentar solicitar o
mínimo de textos digitados, evitando repetição de dados já
fornecidos.

16.
Design e Usabilidade
Prototipação e Construção
 Recomendações para Criação de Designs para
dispositivos móveis:
 Evitar botões muito próximos: botão salvar e fechar por
exemplo;
 Exigir confirmação de ação: se o usuário clicar no botão
fechar, abrir janela pedindo confirmação.

17.
Design e Usabilidade
Prototipação e Construção
 Para que os usuários possam avaliar é preciso
produzir uma versão interativa de ideias;
 Primeiro estágio:
 Papel e cartolina;

18.
Design e Usabilidade
Prototipação e Construção
 Protótipo do Palm Pilot (Jeff Hawking, 1995):
 Pedaço de madeira de tamanho e forma que
imaginava;
 Simular cenários de
uso;

19.
Design e Usabilidade
Prototipação e Construção
Por que construir protótipos?
 Avaliação e feedback:
 Economia de $$$;
 Stakeholders podem ver/sentir o produto;
 Facilitam a comunicação entre os membros da equipe;
 Permite experimentar diversas alternativas de projeto e
escolher a melhor:
 Testa a viabilidade técnica de um ideia;
 Identifica e soluciona problemas antes da implementação;
 Encoraja reflexão (visualize ideias, explore as limitações);
 Mantém o projeto "centrado" no usuário;

20.
Design e Usabilidade
Prototipação e Construção
Protótipos de Baixa Fidelidade
1. Storyboards;
2. Esboços;
3. Formulários;
4. Fichas;

21.
Design e Usabilidade
Prototipação e Construção
Protótipos de Baixa Fidelidade - FICHAS
 Vídeo: Teste de Protótipode Sistema Interativo
http://www.youtube.com/watch?v=_5FGeSQ7DBU&feature=related

22.
Design e Usabilidade
Mockup iPhone
 http://iphonemockup.lkmc.ch/

23.
Design e Usabilidade
Mockup Android
 http://yeblon.com/androidmockup/

24.
Design e Usabilidade
Mockup iPhone - Android - Tablets
 www.cacoo.com

25.
Design e Usabilidade
►Referências:
► Preece et al “Design de Interação: além da interação homem-
computador”, Bookman, 2007;
► Jakob Nielsen (1993) “Usabilty Engineering”, Morgan
Kaufmann, Inc. San Francisco, 1993