Interfaces Pessoa. Prototipagem. Máquina. Cap. 7 - Prototipagem

Transcrição

1 Interfaces Pessoa Máquina Prototipagem Cap. 7 - Prototipagem 06

2 Melhor e Pior?

3 Melhor e Pior 3

4 Resumo Aula Anterior Modelo Conceptual Metáfora; Conceitos; Relações; Mapeamentos Simples; Focado na tarefa O que é e Não é Metáforas Escolher; Avaliar Do Modelo Conceptual para o projeto Cenários de Atividades Modelo Mental

5 Perguntas O que é o Modelo Conceptual? Uma vantagem das metáforas?

6 Sumário O que são protótipos? Características Tipos de Protótipos Protótipos de Papel

7 01 PROTÓTIPOS

8 Sequência Certa! O que o sistema é (Modelo Conceptual) Como o sistema se apresenta (Prototipagem)

9 Prototipagem no Ciclo Iterativo Analisar Necessidades Conceber Soluções Avaliar Protótipos Prototipar Soluções

10 O que são Protótipos? Representação concreta, mas parcial, do sistema.

11 Objetivos da Prototipagem

12 Vantagens da Prototipagem Poupa tempo e custos Várias alternativas Ou

13 Vantagens da Prototipagem Fácil e rápido alterar Desenho centrado no utilizador

14 Máximo Local

15 Máximo Absoluto

16 ... Partilhar... Partilhar Partilhar... Design Paralelo Solução 1.1 Solução 1.2 Solução 1.M Solução 2.1 Solução Solução 2.M Solução Final Solução N.1 Solução N.2 Solução N.M

17 02 CARACTERÍSTICAS DOS PROTÓTIPOS

18 Profundidade Fidelidade Características dos Protótipos Abrangência Funcionalidade

19 Profundidade / Funcionalidade Abrangência e Profundidade Abrangência / Tarefas

20 Abrangência e Profundidade

21 Fidelidade Baixa Alta

22 Protótipo Baixa Fidelidade (PBF)

23 Protótipo Alta Fidelidade (PAF)

24 PBF e PAF Tipo Protótipo Fator + positivo Aplicação no ciclo desenv. Custo de alterar Look&Feel Custo de alterar Sequência PBF Flexibilidade, facilidade de alterar sequência, comportamento geral Início Quase nenhum Baixo PAF Fidelidade do Look&Feel Final Baixo Alto

25 Funcionalidade Funcionais Implementados em código Não funcionais Intervenção humana para funcionarem

26 Fidelidade e Funcionalidade

27 Fidelidade na Prototipagem

28 JavaSkecthIt (TFC LEIC 2001)

29 03 TIPOS DE PROTÓTIPOS

30 Cenários de Interação Diz o que um utilizador tem que fazer o que ele verá Criados a partir dos Cenários de atividades Dependente do desenho da IU

31 Cenários de Interação Protótipo minimalista Uma única sessão de interação Combinam limitações de protótipos horizontais e protótipos verticais

32 Exemplo Cenário Interação O João dirigiu-se à máquina de vender bilhetes de comboio, escolheu o seu destino carregando no botão correspondente ao Porto, depois selecionou um bilhete de ida e volta carregando na opção correspondente. Quando lhe apareceu um diálogo para confirmar a informação introduzida, o João carregou no botão <OK> e o sistema passou para o ecrã de pagamento, selecionando o João a opção de pagar com multibanco. O João passou o multibanco na ranhura e introduziu o PIN correspondente. Finalmente, o João carregou no botão <Recibo> para receber um recibo da sua operação.

33 Utilização dos Cenários de Interação Fase inicial do design Perceber como utilizadores irão interagir com futuro sistema Avaliações iniciais Avaliar o desenho inicial da IU Obter retorno dos utilizadores Sem custos de construir um protótipo

34 Storyboards Origem: Filmes e Animação Sequência de ecrãs Ecrãs apenas com detalhes importantes Complementam Cenários de Interação

35 Storyboards nos Filmes

36 Storyboards nas Interfaces

37 Storyboards nas Interfaces

38 SILK (CHI 96)

39 Protótipos de Papel

40 Storyboards vs Protótipos de Papel Storyboards <> Protótipos de Papel!! Storyboard não tem flexibilidade Obriga sempre a seguir um caminho pré-definido Protótipo de Papel Não diz por onde ir. Dá liberdade

41 Protótipos Funcionais Programas que correm Computador ou dispositivo computacional Protótipos horizontais Sem back-end Fidelidade elevada

42 Wizard-of-Oz

43 Wizard-of-Oz O utilizador O wizard

44 Wizard-of-Oz Fases iniciais do desenvolvimento Para testar sistemas exigentes / difíceis Reconhecimento de escrita, fala, gestos Inteligência artificial

45 Wizard-of-Oz - Exemplo O utilizador O wizard

46 04 PROTÓTIPOS DE PAPEL

47 Papel vs Código

48 Mão livre vs Aplicação de desenho

49 Materiais necessários Cartolina Papel branco Cartões pequenos Fita cola, cola branca, corrector Marcadores de várias cores Acetatos Tesouras, X-actos, etc...

50 Construir o Protótipo de Papel

51 Construir o Protótipo de Papel

52 Construir o Protótipo de Papel

53 Construir o Protótipo de Papel

54 Avaliar o Protótipo de Papel Computador Troca ecrãs Simula funcionamento Coordenador Responsável pela sessão de avaliação Pode interagir com o utilizador Observador Observa e toma notas

55 Avaliar o Protótipo de Papel Ensaiar funcionamento do protótipo Executar o protótipo várias vezes p/ treinar Verificar se não falta nenhum componente Quem faz de computador não deve ter dúvidas

56 Prototipagem em Papel

57 Vantagens dos Protótipos de Papel Toma apenas algumas horas Não requer equipamento dispendioso Podem testar múltiplas alternativas Iterações rápidas Quantas mais melhor Melhora qualidade final Praticamente qualquer interação pode ser simulada

58 Avaliação de Protótipos

59 Resumo O que são protótipos? Características Abrangência e Profundidade Fidelidade e Funcionalidade Tipos de Protótipos Cenários de Interação Storyboards Protótipos de Papel Protótipos Funcionais Wizard-of-Oz Protótipos de Papel Fazer e Avaliar

60 TPC Desenho de Ecrãs Ler Cap. 8 do Livro