Campus Mobile 2013 - Design e usabilidade

Design e Usabilidade

Campus MobileEscola Politécnica da Universidade de São Paulo

Julho de 2013

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?

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.

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?

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)

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

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


► 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.


► 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;

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;

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;


Para ter uma boa ideia, tenha várias ideias

Algumas TécnicasFazer brainstorms;Produzir vários esboços preliminares;Descrições em linguagem natural;Diagramas;Construção de protótipos;

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;

Design e Usabilidade2. 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;

Design e UsabilidadePrototipaçã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.


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.



Para que os usuários possam avaliar é preciso produzir uma versão interativa de ideias;

Primeiro estágio: Papel e cartolina;



Protótipo do Palm Pilot (Jeff Hawking, 1995): Pedaço de madeira de tamanho e forma

que imaginava; Simular cenários de

uso;

Design e UsabilidadePrototipaçã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;



Protótipos de Baixa Fidelidade

1. Storyboards;

2. Esboços;

3. Formulários;

4. Fichas;



Protótipos de Baixa Fidelidade - FICHAS Vídeo: Teste de Protótipode Sistema

Interativo

http://www.youtube.com/watch?v=_5FGeSQ7DBU&feature=related





Mockup iPhone

http://iphonemockup.lkmc.ch/




Mockup Android

http://yeblon.com/androidmockup/

http://yeblon.com/androidmockup/


Mockup iPhone - Android - Tabletswww.cacoo.com

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