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

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

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

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

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

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.

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.

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.

11

Figura 11 - Utilização do DENIM

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

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

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

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

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

17

Protótipos

Visual Basic

Tabela de Consulta

Grade Curricular

18

Login

Menu Principal

19

20

ForeUI

Tabela de Consulta

Grade Curricular

21

Login

Menu Principal

22

GUI Design Studio

Tabela de Consulta

Grade Curricular

23

Login

Menu Principal

24

FlairBuilder

Tabela de Consulta

Grade Curricular

25

Login

Menu Principal

26

MockFlow

Tabela de Consulta

27

Grade Curricular

28

Login

29

30

Menu Principal

*

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.

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/