O processo de desenvolvimento da interface se iniciou a partir do problema proposto pelo Windson, fazer uma interface na qual o usuário poderá fazer de forma mais fácil a validação das tags. Após analisarmos a proposta e acatarmos a ideia, foi feito a entrevista com os possíveis usuários, e a partir disso foram criados os perfis de usuários, as personas, cenário de problema , o cenário de interação, mapa de objetivos e o molic, que serviram como alicerce para sabermos o que seria necessário em nossa interface.
Por se tratar de um plug-in para o Picasa buscamos dar a interface características estruturais e cores presentes no Picasa, ou seja, seguirmos o grid presente no Picasa e a cor cinza como base da interface e sobre esse padrão iniciamos nosso trabalho de modelagem da interface final.A área de seleção de fotos se trata da primeira ação que se deve ser executada na interface para que logo após ele possa iniciar a validação de tags, e na intenção, que de imediato o usuário visualiza-se essa área optamos por coloca-la do lado esquerdo, isso porque na cultura ocidental sempre iniciamos a varredura de algo do lado esquerdo para o direito. Nesta área correspondente a seleção de fotos, ao ser feita a marcação pelo usuário em determinada foto, o sistema dará o feedback através de um sinal de correto em cor verde (essa cor por representar algo positivo ou ativado), demonstrando-o a marcação da foto. Depois de selecionadas as fotos são adicionadas a área de visualização. Na composição dessa área de visualização utilizamos a metáfora de um palco, pois queríamos passar ao usuário a ideia de algo que esta sendo apresentado a ele. Para construirmos o palco utilizamos um fundo preto, pois esta cor possui uma maior imparcialidade evintando-se com isso que a cor pudesse influenciar o usuário, e para destacar as fotos do fundo preto foi adicionamos duas lâmpadas, dispostas uma em cada canto, iluminando a área correspondente a foto, dando-a um destaque em relação ao fundo. Nesta área foi pensado em diversas formas de visualização possíveis para as fotos, em tamanho e numero, e para representar essa função foi criada uma barra baseada na ideia de zoom, onde a mediada que aproxima-se do ícone “+” temos o aumento da foto e a medida que aproximamos do ícone “-“ temos a diminuição das fotos, além da barra zoom temos botões pré-definidos ao lado desta barra que possuem visualização predefinidas, uma foto por vez(representado por um ícone de uma pequena foto), mais de uma foto com limite de três(representado pelo ícone de varias fotos pequenas) ou varias fotos(representada pelo ícone de diversas fotos miniaturizadas).Na área de validação de tags temos as tags sugeridas pelo sistema colocadas em categorias, a opção por cataloga-las em categoria se deve ao fato do numero de tags ser muito alta então ao separarmos em categorias, temos uma maior organização e facilitação na busca da tag. Para desativar ou reativar um tag, utilizamos uma metáfora com o ON\OFF, onde ao desativar a tag o botão adquiri a cor vermelha e ao ser ativado adquiri a cor azul. Para finalizar o usuário pode clicar sobre o botão validar tags, e salvar as alterações.
Em geral, nossa interface busca ser agradável se utilizando de cores claras e um certo toque de sofisticação através de pequenos detalhes utilizados como degrade e alpha em sua composição. A fácil apreensão da utilização da interface foi algo que presamos bastante e para isso diversos índices e símbolos foram utilizados, como exemplos têm: o símbolo de correto (quando marcada a foto), o “+” e o”-“ para representar o zoom, botão que ganha uma determinada tonalidade de cor de acordo com estado (ativado – azul e desativado – vermelho), alguns outros botões onde para demonstrarmos que são clicáveis utilizamos um pequeno efeito destacando-o da interface e sempre que queríamos deixa-lo desativado ele ganha uma tonalidade mais clara , o palco de fotos fazendo alusão ao palco de um teatro para sugerir a ideia de que ali estão sendo-lhe apresentada as fotos para que ele valide as tags, ou seja, todos esses detalhes de como apresentar os elementos na interface de forma que o usuário compreendesse a mensagem passada por um determinado elemento visual foi pensado para facilitar o entendimento e a usabilidade da interface. Queríamos que quando o usuário olhasse para interface de imediato ele entendesse todas as possíveis funções presentes nela.Através de testes foi possivel indentificar que haviamos conseguido realmente tornar todas funções presente na interface clara e objetiva somente através de elmentos visuais.
Nenhum comentário:
Postar um comentário