O documento discute ferramentas de prototipagem para interfaces de usuário, descrevendo dez ferramentas incluindo FlairBuilder, ForeUI, PhotoShare, Visual Basic, DENIM, HotGloo, GUI Design Studio, Glade, Simulify e MockFlow. Exemplos demonstram como cada ferramenta pode ser usada para criar protótipos de websites, aplicativos móveis e desktop de forma rápida e interativa.

1. Faculdade de Tecnologia de Sorocaba
Análise e Desenvolvimento de Sistemas
INTERAÇÃO HUMANO-COMPUTADOR:
FERRAMENTAS DE PROTOTIPAGEM

2. Sumário
Introdução..................................................................................................................................... 3
Ferramentas de Prototipagem...................................................................................................... 4
FlairBuilder .................................................................................................................................... 5
ForeUI............................................................................................................................................ 6
PhotoShare.................................................................................................................................... 8
Visual Basic.................................................................................................................................... 9
DENIM ......................................................................................................................................... 10
HotGloo....................................................................................................................................... 11
GUI Design Studio........................................................................................................................ 12
Glade ........................................................................................................................................... 13
Simulify........................................................................................................................................ 14
MockFlow.................................................................................................................................... 15
Protótipos.................................................................................................................................... 16
VisualStudio............................................................................................................................. 16
FlairBuilder .............................................................................................................................. 17
DesignStudio ........................................................................................................................... 18
DENIM ..................................................................................................................................... 19
Photoshare.............................................................................................................................. 20
Conclusão.................................................................................................................................... 21
Referências Bibliográficas ........................................................................................................... 22
Sites:.................................................................................................................................... 22

3. Introdução
As técnicas de prototipação são hoje um recurso de grande utilidade no processo
de desenvolvimento de software, criando a possibilidade de se obter informações a
respeito da forma como o usuário interage com o sistema e, consequentemente,
aproximar o produto final daquilo que o cliente espera q seja desenvolvido.
Segundo NIELSEN (1994), ferramentas de prototipagem devem ser utilizadas
durante os primeiros estágios de design, quando são feitas avaliações para prever a
possibilidade de utilização do produto ou uma parte dele. Este tipo de ferramenta
também é útil para testar novas ideias de maneira rápida e informal. Além disso, uma
ferramenta focada no design de interfaces evita o conflito de interesses entre as práticas
de design e de desenvolvimento.
Durante o processo de concepção, o uso de protótipos é focado na identificação
de dificuldades de uso do sistema, especialmente por parte do usuário final, de modo a
aperfeiçoar o produto para satisfazer as necessidades do cliente. Assim, criar um
protótipo e fazer testes de usabilidade com os futuros usuários torna-se uma maneira
eficiente de avaliar a qualidade do protótipo do sistema com relação a atributos que os
projetistas definem como sendo prioritários ao sistema. E, com base nesses atributos
podem ser extraídos fatores de usabilidade referentes à facilidade de aprendizado,
eficácia, eficiência, satisfação do usuário e flexibilidade (PREECE, 1994)
De forma geral, as ferramentas de prototipação existentes visam diminuir a
distância entre a implementação e as expectativas dos futuros usuários do sistema,
possibilitando a construção da essência dos projetos, de forma rápida e convincente para
os clientes.

4. Ferramentas de Prototipagem
Prototipação é um conceito estabelecido pela engenharia de software que visa o
desenvolvimento do software em constante consulta com o cliente Para isso, existem
várias ferramentas que ajudam o desenvolvedor a elaborar e apresentar protótipos, como
se fossem pré versões do software, para avaliações e feedback.
Essas ferramentas de prototipagem possuem modelos e padrões de prototipação
que facilitam o desenvolvimento e aumentam a interatividade. Muitas vezes, a
prototipagem pode ser feita em papel, especialmente no início e, com o decorrer do
projeto, passar para o digital.
Tais ferramentas apresentam todo o design, ícones e prévias funções do software
para que, então, o cliente avalie e aponte os erros ou mudanças que ele espera que
aconteçam, ou seja, é muito mais fácil o cliente visualizar o conteúdo de que está sendo
feito, ao invés de exibir telas ou desenhos ou, até mesmo, textos explicativos.
No tópico abaixo, apresentaremos 10 ferramentas distintas e exemplos de
protótipos feitos utilizando-as.

5. FlairBuilder
FlairBuilder é uma ferramenta de prototipagem paga, com 15 dias de uso grátis,
para desenvolvimento de Wireframes (esqueleto que demonstra a interface num
processo praticamente final) para páginas de internet e aplicações mobile. Além disso,
é uma ótima ferramenta para desenvolvimento RIA (Rich Internet Application), que
são aplicações web com funcionalidades de softwares para desktop.
É uma ferramenta simples de fácil utilização que retorna os resultados propostos.
Figura 1 -Interface do FlairBuilder
Figura 2 - Wireframe do Facebook, feito pelo FlairBuilder

6. Como podemos ver nas imagens acima, o FlairBuilder oferece ferramentas bem
interativas e de fácil manuseio. Além disso, o resultado já é apresentado durante o
desenvolvimento, não há o que compilar.
Figura 3 - Aplicação mobile feita pelo FlairBuilder
ForeUI
A ferramenta ForeUI é uma ferramenta de prototipagem de fácil utilização,
designada para criar mockups(maquetes digitais de desenhos industriais), wireframes e
protótipos para qualquer aplicação ou websites.
É uma ferramenta muito interativa devido as várias opções de manuseio como,
por exemplo, manusear seu protótipo website direto do navegador, importar os projetos
para imagens de vários formatos e PDF, apresentação de slides, etc. Além disso, oferece
testes de usabilidade para o cliente em diversos sistemas operacionais (Windows, Mac
OS X, Linux e Solaris).
Há, ainda, o recurso de desenvolvimento do pré-funcionamento do software a ser
prototipado por meio de fluxogramas.

7. Figura 4 -Fluxograma feito utilizando o ForeUI
Figura 5 -Interface do ForeUI
Figura 6 - Prototipagem mobile utilizando ForeUI

8. PhotoShare
PhotoShare é uma ferramenta de prototipagem também de fácil manuseio que
permite a criação de wireframes para websites, protipação de mobile, websites, iPhone,
iPad e Android. É totalmente interativo que permite o cliente realmente mexer com todo
o protótipoe apontar seus defeitos e afins.
A ferramenta foca não somente no design, mas também em todo o processo,
utilizando o diagrama:
Figura 7 - Criar, compartilhar e decisão : ciclo de funcionamento do PhotoShare
Portanto, temos a visão de que o PhotoShare é totalmente voltado à metodologia
Prototipação, de acordo com o diagrama acima.
Figura 8 -Interface do PhotoShare

9. Figura 9 - Utilização de prototipagem Mobile PhotoShare
VisualBasic
O VB (VisualBasic) é uma ferramenta de criação de software que pode ser usada para
prototipagem, basta não realizar a codificação completa. É parte do software Visual Studio
desenvolvido pela Microsoft. Oferece fácil manuseio, utilizando o “arrastar e jogar” para
montar o protótipo. E, ainda, oferece a criação/protipação de websites e tecnologia Metro
(Windows 8). Oferce diversas linguagens de programação para seu desenvolvimento.
Figura 10 -Interface do Visual Basic

10. DENIM
Diferente das outras ferramentas, o DENIM é uma ferramenta de prototipação
baseado em caneta e papel de verdade, porém digitais. Permite o esboço total da
imaginação do desenvolvedor. Tem a opção da utilização de mesas digitalizadoras.
Portanto, o DENIM é uma ferramenta para criação rápida de protótipos. Devemos
destacar que é uma ferramenta FREE.
Figura 11 - Utilização do DENIM

11. HotGloo
HotGloo é uma ferramenta de prototipagem voltada totalmente ao wireframe. É
utilizada em tempo real com simultâneos usuários, permitindo livres acessos dos
desenvolvedores. É uma ferramenta rápida e limpa, oferecendo conforto ao
desenvolvedor e ao cliente para avaliação.
Figura 12 -Interface do HotGloo. Podemos ver atualizações do projeto e quem as fez no canto superior esquerdo

12. GUI Design Studio
GUI Design é uma ferramenta de prototipagem drag and drop de fácil manuseio, tendo
as opções de desenvolvimento de Web, aplicativos Desktop e Mobile.
A ferramenta apresenta vários recursos de telas dos mais variados sistemas
operacionais, é possível quebrar o projeto em partes menores para melhor desenvolvimento e,
ao mesmo instante do desenvolver, podemos testar o protótipo.
Figura 13 -Interface do GUI Design Studio

13. Glade
Glade é uma ferramenta RAD (Rapid Application Development, ciclo de
desenvolvimento curto) para desenvolvimento claro e simples do software de
prototipação. Devemos destacar que Glade é totalmente ausente de codificação, ou seja,
ele apenas apresenta o desenvolvimento do design gerando um arquivo XML e, a partir
desse arquivo, podemos programar em linguagens C, C++, C#, Vala, Java, Perl, Python
e outras.
Seu desenvolvimento é voltado ao GTK+, que é uma toolkit multi-plataforma
para criação de interfaces gráficas e, também, voltado ao GNOME, que é uma
comunidade do aplicativo GNOME, que é um software livre que torna algum software
utilizável à qualquer usuário.
Figura 14 -Interface do Glade

14. Simulify
O Simulify é uma ferramenta de prototipagem para wireframes, maquetes
digitais e web. Oferece o recurso de prototipação online, onde você pode interagir com
outros usuários e os clientes. É simples e de fácil manuseio, podendo utilizar mesas
digitalizadoras ou o design padrão para o desenvolvimento.
Sua estrutura é totalmente limpa e leva a uma rápida criação de protótipos
interagíveis, objetivos e claros.
Figura 15 - Utilização do Simulify variando com desenhos de mesas digitalizadoras e design padrão da ferramenta
Figura 16 - Utilização do Simulify. Interação simples e agradável

15. MockFlow
O MockFlow é uma ferramenta focada mais à prototipagem de softwares
mobile. Porém temos também as opções de wireframes e web. É limpo e de fácil
utilização, podendo produzir protótipos online.
MockFlow apresenta diversas ferramentas objetivas e claras para desenhar o
protótipo e sempre há disponível os detalhes de cada função do projeto.
Figura 17 - Utilização do MockFlow

16. Protótipos
VisualStudio

17. FlairBuilder

18. DesignStudio

19. DENIM

20. Photoshare

21. Conclusão
Quando as pessoas utilizam um software, elas querem algo que seja fácil de
usare eficiente no desempenho das tarefas propostas. Nem sempre os usuários sabem o
que querem inicialmente, mas, assim queas necessidades se tornam evidentes, eles
sabem exatamente como querem o programa. Eem meio a todos esses fatores, dúvidas e
expectativas que atua a prototipação de interfaces, agindo como uma ponte entre usuário
e programador, elencando e confirmandoos requisitos do sistema.
Vale também ressaltar que em projetos de desenvolvimento de softwares, a
interatividade é contínua e presente desde o princípio, portanto, é de suma importância
que os conceitos, funções e aplicações do sistema sejam apresentados e testados, através
das interfaces do programa, antes de serem produzidos. Especialmente se considerarmos
que os custos com mudanças crescem muito à medida que progride a especificação do
sistema. Por isso que se utiliza a Prototipação:Para criar modelos simplificados que
descrevam ou simulem as características do projeto.
A técnica de Prototipação, aplicada à Interação Humano-Computador, tem como
objetivo a realização de diversas interações em que um protótipo é gerado a partir de um
conjunto de requisitos, em sequência esses protótipos (interfaces) passam pela avaliação
do cliente que retornará suas impressões e opiniões a respeito das funcionalidades. Com
base nos resultados obtidos da avaliação um novo protótipo, ou o sistema final é
desenvolvido.
Para tanto, é necessário que desenvolvedores e designers tenham a sua
disposição ferramentas precisas, eficientes e fáceis de usar, possibilitando o
desenvolvimento ágil de protótipos. Como pudemos observar nesse trabalho, existem
inúmeras ferramentas disponíveis atualmente, inclusive gratuitas e disponíveis online,
só é necessário que o programador teste e use uma que atenda suas necessidades.
Em suma, a prototipação e a utilização de uma ferramenta adequada para criação
do esboço do projeto constituem uma fase de extrema relevância nos processos de
desenvolvimento de software, podendo inclusive constituir o fracasso prematuro de um
projeto, mas, quando atendidos, posteriormente levam a construção de interfaces com
um entendimento harmonioso entre as práticas de desenvolvimento e de design.

22. Referências Bibliográficas
NIELSEN, Jakob. UsabilityEngineering. São Francisco: Morgan Kaufmann. 1994
PREECE, Jennifer. Human-Computer Interaction.EUA: Addison Wesley. 1994.
Sites:
http://www.sumufily.com.br
http://www.prototypingtool.com/simulify-convey-your-idea-simply
http://www.hotgloo.com/
http://meaki.com/browse/popular
http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-
applications/
http://www.techrepublic.com/article/denim-may-be-the-rapid-web-prototyping-tool-
youre-looking-for/1058664
http://www.oficinadanet.com.br/artigo/2196/o_que_e_visual_basic
http://www.protoshare.com/
http://www.mockflow.com/
http://www.guj.com.br/java/252383-ferramentas-opensource-de-prototipacao
http://www.testandtry.com/2010/01/08/flairbuilder-fast-easy-gui-mockups/
http://kartones.net/blogs/kartones/archive/2009/05/10/review-flairbuilder.aspx
http://glade.gnome.org/
http://www.carettasoftware.com/guidesignstudio/