{"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\/ca\/ux\/microinteracciones\/","title":{"rendered":"Microinteraccions"},"content":{"rendered":"<p>  En el moment actual del disseny web en qu\u00e8 es necessita immediatesa  i velocitat de c\u00e0rrega de les p\u00e0gines i aplicacions web, oferir als  usuaris petites interaccions, dona un valor afegit molt interessant a  all\u00f2 que s&#8217;est\u00e0 visualitzant. Si ho hagu\u00e9ssim de definir, <strong>les microinteraccions<\/strong>  serien petits moments en qu\u00e8 l&#8217;usuari i el disseny interactuen. Serien  moviments subtils, petites animacions que s&#8217;esdevenen a partir de  l&#8217;acci\u00f3 de l&#8217;usuari i que marquen clarament la difer\u00e8ncia.&nbsp; L&#8217;objectiu  \u00e9s sorprendre l&#8217;usuari, donant-li una resposta espec\u00edfica cada vegada  que fa una petita acci\u00f3. Quan estan ben dissenyades i posades amb gust i  sense excedir-se, les <em>microinteraccions <\/em>milloren amb escreix  l&#8217;experi\u00e8ncia dels usuaris. <\/p>\n\n\n\n<p>  Com a  usuaris \u2014i segur que tamb\u00e9 com a desenvolupadors\u2014 heu vist moltes  vegades aquests petits efectes que anirien un pas m\u00e9s enll\u00e0 del t\u00edpic <em>rollover<\/em>  que es fa en passar el cursor sobre d&#8217;un bot\u00f3 o el canvi de color d&#8217;un link. En comptes  d&#8217;aplicar aquests petits efectes t\u00edpics presents en l&#8217;HTML i el CSS des  de gaireb\u00e9 el comen\u00e7ament, es poden aplicar animacions fetes amb CSS i tamb\u00e9 amb <em>JavaScript <\/em>per presentar aquestes subtileses que <strong>marcaran la  difer\u00e8ncia entre un disseny i un disseny acompanyat d&#8217;un bon disseny d&#8217;interacci\u00f3<\/strong>. Quan fem una aplicaci\u00f3 web, volem que els usuaris s&#8217;hi  sentin c\u00f2modes i s&#8217;hi quedin. Les <em>microinteraccions <\/em>ens ajudaran en  aquest sentit. <\/p>\n\n\n\n<p>   <strong>Exemples per fer-se&#8217;n a la idea<\/strong> <\/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\"> Fer petites animacions<\/h3>\n\n\n\n<p> Si  voleu desenvolupar webs o aplicacions que tinguin animacions segur que  hi ha molts conceptes d&#8217;aquests que us sonaran: transicions CSS, <em>SVG,  JavaScript, Parallax, Keyframes<\/em>&#8230; <\/p>\n\n\n\n<p> Us  deixem amb un seguit d&#8217;enlla\u00e7os perqu\u00e8 us pogueu endinsar en aquest m\u00f3n  de l&#8217;animaci\u00f3. Ja veureu que com m\u00e9s s&#8217;excava, m\u00e9s profund pot ser el  pou. L&#8217;aprenentatge sobre aquests temes sembla no tenir fi!<\/p>\n\n\n\n<p>Tutorials i v\u00eddeos per comen\u00e7ar des de zero i arribar fins a nivells avan\u00e7ats. <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\u00f3 per a principiants      <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 Per aprendre, provant de fer       <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  conjunt de tutorials i exemples d&#8217;animaci\u00f3 CSS        <a>https:\/\/cssanimation.rocks\/<\/a>.  Tamb\u00e9 \u00e9s interessant saber sobre els principis b\u00e0sics d&#8217;animaci\u00f3  <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> Consells per a fer bones microinteraccions <\/strong><\/h3>\n\n\n\n<p> No  \u00e9s el mateix fer una animaci\u00f3 que fer una bona animaci\u00f3. La clau \u00e9s  encertar la durada, sorprendre a l&#8217;usuari, saber captar l&#8217;atenci\u00f3 durant  un determinat moment&#8230; Hi ha una l\u00ednia molt fina entre all\u00f2 que encanta als usuaris i all\u00f2 que els pot arribar a molestar si ho veuen  diverses vegades i la clau \u00e9s l&#8217;equilibri.<\/p>\n\n\n\n<p> Per  acabar us deixem amb aquests consells per fer unes bones animacions i  construir una bona experi\u00e8ncia d&#8217;usuari (UX) en aquest sentit.<\/p>\n\n\n\n<p><\/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 moment actual del disseny web en qu\u00e8 es necessita immediatesa i velocitat de c\u00e0rrega de les p\u00e0gines i aplicacions web, oferir als usuaris petites interaccions, dona un valor afegit molt interessant a all\u00f2 que s&#8217;est\u00e0 visualitzant. Si ho hagu\u00e9ssim de definir, les microinteraccions serien petits moments en qu\u00e8 l&#8217;usuari i el disseny interactuen. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/ux\/microinteracciones\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Microinteraccions&#8221;<\/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\/ca\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":32,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":622,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/588\/revisions\/622"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}