{"id":60247,"date":"2024-02-20T10:22:17","date_gmt":"2024-02-20T09:22:17","guid":{"rendered":"https:\/\/www.makingscience.com\/?p=60247"},"modified":"2024-02-20T10:22:17","modified_gmt":"2024-02-20T09:22:17","slug":"diseno-responsivo-y-accesibilidad-dominando-las-interfaces-web-centradas-en-el-usuario","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/diseno-responsivo-y-accesibilidad-dominando-las-interfaces-web-centradas-en-el-usuario\/","title":{"rendered":"Dise\u00f1o Responsive y Accesibilidad: Dominando las Interfaces Web Centradas en el Usuario"},"content":{"rendered":"<h3><b>La Sorprendente Realidad de la Accesibilidad Web M\u00f3vil<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">La accesibilidad web ha sido un tema muy sonado durante m\u00e1s de dos d\u00e9cadas, enfatizando la importancia de garantizar una experiencia online inclusiva para todos los usuarios.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">El 65% del tr\u00e1fico web en Europa proviene de dispositivos m\u00f3viles, y Google ha indicado claramente su apoyo a sitios web optimizados para m\u00f3viles al favorecerlos en su clasificaci\u00f3n.<\/span><\/p>\n<h3><b>Optimizaci\u00f3n M\u00f3vil: Expectativa vs. Realidad<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Hoy en d\u00eda, todos los anunciantes deber\u00edan tener un sitio web optimizado para m\u00f3viles que cumpla con los principios b\u00e1sicos de accesibilidad.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sin embargo, a pesar de los avances, la realidad es bastante diferente. Un estudio realizado por Making Science en 2022 muestra que, entre otros hallazgos, el 72% de los sitios web de las empresas del IBEX 35 (el principal \u00edndice burs\u00e1til de la Bolsa espa\u00f1ola), presentan carencias en sus webs en cuesti\u00f3n de accesibilidad m\u00f3vil.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Asimismo, todav\u00eda encontramos clientes que nos piden auditar su sitio web, s\u00f3lo para descubrir que el dise\u00f1o no estaba inicialmente pensado para m\u00f3viles.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Esto es particularmente grave porque al no optimizar la experiencia para la mayor\u00eda del tr\u00e1fico se exponen a perder puntos de conversi\u00f3n, leads y ventas.<\/span><\/p>\n<h3><b>Dise\u00f1o Responsive vs. Mobile First<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Adem\u00e1s, mostrar\u00a0 un sitio web \u201cdecentemente\u201d en un dispositivo m\u00f3vil no significa que est\u00e9 optimizado para conversiones. Para aclarar, el t\u00e9rmino \u00abresponsive\u00bb no es lo mismo que\u00a0 \u00abMobile First\u00bb.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Al dise\u00f1ar un sitio web, generalmente hay 2 o 3 versiones para diferentes tipos de dispositivos: Escritorio, M\u00f3vil y, a veces, Tablet. Fundamentalmente hay dos maneras de trabajar: empezar con el m\u00f3vil y avanzar hacia formatos m\u00e1s grandes, conocido como \u00abMobile First\u00bb, o viceversa. Este primer enfoque tiene m\u00e1s sentido ya que atiende a la mayor\u00eda de los usuarios, aprovechando el espacio adicional en escritorio.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">El otro enfoque, lamentablemente a\u00fan demasiado com\u00fan, va en la direcci\u00f3n opuesta, conocida como \u00abDegradaci\u00f3n Elegante\u00bb. El dise\u00f1ador comienza con la versi\u00f3n m\u00e1s grande y luego la adapta al m\u00f3vil. Este no es el enfoque correcto ya que optimiza el trabajo para una minor\u00eda, requiriendo ajustes para el contenido y la funcionalidad en un espacio limitado.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Pensar\u00e1s, \u00abSi estamos hablando de &#8216;Degradaci\u00f3n Elegante&#8217;, no puede ser tan malo.\u00bb Perm\u00edteme darte un ejemplo para explicar por qu\u00e9 no es el caso.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Imagina un sitio web de producto que presenta sus principales puntos de inter\u00e9s a los visitantes. En la versi\u00f3n de escritorio, una forma com\u00fan de presentarlos ser\u00eda utilizando elementos llamados \u00abTarjetas\u00bb, con 3 o 4 en una fila. Este dise\u00f1o es adecuado para una pantalla horizontal grande, pero podemos intuir inmediatamente que no se adapta muy bien a una pantalla vertical.<img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-60243 aligncenter\" src=\"https:\/\/www.makingscience.es\/wp-content\/uploads\/2024\/02\/unnamed-6-300x176.png\" alt=\"\" width=\"614\" height=\"360\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Cuando se traduce a m\u00f3vil, estas tarjetas suelen acabar en un carrusel horizontal o en una simple pila vertical, ninguna de las opciones es \u00f3ptima. En el primer caso, el usuario tendr\u00e1 que interrumpir su desplazamiento vertical para desplazarse horizontalmente y poder ver la informaci\u00f3n. (Spoiler: no lo har\u00e1, y perder\u00e1 una parte importante del argumento del producto.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La pila vertical ser\u00eda una mejor opci\u00f3n, pero en t\u00e9rminos de dise\u00f1o y optimizaci\u00f3n de espacio, realmente no es tan maravillosa.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img decoding=\"async\" class=\" wp-image-60237 aligncenter\" src=\"https:\/\/www.makingscience.es\/wp-content\/uploads\/2024\/02\/unnamed-7-300x279.png\" alt=\"\" width=\"496\" height=\"461\" \/><\/span><\/p>\n<h3><b>El Caso de la Mejora Progresiva<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trabajar en la direcci\u00f3n de \u00abMejora Progresiva\u00bb, empezando por el m\u00f3vil, nos obliga a optimizar la presentaci\u00f3n de informaci\u00f3n para las limitaciones del m\u00f3vil, dando resultado a una versi\u00f3n mejor adaptada.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Aqu\u00ed, toda la informaci\u00f3n aparece en una sola pantalla, dando al usuario acceso al resumen de todos los apartados en un solo vistazo.<img decoding=\"async\" class=\" wp-image-60231 aligncenter\" src=\"https:\/\/www.makingscience.es\/wp-content\/uploads\/2024\/02\/unnamed-8-177x300.png\" alt=\"\" width=\"252\" height=\"427\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Los errores causados por el enfoque \u2018Desktop First\u2019 pueden ser a\u00fan m\u00e1s dram\u00e1ticos y dar lugar a ca\u00eddas significativas en la conversi\u00f3n. Por ejemplo, olvidar proporcionar al usuario m\u00f3vil un enlace para volver atr\u00e1s a una lista filtrada desde una p\u00e1gina de producto, porque la versi\u00f3n de escritorio carece de \u00e9l (los usuarios de escritorio generalmente conf\u00edan en el bot\u00f3n de retorno del navegador).<\/span><\/p>\n<h3><b>Rompiendo con los Viejos H\u00e1bitos de Dise\u00f1o<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Desafortunadamente, muchas agencias y dise\u00f1adores todav\u00eda siguen un enfoque \u2018Desktop First&#8217;, ya sea por costumbre o comodidad. Es m\u00e1s gratificante dise\u00f1ar un layout bonito en una pantalla grande que comenzar con el m\u00f3vil. Otro inconveniente es que, dado que el dise\u00f1o m\u00f3vil se realiza al final del proceso de creaci\u00f3n, a menudo se le prestar\u00e1 menos atenci\u00f3n a este formato para conseguir cumplir con los plazos de tiempo establecidos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Es hora de que las agencias y los dise\u00f1adores se deshagan de los viejos h\u00e1bitos y prioricen la calidad de la experiencia del usuario en todas las plataformas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Los anunciantes tambi\u00e9n deben asegurarse de que los equipos responsables de dise\u00f1ar activos digitales opten por un enfoque de \u00abMejora Progresiva\u00bb, en el que se comience con el dise\u00f1o m\u00f3vil. A su vez, esto tambi\u00e9n representa un enfoque estrat\u00e9gico que supere las limitaciones garantizando al mismo tiempo una experiencia de usuario coherente y \u00f3ptima.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">El camino hacia una accesibilidad web universal y una experiencia de usuario excepcional requiere una evoluci\u00f3n constante de las metodolog\u00edas y una reevaluaci\u00f3n de las pr\u00e1cticas establecidas. Solo aquellos que anticipan estos cambios y adoptan enfoques innovadores pueden esperar mantenerse al d\u00eda con las altas expectativas de los usuarios.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La Sorprendente Realidad de la Accesibilidad Web M\u00f3vil La accesibilidad web ha sido un tema muy sonado durante m\u00e1s de dos d\u00e9cadas, enfatizando la importancia de garantizar una experiencia online inclusiva para todos los usuarios.\u00a0 El 65% del tr\u00e1fico web en Europa proviene de dispositivos m\u00f3viles, y Google ha indicado claramente su apoyo a sitios [&hellip;]<\/p>\n","protected":false},"author":30,"featured_media":60225,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[829,834,850,917],"tags":[],"class_list":["post-60247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-creativity-es","category-digital-transformation-es","category-it-solutions-es","category-ux-ui-es"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/60247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=60247"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/60247\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/60225"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=60247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=60247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=60247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}