{"id":588,"date":"2019-11-12T20:45:25","date_gmt":"2019-11-12T19:45:25","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=588"},"modified":"2019-11-12T20:47:15","modified_gmt":"2019-11-12T19:47:15","slug":"microinteracciones","status":"publish","type":"post","link":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ux\/microinteracciones\/","title":{"rendered":"Microinteracciones"},"content":{"rendered":"<p>  En el momento actual del dise\u00f1o web, en que se necesita inmediatez  y velocidad de carga de las p\u00e1ginas y aplicaciones web, ofrecer a los usuarios peque\u00f1as interacciones da un valor a\u00f1adido muy interesante a aquello que se est\u00e1 visualizando. Si lo quisi\u00e9ramos definir, <strong>las microinteracciones<\/strong>  ser\u00edan peque\u00f1os momentos en que el usuario y el dise\u00f1o interact\u00faan. Ser\u00edan  movimientos sutiles, peque\u00f1as animaciones que ocurren a partir de la acci\u00f3n del usuario y que marcan claramente la diferencia.&nbsp; El objetivo es sorprender al usuario, d\u00e1ndole una respuesta espec\u00edfica cada vez que realiza una peque\u00f1a acci\u00f3n. Cuando est\u00e1n bien dise\u00f1adas y colocadas con gusto y sin pasarse, las <em>microinteracciones <\/em>mejoran notablemente la experiencia de los usuarios. <\/p>\n\n\n\n<p>  Como usuarios \u2014y seguro que tambi\u00e9n como desarrolladores\u2014 hab\u00e9is  visto muchas veces estos peque\u00f1os efectos que van un paso m\u00e1s all\u00e1 del t\u00edpico <em>rollover<\/em> que se hace al pasar el cursor por encima de un bot\u00f3n o el cambio de color de un link. En vez de aplicar estos peque\u00f1os efectos t\u00edpicos presentes en el HTML y el CSS desde casi sus inicios, se pueden aplicar animaciones hechas con CSS y tambi\u00e9n con <em>JavaScript <\/em>para presentar estas sutilezas que <strong>marcar\u00e1n la  diferencia entre un dise\u00f1o y un dise\u00f1o acompa\u00f1ado de un buen dise\u00f1o de interacci\u00f3n<\/strong>. Cuando desarrollamos una aplicaci\u00f3n web, queremos que los usuarios se  sientan c\u00f3modos y que se queden. Las <em>microinteracciones<\/em> nos van a ayudar en este sentido. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">  Ejemplos para hacerse una idea <\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><em>10 microinteractions that will inspire your next project <\/em><a rel=\"noreferrer noopener\" href=\"https:\/\/www.invisionapp.com\/inside-design\/10-microinterations-that-will-inspire-your-next-project\/\" target=\"_blank\">https:\/\/www.invisionapp.com\/inside-design\/10-microinterations-that-will-inspire-your-next-project\/<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><em>5 cool examples of Microinteractions for a better WordPress UX <\/em><a rel=\"noreferrer noopener\" href=\"https:\/\/premium.wpmudev.org\/blog\/microinteractions-wordpress-ux\/\" target=\"_blank\">https:\/\/premium.wpmudev.org\/blog\/microinteractions-wordpress-ux\/<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Microinteractions design examples (code snippets)       <\/em><a rel=\"noreferrer noopener\" href=\"https:\/\/codemyui.com\/tag\/microinteractions\/\" target=\"_blank\">https:\/\/codemyui.com\/tag\/microinteractions\/<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"> Hacer peque\u00f1as animaciones<\/h3>\n\n\n\n<p> Si  quer\u00e9is desarrollar webs o aplicaciones que tengan animaciones, seguro que muchos conceptos de estos os van a sonar: transiciones CSS, <em>SVG,  JavaScript, Parallax, Keyframes<\/em>&#8230; <\/p>\n\n\n\n<p> Os dejamos una serie de enlaces para que pod\u00e1is adentraros en este mundo de la animaci\u00f3n. Ya ver\u00e9is que, cuanto m\u00e1s se excava, m\u00e1s profundo puede ser el pozo. El aprenendizaje sobre estos temas \u00a1parece no tener fin!<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Kirupa: Learn Web animation<\/em> \u2014   Tutoriales y videos para empezar desde cero y hasta llegar a niveles avanzados. <a rel=\"noreferrer noopener\" href=\"https:\/\/www.kirupa.com\/html5\/learn_animation.htm\" target=\"_blank\">https:\/\/www.kirupa.com\/html5\/learn_animation.htm<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><em>CSS animation for beginners<\/em> \u2014  Animaci\u00f3n para principiantes      <a>https:\/\/thoughtbot.com\/blog\/css-animation-for-beginners<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><em>The guide to CSS animation: principles and examples<\/em> <a rel=\"noreferrer noopener\" href=\"https:\/\/www.smashingmagazine.com\/2011\/09\/the-guide-to-css-animation-principles-and-examples\/\" target=\"_blank\">https:\/\/www.smashingmagazine.com\/2011\/09\/the-guide-to-css-animation-principles-and-examples\/<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><em>19 cool CSS animation examples to recreate<\/em> \u2014  Para aprender, intentando hacer       <a rel=\"noreferrer noopener\" href=\"https:\/\/www.creativebloq.com\/inspiration\/css-animation-examples\" target=\"_blank\">https:\/\/www.creativebloq.com\/inspiration\/css-animation-examples<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><em>CSS animation rocks<\/em> \u2014  conjunto de tutoriales y ejemplos de animaci\u00f3n       <a>https:\/\/cssanimation.rocks\/<\/a>.  Tambi\u00e9n es interesante conocer los principos b\u00e1sicos de animaci\u00f3n  <a rel=\"noreferrer noopener\" href=\"https:\/\/cssanimation.rocks\/principles\/\" target=\"_blank\">https:\/\/cssanimation.rocks\/principles\/<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong> Consejos para hacer unas buenas microinteracciones <\/strong><\/h3>\n\n\n\n<p> No es lo mismo hacer una animaci\u00f3n que hacer una buena animaci\u00f3n. El m\u00e9rito est\u00e1 en acertar la duraci\u00f3n, sorprender al usuario, saber captar la atenci\u00f3n durante  un determinado momento&#8230; Hay una l\u00ednea muy fina entre lo que encanta a los usuarios y aquello que les puede llegar a molestar si lo ven varias veces y la clave est\u00e1 en el equilibrio.<\/p>\n\n\n\n<p> Para terminar, os dejamos con unos consejos para hacer unas buenas animaciones y construir una buena experiencia de usuario (UX) en este sentido.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Good to great UI animation tips<\/em>      <a rel=\"noreferrer noopener\" href=\"https:\/\/uxdesign.cc\/good-to-great-ui-animation-tips-7850805c12e5\" target=\"_blank\">https:\/\/uxdesign.cc\/good-to-great-ui-animation-tips-7850805c12e5<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><em>8 steps to amazing microinteraction design<\/em><a rel=\"noreferrer noopener\" href=\"https:\/\/www.awwwards.com\/8-steps-to-amazing-microinteraction-design.html\" target=\"_blank\">     https:\/\/www.awwwards.com\/8-steps-to-amazing-microinteraction-design.html<\/a><\/li><\/ul>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>En el momento actual del dise\u00f1o web, en que se necesita inmediatez y velocidad de carga de las p\u00e1ginas y aplicaciones web, ofrecer a los usuarios peque\u00f1as interacciones da un valor a\u00f1adido muy interesante a aquello que se est\u00e1 visualizando. Si lo quisi\u00e9ramos definir, las microinteracciones ser\u00edan peque\u00f1os momentos en que el usuario y el &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ux\/microinteracciones\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abMicrointeracciones\u00bb<\/span><\/a><\/p>\n","protected":false},"author":163,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-588","post","type-post","status-publish","format-standard","hentry","category-ux","entry"],"_links":{"self":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":32,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":622,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/588\/revisions\/622"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}