sexta-feira, 17 de junho de 2011
quinta-feira, 16 de junho de 2011
Relato trabalho final
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.
quarta-feira, 15 de junho de 2011
Cap 13
A visualidade tátil do i-digital do Banco Itaú foi algo que me despertou a atenção, pois os olhos sempre tendem a seguir a linha que circunda o “i” desde seu inicio até o final de forma a acompanhar e apalpar. A logo acaba prendendo nosso olhar, pois a forma nos agrada.
O interessante disso é que durante muito tempo a empresa utilizou essa propriedade da sua logo i-digital em suas propagandas vinculadas na televisão, onde sempre ao final do comercial uma pessoa realizava o movimento com a mão aludindo à formação dessa logo. A forma da logo é tão agradável e interessante, que o comercial de certa forma atingiu fortemente as pessoas, prova disso era que sempre em meio a rodas de amigos brincadeiras simulando a formação do “i-digital” era bastante comum.
terça-feira, 14 de junho de 2011
Cap 12
Entre as diversas significâncias presente na logo, a que mais me chamou atenção foi a correspondência que buscaram entre o nome e a logo. Por exemplo, segundo a autora o nome ViVo apresenta a letra “V” três vezes então logo também vamos ter esses “V” presente no logo entre os braços e as pernas e entre as pernas, o “i” seria o tronco do boneco, já o “O” a cabeça.
É interessante percebe a relação do nome com a composição da logo, pois é algo que não percebemos claramente ao visualizar a logo da ViVo, pensamos que o boneco da logo foi composto aleatoriamente. São esses simples detalhes que enriquece uma boa composição, apesar de passar despercebido, eles conquistam sua atenção mesmo que inconscientemente.
É interessante percebe a relação do nome com a composição da logo, pois é algo que não percebemos claramente ao visualizar a logo da ViVo, pensamos que o boneco da logo foi composto aleatoriamente. São esses simples detalhes que enriquece uma boa composição, apesar de passar despercebido, eles conquistam sua atenção mesmo que inconscientemente.
domingo, 12 de junho de 2011
FIlme - Sherlock Homes
O filme Sherlock Homes tem em seu enredo uma gama enorme de símbolos e índices. Esses elementos enriquecem a história, pois se trata de um romance policia onde o personagem principal ira desvendar os mistérios a partir de pistas (índices) deixadas nas cenas dos crimes.
Um símbolo bastante marcante e impossível passar despercebido é o corvo que sempre que a morte está chegando ele é apresentado na cena, após a anunciação da morte através desse símbolo o enredo se desenrola com a morte de alguém, ou seja, o corvo serve como o anunciador da morte. A inclusão desse elemento a meu ver é bastante interessante no filme, pois de certa forma ele desperta no espectador a curiosidade, quem ira morrer?
Outro elemento semiótico bem interessante são os índices, e em uma cena em especifico eles me chamaram bastante atenção. Homes é transportado dentro de uma carruagem de olhos vendados e através de índices como: cheiro do pão, som, um buraco, e outros elementos foi capaz de identificar todo o trajeto feito até o local.
Sem duvida esses elementos semióticos inseridos no filme o tornam bastante interessante, pois na minha opinião são eles que despertam a atenção do espectador, que apresenta-se curioso para saber como Homes ira desvendar os crimes e também busca entender o raciocínio de Homes diante detalhes encontrado por ele em um caso.
Assinar:
Comentários (Atom)
