atividade 10
DESCRIPTION
Atividade 10: Ferramentas de PrototipagemTRANSCRIPT
![Page 1: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/1.jpg)
Faculdade de Tecnologia de Sorocaba
Análise e Desenvolvimento de Sistemas
INTERAÇÃO HUMANO-COMPUTADOR:
FERRAMENTAS DE PROTOTIPAGEM
Atividade 10
Disciplina: Interação Humano-Computador
Professor: Sergio Moraes
Hebert Francisco Albertin AD112176
Luís Eduardo de Almeida AD112183
Paulo Érico de Freitas AD112193
![Page 2: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/2.jpg)
2
Sorocaba/SP, 11 de Dezembro de 2012.
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
Visual Basic................................................................................................................16
ForeUI........................................................................................................................18
GUI Design Studio......................................................................................................20
FlairBuilder................................................................................................................22
MockFlow..................................................................................................................24
Conclusão.................................................................................................................28
Referências Bibliográficas.........................................................................................29
![Page 3: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/3.jpg)
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.
![Page 4: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/4.jpg)
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.
![Page 5: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/5.jpg)
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
![Page 6: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/6.jpg)
6
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
![Page 7: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/7.jpg)
7
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
![Page 8: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/8.jpg)
8
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.
![Page 9: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/9.jpg)
9
Figura 8 - Interface do PhotoShare
Figura 9 - Utilização de prototipagem Mobile PhotoShare
Visual Basic
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.
![Page 10: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/10.jpg)
10
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.
![Page 11: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/11.jpg)
11
Figura 11 - Utilização do DENIM
![Page 12: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/12.jpg)
12
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
![Page 13: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/13.jpg)
13
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
![Page 14: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/14.jpg)
14
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
![Page 15: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/15.jpg)
15
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
![Page 16: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/16.jpg)
16
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
![Page 17: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/17.jpg)
17
Protótipos
Visual Basic
Tabela de Consulta
Grade Curricular
![Page 18: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/18.jpg)
18
Login
Menu Principal
![Page 19: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/19.jpg)
19
![Page 20: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/20.jpg)
20
ForeUI
Tabela de Consulta
Grade Curricular
![Page 21: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/21.jpg)
21
Login
Menu Principal
![Page 22: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/22.jpg)
22
GUI Design Studio
Tabela de Consulta
Grade Curricular
![Page 23: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/23.jpg)
23
Login
Menu Principal
![Page 24: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/24.jpg)
24
FlairBuilder
Tabela de Consulta
Grade Curricular
![Page 25: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/25.jpg)
25
Login
Menu Principal
![Page 26: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/26.jpg)
26
MockFlow
Tabela de Consulta
![Page 27: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/27.jpg)
27
Grade Curricular
![Page 28: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/28.jpg)
28
Login
![Page 29: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/29.jpg)
29
![Page 30: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/30.jpg)
30
Menu Principal
*
![Page 31: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/31.jpg)
31
Conclusão
Quando as pessoas utilizam um software, elas querem algo que seja fácil de usar e eficiente no desempenho das tarefas propostas. Nem sempre os usuários 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, dúvidas e expectativas que atua a prototipação de interfaces, agindo como uma ponte entre usuário e programador, elencando e confirmando os 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.
![Page 32: Atividade 10](https://reader036.vdocuments.com.br/reader036/viewer/2022062421/55cf97bf550346d033935fe3/html5/thumbnails/32.jpg)
32
Referências Bibliográficas
NIELSEN, Jakob. Usability Engineering. 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/