Prototipagem

13.990 visualizações

Publicada em

Apresentação sobre prototipagem feita no curso de Ergodesign e Avaliação de Interfaces da PUC-Rio

Publicada em: Tecnologia, Negócios
2 comentários
16 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
13.990
No SlideShare
0
A partir de incorporações
0
Número de incorporações
597
Ações
Compartilhamentos
0
Downloads
479
Comentários
2
Gostaram
16
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Prototipagem

  1. 1. P R O T O T I P A G E M Robson Santos
  2. 2. PROTOTIPAGEM <ul><li>O que veremos: </li></ul><ul><li>MANHÃ </li></ul><ul><li>Conceitos e definições </li></ul><ul><li>Tipologia de prototipagem </li></ul><ul><li>Prototipagem em papel </li></ul><ul><li>Exercício </li></ul><ul><li>Plano de teste com protótipo </li></ul><ul><li>TARDE </li></ul><ul><li>Ferramentas básicas para prototipagem </li></ul><ul><li>Exercício </li></ul><ul><li>Plano de teste com protótipo </li></ul>
  3. 3. Protótipos são modelos construídos para simular a aparência e a funcionalidade de um produto em desenvolvimento. PROTOTIPAGEM
  4. 8. Um protótipo é uma representação da interface com a qual o usuário pode interagir e oferece informações para propor mudanças e melhorias. PROTOTIPAGEM
  5. 9. <ul><li>Um protótipo pode ser: </li></ul><ul><li>um pequeno guia para o usuário; </li></ul><ul><li>uma simulação em papel; </li></ul><ul><li>uma simulação usando o próprio computador a partir de uma ferramenta de prototipagem; </li></ul><ul><li>uma versão inicial do programa; </li></ul><ul><li>o sistema a ser substituído, em funcionamento. </li></ul>PROTOTIPAGEM
  6. 10. Por meio de um protótipo, os futuros usuários do software e desenvolvedores, podem interagir, avaliar, alterar e aprovar as características mais marcantes da interface e da funcionalidade da aplicação. PROTOTIPAGEM
  7. 11. Ao se desenvolver um protótipo não é necessário representar toda a funcionalidade do produto. Pelo contrário, somente deve ser representada a funcionalidade que atenda aos objetivos do teste ou da avaliação. PROTOTIPAGEM
  8. 12. Tipologia de prototipagem
  9. 13. <ul><li>PROTOTIPAGEM HORIZONTAL </li></ul><ul><li>Apresenta toda a funcionalidade do nível mais alto projetada e habilitada. </li></ul><ul><li>Permite testar a organização geral do sistema. </li></ul><ul><li>Representa a página inicial com todas as chamadas principais, com cada link ligado apelo menos uma página. </li></ul><ul><li>Permite testar o nível de compreensão das categorias principais. </li></ul>PROTOTIPAGEM
  10. 14. <ul><li>PROTOTIPAGEM VERTICAL </li></ul><ul><li>Permite verificar como o usuário se desloca pelos níveis da hierarquia. </li></ul><ul><li>Representa a funcionalidade do sistema em um grupo de atividades. </li></ul><ul><li>Permite que o usuário interaja em níveis aprofundados. </li></ul><ul><li>Apenas um pequeno número de caminhos é implementado totalmente. </li></ul>PROTOTIPAGEM
  11. 15. Página index Prototipagem horizontal Prototipagem vertical Seções não implementadas
  12. 16. <ul><li>PROTOTIPAGEM DE CENÁRIO </li></ul><ul><li>É orientada à tarefa. </li></ul><ul><li>Em teste devem ser estabelecidas três tarefas importantes que exponham a funcionalidade devem ser planejadas. </li></ul><ul><li>É o formato ideal para avaliar usabilidade, pois o tamanho limitado o torna fácil de ser alterado a partir das respostas do usuário. </li></ul>PROTOTIPAGEM
  13. 18. <ul><li>PROTÓTIPOS ESTÁTICOS </li></ul><ul><li>feitos em papel </li></ul><ul><li>PROTÓTIPOS INTERATIVOS </li></ul><ul><li>desenvolvidos com aplicativos específicos </li></ul>PROTOTIPAGEM
  14. 19. <ul><li>Dimensões de fidelidade de modelos </li></ul><ul><li>1. DETALHAMENTO: a quantidade de detalhes que o modelo suporta. </li></ul><ul><li>2.  GRAU DE FUNCIONALIDADE: a extensão na qual os detalhes de operação são completos </li></ul><ul><li>SIMILARIDADE DE INTERAÇÃO: o quão similar as interações como o modelo serão com o produto final </li></ul><ul><li>REFINAMENTO ESTÉTICO: o quão realístico o modelo é. </li></ul>PROTOTIPAGEM
  15. 20. <ul><li>PROTOTIPAGEM DE BAIXA FIDELIDADE </li></ul><ul><li>Possui baixo grau de detalhamento. </li></ul><ul><li>Somente apresenta visualmente a funcionalidade. </li></ul><ul><li>Não possui recursos interação . </li></ul><ul><li>Não é exibido no mesmo suporte que o produto final. </li></ul><ul><li>Não exibe, necessariamente, o aspecto visual definitivo. </li></ul><ul><li>É composto por representação das telas em papel. </li></ul><ul><li>É útil para avaliar soluções na fase inicial de desenvolvimento do projeto de interface. </li></ul><ul><li>É útil para resolver problemas de hierarquia de menus . </li></ul>PROTOTIPAGEM
  16. 24. O protótipo pode ser executado em algum programa para criação ou edição de imagens, sem que haja preocupação com o conteúdo, podendo mesmo o texto ser simulado, somente para apresentar sua localização. PROTOTIPAGEM PROTOTIPAGEM DE BAIXA FIDELIDADE
  17. 25. <ul><li>PROTOTIPAGEM DE MÉDIA FIDELIDADE </li></ul><ul><li>Deve exibido no suporte final. </li></ul><ul><li>Apresentar o aspecto visual mais próximo do definitivo </li></ul><ul><li>É mais realístico que o de baixa fidelidade </li></ul><ul><li>O grau de funcionalidade e a similaridade de interação não são fatores fundamentais nesse tipo de protótipo. </li></ul><ul><li>Pode ser implementado em uma apresentação de telas em seqüência, com algumas zonas de salto predefinidas para simular a navegação. </li></ul>PROTOTIPAGEM
  18. 31. <ul><li>PROTÓTIPO DE ALTA FIDELIDADE </li></ul><ul><li>Possibilita a interação do usuário como se fosse o produto final . </li></ul><ul><li>Representa fielmente o produto final em termos de aparência visual, interatividade e navegação. </li></ul><ul><li>Possui razoável funcionalidade implementada e contém amostra do conteúdo. </li></ul><ul><li>É desenvolvido e apresentado no computador . </li></ul>PROTOTIPAGEM
  19. 32. <ul><li>ETAPAS DO PROCESSO DE PROTOTIPAGEM </li></ul><ul><li>Desenvolver modelo conceitual </li></ul><ul><li>Desenvolver protótipo </li></ul><ul><li>Avaliar protótipo </li></ul>Com base nos resultados da avaliação, essas três etapas podem ser repetidas ciclicamente até que o resultado desejado seja alcançado. PROTOTIPAGEM
  20. 33. <ul><li>orientação a processo ou a produto; </li></ul><ul><li>definição dos produtos ou processos; </li></ul><ul><li>apresentação dos produtos ou processos; </li></ul><ul><li>regras para o uso de tipos de janelas; </li></ul><ul><li>definição de maiores telas e caminhos de navegação entre elas. </li></ul>No modelo conceitual se considera somente o mais alto nível do design da interface, com tomada de decisões sobre: PROTOTIPAGEM
  21. 34. <ul><li>O modelo conceitual deve incluir regras para: </li></ul><ul><li>localização e apresentação da identidade visual; </li></ul><ul><li>dimensões e localização de painéis; </li></ul><ul><li>links para os diferentes níveis da organização do site; </li></ul><ul><li>links versus outras ações (Enviar, p.ex); </li></ul><ul><li>links versus não links (Ilustrações, p.ex); </li></ul><ul><li>links externos versus links internos; </li></ul><ul><li>informações visuais que indiquem interação ou navegação. </li></ul>MODELO CONCEITUAL PROTOTIPAGEM
  22. 41. PADRÕES DE PROJETO DE TELAS Asseguram consistência e simplicidade, o que contribui para facilidade de aprendizagem, para rememoração e para a facilidade de uso. PROTOTIPAGEM
  23. 42. PADRÕES DE PROJETO DE TELAS O uso de padrões reduz tempo e custo tanto no desenvolvimento quanto na manutenção, por fornecerem para o desenvolvimento código reutilizável. PROTOTIPAGEM
  24. 43. <ul><li>Os seguintes elementos podem ser padronizados: </li></ul><ul><li>uso de controles; </li></ul><ul><li>posicionamento e formato padrão de componentes da tela; </li></ul><ul><li>terminologia; </li></ul><ul><li>uso da cor; </li></ul><ul><li>uso de tipografia e estilos; </li></ul><ul><li>interações de dispositivos de apontamento e atalhos do teclado; </li></ul><ul><li>tipo, localização, formato e linguagem de mensagens e instruções. </li></ul>PADRÕES DE PROJETO DE TELAS PROTOTIPAGEM
  25. 45. Ferramentas Básicas para Prototipagem
  26. 47. PROTOTIPAGEM

×