domingo, 22 de junho de 2008

Cores da interface

Uma coisa interessante ocorreu com o decorrer em paralelo do desenvolvimento do projeto e das aulas de interface.

Inicialmente, o menu principal do projeto do bHappy estava definido para ser assim, como segue a imagem:


Aqui seguem 4 telas de menu. A primeira (esquerda, acima) é o menu principal, onde o usuário tem acesso pela primeira vez quando loga no sistema, antes de fazer o login. As outras, o menu interno, acessado após o usuário fazer o login no sistema. As duas diferem em pouco, mas gostaria que fosse frizado o botão que está presente no menu inicial pré-login mas ausente no interno: o botão de login! (por motivos óbvios).

Toda a interface estava definida (menos o botão de amigos, com um homem e uma mulher junto) para ser feita em azul, verde e laranja. Houve que, após a aula de acessibilidade e daltonismo, decidimos passar os filtros para os três tipos de daltonismo suportados pela página (afinal, NADA impede ou atrapalha a presença de um daltonico em uma mesa de um HappyHour, o que os torna parte integrante do público alvo de nosso sistema). O resultado foi interessante:


Vamos ver um a um. No primeiro, o 'espelho' da fechadura do botão login quase desapareceu, uma vez que o 'laranja se transformou em dourado' e o bonequinho verde no botão 'perfil', quem diria, também ficou dourado e quase sumiu! No segundo, foi a vez do telhado do botão estabelecimento se confundir com o laranja do botão selecionado, e observou-se uma mescla entre o azul e o verda, não observada antes em nenhum outro caso de daltonismo. No terceiro, mais uma vez, o botão de 'perfil' teve seu boneco verde confundido com o fundo laranja de botão com foco, ocorrendo o mesmo com o telhado da casa.

Observando ainda: as cores preto e branco praticamente mantiveram sua tonalidade. O contraste entre as duas parece 'inabalável', independente do tipo de daltonismo. O azul foi a cor que mais se manteve estável nos testes.

Com estes dados, decidimos que um conjunto de cores simples, mas que apresentava boa acessibilidade, seria azul, preto, branco e o laranja do botão em foco. O menu reformulado segue abaixo:

...as visões daltônicas o enxergam como...


O problema da confusão do verde com o amarelo e laranja foi resolvido, mas ainda não tratamos o caso da cor vermelha, presente no telhado da casa.

Independente da cor vermelha, aprendemos uma árdua lição: fazer primeiro e pensar em acessibilidade depois é simplesmente desperdício de mão de obra. Qualquer coisa pode sair errado se não aplicarmos um planejamento mais refinado e que não esteja presente no cotidiano nosso que não temos necessidades especiais (não sei se este termo pareceu ofencivo ou, de alguma forma, depreciativo, mas não sou habil com palavras e não imaginei expressão melhor). Qualquer coisa mesmo: quem imaginaria que o verder se confundiria com... LARANJA!?

sexta-feira, 6 de junho de 2008

Status atual

Bom, gostaria apenas de formalizar que 40% da interface do Android já esta concluída para a apresentação. Mais para frente, postaremos algumas imagens do mesmo.

segunda-feira, 26 de maio de 2008

Projeto de Interfaces - Prototipagem em Papel

Partindo do planejamento do diagrama de navegação
iniciamos a fase de projeto do design da interface de interação com o
usuário.
Em sala de aula, iniciamos a fase de prototipagem rápida em papel
do design das telas do aplicativo.
No link abaixo, encotram-se exemplos dos protótipos elaborados, juntamente com
especificações e diretrizes que foram seguidas para elaboraçao do design e
posicinamento dos itens de interface.


http://www.students.ic.unicamp.br/~ra060639/files/telas_rascunho.pdf

quinta-feira, 22 de maio de 2008

Mapa de Navegação


Buscando apresentar uma relação entre as funcionalidades do
sistema foi elaborado um diagrama contendo o mapa de
navegação do sistema.
Esse expõe as ligações as ligações ou caminhos de acesso,
que poderão ser tomados pelos usuários para acessar 
determinadas ferramentas que o aplicativo oferece.


Durante a elaboração desse mapa, buscamos avaliar quais características
do sistema seriam importantes, afim merecerem destaque. 
Para realizar essa tarefa, primeiramente dividimos as funcionalidades
do sistema em grupos vinculados a atividade que que seriam oferecidas
aos usuário.

Relacionadas ao usuário
- Login
- Cadastro
- Perfil

Relacionadas ao amigos
- Listagem de amigos
- Inclusão de amigos
- Importar contatos do celular

Relacionadas aos estabelecimentos
- Consulta/Listagem de estabelecimentos
- Visualização dos dados de localização/contato
- Visualização de informação sobre exibição/cardápio
- Marcar interesse em ir ao estabelecimento
- Convidar amigos para ir ao estabelecimento

A partir disso, podemos ramificar as ligações:
-> partindo do tela inicial buscamos inserir as tarefas mais comuns
para os usuário:
 - Primeiramete, dar um caminho ágil para realizar o login do usuário
e entrar no sistema.
 - Também previmos que usuário poderiam querer utilizar certas
funcionalidades do sistema antes de se registrar. Como a principal
atividade que os clientes poderiam realizar seria procurar
estabelecimentos com as características que lhe interessassem para
poderem marcar encontros, obiviamente deixar livre a consulta
sem ter que se cadastrar é um atrativo para os usuários validarem
as funcionalidades do sistema, podendo então se cadastrar ao 
expressar seu interesse.

   Após logar-se o usuário teria acesso a tarefas mais comuns de
seu atividade ou de administração do sistema.
 - Acesso as configurações
 - Perfil do usuário
 - Listagem de amigos
 - Consulta de estabelecimentos
 - Agenda (com encontros marcados)

Após entrar em uma dessas subtarefas, estariam disponíveis
sub atividades relacionadas aos temas mencionados anteriomente.


sexta-feira, 16 de maio de 2008

Reestruturação do Banco de Dados

Após longo tempo sem atualizar o blog, finalmente 

retornamos a atualizar.

Pedimos desculpa pela demora, mas é que estavamos a espera

atualização do modelo de entidades e relacionamento de banco

de dados para o atual escopo do projeto. Não atualizamos o

blog anteriormente pois isso acarretaria em inconsistencias  

dos documentos.

Nesse endereço estamos postando o modelo referido 

para a base de dados do sistema:

     http://www.students.ic.unicamp.br/~ra060639/bHappyDB.png

Nesse modelo apresentamos as alterações na estrutura de como

seriam relacionados o registro de interesse de um cliente por um

estabelecimento. Ao invés de o dono do estabelecimento ter que 

ficar criando vários eventos, esse agora só atualizará o cardápio

e atrações do estabelecimento. Dessa forma o cliente declarara

somente o dia que tem interesse em ir ao estabelecimento.

terça-feira, 13 de maio de 2008

Revisão das Metas e testes

Os dois foram revisados é já se encontram atualizados no seguinte endereço: http://www.students.ic.unicamp.br/~ra058928/mc750/

Por enquanto é isso.

terça-feira, 6 de maio de 2008

Documentos de Teste

Há muito, muito tempo, em uma galáxia muito, muito distante...

...foi pedido aos alunos que desenvolvessem a documentação referente ao plano de testes a ser realizado nas interfaces. O plano de testes consiste em dois documentos, um contendo as metas a serem atingidas e outro descrevendo como os testes seriam realizados.
Os documentos haviam sido feitos, mas faltava o 'acabamento final': revisão e definição de alguns pontos questináveis entre os próprios membros do grupo. Neste meio tempo, surgiram provas, trabalhos e, claro, feriados prolongados.
E eis que só hoje, em um momento de aparente calmaria, concluiu-se e uploadou-se os devidos documentos.

São os documentos 03 e 04 do diretório:
http://www.students.ic.unicamp.br/~ra058928/mc750/