Análise de Interface: Google Imagens

Já tinha lido na semana passada que a busca de imagens do Google mudaria, mas não me atentei a isso. Hoje quando tive que buscar o mascote dos smartphones Android me deparei com uma surpresa boa: a interface havia mudado, e para melhor. Mais imersiva e elegante com toda certeza!

Análise Interface Antiga

A versão anterior trazia uma lista com grande quantidade de informação. Tínhamos um menu lateral com: outros tipos de busca e filtros, além disso, os thumbnails disputavam também com suas próprias descrições, url’s de origem e tamanhos da imagem. Enfim, uma infinidade de informação que acabavam gerando um ruído intenso em torno do principal elemento que deveria ser nosso ponto de foco. Ainda assim, era um sistema de busca bastante eficiente. Acho que me surpreendi hoje justamente porque já o considerava um bom mecanismo que, em minha opinião, ficou ainda melhor.

Abaixo uma análise mais pontual dos elementos da versão antiga:

Interface

Google Imagens versão antiga

1- A primeira área que temos contato é o input para busca. Ela já traz a palavra-chave que buscamos e permite realizar uma nova pesquisa desse exato ponto. Ao lado do botão para realizar a busca temos uma chamada para configurar um filtro de conteúdo.

2- O menu lateral, com as funcionalidades capazes de realizar uma mesma busca em outros produtos Google (Maps, Youtube, Shopping e etc…), dá inicio a uma disputa entre ele mesmo e a área de resultado da pesquisa propriamente dito.

3- Filtros são uma ferramenta agregadora, mas nem todo usuário sabe usar, gosta de usar ou tem tempo para construir um filtro com o qual possa atingir uma qualidade de resultados melhor. Ao realizar uma busca, por mais simples que seja, as opções de filtro já aparecem expostas para nós. Concordo que tenha de ser de fácil acesso, mas fácil não necessariamente quer dizer que as opções de filtro devam estar visíveis o tempo inteiro.

4- Os resultados de busca, além de terem que dividir espaço com o menu lateral, são elementos pouco imersivos. Trata-se de muita informação adicional exibida em proximidade, ocupando metade da área que o thumbnail em si ocupa. Assim como o filtro, essas informações como descrição da imagem, formato e url de origem poderiam ser exibidas somente no caso do usuário ter interesse real, ou seja, sob consulta.

02

De forma geral, somente depois de encontrar uma imagem que me interesse é que me disporei a acessá-la em seu tamanho e formato original. No modelo antigo o caminho era o seguinte: ao clicar em uma imagem era direcionado para um outra página com a imagem ampliada e com um outro link que possibilitava a visualização da mesma em seu tamanho real, seja ele qual fosse. Ou seja, ao final do processo eu era encaminhado para uma terceira tela. A sensação deixada passava a ideia de que estava saindo a todo momento do ambiente de busca, indo para um destino incerto.

Análise Interface Nova

Qual a primeira coisa que reparamos nessa interface nova? As imagens ganharam destaque, não dividem mais espaço com o menu lateral ou com as informações referentes à cada uma delas. A busca tornou as imagens seu principal elemento de interesse, deu um peso maior a elas de forma bastante imersiva, justamente por possibilitar que a pessoa concentre sua atenção nelas. Sem ter algo que interfira ou magnetize sua atenção.

Abaixo uma análise mais pontual dos elementos da versão atual:

03

1- O primeiro ponto continua praticamente igual. O input de busca permanece sendo nossa âncora, a única mudança foi o agrupamento do filtro de conteúdo às funcionalidades secundárias.

2- O menu lateral foi simplificado e inserido dentro de uma estrutura hierárquica que favorece a visualização das imagens.

3- Os filtros foram agrupados dentro de um botão ao lado do menu. Assim, tornam-se uma funcionalidade opcional, de fácil acesso para aqueles que precisam ou desejam, mas respeitando a área destinada aos resultados.

 4-Uma adição muito bem vinda, foi a sugestão de pequisas similares. Com certeza se ao buscar pela palavra café não encontrar as imagens esperadas, tentarei realizar uma nova busca com a mesma palavra-chave mas em situações diferentes, e.x: Café Torrado.

 5- As imagens distribuídas através de um grid tornaram a pesquisa mais elegante. Além disso, permitiram-na que, através de uma arquitetura da informação bem definida, se desenvolvesse de forma inteligente e intuitiva. Afinal, se você realiza uma pesquisa o mais importante de se visualizar são os resultados. Detalhe: ao passar o mouse em cima da imagens visualizamos a url de origem e suas dimensões.

04

Ao clicar em uma imagem não sou mais redirecionado, la aparece ampliada por cima da busca. Esta por sua vez, está contida em uma interface que utiliza uma área de contraste para gerar margens de segurança, garantido assim uma visualização que preza pela integridade da imagem afastando qualquer possível ruído. As informações da imagem também foram melhor organizadas. Os links para visitar site de origem; visualizar a imagem original; e detalhes da imagem tiverem suas taxonomias alteradas e de simples links se tornaram botões.

 Conclusão

 A nova interface usufrui de uma estrutura organizacional muito melhor. As funcionalidades agora tem pesos diferentes, o resultado da busca é a prioridade, o usuário deve conseguir focar no conteúdo apresentado e escolher com agilidade as imagens desejadas. Como agora existem menos redirecionamentos o usuário têm uma fadiga menor. A seleção de imagens é feita praticamente num mesmo ambiente o que reduz a possibilidade de se frustar ou abrir diversas imagens em abas diferentes. É um ótimo exemplo de como uma Arquitetura da Informação bem definida pode simplificar o trabalho do usuário final.

Pra quem tiver curiosidade em navegar nos dois:

Google Imagens (Antigo):
http://ow.ly/hkjgh

Google Imagens (Novo):
http://ow.ly/hkjiz

Anúncios

Movimento em interfaces

O ser humano esta sempre em movimento, seja através de suas ações premeditadas ou ações mecânicas, realizadas pelo nosso corpo. A verdade é que nunca estamos parados, o movimento é algo que pode prender a atenção ou nos dispersar, esta na arte, esta no esporte, esta na forma como nos comunicamos e expressamos uns com os outros.

Observando alguns sites e aplicativos mobile, percebi que ele esta extremamente presente nas interfaces, influenciando diretamente na forma como usuário irá interagir e julgar se sua experiência foi boa ou ruim. Como dito anteriormente, o movimento pode ajudar a estabelecer um foco no conteúdo, tornando-o mais imersivo, ou ainda, tornar a interação cansativa e dispersante.

Em interfaces touchscreen o movimento é muito mais perceptível e importante, porque temos um feedback visual de nossas ações em tempo real (na maioria das vezes), obviamente que as vezes esse movimento por si só não é explicativo o bastante, sendo necessário a utilização de mensagens e sons.

Em web sites voltados para desktop ou notebooks, a movimentação do mouse é livre, porém o percusso realizado na interface é mais linear, mas isto não o torna menos importante.

Exemplos Web

O Site de e-commerce do submarino é um bom exemplo de como elementos podem ser agregados ao movimento de uma forma que venha valorizar a experiência do usuário. Ao rolar o site para baixo, a barra de busca fixa que se encontra posicionada no topo do site é substituída por uma outra que acompanha esse deslocamento de uma área a outra. Como a leitura das informações neste caso se dá de cima para baixo, o seu posicionamento não prejudica ou gera uma quebra na leitura.

O Tbox na página inicial do Terra é o contrário do que vimos no exemplo anterior, apesar da ordem de leitura também se dar de cima para baixo, a barra de interação com outros usuários, foi posicionado na parte inferior da tela, o que resulta no corte de duas chamadas e obriga o leitor a sempre rolar a tela para baixo para dar continuidade a leitura.

A diferença

A diferença entre o movimento em interfaces móveis e interfaces voltadas para desktop e notebooks, é que em plataformas mobile e que sejam touchscreen envolvem a questão dos gestures, fazendo com que o usuário se sinta mais participativo e responsáveis pelo movimento. Em interfaces desktop essa sensação de participação é mais distante e as vezes mecânica e por isso, podem se tornar cansativos mais rapidamente.

Este site criado para demostrar as capacidades do HTML5 http://www.netlashproject.be/ é um exemplo de como o excesso de movimento pode ser cansativo, cada seção do site faz um movimento para uma direção diferente, nos primeiros acessos é muito legal, mas com certeza por não permitir uma maior interação do usuário, começa a se tornar uma ação repetitiva.

 Exemplo de movimento em interfaces Móveis

Um bom exemplo de como o movimento esta presente nas interfaces móveis esta neste vídeo de uma interface customizada para o Android Honeycomb.

Análise de Interface: Stfor.me

Depois de algum tempo sem postar, estamos voltando as atividades com uma análise de interface de um site muito bacana, o Stfor.me, uma abreviação de “Sound Tracks for me”. Este site é um widget do “Groove Shark” e permite que você busque e escute trilhas sonoras de filmes e seriados.

 Ao utilizar gostei bastante da interface, achei ela minimalista e confortável, mas após algumas buscas e explorando o site por mais tempo, percebi que alguns itens poderiam ser melhorados, tornando a interface muito mais intuitiva.

 Análise:

 

 1-Marca:
O posicionamento da marca esta bom, ao passar o mouse em cima ela reage alterando algumas cores.

 2-Busca:
A barra de busca esta bem posicionada e é auto explicativa, além disso ao iniciar uma busca ela traz abaixo os títulos existentes no site que se enquadrem com sua pesquisa. Como mostra a imagem abaixo:


 Porém, quando o resultado da busca é negativo, e o que foi pesquisado não se encontra no acervo, o site não fornece qualquer tipo de feedback ao usuário, isso me fez perder algum tempo esperando que algo acontecesse.

3-Contato:
O contato foi posicionado perfeitamente como um elemento secundário, distante das outras funcionalidades, mas não menos visível.

 4-Lista e Controle das trilhas:
Quando passamos o mouse em cima desta barra lateral semi escondida, ela se expande exibindo a lista das trilhas escolhidas e os controles do player. Porém só se descobre isto se passarmos o mouse em cima, não existe nenhum tipo de título ou ícone que nos guie ou indique aquela área.

 5,6-Título e lista de Thumbnails:
O título e a lista de thumbnails esta organizada e diagramada de forma simples e muito intuitiva.

Análise Busca:

Se ao acessar o site, e o usuário preferir usar diretamente a barra de busca ao invés de percorrer o acervo de títulos listados na página inicial, ele será encaminhado para uma outra página.

 1-Marca:
O título do CD é acompanhado por botões que permitem o usuário compartilhar com suas redes sociais, twitter e no facebook, achei isso muito bom, adicionou uma forma do conteúdo se tornar mais relevante para o usuário.

 2-Play:
O botão play é extremamente intuitivo, mas ao clicar nele o usuário não recebe feedback algum, se as músicas estão sendo carregadas, se deu algum problema, ou seja, se as trilhas demorarem para serem carregadas o usuário vai ficar perdido e a única forma de acompanhar este processo é passando o mouse na barra lateral do tópico 3.

 3-Lista e Controle das trilhas:
Quando passamos o mouse desta barra lateral semi escondida, ela se expande exibindo a lista das trilhas escolhidas e os controles do player. Porém só se descobre isto se passarmos o mouse em cima, não existe nenhum tipo de título ou ícone que nos guie ou indique aquela área.

 —–

Mini-glossário

-Widget: pequenos aplicativos derivados ou que fazem parte de uma aplicação maior.
-Groove Shark: Site para ouvir e criar listas de músicas
-Thumbnails: São amostras de imagens

Análise de Interface: Panda Cósmico (Youtube) – Parte II

Análise da Versão antiga: Visualização de Vídeo 

Análise geral:
A visualização de um vídeo específico quando não visualizado em tela cheia, sofre com a falta de uma distinção mais contrastante entre as áreas, resultando num agrupamento de elementos muito elevado, como por exemplo, a lista de sugestão de vídeos, que se posiciona em um nível de importância igual ou próximo ao do vídeo visualizado.

 1-Título do Vídeo & Nome do Canal:
As primeiras informações que temos são referente ao título do vídeo e nome do canal, além da possibilidade de associar-se a este usuário.

 2-Vídeo:
O vídeo é o elemento com maior dimensionamento exibido na tela, podemos optar por visualizá-lo em tela cheia, sendo necessário carregá-lo novamente. Apesar do seu tamanho diferenciado, todos os outros elementos posicionam-se ao seu redor, diminuindo assim o seu destaque.

 3-Comentários e Interação:
Abaixo do vídeo temos a possibilidade de de interagir com outras pessoas que também opinaram e expressar o que achamos do material exibido.

 4-Sugestões:
As sugestões de vídeos estão em um mesmo patamar de importância do vídeo visualizado, esse acúmulo de informação juntamente com ausência de áreas bem delineadas, acaba por sobrecarregar a interface.

Análise do Panda Cósmico: Visualização de Vídeo

Análise geral:
Ao visualizar o vídeo desejado, sentimos que estamos em uma outra versão do Youtube, o novo design aplicado esta de encher os olhos e bem consistente. As informações secundárias e terciárias agora estão organizadas de acordo com seu grau de importância, dando o espaço necessário para que o vídeo esteja de fato em destaque.

 1-Vídeo:
A organização dos elementos que cercavam o vídeo e a aplicação de uma cor de fundo escura, insere conceitos de imersão, reduzindo os ruídos encontrados na versão anterior e aumentando a garantia de que o foco do usuário esteja centrado no material exibido, sendo mais confortável assisti-lo. Na minha opinião, toda as mudanças implementadas sugiram a partir desta necessidade.

 2-Título do Vídeo & Nome do Canal:
Na versão anterior essas informações ficavam acima do vídeo, enquanto na nova, elas foram posicionadas abaixo do vídeo.

 3Comentários & Sugestão de Vídeos:
Esta seção ficou extremamente mais dinâmica. Após terminar ou durante a visualização do vídeo o usuário pode usufruir de maneira mais organica das informações secundárias e terciárias, que ficaram mais interativas e imersivas. Quando a opção “Comments” estiver marcada, o usuário irá visualizar os comentários e interação entre as pessoas:


Caso opte por “Suggested Videos”, a lista de vídeos sugeridos, antes alinhada ao lado direito dos comentários, se expande, ocupando toda parte inferior ao vídeo, sendo mais fácil analisar as sugestões oferecidas.

4-Tamanhos do vídeo:
Para tornar o conteúdo ainda mais imersivo é possível expandir o dimensionamento do vídeo e o melhor, isso pode ser feito durante sua visualização.

 5-Comentários e Interação:
Área para interagir com outros usuários, este ponto esta diretamente relacionado ao item 3.

 6-Sugestões:
Lista de vídeos relacionados ao conteúdo exibido, este ponto também esta diretamente relacionado ao item 3.

 Conclusão:
A nova interface do Youtube começa a atender as necessidades dos usuário, que com o passar do tempo se tornam mais complexas e aprofundadas nos ciclos e relações sociais. Passamos do período que apenas oferecer era suficiente, agora você deve oferecer experiências e essas experiencias deve ser desenvolvidas de forma que seja possível interagir não só com conteúdo, mas com as pessoas que vão atrás dele. O Google entende bem isso, seus produtos vem cada vez mais englobando funcionalidades e se faz necessário que as pessoas consigam entender como usá-las, e mais, que gostem de usá-las.

A grande diferença entre as versões, é que agora o usuário consegue encontrar as informações desejadas quando quizer, enquanto na anterior ele “esbarrava” nelas, mesmo quando não fosse necessário.

Na minha opinião, o Panda Cósmico é um exemplo de que cada vez mais o Design deve ser aliado a Arquitetura de informação, constituindo assim, interfaces cativantes e consistentes que nos permitam usufruir das experiências propostas, de forma orgânica e imersiva. Não é necessário abdicar de um bom design para se obter uma boa experiência do usuário, assim como não se pode obter um bom design sem utilizar de uma Arquitetura da Informação bem estruturada.