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.

1. Desenvolvimento de
Protótipos em Wireframe
Otávio Souza
Rio, 16 de Agosto de 2010

2. Agenda
Objetivo
Desenvolvimento
Resultado
Próximos Passos
Desenvolvimento de Protótipos > Agenda
Cenário Atual e Novo Cenário

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. 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. 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. 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. 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
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. Resultado
9
Protótipo final com as devidas especificações:
Desenvolvimento de Protótipos ... > Resultado

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