{"id":5267,"date":"2024-06-14T16:56:09","date_gmt":"2024-06-14T22:56:09","guid":{"rendered":"https:\/\/oliverpuente.com\/?p=5267"},"modified":"2024-07-28T12:45:29","modified_gmt":"2024-07-28T18:45:29","slug":"diseno-de-botones-ux","status":"publish","type":"post","link":"https:\/\/oliverpuente.com\/en\/ui-ux\/diseno-de-botones-ux\/","title":{"rendered":"UX Button Design: COMPLETE GUIDE \u2013 Best Practices for Designing Buttons that Convert"},"content":{"rendered":"<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\"><strong>Dise\u00f1o de botones UX: GU\u00cdA COMPLETA &#8211; Mejores pr\u00e1cticas\ud83d\udea6: <\/strong>Para dise\u00f1ar botones en el \u00e1mbito del UI\/UX existe un conjunto de pr\u00e1cticas recomendadas que le ayudar\u00e1n a dise\u00f1ar y optimizar botones en tu sitio web, de tal forma que te permitan convertir m\u00e1s usuarios en leads, clientes y mucho m\u00e1s. En este art\u00edculo vamos a ver una GU\u00cdA COMPLETA de las mejores pr\u00e1cticas UX para dise\u00f1ar botones que m\u00e1s efectivos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-diseno-de-botones-ux\"><strong>Dise\u00f1o de botones UX<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Primeramente, es necesario aclarar que, los botones son uno de los elementos principales en cualquier interfaz de usuario. Podemos tener en un sitio web repleto de miles de botones como tener solo un pu\u00f1ado y seguir generando conversiones como locos. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Esto es funci\u00f3n del dise\u00f1o de experiencia de usuario, que nos permite crear botones que generen acciones de parte del usuario.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"340\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1024x340.jpg\" alt=\"Ejemplo de buen y mal dise\u00f1o de bot\u00f3n ux\" class=\"wp-image-5341\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1024x340.jpg 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-300x100.jpg 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-768x255.jpg 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1536x510.jpg 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-600x199.jpg 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>El objetivo de los botones en el dise\u00f1o UX<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">El objetivo de un bot\u00f3n es ser un medio para que el usuario pueda llevar a cabo una acci\u00f3n predeterminada (como el redireccionamiento a otra p\u00e1gina o la compra de un producto) simplemente haciendo la moci\u00f3n de \u201ctap\u201d o \u201cclic\u201d sobre dicho elemento gr\u00e1fico. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Un bot\u00f3n no tiene por qu\u00e9 ser un elemento ignorado, soso o frustrante para los usuarios que usan la interfaz. Podemos evitar esto, si los dise\u00f1amos y optimizamos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"line-height:1.2\"><strong>Por qu\u00e9 el dise\u00f1o de botones UX en la experiencia de usuario es importante<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">El dise\u00f1o de botones es crucial porque un bot\u00f3n bien dise\u00f1ado, no solo redirecciona al usuario, sino que tambi\u00e9n proporciona una llamada a la acci\u00f3n que les motiva a dar un paso en el proceso de compra o compleci\u00f3n de una tarea, proporcionando un camino claro a seguir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Los b\u00e1sicos del dise\u00f1o de botones UI\/UX<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Si vamos a dise\u00f1ar un conjunto de botones, debemos de seguir los siguientes lineamientos de experiencia de usuario y accesibilidad web:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Estados de los botones<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Jerarqu\u00eda de los botones<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Sistema de dise\u00f1o (Atomic Design) (De lo micro a lo macro)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Qu\u00e9 estados tienen los botones<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Los botones en el dise\u00f1o de experiencia de usuario (botones ux) se caracterizan por tener <strong>diferentes estados<\/strong>. Los estados de un bot\u00f3n modifican su apariencia y comportamiento con base a las acciones del usuario. Esto es \u00fatil porque un bot\u00f3n con m\u00faltiples estados y comportamientos le proporcionan al usuario una mejor experiencia con la interfaz al proporcionar una <strong>retroalimentaci\u00f3n activa y mayor control.<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Cuando se le ense\u00f1a a programadores y dise\u00f1adores UX acerca del estado de los botones, la respuesta est\u00e1ndar es mencionar tres estados. Activo, inactivo y hover. Sin embargo, esto es solo una peque\u00f1a parte de lo que realmente involucra los estados de un bot\u00f3n.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Estado predeterminado<\/strong> <\/h4>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">En el dise\u00f1o de botones UX, se define como el estado que ver\u00e1 el usuario de forma preestablecida del bot\u00f3n en la interfaz. No hay un consenso establecido del color ideal para un bot\u00f3n o su comportamiento predeterminado en la experiencia de usuario. Por lo que este aspecto suele trabajarse de forma m\u00e1s personalizada.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"704\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-predeterminado-1-1024x704.jpg\" alt=\"\" class=\"wp-image-5330\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-predeterminado-1-1024x704.jpg 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-predeterminado-1-300x206.jpg 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-predeterminado-1-768x528.jpg 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-predeterminado-1-1536x1056.jpg 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-predeterminado-1-600x413.jpg 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-predeterminado-1.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Estado hover<\/strong><\/h4>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Es el estado que tiene el bot\u00f3n cuando se coloca el cursor encima.&nbsp; De esta manera le indicamos al usuario que el bot\u00f3n se le puede dar clic y es interactivo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"340\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Hover-1024x340.png\" alt=\"\" class=\"wp-image-5335\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Hover-1024x340.png 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Hover-300x100.png 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Hover-768x255.png 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Hover-1536x510.png 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Hover-600x199.png 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Hover.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Estado activo<\/strong><\/h4>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Es el estado del bot\u00f3n cuando ya ha sido presionado anteriormente. Le informa al usuario que el bot\u00f3n ha recibido la acci\u00f3n que ha ingresado. Tipicamente es utilizado para gu\u00edar al usuario a otra secci\u00f3n o funcionalidad<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"340\" data-id=\"5343\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Activo-1024x340.png\" alt=\"bot\u00f3n estado activo ejemplo\" class=\"wp-image-5343\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Activo-1024x340.png 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Activo-300x100.png 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Activo-768x255.png 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Activo-1536x510.png 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Activo-600x199.png 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Activo.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Estado enfocado<\/strong><\/h4>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">En el dise\u00f1o de botones UX, el estado enfocado es el estado al que pasa un bot\u00f3n cuando otro elemento de la interfaz ha realizado una acci\u00f3n. Es t\u00edpicamente usado para la navegaci\u00f3n por teclado. Este bot\u00f3n solo aparece cuando se usa el teclado, o para cualquier elemento que admita la entrada del teclado del equipo (como la entrada de texto) La compatibilidad en navegador es limitada.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"340\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-enfocado-jpeg-1024x340.jpg\" alt=\"\" class=\"wp-image-5344\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-enfocado-jpeg-1024x340.jpg 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-enfocado-jpeg-300x100.jpg 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-enfocado-jpeg-768x255.jpg 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-enfocado-jpeg-1536x510.jpg 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-enfocado-jpeg-600x199.jpg 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-enfocado-jpeg.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Estado inactivo<\/strong><\/h4>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Cuando se manejan botones, por lo general el estado inactivo busca informar al usuario que este bot\u00f3n no est\u00e1 siendo usado. Estos botones tienen menor prioridad visual y buscan decirle al usuario que no se encuentran activos o recibiendo informaci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"340\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Inactivo-1024x340.jpg\" alt=\"\" class=\"wp-image-5345\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Inactivo-1024x340.jpg 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Inactivo-300x100.jpg 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Inactivo-768x255.jpg 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Inactivo-1536x510.jpg 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Inactivo-600x199.jpg 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Estado-Inactivo.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Estado de carga<\/strong><\/h4>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">En el dise\u00f1o de botones UX, se toma en consideraci\u00f3n que, a veces, la interfaz de usuario carga mucho m\u00e1s r\u00e1pido que la funcionalidad, es all\u00ed en donde un estado de carga que le indique a los usuarios m\u00e1s impacientes que su acci\u00f3n ha sido recibida correctamente y se est\u00e1 procesando es bastante \u00fatil.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"340\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-cargando-1024x340.jpg\" alt=\"\" class=\"wp-image-5346\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-cargando-1024x340.jpg 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-cargando-300x100.jpg 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-cargando-768x255.jpg 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-cargando-1536x510.jpg 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-cargando-600x199.jpg 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-cargando.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Estado alternado<\/strong><\/h4>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Este estado es bastante \u00fatil para dise\u00f1o de botones ux, al poder indicar la dualidad entre dos acciones (ejemplo: modo nocturno, modo claro) Es como usar un interruptor de luz que nos refleja ambos estados (encendido y apagado). Este estado le permite al usuario elegir entre dos condiciones, como activar o desactivar una funci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"340\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-alternado-1024x340.jpg\" alt=\"boton alternado ejemplo\" class=\"wp-image-5347\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-alternado-1024x340.jpg 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-alternado-300x100.jpg 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-alternado-768x255.jpg 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-alternado-1536x510.jpg 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-alternado-600x199.jpg 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Boton-alternado.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>La importancia de los estados en los botones UX<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Los estados de los botones son pistas o se\u00f1ales visuales que ayudan al usuario a entender las posibles interacciones que est\u00e1 teniendo con el bot\u00f3n dentro de la interfaz de usuario.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Ejemplo de sistema de uso de botones (Figma)<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"803\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/botones_optimizado_Guia-de-uso-sistema-de-botones-Figma-1024x803.jpg\" alt=\"Gu\u00eda de uso de botones ejemplo\" class=\"wp-image-5350\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/botones_optimizado_Guia-de-uso-sistema-de-botones-Figma-1024x803.jpg 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/botones_optimizado_Guia-de-uso-sistema-de-botones-Figma-300x235.jpg 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/botones_optimizado_Guia-de-uso-sistema-de-botones-Figma-768x602.jpg 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/botones_optimizado_Guia-de-uso-sistema-de-botones-Figma-1536x1205.jpg 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/botones_optimizado_Guia-de-uso-sistema-de-botones-Figma-600x471.jpg 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/botones_optimizado_Guia-de-uso-sistema-de-botones-Figma.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Jerarqu\u00eda en el uso de botones<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Los botones no solo tienen diferentes estados, sino que tambi\u00e9n manejan un sistema de jerarqu\u00eda. Esta es una excelente pr\u00e1ctica a nivel web porque no solo facilita el proceso de dise\u00f1o y desarrollo con estilos predeterminados seg\u00fan la jerarqu\u00eda del bot\u00f3n, sino que tambi\u00e9n.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\"><strong>Bot\u00f3n primario:<\/strong> Son los botones que llevan al usuario a cumplir con el objetivo principal del sitio web. Debe de resaltar de los dem\u00e1s, siendo prominente y contrastante con su entorno. T\u00edpicamente, es usado para la acci\u00f3n principal que queremos que el usuario tome.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-botones-ux-interfaz-de-usuario-outlook-1-1024x401.png\" alt=\"ejemplo dise\u00f1o de boton ux - Outlook\" class=\"wp-image-5272\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-botones-ux-interfaz-de-usuario-outlook-1-1024x401.png 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-botones-ux-interfaz-de-usuario-outlook-1-300x117.png 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-botones-ux-interfaz-de-usuario-outlook-1-768x300.png 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-botones-ux-interfaz-de-usuario-outlook-1-1536x601.png 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-botones-ux-interfaz-de-usuario-outlook-1-600x235.png 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-botones-ux-interfaz-de-usuario-outlook-1.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">En el ejemplo de <a href=\"https:\/\/outlook.office.com\">Outlook<\/a> podemos ver como toda la interfaz genera un recorrido visual que gu\u00eda al usuario a la acci\u00f3n principal, que es enviar un correo nuevo.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-boton-ux-interfaz-de-usuario-unity-learn-ejemplo-1024x460.png\" alt=\"Ejemplo de dise\u00f1o de bot\u00f3n UX - Unity Learn\" class=\"wp-image-5273\" srcset=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-boton-ux-interfaz-de-usuario-unity-learn-ejemplo-1024x460.png 1024w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-boton-ux-interfaz-de-usuario-unity-learn-ejemplo-300x135.png 300w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-boton-ux-interfaz-de-usuario-unity-learn-ejemplo-768x345.png 768w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-boton-ux-interfaz-de-usuario-unity-learn-ejemplo-1536x690.png 1536w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-boton-ux-interfaz-de-usuario-unity-learn-ejemplo-600x269.png 600w, https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/02\/diseno-de-boton-ux-interfaz-de-usuario-unity-learn-ejemplo.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">En el caso de <em><a href=\"https:\/\/learn.unity.com\/\">Unity Learn<\/a><\/em> tenemos que, al ser una plataforma de aprendizaje, la funci\u00f3n principal es la de iniciar sesi\u00f3n para que los usuarios se registren.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\"><strong>Bot\u00f3n secundario<\/strong>: Son los botones que llevan al usuario a cumplir con tareas y objetivos secundarios que complementan y le acercan m\u00e1s a cumplir el objetivo principal del sitio. Se caracterizan por ser menos prominentes, pero servir como un elemento complementario. Esto es clave para dise\u00f1o de botones ux.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\"><strong>Bot\u00f3n terciario:<\/strong> Son botones que se utilizan para realizar tareas de menor prioridad. Se caracterizan por ser los botones menos prominentes dentro de la web y tener poco \u00e9nfasis a comparaci\u00f3n de otros elementos visuales e interactivos. Los botones terciarios tambi\u00e9n pueden reducirse a ser textos con hiperv\u00ednculos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"line-height:1.3\"><strong>C\u00f3mo integrar correctamente botones a mi experiencia de usuario<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">La mejor manera de integrar botones a su experiencia de usuario es integrarlos bajo la misma l\u00ednea gr\u00e1fica y coherencia en su interactividad. Esto quiere decir que los botones deben de lucir semejantes entre ellos y deben funcionar de manera similar.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">De lo contrario, terminas con un conjunto de botones que hacen todo lo contrario y terminan generando ruido tanto desde la perspectiva visual como desde la perspectiva funcional.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>C\u00f3mo optimizar botones en la experiencia de usuario<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">An\u00e1lisis del bot\u00f3n<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Identifique y recopile todos los botones que su p\u00e1gina o sitio web que desea optimizar.<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Identifique si estos botones se rigen bajo una misma hoja de estilos CSS<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Utilice una herramienta de anal\u00edtica digital como: Google Analytics, Google Tag Manager, MonsterInsights, Microsoft Clarity o incluso cosas como un atributo de datos en HTML5 para poder identificar cuantos usuarios le est\u00e1n dando clic a sus botones.<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Calcule su CTR o Clic-Through Rate (tasa de clics) usando las sesiones que recibi\u00f3 esa URL y el dato de cuantos usuarios le dieron clic al bot\u00f3n<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Evalu\u00e9 si se encuentra por debajo del 3.5% (Este es un est\u00e1ndar clave, que puede variar seg\u00fan la industria)<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Analice el copy del bot\u00f3n e implemente mejoras mercadol\u00f3gicas.<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Vea la apariencia visual del bot\u00f3n e implemente mejoras como a\u00f1adir un icono que ayude al usuario a entender de forma m\u00e1s visual y descriptiva lo que el bot\u00f3n hace.<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Analice su ubicaci\u00f3n y eval\u00fae si es coherente tener el bot\u00f3n en esa secci\u00f3n de su sitio web, si sirve realmente de algo tener un bot\u00f3n all\u00ed o si simplemente necesita ser m\u00e1s visible en el recorrido visual o la p\u00e1gina en la que se est\u00e1 desplegando el bot\u00f3n.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Acciones clave<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Si no tiene una gu\u00eda de marca o de interfaz de usuario, dise\u00f1e una y unifique la apariencia visual de los botones. Tome en consideraci\u00f3n el alto m\u00ednimo de los botones en p\u00edxeles, las esquinas de los botones, el tipo de color, estados, uso de sombras, entre otros datos clave.<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Evalu\u00e9 las interacciones que realiza el bot\u00f3n cuando el usuario hace clic. H\u00e1gase preguntas como: \u00bfMuestra una animaci\u00f3n de carga el bot\u00f3n cuando es usado? \u00bfCambia de color cuando el usuario hace hover? \u00bfSe desactiva y reactiva al interactuar con \u00e9l? \u00bfRealmente est\u00e1 llevando o haciendo lo que dice el texto del bot\u00f3n de forma inmediata o se tiene que esperar un poco? Eval\u00fae todo eso e implemente las mejoras<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">A\u00f1ade mensajes inferiores o <em>tool tips<\/em> a los botones que tiene funcionamientos complejos u objeciones marcadas por los usuarios, para dar mayor contexto.<\/li>\n\n\n\n<li style=\"line-height:2.2\" class=\"has-medium-font-size\">Defina un periodo de prueba, lance los botones, recopile los resultados y eval\u00fae si los cambios han sido efectivos y si se han implementado correctamente.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Qu\u00e9 tipo de copy o CTA deber\u00edan de tener mis botones<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">El copy o texto que se encuentra dentro de los botones que colocamos en nuestro sitio web, es un llamado a la acci\u00f3n que se enfoca en persuadir al usuario de tomar una acci\u00f3n predeterminada. Ahora, qu\u00e9 tipo de copy o CTA deber\u00edan de tener tus botones, pues b\u00e1sicamente uno que contenga las siguientes caracter\u00edsticas.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Descriptivo <\/h5>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">El bot\u00f3n debe de dejar en claro lo que exactamente va a pasar despu\u00e9s de que el usuario le d\u00e9 clic. Un error com\u00fan es colocar al bot\u00f3n \u201cComprar\u201d cuando en realidad el bot\u00f3n va a llevar al usuario a su carrito. En ese ejemplo, puede que \u201cComprar\u201d no sea lo m\u00e1s adecuado y en su lugar un texto como \u201cAgregar a mi carrito\u201d sea m\u00e1s descriptivo.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Atractivo<\/h5>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Puedes hacer el copy de tus botones m\u00e1s atractivos si se enfoca en acciones que le dan valor al usuario. No es lo mismo un copy que dice \u201cdescargar\u201d a uno que dice \u201cDescargar mi plan de marketing gratuito\u201d. Otro ejemplo es como se puede pasar de \u201cEmpezar periodo de prueba\u201d a \u201cReclamar mis 1000 h de videos gratis\u201d. Y s\u00ed, es m\u00e1s largo. Pero es m\u00e1s atractivo. Usa este recurso cuando sea necesario, no endulces demasiado todos los botones. Porque puede tener el efecto contrario al ser percibido por el usuario como algo vende humo.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Predictivo<\/h5>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Una gran manera de hacer un bot\u00f3n ux con un copy que valga la pena es hacerlo predictivo a las objeciones del usuario. El utilizar par\u00e9ntesis para un CTA que aclare la objeci\u00f3n o impedimento m\u00e1s com\u00fan a darle clic. Ejemplos como \u201cProbar gratis (Sin tarjeta de cr\u00e9dito)\u201d puede predecir ese dolor que tienen los usuarios al probar un servicio gratis.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Personal<\/h5>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">De acuerdo con el estudio de Hubspot, Vora, A. (2023) \u201cLos llamados a la acci\u00f3n personalizados funcionan un 202% mejor que los CTA b\u00e1sicos\u201d por otro lado, te recomiendo para hacer la comunicaci\u00f3n m\u00e1s personal en el copy aplicar en sus botones un cambio en la comunicaci\u00f3n. Pasando de hablar en tercera persona (Contactar) a hablar en primera (S\u00ed, Cont\u00e1ctame) por ejemplo en lugar de decir \u201cdescargar\u201d podemos poner \u201cDescargar mi gu\u00eda gratis\u201d.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Consecuente<\/h5>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:2.2\">Describir la consecuencia que el usuario va a experimentar en el copy del bot\u00f3n. Expandiendo en esto de acuerdo con el estudio de Kaley, A. (2024) \u201cLos comandos siempre deben reflejar el estado al que se mover\u00e1 el sistema, en lugar del estado actual.\u201d Es decir, es necesario demostrarle al usuario en el microcopy de los botones de la interfaz lo que va a ocurrir cuando el usuario le de clic al bot\u00f3n. Por ejemplo, en lugar de \u201cbarra de herramientas\u201d algo como \u201cMostrar barrar barra de herramientas\u201d as\u00ed como \u201cOcultar barra de herramientas\u201d puede ser m\u00e1s consecuente y entendible para los usuarios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"line-height:2.2\">Vora, A. (2023, 14 julio). 15 Call-to-Action Statistics You need to know about to increase your conversion rate. blog.hubspot.com. Recuperado 8 de marzo de 2024, de <a href=\"https:\/\/blog.hubspot.com\/marketing\/personalized-calls-to-action-convert-better-data\">https:\/\/blog.hubspot.com\/marketing\/personalized-calls-to-action-convert-better-data<\/a><\/li>\n\n\n\n<li style=\"line-height:2.2\">Kaley, A. (2024, 31 enero). UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts. Nielsen Norman Group. <a href=\"https:\/\/www.nngroup.com\/articles\/ui-copy\/\">https:\/\/www.nngroup.com\/articles\/ui-copy\/<\/a><\/li>\n\n\n\n<li style=\"line-height:2.2\">What\u2019s a good CTA Click-Through Rate? [New research]. (2024, 8 marzo). Vye. <a href=\"https:\/\/www.vye.agency\/blog\/whats-a-good-call-to-action-click-through-rate\">https:\/\/www.vye.agency\/blog\/whats-a-good-call-to-action-click-through-rate<\/a><\/li>\n\n\n\n<li style=\"line-height:2.2\">Button Design: Best Practices for Optimal UI Buttons \u2013 Baymard Institute. (s. f.). Baymard Institute. <a href=\"https:\/\/baymard.com\/learn\/button-design\">https:\/\/baymard.com\/learn\/button-design<\/a><\/li>\n\n\n\n<li style=\"line-height:2.2\"><em>Search Advertising Benchmarks | Created with Datawrapper<\/em>. (s.&nbsp;f.). Create Charts And Maps With Datawrapper.&nbsp;<a href=\"https:\/\/www.datawrapper.de\/_\/ySkth\/\">https:\/\/www.datawrapper.de\/_\/ySkth\/<\/a><\/li>\n\n\n\n<li style=\"line-height:2.2\">Harley, A. (2023, 11 abril).&nbsp;<em>Touch Targets on Touchscreens<\/em>. Nielsen Norman Group.&nbsp;<a href=\"https:\/\/www.nngroup.com\/articles\/touch-target-size\/\">https:\/\/www.nngroup.com\/articles\/touch-target-size\/<\/a><\/li>\n\n\n\n<li style=\"line-height:2.2\">Edwards, S., &amp; Edwards, S. (2023, 8 septiembre).&nbsp;<em>A guide to BUTTON DESIGN &amp; implementation | MiC<\/em>. Make It Clear.&nbsp;<a href=\"https:\/\/makeitclear.com\/ux-ui-tips-a-guide-to-creating-buttons\/\">https:\/\/makeitclear.com\/ux-ui-tips-a-guide-to-creating-buttons\/<\/a><\/li>\n\n\n\n<li style=\"line-height:2.2\">Jin, Z. X., Plocher, T., &amp; Kiff, L. (2007). Touch Screen User Interfaces for Older Adults: Button Size and Spacing. En Lecture Notes in Computer Science (pp. 933-941). <a href=\"https:\/\/doi.org\/10.1007\/978-3-540-73279-2_104\">https:\/\/doi.org\/10.1007\/978-3-540-73279-2_104<\/a><\/li>\n\n\n\n<li style=\"line-height:2.2\">Anthony. (2019, 28 febrero). Optimal Size and Spacing for Mobile Buttons. UX Movement. <a href=\"https:\/\/uxmovement.com\/mobile\/optimal-size-and-spacing-for-mobile-buttons\/\">https:\/\/uxmovement.com\/mobile\/optimal-size-and-spacing-for-mobile-buttons\/<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1o de botones UX: GU\u00cdA COMPLETA &#8211; Mejores pr\u00e1cticas\ud83d\udea6: Para dise\u00f1ar botones en el \u00e1mbito del UI\/UX existe un conjunto [&hellip;]<\/p>","protected":false},"author":1,"featured_media":5349,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[8,11],"tags":[78,18],"class_list":["post-5267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-brand-guidelines","category-ui-ux","tag-diseno-web","tag-ui-ux"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.11 (Yoast SEO v28.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Dise\u00f1o de botones UX: GU\u00cdA COMPLETA - Mejores pr\u00e1cticas\ud83d\udea6<\/title>\n<meta name=\"description\" content=\"\u00bfTienes que dise\u00f1ar un bot\u00f3n con l\u00f3gica UX? Te comparto esta GU\u00cdA 100% COMPLETA de Mejores pr\u00e1cticas UI\/UX para dise\u00f1o de botones UX.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/oliverpuente.com\/en\/ui-ux\/diseno-de-botones-ux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA - Mejores pr\u00e1cticas para dise\u00f1ar botones que convierten\" \/>\n<meta property=\"og:description\" content=\"UI\/UX\" \/>\n<meta property=\"og:url\" content=\"https:\/\/oliverpuente.com\/en\/ui-ux\/diseno-de-botones-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"oliverpuente\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/oliver.branding\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/oliver.branding\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-14T22:56:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-28T18:45:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"570\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Oliver Puente\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oliver Puente\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/\"},\"author\":{\"name\":\"Oliver Puente\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"headline\":\"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA &#8211; Mejores pr\u00e1cticas para dise\u00f1ar botones que convierten\",\"datePublished\":\"2024-06-14T22:56:09+00:00\",\"dateModified\":\"2024-07-28T18:45:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/\"},\"wordCount\":2402,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"image\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Diseno-de-botones-UX-1.jpg\",\"keywords\":[\"dise\u00f1o web\",\"UI\\\/UX\"],\"articleSection\":[\"Brand Guidelines\",\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/\",\"name\":\"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA - Mejores pr\u00e1cticas\ud83d\udea6\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Diseno-de-botones-UX-1.jpg\",\"datePublished\":\"2024-06-14T22:56:09+00:00\",\"dateModified\":\"2024-07-28T18:45:29+00:00\",\"description\":\"\u00bfTienes que dise\u00f1ar un bot\u00f3n con l\u00f3gica UX? Te comparto esta GU\u00cdA 100% COMPLETA de Mejores pr\u00e1cticas UI\\\/UX para dise\u00f1o de botones UX.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/#primaryimage\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Diseno-de-botones-UX-1.jpg\",\"contentUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Diseno-de-botones-UX-1.jpg\",\"width\":1024,\"height\":570,\"caption\":\"dise\u00f1o de botones ux\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/diseno-de-botones-ux\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/oliverpuente.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA &#8211; Mejores pr\u00e1cticas para dise\u00f1ar botones que convierten\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#website\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/\",\"name\":\"oliverpuente\",\"description\":\"Identidad de marca - Dise\u00f1ador de identidad de marca\",\"publisher\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"alternateName\":\"Oliver Puente\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/oliverpuente.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\",\"name\":\"Oliver Puente\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"contentUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"width\":609,\"height\":186,\"caption\":\"Oliver Puente\"},\"logo\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\"},\"description\":\"Dise\u00f1ador freelance de identidad de marca y UI\\\/UX con sede en Guatemala. Oliver Puente ayuda a las empresas a modernizar sus marcas.\",\"sameAs\":[\"http:\\\/\\\/www.oliverpuente.com\",\"https:\\\/\\\/www.facebook.com\\\/oliver.branding\",\"https:\\\/\\\/www.instagram.com\\\/oliver.branding\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/oliver-puente-branding\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/oliverpuente916\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/Dizalo\\\/featured\"],\"knowsAbout\":[\"Branding\",\"UI\",\"UX\",\"Dise\u00f1o Web\"],\"knowsLanguage\":[\"espa\u00f1ol\",\"ingl\u00e9s\"],\"jobTitle\":\"Dise\u00f1ador de marcas\",\"worksFor\":\"Dizalo\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/en\\\/author\\\/puentegutierrezzzoliversho\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA - Mejores pr\u00e1cticas\ud83d\udea6","description":"\u00bfTienes que dise\u00f1ar un bot\u00f3n con l\u00f3gica UX? Te comparto esta GU\u00cdA 100% COMPLETA de Mejores pr\u00e1cticas UI\/UX para dise\u00f1o de botones UX.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/oliverpuente.com\/en\/ui-ux\/diseno-de-botones-ux\/","og_locale":"en_US","og_type":"article","og_title":"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA - Mejores pr\u00e1cticas para dise\u00f1ar botones que convierten","og_description":"UI\/UX","og_url":"https:\/\/oliverpuente.com\/en\/ui-ux\/diseno-de-botones-ux\/","og_site_name":"oliverpuente","article_publisher":"https:\/\/www.facebook.com\/oliver.branding","article_author":"https:\/\/www.facebook.com\/oliver.branding","article_published_time":"2024-06-14T22:56:09+00:00","article_modified_time":"2024-07-28T18:45:29+00:00","og_image":[{"width":1024,"height":570,"url":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1.jpg","type":"image\/jpeg"}],"author":"Oliver Puente","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Oliver Puente","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/#article","isPartOf":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/"},"author":{"name":"Oliver Puente","@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"headline":"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA &#8211; Mejores pr\u00e1cticas para dise\u00f1ar botones que convierten","datePublished":"2024-06-14T22:56:09+00:00","dateModified":"2024-07-28T18:45:29+00:00","mainEntityOfPage":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/"},"wordCount":2402,"commentCount":0,"publisher":{"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"image":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1.jpg","keywords":["dise\u00f1o web","UI\/UX"],"articleSection":["Brand Guidelines","UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/","url":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/","name":"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA - Mejores pr\u00e1cticas\ud83d\udea6","isPartOf":{"@id":"https:\/\/oliverpuente.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/#primaryimage"},"image":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1.jpg","datePublished":"2024-06-14T22:56:09+00:00","dateModified":"2024-07-28T18:45:29+00:00","description":"\u00bfTienes que dise\u00f1ar un bot\u00f3n con l\u00f3gica UX? Te comparto esta GU\u00cdA 100% COMPLETA de Mejores pr\u00e1cticas UI\/UX para dise\u00f1o de botones UX.","breadcrumb":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/#primaryimage","url":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1.jpg","contentUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/06\/Diseno-de-botones-UX-1.jpg","width":1024,"height":570,"caption":"dise\u00f1o de botones ux"},{"@type":"BreadcrumbList","@id":"https:\/\/oliverpuente.com\/ui-ux\/diseno-de-botones-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/oliverpuente.com\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o de botones UX: GU\u00cdA COMPLETA &#8211; Mejores pr\u00e1cticas para dise\u00f1ar botones que convierten"}]},{"@type":"WebSite","@id":"https:\/\/oliverpuente.com\/#website","url":"https:\/\/oliverpuente.com\/","name":"oliverpuente","description":"Identidad de marca - Dise\u00f1ador de identidad de marca","publisher":{"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"alternateName":"Oliver Puente","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/oliverpuente.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7","name":"Oliver Puente","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","url":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","contentUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","width":609,"height":186,"caption":"Oliver Puente"},"logo":{"@id":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg"},"description":"Dise\u00f1ador freelance de identidad de marca y UI\/UX con sede en Guatemala. Oliver Puente ayuda a las empresas a modernizar sus marcas.","sameAs":["http:\/\/www.oliverpuente.com","https:\/\/www.facebook.com\/oliver.branding","https:\/\/www.instagram.com\/oliver.branding\/","https:\/\/www.linkedin.com\/in\/oliver-puente-branding\/","https:\/\/www.pinterest.com\/oliverpuente916\/","https:\/\/www.youtube.com\/c\/Dizalo\/featured"],"knowsAbout":["Branding","UI","UX","Dise\u00f1o Web"],"knowsLanguage":["espa\u00f1ol","ingl\u00e9s"],"jobTitle":"Dise\u00f1ador de marcas","worksFor":"Dizalo","url":"https:\/\/oliverpuente.com\/en\/author\/puentegutierrezzzoliversho\/"}]}},"_links":{"self":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/comments?post=5267"}],"version-history":[{"count":5,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5267\/revisions"}],"predecessor-version":[{"id":5493,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5267\/revisions\/5493"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/media\/5349"}],"wp:attachment":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/media?parent=5267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/categories?post=5267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/tags?post=5267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}