Facebook reactions, a nova funcionalidade do Facebook.
Artigo traduzido por Igo Araujo Santos (aqui, o texto original), de autoria de Geoff Teehan, diretor de design do Facebook.


Entro no Facebook para compartilhar todo tipo de coisa com pessoas com quem me importo – de posts celebrando a prática intensiva de yoga por 60 dias a um texto lamentando a perda de um parente. Essas mesmas pessoas que se conectam comigo pelas minhas histórias têm as suas próprias histórias para compartilhar. Às vezes, só queremos um jeito prático de dizer que amamos do fundo do coração aquilo que compartilhamos ou expressar empatia quando a vida dá uma guinada.

Em 2009, o Facebook introduziu um botão que permitia às pessoas dar um feedback aos posts dos amigos. Nós o denominamos “like” ou “curtir”, e as pessoas curtiram bastante. É simples e prático rolar seu feed de notícias e apertar a mãozinha com o polegar levantado para aprovar o que seu amigo postou. Às vezes, é difícil saber o que dizer ou talvez você não tenha muito o que dizer e só quer que a pessoas saiba que você a ouviu. É isso que o “like” faz com competência. É simples e sem atrito.

Mas não dá pra dar “like” em tudo na vida.

Já era hora de olhar além do “Like”

As pessoas afirmaram que gostariam de mais maneiras de se expressar no Facebook. Há mais ou menos um ano, Mark Zuckerberg reuniu uma equipe para começar a pensar seriamente sobre como fazer o botão “like” mais expressivo. Nós estávamos animados em começar esse processo – não é todo dia que você tem a chance de trabalhar num produto tão importante de uma empresa.

Nós sabíamos que a premissa do projeto era desafiadora. Há desafios óbvios como por exemplo fazer o novo recurso funcionar em várias plataformas, numa legião de dispositivos diferentes, novos e antigos. Então, há aspectos mais desafiadores a se trabalhar. Por exemplo, nós gastamos muito tempo refinando o “Like”, os comentários e os botões de compartilhamento de modo que sejam fáceis de usar e entender. É uma interface com a qual os usuários interagem bastante, então qualquer mudança afetaria a compreensão e a usabilidade das ações de milhões de pessoas na rede. Nós precisávamos pensar com bastante atenção, para que fosse uma mudança natural, tomando cuidado para não ser uma alteração abrupta, que irritasse a todos em nossa plataforma.

Havia outras questões que precisavam ser respondidas: o que seriam essas “reações“? Como as pessoas poderiam entendê-las globalmente? Como as pessoas a assimilariam melhor? Como as pessoas poderiam expressar facilmente uma dessas reações? Essas eram questões complexas de se resolver, principalmente para manter a mecânica fácil do “Like”.

Como todo bom design, o processo de conseguir uma solução simples é complexo.

facebook reactions

Foi muito importante ser empático, e por isso repetimos o processo várias vezes, levando muito tempo. O propósito principal de expandir as reações é ter um vocabulário de entendimento universal, com o qual todos poderiam se expressar melhor.

Nós desmembramos o problema em duas partes distintas, e começamos a trabalhar neles em paralelo:

1 – Quais são as reações que usaremos além do “Curtir”?
2 – Como as pessoas usariam as “Reações”?

Através desses dois caminhos, desenvolvemos os principais pontos que usamos como guia para nossa equipe e que nos ajudou a clarear as decisões do projeto. Ambos os pontos não indicaram diretamente a solução final, mas nos deram uma pista do que essa solução não era e deram uma direção para seguirmos.

Esses pontos, combinados com ideias baseadas em pesquisas e dados empíricos, junto com o instinto e o conhecimento da elite de talentos do ramo aqui no Facebook, foram como resolvemos o problema. A equipe que criamos incluía pesquisadores, estrategistas de conteúdo, engenheiros e minha principal equipe de design: Andy Chung, Brandon Walkin e Brian Frick.

As Reações | Facebook Reactions

Estes sãos os princípios que nos guiaram até o conjunto de reações que temos agora:

1 – As “Reações” deve ser entendidas universalmente, de modo que mais pessoas possam se conectar e comunicar.

2 – As “Reações” devem ser expressivas e usadas amplamente, permitindo dar feedback de maneiras que melhor se alinhem a como nos expressamos na vida real.

Primeiro, precisávamos considerar quantas reações diferentes incluiríamos. Essa parecia uma tarefa bem simples e direta: apenas coloque um polegar pra baixo perto do botão “Like” e pronto. Mas isso não é sequer remotamente tão simples e direto assim. As pessoas precisam de um grau maior de sofisticação e riqueza nas escolhas que disponibilizarmos para a comunicação. O binarismo “gostei/não gostei” não reflete apropriadamente como reagimos à vastidão de coisas que encontramos em nossas vidas offline.

Mesmo que não fosse binário, colocaríamos emojis, onde as pessoas teriam centenas para escolher? Provavelmente não. Entre outras razões, ter centenas de reações para escolher poderia significar que cada post tem dezenas de diferentes tipos de reação, o que poderia dificultar o uso do feed de notícias. Adicionalmente, quanto mais reações oferecemos, menos elas seriam universalmente entendidas.

Por mais de um ano, conduzimos pesquisas internacionalmente para explorar quais reações as pessoas consideravam mais atraentes. Aqui estão algumas das coisas que observamos:

Stickers mais usados

Nós procuramos nos stickers mais usados um sinal dos tipos de reações que as pessoas já usavam no Facebook.

stickers facebook reactions

Termos de pesquisas mais usados para Stickers

Embora menos comum, nós também olhamos os termos que as pessoas pesquisavam quando usavam Stickers.

terms stickers facebook reactions

Comentários curtos mais usados

Nós também analisamos uma amostra global e anônima de comentários curtos mais usados. Eles nós deram um pouco da linguagem específica que as pessoas usavam para se expressarem, e nos ajudaram a entender melhor o contexto no qual as pessoas usavam esses tipos de comentários. Aqui está um exemplo de comentários curtos que vimos nos EUA:

comentários facebook reactions

Além de analisar as amostras, fizemos questionários internacionais, conversamos com as pessoas e trabalhamos com nossa equipe de internacionalização. Daí em diante, reduzimos a amostra a uma lista mais refinada:

facebook reactions
Curtir, Amei, Haha, Uau, Triste, Raiva, Confuso e Eba

Você pode ter reparado que há duas reações da lista que não estão entre as reações liberadas: “confuso” e “eba”. Nos testes, “confuso” foi usado tão raramente que não fazia sentido incluí-lo, dada a carga cognitiva de adicionar o “reações”. Para a maior parte das pessoas, cada reação serve a um único propósito, e com o “confuso” não foi assim. “Eba” foi difícil de justificar também. Não era fácil de compreendê-lo e internacionalizá-lo, e se misturava muitas vezes com o “Haha” e mesmo com o “Curtir”. O sistema é melhor como um todo sem esses dois por enquanto.

As ilustrações

Outro componente crucial era a aparência das reações. Nós queríamos criar ilustrações que fossem únicas do Facebook, mas também queríamos que elas existissem graciosamente no ecossistema e fossem entendidas universalmente. Aqui estão as direções iniciais:

facebook reactionsNossas primeiras ilustrações não estavam comunicando o que deveriam quando eram vistas num tamanho relativamente pequeno. Elas serviram para marcar as posições enquanto construíamos o sistema, mas já era hora de começarmos a variá-las.

Os desafios aqui incluíam descobrir qual estilo seria apropriado adotar no conjunto e ainda manter claramente a expressão de cada reação individual. A sobreposição das expressões também foi algo em que esbarramos. O menor traço no design de uma reação a deixava muito parecida com outra reação diferente, ou acabava nem expressando a reação desejada. “Uau” parecia com o “Eba” e “Eba” parecia com o “Haha” apenas mudando a curva do sorriso ou um detalhe nos olhos.

facebook reactions

Também exploramos um sistema com e sem rótulos. Rotulando as reações, ajudamos a definir o que as reações representavam, o que por sua vez ajudava a internacionalizá-las. Elas precisavam ser entendidas por todos, de modo que, se um amigo no Japão reagir ao seu post, vocês devem concordar mutuamente sobre o que aquela reação significa. Para entender esse mecanismo, trabalhamos de perto com equipes de internacionalização e profissionais de comunicação não verbal. Fizemos várias pesquisas e testes das primeiras versões em diferentes países.

As primeira versões eram estáticas e sabíamos que a animação seria a chave para torná-las mais expressivas, de forma que trabalhamos para dar vida às reações estáticas, enquanto designers e engenheiros descobriam como deixá-las memoráveis. Designers usaram pseudo-códigos para animar cada reação através de programação. O trabalho deles poderia, então, ir para os engenheiros, a fim de que replicassem a respectiva animação com alta precisão no produto final, com o objetivo de que se movessem de forma fluída e natural.

facebook reactions

Começamos a incorporar as animações e achamos que tantas simultaneamente poderiam ser demais para quem as olhasse. Então, a principio, tínhamos apenas uma reação animada por vez (aquela sobre a qual está o cursor de seu mouse), enquanto as outras permaneciam estáticas. Não queríamos que funcionasse assim, mas percebemos, durante uma reunião com o chefe (onde você encontra com Mark para mostrar o progresso do projeto), que se você passar o dedo sobre todas as reações de uma vez, elas ficariam animadas todas juntas. O próprio Mark sugeriu que animássemos todas as reações quando a bandeja aparecesse. Por coincidência, gostávamos bem mais desse jeito. Obrigado, Zuck.

 

O sistema

Sem um contexto pré-determinado de princípios sob o qual concordamos em trabalhar, poderíamos rapidamente nos ver construindo um sistema complicado que não evoluiria tão bem quanto precisávamos. Aqui estão alguns dos princípios que nos guiaram:

1 – As “Reações” deveriam ser uma extensão do “Curtir”. “Curtir”, “Comentar” e “Compartilhar” são onipresentes no Facebook, e adicionar uma quarta opção a essa altura tornaria tudo mais complexo.

2 – As “Reações” não deveriam tornar complexos os comportamentos já existentes. Era importante introduzir a funcionalidade responsavelmente, de modo que não arruinasse a forma como bilhões de pessoas já usavam o produto. Em outras palavras, nós queríamos manter a simplicidade do “Curtir”: quando você aperta o botão, você “curtiu” o post.

Deixando uma “Reação”

Quando começamos a explorar o sistema de botões, nós não sabíamos quais ou quantas reações existiriam. Algumas pesquisas iniciais indicavam que seriam entre cinco e dez. Num test drive, começamos construindo um sistema de botões que pudesse abrigar quinze reações diferentes, desde que fosse fácil exibi-las e recolhê-las.

O propósito desse protótipo era entender maneiras que permitissem várias reações diferentes no sistema. Tenha em mente que não tínhamos ideia do que as “Reações” atuais seriam, então os exemplos nesse vídeo são puramente ficcionais.

Conceitos e tentativas iniciais como essas são puramente educacionais – elas nos mostram o que funciona, mas, mais importante, o que não funciona. Ela revela buracos, falhas, o inesperado e muito mais.

Achamos que a abordagem acima fez um bom trabalho ao permitir um largo espectro de feedback rapidamente. Porém, revelou alguns problemas. Em outras palavras, estava nos ensinando o que a solução precisava abranger:

– A interface do usuário poderia ser removida do topo da tela;

– Apesar da área grande para deslizar o menu, as pessoas frequentemente pressionariam em cima dos rótulos;

– Quebra de linha nos rótulos parecia trabalhoso e tornaria a internacionalização mais difícil;

– A arte em contornos das ilustrações funcionava bem em grande escala, mas provou-se difícil de ajustar em escalas menores – algo que precisávamos fazer ao pensar em como as pessoas usam o feed de notícias;

– Algumas pessoas acionariam a bandeja e, então, tirariam o dedo da tela para pressionar a reação, e isso faria a bandeja se recolher; e

– Um número muito grande de reações seria redundante no conjunto.

Continuamos a fazer combinações. O primeiro protótipo incluía uma única ilustração que mudaria de acordo com o posição do dedo sobre o rótulo da expressão. Isso faria você percorrer cada reação antes de decidir, ao invés de simplesmente ver todas as opções de uma vez. Era desajeitado demais e gastava muito tempo.

Um protótipo mostrando apenas uma reação por momento.

Eventualmente, largamos o conceito de uma única ilustração em favor do modelo de bandeja. Essa abordagem permitia às pessoas verem rapidamente todas reações de uma vez. Expressões faciais no lugar de rótulos criavam uma interface mais amigável e reconhecível internacionalmente. Também fomos capazes de resolver outros problemas dos conceitos iniciais. Por exemplo, esse novo sistema se ajustava à sua posição na tela, então não precisava ficar posicionado fora de vista. Removemos os rótulos, assim seu dedo não ficava por cima deles. Por último, uma vez que a bandeja fosse acionada, as pessoas poderiam deslizar o dedo pela tela ou pressionar para escolher uma reação.

Usando as “Reações”

Num mundo em que só tínhamos que lidar com o “Curtir“, como você o usa é bem simples e direto. Nós só dizíamos quando curtiram mostrando “17 curtidas”. Era uma linha de texto, bem acima dos botões “curtir”, “comentar” e “compartilhar”. Essa linha de texto é chamada internamente de Bling String. Essa linha precisaria ser inteiramente repensada porque mostrar “10 reações” não contemplaria a variedade de sentimentos que a funcionalidade foi feita para oferecer. As pessoas acharam esse post engraçado, triste ou surpreendente? A solução precisava especificar cada reação individualmente registrada. Nós também queríamos continuar a mostrar o total de feedback, como fazíamos com o total de “curtidas”.

Nossas primeira abordagem era óbvia. Nós faríamos a linha de texto para mostrar cada reação usada e incluiríamos um contador para quantas vezes foram usadas. Funcionava bem nos posts que tinham só alguns tipos de reações dadas, mas desmoronava quando havia muito engajamento – especialmente conteúdos públicos. Também era difícil entender o total de feedback. O antigo contador era simples porque só mostrava uma informação. Como resultado, era fácil ver e entender, ou de ignorar e deslizar o feed de notícias.

 

facebook reactions
Nossa abordagem inicial se tornou exagerada quando os posts tinham muitas reações diferentes.
facebook reactions
Algumas das muitas explorações que não funcionaram.
facebook reactions
O design final do contador.

A solução final foi agregar as três reações mais utilizadas com um contador total. Dessa maneira, você poderia entender como a maioria das pessoas reagiram ao post e também entender o total de feedback num post. Além disso, também mostrávamos quais de seus amigos próximos reagiram ao post, algo que faltava à versão mobile até a chegada do “Reações”. Você pode ver toda a variedade de reações deixadas pelas pessoas pressionando o contador de um post individual.

O Produto Final

Depois de quase um ano de trabalho e meses de testes, nós estávamos muito animados para lançar o “Facebook Reactions“, ou “Reações”, e aprender mais sobre como ele seria usado ao redor do mundo. Nós esperávamos que todos gostassem do “Reações” agora que estávamos disponibilizando de forma mais abrangente.

Como acontece com todo software, nada está 100% pronto ou finalizado, e o “Reações” não é uma exceção. Nós continuaremos a aprender, repetir e aperfeiçoá-lo, mas queríamos que esse fosse um passo em direção a uma experiência mais empática no Facebook.

facebook reactions
Últimas reações.


facebook reactions


Seja patrono do AZ para mais artigos como este.
CLIQUE AQUI e escolha sua recompensa.


Newsletter AZ | sabedoria budista


Você pode querer ler também:

Pontos coloridos provam que as redes sociais estão destruindo a internet
Posso ser processado por um ‘simples comentário’ na internet?

escrito por:

Geoff Teehan

Diretor de Design de Produtos do Facebook. Co-fundador da Teehan + Lax, em 2002. Trabalhos anteriores: Medium, Readability, Yahoo, Prismatic, Flipboard, YouTube, Kifi, Obvious, iOS PSDs.