{"id":7792,"date":"2016-07-13T14:44:26","date_gmt":"2016-07-13T17:44:26","guid":{"rendered":"http:\/\/chatbotsbrasil.blip.ai\/?p=170"},"modified":"2023-07-16T09:55:49","modified_gmt":"2023-07-16T12:55:49","slug":"o-que-aprendi-sobre-interfaces-conversacionais-em-her","status":"publish","type":"post","link":"https:\/\/www.blip.ai\/blog\/design\/o-que-aprendi-sobre-interfaces-conversacionais-em-her\/","title":{"rendered":"O que aprendi sobre interfaces conversacionais em Her"},"content":{"rendered":"<section class=\" section--body section--first\">\n<div class=\"section-content\">\n<div class=\"section-inner layoutSingleColumn\">\n<p id=\"db8c\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">[!spoileralert mode:off] Se voc\u00ea ainda n\u00e3o assistiu Her, n\u00e3o se preocupe, n\u00e3o h\u00e1 nenhum grande spoiler aqui.<\/strong><\/p>\n<p id=\"456b\" class=\"graf--p graf-after--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.imdb.com\/video\/vi1211672857\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Her<\/a> \u00e9 um filme sensacional! N\u00e3o apenas por representar a intera\u00e7\u00e3o entre um homem e uma consci\u00eancia artificial, mas tamb\u00e9m por ser um belo retrato de como nosso sentimentos, sensa\u00e7\u00f5es e emo\u00e7\u00f5es est\u00e3o se moldando \u00e0 era da digitaliza\u00e7\u00e3o. Mas vou segurar firme os meus dedos para n\u00e3o escrever sobre isso, <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.youtube.com\/watch?v=ZSfUcWw9zto\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"https:\/\/www.youtube.com\/watch?v=ZSfUcWw9zto\" data->entretanto, indico este document\u00e1rio<\/a> (este sim \u00e9 spoiler). Agora, vamos ao que interessa:<\/p>\n<p id=\"0541\" class=\"graf--p graf-after--p\">H\u00e1 uma s\u00e9rie de momentos em que o filme d\u00e1 dicas incr\u00edveis sobre como projetar uma interface conversacional que tenha proximidade, identifica\u00e7\u00e3o e seja amig\u00e1vel. E o mais legal: voc\u00ea vai perceber que todas elas s\u00e3o na verdade dicas de como levar uma boa conversa. Eu transcrevi mais de 50 di\u00e1logos interessantes sobre isso, mas vou compartilhar e comentar apenas os melhores. Confira a seguir:<\/p>\n<h4 id=\"779c\" class=\"graf--h4 graf-after--p\">Use a fun\u00e7\u00e3o\u00a0f\u00e1tica<\/h4>\n<p id=\"a098\" class=\"graf--p graf-after--h4\">\u00c9 importante checar se tem algu\u00e9m prestando aten\u00e7\u00e3o, come\u00e7ar com um \u201cOi\u201d ou \u201cOl\u00e1\u201d torna a comunica\u00e7\u00e3o menos mec\u00e2nica. Perceba como foi simples, humano e pessoal o primeiro contato entre o sistema operacional (Samantha, interpretada por Scarlett Johansson) e o usu\u00e1rio (Theodor):<\/p>\n<p id=\"3230\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cSamantha: Ol\u00e1! Estou aqui.\u201d<br \/>\n\u201cTheodor: Oi?\u201d<br \/>\n\u201cS: Oi. Como voc\u00ea est\u00e1?\u201d<\/em><\/p>\n<h4 id=\"5818\" class=\"graf--h4 graf-after--p\">Tenha solu\u00e7\u00f5es personalizadas segundo o perfil de\u00a0uso<\/h4>\n<p id=\"b4a5\" class=\"graf--p graf-after--h4\">Os primeiros 10 minutos do filme cumprem o papel de nos contextualizar sobre como Theo interagia com as m\u00e1quinas antes de atualizar seu computador para o OS1 (sistema operacional da Samantha). Ele precisava dar comandos precisos, e as m\u00e1quinas nunca entendiam o contexto no qual ele estava:<\/p>\n<p id=\"655e\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cTheodor: Tocar m\u00fasica melanc\u00f3lica. [fecha a cara] Tocar outra m\u00fasica melanc\u00f3lica.\u201d (Minuto 3)<br \/>\n\u201cT: escrever mensagem [\u2026] enviar mensagem.\u201d (Minuto 7)<\/em><\/p>\n<p id=\"e314\" class=\"graf--p graf-after--p\">Com Samantha nunca era assim, afinal, ela o conhecia:<\/p>\n<p id=\"5fd0\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cSamantha: Antes de falar dos seus m\u00e9todos organizacionais, quero ver seus contatos. Voc\u00ea tem muitos contatos!\u201d<\/em><\/p>\n<h4 id=\"c8f2\" class=\"graf--h4 graf-after--p\">Contexto \u00e9\u00a0tudo!<\/h4>\n<p id=\"6656\" class=\"graf--p graf--startsWithDoubleQuote graf-after--h4\">\u201c<em class=\"markup--em markup--p-em\">Theodor: Sabe no que estou pensando agora?\u201d<br \/>\n\u201cSamantha: Pelo tom da sua voz, voc\u00ea est\u00e1 me desafiando. Talvez porqu\u00ea esteja curioso sobre como eu funciono.<br \/>\nS: Quer saber como eu funciono?\u201d\u00a0<\/em><\/p>\n<p class=\"graf--p graf--startsWithDoubleQuote graf-after--h4\">Em uma conversa, uma mesma pergunta provavelmente nunca ter\u00e1 a mesma resposta. Nossos sistemas devem compreender o contexto e dar a resposta mais adequada para cada situa\u00e7\u00e3o.<\/p>\n<h4 class=\"graf--p graf--startsWithDoubleQuote graf-after--h4\">Considere dar um nome a sua interface<\/h4>\n<p id=\"66c5\" class=\"graf--p graf--startsWithDoubleQuote graf-after--h4\"><em class=\"markup--em markup--p-em\">\u201cTheodor: Como eu te chamo? Voc\u00ea tem um nome?\u201d<br \/>\n\u201cSamantha: Sim, tenho: Samantha.\u201d<\/em><\/p>\n<p id=\"3bf8\" class=\"graf--p graf-after--p\">Voc\u00ea j\u00e1 viu a quantidade de <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.techtudo.com.br\/noticias\/2015\/04\/bem-humorada-veja-respostas-mais-engracadas-da-siri-em-portugues.ghtml\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">perguntas que s\u00e3o feitas a Siri<\/a>, do tipo: \u201cSiri, case comigo?\u201d \u201cSiri, qual o sentido da vida?\u201d Ou \u201cSiri, qual o melhor sistema operacional?\u201d Por acaso voc\u00ea presenciou algu\u00e9m fazer este tipo de pergunta ao assistente Google Now? Claro que isso n\u00e3o se deve apenas a falta de um nome, mas este \u00e9 um dos fatores do porqu\u00ea n\u00e3o o percebemos como um indiv\u00edduo.<\/p>\n<h4 id=\"b9a7\" class=\"graf--h4 graf-after--p\">Cordialidade, por\u00a0favor:<\/h4>\n<p id=\"b3da\" class=\"graf--p graf-after--h4\">Eu insisto: MUI (Messenger User Interfaces) se baseiam em conversas, e em uma conversa voc\u00ea n\u00e3o vai querer se passar por mal-educado. Planeje em sua interface cordialidade e gentileza:<\/p>\n<p id=\"a947\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cSamantha: Prazer em conhecer voc\u00ea.\u201d<\/em><\/p>\n<h4 id=\"8414\" class=\"graf--h4 graf-after--p\">Seu desejo \u00e9 uma\u00a0Ordem:<\/h4>\n<p id=\"0825\" class=\"graf--p graf-after--h4\">Sua interface deve ser uma boa anfitri\u00e3. N\u00e3o contrarie o desejo de um usu\u00e1rio. Primeiro voc\u00ea deve resolver o que ele quer, e depois, pode notific\u00e1-lo com qualquer outra coisa. No filme, h\u00e1 uma ocasi\u00e3o onde, primeiro Samantha auxilia Theo com revis\u00f5es ortogr\u00e1ficas, e depois o notifica sobre uma reuni\u00e3o:<\/p>\n<p id=\"f573\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cSamantha: [longa conversa sobre ortografia] How, voc\u00ea tem uma reuni\u00e3o em menos de 5 minutos.\u201d<\/em><\/p>\n<p id=\"629f\" class=\"graf--p graf-after--p\">Em uma interface conversacional, qualquer assunto diferente do que foi solicitado ter\u00e1 o mesmo efeito de um pop-up.<\/p>\n<h4 id=\"2dbe\" class=\"graf--h4 graf-after--p\">O usu\u00e1rio tem sempre raz\u00e3o, ainda que n\u00e3o\u00a0tenha.<\/h4>\n<p id=\"cb83\" class=\"graf--p graf-after--h4\">Samantha sempre abre m\u00e3o de ter raz\u00e3o quando Theo d\u00e1 uma de teimoso. Ela tem a precis\u00e3o de uma m\u00e1quina, mas n\u00e3o evidencia isto.<\/p>\n<p id=\"b364\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cSamantha: O T\u00fanel da esquerda \u00e9 o \u00fanico que n\u00e3o tentamos.<br \/>\nTheodor: Acho que voc\u00ea me mandou aqui da \u00faltima vez.<br \/>\nS: Eu acho que n\u00e3o.<br \/>\nT: \u00c9\u2026 Este \u00e9 diferente.\u201d (minuto 19)<\/em><\/p>\n<p id=\"bc09\" class=\"graf--p graf-after--p\">Devo lembrar que n\u00f3s agimos guiados por uma s\u00e9rie de gatilhos mentais que podem por exemplo, nos levar a teimar sabendo que podemos estar errados, apenas para manter a coer\u00eancia. Respeite isso.<\/p>\n<h4 id=\"e06a\" class=\"graf--h4 graf-after--p\">Antecipe\u00a0solu\u00e7\u00f5es<\/h4>\n<p id=\"5a6f\" class=\"graf--p graf-after--h4\">Tem coisa melhor que algu\u00e9m proativo? Se a solu\u00e7\u00e3o \u00e9 \u00f3bvia, n\u00e3o h\u00e1 porqu\u00ea solicitar confirma\u00e7\u00e3o, avise logo que est\u00e1 feito. No filme, a pr\u00f3-atividade de Samantha \u00e9 incr\u00edvel, por se tratar de uma intelig\u00eancia que aprende a todo momento, mas mesmo em sistemas com menos recursos se pode antecipar algumas quest\u00f5es obvias:<\/p>\n<p id=\"4f0c\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cTheodor: Ok, Fa\u00e7a reservas em algum lugar.<br \/>\nSamantha: Achei um bom lugar.\u201d<\/em><\/p>\n<p id=\"3f3a\">No momento do encontro a convidada de Theodor diz:<\/p>\n<p><em>\u201cConvidada: Este lugar \u00e9 incr\u00edvel, eu queria vir aqui h\u00e1 muito tempo.\u201d<\/em><\/p>\n<h4 id=\"e712\" class=\"graf--h4 graf-after--p\">Simplicidade<\/h4>\n<p id=\"ad75\" class=\"graf--p graf-after--h4\">Por mais de uma vez, Theodor faz perguntas que poderiam ter respostas complexas, descrevendo mecanismos de alt\u00edssima tecnologia e Samantha d\u00e1 respostas t\u00e3o simples que chegamos a acreditar que ela \u00e9 humana.<\/p>\n<p id=\"619d\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cSamantha: Qual \u00e9 o problema?<br \/>\nTheodor: Como voc\u00ea sabe que tem algum problema?<br \/>\nS: Eu n\u00e3o sei, eu s\u00f3 sei.\u201d (Minuto 26)<\/em><\/p>\n<h4 id=\"4a4f\" class=\"graf--h4 graf-after--p\">Risos, Onomatopeias e\u00a0pausas.<\/h4>\n<p id=\"09cb\" class=\"graf--p graf-after--h4\">M\u00e1quinas tem respostas calculadas e objetivas, mas, seria mais simp\u00e1tico demonstrar anseio, insinua\u00e7\u00e3o, precipita\u00e7\u00e3o ou surpresa.<\/p>\n<p id=\"d764\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cTheodor: quer ir em uma aventura comigo?<br \/>\nSamantha: (Risos) sim, eu adoraria.\u201d<\/em><\/p>\n<p id=\"ae69\" class=\"graf--p graf-after--p\">Claro que calcular o momento certo para isto de forma autentica est\u00e1 um pouco al\u00e9m do poder computacional que temos hoje (guarde essa dica para um futuro pr\u00f3ximo).<\/p>\n<h4 id=\"851c\" class=\"graf--h4 graf-after--p\">Ironia\u00a0mode:ON<\/h4>\n<p id=\"32df\" class=\"graf--p graf-after--h4\">No filme, Samantha n\u00e3o s\u00f3 \u00e9 capaz de detectar Ironia como tamb\u00e9m \u00e9 capaz de ser ir\u00f4nica. Este \u00e9 outro recurso que talvez nossas interfaces n\u00e3o ter\u00e3o de pronto:<\/p>\n<p id=\"53e8\" class=\"graf--p graf--startsWithDoubleQuote graf-after--p\"><em class=\"markup--em markup--p-em\">\u201cTheodor: Voc\u00ea \u00e9 insana!<br \/>\nSamantha: S\u00e9rio?<br \/>\nT: Definitivamente.<br \/>\nS: Fant\u00e1stico!\u201d (Minuto 47)<\/em><\/p>\n<h4 id=\"94ed\" class=\"graf--h4 graf-after--p\">Plural mas\u00a0pessoal<\/h4>\n<p id=\"e429\" class=\"graf--p graf-after--h4\">O que ir\u00e1 diferenciar boas de p\u00e9ssimas interfaces conversacionais ser\u00e1 a capacidade de personalizar a conversa e tratar cada usu\u00e1rio de uma forma \u00fanica. Quando conversamos, queremos sentir que a conversa \u00e9 unidirecional, e que a pessoa do outro lado nos conhecem n\u00e3o queremos nos sentir em um HUB de atendimento. No filme, Theo leva muito tempo (por volta do minuto 104) para perceber que Samantha n\u00e3o conversava apenas com ele:<\/p>\n<p id=\"c2ae\" class=\"graf--p graf-after--p graf--last\"><em class=\"markup--em markup--p-em\">Theodor: Est\u00e1 conversando com algu\u00e9m enquanto nos falamos?<br \/>\nSamantha: Sim<br \/>\nT: Est\u00e1 falando com mais algu\u00e9m agora? Outras pessoas, OS ou qualquer outra coisa?<br \/>\nS: Estou.<br \/>\nT: Mais quantos?<br \/>\nS: 8.360.<\/em><\/p>\n<\/div>\n<\/div>\n<\/section>\n<section class=\" section--body section--last\">\n<div class=\"section-divider layoutSingleColumn\">\n<hr class=\"section-divider\" \/>\n<\/div>\n<div class=\"section-content\">\n<div class=\"section-inner layoutSingleColumn\" style=\"text-align: center;\">\n<p id=\"9292\" class=\"graf--p graf--leading\" style=\"text-align: left;\">Este n\u00e3o \u00e9 um manual definitivo sobre como criar interfaces conversacionais, muito menos creio que a maioria de n\u00f3s tenha a disposi\u00e7\u00e3o recursos necess\u00e1rios para criar uma interface t\u00e3o humana quanto a representada no filme, mas deixo aqui algumas provoca\u00e7\u00f5es sobre como as interfaces podem ser amig\u00e1veis. Se voc\u00ea planeja interfaces conversacionais ou de mensagens, assista novamente o filme e deixe nos coment\u00e1rios suas percep\u00e7\u00f5es.<\/p>\n<figure id=\"9fb4\" class=\"graf--figure graf--layoutOutsetLeft graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\">\u00a0<img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image aligncenter\" src=\"https:\/\/cdn-images-1.medium.com\/max\/600\/1*1VbLpsoWuS_fyQkoNtu_0A.jpeg\" data-src=\"https:\/\/cdn-images-1.medium.com\/v2\/resize:fit:600\/1*1VbLpsoWuS_fyQkoNtu_0A.jpeg\" alt=\"-\" title=\"-\"><\/div>\n<\/div><figcaption class=\"imageCaption\"><em>Samantha e Theo em uma aventura na\u00a0praia.<\/em><\/figcaption><\/figure>\n<p id=\"f196\" class=\"graf--p graf-after--figure graf--last\" style=\"text-align: left;\">Certamente, nem todos os sistemas de troca de mensagens tem a pretens\u00e3o ou necessidade de se passar por um humano, mas uma boa conversa deve sempre ser uma boa conversa, ainda que com uma m\u00e1quina.<\/p>\n<hr \/>\n<p class=\"graf--p graf-after--figure graf--last\" style=\"text-align: left;\"><strong>Bruno Castro<\/strong><\/p>\n<p class=\"graf--p graf-after--figure graf--last\" style=\"text-align: left;\">UI Designer<\/p>\n<\/div>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>[!spoileralert mode:off] Se voc\u00ea ainda n\u00e3o assistiu Her, n\u00e3o se preocupe, n\u00e3o h\u00e1 nenhum grande spoiler aqui. Her \u00e9 um filme sensacional! N\u00e3o apenas por representar a intera\u00e7\u00e3o entre um homem e uma consci\u00eancia artificial, mas tamb\u00e9m por ser um belo retrato de como nosso sentimentos, sensa\u00e7\u00f5es e emo\u00e7\u00f5es est\u00e3o se moldando \u00e0 era da [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":171,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[127],"tags":[78,100,169],"class_list":["post-7792","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-conversas-inteligentes","tag-design-2","tag-interface-conversacional"],"lang":"pt","translations":{"pt":7792},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/7792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/comments?post=7792"}],"version-history":[{"count":0,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/7792\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media\/171"}],"wp:attachment":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media?parent=7792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/categories?post=7792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/tags?post=7792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}