Prototipagem
Upcoming SlideShare
Loading in...5
×
 

Prototipagem

on

  • 14,064 views

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

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

Statistics

Views

Total Views
14,064
Views on SlideShare
13,648
Embed Views
416

Actions

Likes
8
Downloads
291
Comments
2

6 Embeds 416

http://aulasjoaorafael.blogspot.com 168
http://moodle.pucrs.br 125
http://aulasjoaorafael.blogspot.com.br 59
http://www.slideshare.net 57
http://www.aulasjoaorafael.blogspot.com.br 4
http://www.aulasjoaorafael.blogspot.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Prototipagem Prototipagem Presentation Transcript

    • P R O T O T I P A G E M Robson Santos
    • PROTOTIPAGEM
      • O que veremos:
      • MANHÃ
      • Conceitos e definições
      • Tipologia de prototipagem
      • Prototipagem em papel
      • Exercício
      • Plano de teste com protótipo
      • TARDE
      • Ferramentas básicas para prototipagem
      • Exercício
      • Plano de teste com protótipo
    • Protótipos são modelos construídos para simular a aparência e a funcionalidade de um produto em desenvolvimento. PROTOTIPAGEM
    •  
    •  
    •  
    •  
    • 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
      • Um protótipo pode ser:
      • um pequeno guia para o usuário;
      • uma simulação em papel;
      • uma simulação usando o próprio computador a partir de uma ferramenta de prototipagem;
      • uma versão inicial do programa;
      • o sistema a ser substituído, em funcionamento.
      PROTOTIPAGEM
    • 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
    • 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
    • Tipologia de prototipagem
      • PROTOTIPAGEM HORIZONTAL
      • Apresenta toda a funcionalidade do nível mais alto projetada e habilitada.
      • Permite testar a organização geral do sistema.
      • Representa a página inicial com todas as chamadas principais, com cada link ligado apelo menos uma página.
      • Permite testar o nível de compreensão das categorias principais.
      PROTOTIPAGEM
      • PROTOTIPAGEM VERTICAL
      • Permite verificar como o usuário se desloca pelos níveis da hierarquia.
      • Representa a funcionalidade do sistema em um grupo de atividades.
      • Permite que o usuário interaja em níveis aprofundados.
      • Apenas um pequeno número de caminhos é implementado totalmente.
      PROTOTIPAGEM
    • Página index Prototipagem horizontal Prototipagem vertical Seções não implementadas
      • PROTOTIPAGEM DE CENÁRIO
      • É orientada à tarefa.
      • Em teste devem ser estabelecidas três tarefas importantes que exponham a funcionalidade devem ser planejadas.
      • É o formato ideal para avaliar usabilidade, pois o tamanho limitado o torna fácil de ser alterado a partir das respostas do usuário.
      PROTOTIPAGEM
    •  
      • PROTÓTIPOS ESTÁTICOS
      • feitos em papel
      • PROTÓTIPOS INTERATIVOS
      • desenvolvidos com aplicativos específicos
      PROTOTIPAGEM
      • Dimensões de fidelidade de modelos
      • 1. DETALHAMENTO: a quantidade de detalhes que o modelo suporta.
      • 2.  GRAU DE FUNCIONALIDADE: a extensão na qual os detalhes de operação são completos
      • SIMILARIDADE DE INTERAÇÃO: o quão similar as interações como o modelo serão com o produto final
      • REFINAMENTO ESTÉTICO: o quão realístico o modelo é.
      PROTOTIPAGEM
      • PROTOTIPAGEM DE BAIXA FIDELIDADE
      • Possui baixo grau de detalhamento.
      • Somente apresenta visualmente a funcionalidade.
      • Não possui recursos interação .
      • Não é exibido no mesmo suporte que o produto final.
      • Não exibe, necessariamente, o aspecto visual definitivo.
      • É composto por representação das telas em papel.
      • É útil para avaliar soluções na fase inicial de desenvolvimento do projeto de interface.
      • É útil para resolver problemas de hierarquia de menus .
      PROTOTIPAGEM
    •  
    •  
    •  
    • 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
      • PROTOTIPAGEM DE MÉDIA FIDELIDADE
      • Deve exibido no suporte final.
      • Apresentar o aspecto visual mais próximo do definitivo
      • É mais realístico que o de baixa fidelidade
      • O grau de funcionalidade e a similaridade de interação não são fatores fundamentais nesse tipo de protótipo.
      • Pode ser implementado em uma apresentação de telas em seqüência, com algumas zonas de salto predefinidas para simular a navegação.
      PROTOTIPAGEM
    •  
    •  
    •  
    •  
    •  
      • PROTÓTIPO DE ALTA FIDELIDADE
      • Possibilita a interação do usuário como se fosse o produto final .
      • Representa fielmente o produto final em termos de aparência visual, interatividade e navegação.
      • Possui razoável funcionalidade implementada e contém amostra do conteúdo.
      • É desenvolvido e apresentado no computador .
      PROTOTIPAGEM
      • ETAPAS DO PROCESSO DE PROTOTIPAGEM
      • Desenvolver modelo conceitual
      • Desenvolver protótipo
      • Avaliar protótipo
      Com base nos resultados da avaliação, essas três etapas podem ser repetidas ciclicamente até que o resultado desejado seja alcançado. PROTOTIPAGEM
      • orientação a processo ou a produto;
      • definição dos produtos ou processos;
      • apresentação dos produtos ou processos;
      • regras para o uso de tipos de janelas;
      • definição de maiores telas e caminhos de navegação entre elas.
      No modelo conceitual se considera somente o mais alto nível do design da interface, com tomada de decisões sobre: PROTOTIPAGEM
      • O modelo conceitual deve incluir regras para:
      • localização e apresentação da identidade visual;
      • dimensões e localização de painéis;
      • links para os diferentes níveis da organização do site;
      • links versus outras ações (Enviar, p.ex);
      • links versus não links (Ilustrações, p.ex);
      • links externos versus links internos;
      • informações visuais que indiquem interação ou navegação.
      MODELO CONCEITUAL PROTOTIPAGEM
    •  
    •  
    •  
    •  
    •  
    •  
    • 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
    • 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
      • Os seguintes elementos podem ser padronizados:
      • uso de controles;
      • posicionamento e formato padrão de componentes da tela;
      • terminologia;
      • uso da cor;
      • uso de tipografia e estilos;
      • interações de dispositivos de apontamento e atalhos do teclado;
      • tipo, localização, formato e linguagem de mensagens e instruções.
      PADRÕES DE PROJETO DE TELAS PROTOTIPAGEM
    •  
    • Ferramentas Básicas para Prototipagem
    •  
    • PROTOTIPAGEM
    •  
    •  
    •