Skip to content
24/06/2010 / Danresa Consultoria de Informática

Criando Protótipos com o SketchFlow Parte Final

Por: Márcio Fábio Althmann

No primeiro artigo mostrei como criar um protótipo simples com duas telas, dando continuidade vamos agora enviar o nosso protótipo para a avaliação do cliente, para isso é só utilizar a opção Package SketchFlow Project do menu File.

Descrição: Menu01

Na próxima janela só precisamos escolher um local para salvar os arquivos e o nome da pasta que será criada, feito isso é só clicar no botão Ok.

Descrição: PackageSkatchFlowProject

Os arquivos gerados devem ser enviados para o cliente, lembrando que para executar o protótipo é só abrir o arquivo TestPage.html. Sera aberto o browser padrão com o SkethFlow Player rodando o protótipo, um detalhe é que o cliente precisa do Silverlight instalado para visualizar o protótipo. Veja abaixo o protótipo em execução.

Descrição: SketchFlowPlayer

SketchFlow Player algumas janelas interessantes.

·         Navigate: Além de navegar pelo protótipo mesmo clicando nos botões, como no caso acima no botão Login a janela Navigate mostra as navegações possíveis apartir da tela que estamos visualizando no momento. Temos também um slider que possibilita aumentar ou diminuir o zoom sobre a tela visualizada.

·         Map: Mostra o mesmo diagrama com o relacionamento entre as telas que temos dentro do Blend.

·         Feedback: É a janela mais interessante e onde serão feitas todas as anotações sobre o protótipo, nela temos pincéis para desenho, podemos escrever anotações, podemos escolher cores para cada pincel, enfim, o cliente tem o protótipo livre para rabiscar, escrever como se estivesse com uma folha de papel e caneta na mão.

Nas imagens abaixo tem um exemplo do que pode ser feito, vale notar que alterei os valores dos campos de Login Senha mostrando que o protótipo é interativo e não apenas uma imagem.

Descrição: Analise01

Descrição: Analise02

Com a minha análise do protótipo feita, onde coloquei minhas anotações sobre o que quero mudar no mesmo, eu preciso exportar o meu feedback para o desenvolvedor, para isso dentro da janela Feedback no botão Show Feedback Options escolhemos a opção Export Feedback.

Descrição: FeedbackOptions

Feito isso aparecerá uma janela para para o autor do Feedback colocar seu nome e iniciais.

Descrição: FeedbackAuthor

Clicando no botão OK  uma janela do Windows para salvar arquivos aparecerá, é só escolher um diretório e dar o nome do arquivo que será salvo.

Descrição: SaveFeedback

Um arquivo .feedback sera criado, esse arquivo deve ser mandado de volta ao desenvolvedor para ele analisar os feedbacks do cliente e fazer as modificações solicitadas, agora só precisamos importar esse arquivo de feedback do cliente no Blend, na janela Feedback clique no botão +, uma janela para adicionar arquivos existentes aparecerá, só precisamos escolher o arquivo de feedback e clicar em Open.

Descrição: importfeedback

Se o botão que tem o desenho de lampada da janela Feedback estiver ativo, veremos no fonte das telas as anotações feitas pelo nosso cliente, facilitando a correção dos problemas, também vemos os comentários que ele escreveu na própria janela de Feedback, outro detalhe importante é que na janela SketchFlow Map as telas com feedback terão uma lampada adicionada no item da mesma dentro do diagrama. Veja abaixo os feedback do cliente visto dentro do Blend.

Descrição: Feedback01

Descrição: Feedback02

Imaginando que terminamos todo o trabalho, temos a opção do Blend gerar automaticamente a documentação de todo o protótipo, para isso escolha o item Export To Microsoft Word do menu File.

Descrição: ExportWord01

Na próxima janela só precisamos informar o nome do arquivo .docx que será gerado, a pasta o
nde será gerado, e ainda temos a opção de mandar o arquivo abrir no final da geração, e se você possuir algum template de documento do Word, pode marcar a opção escolher template e selecionar o mesmo.

Descrição: ExportWord02

Veja abaixo o documento aberto no Word com a documentação do projeto, imagens do mapa das telas, e imagem das telas.

Descrição: Word01

Descrição: Word02

Bom esse foi um pequeno exemplo de todo o poder do SketchFlow ainda tenho muito o que falar, animações, coleção de dados, mas fica para os próximos artigos, e só para completar, em um projeto novo que estou trabalhando, fizemos um SketchFlow do site e mandamos para o cliente, ensinamos ele a utilizar a ferramenta de feedback, e ele adorou, elogiou demais, adorou navegar pelo site e ver onde tudo vai ficar antes mesmo do desenvolvimento do site começar.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: