O documento discute os benefícios da prototipagem em papel para o desenvolvimento de interfaces. A prototipagem em papel permite desenvolver e testar interfaces de forma rápida e barata antes de começar a programação, identificando problemas de usabilidade nas fases iniciais do projeto. Isso resulta em interfaces mais intuitivas e satisfatórias para os usuários finais.

1. Prototipagem em Papel
Desenvolver e testar interfaces antes de Ivo Gomes
iniciar a programação
1

2. Novos desafios
• 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.
2

3. 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

4. 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

5. 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.
Jakob Nielsen; Alertbox, 14 de Abril de 2003
5

6. 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

7. 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.

8. Vantagens dos
Protótipos em Papel
• Baixo custo de
implementação;
• Documentação rápida.

9. 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

10. 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

11. Prototipagem de Rich
Internet Applications
Como mostrar em papel as
interacções deste tipo de
aplicações web?

12. Prototipagem de Rich Internet Applications
• 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. Prototipagem de Rich Internet Applications
13

14. Prototipagem de Rich Internet Applications
14

15. Prototipagem de Rich Internet Applications
15

16. Prototipagem de Rich Internet Applications
16

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

18. 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

19. 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

20. 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;

21. 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

24. 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
25

26. 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

28. 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

29. Obrigado pela vossa
www.ivogomes.com
atenção!

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