Informedia fotografia

From LABMM1_IDE

3.3 Desenho de interacção e usabilidade

Relativamente ao desenho de interacção e usabilidade pode-se referir que os textos são apresentados por meio de tween de alpha para que o utilizador não tenha de esperar para continuar a ler determinada frase ou parágrafo pois o texto aparece todo de uma vez de modo a que este o leia da forma mais convencional (da esquerda para a direita e de cima para baixo), as cores utilizadas nos botões são cores fortes e chamativas, a ordem dos menus correspondentes a cada foto obedece a uma sequência no tempo dos acontecimentos, no botão de saída não foi utilizada metáfora visual elaborada mas apenas o símbolo mais comumente visto (X) para facilitar a identificação bem como no botão de som (ON-OFF). O botão de saída posicionou-se no canto superior direito por ser o sítio mais comum nas plataformas windows e o botão de controlo de som no rodapé ao centro por ser o sítio mais utilizado nos web sites. Teve-se a preocupação de colocar um numero razoável de objectos simples mas ao mesmo tempo lógicos e de fácil interpretação, devidamente preparados no Adobe Illustrator CS3 para se proceder à animação no Adobe Flash CS3 sem problemas. O menu das fotos encontra-se posicionado no cabeçalho por ser - tendo em conta estudos de eyetracking – em regra geral um dos primeiros sítios para onde o utilizador desloca o olhar ao visualizar qualquer tipo de informação. O logo encontra-se posicionado no cabeçalho, à esquerda, pois é o primeiro sítio que se deduz para onde o utilizador vá desviar o olhar, sendo uma estratégia de divulgação do nome empresa. O botão de entrar está presente ao centro no stage de forma a focar a atenção para esse local anteriormente à visualização dos conteúdos da aplicação. As cores usadas nos quadrados da animação inicial são as mesmas dos menus, de forma a que o utilizador compreenda que os conceitos de fotografia e espectro da luz visível estão de mãos dadas desde os primórdios. Utilizaram-se fotos como metáforas para o menu pois sendo esta aplicação sobre fotografia, pensou-se que seria o mais óbvio possível. A animação da corda obedece ao princípio da continuidade uma vez que corre o ecrã do lado esquerdo ao lado direito, dando a ideia de movimento. Os menus obedecem ao princípio da simplicidade pois são simples em grafismo, coerentes, organizados e quase simétricos. É bastante fácil ao utilizador percorrer todos os caminhos da aplicação, sendo esta também de fácil memorização e agradável a este pois não o sobrecarrega com informação. A mesma possui ajudas breves à navegação e a linguagem utilizada é simples, de fácil compreensão. Os períodos de latência foram minimizados com recurso à utilização de sons nos botões e por meio de animações.

4. Desenho técnico

Na aplicação pode-se encontrar informação textual que aborda a história da fotografia, fotografia a preto e branco, evoluções da mesma, curiosidades sobre especificidades de meios técnicos, um ecrã com alguns aspectos sobre fotojornalismo, uma galeria com fotos e vídeos úteis… O interface foi baseado num estúdio de fotografia. Para tal, utilizou-se o programa Adobe Illustrator CS3 que permitiu trabalhar com as imagens de forma a traduzirem a mensagem pretendida. Tentou-se ser o mais fiel possível à simplicidade, desde a escolha dos objectos presentes nos diferentes ecrãs aos estudos de tipografia e cores utilizados. A ideia consiste basicamente em fazer o utilizador sentir que se encontra num estúdio fotográfico, ja que se encontram presentes no menu principal os holofotes a iluminar o centro, a câmera fotográfica apontada para esse ponto de iluminação e por cima destes elemento os principais meios de navegação de toda a estrutura multimédia, que consistem nas fotos penduradas numa corda e cuja animação remete o utilizador para a metáfora de as retirar de lá. Através das fotos pode-se ter acesso às diferentes categorias de informação. A foto 1 leva o utilizador para uma pequena apresentação da aplicação, na foto 2 aborda-se de forma resumida a história da fotografia desde o começo até aos dias de hoje. Nas fotos 3, 4 e 5 encontra-se informação relativa a fotografia a preto e branco, informação sobre fotografia a cores e sobre fotografia digital, respectivamente. Na foto 6 o utilizador vai ter acesso a curiosidades sobre especificidades de meios técnicos utilizados. Na foto 7 aborda-se um pouco a temática do fotojornalismo e na foto 8 o utilizador pode visualizar fotos e vídeos que se acharam oportunos. A função essencial da aplicação é tentar dar a conhecer ao utilizador alguma informação sobre fotografia de forma interessante e interactiva. Ao navegar na aplicação a pessoa que a explora pode optar por seguir vários caminhos, todos eles diferentes uns dos outros, com informação relativa ao tema escolhido. Por exemplo, se o utilizador optar pela primeira foto, poderá ler uma breve introdução à empresa e à aplicação em contexto. Uma vez dentro do ecrã de cada foto, os restantes caminhos de navegação encontraram-se acessíveis, deixando ao utilizador o papel de escolher o seu próximo passo, não tendo de regressar a um ecrã anterior para o fazer, tal como se prevê numa estrutura arborescente hierárquica não linear. A imagem estúdio é composta por cinco paredes (duas laterais, tecto, chão, parede de fundo), dois holofotes e uma câmera fotográfica com tripé. Foi utilizado um cinzento claro (#E2E2E2), para todas as paredes. Os holofotes foram preenchidos a preto (#000000) bem como a câmera e o tripé. As fotografias foram baseadas em fotos de polaroid clássicas, a preto e branco (#000000 e #FFFFFF respectivamente). Nos botões correspondentes distribuíram-se ordenadamente as cores consoante a animação inicial dos quadrados para quando o utilizado passasse com o rato por cima. A cor da mola é um castanho escuro (#45210F) para dar a ideia de mola de madeira. A cor da corda é um castanho mais claro (#A65C35) para sugerir a ideia de gasto e frágil.

5. Produção do projecto

5.1 Estrutura e meios de interacção/navegação

O estilo de navegação/interacção utilizado foi o de manipulação e navegação em que o utilizador explora a aplicação baseada em espaços do mundo real. A navegação e interacção faz-se por meio de menus, janelas, ícones mediante determinadas acções como seleccionar, fechar,... Um exemplo no que diz respeito ao uso de janelas corresponde ao botão de sair da aplicação em que o utilizador por meio de clique no botão “sair” é enviado para um ecrã de confirmação (caixa de diálogo). No que toca aos ícones, as fotos são todas elas ícones que redireccionam o utilizador para o ecrã com a informação, também por meio de clique. Existe um ecrã específico para o menu. No botão de sair, no de entrar e em cada uma das fotos estão presentes pequenas ajudas informativas por meio de menus pop-up.

5.2 Integração e controlo de som

5.3 Animação

Na animação inicial, aplicou-se uma mask com a metáfora do loading para que o utilizador não “esbarrasse” logo com uma animação mais complexa. De seguida, através de layers do tipo guide definiu-se o trajecto dos diferentes quadrados, cada um deles representantes de uma cor primária, secundária ou neutra, aplicando motion tweens entre as posições iniciais e finais dos quadrados, criando a ideia de remoinho, que culmina na criação de um quadrado maior que serve de porta de entrada para a cena "menu". Na cena "menu" existem várias animações com recurso a tweens de alpha, de tamanho e de caminho, ao longo do stage. Quando se aplicaram os botões a cada fotografia, também se aplicou uma mudança de cor na frame over e down, assim, cada vez que o utilizador passasse o rato em cada uma das fotos, a cor mudaria, isto é, cada uma das cores dos quadrados da animação inicial iria corresponder a uma foto. Com todos os botões concluídos na cena "menu", o passo seguinte consistiu na realização de oito novas cenas. Em cada nova cena existe um movie clip que representa uma foto a ser recolhida da corda e a aumentar de tamanho gradualmente através de um motion tween. Este passo foi repetido para as restantes 7 fotos.

5.4 Soluções técnicas adoptadas para a resolução de problemas

O erro mais frequente no decorrer da concepção desta aplicação ocorreu na realização das diferentes cenas relativas aos movie clip das primeiras fotos em cada ecrã. O erro acontecia quando se convertia o botão em movie clip, isto é, o movie clip ia assumir as propriedades do botão, propriedades essas que iriam ser animadas ao fazer o movie clip, provocando um efeito não desejado. Uma vez encontrado o problema, bastou apenas apagar o conteúdo das frames over, down, e hit, deixando a keyframe up com conteúdo, sendo assim possível criar o movie clip sem que algo estranho acontecesse. Outro dos problemas que surgiram foi erro nos códigos. Primeiro escrevemos erradamente o código e, como se isso não bastasse, não estava posicionado no botão para ordenar à cabeça de leitura para começar a correr determinada cena após o clique nele próprio. O código utilizado foi

on (release) { gotoAndPlay ("fotografia_a_cores", 1); }

pegando no exemplo do ecrã relativo à fotografia a cores.

6. Conclusões

6.1 Reflexão crítica

Quando concluído o desenvolvimento de uma aplicação, torna-se necessário reflectir sobre o resultado, isto é, se foram atingidos os objectivos inicialmente pretendidos. Assim sendo, tentou-se transmitir simplicidade e clareza nos elementos e na navegação. A maior parte dos conteúdos gráficos foram vectorizados de uma forma simples e as animações também não se apresentam como algo muito complexo, bem como a informação. O objectivo desta etapa foi atingido com sucesso. O som que acompanha os botões e o ecrã inicial encontram-se bem inseridos no trabalho uma vez que transportam o utilizador para o ambiente do mundo fotográfico, mais especificamente o som associado aos botões, nos quais se pode ouvir o flash, o obturador e o beep de um botão de máquina. No ecrã inicial optou-se por uma música ambiente e minimalista de forma a não distrair o utilizador da aplicação. Na animação inicial ocorre um problema com a animação do quadrado branco e do quadrado azul pois ambos não seguem o trajecto que se aplicou através das guides, no entanto, achamos que não alterava de forma significativa a aplicação. Ao longo do projecto encontraram-se dificuldades em animar os botoes sem que as suas propriedades fossem assumidas pelo movie clip correspondente.

6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto Uma sugestão plausível seria utilizar a metáfora de uma câmera fotográfica presente no centro do stage e tentar recriar um slideshow com imagens relativas a todos os temas abordados, fazendo assim uma espécie de resumo gráfico da aplicação. Outra sugestão seria colocar um ecrã de apoio a navegação, onde iria estar presente uma espécie de arborescência explicando os caminhos lógicos do projecto. Criar um ecrã em formato de jogo, onde o utilizador poderia testar a informação que a aplicação multimédia lhe transmitiu, através de perguntas, foi outra hipótese considerada. Usar as cores nos menus de forma a serem interpretados mais facilmente pelo utilizador também era uma questão a considerar.