Faculdade de Tecnologia de Sorocaba Tecnologia em Análise e Desenvolvimento de Sistemas
INTERAÇÃO HUMANO-COMPUTADOR: FERRAMENTAS DE PROTOTIPAÇÃO
ATIVIDADE 10
Prof.º Sergio Moraes Disciplina: Interação Humano-Computador
JEREMIAS PEREIRA
Sorocaba Maio/2014
0030481311023
Sumário 1.
Introdução .......................................................................................................................... 1
2.
10 principais ferramentas de prototipação ............................................................... 2
3.
Referências Bibliográficas ........................................................................................... 17
1. Introdução Protótipo é uma representação visual do produto que está sendo desenvolvido. É construído geralmente com os mesmos materiais do produto final e já traz os mecanismos necessários para o fazer funcionar. Toda a idéia que envolve a prototipação está voltada para o tempo e o custo de desenvolver algo que possa ser testado pelos usuários. Nielsen (1993) define protótipos em duas classificações; Horizontal: Exibe a interface do usuário sem ter o foco nas funcionalidades por trás dos botões, demonstrando superficialmente toda a interface. Este tipo de protótipo permite testar a interface como um todo. Vertical: Tem seu foco nas funcionalidades do sistema. Possui poucas tarefas, mas funcionalmente aprofundadas. Este tipo de protótipo permite testar uma pequena parte do sistema.
1
2. 10 principais ferramentas de prototipação 2.1.
Adobe Fireworks CS6
O Adobe Fireworks CS6 (Figura 1) oferece, em sua mais recente atualização, recursos aprimorados de criação de layouts não apenas a sites; agora, o design e a funcionalidade de aplicativos para mobiles, por exemplo, poderá ser também melhorado através do uso deste software. Prototipagem para smartphones e tablets, criação de gráficos vetoriais e imagens bitmap, mock-ups e a possibilidade de geração de traços em 3D são as grandes novidades desta tradicional ferramenta dedicada às melhorias estéticas e funcionais de interfaces digitais. Figura 1- Disponível em
Além dessas novas funcionalidades, um sistema dinâmico de extração de códigos CSS está disponível; elementos como cor, fonte, gradiente e proporção 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 criação de
2
extensões acessíveis a APIs são outras das propriedades de Adobe Fireworks CS6.
2.2.
Inkscape
O processo criativo pode começar com rabiscos num guardanapo, esboço de um mapa mental, uma fotografia de um objeto memorável, ou um modelo inicial num programa que não lhe permite completar o seu proje to. O Inkscape poderá elevá-lo de um nível principiante a um design de formato profissional pronto para publicação na Internet ou mesmo em formato físico. Se é para ser novidade o processo de criação de gráficos vectoriais, este pode parecer-lhe diferente, mas rapidamente ficará satisfeito com a flexibilidade e poder que o Inkscape confere. Desenho vectorial é frequentemente preferível para o desenho de logótipos, ilustrações e arte que requer elevada capacidade de ser ampliada. A aplicação Inkscape é utilizada numa vasta gama de indústrias (marketing/imagem de marca, engenharia/Desenho Assistido por Computador, gráficos web e cartoons), bem como utilizações individuais.
2.2.1.
Funcionalidades do Inkscape
2.2.1.1. Criação de Objectos Desenhar: ferramenta de lápis (desenho à mão levantada com linhas
simples), ferramenta de caneta (criar curvas Bezier e linhas retas), ferramenta caligráfica (desenho à mão levantada com linhas com espessura representado traços caligráficos)
Ferramentas de forma: retângulos (podem ter cantos arredondados), elipses (inclui círculos, arcos, segmentos), estrelas/polígonos (podem ser arredondados ou aleatórios), espirais
Ferramenta de texto (texto de múltiplas linhas, total personalização diretamente no desenho)
Imagens embutidas (com um comando para criar e incluir imagens de objetos selecionados)
Clones (cópias "vivas" ligadas de objetos), incluindo uma ferramenta para criar padrões e disposições de clones 2.2.1.2. Manipulação de objetos 3
Transformações (mover, esticar/encolher, rodar, entortar), tanto interativamente como com valores exatos
Operações de ordenamento em Z (elevar e rebaixar)
Agrupar objetos ("selecionar dentro de grupo" sem desagrupar, ou "entrar no grupo" tornando-o numa camada temporária)
Camadas (bloquear e/ou esconder camadas individuais, reordená-las etc.; as camadas podem formar uma árvore hierárquica)
2.2.1.3. Comandos de alinhamento e distribuição 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 múltiplos pontos de controle
Preenchimento com padrões (mapas de bits/vectores)
Linhas tracejadas, com muitos tipos de linha pré-definidos
Marcadores de linha (marcadores de final e/ou princípio por exemplo: setas)
2.2.1.4. Operações em linhas Editor de nódulos: mover nódulos e controladores Bezier, alinhamento e
distribuição de nódulos, etc.
Converter em linha (para textos ou figuras), incluindo converter contorno em linhas
2.2.1.5. Operações Booleanas Simplificação de linha, com limite de precisão variável
Linhas paralelas interiores ou exteriores, incluindo objetos paralelos ligados dinamicamente
Vetorização de mapas de bits (não só a cores como a preto e branco)
Suporte para texto
Texto de múltiplas linhas
Utilização de qualquer fonte de contorno incluindo escrita da direita para a esquerda.
Sobreposição e afastamento entre caracteres, e ajuste de espaçamento entre linhas 4
Texto a longo de curva (o texto e a curva mantêm-se editáveis)
Texto dentro de polígonos (preenchimento segue linha)
Representação
Exibição totalmente suavizada
Suporte para transparências Alpha tanto para exibição como para exportação de PNG
Completa representação de objetos "enquanto arrasta" durante transformações interativas
2.3.
iPLOTZ
O iPLOTZ é um serviço online para desenvolver protótipos em wireframe bem como especificações para aplicações em páginas da internet. O programa reúne diversas opções de forma a facilitar ao máximo o desenvolvimento deste tipo de projeto. Esta é uma versão gratuita do programa e possui limitação de inserção para apenas um projeto e até cinco páginas de wireframe. Este programa requer uma conta de usuário para sua. Para este cadastro somente é necessário inserir alguns poucos dados e enviar, o que o torna a conclusão desta fase bem simples e rápida. A ideia de um wireframe para página da internet ou aplicação, é que o protótipo fique o mais parecido possível com o produto final, de forma que pareça uma imagem tirada dela já pronta. 2.3.1. Funções 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 padrão e para começar um novo projeto, basta clicar em “Create a New Project”.
Uma nova janela será aberta, solicitando informações sobre o projeto a ser criado, como seu nome, estado (ativo/inativo), data inicial e final, descrição, tags, se ele será público ou apenas para membros e, por último, é possível adicionar pessoas ao grupo do projeto digitando seus e-mails e clicando no botão para confirmar.
5
Feito isto basta acessar o ícone do projeto criado (ao lado da função para criálo) e em seguida escolher a opção Wireframe. A interface que passa a ser exibida a partir desta operação 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 opções para imprimir, salvar, importar, colar, fazer anotações, entre outras. Figura 2 - Disponível em
No lado direito, há uma série de objetos para você adicionar por meio de “clica e arrasta” como painéis dinâmicos, menus, painel de texto, imagem, hyperlink,
retângulo, botão, tabelas, campos de texto, áreas de texto, caixa de seleção, listas verticais, linhas, molduras, entre outras. Há duas categorias para estas ferramentas: iPhone e Web & Application. Para inserir um texto dentro das opções cabíveis, 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
criação do wireframe com três estilos de esquema de cores: janela do Windows, do Mac ou desenhado à mão.
2.4.
iPLOTZ 6
Seja no desenvolvimento, apresentação ou documentação de um software, sempre precisamos pensar em como o usuário trabalhará com ele. Assim sendo, torna-se necessário 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 à disposição do desenvolvedor todas as ferramentas necessárias, tais como caixas drop-down, listas de combinação, botões e demais elementos que geralmente compõem a tela de um software. Figura 3 - Disponível em
É interessante salientar que o programa pode não só salvar as telas em seu formato proprietário, para edição posterior, mas também pode exportá-las nos formatos PDF, XML ou HTML, permitindo assim que sejam utilizadas em diversos projetos e aplicações.
2.5.
Serena Prototype Composer
Serena Prototype Composer ajuda você com rapidez e precisão simular como um aplicativo vai olhar e função sem escrever qualquer código (Figura 4). Serena Prototype Composer Community Edition permite aos usuários trabalhar com um projeto de amostra e um projeto definido pelo usuário. 7
Figura 4 - Disponível em
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 são feitos planejamentos, que nada mais são do que rascunhos de como deve ser um programa finalizado. Em resumo, o Pencil Project é uma aplicação que funciona dentro do Firefox e permite montar projetos de interfaces gráficas como mostrado abaixo (Figura 5) .
8
Figura 5 - Disponível em
Monte sua interface
O programa pode ser acessado no Mozilla Firefox em Ferramentas > Pencil Sketching. Para começar um projeto, clique em "Document" e selecione "New Document". O espaço de trabalho é aberto no lado direito da tela e se divide em várias 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 divisão é bastante simples e direta, com formas comuns, anotações e objetos para web. Linguagens e sistemas também têm seus grupos com widgets, como é o caso do GTK+ e Windows XP. Você deve encontrar também o "Sketchy GUI", que dá um ar de rascunho para o projeto. Usando os elementos e salvando o projeto (Figura 6)
9
Figura 6 - Disponível em
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. É possível utilizar as configurações no topo da tela para personalizar a fonte e o modo de apresentação. Ao selecionar um objeto, diversas opções do topo da tela podem auxiliá-lo a organizar seu trabalho, pois você pode alinhar tudo de maneiras específicas, assim como modificar o tamanho com a precisão de pixels. As cores também podem ser modificadas pelos botões do canto superior direito. Além disso, diversas configurações são obtidas quando se clica com o botão 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 criação de interfaces com o usuário por meio da interação informal , como desenhar (Figura 7).
10
Figura 7 - Disponível em
DENIM é uma consequência do projeto de seda original, uma ferramenta de desenhar com caneta para desenhar interfaces de usuário. SILK combina muitas das vantagens de em papel esboçar com ferramentas de prototipagem eletrônicos existentes. Ele permite que os designers para esboçar rapidamente uma interface usando um pad eletrônico e caneta. SILK preserva as propriedades importantes de lápis e papel: um esboço pode ser produzido de forma rápida e meio é flexível. No entanto, ao contrário de um esboço de papel, este esboço eletrônico é interativo e pode facilmente ser anotados e modificados usando edição de gestos. SILK permite que o designer para estender a interatividade dos widgets (Figura 8) reconhecidos usando storyboards (veja abaixo):
11
Figura 8 - Disponível em
Através de um estudo da prática de web design do site, observamos que a Web designers locais de design em diferentes níveis de refinamento - mapa do site, storyboard, e página individual - e que esboço projetistas em todos os níveis durante os estágios iniciais do projeto. No entanto, ferramentas de web design existentes não suportam essas tarefas muito bem. Informado por estas observações, criamos DENIM, um sistema que ajuda designers web site nos estágios iniciais do projeto. DENIM suporta entrada de esboço, permite o desenho em diferentes níveis de refinamento, e unifica os níveis através de zoom. Foi realizada uma avaliação 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 móveis. É fácil de aprender e usar, e vem com muitas opções.
12
FlairBuilder vem com muitos stencils (Figura 9). Mas você também pode reutilizar componentes de outros projetos e simplesmente drag'n'drop-los em seus novos projetos. Figura 9 - Disponível em
Isto torna incrivelmente fácil de criar bibliotecas de componentes reutilizáveis. 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 esforço que eles permitem que os usuários para testar a experiência do usuário e processos de negócio subjacentes no mesmo espaço. 10Screens é um software desenvolvido pela Bizosys Technologies Pvt. Ltd., criado para simplificar a comunicação em torno do desenvolvimento de software. 10Screens está posicionado para criar requisitos de negócio robustos muito mais cedo, quando as necessidades do negócio estão sendo articuladas. Se a ideia do usuário é direcionada para aplicativos móveis, 10Screens pode simular o Windows Mobile, Android, iPhone, sem qualquer instalação e se a ideia envolve um processo, então ele cria diagramas de fluxo com formulários web relacionados e outras páginas que demonstram aplicações web ricas. Uma característica importante é que 10screens não requer habilidades especiais ou quaisquer instalações. 10Screens pode ser usado por usuários não- técnicos, incluindo analista de negócios / gestores, designers de experiência do usuário 13
e os dados de criadores de interface do usuário também seria muito seguro, uma vez que está hospedado por um muito confiável centro de dados; o nível de segurança é a par com que a Amazônia. Existem alguns esquemas de preços, assim que incluem um plano básico, plano plus, um plano premium e um plano profissional. Os preços variam de modestos US $ 11 por mês para US $ 249 por mês 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 diário de backup, sem aborrecimentos de manutenção do servidor, sem provisionamento de servidores ou instalação, 10screens é um produto que veio para ficar.
2.10.
10screens
O Microsoft Expression Studio (Figura 10) eleva o nível de suas possibilidades criativas. As ferramentas de design profissionais e as tecnologias inovadoras oferecem flexibilidade e liberdade para transformar suas idéias em realidade. Os seguintes produtos estão incluídos: Expression Web, Expression Blend, Expression Design, Expression Media e Codificador do Expression. Quer você esteja criando sites baseados em padrões, produzindo experiências de usuário sofisticadas de área de trabalho ou Silverlight ou gerenciando ativos e conteúdos digitais, o Expression Studio tem o que você pr ecisa.
14
Figura 10 - Disponível em
15
Conclusão No nosso caso, desenvolvedores de software, a Prototipação (ou modelo Evolutivo) é classificada como um Modelo de Processo de Software. Ou seja, ela determina a maneira precisa de como serão as atividades e dinâmicas de criação do software. De acordo com o modelo, por exemplo, é necessário que o desenvolvedor e o cliente tracem as regras no início. Para o desenvolvedor com fome de codificar, parar para prototipar pode se tornar uma ação tediosa, parecendo não haver utilidade, pois pra que retrabalho onde poderia já iniciar com a programação, que é aquilo que sabe e gosta de fazer? Porém, considerando que cliente nunca sabe o que quer e nunca está errado, o desenvolvimento de protótipo traz uma segurança de que o produto/sistema será (ou deveria ser) da forma que foi documentada e avaliada por ambos.
16
3. Referências Bibliográficas
10Screens – PowerPoint for App Mobile, Disponível em , acesso em 19 de maio de 2014 Adobe Firewors Download, Disponível em , acesso em 15 de maio de 2014 Conheça o iPLOTZ FREE, Disponível em, , acesso em 15 de maio de 2014 DUB: DENIM and SILK, Disponível em , acesso em 15 de maio de 2014 FlairBuilder – Wireframes, Mockups and Prototypes, Disponível em , acesso em 19 de maio de 2014 Inkscape Funcionalidade e performance, Disponível em , acesso em 15 de maio de 2014 Microsoft Student – Expression Studio: aumente o nível da sua criatividade, disponível em , acesso em 19 de maio de 2014 Mockup Screens – Fatures and screenshots, Disponível em , acesso em 18 de maio de 2014 NIELSEN, JAKOB; Usability Engineering. Morgan Kaufmann; 1 edition (September 23, 1993), 362 p.
17