Faculdade de Tecnologia de Sorocaba

Anlise e Desenvolvimento de Sistemas

INTERAO HUMANO-COMPUTADOR: FERRAMENTAS DE PROTOTIPAGEM

Atividade 10

Disciplina: Interao Humano-Computador Professor: Sergio Moraes

Hebert Francisco Albertin Lus Eduardo de Almeida Paulo rico de Freitas

AD112176 AD112183 AD112193

Sorocaba/SP, 11 de Dezembro de 2012.

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

Prottipos .............................................................................................................. 16
Visual Basic ................................................................................................................. 16 ForeUI ......................................................................................................................... 18 GUI Design Studio....................................................................................................... 20 FlairBuilder ................................................................................................................. 22 MockFlow ................................................................................................................... 24

Concluso............................................................................................................... 28 Referncias Bibliogrficas ....................................................................................... 29

Introduo
As tcnicas de prototipao so hoje um recurso de grande utilidade no processo de desenvolvimento de software, criando a possibilidade de se obter informaes a respeito da forma como o usurio 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 estgios de design, quando so feitas avaliaes para prever a possibilidade de utilizao do produto ou uma parte dele. Este tipo de ferramenta tambm til para testar novas ideias de maneira rpida e informal. Alm disso, uma ferramenta focada no design de interfaces evita o conflito de interesses entre as prticas de design e de desenvolvimento. Durante o processo de concepo, o uso de prottipos focado na identificao de dificuldades de uso do sistema, especialmente por parte do usurio final, de modo a aperfeioar o produto para satisfazer as necessidades do cliente. Assim, criar um prottipo e fazer testes de usabilidade com os futuros usurios torna-se uma maneira eficiente de avaliar a qualidade do prottipo do sistema com relao a atributos que os projetistas definem como sendo prioritrios ao sistema. E, com base nesses atributos podem ser extrados fatores de usabilidade referentes facilidade de aprendizado, eficcia, eficincia, satisfao do usurio e flexibilidade (PREECE, 1994) De forma geral, as ferramentas de prototipao existentes visam diminuir a distncia entre a implementao e as expectativas dos futuros usurios do sistema, possibilitando a construo da essncia dos projetos, de forma rpida e convincente para os clientes.

Ferramentas de Prototipagem
Prototipao um conceito estabelecido pela engenharia de software que visa o desenvolvimento do software em constante consulta com o cliente Para isso, existem vrias ferramentas que ajudam o desenvolvedor a elaborar e apresentar prottipos, como se fossem pr verses do software, para avaliaes e feedback. Essas ferramentas de prototipagem possuem modelos e padres de prototipao que facilitam o desenvolvimento e aumentam a interatividade. Muitas vezes, a prototipagem pode ser feita em papel, especialmente no incio e, com o decorrer do projeto, passar para o digital. Tais ferramentas apresentam todo o design, cones e prvias funes do software para que, ento, o cliente avalie e aponte os erros ou mudanas que ele espera que aconteam, ou seja, muito mais fcil o cliente visualizar o contedo de que est sendo feito, ao invs de exibir telas ou desenhos ou, at mesmo, textos explicativos. No tpico abaixo, apresentaremos 10 ferramentas distintas e exemplos de prottipos feitos utilizando-as.

FlairBuilder
FlairBuilder uma ferramenta de prototipagem paga, com 15 dias de uso grtis, para desenvolvimento de Wireframes (esqueleto que demonstra a interface num processo praticamente final) para pginas de internet e aplicaes mobile. Alm disso, uma tima ferramenta para desenvolvimento RIA (Rich Internet Application), que so aplicaes web com funcionalidades de softwares para desktop. uma ferramenta simples de fcil utilizao 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 fcil manuseio. Alm disso, o resultado j apresentado durante o desenvolvimento, no h o que compilar.

Figura 3 - Aplicao mobile feita pelo FlairBuilder

ForeUI
A ferramenta ForeUI uma ferramenta de prototipagem de fcil utilizao, designada para criar mockups(maquetes digitais de desenhos industriais), wireframes e prottipos para qualquer aplicao ou websites. uma ferramenta muito interativa devido as vrias opes de manuseio como, por exemplo, manusear seu prottipo website direto do navegador, importar os projetos para imagens de vrios formatos e PDF, apresentao de slides, etc. Alm 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 tambm de fcil manuseio que permite a criao de wireframes para websites, protipao de mobile, websites, iPhone, iPad e Android. totalmente interativo que permite o cliente realmente mexer com todo o prottipoe apontar seus defeitos e afins. A ferramenta foca no somente no design, mas tambm em todo o processo, utilizando o diagrama:

Figura 7 - Criar, compartilhar e deciso : ciclo de funcionamento do PhotoShare

Portanto, temos a viso de que o PhotoShare totalmente voltado metodologia Prototipao, de acordo com o diagrama acima.

Figura 8 - Interface do PhotoShare

Figura 9 - Utilizao de prototipagem Mobile PhotoShare

Visual Basic
O VB (VisualBasic) uma ferramenta de criao de software que pode ser usada para prototipagem, basta no realizar a codificao completa. parte do software Visual Studio desenvolvido pela Microsoft. Oferece fcil manuseio, utilizando o arrastar e jogar para montar o prottipo. E, ainda, oferece a criao/protipao de websites e tecnologia Metro (Windows 8). Oferce diversas linguagens de programao para seu desenvolvimento.

Figura 10 - Interface do Visual Basic

DENIM
Diferente das outras ferramentas, o DENIM uma ferramenta de prototipao baseado em caneta e papel de verdade, porm digitais. Permite o esboo total da imaginao do desenvolvedor. Tem a opo da utilizao de mesas digitalizadoras. Portanto, o DENIM uma ferramenta para criao rpida de prottipos. Devemos destacar que uma ferramenta FREE.

Figura 11 - Utilizao do DENIM

10

HotGloo
HotGloo uma ferramenta de prototipagem voltada totalmente ao wireframe. utilizada em tempo real com simultneos usurios, permitindo livres acessos dos desenvolvedores. uma ferramenta rpida e limpa, oferecendo conforto ao desenvolvedor e ao cliente para avaliao.

Figura 12 - Interface do HotGloo. Podemos ver atualizaes do projeto e quem as fez no canto superior esquerdo

11

GUI Design Studio

GUI Design uma ferramenta de prototipagem drag and drop de fcil manuseio, tendo as opes de desenvolvimento de Web, aplicativos Desktop e Mobile. A ferramenta apresenta vrios recursos de telas dos mais variados sistemas operacionais, possvel quebrar o projeto em partes menores para melhor desenvolvimento e, ao mesmo instante do desenvolver, podemos testar o prottipo.

Figura 13 - Interface do GUI Design Studio

12

Glade
Glade uma ferramenta RAD (Rapid Application Development, ciclo de desenvolvimento curto) para desenvolvimento claro e simples do software de prototipao. Devemos destacar que Glade totalmente ausente de codificao, 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 criao de interfaces grficas e, tambm, voltado ao GNOME, que uma comunidade do aplicativo GNOME, que um software livre que torna algum software utilizvel qualquer usurio.

Figura 14 - Interface do Glade

13

Simulify
O Simulify uma ferramenta de prototipagem para wireframes, maquetes digitais e web. Oferece o recurso de prototipao online, onde voc pode interagir com outros usurios e os clientes. simples e de fcil manuseio, podendo utilizar mesas digitalizadoras ou o design padro para o desenvolvimento. Sua estrutura totalmente limpa e leva a uma rpida criao de prottipos interagveis, objetivos e claros.

Figura 15 - Utilizao do Simulify variando com desenhos de mesas digitalizadoras e design padro da ferramenta

Figura 16 - Utilizao do Simulify. Interao simples e agradvel

14

MockFlow
O MockFlow uma ferramenta focada mais prototipagem de softwares mobile. Porm temos tambm as opes de wireframes e web. limpo e de fcil utilizao, podendo produzir prottipos online. MockFlow apresenta diversas ferramentas objetivas e claras para desenhar o prottipo e sempre h disponvel os detalhes de cada funo do projeto.

Figura 17 - Utilizao do MockFlow

15

Prottipos
Visual Basic
Tabela de Consulta

Grade Curricular

16

Login

Menu Principal

17

ForeUI
Tabela de Consulta

Grade Curricular

18

Login

Menu Principal

19

GUI Design Studio

Tabela de Consulta

Grade Curricular

20

Login

Menu Principal

21

FlairBuilder
Tabela de Consulta

Grade Curricular

22

Login

Menu Principal

23

MockFlow
Tabela de Consulta

24

Grade Curricular

25

Login

26

Menu Principal

27

Concluso
Quando as pessoas utilizam um software, elas querem algo que seja fcil de usar e eficiente no desempenho das tarefas propostas. Nem sempre os usurios sabem o que querem inicialmente, mas, assim que as necessidades se tornam evidentes, eles sabem exatamente como querem o programa. E em meio a todos esses fatores, dvidas e expectativas que atua a prototipao de interfaces, agindo como uma ponte entre usurio e programador, elencando e confirmando os requisitos do sistema. Vale tambm ressaltar que em projetos de desenvolvimento de softwares, a interatividade contnua e presente desde o princpio, portanto, de suma importncia que os conceitos, funes e aplicaes do sistema sejam apresentados e testados, atravs das interfaces do programa, antes de serem produzidos. Especialmente se considerarmos que os custos com mudanas crescem muito medida que progride a especificao do sistema. Por isso que se utiliza a Prototipao: Para criar modelos simplificados que descrevam ou simulem as caractersticas do projeto. A tcnica de Prototipao, aplicada Interao Humano-Computador, tem como objetivo a realizao de diversas interaes em que um prottipo gerado a partir de um conjunto de requisitos, em sequncia esses prottipos (interfaces) passam pela avaliao do cliente que retornar suas impresses e opinies a respeito das funcionalidades. Com base nos resultados obtidos da avaliao um novo prottipo, ou o sistema final desenvolvido. Para tanto, necessrio que desenvolvedores e designers tenham a sua disposio ferramentas precisas, eficientes e fceis de usar, possibilitando o desenvolvimento gil de prottipos. Como pudemos observar nesse trabalho, existem inmeras ferramentas disponveis atualmente, inclusive gratuitas e disponveis online, s necessrio que o programador teste e use uma que atenda suas necessidades. Em suma, a prototipao e a utilizao de uma ferramenta adequada para criao do esboo do projeto constituem uma fase de extrema relevncia nos processos de desenvolvimento de software, podendo inclusive constituir o fracasso prematuro de um projeto, mas, quando atendidos, posteriormente levam a construo de interfaces com um entendimento harmonioso entre as prticas de desenvolvimento e de design.

28

Referncias Bibliogrficas
NIELSEN, Jakob. Usability Engineering. So 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-mockupapplications/ http://www.techrepublic.com/article/denim-may-be-the-rapid-web-prototyping-toolyoure-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/

29