{"id":549,"date":"2019-09-18T09:00:41","date_gmt":"2019-09-18T07:00:41","guid":{"rendered":"http:\/\/webposible.com\/xposible\/?p=549"},"modified":"2019-09-16T16:59:07","modified_gmt":"2019-09-16T14:59:07","slug":"el-boton-de-los-300-millones-de-dolares-disenar-un-boton-como-ejercicio","status":"publish","type":"post","link":"http:\/\/webposible.com\/xposible\/2019\/el-boton-de-los-300-millones-de-dolares-disenar-un-boton-como-ejercicio\/","title":{"rendered":"El bot\u00f3n de los 300 millones de d\u00f3lares. Dise\u00f1ar un bot\u00f3n como ejercicio"},"content":{"rendered":"\n<h2>El bot\u00f3n de los 300 millones de d\u00f3lares<\/h2>\n\n\n\n<p>\u00bfConoc\u00e9is la vieja historia del bot\u00f3n de los 300 millones de d\u00f3lares que cont\u00f3 <span lang=\"en\">Jared M. Spool<\/span> en el 2009 (<a href=\"https:\/\/articles.uie.com\/three_hund_million_button\/\" lang=\"en\" hreflang=\"en\">The $300 Million Button<\/a>)? Es interesante. C\u00f3mo al cambiar, entre otras cosas, el texto de un bot\u00f3n, mejor\u00f3 en 300 millones de d\u00f3lares las ventas anuales en una web de comercio electr\u00f3nico.<\/p>\n\n\n\n<p>\u00bfQu\u00e9 ocurri\u00f3? \u00bfc\u00f3mo pudo afectar tanto a las ventas el cambio de un bot\u00f3n?<br \/> Contexto: en una web de comercio electr\u00f3nico, al comenzar el proceso de compra tras tener el carro con la compra deseada, aparec\u00eda un formulario en el que se ped\u00eda el usuario, la contrase\u00f1a, y la posibilidad de entrar en la p\u00e1gina web (para confirmar la direcci\u00f3n de entrega y el medio de pago) o la de darse de alta. Ah, y tambi\u00e9n el enlace de olvido de contrase\u00f1a.<\/p>\n\n\n\n<p>Es decir, algo como:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"314\" height=\"220\" src=\"http:\/\/webposible.com\/xposible\/wp-content\/uploads\/2019\/09\/recreacion-formulario-pago.png\" alt=\"Campo de usuario, contrase\u00f1a, bot\u00f3n de acceso y v\u00ednculos de olvid\u00e9 mi contrase\u00f1a y darme de alta.\" class=\"wp-image-550\" srcset=\"http:\/\/webposible.com\/xposible\/wp-content\/uploads\/2019\/09\/recreacion-formulario-pago.png 314w, http:\/\/webposible.com\/xposible\/wp-content\/uploads\/2019\/09\/recreacion-formulario-pago-300x210.png 300w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><figcaption>Recreaci\u00f3n libre del formulario del carro de la compra.<\/figcaption><\/figure><\/div>\n\n\n\n<p>\u00bfQu\u00e9 problemas pod\u00edan haber (recordemos, a\u00f1o 2009)? De todo tipo:<\/p>\n\n\n\n<ul><li>Usuarios que no quieren registrarse en la web (s\u00f3lo quer\u00edan comprar).<\/li><li>Usuarios dados de alta que dudan cu\u00e1l es la direcci\u00f3n de correo electr\u00f3nico que tienen como usuario.<\/li><li>Usuarios que se hab\u00edan dado de alta con varias direcciones de correo electr\u00f3nicas diferentes.<\/li><li>Usuarios que no recuerdan la contrase\u00f1a.<\/li><\/ul>\n\n\n\n<p>La consecuencia: en esa p\u00e1gina se produc\u00eda un cuello de botella que imped\u00eda finalizar la compra.<\/p>\n\n\n\n<p>La <strong>soluci\u00f3n<\/strong>: tras realizar pruebas con usuarios, pasa por cambiar el literal de un bot\u00f3n (de \u00abdarse de alta\u00bb a \u00abcontinuar\u00bb), e incluir un texto indicando que se puede comprar sin darse de alta.<\/p>\n\n\n\n<p>El resultado: 15 millones m\u00e1s de ventas en un mes, y 300 millones en un a\u00f1o (de ah\u00ed el sugerente t\u00edtulo del art\u00edculo para los que se excitan con d\u00f3lares).<\/p>\n\n\n\n<h2>Dise\u00f1ando un bot\u00f3n: un elemento fundamental<\/h2>\n\n\n\n<p>Siempre me ha intrigado el proceso que est\u00e1 detr\u00e1s de la toma de decisiones en un dise\u00f1o. El porqu\u00e9.<\/p>\n\n\n\n<p>Porque se supone que detr\u00e1s de una decisi\u00f3n de dise\u00f1o (particularizando en una p\u00e1gina web: fuente, tama\u00f1o, color, posici\u00f3n, rejilla,\u2026) deber\u00eda haber motivos que fundamentan esa decisi\u00f3n. \u00bfC\u00f3mo ejercitar esa habilidad o conocimiento?<\/p>\n\n\n\n<blockquote xml:lang=\"en\"><p>What if, instead of trying to design an entire page with dozens of elements (nav, text, input controls, a logo, etc.), we consciously started by designing the simplest thing possible? We deliberately limit the playing field to one, tiny thing and see what we learn? Let\u2019s try.<\/p>\n<p>What is the simplest possible element? I vote that it\u2019s a button.<\/p><\/blockquote>\n<p lang=\"en\"><cite><a href=\"http:\/\/alistapart.com\/article\/the-king-vs-pawn-game-of-ui-design\/\" lang=\"en\" hreflang=\"en\">The King vs. Pawn Game of UI Design<\/a> \u2014 Erik D. Kennedy<\/cite><\/p>\n\n\n\n<p>Enumeremos algunas caracter\u00edsticas de un <em>simple<\/em> bot\u00f3n:<\/p>\n\n\n\n<ul><li>tama\u00f1o<\/li><li>texto<\/li><li>fuente<\/li><li>tama\u00f1o y efecto de la fuente<\/li><li>color de fondo (\u00bfgradiente de colores?)<\/li><li>color del texto<\/li><li>acompa\u00f1ar o no de un icono<\/li><li>padding (separaci\u00f3n del texto y el borde)<\/li><li>margen (separaci\u00f3n entre el bot\u00f3n y el resto de los elementos)<\/li><li>forma (esquinas cuadradas, redondeadas, radio de la redondez)<\/li><li>tipo de acci\u00f3n que realiza (continuar un proceso, acci\u00f3n \u00abpeligrosa\u00bb, acci\u00f3n neutra, acci\u00f3n principal, acci\u00f3n secundaria,\u2026)<\/li><\/ul>\n\n\n\n<p>Podemos delegar varias caracter\u00edsticas al estilo por defecto que tenga el navegador (en el caso de una p\u00e1gina web), o a alg\u00fan <em lang=\"en\">framework<\/em> con posibles s\u00edntomas de vigorexia.<\/p>\n\n\n\n<p>O podemos dise\u00f1ar un simple bot\u00f3n. Con el objetivo de cumplir los requisitos del proyecto (real o ficticio). Intentando argumentar cada caracter\u00edstica. Me parece un ejercicio muy saludable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El bot\u00f3n de los 300 millones de d\u00f3lares \u00bfConoc\u00e9is la vieja historia del bot\u00f3n de los 300 millones de d\u00f3lares que cont\u00f3 Jared M. Spool en el 2009 (The $300 Million Button)? Es interesante. C\u00f3mo al cambiar, entre otras cosas, el texto de un bot\u00f3n, mejor\u00f3 en 300 millones de d\u00f3lares las ventas anuales en [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,62,47,48],"tags":[],"_links":{"self":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/549"}],"collection":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/comments?post=549"}],"version-history":[{"count":7,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/549\/revisions"}],"predecessor-version":[{"id":557,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/549\/revisions\/557"}],"wp:attachment":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/media?parent=549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/categories?post=549"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/tags?post=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}