La IPO y la UX son conceptos que han tomado cada vez m\u00e1s importancia en el mundo actual, en el que la tecnolog\u00eda y la interacci\u00f3n digital est\u00e1n en constante evoluci\u00f3n.<\/p>\n\n\n\n
uno de los conceptos m\u00e1s importantes en el dise\u00f1o de interfaces de usuario: la Interacci\u00f3n Persona Ordenador, tambi\u00e9n conocida como IPO. Este campo multidisciplinario se enfoca en el dise\u00f1o de la interacci\u00f3n entre personas y ordenadores, y naci\u00f3 en la d\u00e9cada de los 80 con la llegada de los ordenadores personales.<\/p>\n\n\n\n
Antes de la IPO, los ordenadores eran herramientas dise\u00f1adas exclusivamente para entornos especializados, lo que hac\u00eda que su uso fuera limitado a un p\u00fablico experimentado. Pero con la popularizaci\u00f3n de los ordenadores personales, surgi\u00f3 la necesidad de redise\u00f1ar la interacci\u00f3n para adaptarla a un p\u00fablico mucho menos experimentado. Y de ah\u00ed nacio la UX<\/strong> o user experience (experiencia de usuario).<\/p>\n\n\n\n Sin embargo, la Experiencia de Usuario no se limita \u00fanicamente a productos o servicios digitales, sino que se extiende a objetos y servicios cotidianos que pueden generar una experiencia positiva o negativa en el usuario.<\/p>\n\n\n\n El Dise\u00f1o de Experiencia de Usuario es fundamental para lograr la satisfacci\u00f3n del usuario al interactuar con un producto. Se trata de un proceso en el que se mejora la usabilidad y accesibilidad del producto, con el objetivo de crear una experiencia positiva para el usuario. Para conseguir una buena experiencia de usuario, es importante que el producto sea usable, \u00fatil, deseable y accesible<\/strong>. Es decir, el producto debe ser f\u00e1cil de usar y entender, debe resolver una necesidad del usuario, debe tener un dise\u00f1o visual atractivo y debe estar dise\u00f1ado para que cualquier persona pueda utilizarlo, independientemente de sus limitaciones. Para lograr todo esto, es fundamental que el dise\u00f1ador de experiencia de usuario se ponga en los zapatos del usuario, comprendiendo su comportamiento, motivaciones, objetivos, dificultades y necesidades.<\/p>\n\n\n\n Por ello, se extendi\u00f3 la idea de que la interacci\u00f3n con el ordenador deb\u00eda parecerse cada vez m\u00e1s a un di\u00e1logo de humano a humano. Esta idea se materializ\u00f3 en la IPO, cuyo objetivo principal era crear interfaces de usuario intuitivas y f\u00e1ciles de usar.<\/p>\n\n\n\n los 5 beneficios derivados del dise\u00f1o de experiencia de usuario (UX) son:<\/p>\n\n\n\n Haciendo un resumen de lo ya mencionado para afianzar conocimientos, podemos decir qu\u00e9 para lograr una buena experiencia de usuario, es importante que se cumplan los siguientes aspectos:<\/p>\n\n\n\n Un dise\u00f1ador de experiencia de usuario debe ponerse en los zapatos del usuario para conocer en profundidad su comportamiento, motivaciones, objetivos, dificultades y necesidades. Para triunfar, el producto o servicio debe crear valor para el usuario.<\/p>\n\n\n\n El Dise\u00f1o de Experiencia de Usuario es una disciplina en constante evoluci\u00f3n que se adapta a los cambios tecnol\u00f3gicos y a las necesidades del usuario. Su objetivo es crear productos y servicios que sean f\u00e1ciles de usar, \u00fatiles y atractivos, y que proporcionen una experiencia positiva al usuario.<\/p>\n\n\n\n En 1995, Donald Norman acu\u00f1\u00f3 el concepto de Experiencia de Usuario (UX), convirti\u00e9ndose en uno de los hitos m\u00e1s importantes en la historia del dise\u00f1o centrado en el usuario. Norman es un reconocido gur\u00fa de la usabilidad, consultor y cofundador de Norman Nielsen Group y profesor de Ciencia Cognitiva. Su libro \u00abLa psicolog\u00eda de los objetos cotidianos<\/a>\u00bb es considerado un libro indispensable para cualquier dise\u00f1ador y en \u00e9l se propugna un dise\u00f1o centrado en el usuario, una teor\u00eda basada en las necesidades e intereses de los usuarios, con especial \u00e9nfasis en hacer que los productos sean utilizables y comprensibles.<\/p>\n\n\n\n La usabilidad se refiere a la facilidad con la que los usuarios pueden interactuar con un producto, sistema o servicio con el fin de lograr sus objetivos de manera eficiente y efectiva. Se trata de un aspecto fundamental de la experiencia de usuario, que se centra en la facilidad de uso de un producto.<\/p>\n\n\n\n La experiencia de usuario, por otro lado, se refiere a todas las percepciones, emociones, actitudes y respuestas que un usuario tiene durante la interacci\u00f3n con un producto o servicio. La experiencia de usuario se enfoca en la experiencia completa del usuario, incluyendo aspectos m\u00e1s all\u00e1 de la usabilidad, como la emoci\u00f3n y la satisfacci\u00f3n personal.<\/strong><\/p>\n\n\n\n Tradicionalmente, los proyectos de dise\u00f1o de experiencia de usuario se han centrado en los requerimientos y entregas, pero Lean UX cambia este marco de trabajo, donde el objetivo no es producir un documento entregable sino cambiar algo en el mundo real. El enfoque de Lean UX se basa en la experimentaci\u00f3n, en la r\u00e1pida iteraci\u00f3n de las ideas y en el uso de procesos incrementales. Adem\u00e1s, Lean UX se apoya en los pilares de design thinking y metodolog\u00edas de desarrollo \u00e1gil de software. La metodolog\u00eda de Lean UX se divide en tres partes: suposiciones, formulaci\u00f3n y validaci\u00f3n de hip\u00f3tesis y medici\u00f3n de resultados. <\/p>\n\n\n\n Lean UX es una metodolog\u00eda innovadora que ayuda a los equipos a producir mejores resultados y una experiencia de usuario m\u00e1s satisfactoria.<\/strong><\/p>\n\n\n\n El design thinking es un enfoque creativo y colaborativo para resolver problemas y dise\u00f1ar soluciones innovadoras. Implica empatizar con los usuarios, definir el problema, idear soluciones, crear prototipos y probar iterativamente hasta llegar a una soluci\u00f3n final.<\/p>\n\n\n\n Un ejemplo sencillo de design thinking podr\u00eda ser dise\u00f1ar un nuevo juguete. El proceso podr\u00eda comenzar por empatizar con los ni\u00f1os para entender sus necesidades y deseos, luego definir el problema de qu\u00e9 tipo de juguete se podr\u00eda crear. Despu\u00e9s, se idear\u00edan diferentes soluciones, como un juguete con luces y sonidos, uno que se transforma en diferentes formas, o uno que se mueve de manera divertida. Luego, se crear\u00edan prototipos de los juguetes m\u00e1s prometedores para probarlos con los ni\u00f1os y obtener comentarios. Finalmente, se refinaria el dise\u00f1o en funci\u00f3n de los comentarios recibidos y se lanzar\u00eda el juguete al mercado.<\/p>\n\n\n\n La metodolog\u00eda Agile es un enfoque de gesti\u00f3n de proyectos que se centra en la colaboraci\u00f3n, la flexibilidad y la iteraci\u00f3n para lograr un resultado final de alta calidad. En lugar de un enfoque tradicional de cascada, donde cada fase del proyecto se completa antes de pasar a la siguiente, Agile se enfoca en ciclos iterativos y entregas frecuentes de peque\u00f1as partes del proyecto.<\/p>\n\n\n\n Un ejemplo de Agile es el proceso de desarrollo de software Scrum, donde un equipo trabaja en ciclos de dos semanas para completar partes del proyecto y recibir retroalimentaci\u00f3n del cliente o usuario final. Cada ciclo comienza con una reuni\u00f3n de planificaci\u00f3n donde el equipo define las tareas que se trabajar\u00e1n en el ciclo y establece un objetivo para completar esas tareas. Luego, el equipo trabaja en esas tareas durante las siguientes dos semanas, revisando su progreso diariamente en una reuni\u00f3n breve llamada \u00abstand-up\u00bb. Al final del ciclo, el equipo presenta lo que han logrado al cliente o usuario final, quien proporciona retroalimentaci\u00f3n para mejorar el trabajo del equipo en el siguiente ciclo. Este proceso se repite a lo largo del proyecto hasta que se completa el objetivo general.<\/p>\n\n\n\n <\/p>\n\n\n\n Al final la idea es crear peque\u00f1os prototipos de forma r\u00e1pida para poder comprobar su viabilidad y efectividad.<\/p>\n\n\n\n Imagina que tienes un juego en tu tel\u00e9fono que te gusta mucho. Pero un d\u00eda lo abres y te das cuenta de que los botones son muy peque\u00f1os y dif\u00edciles de tocar. Adem\u00e1s, la pantalla se ve muy oscura y no se puede ver bien lo que est\u00e1 pasando en el juego.<\/p>\n\n\n\n Eso significa que el juego no tiene una buena experiencia de usuario. Es decir, no se ha pensado en las personas que lo van a usar y sus necesidades. Si el juego hubiera sido dise\u00f1ado pensando en el usuario, los botones ser\u00edan m\u00e1s grandes y f\u00e1ciles de tocar, y la pantalla se ver\u00eda bien para que puedas jugar mejor.<\/p>\n\n\n\n la empat\u00eda es una habilidad fundamental para el dise\u00f1o de experiencia de usuario. Nos permite entender las necesidades y deseos de los usuarios y dise\u00f1ar soluciones adecuadas para ellos. La empat\u00eda nos ayuda a mejorar la experiencia de usuario y a crear productos que satisfagan las necesidades de nuestros clientes.<\/p>\n\n\n\n El dise\u00f1o de Experiencia de Usuario es como jugar con bloques de construcci\u00f3n: primero imaginamos c\u00f3mo queremos que sea, luego lo hacemos realidad, lo probamos para ver si funciona bien y lo mejoramos si es necesario. No siempre tenemos que hacerlo en ese orden, podemos adaptarnos a lo que necesitamos en cada momento. Lo importante es que no nos rindamos si algo no funciona a la primera, sino que sigamos intentando y aprendiendo para hacer que la experiencia de los usuarios sea la mejor posible. Adem\u00e1s, una buena experiencia de usuario es muy importante porque hace que los usuarios se acuerden de nosotros y nos prefieran a la competencia. Para conseguir esto, utilizamos una metodolog\u00eda ya mencionada llamada Lean UX, que se basa en tres cosas: pensar en el usuario, trabajar de forma \u00e1gil y experimentar para obtener resultados medibles.<\/p>\n\n\n\n UXPA-UK es una organizaci\u00f3n sin fines de lucro en el Reino Unido que se enfoca en el campo de la Experiencia de Usuario (UX). Su objetivo es fomentar y promover la pr\u00e1ctica de la UX en diferentes industrias y sectores, proporcionando una plataforma para que los profesionales de UX se conecten, aprendan y compartan conocimientos y experiencias. Ofrecen eventos, capacitaciones, recursos y oportunidades de networking para sus miembros y la comunidad de UX en general.<\/p>\n\n\n\n Puedes encontrar su p\u00e1gina en esta url: https:\/\/uxpa-uk.org\/<\/a> <\/p>\n\n\n\n Lo bueno de que sea una organizaci\u00f3n sin animos de lucro es que cuenta con m\u00e1s independencia y no persigue fines comerciales y lo que hacen es vocacional.<\/p>\n\n\n\n En el Dise\u00f1o Centrado en el Usuario, el conocimiento profundo del usuario objetivo es crucial para dise\u00f1ar productos digitales que resuelvan sus necesidades y les ofrezcan un valor competitivo. Para lograr esto, es necesario realizar una investigaci\u00f3n exhaustiva que permita comprender el comportamiento y el entorno del usuario. <\/p>\n\n\n\n El proceso de investigaci\u00f3n y descubrimiento de necesidades no es secuencial ni lineal, sino que presenta ciclos en los que iterativamente se prueba el dise\u00f1o y se optimiza hasta alcanzar el nivel de calidad requerido. <\/p>\n\n\n\n Los resultados de aprendizaje incluyen la comprensi\u00f3n de la importancia de la Experiencia de Usuario, adquisici\u00f3n de conocimientos e informaci\u00f3n sobre el comportamiento del usuario, propuesta y validaci\u00f3n de soluciones que resuelvan sus problemas, y la conexi\u00f3n entre la metodolog\u00eda Lean y la Experiencia de Usuario. <\/p>\n\n\n\n En el dise\u00f1o centrado en el usuario, la planificaci\u00f3n de la estructura de contenidos y la realizaci\u00f3n de esquemas o planos que gu\u00eden la interacci\u00f3n del usuario con el producto digital son fundamentales para lograr un dise\u00f1o coherente y efectivo.<\/p>\n\n\n\n Adem\u00e1s, en este enfoque de dise\u00f1o, se busca involucrar al usuario en el proceso de creaci\u00f3n del producto desde el principio hasta el final. Esto implica la realizaci\u00f3n de pruebas y prototipos que permitan recopilar informaci\u00f3n valiosa sobre la percepci\u00f3n y el comportamiento del usuario ante el producto, lo que permite mejorar el dise\u00f1o y la funcionalidad del mismo.<\/p>\n\n\n\n En definitiva, el Dise\u00f1o Centrado en el Usuario busca crear productos digitales que cumplan con las necesidades y expectativas de los usuarios, y para ello se apoya en la investigaci\u00f3n y el conocimiento profundo del usuario, la iteraci\u00f3n y la validaci\u00f3n constante de soluciones, y la participaci\u00f3n activa del usuario en el proceso de dise\u00f1o.<\/p>\n\n\n\n El proceso de Dise\u00f1o Centrado en el Usuario (DCU) consta de varias etapas que incluyen:<\/p>\n\n\n\n En otras fuentes, como Usability.gov y The International Usability Standard, se definen etapas similares, que se basan en la comprensi\u00f3n del usuario, la involucraci\u00f3n del usuario en el proceso de dise\u00f1o y evaluaci\u00f3n, y el enfoque en la experiencia del usuario en su totalidad. Aunque hay diferentes sistemas de trabajo, todos se enfocan en analizar oportunidades para mejorar la experiencia del usuario.<\/p>\n\n\n\n El Dise\u00f1o Centrado en el Usuario (DCU) es un proceso que se enfoca en satisfacer las necesidades de los usuarios a trav\u00e9s de la empat\u00eda y la comprensi\u00f3n de sus necesidades. En la primera etapa del DCU, la empat\u00eda es esencial para lograr una comprensi\u00f3n profunda de los usuarios. Es importante observar, involucrarse, mirar y escuchar al usuario. La empat\u00eda permite al dise\u00f1ador captar lo que es importante para el usuario y dise\u00f1ar soluciones significativas para sus problemas. Para aplicar la empat\u00eda, es fundamental ver los problemas a resolver desde la perspectiva de las personas que los enfrentan.<\/p>\n\n\n\n Enmarcar el problema de la manera correcta es la \u00fanica forma de crear la soluci\u00f3n correcta. Para lograr esto, es necesario determinar el desaf\u00edo del proyecto basado en lo que se ha aprendido del usuario y su contexto. <\/p>\n\n\n\n Una declaraci\u00f3n de problema debe cumplir ciertos criterios para funcionar bien, como ser directa e inspiradora, generar criterios para evaluar ideas y cautivar las mentes y los corazones de las personas estudiadas.<\/p>\n\n\n\n El mapa de empat\u00eda es una t\u00e9cnica colaborativa que permite conocer en profundidad al usuario y detectar posibles puntos d\u00e9biles en nuestra investigaci\u00f3n. Se compone de 4 cuadrantes: \u00abLo que dice\u00bb, \u00abLo que piensa\u00bb, \u00abLo que hace\u00bb y \u00abLo que siente\u00bb. En ellos se analizan los comentarios, pensamientos, acciones y emociones del usuario durante una entrevista. Esta t\u00e9cnica nos permite descubrir las necesidades del usuario, conocer en profundidad sus comportamientos y obtener informaci\u00f3n objetiva de la audiencia. Los mapas de empat\u00eda son una herramienta valiosa en el proceso de dise\u00f1o.<\/p>\n\n\n\n En la etapa inicial de cualquier proceso creativo, es crucial generar la mayor cantidad de ideas posibles. A menudo, tendemos a desestimar algunas ideas por considerarlas \u00ablocas\u00bb o \u00abirrelevantes\u00bb, pero lo cierto es que todas las ideas son valiosas en esta etapa.<\/p>\n\n\n\n La generaci\u00f3n de ideas permite atacar distintos enfoques y proponer soluciones innovadoras y creativas. Adem\u00e1s, este proceso nos permite crear prototipos que nos ayudar\u00e1n a evaluar la viabilidad de las soluciones propuestas.<\/p>\n\n\n\n Es importante mencionar que la generaci\u00f3n de ideas debe separarse del \u00e1rea de evaluaci\u00f3n de ideas. Esto significa que no debemos juzgar ni descartar ideas durante el proceso de generaci\u00f3n, sino m\u00e1s bien recopilar todas las propuestas y luego analizarlas de manera objetiva.<\/p>\n\n\n\n Una de las t\u00e9cnicas m\u00e1s efectivas de investigaci\u00f3n es la entrevista con usuarios, ya sea en persona o de forma remota. A trav\u00e9s de la entrevista, podemos obtener informaci\u00f3n de primera mano sobre las experiencias, opiniones, actitudes o percepciones de los usuarios. Adem\u00e1s, la interacci\u00f3n personal permite detectar gestos y detalles que ser\u00edan imposibles de percibir por v\u00eda remota.<\/p>\n\n\n\n Otra t\u00e9cnica \u00fatil son los focus group, entrevistas grupales donde el entrevistador formula preguntas y asiste como moderador y observador de las interacciones entre los entrevistados. Esta t\u00e9cnica nos permite comprender c\u00f3mo los usuarios interact\u00faan entre s\u00ed y c\u00f3mo perciben los productos en relaci\u00f3n con la competencia.<\/p>\n\n\n\n Al entender las necesidades reales de los usuarios, podemos dise\u00f1ar soluciones que se ajusten a sus demandas y minimizar el riesgo de error. Las entrevistas con usuarios y los focus group son t\u00e9cnicas efectivas para obtener informaci\u00f3n de primera mano sobre las necesidades y deseos de los usuarios.<\/p>\n\n\n\n En el DCU, la herramienta \u00abPersonas\u00bb es \u00fatil para generar representaciones de usuarios tipo de un producto o servicio. Esta t\u00e9cnica incluye informaci\u00f3n demogr\u00e1fica, personal, actitudinal, objetivos y motivaciones, y comportamiento del usuario. Los detalles demogr\u00e1ficos y personales son \u00fatiles para generar empat\u00eda en el equipo de investigadores hacia el usuario. A diferencia de los segmentos de mercado o grupos de usuarios, una Persona es un concepto m\u00e1s realista y cercano, haci\u00e9ndolo m\u00e1s f\u00e1cil de recordar e interiorizar por parte de los dise\u00f1adores durante el proceso de dise\u00f1o.<\/p>\n\n\n\n En un proyecto pueden existir diferentes Personas con diferentes caracteristicas que cumplen arquetipos definibles sobre los que podemos apoyarnos para dise\u00f1ar la UX.<\/p>\n\n\n\n \u00abCard sorting\u00bb es una t\u00e9cnica que consiste en observar c\u00f3mo un grupo de usuarios ordena tarjetas etiquetadas con diferentes categor\u00edas, con el objetivo de categorizar informaci\u00f3n y organizar la arquitectura de una web. Dependiendo de los objetivos del investigador, la t\u00e9cnica puede ser abierta o cerrada. En el Card Sorting Abierto, los participantes organizan las diferentes categor\u00edas en grupos que ellos mismos consideran y atribuyen nombres a cada grupo de contenido. Mientras tanto, en el Card Sorting Cerrado, los participantes organizan el contenido en categor\u00edas ya definidas previamente por el investigador. <\/p>\n\n\n\n Esta t\u00e9cnica puede ayudar a descubrir lo que los usuarios esperan del producto o servicio, as\u00ed como a jerarquizar el contenido de acuerdo con la audiencia objetivo, lo que facilita la navegaci\u00f3n del usuario y reduce el tiempo que invierte en conseguir sus objetivos.<\/p>\n\n\n\n El Viaje del Usuario es la recreaci\u00f3n de un proceso espec\u00edfico de un servicio. <\/p>\n\n\n\n Analiza las reacciones del usuario, incluyendo sus acciones, pensamientos y sentimientos durante su interacci\u00f3n con el producto, con el fin de identificar sus necesidades y debilidades. <\/p>\n\n\n\n El Viaje del Usuario investiga el sentimiento promedio de cada usuario y detecta puntos de dolor en el servicio. Para implementar un Viaje del Usuario, es necesario considerar la persona, las etapas, los momentos clave (necesidades) y las oportunidades de mejora (ideas). <\/p>\n\n\n\n Este ejercicio puede ser tan simple o complejo como se necesite y puede implicar la visualizaci\u00f3n del camino del usuario desde la conciencia del servicio hasta la utilizaci\u00f3n del mismo. El ejercicio puede llevarse a cabo utilizando una hoja de c\u00e1lculo extensa, que incluye informaci\u00f3n sobre las motivaciones del usuario, momentos clave y \u00e1reas de mejora.<\/p>\n\n\n\n Es importante que se estudie al usuario final, pero tambi\u00e9n que el equipo de desarrollo aporte sus ideas y preocupaciones. En un sentido m\u00e1s t\u00e9cnico esto puede ayudar a detectar problemas y dise\u00f1ar nuevas estrategias para evitarlos y dar soluciones antes de que ocurran sin sacrificar, por supuesto, facilitar el uso del producto o servicio al usuario.<\/p>\n\n\n\n El dise\u00f1o de interacci\u00f3n es el puente entre la funcionalidad del servicio y la interfaz de usuario. Se modela, delimita y conduce el comportamiento que tendr\u00e1 el producto digital que estamos construyendo, anticipando el uso que le dar\u00e1 el usuario y gui\u00e1ndolo hacia el objetivo pretendido a trav\u00e9s de una serie de opciones.<\/p>\n\n\n\n Por ejemplo, si un dise\u00f1ador est\u00e1 creando una aplicaci\u00f3n de redes sociales, es importante tener en cuenta c\u00f3mo los usuarios interact\u00faan entre s\u00ed. Si la aplicaci\u00f3n no est\u00e1 dise\u00f1ada de manera adecuada para facilitar la comunicaci\u00f3n y la interacci\u00f3n entre los usuarios, es probable que la gente no la use o se sienta frustrada al hacerlo.<\/p>\n\n\n\n Otro ejemplo podr\u00eda ser el dise\u00f1o de una p\u00e1gina web. Si un sitio web no est\u00e1 dise\u00f1ado de manera adecuada para hacer que la navegaci\u00f3n sea f\u00e1cil y eficiente, es probable que los usuarios abandonen el sitio y busquen alternativas.<\/p>\n\n\n\n En general, el dise\u00f1o de interacci\u00f3n se centra en dise\u00f1ar la manera en que las personas interact\u00faan con productos y servicios digitales, y c\u00f3mo se pueden mejorar esas interacciones para hacerlas m\u00e1s f\u00e1ciles, agradables y eficientes.<\/p>\n\n\n\n seg\u00fan el modelo propuesto por Donald Norman, existen tres etapas principales en el proceso de dise\u00f1o de interacci\u00f3n:<\/p>\n\n\n\n Cada una de estas etapas es importante y complementaria para lograr un dise\u00f1o de interacci\u00f3n efectivo y satisfactorio para los usuarios. Al seguir estas etapas, el dise\u00f1ador puede garantizar que el dise\u00f1o de interacci\u00f3n sea funcional, usable y satisfactorio para los usuarios finales.<\/p>\n\n\n\n Debemos evitar el castigo en el error para dise\u00f1ar una buena experiencia de usuario, ya que esto puede inhibir una conducta, debilitar la tendencia y generar falta de esfuerzo. Las personas buscamos el hedonismo: buscar el placer y huir del dolor. Si hay castigo por cada error huiremos del aprendizaje. Hay que motivar de forma positiva cuando ocurren errores y esto es aplicable al dise\u00f1o.<\/p>\n\n\n\n Esta sustenta que cuando las personas hacen algo, lo hacen porque esperan que les vaya bien o porque creen que obtendr\u00e1n un beneficio. Por ejemplo, si un ni\u00f1o sabe que si hace su tarea recibir\u00e1 una buena nota, es m\u00e1s probable que haga la tarea.<\/p>\n\n\n\n Adem\u00e1s, cuando se dise\u00f1an cosas como p\u00e1ginas web o aplicaciones, se trata de hacerlas lo m\u00e1s f\u00e1ciles posible para que las personas puedan hacer lo que necesitan hacer sin tener que pensar demasiado. Esto se llama \u00abreducir la fricci\u00f3n\u00bb. Un ejemplo de esto ser\u00eda si una aplicaci\u00f3n de juegos hace que sea f\u00e1cil iniciar un juego en lugar de tener que hacer muchos clics para llegar all\u00ed.<\/p>\n\n\n\n Si el usuario percibe un beneficio alto durante una tarea, es m\u00e1s probable que tenga una mayor tolerancia al esfuerzo y retenga el uso del producto. <\/p>\n\n\n\n Por lo tanto, es importante que el dise\u00f1o de la interacci\u00f3n sea f\u00e1cil, constante y coherente durante toda la navegaci\u00f3n para evitar frustraciones y construir una experiencia satisfactoria para el usuario.<\/p>\n\n\n\n La arquitectura de la informaci\u00f3n es el dise\u00f1o de espacios interactivos comprensibles que permiten al usuario encontrar lo que necesita. La arquitectura de informaci\u00f3n se divide en tres partes: clasificaci\u00f3n, taxonom\u00eda y ordenaci\u00f3n. <\/p>\n\n\n\n Imaginemos que tenemos un sitio web que vende ropa para diferentes tipos de deportes, como f\u00fatbol, baloncesto, tenis, etc.<\/p>\n\n\n\n Es importante categorizar los men\u00fas con un n\u00famero limitado de subopciones para que sea f\u00e1cilmente memorizable para el usuario. Habitualmente tenemos los siguientes men\u00fas de navegaci\u00f3n:<\/p>\n\n\n\n La precisi\u00f3n del soporte de informaci\u00f3n en los men\u00fas es esencial para que el usuario tenga un mayor control sobre la interacci\u00f3n.<\/p>\n\n\n\n una teor\u00eda surgida en Alemania a principios del siglo XX que se enfoca en c\u00f3mo nuestro cerebro percibe y organiza la informaci\u00f3n visual. El t\u00e9rmino Gestalt se puede traducir como \u00abforma\u00bb, \u00abfigura\u00bb o \u00abestructura\u00bb. Al mirar una pantalla, percibimos inconscientemente y autom\u00e1ticamente aquello que estamos viendo en agrupaciones. Para facilitar esta percepci\u00f3n inmediata en el dise\u00f1o de una interfaz, se aplican las leyes de la Gestalt, que incluyen la ley de proximidad, la ley de similitud, la ley de simetr\u00eda, la ley de regi\u00f3n com\u00fan y la relaci\u00f3n figura-fondo. Aqu\u00ed te las describo:<\/p>\n\n\n\n Cada una de estas leyes describe c\u00f3mo los elementos visuales se agrupan en nuestra mente y c\u00f3mo podemos utilizar esta comprensi\u00f3n para dise\u00f1ar interfaces m\u00e1s efectivas.<\/p>\n\n\n\n La ley de Fitts expresa que el tiempo que se requiere para pulsar un elemento depende de una relaci\u00f3n logar\u00edtmica entre su superficie y la distancia a la que se encuentra. Esto se aplica en dise\u00f1o de experiencia de usuario tratando de reducir el tiempo que requiere invertir un usuario en el desplazamiento para interactuar con otro elemento de la interfaz, especialmente cuando son elementos de un flujo l\u00f3gico y definido en el que esperamos que el usuario vaya a realizar ciertas acciones de forma encadenada. Facilitamos as\u00ed los procesos y esto gusta a los usuarios.<\/p>\n\n\n\n Cada dispositivo tiene sus particularidades y habra que adaptar la interfaz con esta ley en mente para cada tipo de dispositivo en el que se vaya a dibujar la interfaz.<\/p>\n\n\n\n Relacionado en cierta manera con el punto anterior, la toma de decisiones debe reducirse y en consecuencia el numero de interacciones necesarias para llegar del punto A al B si queremos que el uso de la interfaz requiera un esfuerzo m\u00ednimo y un aprendizaje f\u00e1cil para los usuarios<\/p>\n\n\n\n La usabilidad es un atributo de la calidad de un producto en t\u00e9rminos de facilidad de uso.<\/p>\n\n\n\n Se divide en dos dimensiones:<\/strong> objetiva y subjetiva<\/strong>. La dimensi\u00f3n objetiva se puede medir mediante observaci\u00f3n y se compone de varios atributos, incluyendo:<\/p>\n\n\n\n La dimensi\u00f3n subjetiva se basa en la percepci\u00f3n del usuario y puede incluir cosas como la satisfacci\u00f3n del usuario y la est\u00e9tica visual del producto.<\/p>\n\n\n\n El resultado de las acciones que se llevan a cabo por el usuario debe resultar en un mapeo natural de la acci\u00f3n, un resultado esperado y predecible.<\/p>\n\n\n\n El mapeo se refiere a la relaci\u00f3n entre las acciones del usuario y el resultado que obtiene. Si el resultado cumple con las expectativas del usuario, se produce un mapeo natural, pero si no, se produce una brecha de evaluaci\u00f3n y se evidencia un problema de usabilidad. <\/p>\n\n\n\n Los dise\u00f1adores deben ser capaces de predecir sin error la funci\u00f3n de cada control y el resultado de su uso teniendo en cuenta los conocimientos socioculturales del usuario. <\/p>\n\n\n\n Son tres las claves para lograr un mapeo natural:<\/p>\n\n\n\n Como se suele decir: una im\u00e1gen vale m\u00e1s que mil palabras, los wireframes son una representaci\u00f3n esquem\u00e1tica de una interfaz. Su funci\u00f3n es representar de forma gr\u00e1fica la estructura de un producto digital, los contenidos de cada bloque de informaci\u00f3n y los flujos de navegaci\u00f3n entre esos contenidos.<\/p>\n\n\n\n Los wireframes sirven como bocetos de lo que ser\u00e1 un producto digital, y sirven para comunicar interacci\u00f3n, dise\u00f1o y funcionalidad de una forma m\u00e1s precisa que la documentaci\u00f3n tradicional.<\/p>\n\n\n\n Todo proyecto que conyebe la realizaci\u00f3n de una interaz de usuario deber\u00eda pasar por este proceso de dise\u00f1o, incluso para proyectos que no requieren interfaz la esquematizaci\u00f3n de las ideas ayuda a presentar de forma clara y precisa lo que se quiere desarrollar.<\/p>\n\n\n\n La accesibilidad se refiere a la capacidad de un producto para ser utilizado por la mayor cantidad posible de personas, independientemente de las limitaciones f\u00edsicas o cognitivas que puedan tener. Un producto es accesible cuando es perceptible, operable, comprensible y robusto<\/strong>. Para lograr esto, la informaci\u00f3n y los componentes de la interfaz de usuario deben ser presentados de manera que puedan ser percibidos, manejables, comprensibles y compatibles con los robots y usuarios actuales y futuros.<\/p>\n\n\n\n Sobre este tema ya hab\u00eda hablado en este post: https:\/\/keruanima.com\/diseno\/diseno-web\/w3c-accesibilidad-aa\/<\/a> que te invito a leer antes de continuar.<\/p>\n\n\n\n Vamos a crear un resumen de lo aprendido en forma de preguntas para que podamos hacer uso de nuestros conocimientos actuales en material de experiencia de usuario poniendo al usuario como protagonista de la pregunta.<\/p>\n\n\n\n \u00bfqu\u00e9 quiere lograr el usuario?<\/p>\n\n\n\n \u00bfqu\u00e9 hace el usuario para lograrlo?<\/p>\n\n\n\n \u00bfQu\u00e9 ha ocurrido en el proceso y que ha obtenido en comparaci\u00f3n con lo que esperaba?<\/p>\n\n\n\n \u00bfSe esta evitando el castigo por error para motivar el aprendizaje?<\/p>\n\n\n\n \u00bfEsta obteniendo un beneficio para ser mas tolerante al esfuerzo en tomas de decisiones?<\/p>\n\n\n\n \u00bfEst\u00e1n los bloques bien organizados seg\u00fan su proposito y naturaleza del contenido?<\/p>\n\n\n\n \u00bfSe aplican las leyes de Gestalt y de Fitts?<\/p>\n\n\n\n \u00bfSe llega a los objetivos de forma eficiente?<\/p>\n\n\n\n \u00bfPercibe el usuario la experiencia y la interfaz como algo atractivo de forma subjetiva?<\/p>\n\n\n\n \u00bfHemos realizado wireframes?<\/p>\n\n\n\n \u00bfRespetamos los principios de accesibilidad?<\/p>\n\n\n\n \u00bfC\u00f3mo podemos alinear nuestra estrategia de negocio con los objetivos del usuario para crear una experiencia de usuario satisfactoria?<\/p>\n\n\n\n Creo que hacerse estas preguntas es una buena forma de recordar los puntos anteriores y hacer un repaso que tambi\u00e9n nos sirva en todo proyecto para detectar problemas o pasos que nos hayamos saltado sin querer.<\/p>\n\n\n\n Esta es una disciplina que busca encontrar soluciones visuales para las funcionalidades que se van a desarrollar en un software. Aunque muchos piensan que el trabajo de un Dise\u00f1ador UI se trata solo de crear cosas bonitas, en realidad, se trata de crear dise\u00f1os funcionales que se ajusten a las necesidades del proyecto.<\/p>\n\n\n\n En este sentido, el principio de dise\u00f1o \u00abla forma sigue a la funci\u00f3n\u00bb es fundamental. Este principio establece que la forma de un objeto debe configurarse a partir de su funci\u00f3n espec\u00edfica, para atender las necesidades generales del proyecto. Adem\u00e1s, para poder ser un buen Dise\u00f1ador UI es necesario entender los requerimientos m\u00ednimos en la construcci\u00f3n visual de un producto, adquirir los conocimientos necesarios para realizar un Sistema de Dise\u00f1o Visual eficiente y conocer la metodolog\u00eda que usan los profesionales en esta \u00e1rea. <\/p>\n\n\n\n El Dise\u00f1o de Interfaz de Usuario es un aspecto fundamental en la creaci\u00f3n de software y debe ser abordado de manera eficiente y funcional.<\/p>\n\n\n\n Se ha demostrado que existe una relaci\u00f3n entre el buen dise\u00f1o y la facilidad de uso percibida por el usuario. Los usuarios suelen elegir un producto bas\u00e1ndose en gran medida en la percepci\u00f3n visual. Por tanto, debemos prestar atenci\u00f3n a la presentaci\u00f3n de nuestro producto para que la recepci\u00f3n del usuario sea emocionalmente positiva en un primer vistazo.<\/p>\n\n\n\n No existe una f\u00f3rmula infalible para que un dise\u00f1o sea est\u00e9tico, pero hay conceptos que nos ayudar\u00e1n a lograr un buen dise\u00f1o. Entre estos conceptos se encuentra la proporci\u00f3n \u00e1urea<\/strong>, que es un n\u00famero irracional existente entre dos segmentos pertenecientes a una misma recta. Esta proporci\u00f3n se puede encontrar en la naturaleza (flores, hojas, etc.) y en figuras geom\u00e9tricas, y se le otorga una condici\u00f3n est\u00e9tica cuando se respeta esta condici\u00f3n.<\/p>\n\n\n\n El equilibrio es otro concepto importante en la est\u00e9tica del dise\u00f1o. Una composici\u00f3n est\u00e1 equilibrada cuando todos los pesos que la componen est\u00e1n compensados en l\u00edneas y formas. Se puede considerar un equilibrio sim\u00e9trico o asim\u00e9trico seg\u00fan el balance.<\/p>\n\n\n\n Existen dos tipos de equilibrio en dise\u00f1o: el equilibrio sim\u00e9trico y el equilibrio asim\u00e9trico<\/strong>. El equilibrio sim\u00e9trico es cuando los elementos de dise\u00f1o se colocan de manera id\u00e9ntica en ambos lados de la pantalla, lo que crea una sensaci\u00f3n de equilibrio y estabilidad. El equilibrio asim\u00e9trico es cuando los elementos se colocan de manera desigual en la pantalla, pero se equilibran visualmente mediante el uso de diferentes formas, tama\u00f1os, colores y posiciones.<\/p>\n\n\n\n En el dise\u00f1o de UI, el equilibrio tambi\u00e9n se puede utilizar para dirigir la atenci\u00f3n del usuario a ciertos elementos de la interfaz. Por ejemplo, si un bot\u00f3n importante est\u00e1 ubicado en un \u00e1rea visualmente pesada de la pantalla, el equilibrio puede ayudar a asegurar que el usuario lo note y lo utilice.<\/p>\n\n\n\n Es importante tener en cuenta que el equilibrio en el dise\u00f1o de UI no se trata solo de la distribuci\u00f3n de elementos, sino tambi\u00e9n de su tama\u00f1o, forma, color y posici\u00f3n en la pantalla. Todos estos factores pueden afectar la percepci\u00f3n del equilibrio visual y la experiencia del usuario.<\/p>\n\n\n\n La jerarqu\u00eda visual se refiere a la forma en que se destacan los elementos en la interfaz para ayudar al usuario a cumplir sus objetivos y evitar una sobrecarga de informaci\u00f3n que pueda desorientarlo. <\/p>\n\n\n\n Los elementos destacados deben estar relacionados directamente con las expectativas del usuario y agilizar la realizaci\u00f3n de su tarea.<\/p>\n\n\n\n Algunas formas de destacar elementos y aumentar su jerarqu\u00eda son:<\/p>\n\n\n\n el concepto de \u00abAffordance\u00bb en el contexto del dise\u00f1o, que se refiere a aquellos elementos que tienen propiedades que hacen obvio c\u00f3mo deben ser utilizados. <\/p>\n\n\n\n Este concepto se relaciona con el dise\u00f1o de interacci\u00f3n, en el que el usuario debe pulsar, activar o accionar un componente, pero es el dise\u00f1ador de interfaz quien debe otorgarle un aspecto visualmente claro sobre c\u00f3mo debe ser utilizado. <\/p>\n\n\n\n Por ejemplo los botones de estado de un bot\u00f3n pueden interpretarse claramente con colores usando este concepto.<\/p>\n\n\n\n Esto son documentos que establecen pautas comunes para estandarizar el uso de los recursos gr\u00e1ficos en un producto y garantizar la consistencia del dise\u00f1o de la interfaz.<\/p>\n\n\n\n Es interesante y muy esclarecedor el proceso que sigue el equipo de Google en la construcci\u00f3n de este sistema y de su gu\u00eda de estilos que se muestra en el siguiente v\u00eddeo: https:\/\/www.youtube.com\/watch?v=rrT6v5sOwJg<\/a><\/p>\n\n\n\n lo primero que se debe hacer es conocer la marca y representarla<\/p>\n\n\n\n El simbolo o logo deber\u00eda ser una de las primeras p\u00e1ginas o secciones de una gu\u00eda de estilo<\/p>\n\n\n\n En segundo lugar debemos definir la tipograf\u00eda o tipograf\u00edas del dise\u00f1o y establecer una jerarqu\u00eda para estas.<\/p>\n\n\n\n Indicar como debe aplicarse el uso de cada tipo y sus variantes, aqu\u00ed hay que ser muy descriptivos y tener en cuenta todos los atributos y definir como los vamos a usar, estamos hablando de tama\u00f1o, grosor, color, espacio.<\/p>\n\n\n\n Es importante identificar las etiquetas html con estilos tipograficos definidos y representarlos con ejemplos gr\u00e1ficos y pr\u00e1cticos. Por ejemplo el H1 y el H2 tendr\u00e1n estilos de fuente diferentes bien definidos que seguramente querremos usar siempre de la misma forma. dentro del proyecto.<\/p>\n\n\n\n Se debe generar un set de colores y darles tambi\u00e9n una jerarqu\u00eda: tendremos un color primario, secundario, terciario, colores para enlaces, botones cta …<\/p>\n\n\n\n Podemo su usar herramientas online que nos ayuden a generar estas paletas como adobe color<\/a><\/p>\n\n\n\n Al dise\u00f1ar interfaces los dise\u00f1adores solemos trabajar con unidades de medida diferentes a los pixeles por cuestiones como la variedad de pantallas sobre las que va a poder representarse un dise\u00f1o adaptable y que nos hace imposible cubrir todos los casos tomando las caracteristicas de unas caracteristicas de pantalla concreta. As\u00ed pues debemos establecer relaciones entre la unidad de medida del dise\u00f1o y la de pantalla teniendo en cuenta la densidad de pixeles por pulgada, de esta forma se pueden crear tablas que relacionen distintas densidades con esa unidad y se pueda traducir en p\u00edxeles para la maquetaci\u00f3n.<\/p>\n\n\n\n Por ejemplo, se puede establecer que las pantallas de dispositivos m\u00f3viles tengan una densidad mdpi (puntos medios por pulgada) de 1x y por tanto 1dp del dise\u00f1o equivale a 1px en estas pantallas.<\/p>\n\n\n\n Por otro lado, a la hora de definir los margenes que crearan espacios entre elementos, se sugiere usar multiplos de un n\u00famero para facilitar la justificaci\u00f3n de espacios entre elementos. A su vez, tomando ese multiplo, se puede generar un conjunto de medidas jerarquizadas para dotar de significado el uso de cada una de ellas y hacerlas mas situacionales.<\/p>\n\n\n\n Es importante el uso de margenes para crear espacio y dejar que los elementos respiren, adem\u00e1s de que el uso consistente de estos margenes creara un dise\u00f1o con homogeneidad mucho m\u00e1s l\u00f3gico.<\/p>\n\n\n\n Los iconos al igual que las fuentes, tienen un estilo concreto y forman familias con sus propias caracteristicas. En ocasiones podremos usar en un mismo dise\u00f1o iconos de diferentes familias para suplir las carencias de alguna biblioteca que no tenga todos los elementos que necesitamos, pero es importante definir las reglasde estilo que aplican a los que usemos en nuestro dise\u00f1o para evitar incoherencias.<\/p>\n\n\n\n Tambi\u00e9n es importante definir el uso, suelen ser elementos facilmente reconocibles e interpretables por el usuario si se usan bien y mejoran mucho la experiencia de usuario en esos casos. Pero un mal uso podr\u00eda crear malas experiencias y situaciones confusas para el usuario que no obtendra el resultado esperado.<\/p>\n\n\n\n los sistemas de Grid son herramientas b\u00e1sicas en el dise\u00f1o de interfaces. Todo sistema de grid est\u00e1 compuesto por tres elementos fundamentales: columnas, gutters y m\u00e1rgenes:<\/p>\n\n\n\n Estos tres componentes, columnas, gutters y m\u00e1rgenes, trabajan juntos para crear una estructura coherente y ordenada para el contenido de un dise\u00f1o. Siguiendo un sistema de grid, se pueden lograr dise\u00f1os m\u00e1s equilibrados, arm\u00f3nicos y f\u00e1ciles de leer. Adem\u00e1s, trabajar con un sistema de grid tambi\u00e9n puede ayudar a simplificar el proceso de dise\u00f1o responsive.<\/p>\n\n\n\n Con lo anterior definido, podemos pasar ya a definir los componentes. Los componentes no son otra cosa m\u00e1s que elementos de interfaz varios con diferentes caracter\u00edsticas que pueden ser reutilizados para diferentes fines en nuestro dise\u00f1o, en la gu\u00eda de estilo definimos su dise\u00f1o y sus estados usando las reglas ya creadas para facilitar su maquetaci\u00f3n.<\/p>\n\n\n\n Encontramos en esta secci\u00f3n por ejemplo: selectores, botones, inputs, elementos de men\u00fa…<\/p>\n\n\n\n En esta secci\u00f3n podemos incluir los does y don’ts de aplicaci\u00f3n.<\/p>\n\n\n\n El dise\u00f1o at\u00f3mico es una metodolog\u00eda de dise\u00f1o creada por Brad Frost que se enfoca en la reutilizaci\u00f3n de elementos modulares sencillos para crear estructuras de informaci\u00f3n m\u00e1s complejas<\/strong>. <\/p>\n\n\n\n La idea detr\u00e1s del dise\u00f1o at\u00f3mico es dividir una interfaz de usuario en componentes at\u00f3micos, como botones, iconos y campos de entrada, y luego construir elementos m\u00e1s grandes combinando estos componentes at\u00f3micos. De esta manera, cada componente puede ser reutilizado y ajustado en diferentes contextos, lo que a su vez aumenta la eficiencia en el dise\u00f1o y desarrollo de software. <\/p>\n\n\n\n La metodolog\u00eda surge de la necesidad de optimizar el desarrollo de software en proyectos con gran cantidad de componentes y elementos independientes. La jerarquizaci\u00f3n de los elementos aplicados en el proyecto, desde el dise\u00f1o hasta su desarrollo, es uno de los objetivos principales de esta metodolog\u00eda<\/strong>.<\/p>\n\n\n\n Elemento b\u00e1sico no reducible en componentes m\u00e1s peque\u00f1os, ejemplos: bot\u00f3n, input, checkbox…<\/p>\n\n\n\n Grupos simples de elementos visuales formados por varios \u00e1tomos que funcionan como una unidad. Por ejemplo: buscador.<\/p>\n\n\n\n Componentes m\u00e1s complejos compuestos por \u00e1tomos y\/o mol\u00e9culas, estos ya empiezan a formar secciones de una interfaz como puede ser el men\u00fa de navegaci\u00f3n.<\/p>\n\n\n\n Como ya te podr\u00e1s imaginar estas se forman con la combinaci\u00f3n de sus predecesores, ya formando la estructura general del contenido de la p\u00e1gina. Llegan a ser p\u00e1ginas completas. Pero todav\u00eda sin contenido.<\/p>\n\n\n\n Si las plantillas eran una estructura de p\u00e1gina sin contenido, las p\u00e1ginas ya son la misma estructura pero con contenido real.<\/p>\n\n\n\n Todo profesional necesita de sus herramientas para trabajar, en el caso de los dise\u00f1adores UI no hay excepci\u00f3n, en el mundo del dise\u00f1o Adobe ha tenido siempre la corona, pero en esta rama del dise\u00f1o relativamente nueva se han asomado 2 competidores titanicos que ofrecen alternativas muy atractivas. <\/p>\n\n\n\n Aqui te voy a presentar las 3 apps principales para el dise\u00f1o de interfaces pero hay que tener en cuenta que al final un buen dise\u00f1ador no se definira por la herramienta que haya escogido si no por el resultado de su trabajo.<\/p>\n\n\n\n Con un nombre m\u00e1s o menos acertado, adobe Xd es la apuesta de Adobe por un programa de dise\u00f1o gratuito que se integra muy bien con otras apps de la compa\u00f1\u00eda y que cuenta con complementos que facilitan varias tareas de dise\u00f1o. Personalmente me gusta mucho la interfaz de presentaci\u00f3n de dise\u00f1os, para cuando vas a ense\u00f1ar tu proyecto a tus compa\u00f1eros o al cliente.<\/p>\n\n\n\n Sketch es una herramienta de pago para dispositivos de Apple que fue muy bien recibida por la comunidad de dise\u00f1adores que usan dispositivos de dicha marca para trabajar debido a la buena dinamica que ofrece en el trabajo de dise\u00f1o de interfaces.<\/p>\n\n\n\n La \u00faltima pero pno por ello peor que las otras 2, figma llega como la alternativa gratuita por excelencia, dado que no se sabe si adobe acabara haciendo de pago su plataforma cuando este bien optimizada. Figma cuenta con mucha m\u00e1s comunidad lo que supone que tiene muchos mas complementos que ayudan a los dise\u00f1adores y plantillas que agilizan el trabajo. Adem\u00e1s a pesar de tener un plan de pago su plan gratuito es suficiente para muchos profesionales y empresas que tienen todos su trabajos de dise\u00f1o UI en esta plataforma. Adem\u00e1s se puede usar en navegador sin necesidad de descargar programas.<\/p>\n\n\n\n Las 3 apps tienen soporte para la edici\u00f3n online simultanea junto con los compa\u00f1eros con los que se comparta el proyecto.<\/p>\n\n\n\n De nuevo, a modo de resumen y para recordar lo aprendido voy a escribir una serie de preguntas que ayuden a hacer memoria y adem\u00e1s ayuden en el proceso de dise\u00f1o de la gu\u00eda de estilos y el sistema de dise\u00f1o. Preguntas que te deber\u00edas hacer cuando estas desarrollando estas gu\u00edas:<\/p>\n\n\n\n \u00bftenemos un dise\u00f1o de marca?<\/p>\n\n\n\n \u00bfLas tipograf\u00edas estan definidas?<\/p>\n\n\n\n \u00bfAplicamos una paleta de colores?<\/p>\n\n\n\n \u00bfTenemos valores de espaciado y equivalencias entre las unidades de medida?<\/p>\n\n\n\n \u00bfLos componentes e iconos siguen un estilo coherente? \u00bfse ha tomado en cuenta y representado sus diferentes estados?<\/p>\n\n\n\n \u00bfEs el dise\u00f1o visualmente atractivo y funcional?<\/p>\n\n\n\n \u00bfConstruimos los elementos desde lo m\u00e1s b\u00e1sico y escalamos a estructuras m\u00e1s complejas reutilizando elementos?<\/p>\n\n\n\n El prototipado es una parte fundamental del proceso de dise\u00f1o de productos digitales. Consiste en la creaci\u00f3n de una versi\u00f3n sencilla del producto que permita evaluar su funcionamiento y obtener feedback de los usuarios.<\/p>\n\n\n\n Debes dominar dos competencias importantes: El prototipo ahorra costes en al proyecto permitiendo evaluar propuestas antes de desarrollarlas, minimizando riesgos, ayudando am ejorar la comprensi\u00f3n del producto y preveyendo errores o fallos.<\/p>\n\n\n\n Los prototipos no se limitan al inicio del proyecto, se pueden construir prototipos parciales y en media res.<\/p>\n\n\n\n En el mundo del dise\u00f1o, los prototipos son una herramienta imprescindible. Nos permiten probar nuestras ideas, detectar problemas y mejorar nuestros dise\u00f1os antes de lanzarlos al mercado. Vamos a ver algunos consejos para hacer prototipos de forma efectiva.<\/p>\n\n\n\n Con estos consejos, podr\u00e1s hacer prototipos m\u00e1s efectivos y mejorar tus dise\u00f1os antes de lanzarlos al mercado. Recuerda que el objetivo de los prototipos es probar tus ideas, detectar problemas y mejorar tus dise\u00f1os. \u00a1Buena suerte!<\/p>\n\n\n\n Cuando se trata de crear prototipos para un proyecto, es com\u00fan encontrarse con los t\u00e9rminos \u00abLo-Fi\u00bb y \u00abHi-Fi\u00bb. Ambos tienen sus ventajas y desventajas, y es importante conocer cu\u00e1l utilizar seg\u00fan el momento del proyecto en que nos encontremos.<\/p>\n\n\n\n En las fases iniciales de un proyecto, es importante tener una visi\u00f3n global y planificar la estructura general del producto. Es en este momento donde el prototipo Lo-Fi entra en juego. Como si se tratara de un boceto, este prototipo se enfoca en plasmar la idea general del producto de la forma m\u00e1s r\u00e1pida y sencilla posible. Es como dibujar la silueta de un cuadro antes de comenzar a trabajar en los detalles.<\/p>\n\n\n\n Existen programas enfocados especificamente en el prototipado Lo-Fi como Axure, pero podemos usar alguno de los ya mencionados como Figma o Adobe Xd perfectamente<\/p>\n\n\n\n Este prototipo ya busca representar de una manera m\u00e1s fidedigna lo que es la versi\u00f3n final del producto, es una herramienta mucho m\u00e1s \u00fatil para el equipo de desarrollo y el de maquetaci\u00f3n. Buscamos crear una experiencia lo m\u00e1s cercana posible a la que ofrece el producto final sin todav\u00eda haberlo desarrollado.<\/p>\n\n\n\n Voy a explicar un poco de que va Figma, me centrare en mostrar conceptos b\u00e1sicos de esta en lugar de las otras alternativas al ser la mejor aplicaci\u00f3n para comenzar por ser una herramienta basada en la nube que no necesita instalar ning\u00fan programa y que su uso esta en crecimiento exponencial en los \u00faltimso a\u00f1os por su atractivo plan gratuito que permite a peque\u00f1os equipos y freelancers trabajar con ella sin coste econ\u00f3mico. Yo particularmente trabajo con Adobe Xd pero he probado figma y he de decir que tiene una interfaz muy intuitiba y muy buenos complementos y proyectos p\u00fablicos creados por la comunidad.<\/p>\n\n\n\n adem\u00e1s es muy facil integrarla con Maze<\/a>, una plataforma de pruebas r\u00e1pidas que permite a equipos de producto y marketing probar las experiencias de usuario de forma agil y remota, dando los resultados como datos procesables y cuantificables.<\/p>\n\n\n\n El panel lateral izquierdo de Figma muestra capas con jerarqu\u00eda que hemos creado.<\/p>\n<\/div>\n<\/div>\n\n\n\n El panel de propiedades muestra todas la informaci\u00f3n del elemento seleccionado que podemos editar.<\/p>\n<\/div>\n<\/div>\n\n\n\n Como la herramienta colaborativa que es, Figma permite compartir nuestro proyecto con otros usuarios y colaborar en su edici\u00f3n si as\u00ed lo indicamos.<\/p>\n<\/div>\n<\/div>\n\n\n\n Figma dispone de una herramienta de prototipado perfecta para generar flujos de pantallas interactivos.<\/p>\n<\/div>\n<\/div>\n\n\n\n Adem\u00e1s de sus herramientasnativas,Figma dispone de una comunidad que crea plugins y widgets muy \u00fatiles. Tambi\u00e9n es posible transformar grupos de elementos en componentes reutilizables que agilizan la maquetaci\u00f3n del prototipo.<\/p>\n<\/div>\n<\/div>\n\n\n\n Estas son solo algunas de las caracteristicas del programa, esta breve introducci\u00f3n es solo la punta del iceberg de un programa que tiene mucho m\u00e1s que ofrecer y que permite crear dise\u00f1os que cumplan con los requisitos de cualquier proyecto.<\/p>\n\n\n\n Sin mucha m\u00e1s introducci\u00f3n, ya sabes de que va este checkpoint, vamos a afianzar conocimientos. Estas deber\u00edan ayudarte, no solo a hacer memoria sobre lo aprendido, si no a hacerte las preguntas adecuadas para comprobar si has seguido el proceso de prototipado correctamente:<\/p>\n\n\n\n \u00bfEstoy poniendo a mi usuario persona arquetipo como elemento central al que va dirigido el producto que prototipo y este soluciona un problema?<\/p>\n\n\n\n \u00bfQu\u00e9 herramientas y recursos utilizaste para crear el prototipo?<\/p>\n\n\n\n \u00bfC\u00f3mo involucraste a los usuarios en la creaci\u00f3n del prototipo? \u00bfC\u00f3mo obtuviste su feedback?<\/p>\n\n\n\n \u00bfC\u00f3mo definiste el alcance del prototipo?<\/p>\n\n\n\n \u00bfC\u00f3mo decidiste qu\u00e9 tipo de prototipo crear (Lo-Fi, Hi-Fi, etc.)? \u00bfEn qu\u00e9 fase del proyecto lo construiste?<\/p>\n\n\n\n \u00bfC\u00f3mo utilizaste el prototipo para validar tus hip\u00f3tesis de dise\u00f1o? \u00bfHiciste pruebas? \u00bfQu\u00e9 aprendiste de los usuarios durante las pruebas?<\/p>\n\n\n\n \u00bfC\u00f3mo utilizaste el feedback obtenido para iterar y mejorar el prototipo?<\/p>\n\n\n\n \u00bfC\u00f3mo compartiste el prototipo con el equipo y stakeholders del proyecto? \u00bfC\u00f3mo recibiste sus comentarios?<\/p>\n\n\n\n \u00bfC\u00f3mo tomaste decisiones basadas en los resultados obtenidos durante el proceso de prototipado?<\/p>\n\n\n\n \u00bfQu\u00e9 cambios y mejoras implementaste en el dise\u00f1o final del producto a partir del prototipo?<\/p>\n\n\n\n evaluaci\u00f3n y optimizaci\u00f3n del ratio de conversi\u00f3n o CRO por sus siglas en ingl\u00e9s ( Conversion Rate Optimization), es una metodolog\u00eda de mejora continua que tiene como objetivo mejorar la eficiencia de los productos digitales. Esta metodolog\u00eda permite identificar los puntos de mejora en un sitio web o aplicaci\u00f3n m\u00f3vil, analizar las m\u00e9tricas de uso y establecer planes de mejora para solucionar los problemas identificados.<\/p>\n\n\n\n La metodolog\u00eda CRO puede abarcar varias disciplinas y perspectivas. Por ejemplo, se puede analizar el modelo de negocio para identificar problemas en la conversi\u00f3n de usuarios, o examinar la navegaci\u00f3n para mejorar la experiencia del usuario.<\/p>\n\n\n\n La evaluaci\u00f3n y el CRO son fundamentales para el \u00e9xito de cualquier producto digital. Al implementar la metodolog\u00eda CRO, podemos identificar problemas y establecer soluciones orientadas a resolverlos, mejorando as\u00ed la tasa de conversi\u00f3n y logrando objetivos comerciales.<\/p>\n\n\n\n A continuaci\u00f3n, te mostramos algunas de las habilidades y conocimientos que debes tener para llevar a cabo una evaluaci\u00f3n CRO eficaz:<\/p>\n\n\n\n La evaluaci\u00f3n y el CRO son esenciales para mejorar la eficiencia de los productos digitales y lograr objetivos comerciales.<\/p>\n\n\n\n En el mundo del dise\u00f1o de experiencia del usuario (UX), el plan de medici\u00f3n es una herramienta esencial para identificar desviaciones e ineficiencias en diferentes puntos de nuestro producto digital. Sin embargo, su objetivo no se limita solo a detectar factores negativos, sino que tambi\u00e9n nos permite evaluar qu\u00e9 procesos de nuestro producto est\u00e1n funcionando correctamente o incluso superando las expectativas. En este post, exploraremos los diferentes objetivos que podemos establecer en un plan de medici\u00f3n y c\u00f3mo estos objetivos tienen un impacto directo en el \u00e9xito de nuestro producto digital.<\/p>\n\n\n\n Objetivos del Plan de Medici\u00f3n<\/strong>: La medici\u00f3n y an\u00e1lisis de datos son elementos clave en la mejora de la experiencia del usuario (UX) en productos digitales. Para ello, contamos con diferentes herramientas que nos permiten obtener datos cuantitativos y cualitativos para evaluar el desempe\u00f1o de nuestro producto.<\/p>\n\n\n\n Los datos cuantitativos<\/strong> nos proporcionan informaci\u00f3n objetiva sobre el uso de nuestro producto, como el n\u00famero de visitas a una p\u00e1gina web, usuarios que han instalado una aplicaci\u00f3n o usuarios activos. Una de las herramientas m\u00e1s conocidas para la medici\u00f3n cuantitativa es Google Analytics<\/a><\/strong>, que ofrece una amplia variedad de informes y an\u00e1lisis para proyectos web.<\/p>\n\n\n\n Por otro lado, los datos cualitativos<\/strong> se centran en el registro de datos en el contexto del uso de un producto digital. Nos permiten observar el comportamiento del usuario en la interfaz de nuestro producto, identificar \u00e1reas de inter\u00e9s, identificar pasos en los que los usuarios se equivocan o se frustran, y obtener informaci\u00f3n sobre c\u00f3mo los usuarios interact\u00faan con nuestro producto. Las herramientas de monitorizaci\u00f3n como Smartlook <\/a>o Hotjar<\/a> o el seguimiento de ojos (Eye Tracking) son ejemplos de herramientas cualitativas que nos ayudan a obtener informaci\u00f3n valiosa sobre la experiencia del usuario.<\/p>\n\n\n\n Las \u00ab10 Reglas Heur\u00edsticas de Jakob Nielsen\u00bb son un conjunto de principios de dise\u00f1o de interfaz de usuario desarrollados por Jakob Nielsen, un reconocido experto en usabilidad y dise\u00f1o de interacci\u00f3n. Estas reglas son consideradas est\u00e1ndares en la disciplina del dise\u00f1o de interfaces de usuario y son ampliamente utilizadas por profesionales en la industria de dise\u00f1o y desarrollo de software.<\/p>\n\n\n\n Aqu\u00ed est\u00e1n las 10 Reglas Heur\u00edsticas de Jakob Nielsen:<\/p>\n\n\n\n Estas son reglas claves para la evalucaci\u00f3n de la calidad del dise\u00f1o y la experiencia de usuario.<\/p>\n\n\n\n El m\u00e9todo Test de Usuario es una herramienta fundamental en el campo de la Experiencia de Usuario (UX) que consiste en probar nuestro producto o prototipo con un grupo de usuarios. Estos usuarios son seleccionados previamente para asegurar que la informaci\u00f3n obtenida sea lo m\u00e1s valiosa posible.<\/p>\n\n\n\n Por ejemplo, si estamos desarrollando un proceso de simulaci\u00f3n y contrataci\u00f3n online de una hipoteca, ser\u00e1 m\u00e1s valioso realizar el test con usuarios que est\u00e9n buscando activamente una hipoteca, ya que su experiencia en este tipo de procesos enriquecer\u00e1 los datos obtenidos.<\/p>\n\n\n\n Para preparar el test, es importante elaborar un guion que describa los ejercicios que se plantear\u00e1n a cada usuario. Aunque no es obligatorio seguir el guion de forma estricta, este servir\u00e1 como punto de partida para obtener datos acerca del uso del producto por parte de un usuario objetivo.<\/p>\n\n\n\n Durante la prueba, se debe realizar un an\u00e1lisis y observaci\u00f3n del comportamiento de los usuarios, identificando los problemas de uso que encuentren para poder solucionarlos posteriormente. Es \u00fatil tomar notas de las acciones que realice el usuario y posteriormente realizar una composici\u00f3n de las pantallas o elementos donde el usuario ha expresado un problema, como se muestra en la siguiente imagen:<\/p>\n\n\n
\n\n\n\nLos beneficios de una buena experiencia de usuario<\/h2>\n\n\n\n
\n
\n
\n\n\n\nUna visi\u00f3n general del dise\u00f1o UX<\/h2>\n\n\n\n
\n
\n\n\n\nDonald Norman el padre del termino UX<\/h2>\n\n\n\n
\n\n\n\nUX no es Usabilidad<\/h2>\n\n\n\n
\n\n\n\nLean UX es la metodolog\u00eda<\/h2>\n\n\n\n
Design Thinking<\/h3>\n\n\n\n
Agile<\/h3>\n\n\n\n
\n\n\n\nLa importancia de la empat\u00eda en el dise\u00f1o de experiencia de usuario<\/h2>\n\n\n\n
\n\n\n\nEl ciclo del dise\u00f1o UX<\/h2>\n\n\n\n
\n\n\n\nasociarse es importante<\/h2>\n\n\n\n
\n\n\n\nDescubrimiento e Ideaci\u00f3n en el Dise\u00f1o Centrado en el Usuario<\/h2>\n\n\n\n
\n\n\n\nMetodolog\u00edas del DCU<\/h3>\n\n\n\n
\n
\n\n\n\nLa importancia de empatizar<\/h2>\n\n\n\n
mapa emp\u00e1tico<\/h3>\n\n\n\n
\n\n\n\nTodas ideas son valiosas<\/h2>\n\n\n\n
\n\n\n\nEntrevistas<\/h2>\n\n\n\n
\n\n\n\nPersonas o \u00abusuario tipo\u00bb<\/h2>\n\n\n\n
\n\n\n\nCard Sorting<\/h2>\n\n\n\n
\n\n\n\nUser Journey<\/h2>\n\n\n\n
\n\n\n\nInvolucrar al equipo<\/h2>\n\n\n\n
\n\n\n\nDise\u00f1o de interacci\u00f3n<\/h2>\n\n\n\n
\n
\n\n\n\nEl beneficio de equivocarse<\/h2>\n\n\n\n
\n\n\n\nTeor\u00eda de la Decisi\u00f3n Consciente: ponselo f\u00e1cil al usuario<\/h2>\n\n\n\n
\n\n\n\nRelaci\u00f3n esfuerzo-beneficio: a mayor beneficio mayor tolerancia<\/h2>\n\n\n\n
\n\n\n\nArquitectura de la informaci\u00f3n\/dise\u00f1o del flujo<\/h2>\n\n\n\n
\n
\n\n\n\nMenus y navegaci\u00f3n<\/h2>\n\n\n\n
\n
\n\n\n\nLey de Gestalt<\/h2>\n\n\n\n
\n
\n\n\n\nLey de Fitts<\/h2>\n\n\n\n
\n\n\n\nToma de decisiones<\/h2>\n\n\n\n
\n\n\n\nUsabilidad<\/h2>\n\n\n\n
\n
\n\n\n\nMapeo natural<\/h2>\n\n\n\n
\n
\n\n\n\nWireframes: esquemas de pantallas<\/h2>\n\n\n\n
\n\n\n\nAccesibilidad<\/h2>\n\n\n\n
\n\n\n\nCheck-Point 1<\/h2>\n\n\n\n
\n\n\n\nDise\u00f1o de interfaz de usuario<\/h2>\n\n\n\n
\n\n\n\nEst\u00e9tica<\/h3>\n\n\n\n
\n\n\n\nJerarqu\u00eda Visual<\/h3>\n\n\n\n
\n
\n\n\n\nAffordance<\/h3>\n\n\n\n
\n\n\n\nSistema de Dise\u00f1o<\/h3>\n\n\n\n
\n\n\n\nC\u00f3mo crear la gu\u00eda de estilos<\/h3>\n\n\n\n
1\u00ba Marca<\/h4>\n\n\n\n
2\u00ba tipograf\u00eda<\/h4>\n\n\n\n
3\u00ba Paleta de colores<\/h4>\n\n\n\n
4\u00ba Medidas y m\u00e1rgenes<\/h4>\n\n\n\n
5\u00ba Iconos<\/h4>\n\n\n\n
6\u00ba Sistema de Grid<\/h4>\n\n\n\n
\n
7\u00ba Componentes<\/h4>\n\n\n\n
\n\n\n\nDise\u00f1o At\u00f3mico<\/h2>\n\n\n\n
1\u00ba \u00c1tomos<\/h4>\n\n\n\n
2\u00ba Mol\u00e9culas<\/h4>\n\n\n\n
3\u00ba Organismos<\/h4>\n\n\n\n
4\u00ba Plantillas<\/h4>\n\n\n\n
5\u00ba P\u00e1ginas<\/h4>\n\n\n\n
\n\n\n\nHerramientas para el dise\u00f1o de interfaces y diagramas de flujo<\/h2>\n\n\n\n
Adobe Xd<\/h3>\n\n\n\n
Sketch<\/h3>\n\n\n\n
Figma<\/h3>\n\n\n\n
\n\n\n\nCheck-Point 2<\/h2>\n\n\n\n
\n\n\n\nPrototipado<\/h2>\n\n\n\n
Dise\u00f1ar partiendo de decisiones documentadas <\/strong>y prototipar con objetivos identificados <\/strong>que nos permitan realizar una evaluaci\u00f3n de la propuesta, y evaluar y validar las decisiones de dise\u00f1o con un criterio estrat\u00e9gico y un objetivo de negocio. Estas competencias te ayudar\u00e1n a conocer metodolog\u00edas para evaluar la experiencia de usuario, proponer y validar soluciones que resuelvan el problema del usuario, y conocer la metodolog\u00eda que usa un Dise\u00f1ador UX profesional.<\/strong><\/p>\n\n\n\n
\n\n\n\nC\u00f3mo hacer prototipos<\/h3>\n\n\n\n
\n
\n\n\n\nPrototipo Lo-Fi<\/h4>\n\n\n\n
Prototipo Hi-Fi<\/h4>\n\n\n\n
\n\n\n\nEl uso de Figma<\/h2>\n\n\n
![\"\"](\"https:\/\/keruanima.com\/wp-content\/uploads\/2023\/04\/image-9.png\")
<\/a><\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/keruanima.com\/wp-content\/uploads\/2023\/04\/image-7.png\")
<\/a><\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/keruanima.com\/wp-content\/uploads\/2023\/04\/image-10.png\")
<\/a><\/figure>\n<\/div>\n\n<\/a><\/figure>\n<\/div><\/div>\n\n\n\n![\"\"](\"https:\/\/keruanima.com\/wp-content\/uploads\/2023\/04\/image-12.png\")
<\/a><\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/keruanima.com\/wp-content\/uploads\/2023\/04\/image-13.png\")
<\/a><\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/keruanima.com\/wp-content\/uploads\/2023\/04\/image-14.png\")
<\/figure>\n<\/div>\n\n\n\n
\n\n\n\nCheck-Point 3<\/h2>\n\n\n\n
\n\n\n\nEvaluaci\u00f3n y CRO<\/h2>\n\n\n\n
\n
\n\n\n\nPlan de Medici\u00f3n Digital – Mejorando la Experiencia del Usuario (UX)<\/h2>\n\n\n\n
En un plan de medici\u00f3n, podemos categorizar los objetivos en cinco grupos principales:<\/p>\n\n\n\n\n
\n
\n
\n
\n\n\n\nAnal\u00edtica Cuantitativa y Cualitativa<\/h3>\n\n\n\n
\n\n\n\nLas 10 Reglas Heur\u00edsticas de Jakob Nielsen<\/h3>\n\n\n\n
\n
\n\n\n\nC\u00f3mo realizar un Test de Usuario en UX<\/h3>\n\n\n\n
![\"\"](\"https:\/\/keruanima.com\/wp-content\/uploads\/2023\/04\/image-15-1920x1116.png\")
![wikimedia commons<\/a><\/figcaption><\/figure>\n<\/div>\n\n\nSolicitar a los usuarios que verbalicen su proceso, narrando lo que est\u00e1n haciendo y qu\u00e9 esperan conseguir con sus acciones, puede proporcionar informaci\u00f3n valiosa. Tomar notas en post-its nos ayudar\u00e1 a comprender mejor las expectativas del usuario.<\/p>\n\n\n\n\n\n\n\nEl m\u00e9todo PURE de Norman Nielsen<\/h3>\n\n\n\nEl m\u00e9todo PURE de Norman Nielsen es una t\u00e9cnica para evaluar la usabilidad de un sitio web o una aplicaci\u00f3n m\u00f3vil. PURE es un acr\u00f3nimo que significa \u00abPide a los Usuarios que Ranqueen la Experiencia\u00bb (en ingl\u00e9s, \u00abGet People to Rate the Experience\u00bb). Este enfoque se basa en la idea de que la opini\u00f3n de los usuarios es esencial para evaluar la usabilidad de un producto digital.<\/p>\n\n\n\nEl m\u00e9todo PURE se compone de cuatro pasos principales:<\/p>\n\n\n\n\nSeleccionar los criterios de evaluaci\u00f3n<\/strong>: En este paso, se definen los criterios espec\u00edficos que se utilizar\u00e1n para evaluar la usabilidad del sitio web o la aplicaci\u00f3n. Estos criterios deben ser claros, medibles y relevantes para la experiencia del usuario.<\/li>\n\n\n\nSolicitar a los usuarios que eval\u00faen<\/strong>: En esta etapa, se invita a los usuarios a que eval\u00faen el producto digital utilizando los criterios previamente establecidos. Esto puede hacerse a trav\u00e9s de encuestas, cuestionarios u otras formas de retroalimentaci\u00f3n.<\/li>\n\n\n\nRegistrar las evaluaciones de los usuarios<\/strong>: Se registran las respuestas de los usuarios y se recopilan los datos obtenidos en la evaluaci\u00f3n. Esto puede incluir la calificaci\u00f3n num\u00e9rica de los criterios, comentarios escritos o cualquier otra informaci\u00f3n relevante proporcionada por los usuarios.<\/li>\n\n\n\nEvaluar y analizar los resultados<\/strong>: En esta fase, se analizan los datos recopilados y se realizan conclusiones sobre la usabilidad del producto digital evaluado. Se pueden identificar patrones, tendencias y \u00e1reas de mejora basadas en la retroalimentaci\u00f3n de los usuarios.<\/li>\n<\/ol>\n\n\n\nEn el m\u00e9todo PURE, los usuarios asignan una puntuaci\u00f3n num\u00e9rica del 1 al 3 dependiendo de la facilidad de uso. Por lo general, las puntuaciones se interpretan de la siguiente manera:<\/p>\n\n\n\n\nPuntuaci\u00f3n de 1<\/strong>: F\u00e1cil: Significa que los usuarios perciben que la tarea o el objetivo evaluado es f\u00e1cil de completar, con una carga cognitiva baja. Los usuarios pueden realizar la tarea de manera r\u00e1pida y sin dificultades significativas.<\/li>\n\n\n\nPuntuaci\u00f3n de 2: Moderado<\/strong>: Indica que los usuarios perciben que la tarea o el objetivo evaluado tiene una carga cognitiva moderada, lo que implica que puede requerir un poco m\u00e1s de esfuerzo o atenci\u00f3n por parte del usuario para completarla.<\/li>\n\n\n\nPuntuaci\u00f3n de 3: Dif\u00edcil<\/strong>: Significa que los usuarios perciben que la tarea o el objetivo evaluado es dif\u00edcil de completar, con una alta carga cognitiva. Puede requerir un esfuerzo significativo, tiempo adicional o habilidades especiales por parte del usuario para lograrlo.<\/li>\n<\/ol>\n\n\n\nLa puntuaci\u00f3n PURE es la suma de las puntuaciones de la tarea y el color estar\u00e1 determinado por la peor calificaci\u00f3n de esta.<\/p>\n\n\n\nSe utilizan n\u00fameros, pero tambi\u00e9n colores para representar el nivle de dificultad.<\/p>\n\n\n\nEl m\u00e9todo PURE es una herramienta \u00fatil para evaluar la usabilidad de un sitio web o una aplicaci\u00f3n m\u00f3vil, y puede ser utilizado en conjunto con otros enfoques de evaluaci\u00f3n de usabilidad para obtener una visi\u00f3n completa de la experiencia del usuario. Es importante tener en cuenta que la retroalimentaci\u00f3n de los usuarios es valiosa para identificar \u00e1reas de mejora y optimizar la usabilidad de un producto digital.<\/p>\n\n\n\n\n\n\n\nPasos para seguir el metodo de Norman Nielsen<\/h4>\n\n\n\nTe describo los 10 pasos importantes a seguir en el m\u00e9todo PURE:<\/p>\n\n\n\n\nDefinir el tipo de usuario objetivo<\/strong>: Es importante definir a qu\u00e9 tipo de usuarios va dirigido el producto o servicio que se va a evaluar. Se recomienda limitar los tipos de usuarios objetivo a 2-3 para obtener calificaciones consistentes.<\/li>\n\n\n\nIdentificar las tareas fundamentales<\/strong>: Se deben identificar las tareas que los usuarios deben realizar con el producto o servicio evaluado. Estas tareas deben estar orientadas a evaluar la viabilidad del negocio.<\/li>\n\n\n\nAnalizar los \u00abhappy paths\u00bb<\/strong>: Los \u00abhappy paths\u00bb son las rutas m\u00e1s utilizadas por los usuarios para realizar una tarea en particular. Se debe realizar un estudio cuantitativo para identificar cu\u00e1l es la ruta m\u00e1s utilizada y enfocar la evaluaci\u00f3n en ella.<\/li>\n\n\n\nDeterminar l\u00edmites:<\/strong> Una vez identificada la ruta a analizar, se deben definir claramente cu\u00e1l es el principio y el final de cada una de las tareas.<\/li>\n\n\n\nRevisi\u00f3n por tres evaluadores expertos<\/strong>: Se recomienda que al menos tres especialistas en experiencia de usuario eval\u00faen el producto o servicio de manera independiente. Sus puntuaciones deben ser independientes y se necesita la participaci\u00f3n de al menos tres expertos para obtener una evaluaci\u00f3n m\u00e1s precisa.<\/li>\n\n\n\nRealizar c\u00e1lculos veraces entre los evaluadores<\/strong>: Es importante realizar c\u00e1lculos precisos para obtener una evaluaci\u00f3n precisa del producto o servicio evaluado. Los evaluadores deben comparar sus puntuaciones y asegurarse de que sean coherentes y veraces.<\/li>\n\n\n\nCalcular la puntuaci\u00f3n media<\/strong>: Una vez que los evaluadores hayan completado su evaluaci\u00f3n, se debe calcular la puntuaci\u00f3n media de todas las evaluaciones para obtener una calificaci\u00f3n general del producto o servicio.<\/li>\n\n\n\nInterpretar los resultados<\/strong>: Es importante interpretar los resultados obtenidos de las evaluaciones y comprender c\u00f3mo afectan a la usabilidad del producto o servicio. Esto puede ayudar a identificar \u00e1reas de mejora y tomar decisiones informadas para optimizar la usabilidad del producto o servicio.<\/li>\n\n\n\nProporcionar retroalimentaci\u00f3n a los evaluadores<\/strong>: Se debe proporcionar retroalimentaci\u00f3n a los evaluadores sobre los resultados obtenidos y cualquier \u00e1rea de mejora identificada. Esto puede ayudar a mejorar la precisi\u00f3n y coherencia de las evaluaciones en futuros proyectos.<\/li>\n\n\n\nUtilizar los resultados para la toma de decisiones<\/strong>: Finalmente, los resultados obtenidos de la evaluaci\u00f3n de usabilidad deben ser utilizados para tomar decisiones informadas sobre mejoras en el producto o servicio evaluado. Estos resultados pueden ayudar a identificar \u00e1reas de oportunidad y optimizar la experiencia del usuario para mejorar la usabilidad del producto o servicio en futuras iteraciones.<\/li>\n<\/ol>\n\n\n\nEs importante diferenciar el m\u00e9todo PURE con la evaluaci\u00f3n heur\u00edstica. La evaluaci\u00f3n heur\u00edstica se enfoca en identificar la mayor cantidad de problemas de usabilidad posible y obtener una visi\u00f3n completa de la usabilidad de un producto o servicio. En cambio, el m\u00e9todo PURE tiene como objetivo proporcionar una medida confiable de la facilidad con la que un tipo de usuario espec\u00edfico puede completar las tareas fundamentales previamente definidas, a trav\u00e9s del dise\u00f1o ofrecido en ese momento. Mientras que la evaluaci\u00f3n heur\u00edstica se basa en pautas de dise\u00f1o establecidas previamente, el m\u00e9todo PURE se centra en asignar calificaciones num\u00e9ricas a diferentes aspectos del producto o sistema por parte de evaluadores expertos en experiencia de usuario, con el fin de evaluar la usabilidad en funci\u00f3n de tareas espec\u00edficas y rutas de usuario m\u00e1s utilizadas.<\/p>\n\n\n\n\n\n\n\nEl test A\/B<\/h2>\n\n\n\nEl m\u00e9todo Test A\/B es una t\u00e9cnica utilizada en marketing y dise\u00f1o de interfaz de usuario que consiste en comparar la eficacia de dos versiones diferentes de un elemento o proceso para determinar cu\u00e1l de ellas tiene un mejor desempe\u00f1o en t\u00e9rminos de objetivos o resultados. Este m\u00e9todo implica segmentar a los usuarios y mostrarles dos propuestas diferentes de una misma soluci\u00f3n, luego realizar una comparaci\u00f3n cuantitativa de la efectividad de cada versi\u00f3n.<\/p>\n\n\n\nPor ejemplo, en el contexto del texto proporcionado, se menciona que se quieren aumentar las valoraciones de una aplicaci\u00f3n en Google Play y App Store. Para lograrlo, se plantean dos ejercicios con el mismo objetivo, pero utilizando dos enfoques diferentes. En uno de los enfoques se utiliza un componente nativo del sistema operativo del dispositivo para solicitar la valoraci\u00f3n, mientras que en el otro se integran las opciones en un dise\u00f1o de interfaz est\u00e9tico utilizando una Gu\u00eda de Estilos.<\/p>\n\n\n\nLuego de implementar ambas versiones y mostrarlas a diferentes segmentos de usuarios, se pueden medir los resultados y el \u00e9xito del objetivo, que en este caso es que el usuario deje una rese\u00f1a en el store, utilizando m\u00e9tricas de seguimiento. Por ejemplo, se pueden medir la cantidad de valoraciones obtenidas, la tasa de conversi\u00f3n de usuarios que dejaron valoraciones, el tiempo de reacci\u00f3n ante la petici\u00f3n, entre otras m\u00e9tricas relevantes.<\/p>\n\n\n\nEl m\u00e9todo Test A\/B es una herramienta \u00fatil para tomar decisiones informadas en el dise\u00f1o y optimizaci\u00f3n de productos, servicios o interfaces de usuario, ya que permite comparar y evaluar la efectividad de diferentes enfoques y tomar decisiones basadas en datos concretos en lugar de suposiciones o intuiciones. Adem\u00e1s, este m\u00e9todo puede ser utilizado de forma iterativa<\/strong>, permitiendo realizar ajustes y mejoras continuas en base a los resultados obtenidos en cada prueba A\/B realizada.<\/p>\n\n\n\n\n\n\n\nROI<\/h2>\n\n\n\nEl ROI (Return on Investment) es una m\u00e9trica que mide la rentabilidad de una inversi\u00f3n, y est\u00e1 relacionado con la UX (User Experience) en el sentido de que una buena experiencia del usuario puede tener un impacto positivo en el ROI, mientras que una mala experiencia del usuario puede tener un impacto negativo en el ROI. La f\u00f3rmula para calcular el ROI es:<\/p>\n\n\n\nROI = (Ganancia obtenida de la inversi\u00f3n – Costo de la inversi\u00f3n) \/ Costo de la inversi\u00f3n<\/p>\n\n\n\nSe expresa como un porcentaje o una relaci\u00f3n, y un ROI positivo indica ganancias, mientras que un ROI negativo indica p\u00e9rdidas. Es importante tener en cuenta la experiencia del usuario al calcular y analizar el ROI de una inversi\u00f3n. Por lo que, para hacer un estudio preciso tendremos que hacerlo siempre en relaci\u00f3n con indicadores clave de rendimiento o desempe\u00f1o, tambi\u00e9n llamados KPIs (Key Performance Indicators).<\/p>\n\n\n\n\n\n\n\nCheck-Point 4<\/h2>\n\n\n\nAl igual que en secciones anteriores, te dejo preguntas que podr\u00e1n ayudarte a afianzar cnocimientos y asegurarte de estar haciendo un buen trabajo de analisis y medici\u00f3n relacionado con la usabilidad y experiencia de usuario de tu proyecto:<\/p>\n\n\n\n\n\u00bfHas identificado claramente los objetivos de negocio que se buscan lograr con el producto digital y los has definido en t\u00e9rminos medibles?<\/li>\n\n\n\n\u00bfHas seleccionado indicadores clave de rendimiento (KPIs) que sean relevantes y espec\u00edficos para medir la eficacia en la interpretaci\u00f3n de informaci\u00f3n y ejecuci\u00f3n de tareas, relacionados con la usabilidad del producto digital?<\/li>\n\n\n\n\u00bfHas definido las metodolog\u00edas y herramientas de medici\u00f3n que se utilizar\u00e1n para obtener datos cuantitativos y cualitativos, considerando la necesidad de obtener una visi\u00f3n completa de la UX del producto digital?<\/li>\n\n\n\n\u00bfHas establecido un plan para la recopilaci\u00f3n, an\u00e1lisis e interpretaci\u00f3n de los datos obtenidos de manera regular, y para la presentaci\u00f3n de resultados de manera clara y comprensible?<\/li>\n\n\n\n\u00bfHas utilizado los datos cuantitativos y cualitativos obtenidos para identificar oportunidades de mejora en la UX del producto digital y tomar decisiones informadas para optimizarlo?<\/li>\n\n\n\n\u00bfHas establecido objetivos medibles y alcanzables para el plan de medici\u00f3n digital, y has definido plazos y responsabilidades para su implementaci\u00f3n?<\/li>\n\n\n\n\u00bfHas asegurado que el plan de medici\u00f3n digital est\u00e9 alineado con los principios y mejores pr\u00e1cticas del Dise\u00f1o UX\/UI, y has considerado la continuidad y actualizaci\u00f3n del plan a lo largo del tiempo?<\/li>\n<\/ol>\n\n\n\n\n\n\n\nConclusiones<\/h2>\n\n\n\nTodas estas secciones han tratado de comprimir en un solo post lo que signif\u00edca ser dise\u00f1adora o dise\u00f1ador UI-UX y las metodolog\u00edas que guarda en su caj\u00f3n de sastre para mejorar la experiencia de uso y usabilidad de productos. Aunque en \u00faltima instancia, lo que hace a un buen dise\u00f1ador es la experiencia y el saber usar la creatividad y la l\u00f3gica a favor de una mejora en el dise\u00f1o.<\/p>\n\n\n\nEspero que te sirva de ayuda y te animo a gaurdarla en favoritos para consultarla siempre que lo necesites, compartelo si quieres agradecer el esfuerzo.<\/p>\n\n\n\nTe animo tambi\u00e9n a seguirme en mis redes si te gusta lo que hago.<\/p>","protected":false},"excerpt":{"rendered":"\u00a1Descubre los secretos de un dise\u00f1o de interfaz y experiencia de usuario exitoso en mi gu\u00eda completa de dise\u00f1o UX! En este megapost, te ofrezco una visi\u00f3n general del dise\u00f1o UX, desde los beneficios de una buena experiencia de usuario hasta las metodolog\u00edas clave como Lean UX, Design Thinking y Agile. Exploraremos la importancia de la empat\u00eda en el dise\u00f1o de experiencia de usuario, el ciclo del dise\u00f1o UX y c\u00f3mo involucrar a todo el equipo en el proceso. Tambi\u00e9n cubriremos temas como el dise\u00f1o de interacci\u00f3n, la teor\u00eda de la decisi\u00f3n consciente, la arquitectura de la informaci\u00f3n y la accesibilidad. Adem\u00e1s, te brindar\u00e9 herramientas populares como Adobe Xd, Sketch y Figma para el dise\u00f1o de interfaces y diagramas de flujo. Tambi\u00e9n abordar\u00e9 el prototipado, la evaluaci\u00f3n y la medici\u00f3n digital, incluyendo las reglas heur\u00edsticas de Jakob Nielsen y el m\u00e9todo PURE de Norman Nielsen. Finalmente, ofrecer\u00e9 conclusiones y recomendaciones para un dise\u00f1o UX efectivo. \u00a1No te pierdas esta gu\u00eda definitiva para dise\u00f1adores!<\/p>","protected":false},"author":1,"featured_media":2721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[43,68],"tags":[122],"class_list":["post-2644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-ui-y-ux","tag-ui-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/comments?post=2644"}],"version-history":[{"count":25,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2644\/revisions"}],"predecessor-version":[{"id":2731,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/2644\/revisions\/2731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/media\/2721"}],"wp:attachment":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/media?parent=2644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/categories?post=2644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/tags?post=2644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}](\"https:\/\/commons.wikimedia.org\/wiki\/File:WMFUI-Affinity_horiz.jpg\"){kind=link}