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á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.

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

O Youtube lançou uma nova versão de interface buscando oferecer melhorias na experiência do usuário e um design muito mais elegante, sem alterar drasticamente a forma de interagir já assimilada anteriormente. Aliás, melhorias com um conceito muito próximo das oferecidas recentemente pela ferramenta administrativa do WordPress.

 A nova versão chamada de Panda Cósmico, segue uma tendência atual dos produtos da Google, onde podemos perceber uma inserção maior de áreas de contraste, tornando a interface mais delineada, elegante e intuitiva.

 Para entender melhor essa mudança, vamos analisar numa série de dois posts, duas seções distintas da versão antiga e da versão nova, começando pela seção “Home”.

 Análise da Versão antiga: Home



Análise geral:
A interface desta versão do Youtube segue uma tendência mais “clean,” com uma divisão discreta das áreas de conteúdo destacando os elementos de maior importância através de seu posicionamento na ordem de leitura e de um agrupamento por proximidade.

 1-Marca & Barra de Busca:
A marca e a barra de busca são os primeiros elementos que visualizamos ao acessar o site, neste caso a busca é um elemento tão importante quanto em um e-commerce, pois permite que usuário explore o site como desejar, tornando a experiência mais dinâmica e com uma navegação mais alinhada aos seus interesses.

 2-Itens secundários & Administrativo:
As opções secundárias foram agrupadas por proximidade, sendo compostas por três seções: “Procurar” é uma seção um pouco redundante, uma vez que te leva para um página muito semelhante a “Home”, “Enviar vídeos” que na verdade é a funcionalidade que move o site, por ser um site de compartilhamento colaborativo, os usuários são responsáveis por alimentar o conteúdo que outras pessoas irão acessar. E por último, acesso ao seu canal no Youtube, onde é possível visualizar os seus vídeos, favoritos e etc…

 3-Opções de conta & Recomendações:
O que difere a “Home” da Seção “Procurar”, é que na “Home”, o youtube exibe algumas recomendações de vídeos e canais que talvez se encaixem com seu perfil cadastrado.

 4-Vídeos:
Neste ponto visualizamos conteúdo para usuários que não entraram no site com um objetivo definido eque dispõem de tempo para explorar os vídeos sugeridos.

5-Tendências & Vídeos em destaque:
Outra forma de oferecer mais conteúdo que possa ser de interesse aos mais variados targets.

Análise do Panda Cósmico: Home

Análise geral:
Assim que olhamos a versão “Panda Cósmico”, percebemos uma mudança que sutilmente introduz áreas de contrastante delineadas com um design elegante. Além disso, é perceptível a inserção de funcionalidades e seções constituídas de acordo com as necessidades dos usuários.

 1-Marca & Barra de Busca:
A marca assumiu uma característica mais sóbria, com finalidade de se integrar a interface, enquanto o campo de busca, agora mais evidente, englobou as informações secundárias.

 2-Itens secundários :
As informações secundárias estão agrupadas de forma mais coerente, semelhante inclusive a campos de URL de navegadores como Internet Explorer e Firefox. A funcionalidade “Música” foi adicionada, trazendo uma seção repleta com vídeos musicais, com certeza entendendo que um dos principais motivos de acesso se dá por conta de clipes e shows.

 3Administrativo:
A seção administrava, esta mais distante do restante dos elementos do cabeçalho, mas totalmente evidente para usuários que a procuram.

 4-Opções de conta:
As únicas alterações neste tópico foram para equilibrar a interface, adaptando seus elementos para as melhorias de design.

 5-Recomendações:
Assim como na versão anterior, é possível marcar vídeos recomendados para serem visualizados depois, uma solução para usuários que não dispõem de tanto tempo explorarem essa área.

 6-Tendências & Vídeos em destaque:
Outra forma de oferecer mais conteúdo que possa ser de interesse aos mais variados targets.

No próximo Post:
Análise das seções internas do Youtube e considerações finais.