![\"Microinteracci\u00f3n](\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/microinteraccion-fab-1.gif?resize=200%2C150&ssl=1\")
Las microinteracciones<\/strong> difieren de las funcionalidades<\/strong> (features<\/em>) de un sistema en tama\u00f1o y alcance. Las microinteracciones<\/strong> son pr\u00e1ctica o literalmente invisibles, y pocas veces son la raz\u00f3n para comprar de un producto. <\/p>\n\n\n\n A pesar de su tama\u00f1o y poca visibilidad, son incre\u00edblemente importantes en el dise\u00f1o de la experiencia de usuario. Una de las microinteracciones m\u00e1s famosas<\/a> y utilizadas, por ejemplo, son las funciones de Copiar<\/strong> y\/o Pegar<\/strong>, dise\u00f1adas por Larry Tesler<\/a><\/strong> en 1971 y que se utilizan en much\u00edsimos sistemas y apps<\/em>. Si las microinteracciones<\/strong> son pobres, no importa que tan bien est\u00e9n hechas las funcionalidades principales, estar\u00e1n rodeadas de frustraci\u00f3n y molestia. \u00abLas microinteracciones est\u00e1n a nuestro alrededor. Son un caso de uso Las microinteracciones<\/strong> se utilizan para: Hay tres formas de integrar micro interacciones en un sistema: Dave Saffer<\/a><\/strong> explica en su libro Microinteractions<\/strong><\/a> que para el dise\u00f1o de una micro-interacci\u00f3n se definen cuatro componentes de la misma:<\/p>\n\n\n\n Un disparador <\/strong>(trigger<\/em>) es cualquier evento o control que activa una micro-interacci\u00f3n. Puede ser un control, un icono, un formulario, un comando de voz o un gesto en una superficie t\u00e1ctil, y puede ser visible, invisible o un componente del sistema que se activa en ciertas condiciones. El disparador de una microinteracci\u00f3n debe verse como algo que el usuario entiende <\/em>que es un disparador y siempre debe iniciar la misma acci\u00f3n cada vez que se utilice.<\/p>\n\n\n\n Las reglas <\/strong>(rules<\/em>) determinan el comportamiento de la microinteracci\u00f3n. Hay que recordar que las reglas no siempre van a ser obvias para el usuario, y \u00e9stas se le revelan de dos maneras: por lo que puede hacer<\/strong> y por lo que no puede<\/strong>. Las reglas de una microinteracci\u00f3n afectan la experiencia de usuario al determinar qu\u00e9 pasa y en qu\u00e9 orden<\/strong> y sin no son claras pueden convertirse en fricci\u00f3n <\/strong>para el usuario. Se recomienda utilizar diagramas de flujo <\/em>para dise\u00f1arlas.<\/p>\n\n\n\n El prop\u00f3sito de la retroalimentaci\u00f3n <\/strong>(feedback<\/em>) en una microinteracci\u00f3n es ayudar al usuario a entender sus reglas. La retroalimentaci\u00f3n no explica las reglas pero deber\u00eda ser un apoyo para que el usuario construya un modelo mental sobre el funcionamiento del producto que est\u00e1 usando. El principio de la usabilidad para retroalimentaci\u00f3n es que menos es m\u00e1s: no hay que saturar al usuario con informaci\u00f3n<\/strong>. <\/p>\n\n\n\n La animaci\u00f3n<\/a> es una excelente manera de dar retroalimentaci\u00f3n al usuario. Chet Hasse <\/strong>y Romain Guy <\/strong>del equipo de dise\u00f1o de Android<\/a><\/strong> definieron las caracter\u00edsticas para el dise\u00f1o de animaciones en interfaces visuales. Estas deber\u00edan ser: Los ciclos y modos (loops & modes<\/em>) controlan el meta-comportamiento de la micro interacci\u00f3n y determinan la duraci\u00f3n de las microinteracciones tambi\u00e9n si el usuario necesitar\u00e1 repetirlo o cambiarlo con el tiempo. En microinteracciones hay cuatro estilos de ciclos: ciclos controlados (for-loop<\/em>), ciclos condicionales (while-loop<\/em>), ciclos basados en colecciones y ciclos infinitos.<\/p>\n\n\n\n Las microinteracciones <\/strong>se han vuelto elementos clave en el dise\u00f1o de interactivo y de experiencia de usuario para dar claridad a las funcionalidades y hacerlas agradables y memorables.<\/p>\n","protected":false},"excerpt":{"rendered":" Las microinteracciones son elementos clave en el dise\u00f1o interactivo y de UX de un sistema digital.<\/p>\n","protected":false},"author":1,"featured_media":322,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[69,1],"tags":[100,103,47,102],"class_list":["post-313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-experiencia-de-usuario","tag-animacion","tag-dan-saffer","tag-diseno-interactivo","tag-microinteracciones","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/microinteracciones.jpg?fit=1170%2C500&ssl=1","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":2,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":415,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions\/415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media\/322"}],"wp:attachment":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n\n\n\n![\"Ejemplos](\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/ejemplos-microinteracciones.gif?resize=640%2C480&ssl=1\")
<\/p>\n\n\n\n
\u00fanico que hace una sola cosa. La diferencia entre un producto que amamos y un producto que s\u00f3lo toleramos son a menudo las microinteracciones que tenemos con \u00e9l.\u00bb<\/p>Donald Norman<\/strong><\/cite><\/blockquote>\n\n\n\n
<\/p>\n\n\n\nEstructura de una micro interacci\u00f3n<\/h3>\n\n\n\n
<\/p>\n\n\n\n
<\/li>
<\/li>![\"\"](\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/Taller-de-dise%C3%B1o-de-microinteracciones.png?resize=551%2C149&ssl=1\")
Estructura de una micro-interacci\u00f3n. Cr\u00e9dito: Dan Saffer<\/a>
<\/figcaption><\/figure><\/div>\n\n\n\n1. Disparadores<\/h4>\n\n\n\n
2. Reglas<\/h4>\n\n\n\n
<\/p>\n\n\n\n3. Retroalimentaci\u00f3n<\/h4>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n4. Ciclos y modos<\/h4>\n\n\n\n