Usabilidade em Rich Internet Applications

Bruno Figueiredo
Bruno Figueiredo
O que são Rich Internet Applications?
O que
Rich Internet Applications?
• São aplicações baseadas em modelos de ç “ricos”, ou seja, semelhantes
j
aos
interacção
das aplicações desktop
• Utilizam uma tecnologia que busca e exibe
dinamicamente dados sem exigir que a página
volte a carregar
a carregar totalmente
Um Exemplo: Kayak com
Um Exemplo: Kayak.com
REGRA 1
REGRA 1
Garantir a Visibilidade do Estado do Sistema
O que está a acontecer?
Lista de Resultados: Kayak.com
de Resultados: Kayak com
Yellow Fade: Tadalist com
Yellow Fade: Tadalist.com
A Gravar: BasecampHQ com
A Gravar: BasecampHQ.com
Recomendações:
• Sempre que demorar mais de 10 segundos, p
um aviso ou barra de progresso
p g
apresentar
• SSe a página
á i se alterou
l
di
dinamicamente, i
destacar a área alterada
• IInformar
f
sempre o utilizador
tili d do que
d
se está
tá a passar “por trás do pano” REGRA 2
REGRA 2
Dar Controlo e Liberdade ao Utilizador
Ooops... Enganei‐me...
Reordenar: BasecampHQ com
Reordenar: BasecampHQ.com
Undo: Gmail com
Undo: Gmail.com
Arrastar e Largar: Photos.Yahoo.com
e Largar: Photos Yahoo com
Recomendações:
• Permitir sempre desfazer a última operação
• Não limitar a liberdade do utilizador
• Deixar sempre o utilizador
o utilizador manipular os seus
dados
REGRA 3
REGRA 3
Permitir Flexibilidade e Eficiência de Uso
Copiar, Colar... Ctrl+C, Ctrl+V
Formatar Texto: Gmail.com
Texto: Gmail com
Duas Formas: Photos.Yahoo.com
Formas: Photos Yahoo com
Sugestões: Gmail com
Sugestões: Gmail.com
Recomendações:
• Permitir o uso de teclas de atalho
• Quando a operação não é imediatamente
visivel
i i l (requer
(
exploração), dar
l
ã ) d um meio
i
alternativo (mais visível) de executar a tarefa
• P
Providenciar
id i meios
i auxiliares
ili
d i t d ã
de introdução
de dados recorrentes
REGRA 4
Privilegiar o o
Reconhecimento não a Reconhecimento, não
a
lembrança
Qual era mesmo o código
g p
para negrito?
g
Formatação: Writeboard com
Formatação: Writeboard.com
Lingo: Twitter com
Lingo: Twitter.com
Wikis: Wikipedia com
Wikis: Wikipedia.com
Recomendações:
• Exibir sempre os controlos possíveis
• Não obrigar o utilizador a lembrar‐se de códigos
ódi
específicos
ífi
d
da aplicação
li ã
• Não exibir códigos para edição (por exemplo: f lt um = do lado
falta
d l d esquerdo
d para formatar
f
t o correctamente o cabeçalho)
REGRA 5
REGRA 5
Ajuda ao Diagnóstico e Detecção de Erros
Erro? Onde?
Acento: Gmail com
Acento: Gmail.com
Acento: Mail Yahoo com
Acento: Mail.Yahoo.com
Recomendações:
• Prever as causas possíveis de erro
• Exibir os erros de forma clara e sem códigos
(
(por
exemplo, Erro
l E 5471)
• Dar ao utilizador indicações claras para a sua
correcção
ã
REGRA 6
Prever Erros
Alto! Os seus dados estão em Perigo!
Aviso à Saída: Mail.Yahoo.com
à Saída: Mail Yahoo com
Sair a Meio: GoPlan.org
a Meio: GoPlan org
Recomendações:
• Antecipar as acções dos utilizadores
• Desenhar as aplicações de forma defensiva
(
(se o utilizador
ili d fizer
fi x, desencadear
d
d
acção
ã y))
• Dar indicações claras sobre os meios de operação
ã aceitáveis
itá i (a data deve
( d t d
ser inserida
i
id
assim...)
REGRA 7
REGRA 7
Assegurar a Consistência e os Standards
Isto não funcionava de outra forma?
Arrastar: Panic com
Arrastar: Panic.com
Diversas Interacções: Netvibes.com
Interacções: Netvibes com
Áreas Válidas: Mail.Yahoo.com
Válidas: Mail Yahoo com
Recomendações:
• Seguir as convenções estabelecidas
• Não reinventar a roda só para ser diferente
( i
(ninguém
é quer estudar
d um manual diferente
l dif
para cada site)
• EEm aplicações
li õ da mesma
d
f íli
família, empregar
funcionalidades semelhantes
Regras para RIAs:
1. Garantir a visibilidade do estado do sistema
2 Dar controlo
2.
Dar controlo e liberdade
e liberdade ao utilizador
3. Permitir flexibibilidade e eficiência de uso
4. Privilegiar o reconhecimento, não a lembrança
5. Ajuda
d ao diagnóstico
d
ó
e detecção
d
d
de erros
6. Prever erros
7. Assegurar a consistência e os standards