![Page 1: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/1.jpg)
![Page 2: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/2.jpg)
Bruno FigueiredoBruno Figueiredo
![Page 3: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/3.jpg)
O que são Rich Internet Applications?O que são Rich Internet Applications?
• São aplicações baseadas em modelos de interacção “ricos”, ou seja, semelhantes aosç jdas aplicações desktop
• Utilizam uma tecnologia que busca e exibedinamicamente dados sem exigir que a páginavolte a carregar totalmentevolte a carregar totalmente
![Page 4: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/4.jpg)
Um Exemplo: Kayak comUm Exemplo: Kayak.com
![Page 5: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/5.jpg)
REGRA 1REGRA 1
Garantir a Visibilidade do Estado do Sistema
O que está a acontecer?
![Page 6: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/6.jpg)
Lista de Resultados: Kayak comLista de Resultados: Kayak.com
![Page 7: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/7.jpg)
Yellow Fade: Tadalist comYellow Fade: Tadalist.com
![Page 8: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/8.jpg)
A Gravar: BasecampHQ comA Gravar: BasecampHQ.com
![Page 9: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/9.jpg)
Recomendações:Recomendações:
• Sempre que demorar mais de 10 segundos, apresentar um aviso ou barra de progressop p g
S á i l di i• Se a página se alterou dinamicamente, destacar a área alterada
I f tili d d tá• Informar sempre o utilizador do que se está a passar “por trás do pano”
![Page 10: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/10.jpg)
REGRA 2REGRA 2
Dar Controlo e Liberdade ao Utilizador
Ooops... Enganei‐me...
![Page 11: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/11.jpg)
Reordenar: BasecampHQ comReordenar: BasecampHQ.com
![Page 12: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/12.jpg)
Undo: Gmail comUndo: Gmail.com
![Page 13: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/13.jpg)
Arrastar e Largar: Photos Yahoo comArrastar e Largar: Photos.Yahoo.com
![Page 14: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/14.jpg)
Recomendações:Recomendações:
• Permitir sempre desfazer a última operação
• Não limitar a liberdade do utilizador
• Deixar sempre o utilizador manipular os seusDeixar sempre o utilizador manipular os seusdados
![Page 15: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/15.jpg)
REGRA 3REGRA 3
Permitir Flexibilidade e Eficiência de UsoCopiar, Colar... Ctrl+C, Ctrl+V
![Page 16: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/16.jpg)
Formatar Texto: Gmail comFormatar Texto: Gmail.com
![Page 17: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/17.jpg)
Duas Formas: Photos Yahoo comDuas Formas: Photos.Yahoo.com
![Page 18: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/18.jpg)
Sugestões: Gmail comSugestões: Gmail.com
![Page 19: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/19.jpg)
Recomendações:Recomendações:
• Permitir o uso de teclas de atalho
• Quando a operação não é imediatamentei i l ( l ã ) d ivisivel (requer exploração), dar um meioalternativo (mais visível) de executar a tarefa
P id i i ili d i t d ã• Providenciar meios auxiliares de introduçãode dados recorrentes
![Page 20: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/20.jpg)
REGRA 4
Privilegiar oPrivilegiar o Reconhecimento não aReconhecimento, não a
lembrançalembrançaQual era mesmo o código para negrito?g p g
![Page 21: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/21.jpg)
Formatação:Writeboard comFormatação: Writeboard.com
![Page 22: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/22.jpg)
Lingo: Twitter comLingo: Twitter.com
![Page 23: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/23.jpg)
Wikis:Wikipedia comWikis: Wikipedia.com
![Page 24: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/24.jpg)
Recomendações:Recomendações:
• Exibir sempre os controlos possíveis
• Não obrigar o utilizador a lembrar‐se de ódi ífi d li ãcódigos específicos da aplicação
• Não exibir códigos para edição (por exemplo: f lt d l d d f tfalta um = do lado esquerdo para formatar o correctamente o cabeçalho)
![Page 25: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/25.jpg)
REGRA 5REGRA 5
Ajuda ao Diagnóstico e Detecção de Erros
Erro? Onde?
![Page 26: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/26.jpg)
Acento: Gmail comAcento: Gmail.com
![Page 27: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/27.jpg)
Acento:Mail Yahoo comAcento: Mail.Yahoo.com
![Page 28: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/28.jpg)
Recomendações:Recomendações:
• Prever as causas possíveis de erro
• Exibir os erros de forma clara e sem códigos( l E 5471)(por exemplo, Erro 5471)
• Dar ao utilizador indicações claras para a suaãcorrecção
![Page 29: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/29.jpg)
REGRA 6
Prever ErrosPrever Erros
Alto! Os seus dados estão em Perigo!
![Page 30: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/30.jpg)
Aviso à Saída:Mail Yahoo comAviso à Saída: Mail.Yahoo.com
![Page 31: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/31.jpg)
Sair a Meio: GoPlan orgSair a Meio: GoPlan.org
![Page 32: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/32.jpg)
Recomendações:Recomendações:
• Antecipar as acções dos utilizadores
• Desenhar as aplicações de forma defensiva( ili d fi d d ã )(se o utilizador fizer x, desencadear acção y)
• Dar indicações claras sobre os meios de ã itá i ( d t d i idoperação aceitáveis (a data deve ser inserida
assim...)
![Page 33: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/33.jpg)
REGRA 7REGRA 7
Assegurar a Consistência e os Standards
Isto não funcionava de outra forma?
![Page 34: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/34.jpg)
Arrastar: Panic comArrastar: Panic.com
![Page 35: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/35.jpg)
Diversas Interacções: Netvibes comDiversas Interacções: Netvibes.com
![Page 36: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/36.jpg)
Áreas Válidas:Mail Yahoo comÁreas Válidas: Mail.Yahoo.com
![Page 37: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/37.jpg)
Recomendações:Recomendações:
• Seguir as convenções estabelecidas
• Não reinventar a roda só para ser diferente( i é d l dif(ninguém quer estudar um manual diferentepara cada site)
E li õ d f íli• Em aplicações da mesma família, empregarfuncionalidades semelhantes
![Page 38: Bruno Figueiredo - usabilidade.orgusabilidade.org/Usabilidade em RIA.pdf · O quesão Rich Internet Applications? • São aplicações baseadas em modelos de interacção “ricos”,](https://reader034.vdocuments.pub/reader034/viewer/2022052610/5c4efc5293f3c34aee5848b0/html5/thumbnails/38.jpg)
Regras para RIAs:Regras para RIAs:
1. Garantir a visibilidade do estado do sistema
2 Dar controlo e liberdade ao utilizador2. Dar controlo e liberdade ao utilizador
3. Permitir flexibibilidade e eficiência de uso
4. Privilegiar o reconhecimento, não a lembrança
d d ó d d5. Ajuda ao diagnóstico e detecção de erros
6. Prever erros
7. Assegurar a consistência e os standards