Atividade 10

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

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

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.

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.

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

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.

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

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

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

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

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

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

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

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

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

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.

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/

Atividade 10

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Atividade 10

Atividade 10