prototipagem em papel

Prototipagem em PapelDesenvolver e testar interfaces antes de

iniciar a programaçãoIvo Gomes

1

Novos desafios

2

• Interfaces cada vez mais complexos;

• Novos desafios através do uso de Rich Internet Applications:

• Prazos de desenvolvimento cada vez mais curtos;

• É necessário usar uma metodologia mais simples e rápida para modelação de interfaces.

Protótipos?

• Usados para identificar as interacções em rascunho e o design dos ecrãs;

• Podem ser feitos testes e simulações rápidas;

• Servem para transmitir aos designers/developers os ecrãs e/ou as funcionalidades que o interface deverá ter, bem como os fluxos de informação;

• Podem ser concebidos em papel ou outros formatos (PowerPoint/Keynote, Visio/OmniGraffle, etc...)

3

Porquê em Papel e não noutro formato?

• Porque em papel dá para apagar e voltar a escrever por cima, tirar notas, dobrar, recortar... (mesmo durante os testes de usabilidade);

• É mais rápido de desenhar do que usando qualquer software;

• É mais fácil transpor as ideias directamente para o papel;

• É mais fácil envolver outras pessoas no desenvolvimento dos protótipos;

• Os utilizadores conseguem ser mais críticos ao olharem para um protótipo em papel do que para uma página com um aspecto mais formal.

4

Poupar dinheiro usando protótipos

• As maiores melhorias no interface de um produto são obtidas através da recolha de dados de usabilidade nas fases iniciais do seu desenvolvimento.

• Os benefícios da aplicação de metodologias de usabilidade nas fases iniciais é 10 vezes maior do que se for apenas utilizada numa fase posterior (para correcção de erros e alteração de elementos no interface).

• É mais barato alterar um produto na sua fase inicial do que fazer alterações a um produto acabado. Estima-se que seja 100 vezes mais barato efectuar alterações antes de se começar a programar do que esperar que todo o desenvolvimento tenha sido efectuado.

5

Jakob Nielsen; Alertbox, 14 de Abril de 2003

Vantagens dos protótipos no geral

A prototipagem é particularmente útil para recolher dados sobre:

• Conceitos e terminologia;

• Navegação;

• Conteúdo;

• Layout da página;

• Funcionalidade.

6

Vantagens dos Protótipos em Papel

• Testar o layout antes de começar a programar;

• Fazer alterações rapidamente;

• Eliminar variáveis tecnológicas nos testes de usabilidade.

Vantagens dos Protótipos em Papel

• Baixo custo de implementação;

• Documentação rápida.

Desvantagens dos Protótipos em Papel

• Difícil “copiar” o comportamento de alguns elementos do interface: scrollbars, transmissão de informação através do uso de cores, animações, Rich Applications, etc...

• Durante a concepção e testes aos protótipos, não é escrita nenhuma linha de código, o que pode atrasar o tempo total disponível para o projecto;

• O aspecto dos ecrãs pode fazer com que os utilizadores (e o cliente) sinta que é um método pouco profissional;

• Não permite encontrar todo o tipo de problemas de usabilidade.

9

Em que fases se pode aplicar a prototipagem?

• Podem-se criar e testar protótipos em qualquer fase do processo de desenvolvimento;

• Alterações nas fases iniciais são mais bem sucedidas e mais baratas do que correcções numa fase posterior;

• Podem fazer-se protótipos com base num interface já existente (para testar a implementação de novas funcionalidades).

10

Prototipagem de Rich Internet Applications

Como mostrar em papel as interacções deste tipo de aplicações web?


• O objectivo de testar um protótipo é o de criar um interface usável. Se for difícil de copiar o comportamento de algum efeito no papel, isso pode significar que o próprio efeito no site não será muito usável.

• Muitas vezes são usadas novas tecnologias, não necessariamente por serem mais usáveis, mas mais porque são cool. O objectivo da prototipagem não é testar se o site é cool, mas sim se os utilizadores conseguem realizar as suas tarefas.

• Os protótipos não precisam de incorporar todos os elementos da página. Apenas necessitam de capturar a funcionalidade do site e fornecer as informações correctas e dentro do mesmo contexto.

12


13

14


15



16

Case Study

Como o uso de protótipos em papel pode ser um êxito no desenho de uma nova aplicação

O problema (deles)

• Uma empresa tinha a necessidade de informatizar todos os seus 9 departamentos que trocavam vários tipos de informação entre si;

• A informação era escrita em ficheiros XLS e DOC, impressa e enviada para outro departamento, que, por sua vez, copiava os dados para o computador, alterava, imprimia e passava para outro departamento;

• Relatórios financeiros e de contabilidade feitos à mão em folhas de cálculo;

• Necessidade de uma aplicação web que permitisse eliminar passos desnecessários, gerar relatórios automaticamente, ser fácil de usar.

18

O problema (nosso)

• Como convencer a empresa da necessidade de um estudo elaborado antes de implementar uma solução qualquer?

• Como explicar a importância do uso de entrevistas e protótipos em papel antes mesmo de começarmos a desenvolver a solução?

• Receio da reacção dos utilizadores e das chefias perante a apresentação de protótipos de baixa resolução e de aspecto tosco (em papel e desenhados à mão);

19

Entrevistas com os colaboradores

• Foram feitas entrevistas com os colaboradores dos 9 departamentos;

• Recolha de dados sobre as tarefas, procedimentos, workflows, dependências e métodos de trabalho;

Elaboração de Protótipos em Papel

• Com base nos resultados das entrevistas, foram elaborados protótipos em papel de uma futura aplicação web que permitisse informatizar todos os processos identificados;

21

Testes de Usabilidade

• Testes de usabilidade com todos os 9 departamentos usando os protótipos em papel;

• Durante os testes foram identificados possíveis problemas de usabilidade, correcção de alguns ecrãs, confirmação (ou não) da qualidade/precisão da informação disponibilizada, etc...

• Todos os participantes nas entrevistas estiveram presentes nos testes de usabilidade e deram sugestões para alterar alguns ecrãs.

24

25

Conhecer a linguagem dos utilizadores

Passagem para a equipa de desenvolvimento

• Após as correcções aos protótipos, foram desenhados wireframes (protótipos de resolução superior aos desenhos no papel) para passar à equipa de desenvolvimento;

• Através desta metodologia foi possível testar todos os ecrãs antes mesmo de se começar a programar;

• Redução da probabilidade de possíveis correcções ao interface no futuro;

• Satisfação elevada dos utilizadores por sentirem que também ajudaram a desenvolver o software que estão a usar e que foi feito “por e para eles”.

26

Com Protótipos em Papel...

• Poupámos tempo e dinheiro;

• Garantimos um nível elevado de satisfação dos utilizadores e diminuímos a probabilidade de ter que efectuar correcções no futuro;

• Fornecemos à equipa de desenvolvimento um conjunto de ecrãs e especificações que lhes permitiram desenvolver todo o interface tendo em conta as recomendações dos seus reais utilizadores;

• Temos um método simples e rápido para desenhar e testar interfaces.

28

www.ivogomes.comObrigado pela vossa

atenção!

http://www.ivogomes.com/apresentacoes/prototipagem-em-papel.pdf

prototipagem em papel

Technology