{"id":23805,"date":"2023-10-03T20:10:05","date_gmt":"2023-10-04T03:10:05","guid":{"rendered":"https:\/\/roxtycity.com\/?p=23805"},"modified":"2023-10-03T20:10:05","modified_gmt":"2023-10-04T03:10:05","slug":"diseno-ux-ui","status":"publish","type":"post","link":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/","title":{"rendered":"Diseno UX\/UI"},"content":{"rendered":"<p>Cuando entras a un sitio web o a una aplicaci\u00f3n, lo primero que notas es que puedes navegar y encontrar lo que buscas con facilidad.<\/p>\n<p>Los datos est\u00e1n ordenados y tienes la posibilidad de interactuar con las p\u00e1ginas o\u00a0 filtrar, descargar, a\u00f1adir informaci\u00f3n o realizar b\u00fasquedas m\u00e1s personalizadas. Esto es experiencia de usuario o UX.<\/p>\n<p>Tambi\u00e9n existen otros casos donde la usabilidad de un dispositivo o aplicaci\u00f3n, tiene que ser entendida solo por el simple hecho de que las palabras est\u00e1n ah\u00ed con un objetivo para el usuario.<\/p>\n<p>Ejemplos f\u00e1ciles y din\u00e1micos los tenemos en Spotify, Mercado Libre, Amazon, entre otros sitios.<\/p>\n<p>De eso se trata el dise\u00f1o UX o dise\u00f1o de interacci\u00f3n, consiste en planear y dise\u00f1ar c\u00f3mo ser\u00e1 la experiencia del usuario cuando entra a un sitio web. En pocas palabras, es dise\u00f1ar productos deseables que vayan acorde a las necesidades del cliente, m\u00e1s all\u00e1 de los requerimientos est\u00e9ticos.<\/p>\n<p>Pero a continuaci\u00f3n te detallare mas sobre este tema y su importancia hoy en d\u00eda al dise\u00f1ar o desarrollar un sitio, e aqui igual porque debes de contratar un profesional del tema.<\/p>\n<h1 class=\"ql-align-center blog-h1\"><strong>\u00bfQu\u00e9 es UX y UI?<\/strong><\/h1>\n<p class=\"blog-p\">Si est\u00e1s aqu\u00ed es porque tienes inter\u00e9s en conocer m\u00e1s sobre el\u00a0<strong>dise\u00f1o UX y UI<\/strong>. De ser as\u00ed, definitivamente es el lugar adecuado para conocer todo sobre una t\u00e9cnica que est\u00e1 tomando cada vez m\u00e1s popularidad pero que, como ver\u00e1s, no se trata de una novedad.<\/p>\n<p class=\"blog-p\">En este art\u00edculo encontrar\u00e1s toda la informaci\u00f3n necesaria para despejar tus dudas y obtendr\u00e1s respuestas a preguntas tales como:\u00a0<strong>Qu\u00e9 es el dise\u00f1o UX<\/strong>,\u00a0<strong>qu\u00e9 diferencias existen entre el dise\u00f1o UX y UI, cu\u00e1les son los diferentes roles que existen dentro del UX design<\/strong>, solo por mencionar algunos temas.<\/p>\n<p class=\"blog-p\">\u00a1Comencemos!<\/p>\n<p class=\"blog-p\">A partir de 1990, UX crece de forma exponencial. Empezamos a o\u00edr conceptos como el de usabilidad, dise\u00f1o de interacci\u00f3n y arquitectura de informaci\u00f3n, \u00a0el proceso de dise\u00f1o centrado en el usuario data desde hace siglos, herramientas prehist\u00f3ricas ergon\u00f3micas avalan esta teor\u00eda \u00a1incluso hay ejemplos de UX en la naturaleza!<\/p>\n<p class=\"blog-p\">Analizando el UX de una banana podemos decir que es la fruta m\u00e1s f\u00e1cil de comer, en comparaci\u00f3n al tiempo y esfuerzo que nos lleva, por ejemplo, consumir una naranja. No necesita ser lavada, no se necesitan cubiertos para pelarla ni nos ensuciamos al consumirla.<\/p>\n<p class=\"blog-p\">Si bien hoy en d\u00eda a\u00fan hay confusi\u00f3n y l\u00edmites algo difusos en relaci\u00f3n a la tem\u00e1tica o preguntas frecuentes acerca de qu\u00e9 hace un dise\u00f1ador UX, en parte debido a las m\u00faltiples definiciones que pueden encontrarse realizando una sencilla b\u00fasqueda online, podr\u00edamos brindar la definici\u00f3n de UX en tan solo una l\u00ednea: dise\u00f1o de experiencias centradas en el usuario.<\/p>\n<h2 class=\"blog-titles\">\u00bfPara qu\u00e9 sirve el UX?<\/h2>\n<p class=\"blog-p\">Empecemos por comprender porqu\u00e9 UX. En t\u00e9rminos ling\u00fc\u00edsticos,\u00a0<strong>UX es un acr\u00f3nimo donde la \u201cU\u201d hace referencia a \u201cUser\u201d(Usuario), mientras que la \u201cX\u201d a \u201cExperience\u201d(Experiancia)<\/strong>.<\/p>\n<p class=\"blog-p\">Esta rama del dise\u00f1o que se desprende &#8211; al igual que\u00a0<strong>Customer Experience Design (CX) o el Dise\u00f1o de Interacci\u00f3n (IxD)\u00a0<\/strong>&#8211; del Dise\u00f1o centrado en las personas o User Centered Design en ingl\u00e9s, tiene como objeto mejorar la experiencia del usuario en relaci\u00f3n a un producto o servicio en cuesti\u00f3n, sea o no digital.<\/p>\n<p class=\"blog-p\">As\u00ed intenta comprender en profundidad su perspectiva y motivaciones para dise\u00f1ar un recorrido, desde antes del primer punto de contacto hasta despu\u00e9s de la \u00faltima interacci\u00f3n, adelant\u00e1ndose a sus necesidades, deseos, preferencias, frustraciones y sensaciones en general.<\/p>\n<p class=\"blog-p\">Quiz\u00e1s alguna vez te ocurri\u00f3 que entraste a un sitio para realizar tr\u00e1mites o comprar un producto y no pudiste hacerlo de forma fluida porque no entend\u00edas c\u00f3mo navegar o d\u00f3nde ingresar. Seguro haciendo memoria recuerdas qu\u00e9 sentiste en ese momento, posiblemente frustraci\u00f3n.\u00a0<strong>El dise\u00f1o UX est\u00e1 pensado justamente para que no te ocurran esas situaciones y lograr que tu experiencia sea disfrutable, confiable y accesible.<\/strong><\/p>\n<p class=\"blog-p\">Con este fin en mente, los dise\u00f1adores de experiencias basadas en el usuario o UX Designers deben considerar en todo momento una serie de principios.<\/p>\n<h2 class=\"blog-titles\">Fundamentos del dise\u00f1o UX<\/h2>\n<p class=\"blog-p\">Los fundamentos en los que se basa el dise\u00f1o UX para optimizar la interacci\u00f3n de las personas con el producto son la usabilidad, la accesibilidad y la interacci\u00f3n. Contin\u00faa leyendo para conocer en qu\u00e9 consiste cada uno de ellos.<\/p>\n<h3 class=\"blog-titles\">Usabilidad<\/h3>\n<p class=\"blog-p\">El primero de estos atributos de calidad &#8211; la usabilidad &#8211; seg\u00fan Jakob Nielsen, eval\u00faa cu\u00e1n f\u00e1cil es para el usuario utilizar una interfaz determinada y puede ser analizado a partir de las siguientes variables.<\/p>\n<ul class=\"blog-p blog-ul\">\n<li><strong>Aprendizaje\u00a0<\/strong><\/li>\n<\/ul>\n<p class=\"blog-p\">Qu\u00e9 tan f\u00e1cil es para el usuario completar tareas b\u00e1sicas y puntuales la primera vez que utilizan la interfaz. En este caso, puedes notar que\u00a0<strong>muchas aplicaciones del mismo rubro comparten patrones ya probados<\/strong>. Un gran ejemplo son los servicios de\u00a0<em>streaming<\/em>\u00a0como Netflix, HBO Max o Star +, que se basan en la misma l\u00f3gica de navegaci\u00f3n interna.<\/p>\n<ul class=\"blog-p blog-ul\">\n<li><strong>Eficiencia<\/strong><\/li>\n<\/ul>\n<p class=\"blog-p\">Una vez que conocen el funcionamiento de la interfaz, qu\u00e9 tan r\u00e1pido pueden completar dichas tareas. Si ya sabes c\u00f3mo hacer un pedido en Rappi, cada vez\u00a0<strong>lo har\u00e1s en un tiempo a\u00fan menor<\/strong>\u00a0que las primeras veces.<\/p>\n<ul class=\"blog-p blog-ul\">\n<li><strong>Memorabilidad<\/strong><\/li>\n<\/ul>\n<p class=\"blog-p\">Luego de un tiempo de no utilizar la interfaz, cu\u00e1nto tardan los usuarios en recuperar su capacidad previa. Una parte de tu trabajo consistir\u00e1 en trabajar con patrones familiares que eviten que tus personas usuarias se frustren al volver a usar tu aplicaci\u00f3n despu\u00e9s de un tiempo.<\/p>\n<ul class=\"blog-p blog-ul\">\n<li><strong>Errores<\/strong><\/li>\n<\/ul>\n<p class=\"blog-p\">Cantidad, gravedad y posibilidad de recuperaci\u00f3n de dichos errores cometidos por el usuario. Con la proliferaci\u00f3n de aplicaciones que empleamos en nuestro d\u00eda a d\u00eda, surge un error frecuente: olvidar tu contrase\u00f1a. La forma en la que las aplicaciones te se\u00f1alan este error es una de las tareas del <a href=\"https:\/\/roxtycity.com\/ux-writing-crea-sinergia-entre-la-experiencia-y-su-contenido\/\">UX Writing<\/a>.<\/p>\n<ul class=\"blog-p blog-ul\">\n<li><strong>Satisfacci\u00f3n<\/strong><\/li>\n<\/ul>\n<p class=\"blog-p\">Cu\u00e1n agradable es para el usuario usar la interfaz. \u00bfCu\u00e1les son las aplicaciones que m\u00e1s empleas? Es posible que una de las principales razones sea la satisfacci\u00f3n que genera en ti su navegaci\u00f3n y dise\u00f1o.<\/p>\n<ul class=\"blog-p blog-ul\">\n<li><strong>Accesibilidad<\/strong><\/li>\n<\/ul>\n<p class=\"blog-p\">La accesibilidad refiere a la<strong>\u00a0capacidad de interacci\u00f3n de la persona con la interfaz<\/strong>, considera tanto el contexto de uso, como las propias aptitudes del usuario. Teniendo en cuenta que\u00a0<strong>el fin del UX es asegurar una experiencia satisfactoria, eficiente y funciona<\/strong>l, en muchos casos deben hacerse adaptaciones para que personas con alg\u00fan tipo de discapacidad o pertenecientes a un grupo demogr\u00e1fico particular con necesidades puntuales, puedan completar las mismas tareas sin hacer mayores esfuerzos o caer en m\u00faltiples errores.<\/p>\n<p class=\"blog-p\">Desde unas zapatillas que se ponen y se sacan casi autom\u00e1ticamente, sin necesidad de utilizar las manos en ning\u00fan punto del proceso, hasta aplicaciones que definen con prop\u00f3sito los colores de los botones &#8211; aunque esto pertenece a la esfera del UI, de la cual hablaremos m\u00e1s abajo &#8211; pensando en los contrastes y posibilidades perceptivas de personas con daltonismo, por mencionar algo, son uno de los tantos ejemplos de accesibilidad o dise\u00f1o inclusivo.<\/p>\n<p class=\"blog-p\">Uno de los mejores ejemplos para lograr un dise\u00f1o accesible es tomar en cuenta el contraste de colores para favorecer la experiencia de las personas que poseen discromatopsia o daltonismo. El dise\u00f1o UX UI trabaja con diferentes m\u00e9todos que facilitan estos ejercicios.<\/p>\n<ul class=\"blog-p blog-ul\">\n<li><strong>Interacci\u00f3n<\/strong><\/li>\n<\/ul>\n<p class=\"blog-p\">Este pilar es el que gu\u00eda la planificaci\u00f3n y creaci\u00f3n de puntos de contacto, valga la redundancia, de interacci\u00f3n entre la interfaz y el usuario. El user persona debe ser capaz de determinar qu\u00e9 hacer o c\u00f3mo utilizar el producto, a la vez que este \u00faltimo ser capaz de guiar u orientar su comportamiento de una forma no invasiva.<\/p>\n<p class=\"blog-p\">Desde este lugar, como dise\u00f1ador UX UI lo m\u00e1s probable es que,\u00a0<strong>al momento de diagramar tus experiencias, lo hagas a trav\u00e9s del uso de botones<\/strong>. \u00bfHas notado que en todos los tel\u00e9fonos celulares para atender una llamada el bot\u00f3n es verde y para cortarla es rojo? Esto es un claro ejemplo de c\u00f3mo simplificar la interacci\u00f3n de una manera universal, buscando incluir a personas de cualquier grupo etario.<\/p>\n<h2 class=\"blog-titles\">\u00bfQu\u00e9 hace un dise\u00f1ador UX?<\/h2>\n<p class=\"blog-p\">Existe una frase que dice \u201cCualquiera puede ser UX Designer, pero no todos deber\u00edan serlo\u201d. Puede sonar un poco chocante, es cierto, pero a lo que apunta esta declaraci\u00f3n es, por un lado, indicar que el UX se aprende, como todo, \u00bfacaso un doctor comenz\u00f3 su carrera sabiendo c\u00f3mo suturar?<\/p>\n<p class=\"blog-p\">Muchas personas incursionan en este conjunto de metodolog\u00edas, mindsets y procesos que implica el dise\u00f1o UX, pero sin antes considerar con consciencia desde un punto de vista lo m\u00e1s objetivo posible si en verdad cumplen con las<strong>\u00a0caracter\u00edsticas que un dise\u00f1ador UX debe tener.<\/strong><\/p>\n<p class=\"blog-p\">Con capacitaci\u00f3n constante y formaci\u00f3n continua, personas de todos los \u00e1mbitos profesionales, desde la psicolog\u00eda hasta el deporte, lugares del mundo, edades, etnias y dem\u00e1s caracter\u00edsticas, pueden convertirse en dise\u00f1adores de experiencias centradas en el usuario.<\/p>\n<p class=\"blog-p\">Es incluso esta\u00a0<strong>diversidad la que en muchos casos permite contrarrestar o prevenir los sesgos cognitivos propios de la naturaleza humana<\/strong>\u00a0que llevan a tomar decisiones cuasi-arbitrarias y potencialmente perjudiciales para los objetivos planteados. Un ejemplo podr\u00eda ser el hecho de que en el proceso de creaci\u00f3n de una aplicaci\u00f3n destinada a monitorear y mantener un registro del ciclo menstrual no participen mujeres, si bien es algo extremo, ilustra a la perfecci\u00f3n la importancia del conocimiento de la tem\u00e1tica y de la perspectiva del user persona.<\/p>\n<p class=\"blog-p\">Por otra parte,\u00a0<strong>no realizar asunciones a partir de la experiencia personal es una ley impl\u00edcita dentro del design thinking<\/strong>, es por esto que contar con experiencia en el \u00e1rea de inter\u00e9s o coincidir con el segmento identificado como user persona es un arma de doble filo. Aunque es bastante frecuente caer en la generalizaci\u00f3n a partir de vivencias personales, si el proceso de dise\u00f1o UX se sigue al pie de la letra, los posibles errores o hip\u00f3tesis basadas en falsas premisas quedar\u00e1n r\u00e1pidamente en evidencia.<\/p>\n<p class=\"blog-p\">Lo que nos lleva al segundo punto, no todos deber\u00edan dise\u00f1ar experiencias centradas en los usuarios.\u00a0<strong>El UX designer debe poseer, sin lugar a dudas, capacidad anal\u00edtica y una empat\u00eda desarrollada<\/strong>, que le permitir\u00e1n desempe\u00f1arse mejor en este rol tan importante para la percepci\u00f3n del usuario.\u00a0<strong>Siempre recuerda que no dise\u00f1as para tu gusto, sino para cubrir las necesidades de distintos usuarios<\/strong>.<\/p>\n<p class=\"blog-p\">Aunque no todo est\u00e1 perdido para quienes no encajen en esa descripci\u00f3n, dentro del dise\u00f1o UX existen muchos roles diferentes para abarcar las distintas etapas del\u00a0<strong>proceso, como la investigaci\u00f3n, pruebas de usabilidad, dise\u00f1o de interacci\u00f3n, recopilaci\u00f3n de datos<\/strong>, entre otras, y cada uno de estos papeles exige un skillset distinto, debajo mencionaremos cada rol y sus principales funciones.<\/p>\n<h3 class=\"blog-titles\">UX Researcher<\/h3>\n<p class=\"blog-p\">Se encarga de realizar investigaciones y<strong>\u00a0recopilar datos acerca del usuario<\/strong>, su contexto, los problemas que enfrenta y m\u00e1s, por lo general obtiene la informaci\u00f3n a trav\u00e9s de entrevistas y encuestas.<\/p>\n<p class=\"blog-p\">El UX Research trabaja con\u00a0<strong>metodolog\u00edas<\/strong>\u00a0variadas. Estas son solo algunas de las que puedes aprender en los cursos de UX:<\/p>\n<ul class=\"blog-p blog-ul\">\n<li><strong>A\/B Testing:\u00a0<\/strong>esta metodolog\u00eda tiene como finalidad presentar a las personas usuarias dos versiones diferentes de un mismo sitio web o mobile. De esta manera puedes detectar cu\u00e1l se ajusta mejor a las necesidades y demandas de tu clientela.<\/li>\n<li><strong>Tree testing:\u00a0<\/strong>el tree testing es una de las metodolog\u00edas centrales para generar la arquitectura de la informaci\u00f3n. Consiste en presentar un boceto de categor\u00edas y subcategor\u00edas detalladas por ti y tu equipo para que las personas usuarias cumplan una tarea espec\u00edfica. De esta manera puedes comprobar si la arquitectura del sitio est\u00e1 bien pensada en funci\u00f3n de la necesidad de tus personas usuarias.<\/li>\n<li><strong>Card sorting:\u00a0<\/strong>se trata de una metodolog\u00eda en la que se le proponen palabras claves a personas usuarias y se les pide que las agrupen como crean conveniente. De esta forma, es posible acercarse a sus\u00a0<em>insights<\/em>\u00a0dado que puedes comenzar a entender la l\u00f3gica detr\u00e1s de sus elecciones. Quiz\u00e1s t\u00fa ordenes por categor\u00edas y las personas por colores, por ejemplo.<\/li>\n<li><strong>Entrevista cualitativa:\u00a0<\/strong>tambi\u00e9n llamada entrevista en profundidad, es una instancia donde interact\u00faas con potenciales usuarios para entender sus procesos internos (<em>insights)<\/em>\u00a0respecto al proyecto que quieres realizar. Las entrevistas pueden ser estructuradas (con un listado de preguntas que debes seguir) o semiestructuradas (con preguntas que puedes tomar como gu\u00eda pero sin seguirlas al pie de la letra).<\/li>\n<\/ul>\n<h3 class=\"blog-titles\">UX Tester<\/h3>\n<p class=\"blog-p\">Una vez efectuada la investigaci\u00f3n, el\u00a0<strong>UX tester se ocupa de evaluar la usabilidad<\/strong>, realizando pruebas para determinar el desempe\u00f1o de los usuarios cuando interact\u00faan con el producto, muchas veces se utiliza un wireframe en esta etapa. Wireframe es el esquema de p\u00e1gina o pantalla, que funciona como gu\u00eda visual para representar la estructura de, por ejemplo, un sitio web.<\/p>\n<p class=\"blog-p\">El UX tester es uno de los integrantes del equipo de UX research, que no debe ser necesariamente UX UI designer, pero debe entender las nociones del dise\u00f1o UX UI\u00a0 centr\u00e1ndose m\u00e1s en las heur\u00edsticas que en el dise\u00f1o de la interfaz.<\/p>\n<h3 class=\"blog-titles\">Information Architect<\/h3>\n<p class=\"blog-p\">El arquitecto de informaci\u00f3n<strong>\u00a0determina el mejor modo de distribuir la informaci\u00f3n o contenido<\/strong>\u00a0para asegurar una experiencia fluida y satisfactoria, a la vez que promueve la concreci\u00f3n de determinadas acciones por parte del usuario, usando como herramienta la disposici\u00f3n de elementos.<\/p>\n<p class=\"blog-p\">El Information Architect se encarga de armar el esqueleto de la experiencia. Si tienes capacidad anal\u00edtica o tienes facilidad para elaborar escenarios y posibilidades, este puesto es id\u00f3neo para ti. De hecho, y si no lo sab\u00edas, hay muchas personas que vienen del campo de la Arquitectura y se dedican a armar experiencias en lugar de edificios.<\/p>\n<h3 class=\"blog-titles\">Content Strategist<\/h3>\n<p class=\"blog-p\">El estratega de contenidos decide, entre otras cosas,\u00a0<strong>qu\u00e9 pasos debe seguir el usuario en el camino hasta concretar una acci\u00f3n<\/strong>\u00a0y qu\u00e9 tipo de acciones, como CTA o im\u00e1genes, deben incluirse. En algunos casos este rol tambi\u00e9n incluye el UX Writing, por lo que tambi\u00e9n debe decidir qu\u00e9 y c\u00f3mo comunicar, en qu\u00e9 tono, cu\u00e1l es la extensi\u00f3n adecuada y mucho m\u00e1s.<\/p>\n<p class=\"blog-p\">Ten presente que el UX Writing es uno de los principales pilares de la experiencia de usuario. Te resultar\u00e1 sencillo dedicarte a esta \u00e1rea si entre tus aptitudes se encuentran: la claridad al expresarte, la pasi\u00f3n por comunicar y, sobre todo, una excelente ortograf\u00eda.<\/p>\n<p class=\"blog-p\">Actualmente, existen rubros que comienzan a desarrollarse con mayor fuerza, como el dise\u00f1o conversacional. Esta rama del UX Writing se centra en la creaci\u00f3n de flujos conversacionales de un chatbot, donde puedes unificar la arquitectura de la informaci\u00f3n con los contenidos.<\/p>\n<h3 class=\"blog-titles\">Interaction Designer<\/h3>\n<p class=\"blog-p\">Es responsable de crear y<strong>\u00a0presentar cada interfaz con la que el usuario debe interactuar<\/strong>\u00a0para cumplir un objetivo o completar una tarea, tambi\u00e9n este rol es conocido bajo el nombre UI Designer.<\/p>\n<p class=\"blog-p\">El UI, al centrarse en el dise\u00f1o de la interfaz de usuario, resulta ser una veta laboral positiva y accesible para las personas que provienen de carreras como Dise\u00f1o Gr\u00e1fico o Dise\u00f1o Multimedial. De todas formas, que no te desanime no tener esos conocimientos previos, puedes aprender lo necesario sobre\u00a0<a class=\"blog-links cursor-pointer\" target=\"_blank\" rel=\"noopener noreferrer\">Dise\u00f1o UI<\/a>.<\/p>\n<h3 class=\"blog-titles\">UI Front End Developer<\/h3>\n<p class=\"blog-p\">Aquella persona en el lugar de desarrollador Frontend se ocupa de\u00a0<strong>crear la interfaz con la que el usuario interact\u00faa<\/strong>, a partir de c\u00f3digo. Utilizando desde HTML hasta CSS, materializan aquello que fue concebido desde el UX y UI. S\u00f3lo son responsables de producir aquello que se observa, es por eso que se complementa con la parte Back End, a cargo de desarrollar la porci\u00f3n de la interfaz que no puede verse.<\/p>\n<h3 class=\"blog-titles\">UI Motion<\/h3>\n<p class=\"blog-p\"><strong>Concibe las respuestas o reacciones instant\u00e1neas<\/strong>\u00a0que la interfaz le mostrar\u00e1 a los usuarios cuando interact\u00faen, las cuales sirven para indicar, por ejemplo, el progreso o estado de una acci\u00f3n.<\/p>\n<p class=\"blog-p\">Estas \u00faltimas tres posiciones tienen algo en com\u00fan, y es que tambi\u00e9n pertenecen al campo del UI. Ahora que tienes conocimiento sobre qu\u00e9 es el UX y qu\u00e9 roles existen dentro del UX design, veremos brevemente qu\u00e9 es el UI design y sus diferencias con el UX.<\/p>\n<h2 class=\"blog-titles\">\u00bfQu\u00e9 es UI?<\/h2>\n<p class=\"blog-p\">Es casi imposible explicar en profundidad qu\u00e9 es el UX sin incluir tambi\u00e9n la definici\u00f3n de UI y sus implicancias, dado que si bien no son lo mismo &#8211; y en los siguientes p\u00e1rrafos veremos porqu\u00e9 &#8211; son dos caras de la misma moneda, ambas disciplinas est\u00e1n inextricablemente ligadas.<\/p>\n<p class=\"blog-p\"><strong>La interfaz de Usuario (UI) refiere a todo aquello con lo que los usuarios interact\u00faan<\/strong>\u00a0de forma directa, desde el packaging hasta un sitio web, aquello que puede verse o tocarse, el \u201celemento\u201d con el cual los usuarios vivencian\u00a0la experiencia que fue dise\u00f1ada en el proceso de UX, en otras palabras, la parte tangible.<\/p>\n<p class=\"blog-p\">Para ilustrar la\u00a0<strong>simbiosis que existe entre UX y UI<\/strong>\u00a0podr\u00edamos traer a colaci\u00f3n un ejemplo que seguramente has experimentado a la hora de cerrar un anuncio o pop up.<\/p>\n<p class=\"blog-p\">En muchos casos, aunque la acci\u00f3n que desees realizar sea la misma, cerrar la ventana o eliminar documentos, por mencionar algunos casos, un cambio en el color, forma, posici\u00f3n y dem\u00e1s variables de un simple bot\u00f3n afecta el proceso, por ende UI o la parte visible de la interfaz, influye directamente la experiencia y viceversa.<\/p>\n<p class=\"blog-p\">A su vez, es posible incorporar elementos visuales identificatorios propios de la organizaci\u00f3n o marca, y a trav\u00e9s de la interacci\u00f3n entre el usuario y dicha interfaz, contribuir\u00a0al posicionamiento y generar experiencias positivas en relaci\u00f3n a esta.<\/p>\n<p class=\"blog-p\">Siempre la UI debe apoyar los procesos que los dise\u00f1adores UX determinaron como favorables para la interacci\u00f3n, disminuyendo a trav\u00e9s de la est\u00e9tica los errores potenciales que los usuarios pueden cometer, ocasion\u00e1ndoles frustraci\u00f3n y, por ende, una peor experiencia.<\/p>\n<h2 class=\"blog-titles\">\u00bfC\u00f3mo es el proceso de dise\u00f1o?<\/h2>\n<p class=\"blog-p\"><strong>Se dice que el buen UX es aquel que no se percibe<\/strong>, ya que la experiencia se vuelve fluida y casi intuitiva, dejando al usuario satisfecho, con una impresi\u00f3n y sentimientos positivos en relaci\u00f3n a la marca u organizaci\u00f3n.<\/p>\n<p class=\"blog-p\">Ahora bien, dicho esto, queda claro que para lograr tal naturalidad en la interacci\u00f3n\u00a0<strong>debe existir un conocimiento profundo del usuario<\/strong>. Este hecho nos conduce directamente a pensar acerca del proceso de dise\u00f1o UX.<\/p>\n<p class=\"blog-p\">Por lo general, consta de cinco pasos, adoptados de la metodolog\u00eda design thinking, que permiten definir un problema, formular hip\u00f3tesis e ideas y testearlas r\u00e1pidamente a trav\u00e9s de prototipos o MVPs, Minimum Viable Product.<\/p>\n<p class=\"blog-p\">El M\u00ednimo Producto Viable consiste en una versi\u00f3n base de la aplicaci\u00f3n o el sitio. Se habla de versi\u00f3n base porque se centra en crear la propuesta de la experiencia de dise\u00f1o y en las funciones centrales. En base a eso, se ir\u00e1n agregando nuevas funcionalidades. Por ejemplo, Instagram en su MVP ten\u00eda la funci\u00f3n de compartir fotos, luego fue agregando funciones de mensajes directos, compartir publicaciones temporales y dem\u00e1s.<\/p>\n<p class=\"blog-p\">La metodolog\u00eda de\u00a0<strong><em>design thinking<\/em><\/strong>\u00a0tiene su ra\u00edz en una de las bases del dise\u00f1o UX UI: la empat\u00eda. Antes te adelant\u00e9 que\u00a0<strong>no dise\u00f1ar\u00e1s a tu gusto, sino a la necesidad<\/strong>\u00a0de tus user personas. Entender los conflictos que tienen te ayudar\u00e1 a dise\u00f1ar la mejor experiencia posible para que tu producto sea el \u00fanico que quieran usar. Esto puede variar desde distintos puntos de vista: puede ser en la forma en la que te expresas, en los colores que utilizas para generar contraste o en la construcci\u00f3n de flujos que ayuden a simplificar las tareas a realizar, entre otras posibilidades.<\/p>\n<p class=\"blog-p\">Entre las caracter\u00edsticas de este tipo de metodolog\u00edas \u00e1giles, destaca el hecho de que la iteraci\u00f3n entre los pasos es constante, no hay un orden definido o universal seg\u00fan el cual proceder. Por ejemplo,\u00a0<strong>luego del test de usabilidad, se analizan los resultados<\/strong>, las reacciones de los usuarios y el feedback obtenido para realizar un nuevo proceso de ideaci\u00f3n o prototipado, incluso existen casos en los cu\u00e1les la hip\u00f3tesis inicial se modifica luego del primer encuentro con el usuario y se comienza el proceso partiendo desde un punto de vista diferente, gracias a la nueva informaci\u00f3n obtenida. Todos los descubrimientos que se efect\u00faen a trav\u00e9s de los cinco pasos contribuyen al resultado final, si es que hay cosa tal.<\/p>\n<p class=\"blog-p\">Como fue mencionado en el p\u00e1rrafo anterior, otro de los supuestos desde los cuales se implementa esta metodolog\u00eda es en la capacidad de mejora continua, lo que implica que toda soluci\u00f3n es temporal y puede ser reemplazada por otra que se adapte mejor a las caracter\u00edsticas o necesidades del usuario.<\/p>\n<h3 class=\"blog-titles\">Conclusi\u00f3n sobre UX y UI<\/h3>\n<p class=\"blog-p\">Aunque el\u00a0<strong>UX no es una invenci\u00f3n reciente, es una cuasi-ciencia ya que siempre se encuentra en un estado beta o de experimentaci\u00f3n<\/strong>\u00a0y los descubrimientos realizados en todas las fases del proceso permiten tomar nuevos rumbos, adaptando las interfaces a las necesidades, preferencias y exigencias m\u00e1s recientes de los destinatarios.<\/p>\n<p class=\"blog-p\"><strong>Acompa\u00f1ado del UI design, permite crear y optimizar productos f\u00edsicos y digitales, mejorando las experiencias en relaci\u00f3n a estos<\/strong> y, consecuentemente, la calidad de vida de los usuarios en muchos casos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando entras a un sitio web o a una aplicaci\u00f3n, lo primero que notas es que puedes navegar y encontrar lo que buscas con facilidad. Los datos est\u00e1n ordenados y tienes la posibilidad de interactuar con las p\u00e1ginas o\u00a0 filtrar, descargar, a\u00f1adir informaci\u00f3n o realizar b\u00fasquedas m\u00e1s personalizadas. Esto es experiencia de usuario o UX. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":23806,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-23805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","wpbf-post"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Diseno UX\/UI - Roxty City | Web and SEO Agency<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diseno UX\/UI - Roxty City | Web and SEO Agency\" \/>\n<meta property=\"og:description\" content=\"Cuando entras a un sitio web o a una aplicaci\u00f3n, lo primero que notas es que puedes navegar y encontrar lo que buscas con facilidad. Los datos est\u00e1n ordenados y tienes la posibilidad de interactuar con las p\u00e1ginas o\u00a0 filtrar, descargar, a\u00f1adir informaci\u00f3n o realizar b\u00fasquedas m\u00e1s personalizadas. Esto es experiencia de usuario o UX. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Roxty City | Web and SEO Agency\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-04T03:10:05+00:00\" \/>\n<meta name=\"author\" content=\"Admin-Louis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Admin-Louis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/\"},\"author\":{\"name\":\"Admin-Louis\",\"@id\":\"https:\/\/roxtycity.com\/en\/#\/schema\/person\/cb04f828ba037b49887abefc48891bd8\"},\"headline\":\"Diseno UX\/UI\",\"datePublished\":\"2023-10-04T03:10:05+00:00\",\"dateModified\":\"2023-10-04T03:10:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/\"},\"wordCount\":3725,\"publisher\":{\"@id\":\"https:\/\/roxtycity.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Diseno y Desarrollo\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/\",\"url\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/\",\"name\":\"Diseno UX\/UI - Roxty City | Web and SEO Agency\",\"isPartOf\":{\"@id\":\"https:\/\/roxtycity.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-10-04T03:10:05+00:00\",\"dateModified\":\"2023-10-04T03:10:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/roxtycity.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Diseno UX\/UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/roxtycity.com\/en\/#website\",\"url\":\"https:\/\/roxtycity.com\/en\/\",\"name\":\"Roxty City | Web and SEO Agency\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/roxtycity.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/roxtycity.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/roxtycity.com\/en\/#organization\",\"name\":\"Roxty City | Web and SEO Agency\",\"url\":\"https:\/\/roxtycity.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/roxtycity.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/roxtycity.com\/en\/wp-content\/uploads\/2024\/08\/logo-2020-roxty-city-trasparente-no-oficial-770x513-1-1.png\",\"contentUrl\":\"https:\/\/roxtycity.com\/en\/wp-content\/uploads\/2024\/08\/logo-2020-roxty-city-trasparente-no-oficial-770x513-1-1.png\",\"width\":770,\"height\":513,\"caption\":\"Roxty City | Web and SEO Agency\"},\"image\":{\"@id\":\"https:\/\/roxtycity.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/roxtycity.com\/en\/#\/schema\/person\/cb04f828ba037b49887abefc48891bd8\",\"name\":\"Admin-Louis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/roxtycity.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f828d8a805a418bb0396288d560f151d9bbb71465acca8dbfe596333f3f14d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f828d8a805a418bb0396288d560f151d9bbb71465acca8dbfe596333f3f14d?s=96&d=mm&r=g\",\"caption\":\"Admin-Louis\"},\"sameAs\":[\"https:\/\/roxtycity.com\/en\"],\"url\":\"https:\/\/roxtycity.com\/en\/author\/admin-louis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Diseno UX\/UI - Roxty City | Web and SEO Agency","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:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/","og_locale":"en_US","og_type":"article","og_title":"Diseno UX\/UI - Roxty City | Web and SEO Agency","og_description":"Cuando entras a un sitio web o a una aplicaci\u00f3n, lo primero que notas es que puedes navegar y encontrar lo que buscas con facilidad. Los datos est\u00e1n ordenados y tienes la posibilidad de interactuar con las p\u00e1ginas o\u00a0 filtrar, descargar, a\u00f1adir informaci\u00f3n o realizar b\u00fasquedas m\u00e1s personalizadas. Esto es experiencia de usuario o UX. [&hellip;]","og_url":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/","og_site_name":"Roxty City | Web and SEO Agency","article_published_time":"2023-10-04T03:10:05+00:00","author":"Admin-Louis","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Admin-Louis","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#article","isPartOf":{"@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/"},"author":{"name":"Admin-Louis","@id":"https:\/\/roxtycity.com\/en\/#\/schema\/person\/cb04f828ba037b49887abefc48891bd8"},"headline":"Diseno UX\/UI","datePublished":"2023-10-04T03:10:05+00:00","dateModified":"2023-10-04T03:10:05+00:00","mainEntityOfPage":{"@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/"},"wordCount":3725,"publisher":{"@id":"https:\/\/roxtycity.com\/en\/#organization"},"image":{"@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#primaryimage"},"thumbnailUrl":"","articleSection":["Diseno y Desarrollo"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/","url":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/","name":"Diseno UX\/UI - Roxty City | Web and SEO Agency","isPartOf":{"@id":"https:\/\/roxtycity.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#primaryimage"},"image":{"@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-10-04T03:10:05+00:00","dateModified":"2023-10-04T03:10:05+00:00","breadcrumb":{"@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/roxtycity.com\/en\/2023\/10\/03\/diseno-ux-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/roxtycity.com\/en\/"},{"@type":"ListItem","position":2,"name":"Diseno UX\/UI"}]},{"@type":"WebSite","@id":"https:\/\/roxtycity.com\/en\/#website","url":"https:\/\/roxtycity.com\/en\/","name":"Roxty City | Web and SEO Agency","description":"","publisher":{"@id":"https:\/\/roxtycity.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/roxtycity.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/roxtycity.com\/en\/#organization","name":"Roxty City | Web and SEO Agency","url":"https:\/\/roxtycity.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/roxtycity.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/roxtycity.com\/en\/wp-content\/uploads\/2024\/08\/logo-2020-roxty-city-trasparente-no-oficial-770x513-1-1.png","contentUrl":"https:\/\/roxtycity.com\/en\/wp-content\/uploads\/2024\/08\/logo-2020-roxty-city-trasparente-no-oficial-770x513-1-1.png","width":770,"height":513,"caption":"Roxty City | Web and SEO Agency"},"image":{"@id":"https:\/\/roxtycity.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/roxtycity.com\/en\/#\/schema\/person\/cb04f828ba037b49887abefc48891bd8","name":"Admin-Louis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/roxtycity.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f828d8a805a418bb0396288d560f151d9bbb71465acca8dbfe596333f3f14d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f828d8a805a418bb0396288d560f151d9bbb71465acca8dbfe596333f3f14d?s=96&d=mm&r=g","caption":"Admin-Louis"},"sameAs":["https:\/\/roxtycity.com\/en"],"url":"https:\/\/roxtycity.com\/en\/author\/admin-louis\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/posts\/23805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/comments?post=23805"}],"version-history":[{"count":0,"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/posts\/23805\/revisions"}],"wp:attachment":[{"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/media?parent=23805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/categories?post=23805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/roxtycity.com\/en\/wp-json\/wp\/v2\/tags?post=23805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}