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ário

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

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

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

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 – FuncionalidadeDisparada pelos controles, resulta nos casos de uso.

11 – SistemaConjunto de módulos.ex: eProcurement (WBS).

2 – MódulosConjunto de telas.ex: RC’s, PC’s, SDC’s.

3 – TelaConjunto 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

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

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.

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ótipos ... > Resultado

1 - Menu de Navegação

2 - Controles