{"id":3464,"date":"2021-11-23T09:23:27","date_gmt":"2021-11-23T09:23:27","guid":{"rendered":"https:\/\/apachedigital.io\/?post_type=insight&p=3464"},"modified":"2021-11-23T10:00:35","modified_gmt":"2021-11-23T10:00:35","slug":"diseno-ux-consejos-y-elementos-claves-para-enamorar-a-tus-usuarios","status":"publish","type":"insight","link":"https:\/\/apachedigital.io\/en\/insight\/diseno-ux-consejos-y-elementos-claves-para-enamorar-a-tus-usuarios\/","title":{"rendered":"DISE\u00d1O UX: Consejos y elementos claves para enamorar a tus usuarios"},"content":{"rendered":"\n

Con el paso de los a\u00f1os, interactuar con interfaces digitales se ha ido convirtiendo en parte de nuestra rutina diaria. Desde responder mensajes con nuestro m\u00f3vil hasta tocar una pantalla gigante para hacer nuestro pedido en un restaurante de comida r\u00e1pida, pasamos horas y horas navegando por interfaces cada vez m\u00e1s profundas y cargadas de posibilidades. <\/p>\n\n\n\n

\"\"\/<\/figure><\/div>\n\n\n\n

Sin darnos cuenta, todos nos hemos puesto de acuerdo en que tres barras paralelas significan \u201cmen\u00fa\u201d, que una flecha en la esquina superior izquierda significa \u201cvolver\u201d y que la silueta de un engranaje significa \u201cajustes\u201d. La necesidad de navegar diariamente por los men\u00fas de todo tipo de dispositivos est\u00e1 creando poco a poco un lenguaje universal que todos tenemos que saber hablar, y de ah\u00ed surge el concepto de UX, siglas de User Experience, cuyo prop\u00f3sito es que el aprendizaje de ese lenguaje no se convierta en algo frustrante.
<\/p>\n\n\n\n

La labor de un dise\u00f1ador de UX es facilitar la interacci\u00f3n del usuario con cualquier producto o servicio digital, saber de qu\u00e9 forma disponer todos sus elementos para que su uso sea lo m\u00e1s f\u00e1cil y agradable posible. 
<\/p>\n\n\n\n

Conocer al usuario<\/strong>
<\/h2>\n\n\n\n

Lo primero a tener en cuenta, es qu\u00e9 va a sentir el usuario mientras navega por nuestra interfaz, para esto tenemos que prestar atenci\u00f3n a tres factores b\u00e1sicos: su prop\u00f3sito, su percepci\u00f3n visual y su percepci\u00f3n emocional.
<\/p>\n\n\n\n

  • Saber su prop\u00f3sito consiste en responder la pregunta; \u00bfQu\u00e9 quiere obtener de nosotros?. No es lo mismo dise\u00f1ar la web de un peri\u00f3dico, enfocada a usuarios que buscan informaci\u00f3n, que la de una tienda on-line, enfocada a usuarios que buscan comprar un producto y cubrir una necesidad. Un buen dise\u00f1o UX hace que resulte agradable cumplir este prop\u00f3sito y crea un v\u00ednculo de fidelidad, si nos sentimos c\u00f3modos al cumplir nuestro prop\u00f3sito en una p\u00e1gina web, recurriremos a ella cada vez que lo tengamos.<\/li><\/ul>\n\n\n\n
    • La percepci\u00f3n visual no solo determinar\u00e1 si nuestro dise\u00f1o es visualmente atractivo, tambi\u00e9n jugar\u00e1 un papel determinante en c\u00f3mo se relacionar\u00e1n entre s\u00ed todos sus elementos seg\u00fan su aspecto o disposici\u00f3n. Detalles como que dos elementos sean del mismo color o que est\u00e9n agrupados y alejados del resto pueden facilitar que nuestra percepci\u00f3n visual los relacione entre s\u00ed, tomar en cuenta este tipo de detalles es determinante para crear interfaces intuitivas.<\/li><\/ul>\n\n\n\n
      • La percepci\u00f3n emocional determina las sensaciones que experimenta un usuario con nuestro dise\u00f1o, permitirle acceder a un servicio de forma r\u00e1pida, para no perder en ning\u00fan momento su atenci\u00f3n, y clara, para no hacerlo sentir confuso, aumenta las posibilidades de que cumpla su prop\u00f3sito a la hora de acceder al servicio que le ofrecemos.<\/li><\/ul>\n\n\n\n

        <\/p>\n\n\n\n

        <\/p>\n\n\n\n

        A partir de estos tres elementos, podemos concluir que los requisitos de una buena interfaz est\u00e1n comprendidos en la siguiente pir\u00e1mide:
        <\/p>\n\n\n\n

        \"\"\/<\/figure><\/div>\n\n\n\n
        • Funcional: este requisito es la base de la pir\u00e1mide, necesitamos darle al usuario las herramientas necesarias para cumplir su prop\u00f3sito.<\/li><\/ul>\n\n\n\n
          • Usable: tenemos que darle la posibilidad de usar esas herramientas.<\/li><\/ul>\n\n\n\n
            • Conveniente: la forma de usar dichas herramientas tiene que ser lo m\u00e1s c\u00f3moda e intuitiva posible.<\/li><\/ul>\n\n\n\n
              • Disfrutable: adem\u00e1s de c\u00f3moda e intuitiva, conviene ir un paso m\u00e1s all\u00e1 y hacer que la experiencia del usuario sea incluso placentera.<\/li><\/ul>\n\n\n\n
                • Significativo: tenemos que generar un impacto positivo en el usuario que se mantenga despu\u00e9s de acceder a nuestros servicios.<\/li><\/ul>\n\n\n\n

                  No perder esto de vista nos ayuda a enfocar el trabajo de dise\u00f1o en la direcci\u00f3n correcta,, pero tambi\u00e9n es importante que este trabajo est\u00e9 estructurado de la mejor manera posible.
                  <\/p>\n\n\n\n

                  Fases del dise\u00f1o UX<\/strong><\/h2>\n\n\n\n

                  <\/p>\n\n\n\n

                  \"\"<\/figure>\n\n\n\n
                  1. Investigar: Antes de plantear nuestro dise\u00f1o, tenemos que centrarnos en los dos pisos inferiores de la pir\u00e1mide. Para que el producto final sea funcional y usable, es necesario establecer qu\u00e9 le vamos a ofrecer al usuario y qu\u00e9 pasos tendr\u00e1 que dar a trav\u00e9s de nuestra interfaz para hacerlo posible. Tambi\u00e9n tenemos que familiarizarnos con nuestro producto, saber qu\u00e9 pautas est\u00e9ticas sigue su marca y a qu\u00e9 tipo de usuarios va dirigida determinar\u00e1 cosas tan importantes como los colores de los elementos de nuestra interfaz.<\/li><\/ol>\n\n\n\n
                    1. Esquematizar: En esta fase nos centraremos en el tercer piso de la pir\u00e1mide. Conviene hacer esquemas y borradores para tener una referencia visual de qu\u00e9 elementos van a formar nuestro dise\u00f1o y c\u00f3mo los vamos a estructurar. Este paso facilitar\u00e1 que el trabajo posterior no se convierta en un ejercicio de prueba y error, ya que estableceremos una serie de gu\u00edas que seguiremos en la siguiente fase del proceso.<\/li><\/ol>\n\n\n\n
                      1. Prototipar: Si hemos pasado por las dos fases previas de la manera correcta, lo que nos toca a continuaci\u00f3n es plasmar todo lo establecido anteriormente en un prototipo, para a continuaci\u00f3n enfocarnos en los dos niveles superiores de la pir\u00e1mide. Para que nuestro dise\u00f1o sea disfrutable y significativo tenemos que conseguir una est\u00e9tica clara y atractiva. Por ejemplo, si en la primera fase del proceso hemos decidido que vamos a buscar una est\u00e9tica minimalista, y en la segunda hemos decidido incluir un men\u00fa superior, haremos un men\u00fa no tenga unos colores muy sobrecargados y cuyos elementos no destaquen m\u00e1s de lo necesario, reduciendo el tama\u00f1o de sus botones.<\/li><\/ol>\n\n\n\n

                        <\/p>\n\n\n\n

                        1. Compartir: Prototipar nuestras interfaces no solo nos permite visualizar c\u00f3mo ser\u00e1 el resultado final, sino tambi\u00e9n compartir este resultado con cualquier persona. Los programas de prototipado web como \u201cAdobe XD\u201d o \u201cFigma\u201d nos permiten crear enlaces que cualquiera puede abrir para navegar por nuestro prototipo, ya sea un compa\u00f1ero de trabajo o un responsable que nos tiene que dar su visto bueno, siempre es buena idea pedir una opini\u00f3n externa para saber si nuestro dise\u00f1o funciona correctamente.<\/li><\/ol>\n\n\n\n

                          <\/p>\n\n\n\n

                          Versi\u00f3n m\u00f3vil<\/strong><\/h2>\n\n\n\n

                          Las interfaces que dise\u00f1emos no siempre se visualizar\u00e1n en el mismo dispositivo. Hoy en d\u00eda es impensable dise\u00f1ar una p\u00e1gina web sin tener en cuenta la enorme cantidad de usuarios que la visitar\u00e1n desde su smartphone.
                          <\/p>\n\n\n\n

                          En Apache hemos tenido que adaptar varias landing pages tanto para navegador como para m\u00f3vil. Saber cu\u00e1ndo mantener la disposici\u00f3n de los elementos en ambas versiones y cu\u00e1ndo cambiarla fue una de las claves a la hora de dise\u00f1ar, un ejemplo es este formulario de una landing page de Hawkers:
                          <\/p>\n\n\n\n

                          \"\"\/<\/figure>\n\n\n\n

                          Para la versi\u00f3n de navegador tomamos en cuenta el sentido de lectura del usuario, que va de derecha a izquierda. De este modo, conseguimos que primero lea la oferta y que a continuaci\u00f3n lea el formulario para obtener m\u00e1s informaci\u00f3n.<\/p>\n\n\n\n

                          <\/p>\n\n\n\n

                          <\/p>\n\n\n\n

                          \"\"\/<\/figure><\/div>\n\n\n\n

                          Pero al adaptarlo a versi\u00f3n m\u00f3vil, nos damos cuenta de que esto ya no es posible, el tama\u00f1o de la pantalla no permite disponer tantos elementos de derecha a izquierda. De nuevo, tomamos en cuenta el sentido de lectura del usuario, en este caso, de arriba a abajo. De esta manera, obtenemos el mismo resultado que en la versi\u00f3n de navegador, guiamos la atenci\u00f3n del usuario primero a la oferta y luego al formulario, pero la disposici\u00f3n de los elementos cambia acorde al dispositivo desde el que se visualiza nuestro dise\u00f1o.<\/p>\n\n\n\n

                          <\/p>\n\n\n\n

                          La importancia de testear<\/strong> <\/h2>\n\n\n\n
                          \"\"\/<\/figure><\/div>\n\n\n\n

                          A la hora de evaluar los resultados del dise\u00f1o de una web, una de las herramientas m\u00e1s \u00fatiles es el testeo. Esto no solo consiste en medir su tr\u00e1fico con herramientas como Google Analytics, podemos ir un paso m\u00e1s all\u00e1 y crear distintas versiones de nuestro dise\u00f1o para investigar qu\u00e9 es lo que funciona mejor. <\/p>\n\n\n\n

                          Detalles como cambiar el color de un bot\u00f3n o el orden de los campos de un formulario, nos ofrecen informaci\u00f3n muy valiosa para conocer las preferencias de los usuarios que navegan por nuestra interfaz. <\/p>\n\n\n\n

                          En Apache pusimos esto en pr\u00e1ctica con un formulario de VU security. La primera versi\u00f3n presenta un \u00fanico campo que nos pide diferente informaci\u00f3n seg\u00fan lo vamos rellenando y pulsando \u201csiguiente\u201d.<\/p>\n\n\n\n

                          \"\"\/<\/figure><\/div>\n\n\n\n

                          La segunda versi\u00f3n permite visualizar de antemano todos los campos que hay que rellenar para completar el formulario.<\/p>\n\n\n\n

                          \"\"\/<\/figure><\/div>\n\n\n\n

                          La tasa de conversi\u00f3n de la segunda versi\u00f3n fue un 24% superior a la primera, es decir, que los usuarios estuvieron m\u00e1s dispuestos a rellenar el segundo formulario que el primero.<\/p>\n\n\n\n

                          \u00bfQu\u00e9 conclusiones sacamos de esto? <\/strong><\/h2>\n\n\n\n

                          Podemos concluir que, si el usuario sabe de antemano cu\u00e1ntos pasos le quedan para completar un formulario, m\u00e1s gratificante le resulta rellenar cada uno de sus campos, porque le ofrecemos una referencia visual de cu\u00e1nto se acerca a su objetivo a medida que avanza. <\/p>\n\n\n\n

                          Esta informaci\u00f3n se tom\u00f3 como referencia en futuros dise\u00f1os, como el del ejemplo anterior.<\/p>\n\n\n\n

                          El mundo del dise\u00f1o UX est\u00e1 en constante evoluci\u00f3n, ya que est\u00e1 estrechamente ligado al avance tecnol\u00f3gico, pero el objetivo que de los dise\u00f1adores siempre ser\u00e1 el mismo: guiar al usuario a trav\u00e9s del lenguaje universal que compone las interfaces digitales, facilitando y amenizando su aprendizaje, por lo que muchos de estos consejos nos ser\u00e1n siempre \u00fatiles, pase lo que pase.<\/p>\n\n\n\n

                          En Apache aplicamos todos estos conocimientos para ofrecer servicios de auditor\u00eda y dise\u00f1o UX, ofreciendo a nuestros clientes la posibilidad de optimizar el rendimiento de todas sus interfaces digitales. Si quieres que los visitantes de tus web o apps tengan una mejor experiencia de usuario, \u00a1No dudes en contactarnos!<\/p>\n\n\n\n

                          <\/p>\n","protected":false},"author":31,"featured_media":3466,"template":"","category_insight":[60],"_links":{"self":[{"href":"https:\/\/apachedigital.io\/en\/wp-json\/wp\/v2\/insight\/3464"}],"collection":[{"href":"https:\/\/apachedigital.io\/en\/wp-json\/wp\/v2\/insight"}],"about":[{"href":"https:\/\/apachedigital.io\/en\/wp-json\/wp\/v2\/types\/insight"}],"author":[{"embeddable":true,"href":"https:\/\/apachedigital.io\/en\/wp-json\/wp\/v2\/users\/31"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/apachedigital.io\/en\/wp-json\/wp\/v2\/media\/3466"}],"wp:attachment":[{"href":"https:\/\/apachedigital.io\/en\/wp-json\/wp\/v2\/media?parent=3464"}],"wp:term":[{"taxonomy":"category_insight","embeddable":true,"href":"https:\/\/apachedigital.io\/en\/wp-json\/wp\/v2\/category_insight?post=3464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}