prototipagem em papel
DESCRIPTION
Desenvolver e testar interfaces antes de iniciar a programaçãoTRANSCRIPT
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?
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
Prototipagem de Rich Internet Applications
13
14
Prototipagem de Rich Internet Applications
15
Prototipagem de Rich Internet Applications
Prototipagem de Rich Internet Applications
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