![\"design-carnet-612x408.jpeg\"](\"https:\/\/nearjob.com.br\/wp-content\/uploads\/2022\/06\/design-carnet-612x408-1.jpeg\")
Do mundo real \u00e0s interfaces virtuais<\/h2>\n\n\n\n
As microintera\u00e7\u00f5es n\u00e3o nasceram na web. No mundo real tamb\u00e9m, os designers se concentraram nos detalhes para oferecer experi\u00eancias bem-sucedidas aos seus usu\u00e1rios. Ao criar seu parque agora mundialmente famoso, Walt Disney disse: \u201cEu n\u00e3o quero que o p\u00fablico veja o mundo em que vive enquanto estiver no parque. Eu quero que eles sintam que est\u00e3o em outro mundo\u201d<\/em> . Ele queria criar \u201ca ilus\u00e3o perfeita\u201d. \u00c9 seguindo este princ\u00edpio que ele escondeu os alto-falantes nos sets para que os visitantes n\u00e3o os vejam, a fim de criar a mais imersiva das experi\u00eancias. Mesmo sentido de detalhe na Rolls-Royes, que esconde um guarda-chuva na porta de seu modelo Phantom: o fabricante responde aqui a um micro caso de uso que estabelece ainda mais a identidade da marca.<\/p>\n\n\n\n Essa aten\u00e7\u00e3o aos detalhes \u00e9 ainda mais importante no mundo virtual, em aplicativos m\u00f3veis e sites. \u00c0 primeira vista, isso pode parecer aned\u00f3tico e contr\u00e1rio aos conceitos de agilidade em particular, que se concentram primeiro no lado funcional dos projetos. Criar uma anima\u00e7\u00e3o vista por um segundo por usu\u00e1rio n\u00e3o \u00e9 necessariamente um luxo, especialmente para aplicativos baixados milh\u00f5es de vezes ou para sites populares. Esse senso de detalhe n\u00e3o \u00e9 adequado para POC (prova de conceito), mas pode permitir que seus projetos fa\u00e7am a diferen\u00e7a.<\/p>\n\n\n\n Thomas Buvignier acredita que o design de microintera\u00e7\u00f5es permite atender a seis objetivos: informar, entreter, explicar, atrair, recompensar ou divertir o usu\u00e1rio. \u201cNo mundo real, quando voc\u00ea pressiona um bot\u00e3o, espera resultados prim\u00e1rios (a l\u00e2mpada acende), mas tamb\u00e9m resultados secund\u00e1rios (voc\u00ea toca uma textura, ouve um clique\u2026). As microintera\u00e7\u00f5es permitem reproduzir isso no mundo virtual\u201d<\/em> .<\/p>\n\n\n\n Um m\u00e1gico primeiro aprende como entreter uma plat\u00e9ia para realizar seus truques de m\u00e1gica. Na web, certas situa\u00e7\u00f5es levam os designers a oferecer “momentos de distra\u00e7\u00e3o”<\/em> quando necess\u00e1rio: tempo de carregamento para entregar uma p\u00e1gina ou gerar um gr\u00e1fico, rolar para baixo para atualizar… No n\u00edvel funcional, podemos nos contentar com uma p\u00e1gina em branco mas podemos ir mais longe, oferecendo uma roca ou uma anima\u00e7\u00e3o mais elaborada. Isso diminui as interrup\u00e7\u00f5es na experi\u00eancia do usu\u00e1rio. Eles simplesmente precisam permanecer excepcionais, para n\u00e3o gerar atritos: se seu tempo de carregamento for muito longo, trabalhe tamb\u00e9m para reduzir esse tempo de carregamento.<\/p>\n\n\n\n O material design, desenvolvido pelo Google, \u00e9 concebido como uma sobreposi\u00e7\u00e3o de camadas. Apesar dessa constru\u00e7\u00e3o, o usu\u00e1rio sempre sabe onde est\u00e1, gra\u00e7as \u00e0s anima\u00e7\u00f5es. Observamos conceitos semelhantes no Instagram, que cuida das anima\u00e7\u00f5es de entrada e sa\u00edda dos stories. Tamb\u00e9m podemos pegar o exemplo de um aplicativo para escolher seu lugar em um cinema: o p\u00f4ster do filme pode se mover na tela para que o usu\u00e1rio entenda com precis\u00e3o o local escolhido. N\u00e3o \u00e9 necess\u00e1rio: poder\u00edamos ter escrito \u201cTela<\/em> \u201d, mas essas escolhas facilitam a experi\u00eancia e o entendimento.<\/p>\n\n\n\n As notifica\u00e7\u00f5es s\u00e3o o elemento mais popular para atrair usu\u00e1rios. Eles s\u00e3o encontrados em muitas interfaces. A este respeito, \u00e9, no entanto, necess\u00e1rio evitar certas armadilhas. \u201cPense na proporcionalidade entre a for\u00e7a da anima\u00e7\u00e3o e a import\u00e2ncia da informa\u00e7\u00e3o dada\u201d<\/em> . Em um mensageiro instant\u00e2neo, se a atividade for forte, evitaremos que \u201ctoda a tela se mova\u201d<\/em>cada vez que uma nova mensagem \u00e9 recebida. Podemos nos contentar com um sino animado, um chip de notifica\u00e7\u00e3o cl\u00e1ssico. Por outro lado, se a a\u00e7\u00e3o esperada pelo usu\u00e1rio for espec\u00edfica, importante, necess\u00e1ria, o poder da anima\u00e7\u00e3o proposta pode ser ainda mais acentuado. Sobre este assunto, lembre-se que estudos de eye-tracking mostraram que os internautas j\u00e1 n\u00e3o olham para banners publicit\u00e1rios em sites, acostumados demais \u00e0 sua inutilidade e \u00e0s posi\u00e7\u00f5es utilizadas. Portanto, tenha cuidado com a sobrecarga de aten\u00e7\u00e3o, \u00e0s vezes sem interesse, que voc\u00ea pede aos seus usu\u00e1rios, adapte o design de suas microintera\u00e7\u00f5es ao contexto deles.<\/p>\n\n\n\n Quando voc\u00ea completa uma corrida, ou \u201cquando voc\u00ea envia sua declara\u00e7\u00e3o de imposto depois de deixar o formul\u00e1rio em sua mesa de centro por 3 semanas\u201d<\/em> , seu c\u00e9rebro diz ao seu corpo para secretar dopamina para recompens\u00e1-lo. Nas interfaces, podemos reproduzir esses fen\u00f4menos recompensando os usu\u00e1rios (o Facebook e os outros entenderam bem isso com os semelhantes). Se voc\u00ea precisar oferecer um formul\u00e1rio longo para seus usu\u00e1rios, voc\u00ea pode adicionar um indicador positivo a cada campo preenchido para provar ao seu usu\u00e1rio que ele funciona e que ele fez \u201cuma boa a\u00e7\u00e3o\u201d.<\/p>\n\n\n\n A divers\u00e3o do usu\u00e1rio raramente \u00e9 o objetivo principal de aplicativos e sites. Apesar desse estado de coisas, as anima\u00e7\u00f5es facilitam o aprendizado e a compreens\u00e3o. O usu\u00e1rio fica assim \u201cmais d\u00f3cil\u201d<\/em> porque o ambiente \u00e9 agrad\u00e1vel e divertido. Um exemplo muito representativo: \u201cseus filhos sabem os nomes de todos os Pok\u00e9mon, por outro lado \u00e9 muito complicado faz\u00ea-los aprender a tabuada\u201d<\/em> . Projetar momentos divertidos e agrad\u00e1veis \u200b\u200baprimora a experi\u00eancia. Um exemplo bem conhecido: \u201cum avatar que esconde os olhos em uma tela de login quando o usu\u00e1rio come\u00e7a a digitar sua senha\u201d. <\/em>Esse momento causa atrito, voc\u00ea nunca lembra sua senha, essa anima\u00e7\u00e3o facilita isso\u201cmomento desagrad\u00e1vel\u201d<\/em> . Ovos de P\u00e1scoa s\u00e3o projetados com o mesmo objetivo, \u00e9 in\u00fatil, mas pode divertir o usu\u00e1rio.<\/p>\n\n\n\n As microintera\u00e7\u00f5es permitem subir mais um degrau na pir\u00e2mide de Maslow adaptada \u00e0s aplica\u00e7\u00f5es imaginadas por um designer de produtos do Google. Seu sistema \u00e9 funcional, depois confi\u00e1vel, \u00fatil, ent\u00e3o voc\u00ea projeta microintera\u00e7\u00f5es para torn\u00e1-lo agrad\u00e1vel. Mesmo que sua aplica\u00e7\u00e3o seja totalmente inovadora, \u00e9 uma aposta segura que v\u00e1rios clones tentar\u00e3o andar em seus canteiros nos pr\u00f3ximos anos. Esses elementos permitem fortalecer a vincula\u00e7\u00e3o dos usu\u00e1rios ao seu aplicativo e aumentar sua fidelidade. Eles permanecer\u00e3o se anexados ao seu aplicativo.<\/p>\n\n\n\n Steve Jobs ter\u00e1 perfeitamente conseguido aplicar esses princ\u00edpios ao projetar o primeiro iPhone. N\u00e3o foi o primeiro smartphone, mas essa aten\u00e7\u00e3o aos detalhes ajudou a reter os primeiros usu\u00e1rios e atrair outros. Eles n\u00e3o comparam telefones objetivamente, escolhem a Apple porque a marca conseguiu se destacar e oferecer \u201calgo mais\u201d<\/em> . O produto \u00e9 apreciado al\u00e9m de suas qualidades. Gra\u00e7as a esta aten\u00e7\u00e3o ao detalhe, passamos do universo \u201co produto faz-me um favor\u201d<\/em> para \u201caprecio o produto\u201d<\/em> .<\/p>","protected":false},"excerpt":{"rendered":" A equipe do Moderator’s Blog chegou ao web2day: durante tr\u00eas dias, tentaremos transcrever o conte\u00fado das melhores confer\u00eancias que participaremos. Come\u00e7amos esta s\u00e9rie com uma excelente descriptografia de Thomas Buvignier, Product owner UX na Bewizyu, sobre a import\u00e2ncia das microintera\u00e7\u00f5es. Do mundo real \u00e0s interfaces virtuais As microintera\u00e7\u00f5es n\u00e3o nasceram na web. No mundo real tamb\u00e9m, os […]<\/p>","protected":false},"author":1,"featured_media":4081,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274],"tags":[275],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/posts\/4080"}],"collection":[{"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/comments?post=4080"}],"version-history":[{"count":1,"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/posts\/4080\/revisions"}],"predecessor-version":[{"id":4082,"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/posts\/4080\/revisions\/4082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/media\/4081"}],"wp:attachment":[{"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/media?parent=4080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/categories?post=4080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearjob.com.br\/it\/wp-json\/wp\/v2\/tags?post=4080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}O interesse das microintera\u00e7\u00f5es em interfaces<\/h2>\n\n\n\n
Microintera\u00e7\u00f5es para distrair o usu\u00e1rio<\/h3>\n\n\n\n
Microintera\u00e7\u00f5es para explicar<\/h3>\n\n\n\n
Microintera\u00e7\u00f5es para atrair o usu\u00e1rio<\/h3>\n\n\n\n
Microintera\u00e7\u00f5es para recompensar o usu\u00e1rio<\/h3>\n\n\n\n
Microintera\u00e7\u00f5es para divertir o usu\u00e1rio<\/h3>\n\n\n\n
Por que as microintera\u00e7\u00f5es s\u00e3o importantes<\/h2>\n\n\n\n