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

sexta-feira, 9 de maio de 2008

Protótipo refinado

Versão refinada do protótipo. Acrescentada a opção de visitar o perfil de um usuário.



----------------
Now playing: Avantasia - I Don't Believe in Your Love
via FoxyTunes

terça-feira, 29 de abril de 2008

Simulação da funcionalidade "Consultar Evento"

Funcionalidade criada a partir do rascunho feito na aula do dia 24/04 e simulada em aula no dia 29/04.


sexta-feira, 18 de abril de 2008

Projeto de Interação - telas concretas

Agora, criamos as mesmas telas apresentadas anteriormente, porém de maneira concreta, ou seja, com ícones indicando as ações, botões, mensagens, logotipo, etc. Indicando um protótipo a ser seguido, melhorado ou ainda descartado dependendo do rumo do desenvolvimento.

Tarefa 01
Tela 01

Tela inicial do aplicativo.

Tela 02

Tela de inserção dos dados do evento a ser cadastrado.

Tela 03

Tela de escolha dos amigos a serem convidados.

Tela 04

Tela de conclusão da operação.

Tarefa 02
Tela 01

Tela inicial do aplicativo.

Tela 02

Tela de seleção de evento a ser visualizado.

Tela 03

Tela de informações dos amigos sobre o evento.


----------------
Now playing: Avantasia - The Toy Master
via FoxyTunes

quinta-feira, 17 de abril de 2008

Projeto de Interação

Continuando no processo de elaboração do projeto de MC750, hoje criamos alguns modelos de telas para duas tarefas. As telas criadas são bastante estilizadas e contém somente os principais componentes sem oferecer detalhes maiores.

As tarefas em que nos concentramos são:
  • Tarefa 01: Cadastrar eventos
    • O usuário deseja cadastrar um evento (tal como um encontro no cinema, por exemplo) e convidar determinados amigos de sua lista para tal evento.
  • Tarefa 02: Consultar eventos
    • O usuário decide consultar um evento previamente cadastrado. Recebendo informações como número de usuários que concordaram com a data e hora escolhida, quais propuseram alterações, quais confirmaram presença, etc.
Tarefa 01
Tela 01

Tela inicial do aplicativo, com várias opções para uso do sistema.

Tela 02

Tela de inserção de dados do evento.

Tela 03

Tela de seleção de amigos convidados para o evento.

Tela 04

Tela de confirmação da operação.

Tarefa 02
Tela 01

Tela inicial do aplicativo, com várias opções para uso do sistema.

Tela 02

Tela de seleção de evento.

Tela 03

Tela com informações dos eventos selecionados.

Descrição do procedimento do usuário para a tarefa 01
O usuário do aplicativo Zezinho deseja cadastrar um encontro no cinema como um evento em seu celular e em seguida convidar alguns de seus amigos.

  1. Zezinho inicia o aplicativo.
  2. Zezinho escolhe a opção "Criar Evento".
  3. Ele entra com os seguintes dados:
    • Nome: "Jumper"
    • Local: "Kinoplex - D. Pedro"
    • Dia/Hora: "qui 17/04 - 19:30"
    • Obs.: "Filme Jumper. Vamos de ônibus?"
  4. Em seguida ele escolhe "OK" para cadastrar o evento.
  5. A tela então mostra uma lista com seus amigos e com opção para que Zezinho escolha quais destes ele deseja convidar.
  6. Ele escolhe então três amigos:
    • Ismael
    • Jonatas
    • Waldo
  7. Após isso ele escolhe "OK" para terminar a operação
  8. O aplicativo lhe mostra então uma tela de confirmação do cadastro e do convite.
Descrição do procedimento do usuário para a tarefa 02
Zezinho decide agora (passadas algumas horas de seu cadastro do evento) verificar o que seus amigos acharam do evento.

  1. Zezinho inicia o aplicativo.
  2. Escolhe a opção "Consultar Eventos".
  3. Na tela apresentada, Zezinho escolhe o evento que deseja saber mais informações ("Jumper") e seleciona "OK".
  4. A seguir uma tela contendo as informações sobre o que seus amigos acharam do evento é mostrada
    • Ismael: "Eu Vou. 19:00 em frente ao Mac?"
    • Waldo: "Não vai dar pra eu ir... Divirtam-se!"
    • Jonatas: "Chego no shopping 18:00. Quem chegar me liga."
  5. Zezinho seleciona "OK" e termina a operação
Com isso começamos a dar um encaminhamento de como será a interface do aplicativo e podemos determinar erros de design e melhorias em um estágio precoce do desenvolvimento.

O próximo passo agora é, com a ajuda de algum(ns) voluntário(s) determinar o quão fácil é a usabilidade do aplicativo para com isso aprimorar o design.

Notas:
  1. Nas telas, a barra de status deverá conter informações sobre eventos comentados por exemplo e dessa forma o usuário pode acessar facilmente essas funções. Por isso o link "selecionar"
  2. Na tarefa 01, a barra de progresso se refere à contagem de passos para terminar a tarefa atual.


----------------
Now playing: Helloween - If I Knew
http://foxytunes.com/artist/helloween/track/if+i+knew

terça-feira, 8 de abril de 2008

Documento de Plano de Usabilidade

O documento de plano de usabilidade (relativo aos planos sobre testes) pode ser visualizado no seguinte link: http://docs.google.com/Doc?id=dfrh6zpf_50gckbt7hm

quinta-feira, 3 de abril de 2008

Documento de Elaboração de Personagem

Documento de elaboração de personagem pode ser acessado através do link: http://docs.google.com/Doc?id=dfrh6zpf_42cgsx25hk