quinta-feira, 19 de junho de 2008

Desenvolvimento do aplicativo "Galerômetro"

Com o desenvolvimento do aplicativo a pleno vapor (e o prazo de entrega se esgotando), tem-se um bom momento para uma detalhada descrição de todo o processo de desenvolvimento.

Passo 01: Determinar o tipo de aplicativo

Esse passo esteve intimamente relacionado à criação do grupo, já que cada membro tinha uma idéia de algo a fazer, mas houve um consenso do grupo sobre a proposta do Lucas, sobre um aplicativo rlacionado às redes sociais, que possuem forte apelo atualmente.

Após isso, o próximo passo foi desenvolver o documento de visão compartilhada

Passo 02: Documento de Visão Compartilhada

A criação deste documento foi executada em sala de aula, mas posteriormente mudanças foram feitas por todos os membros [1].

Neste documento, as principais características do aplicativo começam a ser esboçadas e as principais tarefas a serem implementadas começam a ser esboçadas.

As principais premissas lançadas neste documento são, ainda hoje, válidas. Pode-se destacar do documento:

Tarefas: cadastrar amigos, eventos, votar.

Que são as principais tarefas que estão sendo implementadas atualmente.

Passo 03: Documento de Elaboração de Personagem

Na criação deste documento apresentamos o usuário Zezinho e sua necessidade de um aplicativo tal qual o que nos propomos a implementar para otimizar sua atividade social (e talvez até conquistar a menininha bonitinha). Com este documento conseguimos justificar a necessidade de um aplicativo nesses moldes e perceber quais as reais necessidades de um usuário dele.

Passo 04: Documento de Plano de Usabilidade

O próximo passo, foi a construção deste documento. Nele, traçamos [1] um planejamento de um etapa ideal de testes, contando inclusive com um celular como equipamento. No entanto, não foi possível executar os testes nesse nível desejado (até mesmo porque celulares equipados com Android só existem em protótipos).

Mas o documento foi uma boa ferramenta para guiar os testes mais tarde executados, de tal forma que se tivesse um aproveitamento próximo do ideal alejado no documento de plano de usabilidade.

Passo 05: Plano de Interação

Nesse momento criamos os primeiros modelos de telas. Neles somente um esquema é mostrado e não os elementos formadores da interface. Assim, ao invés de um botão, tem-se um quadro indicativo de uma ação.

Com isso, começamos a tomar as decisões sobre a interface do projeto, e a esboçar a aparência final do aplicativo.

Lista das telas criadas:

  1. http://img139.imageshack.us/img139/2127/task01tela01mi2.jpg
  2. http://img139.imageshack.us/img139/6960/task01tela02xp3.jpg
  3. http://img139.imageshack.us/img139/8782/task01tela03bw8.jpg
  4. http://img139.imageshack.us/img139/9720/task01tela04gr7.jpg
  5. http://img139.imageshack.us/img139/2964/task02tela01ht4.jpg
  6. http://img139.imageshack.us/img139/7510/task02tela02vi4.jpg
  7. http://img139.imageshack.us/img139/3671/task02tela03sm7.jpg

Passo 06: Projeto de Interação - Telas Concretas

Nesse ponto, as telas começaram a ser esboçadas tal qual elas deveriam ser implementadas. Com botões nos lugares corretos, uma idéia do layout empregado, enfim, a definição final da aparência do aplicativo.

Como ainda se trata de um protótipo, os esboços foram feitos em papel e à mão livre, mas o conteúdo principal já podia ser depreendido dos esboços.

Lista das telas criadas:
  1. http://img517.imageshack.us/img517/2346/contask01tela01qt0.jpg
  2. http://img517.imageshack.us/img517/1559/contask01tela02gt2.jpg
  3. http://img517.imageshack.us/img517/746/contask01tela03pt7.gif
  4. http://img517.imageshack.us/img517/3575/contask01tela04xj4.jpg
  5. http://img517.imageshack.us/img517/8467/contask02tela01zc5.jpg
  6. http://img517.imageshack.us/img517/7637/contask02tela02pl7.jpg
  7. http://img517.imageshack.us/img517/1318/contask02tela03jn0.jpg
Passo 07: Prototipagem em papel

O passo seguinte foi remodelar as telas criadas anteriormente para que se pudesse ter uma maior flexibilidade nos protótipos. Assim, botões avulsos foram criados (para que se pudesse retirá-los para simular uma troca de tela), menus drop-down foram feitos, assim como telas de resultados.

Passo 08: Relatório de Inspeção de Usabilidade

Nesse ponto, passamos nosso protótipo em papel, o cenário de interação para a história de prática futura e o documento de descrição de personagem a avaliadores que julgaram nosso projeto de acordo com alguns fatores, tais como:
  • prevenção contra erros
  • flexibilidade
  • estética
  • etc
Com isso, tivemos condições de melhorar o protótipo para o próximo passo.

Passo 09: Registro da Prototipagem em papel

Para registrar o protótipo criado, resolvemos tirar fotografias de uma sessão de simulação das funcionalidades e posteriormente editar um vídeo com essa simulação.

O resultado pode ser visto aqui e foi muito proveitoso pois deu uma melhor visualização da usabilidade do protótipo, além de ter sido divertido a criação do vídeo. [2]

Passo 10: Testes de usabilidade

Então, de posse do protótipo, passamos para os testes. Estes foram feitos com voluntários (membros de outros grupos) que executaram operações parecidas com aquela mostrada no vídeo (antes da publicação deste, para não interferir no teste).

Ao fim de cada teste, tomamos nota das principais dificuldades e conselhos. Dessa forma, tivemos um grande acúmulo de informações valiosas sobre a usabilidade do aplicativo.

Passo 11: Registro da Prototipagem em Papel Refinada

Após refinar o protótipo de acordo com as sugestões recebidas nas etapas de testes, fizemos um novo vídeo que mostrava o uso do aplicativo.

Passo 12: Início da implementação

Finalmente, já tínhamos condições suficientes de dar início à implementação, mas para isso, cada membro do grupo passou algum tempo se familiarizando com o ambiente Android. Em geral, todos iniciaram com o (tradicional) "Hello World" e depois para o (padrão) Notepad.

Dessa forma, cada um teve suas próprias experiências com o ambiente de desenvolvimento antes de efetivamente dar início à implementação

Passo 13: Definição das imagens

Ao mesmo tempo que cada um executava os tutoriais, foi sendo desenvolvidas também as imagens utilizadas no programa, tais como ícones, backgrounds, etc. Embora não definitivas, as imagens criadas poderiam ser chamadas de oficiais, e não mais simples indicadores como anteriormente.

Passo 14: Desenvolvimento

O estágio atual de desenvolvimento. Escolhemos nesse momento implementar somente a interface e as consultas ao banco de dados, assim os dados serão inseridos "manualmente" no banco e tratados como se tivessem sido obtidos por meio de uma conexão a uma rede social. Com isso, teremos a interface completamente terminada a tempo e deixamos para um momento posterior a conexão à rede.

Atualmente, estamos trabalhando em uma nova interface (background e ícones), assim como no término de algumas tarefas.

Acredito que esse breve histórico possa ter atingido seu objetivo de esclarecer os rumos tomados durante o desenvolvimento do aplicativo e apontar as decisões principais tomadas no projeto.

Notas:
^ [1] Através do uso do Google Docs.

^ [2] A edição do vídeo se deu através do software Microsoft Windows Movie Maker.

Now playing: Avantasia - Sign Of The Cross
posted with FoxyTunes