{"id":2578,"date":"2021-08-06T17:19:00","date_gmt":"2021-08-06T17:19:00","guid":{"rendered":"https:\/\/blog.estudiocontar.com\/?p=2578"},"modified":"2022-04-20T22:56:36","modified_gmt":"2022-04-20T22:56:36","slug":"la-interfaz-grafica-de-usuario","status":"publish","type":"post","link":"https:\/\/blog.estudiocontar.com\/2021\/08\/06\/la-interfaz-grafica-de-usuario\/","title":{"rendered":"La interfaz gr\u00e1fica de usuario y dise\u00f1o de experiencias UI,UX"},"content":{"rendered":"<div class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" id=\"ub_table-of-contents-3aa4d0c9-7ab1-48d4-9c4b-2b36e0478e3c\" data-initiallyhideonmobile=\"false\"\n                    data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\"><div class=\"ub_table-of-contents-header\">\n                    <div class=\"ub_table-of-contents-title\">Investigaci\u00f3n en este art\u00edculo<\/div><\/div><\/div><div class=\"ub_table-of-contents-extra-container\"><div class=\"ub_table-of-contents-container ub_table-of-contents-1-column \"><ul><li><a href=https:\/\/blog.estudiocontar.com\/2021\/08\/06\/la-interfaz-grafica-de-usuario\/#0-%C2%BFque-es-la-interfaz-gr%C3%A1fica-de-usuario>\u00bfQue es la Interfaz gr\u00e1fica de usuario?<\/a><\/li><li><a href=https:\/\/blog.estudiocontar.com\/2021\/08\/06\/la-interfaz-grafica-de-usuario\/#1-interfaz-gr%C3%A1fica-de-usuario>Interfaz gr\u00e1fica de usuario<\/a><\/li><li><a href=https:\/\/blog.estudiocontar.com\/2021\/08\/06\/la-interfaz-grafica-de-usuario\/#2-todos-somos-usuarios-uiux-nadie-escapa-de-su-uso->Todos somos usuarios UI\/UX. Nadie escapa de su uso.&nbsp;<\/a><ul><li><a href=https:\/\/blog.estudiocontar.com\/2021\/08\/06\/la-interfaz-grafica-de-usuario\/#3-la-experiencia-de-usuario-determina-la-percepci%C3%B3n-sobre-la-marca>La experiencia de usuario determina la percepci\u00f3n sobre la marca<\/a><\/li><\/ul><\/li><\/ul><\/div><\/div><\/div>\n\n\n<p>Hablemos ahora en el mismo idioma:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-%C2%BFque-es-la-interfaz-gr%C3%A1fica-de-usuario\">\u00bfQue es la Interfaz gr\u00e1fica de usuario?<\/h2>\n\n\n\n<p>Se conoce como interfaz gr\u00e1fica de usuario, o UI por sus siglas en ingles (User Interface) a todos los elementos f\u00edsicos y tangibles que le permiten a un usuario interactuar con el lenguaje-m\u00e1quina de las plataformas digitales.<\/p>\n\n\n\n<p>Una interfaz debe ser un ambiente agradable, pues definir\u00e1 la experiencia del usuario, o <a href=\"https:\/\/blog.acantu.com\/que-es-ux-y-ui\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">UX (User Experience) <\/a>y con ello, su deseo de seguir interactuando.<\/p>\n\n\n\n<p>En pocas palabras, fondo y forma:<\/p>\n\n\n\n<p>Una<strong> UX<\/strong> es el fondo: la interacci\u00f3n, lo que el usuario experimenta a trav\u00e9s de una <strong>UI<\/strong>, que ser\u00eda la forma: el entorno f\u00edsico, visual e interactivo.&nbsp;<\/p>\n\n\n\n<p>Pero, \u00bfC\u00f3mo es que la forma (UI) logra comunicar el fondo (UX)? \u00bfC\u00f3mo es posible establecer una relaci\u00f3n armoniosa entre una m\u00e1quina y un usuario?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-interfaz-gr%C3%A1fica-de-usuario\">Interfaz gr\u00e1fica de usuario<\/h2>\n\n\n\n<p>A su vez, la interfaz es presentada mediante un dise\u00f1o espec\u00edfico, que compone y organiza todos los elementos que de forma impl\u00edcita le ordenan al usuario como moverse dentro de ella.&nbsp; La interfaz gr\u00e1fica de usuario son los elementos gr\u00e1ficos que facilitan dicha interacci\u00f3n.&nbsp;<\/p>\n\n\n\n<p>La GUI, (por sus siglas en ingl\u00e9s, Graphic User Interface) es el dise\u00f1o que definir\u00e1 comandos como el desplazamiento de las pantallas; si se deslizan y por qu\u00e9 se deslizar\u00edan, si lo hacen por medio de clicks; la existencia y manejo de los botones como una extensi\u00f3n de las manos, las transiciones, el uso de diversos controles, del mouse o del scroll, por mencionar algunos.&nbsp;<\/p>\n\n\n\n<p>En otras palabras, es una serie de elementos gr\u00e1ficos mediante los cuales podemos obtener acceso y manipular los datos. Gracias al dise\u00f1o UX se puede lograr una relaci\u00f3n eficaz entre un usuario y una interfaz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-todos-somos-usuarios-uiux-nadie-escapa-de-su-uso-\">Todos somos usuarios UI\/UX. <strong>Nadie escapa de su uso.&nbsp;<\/strong><\/h2>\n\n\n\n<p>El dise\u00f1o UX, es tambi\u00e9n la evoluci\u00f3n de una UI de l\u00ednea de comandos o CLI (Command-line interface).&nbsp;<\/p>\n\n\n\n<p>Las CLI no eran un asunto sencillo de manejar. Se operaban mediante instrucciones de texto y era necesario conocer las claves de los comandos para hacer cualquier movimiento. <\/p>\n\n\n\n<p>Incluso los m\u00e1s sencillos. El usuario deb\u00eda ser un experto para interactuar con la interfaz.&nbsp;<\/p>\n\n\n\n<p>En cambio, las GUI se han ido estandarizando con el tiempo, y se han vuelto intuitivas para facilitar su uso. El objetivo del dise\u00f1o de experiencias es cubrir las expectativas de interacci\u00f3n del usuario, para que que los elementos sean sencillos y predecibles. Simplificar su uso, para que cualquiera pueda navegarlas sin la necesidad de ser un experto en programaci\u00f3n.&nbsp;<\/p>\n\n\n\n<p>Recordemos por ejemplo, la naturalidad con la que nuestros sobrinos de tres a\u00f1os se desenvuelven en aplicaciones como YouTube, sin la necesidad de saber a\u00fan leer ni escribir.<\/p>\n\n\n\n<p>Elegir una interfaz como nuestra predilecta tambi\u00e9n responde a nuestras necesidades y nivel de<em> expertise.<\/em> Al estar familiarizados con los componentes de una cierta GUI, nos resulta m\u00e1s sencillo manipular sus comandos y actualizaciones, y continuar eligi\u00e9ndola por encima de otras a trav\u00e9s del tiempo. <em><a href=\"https:\/\/prezi.com\/blan-as6sbpe\/interfaces-graficas-ejemplos\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">Un ejemplo de experiencia gr\u00e1fica de usuario<\/a> es el legendario debate entre los usuarios de iOS o Android, por demostrar cual sistema operativo es el m\u00e1s eficaz.<\/em><\/p>\n\n\n\n<p>Colores, im\u00e1genes y objetos. Nunca hay que subestimar la influencia del valor est\u00e9tico. Un dise\u00f1o visual atractivo, agradable al manejo y uniforme en sus elementos, podr\u00e1 definir el \u00e9xito o fracaso de la interfaz, cuyo prop\u00f3sito intr\u00ednseco es promover un producto o servicio.&nbsp;<\/p>\n\n\n\n<p>Pensemos en ciertos buscadores como Google, que reconocen la importancia y destinan recursos significativos a proyectos de investigaci\u00f3n enfocados en la mejora de <strong>UX<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Sus interfaces centradas en el usuario resultan simples e intuitivas, y se tornan casi imprescindibles para la vida de millones de personas en el mundo.<\/p>\n\n\n\n<p>No solamente las grandes empresas pueden y deben ocuparse por los dise\u00f1os de interfaz de sus productos digitales y c\u00f3mo impactan en la experiencia de usuario. <\/p>\n\n\n\n<p>En un momento de transformaci\u00f3n digital en el que las organizaciones de todo tipo a lo largo y ancho del espectro industrial, los productos digitales y el fortalecimiento de sus canales digitales pueden lograr una relaci\u00f3n m\u00e1s fuerte con sus usuarios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-la-experiencia-de-usuario-determina-la-percepci%C3%B3n-sobre-la-marca\">La experiencia de usuario determina la percepci\u00f3n sobre la marca<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"640\" height=\"427\" src=\"https:\/\/blog.estudiocontar.com\/wp-content\/uploads\/2021\/08\/taras-shypka-iFSvn82XfGo-unsplash.jpg\" alt=\"La interfaz gr\u00e1fica de usuario y dise\u00f1o de experiencias UI\/UX\" class=\"wp-image-2633\" srcset=\"https:\/\/blog.estudiocontar.com\/wp-content\/uploads\/2021\/08\/taras-shypka-iFSvn82XfGo-unsplash.jpg 640w, https:\/\/blog.estudiocontar.com\/wp-content\/uploads\/2021\/08\/taras-shypka-iFSvn82XfGo-unsplash-300x200.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\"><figcaption><a href=\"https:\/\/blog.estudiocontar.com\/2021\/08\/16\/experiencia-de-usuario-ux-2021\/\" class=\"rank-math-link\">La experiencia de usuario UX <\/a>est\u00e1 \u00edntimamente relacionada con el dise\u00f1o de interfaz<\/figcaption><\/figure>\n\n\n\n<p>Como ejemplo de la experiencia de usuario digital, recientemente se llev\u00f3 a cabo un estudio cualitativo sobre este tema para un corporativo de laboratorios cl\u00ednicos en CDMX. <\/p>\n\n\n\n<p>En el mundo digital las personas buscan informaci\u00f3n relevante sobre los servicios, precios, configuraciones de atenci\u00f3n, ubicaciones y dem\u00e1s.<\/p>\n\n\n\n<p>La calidad de la UI &amp; UX de los sitios web del laboratorio no cumpl\u00edan con ciertos objetivos dentro de la experiencia. El laboratorio buscaba la retroalimentaci\u00f3n de sus usuarios, precisamente los que realizan interacciones con el producto.<\/p>\n\n\n\n<p><em>Los resultados pueden verse a detalle en la p\u00e1gina de casos de estudio.<\/em><\/p>\n\n\n\n<p>La orientaci\u00f3n del dise\u00f1o de interfaz as\u00ed como el dise\u00f1o de la experiencia podr\u00e1 dar mejores resultados si la orientaci\u00f3n es 100% enfocada en los h\u00e1bitos del usuario. Por esta raz\u00f3n, comprender muy bien al consumidor y realizar investigaci\u00f3n de usuario (ux research por sus siglas en ingl\u00e9s) as\u00ed como <a href=\"https:\/\/estudiocontar.com\/investigacion-digital\/test-de-usabilidad\/\" class=\"rank-math-link\">tests de usabilidad<\/a> son determinantes para el desarrollo de un proyecto digital.<\/p>\n\n\n\n<p>Por \u00faltimo, es importante considerar que la presencia en canales digitales es considerado parte de la <a href=\"https:\/\/blog.estudiocontar.com\/2021\/08\/03\/experiencia-de-cliente-cx\/\" class=\"rank-math-link\">Cx, la Experiencia de Cliente <\/a>(Customer Experience por sus siglas en ingl\u00e9s) <\/p>\n\n\n\n<p>Este punto es importante al momento de enfocar los procesos y la direcci\u00f3n de las organizaciones para brindar experiencias memorables en sus usuarios y\/o consumidores.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hablemos ahora en el mismo idioma: \u00bfQue es la Interfaz gr\u00e1fica de usuario? Se conoce como interfaz gr\u00e1fica de usuario, o UI por sus siglas en ingles (User Interface) a todos los elementos f\u00edsicos y tangibles que le permiten a un usuario interactuar con el lenguaje-m\u00e1quina de las plataformas digitales. Una interfaz debe ser un [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2580,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ub_ctt_via":""},"categories":[190],"tags":[231,193,191,144],"featured_image_src":"https:\/\/blog.estudiocontar.com\/wp-content\/uploads\/2021\/08\/federica-galli-aiqKc07b5PA-unsplash.jpg","author_info":{"display_name":"Gabriela P\u00e9rez","author_link":"https:\/\/blog.estudiocontar.com\/author\/gabriela\/"},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/posts\/2578"}],"collection":[{"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/comments?post=2578"}],"version-history":[{"count":7,"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/posts\/2578\/revisions"}],"predecessor-version":[{"id":3840,"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/posts\/2578\/revisions\/3840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/media\/2580"}],"wp:attachment":[{"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/media?parent=2578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/categories?post=2578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.estudiocontar.com\/wp-json\/wp\/v2\/tags?post=2578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}