Desenvolvimento de
Protótipos em Wireframe
Otávio Souza
Rio, 16 de Agosto de 2010
Agenda
Objetivo
Desenvolvimento
Resultado
Próximos Passos
Desenvolvimento de Protótipos > Agenda
Cenário Atual e Novo Cená...
Objetivo
3
Facilitar o processo de aprovação de novas funcionalidades, elaboração de
casos de uso e testes de usabilidade,...
Cenário Atual
4Desenvolvimento de Protótipos ... > Cenário Atual
Protótipos com Diversos Formatos e Padrões
Característica...
Novo Cenário
5Desenvolvimento de Protótipos > Novo Cenário
Protótipo em Alta FidelidadeProtótipo em Wireframe
Uso para Tes...
Arquitetura da Informação
6
O WBS é estruturado através da seguinte hierarquia, utilizada na construção do Wireframe:
Dese...
Desenvolvimento em Wireframe
7
- O desenvolvimento acontece a partir da inclusão (drag-and-drop)
de componentes pré-defini...
8
Após o desenvolvimento do Wireframe, deve-se seguir dois passos:
Desenvolvimento de Protótipos ... > Desenvolvimento
Des...
Resultado
9
Protótipo final com as devidas especificações:
Desenvolvimento de Protótipos ... > Resultado
Resultado
10
O Protótipo gerado possibilita a navegação entre páginas através de duas formas:
Desenvolvimento de Protótipo...
Próximos SlideShares
Carregando em…5
×

Processo para a Construção de Protótipos

512 visualizações

Publicada em

Apresentação de implantação do processo de aprovação de novas funcionalidades, elaboração de casos de uso e testes de usabilidade, através do desenvolvimento de protótipos em Wireframe com a ferramenta Axure.

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Processo para a Construção de Protótipos

  1. 1. Desenvolvimento de Protótipos em Wireframe Otávio Souza Rio, 16 de Agosto de 2010
  2. 2. Agenda Objetivo Desenvolvimento Resultado Próximos Passos Desenvolvimento de Protótipos > Agenda Cenário Atual e Novo Cenário
  3. 3. Objetivo 3 Facilitar o processo de aprovação de novas funcionalidades, elaboração de casos de uso e testes de usabilidade, através do desenvolvimento de protótipos em Wireframe com a ferramenta Axure. A construção de Wireframes permite uma visualização fiel de como o cliente utilizará o software a ser desenvolvido, padronizando o desenvolvimento de protótipos do WBS. Ciclo de Vida do Produto Desenvolvimento de Protótipos > Objetivo Protótipo
  4. 4. Cenário Atual 4Desenvolvimento de Protótipos ... > Cenário Atual Protótipos com Diversos Formatos e Padrões Características: 1- Não existe padronização definida; 2- Baixa fidelidade com o sistema; 3- Diversos programas são utilizados. 4 – Não cumprimento dos processos devido a dificuldade e demanda de tempo para elaboração do protótipo. Paint + PPT Axure PPT
  5. 5. Novo Cenário 5Desenvolvimento de Protótipos > Novo Cenário Protótipo em Alta FidelidadeProtótipo em Wireframe Uso para Testes Conceituais Características: 1- Criação através de biblioteca de elementos pré-definidos; 2- Imagens em estruturas de fios e arames, sem acabamentos; 3- Teste conceitual de comportamento; 4- Representação básica e rápida da interface. 3 3 Uso para Fins Comerciais Características: 1- Alto grau de impacto e associação com o produto final; 2- Reflete a especificação do Wireframe; 3- Acabamento com riqueza de detalhes (aplicação de sombras e imagens).
  6. 6. Arquitetura da Informação 6 O WBS é estruturado através da seguinte hierarquia, utilizada na construção do Wireframe: Desenvolvimento de Protótipos ... > Arquitetura da Informação 6 – Funcionalidade Disparada pelos controles, resulta nos casos de uso. 1 1 – Sistema Conjunto de módulos. ex: eProcurement (WBS). 2 – Módulos Conjunto de telas. ex: RC’s, PC’s, SDC’s. 3 – Tela Conjunto de componentes. ex: Pesquisas e Documentos 4 – Componentes Conjunto de controles. ex: Portlet de Dados. 5 – Controles Dispara a ação de determinada funcionalidade. 6 Ações > Enviar = Envia o Documento
  7. 7. Desenvolvimento em Wireframe 7 - O desenvolvimento acontece a partir da inclusão (drag-and-drop) de componentes pré-definidos separados em três bibliotecas; - As bibliotecas contemplam todos os componentes existentes; - Quando houver necessidade de inclusão de um novo componente, a demanda deve ser feita à Área de Produtos. Exemplo drag-and-drop Desenvolvimento de Protótipos > Desenvolvimento Biblioteca Protótipo em Wireframe
  8. 8. 8 Após o desenvolvimento do Wireframe, deve-se seguir dois passos: Desenvolvimento de Protótipos ... > Desenvolvimento Desenvolvimento em Wireframe 1 – Descrever o comportamento e status da funcionalidade. 2 – Incluir o link com a especificação funcional (EF) correspondente.
  9. 9. Resultado 9 Protótipo final com as devidas especificações: Desenvolvimento de Protótipos ... > Resultado
  10. 10. Resultado 10 O Protótipo gerado possibilita a navegação entre páginas através de duas formas: Desenvolvimento de Protótipos ... > Resultado 1 - Menu de Navegação 2 - Controles

×