atividade 10
Post on 01-Jul-2015
158 Views
Preview:
TRANSCRIPT
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
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.
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.
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 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.
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/
top related