Aprenda a criar protótipos de interfaces com a Ferramenta Axure
Protótipo pode ser considerado um modelo preliminar de um software, ou ainda, uma primeira versão de um produto, podendo ser criticado e aperfeiçoado, buscando obter qualidade no que esta sendo produzido.
O protótipo no desenvolvimento de sistemas
Desenvolver protótipos na elaboração de sistemas é de grande importância para resolução de vários problemas, como por exemplo, diminuir a distancia entre desenvolvedor e usuário, o que facilita alterações nas funcionalidades do sistema, bem como a validação dos requisitos. Outro fator importante é que durante a elaboração do protótipo as intervenções são menos freqüentes, sendo assim, é possível ganhar tempo e conseqüentemente reduzir custos com mão-de-obra. De uma maneira geral os objetivos dos protótipos consistem em validar os requisitos, abordar questões de interface, e avaliar a viabilidade e complexidade do sistema.
Prototipação de Baixa Fidelidade
É utilizado na fase inicial do desenvolvimento como uma maneira de compreender os requisitos e levantar críticas, é elaborado de maneira muito simples, o que não demanda um custo e tempo elevado, porém sua utilidade para no processo de documentação, não podendo servir na fase de codificação, teste de navegabilidade e usabilidade.
Prototipação de Media Fidelidade
Esses protótipos são mais criteriosos e detalhados em relação ao de baixa fidelidade, contendo informações importantes para o usuário e desenvolvedor, com isso exige ferramentas mais especificas. Nesse protótipo o usuário tem uma idéia do que será o seu produto e o desenvolvedor no que se apoiar para a construção do sistema final, porém deverá haver uma avaliação sobre a escolha desse tipo de protótipo para não haver perda de tempo com esse processo e a necessidade de um detalhamento maior do que o mesmo suporta.
Prototipação de Alta Fidelidade
Este tipo de protótipo se assemelha muito ao sistema final, inclusive sua elaboração é com base na mesma tecnologia a ser utilizada no sistema. Um protótipo com mais riquezas de detalhes, e com isso reduz o tempo de desenvolvimento, pois muitos problemas já foram solucionados, bem como permite mensurar precisamente a complexidade e o custo do desenvolvimento. No entanto, não é um método completo e perfeito, pois demanda um custo e tempo elevado em sua elaboração. A prototipação de alta fidelidade, pode ser implementada basicamente com a prototipação Throw-Away e Evolutiva.
Prototipação Throw-Away (Descartável)
Criada com base em uma documentação provisória, com o objetivo de levantar novos requisitos e validar os já implementados, elaborado com ferramentas mais ágeis. Esse processo serve para refinar a documentação e prover qualidade ao produto final, em seguida é descartado, pois o foco parte para o desenvolvimento da aplicação definitiva.
Prototipação Evolutiva
Como o próprio nome diz, consiste em evoluir ate o sistema final, utiliza-se requisitos já compreendidos, porém não há uma documentação definitiva, pois visa reduzir custo e tempo. A interação com o usuário é constante, o que permite ao usuário a visualização precoce do sistema. Além disso, permite vários testes e com isso aumenta a confiabilidade do sistema, sendo assim, o objetivo é fornecer um sistema funcionando. No entanto, esse método pode causar alguns problemas se não for muito bem planejado, pois os sistemas gerados dessa maneira não possuem especificações devidamente documentadas, prejudicando a mensuração de custos, elaborações de contratos e definições do prazo de entrega. Além do mais, pode se tornar difícil manter o sistema.
Wireframes
São documentos elaborados durante a fase de especificação de um projeto Web, consiste em avaliar questões de interface, navegabilidade e usabilidade. O projeto de um Wireframes pode ser considerado um protótipo o que permite se adequar as necessidades do desenvolvedor e do cliente, podendo ser de baixa, media e alta fidelidade. A escolha destes atributos deve ser cuidadosa, pois o projeto pode ficar simples demais ou com muito detalhado, limitando o designer. Além do mais, o usuário deve entende que se trata somente de um “esqueleto” do sistema não gerando expectativas ou má impressão.
Ferramentas de Prototipação
Existem vários softwares para o desenvolvimento de protótipos e wireframes e outros que podem ser utilizados para esse fim, dependendo o grau de detalhamento que se deseja obter, alguns dessas ferramentas são Microsoft Visio, Adobe InDesign, Pencil(com extensão do Firefox) e o Axure RP pro, o qual estaremos entendo um pouco de seu funcionamento.
A Ferramenta de Prototipação Axure
O Axure permite criar diagramas de fluxos do seu protótipo, protótipo wireframes e um documento detalhando os campos existentes na paginas dos protótipos, além de projetos que podem ser compartilhados. Os protótipos do Axure são paginas em HTML, podendo ser usados como base na criação das paginas reais do sistema.
Compartilhando o protótipo
O Axure permite que varias pessoas tenham acesso ao mesmo protótipo, podendo realizar alterações, mantendo toda a equipe do projeto e com acesso a pasta de compartilhamento atualizada e informada. Para realizar o compartilhamento, primeiramente cria-se um repositório selecionando a opção ”New Shared Project”. A primeira tela serve para informar o nome do projeto. Na tela seguinte, informa-se a localização do repositório de compartilhamento do projeto e na ultimo janela informa-se a pasta que será construída o protótipo e pronto o compartilhamento foi realizado.
Conhecendo a Ferramenta
Após aberta a ferramenta, o Axure já inicia com quatro páginas criadas e abas que serão usadas para elaboração dos protótipo, são elas:
- A aba “Sitemap”, contém todas as páginas e diagramas de fluxo referentes ao protótipo.
- A “Widgets” contém as bibliotecas de componentes que são usados para criar os protótipos (Wireframe para paginas) e diagramas de fluxos de páginas (Flow).
- A aba “Masters”, contem fragmentos de páginas que podem ser adicionadas nas telas dos protótipos inúmeras vezes, como o caso de menus e cabeçalhos.
- Na aba “Page Notes & Page Interactions” é possível inserir anotações sobre as páginas ou diagramas de fluxo e habilitar interações para quando a página for acionada.
- A aba “Annotations & Interactions” é onde se fazem as principais configurações, como anotações gerais ou detalhadas e interações dos componentes.
Primeiramente, foram removidas as páginas já criadas pelo Axure e criadas três novas páginas para melhor exemplificarem o caso de uso na aba ”Sitemap. Nessas paginas na aba “Sitemap”, podem ser definidos:
“Page Notes” uma anotação informando o propósito da página.
Criar tabelas.
Podemos definir as especificações dos componentes das tabelas.
Podemos definir interações entre os componentes.
São definidas numerações para cada especificação.
Podemos criar janela pop-up com suas especificações e interações.
Após definir todas as especificações dos métodos das paginas, pode ser dado inicio a criação do layout da pagina, com os seus devidos campos e botões.
O Axure permite que sejam criadas partes de telas que podem ser utilizadas por mais de uma página, chamadas masters, como o caso de menus, cabeçalhos e rodapés.
O uso de masters é essencial se for necessário reutilizar várias vezes o mesmo pedaço de página em várias outras páginas do sistema como, por exemplo, o uso de menus, que o Axure possui tanto os verticais quanto os horizontais, que podem também ser reaproveitados no sistema real.
Criando o Diagrama de Fluxo
O Axure permite ainda criar os diagramas de fluxo das páginas criadas. Para isso, criamos uma página “Sitemap” chamada de “fluxoPaginas” e modificamos o tipo de página para flow, com o botão direito em Diagram Flow, em seguida arastamos as paginas criadas para dentro do fluxoPaginas e configuramos as condições do fluxo.
Gerando o Protótipo e a Especificação
Para gerar o protótipo, basta selecionar no menu a opção de Prototype ou pressionar F5. Será exibida uma janela para configurações em que se pode configurar com deve ser feita a geração do protótipo.
Quando o protótipo é criado, o Axure cria as páginas e pastas correspondentes às páginas contendo imagens, arquivos CSS e arquivos JavaScript que realizam todas as ações configuradas anteriormente.
Após o protótipo ter sido criado, é aberta uma página contendo uma lista de todas as páginas e diagramas de fluxos, a página selecionada e a descrição dessa página que foi inserida previamente em “Page Notes”.
Para gerar a especificação, aperte F6 ou selecione a opção Specification no menu. O Axure irá gerar um documento no formato padrão Word, com todas as informações existentes, podendo ser utilizados outros editores de texto.
Conclusão
Através dos conceitos mencionado no texto podemos entender um pouco melhor o assunto sobre prototipação, bem como ,conhecer a ferramenta Axure, utilizada do desenvolvimento de protótipos.
Nenhum comentário:
Postar um comentário