100%(2)Il 100% ha trovato utile questo documento (2 voti)
368 visualizzazioni19 pagine
1. O documento discute 10 principais ferramentas de prototipação para interação humano-computador, incluindo Adobe Fireworks, Inkscape, e iPLOTZ.
2. As ferramentas permitem criar wireframes, protótipos visuais e simulações de interfaces para testar a usabilidade antes do desenvolvimento completo.
3. O documento fornece detalhes sobre os recursos e funcionalidades de cada ferramenta para ajudar os desenvolvedores a escolher a melhor opção para seus projetos.
1. O documento discute 10 principais ferramentas de prototipação para interação humano-computador, incluindo Adobe Fireworks, Inkscape, e iPLOTZ.
2. As ferramentas permitem criar wireframes, protótipos visuais e simulações de interfaces para testar a usabilidade antes do desenvolvimento completo.
3. O documento fornece detalhes sobre os recursos e funcionalidades de cada ferramenta para ajudar os desenvolvedores a escolher a melhor opção para seus projetos.
1. O documento discute 10 principais ferramentas de prototipação para interação humano-computador, incluindo Adobe Fireworks, Inkscape, e iPLOTZ.
2. As ferramentas permitem criar wireframes, protótipos visuais e simulações de interfaces para testar a usabilidade antes do desenvolvimento completo.
3. O documento fornece detalhes sobre os recursos e funcionalidades de cada ferramenta para ajudar os desenvolvedores a escolher a melhor opção para seus projetos.
Tecnologia em Anlise e Desenvolvimento de Sistemas
INTERAO HUMANO-COMPUTADOR: FERRAMENTAS DE PROTOTIPAO
ATIVIDADE 10
Prof. Sergio Moraes Disciplina: Interao Humano-Computador
JEREMIAS PEREIRA 0030481311023
Sorocaba Maio/2014 Sumrio 1. Introduo .......................................................................................................................... 1 2. 10 principais ferramentas de prototipao ............................................................... 2 3. Referncias Bibliogrficas ........................................................................................... 17
1
1. Introduo Prottipo uma representao visual do produto que est sendo desenvolvido. construdo geralmente com os mesmos materiais do produto final e j traz os mecanismos necessrios para o fazer funcionar. Toda a idia que envolve a prototipao est voltada para o tempo e o custo de desenvolver algo que possa ser testado pelos usurios. Nielsen (1993) define prottipos em duas classificaes; Horizontal: Exibe a interface do usurio sem ter o foco nas funcionalidades por trs dos botes, demonstrando superficialmente toda a interface. Este tipo de prottipo permite testar a interface como um todo. Vertical: Tem seu foco nas funcionalidades do sistema. Possui poucas tarefas, mas funcionalmente aprofundadas. Este tipo de prottipo permite testar uma pequena parte do sistema.
2
2. 10 principais ferramentas de prototipao 2.1. Adobe Fireworks CS6 O Adobe Fireworks CS6 (Figura 1) oferece, em sua mais recente atualizao, recursos aprimorados de criao de layouts no apenas a sites; agora, o design e a funcionalidade de aplicativos para mobiles, por exemplo, poder ser tambm melhorado atravs do uso deste software. Prototipagem para smartphones e tablets, criao de grficos vetoriais e imagens bitmap, mock-ups e a possibilidade de gerao de traos em 3D so as grandes novidades desta tradicional ferramenta dedicada s melhorias estticas e funcionais de interfaces digitais. Figura 1- Disponvel em <http://www.pcpro.co.uk/reviews/software/356935/adobe-fireworks-cs5> Alm dessas novas funcionalidades, um sistema dinmico de extrao de cdigos CSS est disponvel; elementos como cor, fonte, gradiente e proporo podem ser agora copiados diretamente planilha de trabalho de editores HTML (como o Adobe Dreamweaver CS6). Uma nova jQuery Mobile, performance otimizada de uso de ferramentas e a possibilidade de criao de 3
extenses acessveis a APIs so outras das propriedades de Adobe Fireworks CS6. 2.2. Inkscape O processo criativo pode comear com rabiscos num guardanapo, esboo de um mapa mental, uma fotografia de um objeto memorvel, ou um modelo inicial num programa que no lhe permite completar o seu projeto. O Inkscape poder elev-lo de um nvel principiante a um design de formato profissional pronto para publicao na Internet ou mesmo em formato fsico. Se para ser novidade o processo de criao de grficos vectoriais, este pode parecer-lhe diferente, mas rapidamente ficar satisfeito com a flexibilidade e poder que o Inkscape confere. Desenho vectorial frequentemente prefervel para o desenho de logtipos, ilustraes e arte que requer elevada capacidade de ser ampliada. A aplicao Inkscape utilizada numa vasta gama de indstrias (marketing/imagem de marca, engenharia/Desenho Assistido por Computador, grficos web e cartoons), bem como utilizaes individuais. 2.2.1. Funcionalidades do Inkscape 2.2.1.1. Criao de Objectos Desenhar: ferramenta de lpis (desenho mo levantada com linhas simples), ferramenta de caneta (criar curvas Bezier e linhas retas), ferramenta caligrfica (desenho mo levantada com linhas com espessura representado traos caligrficos) Ferramentas de forma: retngulos (podem ter cantos arredondados), elipses (inclui crculos, arcos, segmentos), estrelas/polgonos (podem ser arredondados ou aleatrios), espirais Ferramenta de texto (texto de mltiplas linhas, total personalizao diretamente no desenho) Imagens embutidas (com um comando para criar e incluir imagens de objetos selecionados) Clones (cpias "vivas" ligadas de objetos), incluindo uma ferramenta para criar padres e disposies de clones 2.2.1.2. Manipulao de objetos 4
Transformaes (mover, esticar/encolher, rodar, entortar), tanto interativamente como com valores exatos Operaes de ordenamento em Z (elevar e rebaixar) Agrupar objetos ("selecionar dentro de grupo" sem desagrupar, ou "entrar no grupo" tornando-o numa camada temporria) Camadas (bloquear e/ou esconder camadas individuais, reorden-las etc.; as camadas podem formar uma rvore hierrquica) 2.2.1.3. Comandos de alinhamento e distribuio Preenchimento e Contorno Seletor de cor (RGB, HSL, roda de cores) Ferramenta de indicador de cores Copiar/Colar estilo Um editor de gradientes capaz de criar gradientes com mltiplos pontos de controle Preenchimento com padres (mapas de bits/vectores) Linhas tracejadas, com muitos tipos de linha pr-definidos Marcadores de linha (marcadores de final e/ou princpio por exemplo: setas) 2.2.1.4. Operaes em linhas Editor de ndulos: mover ndulos e controladores Bezier, alinhamento e distribuio de ndulos, etc. Converter em linha (para textos ou figuras), incluindo converter contorno em linhas 2.2.1.5. Operaes Booleanas Simplificao de linha, com limite de preciso varivel Linhas paralelas interiores ou exteriores, incluindo objetos paralelos ligados dinamicamente Vetorizao de mapas de bits (no s a cores como a preto e branco) Suporte para texto Texto de mltiplas linhas Utilizao de qualquer fonte de contorno incluindo escrita da direita para a esquerda. Sobreposio e afastamento entre caracteres, e ajuste de espaamento entre linhas 5
Texto a longo de curva (o texto e a curva mantm-se editveis) Texto dentro de polgonos (preenchimento segue linha) Representao Exibio totalmente suavizada Suporte para transparncias Alpha tanto para exibio como para exportao de PNG Completa representao de objetos "enquanto arrasta" durante transformaes interativas 2.3. iPLOTZ O iPLOTZ um servio online para desenvolver prottipos em wireframe bem como especificaes para aplicaes em pginas da internet. O programa rene diversas opes de forma a facilitar ao mximo o desenvolvimento deste tipo de projeto. Esta uma verso gratuita do programa e possui limitao de insero para apenas um projeto e at cinco pginas de wireframe. Este programa requer uma conta de usurio para sua. Para este cadastro somente necessrio inserir alguns poucos dados e enviar, o que o torna a concluso desta fase bem simples e rpida. A ideia de um wireframe para pgina da internet ou aplicao, que o prottipo fique o mais parecido possvel com o produto final, de forma que parea uma imagem tirada dela j pronta. 2.3.1. Funes do programa A interface do programa relativamente simples, especialmente se voc j fez uso de ferramentas para criar projetos do tipo clica e arrasta. O programa opera a partir de uma janela de seu navegador de internet padro e para comear um novo projeto, basta clicar em Create a New Project. Uma nova janela ser aberta, solicitando informaes sobre o projeto a ser criado, como seu nome, estado (ativo/inativo), data inicial e final, descrio, tags, se ele ser pblico ou apenas para membros e, por ltimo, possvel adicionar pessoas ao grupo do projeto digitando seus e-mails e clicando no boto para confirmar. 6
Feito isto basta acessar o cone do projeto criado (ao lado da funo para cri- lo) e em seguida escolher a opo Wireframe. A interface que passa a ser exibida a partir desta operao est bem dividida (Figura 2), sendo exibido no centro um painel para que voc monte seus projetos. Acima dele existe uma pequena barra de ferramentas com opes para imprimir, salvar, importar, colar, fazer anotaes, entre outras. Figura 2 - Disponvel em <http://konigi.com/notebook/iplotz-wireframing-service>
No lado direito, h uma srie de objetos para voc adicionar por meio de clica e arrasta como painis dinmicos, menus, painel de texto, imagem, hyperlink, retngulo, boto, tabelas, campos de texto, reas de texto, caixa de seleo, listas verticais, linhas, molduras, entre outras. H duas categorias para estas ferramentas: iPhone e Web & Application. Para inserir um texto dentro das opes cabveis, basta um duplo clique do mouse sobre o objeto. Se voc necessitar excluir alguma das figuras criadas s clicar sobre ela e utilizar a tecla delete do teclado. O iPLOTZ permite a criao do wireframe com trs estilos de esquema de cores: janela do Windows, do Mac ou desenhado mo. 2.4. iPLOTZ 7
Seja no desenvolvimento, apresentao ou documentao de um software, sempre precisamos pensar em como o usurio trabalhar com ele. Assim sendo, torna-se necessrio desenhar as telas dos programas para facilitar o seu uso e apresentar adequadamente suas funcionalidades. O Mockup Screens um software projetado para desenhar telas completas (Figura 3), deixando disposio do desenvolvedor todas as ferramentas necessrias, tais como caixasdrop-down, listas de combinao, botes e demais elementos que geralmente compem a tela de um software. Figura 3 - Disponvel em <http://www.telechargeplus.com/windows/mockupscreens/>
interessante salientar que o programa pode no s salvar as telas em seu formato proprietrio, para edio posterior, mas tambm pode export-las nos formatos PDF, XML ou HTML, permitindo assim que sejam utilizadas em diversos projetos e aplicaes. 2.5. Serena Prototype Composer Serena Prototype Composer ajuda voc com rapidez e preciso simular como um aplicativo vai olhar e funo sem escrever qualquer cdigo (Figura 4). Serena Prototype Composer Community Edition permite aos usurios trabalhar com um projeto de amostra e um projeto definido pelo usurio. 8
Figura 4 - Disponvel em <http://serena-prototype-composer-2008.software.informer.com/screenshot/196746/>
2.6. Pencil Project Uma coisa mais do que um fato: nem todo programador obrigado a entender o que os designers fazem e vice-versa. por isso que comum acontecerem diversos problemas na hora de desenvolver o produto final de um aplicativo, pois aliar funcionalidade ao visual extremamente importante. por isso que antes so feitos planejamentos, que nada mais so do que rascunhos de como deve ser um programa finalizado. Em resumo, o Pencil Project uma aplicao que funciona dentro do Firefox e permite montar projetos de interfaces grficas como mostrado abaixo (Figura 5). 9
Figura 5 - Disponvel em <http://www.baixaki.com.br/download/pencil-project.htm>
Monte sua interface O programa pode ser acessado no Mozilla Firefox em Ferramentas > Pencil Sketching. Para comear um projeto, clique em "Document" e selecione "New Document". O espao de trabalho aberto no lado direito da tela e se divide em vrias abas (localizadas no topo). Voc pode renomear e modificar atributos, como tamanho e cor de fundo, ao dar um duplo clique sobre a aba. No lado esquerdo, voc encontra um menu chamado "Collections", com todos os elementos que podem ajud-lo a montar a interface. A diviso bastante simples e direta, com formas comuns, anotaes e objetos para web. Linguagens e sistemas tambm tm seus grupos com widgets, como o caso do GTK+ e Windows XP. Voc deve encontrar tambm o "Sketchy GUI", que d um ar de rascunho para o projeto. Usando os elementos e salvando o projeto (Figura 6) 10
Figura 6 - Disponvel em <http://www.baixaki.com.br/download/pencil-project.htm>
Voc pode arrastar qualquer elemento para dentro do projeto de maneira livre. A maioria dos recursos permite modificar seu tamanho e rotacion-lo. No caso de um objeto ter qualquer tipo de texto, basta um duplo clique para edit-lo. possvel utilizar as configuraes no topo da tela para personalizar a fonte e o modo de apresentao. Ao selecionar um objeto, diversas opes do topo da tela podem auxili-lo a organizar seu trabalho, pois voc pode alinhar tudo de maneiras especficas, assim como modificar o tamanho com a preciso de pixels. As cores tambm podem ser modificadas pelos botes do canto superior direito. Alm disso, diversas configuraes so obtidas quando se clica com o boto direito do mouse sobre qualquer coisa no projeto. 2.7. DENIM O Projeto DENIM, liderada pelo professor James Landay , est focada na pesquisa de ferramentas para a criao de interfaces com o usurio por meio da interao informal , como desenhar (Figura 7). 11
Figura 7 - Disponvel em <http://dub.washington.edu:2007/denim/research/>
DENIM uma consequncia do projeto de seda original, uma ferramenta de desenhar com caneta para desenhar interfaces de usurio. SILK combina muitas das vantagens de em papel esboar com ferramentas de prototipagem eletrnicos existentes. Ele permite que os designers para esboar rapidamente uma interface usando um pad eletrnico e caneta. SILK preserva as propriedades importantes de lpis e papel: um esboo pode ser produzido de forma rpida e meio flexvel. No entanto, ao contrrio de um esboo de papel, este esboo eletrnico interativo e pode facilmente ser anotados e modificados usando edio de gestos. SILK permite que o designer para estender a interatividade dos widgets (Figura 8) reconhecidos usando storyboards (veja abaixo): 12
Figura 8 - Disponvel em <http://dub.washington.edu:2007/denim/research/>
Atravs de um estudo da prtica de web design do site, observamos que a Web designers locais de design em diferentes nveis de refinamento - mapa do site, storyboard, e pgina individual - e que esboo projetistas em todos os nveis durante os estgios iniciais do projeto. No entanto, ferramentas de web design existentes no suportam essas tarefas muito bem. Informado por estas observaes, criamos DENIM, um sistema que ajuda designers web site nos estgios iniciais do projeto. DENIM suporta entrada de esboo, permite o desenho em diferentes nveis de refinamento, e unifica os nveis atravs de zoom. Foi realizada uma avaliao informal com sete designers profissionais e descobriu que eles reagiram positivamente ao conceito e estavam interessados em usar esse sistema em seu trabalho. 2.8. FlairBuilder FlairBuilder uma ferramenta de prototipagem que permite criar wireframes interativos para sites e aplicativos mveis. fcil de aprender e usar, e vem com muitas opes. 13
FlairBuilder vem com muitos stencils (Figura 9). Mas voc tambm pode reutilizar componentes de outros projetos e simplesmente drag'n'drop-los em seus novos projetos. Figura 9 - Disponvel em <http://flairbuilder.co/features>
Isto torna incrivelmente fcil de criar bibliotecas de componentes reutilizveis. Manter um conjunto de componentes e estilos de toda a empresa e convidar a todos para contribuir. 2.9. 10screens Muitos desenvolver produtos que pretendem dar uma resposta a uma das perguntas, mas muito poucos conseguem resistir ao teste do tempo e sustentar. 10screens um tal esforo que eles permitem que os usurios para testar a experincia do usurio e processos de negcio subjacentes no mesmo espao. 10Screens um software desenvolvido pela Bizosys Technologies Pvt. Ltd., criado para simplificar a comunicao em torno do desenvolvimento de software. 10Screens est posicionado para criar requisitos de negcio robustos muito mais cedo, quando as necessidades do negcio esto sendo articuladas. Se a ideia do usurio direcionada para aplicativos mveis, 10Screens pode simular o Windows Mobile, Android, iPhone, sem qualquer instalao e se a ideia envolve um processo, ento ele cria diagramas de fluxo com formulrios web relacionados e outras pginas que demonstram aplicaes web ricas. Uma caracterstica importante que 10screens no requer habilidades especiais ou quaisquer instalaes. 10Screens pode ser usado por usurios no- tcnicos, incluindo analista de negcios / gestores, designers de experincia do usurio 14
e os dados de criadores de interface do usurio tambm seria muito seguro, uma vez que est hospedado por um muito confivel centro de dados; o nvel de segurana a par com que a Amaznia. Existem alguns esquemas de preos, assim que incluem um plano bsico, plano plus, um plano premium e um plano profissional. Os preos variam de modestos US $ 11 por ms para US $ 249 por ms com um teste gratuito de 30 dias com cada plan.10screens parece ser um produto muito conveniente e isso que tem possibilitado o produto para sustentar e crescer. Com recursos como mecanismo dirio de backup, sem aborrecimentos de manuteno do servidor, sem provisionamento de servidores ou instalao, 10screens um produto que veio para ficar. 2.10. 10screens O Microsoft Expression Studio (Figura 10) eleva o nvel de suas possibilidades criativas. As ferramentas de design profissionais e as tecnologias inovadoras oferecem flexibilidade e liberdade para transformar suas idias em realidade. Os seguintes produtos esto includos: Expression Web, Expression Blend, Expression Design, Expression Media e Codificador do Expression. Quer voc esteja criando sites baseados em padres, produzindo experincias de usurio sofisticadas de rea de trabalho ou Silverlight ou gerenciando ativos e contedos digitais, o Expression Studio tem o que voc precisa. 15
Figura 10 - Disponvel em <http://www.pcpro.co.uk/reviews/software/362068/microsoft-expression-studio-4- ultimate>
16
Concluso No nosso caso, desenvolvedores de software, a Prototipao (ou modelo Evolutivo) classificada como um Modelo de Processo de Software. Ou seja, ela determina a maneira precisa de como sero as atividades e dinmicas de criao do software. De acordo com o modelo, por exemplo, necessrio que o desenvolvedor e o cliente tracem as regras no incio. Para o desenvolvedor com fome de codificar, parar para prototipar pode se tornar uma ao tediosa, parecendo no haver utilidade, pois pra que retrabalho onde poderia j iniciar com a programao, que aquilo que sabe e gosta de fazer? Porm, considerando que cliente nunca sabe o que quer e nunca est errado, o desenvolvimento de prottipo traz uma segurana de que o produto/sistema ser (ou deveria ser) da forma que foi documentada e avaliada por ambos. 17
3. Referncias Bibliogrficas
10Screens PowerPoint for App Mobile, Disponvel em <http://www.10screens.com/>, acesso em 19 de maio de 2014 Adobe Firewors Download, Disponvel em <http://www.baixaki.com.br/download/adobe-fireworks-cs6.htm>, acesso em 15 de maio de 2014 Conhea o iPLOTZ FREE, Disponvel em, <http://www.baixaki.com.br/download/iplotz-free.htm>, acesso em 15 de maio de 2014 DUB: DENIM and SILK, Disponvel em <http://dub.washington.edu:2007/denim/research/>, acesso em 15 de maio de 2014 FlairBuilder Wireframes, Mockups and Prototypes, Disponvel em <http://flairbuilder.co/>, acesso em 19 de maio de 2014 Inkscape Funcionalidade e performance, Disponvel em <http://www.inkscape.org/pt/acerca-de/funcionalidades/>, acesso em 15 de maio de 2014 Microsoft Student Expression Studio: aumente o nvel da sua criatividade, disponvel em <http://www.microsoft.com/student/pt/br/learn/expression- studio.aspx>, acesso em 19 de maio de 2014 Mockup Screens Fatures and screenshots, Disponvel em <http://www.mockupscreens.com/index.php?page=Screen-Prototypes>, acesso em 18 de maio de 2014 NIELSEN, JAKOB; Usability Engineering. Morgan Kaufmann; 1 edition (September 23, 1993), 362 p.