Eis uma prototipagem da nossa aplicação (com hiperligações entre páginas) onde utilizamos botões e demonstramos mensagens de erro/disposição na vertical e horizontal/palete de cores:

 

    

 

 

Em seguida irei proceder á reformulação das estruturas em grelha (já que sofreram algumas alterações de modo a preservar a estética da aplicação, mesmo alterando de vertical para horizontal) e ao post dos icons novos e/ou alterados.

De notar que a área de comunidade está ainda ausente das imagens apresentadas.

Na reunião de hoje mostrámos os fluxogramas que modificámos desde a aula de ontem para receber feedback adicional e também o mapa de navegação. Neste momento temos apenas o mapa de navegação front-office e vamos agora desenvolver o mapa de navegação back-office.

 

Quanto à parte gráfica, os orientadores pediram mais algumas especificações além do que já desenvolvemos. É necessário utilizar mais ícones e menos texto, o que irá facilitar a leitura uma vez que o ecrã dos dispositivos móveis tem formato bastante reduzido, podemos assim aproveitar melhor o espaço. Vamos também fazer alguns exemplos, para a simulação de ecrãs com conteúdos, de ecrãs com janelas de diálogo, mensagens de erro e splash screens.

 

Entretanto iremos colocar no blog exemplos destes ecrãs simulados.

 

 Fluxograma de Registo de utilizadores - acessível para utilizadores não registados na base de dados 

 

 

 

Fluxograma de Login de utilizadores - acessível para os vários perfis de utilizador (utilzador registado, moderador, administrador)

 

 

 

 Fluxograma Adicionar informação aos POIs - acessível apenas para administradores

 

 

 

Fluxograma de inserção de imagens - acessível para utilizadores registados e administradores

exemplos:

- a inserção de fotos de POIs por parte dos administradores; 

- a inserção de foto de perfil por parte de utilizadores registados;

 

 

 

 

Fluxograma de Leitura de código QR dos POI - acessível para utilizadores não registados, utilizadores registados e administradores)

exemplo:

- Com a implementação de novos códigos QR os administradores necessitam de testar a leitura dos mesmos. 

 

 

 

 

Fluxograma de inserção de novo comentário - acessível a utilizadores registados e moderadores

 

 

 

 

Fluxograma de moderação de comentários - moderação realizada apenas pelos moderadores

 

 

 

 

Fluxograma de Top POIs - acessível para os vários perfis de utilizador (utilzador registado, moderador, administrador)

 

 

 

Fluxograma Votacão de POIs - acessível a utilizadores registados

 

 

Fluxograma Adicionar texto - acessível para os vários perfis de utilizador (utilzador registado, moderador, administrador)

 

 

 

 

 

Na aula apresentámos os fluxogramas que já pusemos no blog e os professores sugeriram alguns melhoramentos e desenvolvimentos possíveis.

 

Quanto ao mapa de navegação é necessário acrescentar alguns detalhes assim como na arquitectura do sistema.

 

Na parte gráfica apresentámos já alguns estudos e estamos neste momento a desenvolver o manual de identidade do projecto.

 

A escolha das cores a utilizar nos backgrounds do cabeçalho e rodapé varia entre preto (#000000) e cinzento (#4e4e4e) sendo que, juntas, dão origem a um degradé ligeiro.

 

Quanto a textos e links, pretendemos mante-los o mais legíveis e acessíveis possível. Como tal, e visto que os fundos da aplicação serão escuros, utilizaremos o branco (#FFFFFF) e o cinza claro (#999999).

Para a escolha das cores a utilizar na aplicação, tivemos em conta, mais uma vez, as escolhas cromáticas MESH-T. Como tal, mantivémos o verde #99CC33 típico não só para os títulos como para os activos (hovers) das hiperligações.

 

Para os avisos de insucesso ou de erro, a utilização da cor vermelha é bastante usual e, devido a isso mesmo, imediatamente interpretada por qualquer utilizador da forma que pretendemos. Como tal, iremos manter o vermelho vivo para as mensagens de aviso e alertas de insucesso (como um login inválido ou uma falha no registo).

Para outros elementos que mereçam destaque mas que não se tratem de hiperligações, utilizaremos o amarelo por dois motivos: é uma cor que se funde e contrasta ao mesmo tempo com a nossa cor de identidade: o verde (#99CC33); é uma cor que é geralmente interpretada como "alerta", sendo que atrai bastante mais atenção que o próprio branco.

 

Para os fundos da aplicação utilizaremos cores bastante escuras, de modo a contrastar não só com o verde dos logos e títulos como também com as cores claras dos textos (#111111 e #333333).

 

 

  Visto que vamos adoptar a marca "mesh-t" como marca mãe e desenvolver o "Mobile Tourist Guide" como um produto da mesma, optámos por manter a coerência gráfica e utilizar o mesmo tipo de fonts já utilizada pela Mesh-t. Assim, optámos por Helvetica para títulos e Arial para as restantes áreas da aplicação:

Os fluxogramas ainda não estão finalizados.

Convém mencionar que o grupo apresenta algumas "reticências" na concretização dos fluxogramas das funções principais da aplicação, pelo que nos próximos dias vamos procurar dissipar as dúvidas com os professores.

 

Fluxograma de Registo de Utilizador:

 

Fluxograma de Login dos utilizadores:

 

 

Fluxograma de Leitura de códigos QR dos POI:

 

 

 

Fluxograma de inserção de novos  comentários:

 

 

Fluxograma de Utilizador do tipo Moderador (gere o conteúdo inserido pelos utilizadores)

 

 

 Primeira versão dos icons de navegação (hdpi), 60x60 :

 

Página Anterior	Página Inicial	Página de Ajuda	Página Seguinte

 

Versão dos icons de navegação (mdpi), 40x40:

 

Página Anterior	Página Inicial	Página de Ajuda	Página Seguinte

 

Icons de Loading (carregamento de páginas):

 

Gerados através do Ajaxload (URL: http://www.ajaxload.info/ )

 

Actualizámos o gantt nesta parte da especificação gráfica e técnica relativamente à duração de cada tarefa e à divisão das tarefas pelos elementos do grupo devido à necessidade de divisão de trabalho que nos módulos anteriores não foi tão acentuada. Quando entrarmos no módulo seguinte haverá uma nova actualização do gantt para especificar as tarefas de prototipagem.

 

 

Gantt V2 - MTG_gantt_V2.pod

Screen shot da parte alterada em questão

 

 

 

 

 

 

. Mobile Tourist Guide / se...

. Back Office

. Reunião de grupo – 13.06....

. Módulo 6 - testes

. Módulo 6 – Versão beta

. Testes de usabilidade

. versão beta e testes – au...

. Actualizações – testes

. Ponto de situação – OT 01...

. Versão beta e testes – au...

. Junho 2011

. Maio 2011

. Abril 2011

. Março 2011

. Fevereiro 2011

. todas as tags

. participe neste blog