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 0030481311023

Sorocaba

Maio/2014

Sumário1. 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.

3

2. 10 principais ferramentas de prototipação2.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 <http://www.pcpro.co.uk/reviews/software/356935/adobe-fireworks-cs5>

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

4

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 projeto. 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 Inkscape2.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

5

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

6

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.

7

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 <http://konigi.com/notebook/iplotz-wireframing-service>

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

8

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 caixasdrop-down, listas de combinação, botões e

demais elementos que geralmente compõem a tela de um software.

Figura 3 - Disponível em <http://www.telechargeplus.com/windows/mockupscreens/>

É 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.

9

Figura 4 - Disponível 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 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).

10

Figura 5 - Disponível 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 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)

11

Figura 6 - Disponível 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. É

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).

12

Figura 7 - Disponível em <http://dub.washington.edu:2007/denim/research/>

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):

13

Figura 8 - Disponível em <http://dub.washington.edu:2007/denim/research/>

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.

14

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 <http://flairbuilder.co/features>

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. 10screensMuitos 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

15

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. 10screensO 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ê precisa.

16

Figura 10 - Disponível em <http://www.pcpro.co.uk/reviews/software/362068/microsoft-expression-studio-4-ultimate>

17

ConclusãoNo 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.

18

3. Referências Bibliográficas

10Screens – PowerPoint for App Mobile, Disponível em

<http://www.10screens.com/>, acesso em 19 de maio de 2014

Adobe Firewors Download, Disponível em

<http://www.baixaki.com.br/download/adobe-fireworks-cs6.htm>, acesso em 15

de maio de 2014

Conheça o iPLOTZ FREE, Disponível em,

<http://www.baixaki.com.br/download/iplotz-free.htm>, acesso em 15 de maio

de 2014

DUB: DENIM and SILK, Disponível em

<http://dub.washington.edu:2007/denim/research/>, acesso em 15 de maio de

2014

FlairBuilder – Wireframes, Mockups and Prototypes, Disponível em

<http://flairbuilder.co/>, acesso em 19 de maio de 2014

Inkscape Funcionalidade e performance, Disponível em

<http://www.inkscape.org/pt/acerca-de/funcionalidades/>, acesso em 15 de

maio de 2014

Microsoft Student – Expression Studio: aumente o nível da sua criatividade,

disponível em <http://www.microsoft.com/student/pt/br/learn/expression-

studio.aspx>, acesso em 19 de maio de 2014

Mockup Screens – Fatures and screenshots, Disponível 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.

19