Your SlideShare is downloading. ×
Faculdade de Tecnologia de Sorocaba
Análise e Desenvolvimento de Sistemas
INTERAÇÃO HUMANO-COMPUTADOR:
FERRAMENTAS DE PROT...
Sumário
Introdução...........................................................................................................
Introdução
As técnicas de prototipação são hoje um recurso de grande utilidade no processo
de desenvolvimento de software,...
Ferramentas de Prototipagem
Prototipação é um conceito estabelecido pela engenharia de software que visa o
desenvolvimento...
FlairBuilder
FlairBuilder é uma ferramenta de prototipagem paga, com 15 dias de uso grátis,
para desenvolvimento de Wirefr...
Como podemos ver nas imagens acima, o FlairBuilder oferece ferramentas bem
interativas e de fácil manuseio. Além disso, o ...
Figura 4 -Fluxograma feito utilizando o ForeUI
Figura 5 -Interface do ForeUI
Figura 6 - Prototipagem mobile utilizando For...
PhotoShare
PhotoShare é uma ferramenta de prototipagem também de fácil manuseio que
permite a criação de wireframes para w...
Figura 9 - Utilização de prototipagem Mobile PhotoShare
VisualBasic
O VB (VisualBasic) é uma ferramenta de criação de soft...
DENIM
Diferente das outras ferramentas, o DENIM é uma ferramenta de prototipação
baseado em caneta e papel de verdade, por...
HotGloo
HotGloo é uma ferramenta de prototipagem voltada totalmente ao wireframe. É
utilizada em tempo real com simultâneo...
GUI Design Studio
GUI Design é uma ferramenta de prototipagem drag and drop de fácil manuseio, tendo
as opções de desenvol...
Glade
Glade é uma ferramenta RAD (Rapid Application Development, ciclo de
desenvolvimento curto) para desenvolvimento clar...
Simulify
O Simulify é uma ferramenta de prototipagem para wireframes, maquetes
digitais e web. Oferece o recurso de protot...
MockFlow
O MockFlow é uma ferramenta focada mais à prototipagem de softwares
mobile. Porém temos também as opções de wiref...
Protótipos
VisualStudio
FlairBuilder
DesignStudio
DENIM
Photoshare
Conclusão
Quando as pessoas utilizam um software, elas querem algo que seja fácil de
usare eficiente no desempenho das tar...
Referências Bibliográficas
NIELSEN, Jakob. UsabilityEngineering. São Francisco: Morgan Kaufmann. 1994
PREECE, Jennifer. Hu...
Upcoming SlideShare
Loading in...5
×

Atividade 10

143

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
143
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Atividade 10"

  1. 1. Faculdade de Tecnologia de Sorocaba Análise e Desenvolvimento de Sistemas INTERAÇÃO HUMANO-COMPUTADOR: FERRAMENTAS DE PROTOTIPAGEM
  2. 2. 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
  3. 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. 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. 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 Figura 2 - Wireframe do Facebook, feito pelo FlairBuilder
  6. 6. 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.
  7. 7. Figura 4 -Fluxograma feito utilizando o ForeUI Figura 5 -Interface do ForeUI Figura 6 - Prototipagem mobile utilizando ForeUI
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. Protótipos VisualStudio
  17. 17. FlairBuilder
  18. 18. DesignStudio
  19. 19. DENIM
  20. 20. Photoshare
  21. 21. 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.
  22. 22. 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/

×