reactions facebook

Como o Facebook decidiu ir além do curtir

Em Internet, Tempo de Saber por Geoff TeehanComentário

Face­book reac­ti­ons, a nova fun­ci­o­na­li­dade do Face­book.
Artigo tra­du­zido por Igo Araujo San­tos (aqui, o texto ori­gi­nal), de auto­ria de Geoff Teehan, dire­tor de design do Face­book.


Entro no Face­book para com­par­ti­lhar todo tipo de coisa com pes­soas com quem me importo – de posts cele­brando a prá­tica inten­siva de yoga por 60 dias a um texto lamen­tando a perda de um parente. Essas mes­mas pes­soas que se conec­tam comigo pelas minhas his­tó­rias têm as suas pró­prias his­tó­rias para com­par­ti­lhar. Às vezes, só que­re­mos um jeito prá­tico de dizer que ama­mos do fundo do cora­ção aquilo que com­par­ti­lha­mos ou expres­sar empa­tia quando a vida dá uma gui­nada.

Em 2009, o Face­book intro­du­ziu um botão que per­mi­tia às pes­soas dar um feed­back aos posts dos ami­gos. Nós o deno­mi­na­mos “like” ou “cur­tir”, e as pes­soas cur­ti­ram bas­tante. É sim­ples e prá­tico rolar seu feed de notí­cias e aper­tar a mão­zi­nha com o pole­gar levan­tado para apro­var o que seu amigo pos­tou. Às vezes, é difí­cil saber o que dizer ou tal­vez você não tenha muito o que dizer e só quer que a pes­soas saiba que você a ouviu. É isso que o “like” faz com com­pe­tên­cia. É sim­ples e sem atrito.

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

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

As pes­soas afir­ma­ram que gos­ta­riam de mais manei­ras de se expres­sar no Face­book. Há mais ou menos um ano, Mark Zuc­ker­berg reu­niu uma equipe para come­çar a pen­sar seri­a­mente sobre como fazer o botão “like” mais expres­sivo. Nós está­va­mos ani­ma­dos em come­çar esse pro­cesso – não é todo dia que você tem a chance de tra­ba­lhar num pro­duto tão impor­tante de uma empresa.

Nós sabía­mos que a pre­missa do pro­jeto era desa­fi­a­dora. Há desa­fios óbvios como por exem­plo fazer o novo recurso fun­ci­o­nar em várias pla­ta­for­mas, numa legião de dis­po­si­ti­vos dife­ren­tes, novos e anti­gos. Então, há aspec­tos mais desa­fi­a­do­res a se tra­ba­lhar. Por exem­plo, nós gas­ta­mos muito tempo refi­nando o “Like”, os comen­tá­rios e os botões de com­par­ti­lha­mento de modo que sejam fáceis de usar e enten­der. É uma inter­face com a qual os usuá­rios inte­ra­gem bas­tante, então qual­quer mudança afe­ta­ria a com­pre­en­são e a usa­bi­li­dade das ações de milhões de pes­soas na rede. Nós pre­ci­sá­va­mos pen­sar com bas­tante aten­ção, para que fosse uma mudança natu­ral, tomando cui­dado para não ser uma alte­ra­ção abrupta, que irri­tasse a todos em nossa pla­ta­forma.

Havia outras ques­tões que pre­ci­sa­vam ser res­pon­di­das: o que seriam essas “rea­ções”? Como as pes­soas pode­riam entendê-las glo­bal­mente? Como as pes­soas a assi­mi­la­riam melhor? Como as pes­soas pode­riam expres­sar facil­mente uma des­sas rea­ções? Essas eram ques­tões com­ple­xas de se resol­ver, prin­ci­pal­mente para man­ter a mecâ­nica fácil do “Like”.

Como todo bom design, o pro­cesso de con­se­guir uma solu­ção sim­ples é com­plexo.

facebook reactions

Foi muito impor­tante ser empá­tico, e por isso repe­ti­mos o pro­cesso várias vezes, levando muito tempo. O pro­pó­sito prin­ci­pal de expan­dir as rea­ções é ter um voca­bu­lá­rio de enten­di­mento uni­ver­sal, com o qual todos pode­riam se expres­sar melhor.

Nós des­mem­bra­mos o pro­blema em duas par­tes dis­tin­tas, e come­ça­mos a tra­ba­lhar neles em para­lelo:

1 – Quais são as rea­ções que usa­re­mos além do “Cur­tir”?
2 – Como as pes­soas usa­riam as “Rea­ções”?

Atra­vés des­ses dois cami­nhos, desen­vol­ve­mos os prin­ci­pais pon­tos que usa­mos como guia para nossa equipe e que nos aju­dou a cla­rear as deci­sões do pro­jeto. Ambos os pon­tos não indi­ca­ram dire­ta­mente a solu­ção final, mas nos deram uma pista do que essa solu­ção não era e deram uma dire­ção para seguir­mos.

Esses pon­tos, com­bi­na­dos com ideias base­a­das em pes­qui­sas e dados empí­ri­cos, junto com o ins­tinto e o conhe­ci­mento da elite de talen­tos do ramo aqui no Face­book, foram como resol­ve­mos o pro­blema. A equipe que cri­a­mos incluía pes­qui­sa­do­res, estra­te­gis­tas de con­teúdo, enge­nhei­ros e minha prin­ci­pal equipe de design: Andy Chung, Bran­don Wal­kin e Brian Frick.

As Reações | Facebook Reactions

Estes sãos os prin­cí­pios que nos gui­a­ram até o con­junto de rea­ções que temos agora:

1 – As “Rea­ções” deve ser enten­di­das uni­ver­sal­mente, de modo que mais pes­soas pos­sam se conec­tar e comu­ni­car.

2 – As “Rea­ções” devem ser expres­si­vas e usa­das ampla­mente, per­mi­tindo dar feed­back de manei­ras que melhor se ali­nhem a como nos expres­sa­mos na vida real.

Pri­meiro, pre­ci­sá­va­mos con­si­de­rar quan­tas rea­ções dife­ren­tes inclui­ría­mos. Essa pare­cia uma tarefa bem sim­ples e direta: ape­nas colo­que um pole­gar pra baixo perto do botão “Like” e pronto. Mas isso não é sequer remo­ta­mente tão sim­ples e direto assim. As pes­soas pre­ci­sam de um grau maior de sofis­ti­ca­ção e riqueza nas esco­lhas que dis­po­ni­bi­li­zar­mos para a comu­ni­ca­ção. O bina­rismo “gostei/não gos­tei” não reflete apro­pri­a­da­mente como rea­gi­mos à vas­ti­dão de coi­sas que encon­tra­mos em nos­sas vidas offline.

Mesmo que não fosse biná­rio, colo­ca­ría­mos emo­jis, onde as pes­soas teriam cen­te­nas para esco­lher? Pro­va­vel­mente não. Entre outras razões, ter cen­te­nas de rea­ções para esco­lher pode­ria sig­ni­fi­car que cada post tem deze­nas de dife­ren­tes tipos de rea­ção, o que pode­ria difi­cul­tar o uso do feed de notí­cias. Adi­ci­o­nal­mente, quanto mais rea­ções ofe­re­ce­mos, menos elas seriam uni­ver­sal­mente enten­di­das.

Por mais de um ano, con­du­zi­mos pes­qui­sas inter­na­ci­o­nal­mente para explo­rar quais rea­ções as pes­soas con­si­de­ra­vam mais atra­en­tes. Aqui estão algu­mas das coi­sas que obser­va­mos:

Stickers mais usados

Nós pro­cu­ra­mos nos stic­kers mais usa­dos um sinal dos tipos de rea­ções que as pes­soas já usa­vam no Face­book.

stickers facebook reactions

Termos de pesquisas mais usados para Stickers

Embora menos comum, nós tam­bém olha­mos os ter­mos que as pes­soas pes­qui­sa­vam quando usa­vam Stic­kers.

terms stickers facebook reactions

Comentários curtos mais usados

Nós tam­bém ana­li­sa­mos uma amos­tra glo­bal e anô­nima de comen­tá­rios cur­tos mais usa­dos. Eles nós deram um pouco da lin­gua­gem espe­cí­fica que as pes­soas usa­vam para se expres­sa­rem, e nos aju­da­ram a enten­der melhor o con­texto no qual as pes­soas usa­vam esses tipos de comen­tá­rios. Aqui está um exem­plo de comen­tá­rios cur­tos que vimos nos EUA:

comentários facebook reactions

Além de ana­li­sar as amos­tras, fize­mos ques­ti­o­ná­rios inter­na­ci­o­nais, con­ver­sa­mos com as pes­soas e tra­ba­lha­mos com nossa equipe de inter­na­ci­o­na­li­za­ção. Daí em diante, redu­zi­mos a amos­tra a uma lista mais refi­nada:

facebook reactions

Cur­tir, Amei, Haha, Uau, Triste, Raiva, Con­fuso e Eba

Você pode ter repa­rado que há duas rea­ções da lista que não estão entre as rea­ções libe­ra­das: “con­fuso” e “eba”. Nos tes­tes, “con­fuso” foi usado tão rara­mente que não fazia sen­tido incluí-lo, dada a carga cog­ni­tiva de adi­ci­o­nar o “rea­ções”. Para a maior parte das pes­soas, cada rea­ção serve a um único pro­pó­sito, e com o “con­fuso” não foi assim. “Eba” foi difí­cil de jus­ti­fi­car tam­bém. Não era fácil de com­pre­endê-lo e inter­na­ci­o­na­lizá-lo, e se mis­tu­rava mui­tas vezes com o “Haha” e mesmo com o “Cur­tir”. O sis­tema é melhor como um todo sem esses dois por enquanto.

As ilustrações

Outro com­po­nente cru­cial era a apa­rên­cia das rea­ções. Nós que­ría­mos criar ilus­tra­ções que fos­sem úni­cas do Face­book, mas tam­bém que­ría­mos que elas exis­tis­sem gra­ci­o­sa­mente no ecos­sis­tema e fos­sem enten­di­das uni­ver­sal­mente. Aqui estão as dire­ções ini­ci­ais:

facebook reactionsNos­sas pri­mei­ras ilus­tra­ções não esta­vam comu­ni­cando o que deve­riam quando eram vis­tas num tama­nho rela­ti­va­mente pequeno. Elas ser­vi­ram para mar­car as posi­ções enquanto cons­truía­mos o sis­tema, mas já era hora de come­çar­mos a variá-las.

Os desa­fios aqui incluíam des­co­brir qual estilo seria apro­pri­ado ado­tar no con­junto e ainda man­ter cla­ra­mente a expres­são de cada rea­ção indi­vi­dual. A sobre­po­si­ção das expres­sões tam­bém foi algo em que esbar­ra­mos. O menor traço no design de uma rea­ção a dei­xava muito pare­cida com outra rea­ção dife­rente, ou aca­bava nem expres­sando a rea­ção dese­jada. “Uau” pare­cia com o “Eba” e “Eba” pare­cia com o “Haha” ape­nas mudando a curva do sor­riso ou um deta­lhe nos olhos.

facebook reactions

Tam­bém explo­ra­mos um sis­tema com e sem rótu­los. Rotu­lando as rea­ções, aju­da­mos a defi­nir o que as rea­ções repre­sen­ta­vam, o que por sua vez aju­dava a inter­na­ci­o­na­lizá-las. Elas pre­ci­sa­vam ser enten­di­das por todos, de modo que, se um amigo no Japão rea­gir ao seu post, vocês devem con­cor­dar mutu­a­mente sobre o que aquela rea­ção sig­ni­fica. Para enten­der esse meca­nismo, tra­ba­lha­mos de perto com equi­pes de inter­na­ci­o­na­li­za­ção e pro­fis­si­o­nais de comu­ni­ca­ção não ver­bal. Fize­mos várias pes­qui­sas e tes­tes das pri­mei­ras ver­sões em dife­ren­tes paí­ses.

As pri­meira ver­sões eram está­ti­cas e sabía­mos que a ani­ma­ção seria a chave para torná-las mais expres­si­vas, de forma que tra­ba­lha­mos para dar vida às rea­ções está­ti­cas, enquanto desig­ners e enge­nhei­ros des­co­briam como deixá-las memo­rá­veis. Desig­ners usa­ram pseudo-códi­gos para ani­mar cada rea­ção atra­vés de pro­gra­ma­ção. O tra­ba­lho deles pode­ria, então, ir para os enge­nhei­ros, a fim de que repli­cas­sem a res­pec­tiva ani­ma­ção com alta pre­ci­são no pro­duto final, com o obje­tivo de que se moves­sem de forma fluída e natu­ral.

facebook reactions

Come­ça­mos a incor­po­rar as ani­ma­ções e acha­mos que tan­tas simul­ta­ne­a­mente pode­riam ser demais para quem as olhasse. Então, a prin­ci­pio, tínha­mos ape­nas uma rea­ção ani­mada por vez (aquela sobre a qual está o cur­sor de seu mouse), enquanto as outras per­ma­ne­ciam está­ti­cas. Não que­ría­mos que fun­ci­o­nasse assim, mas per­ce­be­mos, durante uma reu­nião com o chefe (onde você encon­tra com Mark para mos­trar o pro­gresso do pro­jeto), que se você pas­sar o dedo sobre todas as rea­ções de uma vez, elas fica­riam ani­ma­das todas jun­tas. O pró­prio Mark suge­riu que ani­más­se­mos todas as rea­ções quando a ban­deja apa­re­cesse. Por coin­ci­dên­cia, gos­tá­va­mos bem mais desse jeito. Obri­gado, Zuck.

 

O sistema

Sem um con­texto pré-deter­mi­nado de prin­cí­pios sob o qual con­cor­da­mos em tra­ba­lhar, pode­ría­mos rapi­da­mente nos ver cons­truindo um sis­tema com­pli­cado que não evo­lui­ria tão bem quanto pre­ci­sá­va­mos. Aqui estão alguns dos prin­cí­pios que nos gui­a­ram:

1 – As “Rea­ções” deve­riam ser uma exten­são do “Cur­tir”. “Cur­tir”, “Comen­tar” e “Com­par­ti­lhar” são oni­pre­sen­tes no Face­book, e adi­ci­o­nar uma quarta opção a essa altura tor­na­ria tudo mais com­plexo.

2 – As “Rea­ções” não deve­riam tor­nar com­ple­xos os com­por­ta­men­tos já exis­ten­tes. Era impor­tante intro­du­zir a fun­ci­o­na­li­dade res­pon­sa­vel­mente, de modo que não arrui­nasse a forma como bilhões de pes­soas já usa­vam o pro­duto. Em outras pala­vras, nós que­ría­mos man­ter a sim­pli­ci­dade do “Cur­tir”: quando você aperta o botão, você “cur­tiu” o post.

Deixando uma “Reação”

Quando come­ça­mos a explo­rar o sis­tema de botões, nós não sabía­mos quais ou quan­tas rea­ções exis­ti­riam. Algu­mas pes­qui­sas ini­ci­ais indi­ca­vam que seriam entre cinco e dez. Num test drive, come­ça­mos cons­truindo um sis­tema de botões que pudesse abri­gar quinze rea­ções dife­ren­tes, desde que fosse fácil exibi-las e reco­lhê-las.

O pro­pó­sito desse pro­tó­tipo era enten­der manei­ras que per­mi­tis­sem várias rea­ções dife­ren­tes no sis­tema. Tenha em mente que não tínha­mos ideia do que as “Rea­ções” atu­ais seriam, então os exem­plos nesse vídeo são pura­mente fic­ci­o­nais.

Con­cei­tos e ten­ta­ti­vas ini­ci­ais como essas são pura­mente edu­ca­ci­o­nais – elas nos mos­tram o que fun­ci­ona, mas, mais impor­tante, o que não fun­ci­ona. Ela revela bura­cos, falhas, o ines­pe­rado e muito mais.

Acha­mos que a abor­da­gem acima fez um bom tra­ba­lho ao per­mi­tir um largo espec­tro de feed­back rapi­da­mente. Porém, reve­lou alguns pro­ble­mas. Em outras pala­vras, estava nos ensi­nando o que a solu­ção pre­ci­sava abran­ger:

- A inter­face do usuá­rio pode­ria ser remo­vida do topo da tela;

- Ape­sar da área grande para des­li­zar o menu, as pes­soas fre­quen­te­mente pres­si­o­na­riam em cima dos rótu­los;

- Que­bra de linha nos rótu­los pare­cia tra­ba­lhoso e tor­na­ria a inter­na­ci­o­na­li­za­ção mais difí­cil;

- A arte em con­tor­nos das ilus­tra­ções fun­ci­o­nava bem em grande escala, mas pro­vou-se difí­cil de ajus­tar em esca­las meno­res – algo que pre­ci­sá­va­mos fazer ao pen­sar em como as pes­soas usam o feed de notí­cias;

- Algu­mas pes­soas aci­o­na­riam a ban­deja e, então, tira­riam o dedo da tela para pres­si­o­nar a rea­ção, e isso faria a ban­deja se reco­lher; e

- Um número muito grande de rea­ções seria redun­dante no con­junto.

Con­ti­nu­a­mos a fazer com­bi­na­ções. O pri­meiro pro­tó­tipo incluía uma única ilus­tra­ção que muda­ria de acordo com o posi­ção do dedo sobre o rótulo da expres­são. Isso faria você per­cor­rer cada rea­ção antes de deci­dir, ao invés de sim­ples­mente ver todas as opções de uma vez. Era desa­jei­tado demais e gas­tava muito tempo.

Um pro­tó­tipo mos­trando ape­nas uma rea­ção por momento.

Even­tu­al­mente, lar­ga­mos o con­ceito de uma única ilus­tra­ção em favor do modelo de ban­deja. Essa abor­da­gem per­mi­tia às pes­soas verem rapi­da­mente todas rea­ções de uma vez. Expres­sões faci­ais no lugar de rótu­los cri­a­vam uma inter­face mais ami­gá­vel e reco­nhe­cí­vel inter­na­ci­o­nal­mente. Tam­bém fomos capa­zes de resol­ver outros pro­ble­mas dos con­cei­tos ini­ci­ais. Por exem­plo, esse novo sis­tema se ajus­tava à sua posi­ção na tela, então não pre­ci­sava ficar posi­ci­o­nado fora de vista. Remo­ve­mos os rótu­los, assim seu dedo não ficava por cima deles. Por último, uma vez que a ban­deja fosse aci­o­nada, as pes­soas pode­riam des­li­zar o dedo pela tela ou pres­si­o­nar para esco­lher uma rea­ção.

Usando as “Reações”

Num mundo em que só tínha­mos que lidar com o “Cur­tir”, como você o usa é bem sim­ples e direto. Nós só dizía­mos quando cur­ti­ram mos­trando “17 cur­ti­das”. Era uma linha de texto, bem acima dos botões “cur­tir”, “comen­tar” e “com­par­ti­lhar”. Essa linha de texto é cha­mada inter­na­mente de Bling String. Essa linha pre­ci­sa­ria ser intei­ra­mente repen­sada por­que mos­trar “10 rea­ções” não con­tem­pla­ria a vari­e­dade de sen­ti­men­tos que a fun­ci­o­na­li­dade foi feita para ofe­re­cer. As pes­soas acha­ram esse post engra­çado, triste ou sur­pre­en­dente? A solu­ção pre­ci­sava espe­ci­fi­car cada rea­ção indi­vi­du­al­mente regis­trada. Nós tam­bém que­ría­mos con­ti­nuar a mos­trar o total de feed­back, como fazía­mos com o total de “cur­ti­das”.

Nos­sas pri­meira abor­da­gem era óbvia. Nós faría­mos a linha de texto para mos­trar cada rea­ção usada e inclui­ría­mos um con­ta­dor para quan­tas vezes foram usa­das. Fun­ci­o­nava bem nos posts que tinham só alguns tipos de rea­ções dadas, mas des­mo­ro­nava quando havia muito enga­ja­mento – espe­ci­al­mente con­teú­dos públi­cos. Tam­bém era difí­cil enten­der o total de feed­back. O antigo con­ta­dor era sim­ples por­que só mos­trava uma infor­ma­ção. Como resul­tado, era fácil ver e enten­der, ou de igno­rar e des­li­zar o feed de notí­cias.

 

facebook reactions

Nossa abor­da­gem ini­cial se tor­nou exa­ge­rada quando os posts tinham mui­tas rea­ções dife­ren­tes.

facebook reactions

Algu­mas das mui­tas explo­ra­ções que não fun­ci­o­na­ram.

facebook reactions

O design final do con­ta­dor.

A solu­ção final foi agre­gar as três rea­ções mais uti­li­za­das com um con­ta­dor total. Dessa maneira, você pode­ria enten­der como a mai­o­ria das pes­soas rea­gi­ram ao post e tam­bém enten­der o total de feed­back num post. Além disso, tam­bém mos­trá­va­mos quais de seus ami­gos pró­xi­mos rea­gi­ram ao post, algo que fal­tava à ver­são mobile até a che­gada do “Rea­ções”. Você pode ver toda a vari­e­dade de rea­ções dei­xa­das pelas pes­soas pres­si­o­nando o con­ta­dor de um post indi­vi­dual.

O Produto Final

Depois de quase um ano de tra­ba­lho e meses de tes­tes, nós está­va­mos muito ani­ma­dos para lan­çar o “Face­book Reac­ti­ons”, ou “Rea­ções”, e apren­der mais sobre como ele seria usado ao redor do mundo. Nós espe­rá­va­mos que todos gos­tas­sem do “Rea­ções” agora que está­va­mos dis­po­ni­bi­li­zando de forma mais abran­gente.

Como acon­tece com todo soft­ware, nada está 100% pronto ou fina­li­zado, e o “Rea­ções” não é uma exce­ção. Nós con­ti­nu­a­re­mos a apren­der, repe­tir e aper­fei­çoá-lo, mas que­ría­mos que esse fosse um passo em dire­ção a uma expe­ri­ên­cia mais empá­tica no Face­book.

facebook reactions

Últi­mas rea­ções.


facebook reactions


Seja patrono do AZ para mais arti­gos como este.
CLIQUE AQUI e esco­lha sua recom­pensa.


Newsletter AZ | sabedoria budista


Você pode que­rer ler tam­bém:

Pon­tos colo­ri­dos pro­vam que as redes soci­ais estão des­truindo a inter­net
Posso ser pro­ces­sado por um ‘sim­ples comen­tá­rio’ na inter­net?

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.

Compartilhe