{"id":599,"date":"2019-01-03T10:36:59","date_gmt":"2019-01-03T15:36:59","guid":{"rendered":"https:\/\/www.marketerosagencia.com\/blog\/?p=599"},"modified":"2024-05-14T11:39:53","modified_gmt":"2024-05-14T16:39:53","slug":"ux-ui","status":"publish","type":"post","link":"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/ux-ui\/","title":{"rendered":"Dise\u00f1o web: \u00bfQu\u00e9 son el UX y el UI?"},"content":{"rendered":"<p>Teniendo en cuenta que el <a title=\"Dise\u00f1o web: fases y etapas para su desarrollo\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/\"><strong>dise\u00f1o web<\/strong><\/a> se ha convertido en un importante tema sobre el cual los expertos ahondan cada vez m\u00e1s, es natural encontrarnos tambi\u00e9n con teor\u00edas, conceptos y t\u00e9rminos de los que, hace menos de una d\u00e9cada, tal vez no hab\u00edamos escuchado.<\/p>\n<p>Sin embargo, en el apurado mundo de la interconectividad v\u00eda internet y todo lo que ello representa para la sociedad, se puede decir <strong>que <em>aquel<\/em> que no cuente con un sitio en la red b\u00e1sicamente <em>no existe<\/em><\/strong>, y asimismo resulta fundamental comprender y manejar todos los conceptos a los que nos enfrentamos diariamente en el entorno digital.<\/p>\n<blockquote><p><strong>Te puede interesar: <a href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/beneficios-growth-driven-design\/\">Beneficios del Growth Driven Design para una estrategia de marketing digital<\/a><\/strong><\/p><\/blockquote>\n<p>Dos conceptos que <em>hoy por hoy<\/em> se encuentran en toda conversaci\u00f3n que circunde alrededor de las buenas pr\u00e1cticas del <strong>dise\u00f1o web<\/strong> son el UX y el UI. En este orden de ideas, y para evitar que te sorprendan <em>fuera de base <\/em>cuando estos t\u00e9rminos lleguen a colaci\u00f3n, te vamos a explicar en qu\u00e9 consiste cada uno y c\u00f3mo \u00e9stos afectan el dise\u00f1o de las p\u00e1ginas web. As\u00ed podr\u00e1s abordar el tema como todo un experto y demostrar tu conocimiento sobre las tendencias actuales en el mundo digital.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Indice de Contenido<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a02b2ab4cb5d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a02b2ab4cb5d\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/ux-ui\/#Partamos_de_un_inicio\" title=\"Partamos de un inicio\">Partamos de un inicio<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/ux-ui\/#%C2%BFQue_es_UX\" title=\"\u00bfQu\u00e9 es UX?\">\u00bfQu\u00e9 es UX?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/ux-ui\/#%C2%BFQue_es_UI\" title=\"\u00bfQu\u00e9 es UI?\">\u00bfQu\u00e9 es UI?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/ux-ui\/#Un_buen_UI_es_un_instrumento_de_gran_valor_para_lograr_un_mejor_UX_pero_no_podemos_depender_unicamente_de_este\" title=\"Un buen UI es un instrumento de gran valor para lograr un mejor UX, pero no podemos depender \u00fanicamente de \u00e9ste\">Un buen UI es un instrumento de gran valor para lograr un mejor UX, pero no podemos depender \u00fanicamente de \u00e9ste<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Partamos_de_un_inicio\"><\/span>Partamos de un inicio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Claro, <strong>el dise\u00f1o web se ha convertido en una de los pilares m\u00e1s relevantes para el buen desempe\u00f1o de una p\u00e1gina<\/strong>. No obstante, no solo se trata de que el sitio <em>se vea bonito<\/em>, pues el verdadero foco del <strong>dise\u00f1o de p\u00e1ginas web<\/strong> reside en la importancia de disponer de un espacio donde el usuario <strong>se sienta c\u00f3modo y logre alcanzar su objetivo de manera r\u00e1pida e intuitiva<\/strong>.<\/p>\n<p>Es ah\u00ed donde aparecen <em>nuestros amigos<\/em> UX y UI, los cuales, aunque muchas personas tienden a utilizar ambos t\u00e9rminos como sin\u00f3nimos y creen que estos conceptos cumplen la misma funci\u00f3n, debemos dejar de lado este equivocado paradigma, pues estamos hablando de <strong>elementos completamente diferentes<\/strong>. As\u00ed que vamos a comprender cada uno al detalle.<\/p>\n<figure id=\"attachment_600\" aria-describedby=\"caption-attachment-600\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-600\" src=\"https:\/\/www.marketerosagencia.com\/blog\/wp-content\/uploads\/2019\/01\/ux-design.jpg\" alt=\"ux-design experiencia de usuario\" width=\"1200\" height=\"624\" \/><figcaption id=\"caption-attachment-600\" class=\"wp-caption-text\"><em>UX Design &#8211; Experiencia de Usuario<\/em><\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_UX\"><\/span>\u00bfQu\u00e9 es UX?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Conocemos por UX al concepto de la <a title=\"Dise\u00f1o web y experiencia del usuario (UX) 5 puntos importantes\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/diseno-web-experiencia\/\"><strong>Experiencia de Usuario<\/strong><\/a>, por sus siglas en ingl\u00e9s (<em>User eXperience<\/em>), y se trata de todo aquello que el usuario percibe durante su interacci\u00f3n con el sitio web. A grandes rasgos podemos decir que una buena experiencia de usuario sucede cuando el dise\u00f1o de la p\u00e1gina web resulta \u00fatil, usable y atractivo, teniendo importante efecto en la satisfacci\u00f3n y la conexi\u00f3n cliente \u2013 marca.<\/p>\n<p>En otras palabras, para establecer un buen UX es primordial <strong>enfocarnos en las necesidades del usuario final y alinearlas con el objetivo de la empresa<\/strong>. Esto quiere decir que adem\u00e1s de las funciones t\u00edpicas de un UX Designer (investigaci\u00f3n de clientes, evaluaci\u00f3n del mercado, an\u00e1lisis de KPIs y estructuraci\u00f3n de la informaci\u00f3n), es fundamental que tenga conocimientos generales sobre psicolog\u00eda, desarrollo de producto digital, comunicaci\u00f3n y marketing, adem\u00e1s de un excelente sentido est\u00e9tico como es de esperarse en el <strong>dise\u00f1o web<\/strong>.<\/p>\n<p>Para ejemplificar, imagina que llegamos a una p\u00e1gina cuyo <strong>dise\u00f1o web<\/strong> es <em>lindo<\/em> y ofrece lo que estamos buscando, pero que tiene un proceso extenso y dif\u00edcil de comprender. Esto puede resultar aburri\u00e9ndonos o alej\u00e1ndonos del sitio, teniendo como consecuencia la p\u00e9rdida de un potencial cliente.<\/p>\n<p>Es en ese punto donde el experto en <strong>dise\u00f1o de p\u00e1ginas web<\/strong> y experiencia del usuario debe actuar como un <em>psic\u00f3logo <\/em>para detectar las causas del bajo \u00edndice de conversi\u00f3n, as\u00ed como ayudar a establecer una soluci\u00f3n a partir de distintos prototipos (prueba y error) hasta <em>dar en el clavo<\/em>. De este modo los encargados del sitio podr\u00e1n ver el incremento en visitas, tiempo de duraci\u00f3n <em>on-site<\/em> y conversiones.<\/p>\n<figure id=\"attachment_603\" aria-describedby=\"caption-attachment-603\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-603\" src=\"https:\/\/www.marketerosagencia.com\/blog\/wp-content\/uploads\/2019\/01\/ui-design.jpg\" alt=\"UI Design - Interfaz de Usuario\" width=\"1200\" height=\"624\" \/><figcaption id=\"caption-attachment-603\" class=\"wp-caption-text\"><em>UI Design &#8211; Interfaz de Usuario<\/em><\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_UI\"><\/span><strong>\u00bfQu\u00e9 es UI?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ahora bien, cuando hablamos de UI nos referimos a la <strong>Interfaz de Usuario <\/strong>del <strong>dise\u00f1o web <\/strong>por sus siglas en ingl\u00e9s (<em>User Interface<\/em>).<\/p>\n<p>Este concepto cobija los elementos visuales que le permiten al usuario interactuar con una p\u00e1gina web de manera adecuada. Es decir, <strong>la interfaz de usuario es el resultado de la uni\u00f3n entre la arquitectura de la informaci\u00f3n (textos), los elementos visuales (im\u00e1genes, colores, etc.) y los patrones de interacci\u00f3n (barras, botones, llamados a la acci\u00f3n, etc.)<\/strong><\/p>\n<p>Con esto podemos entender que, dentro del <strong>dise\u00f1o de p\u00e1ginas web<\/strong>, un buen UI es un instrumento de gran valor para lograr un mejor UX, pero no podemos depender \u00fanicamente de \u00e9ste, pues la experiencia del usuario depende de un espectro de elementos m\u00e1s amplio.<\/p>\n<p>Un UI Designer debe enfocar su trabajo, pues, para que el dise\u00f1o de la p\u00e1gina web y su interfaz vayan acorde con la experiencia del usuario. Asimismo, es crucial que pueda crear elementos interactivos, adem\u00e1s de lograr que \u00e9stos sean atractivos y funcionales en todo tipo de dispositivo.<\/p>\n<blockquote>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"Un_buen_UI_es_un_instrumento_de_gran_valor_para_lograr_un_mejor_UX_pero_no_podemos_depender_unicamente_de_este\"><\/span><em>Un buen UI es un instrumento de gran valor para lograr un mejor UX, pero no podemos depender \u00fanicamente de \u00e9ste<\/em><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/blockquote>\n<p>Entonces, cuando hablamos de la experiencia del usuario (UX), nos referimos a la manera en que el cliente interact\u00faa con el sitio web, mientras que la interfaz de usuario (UI) se trata del conjunto de elementos visuales como colores, texturas, im\u00e1genes y formas que no solo ofrecen un <strong>dise\u00f1o web<\/strong> m\u00e1s atractivo, sino tambi\u00e9n m\u00e1s f\u00e1cil de comprender.<\/p>\n<p>En este orden de ideas, si est\u00e1s enfocando tus esfuerzos y recursos de marketing por un canal digital, es indispensable que conozcas y apliques correctamente estos conceptos. De otro modo los resultados no ser\u00edan los deseados.<\/p>\n<blockquote><p><strong>Te puede interesar: <a href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/diseno-web-2019\/\">13 tendencias de dise\u00f1o web para 2019<\/a><\/strong><\/p><\/blockquote>\n<p>Si est\u00e1s interesado en averiguar si tu sitio web cuenta con todas las buenas pr\u00e1cticas para un buen UX y UI, o si deseas optimizar el <strong>dise\u00f1o web<\/strong> de tu p\u00e1gina, no dudes en ponerte en <a href=\"https:\/\/www.marketerosagencia.com\/contactanos\/\"><strong>contacto con un equipo experto<\/strong><\/a> capaz de plasmar los objetivos de tu compa\u00f1\u00eda y alinearlos con las necesidades de tus clientes para as\u00ed obtener mejores resultados de ventas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Teniendo en cuenta que el dise\u00f1o web se ha convertido en un importante tema sobre el cual los expertos ahondan cada vez m\u00e1s, es natural encontrarnos tambi\u00e9n con teor\u00edas, conceptos y t\u00e9rminos de los que, hace menos de una d\u00e9cada, tal vez no hab\u00edamos escuchado. Sin embargo, en el apurado mundo de la interconectividad v\u00eda [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":856,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"footnotes":""},"categories":[9],"tags":[15,10],"class_list":["post-599","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-diseno-de-paginas-web","tag-diseno-web"],"acf":[],"_links":{"self":[{"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/599"}],"collection":[{"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/comments?post=599"}],"version-history":[{"count":6,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/599\/revisions"}],"predecessor-version":[{"id":5774,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/599\/revisions\/5774"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/media\/856"}],"wp:attachment":[{"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/media?parent=599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/categories?post=599"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/tags?post=599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}