Saltar al contenido principal
LibreTexts Español

5.4: Principios básicos del diseño de UX

  • Page ID
    67137
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Diseño centrado en el usuario

    Si bien este puede parecer el punto más obvio, es sorprendente la frecuencia con la que se olvida al usuario en la experiencia del usuario. Los dueños de negocios, comercializadores y desarrolladores web frecuentemente se enfocan en crear las plataformas web que desean y piensan que son las mejores, en lugar de interrogar realmente lo que el usuario necesita. A menudo, el rendimiento de los activos web se ve comprometido cuando el proceso de diseño es impulsado solo por las necesidades internas del negocio, por ejemplo, asegurando que cada departamento de la compañía tenga un espacio que controle en la página principal a expensas de lo que el usuario necesita. A la hora de diseñar para el usuario, es necesario hacer las siguientes preguntas:

    • ¿Quién es el usuario?
    • ¿Cuáles son los deseos y necesidades del usuario desde tu plataforma?
    • ¿Por qué el usuario realmente viene a tu sitio web?
    Nota

    El recorrido del cliente se introduce en el capítulo sobre Estrategia y contexto. Se refiere a los pasos que toma su cliente al interactuar con su marca.

    • ¿Dónde es más probable que se encuentre el usuario en su recorrido por el cliente cuando visite su sitio?
    • ¿Cuáles son las capacidades del usuario, las habilidades web y la tecnología disponible?
    • ¿Cómo puede el sitio facilitar el recorrido del cliente hacia la conversión y la compra?
    • ¿Qué características harían que la experiencia del usuario fuera más fácil y mejor?

    Las respuestas a estas preguntas saldrán de la investigación de usuarios, como se discutió en el capítulo de Investigación de mercados anteriormente en este libro.

    clipboard_e5a641669b1eac86b4b2bf05776692e18.png
    Figura\(\PageIndex{1}\): Es esencial dar a los usuarios exactamente lo que necesitan Adaptado De XKCD, 2015.

    Por supuesto, muchos usuarios pueden no saber exactamente cuáles son sus deseos y necesidades. Es trabajo del practicante de UX descubrirlos a través de la investigación e interpretarlos de la mejor manera posible. Tenga en cuenta la famosa cita de Henry Ford aquí: “Si le hubiera preguntado a la gente qué querían, habrían dicho caballos más rápidos”.

    (www.goodreads.com)

    Usuarios móviles Cuando se habla de diseño centrado en el usuario, se debe considerar cualquier cosa que haya obtenido sobre el contexto del usuario. Hoy en día más de la mitad del tráfico web se origina desde un dispositivo móvil, con usuarios que acceden a Internet ya sea a través de un teléfono inteligente o tableta (piensa con Google, 2016). Este número aumenta cada año y se espera que supere el 70% para 2019 (Internet Society, 2015). Por lo tanto, diseñar para móviles debe ser una prioridad. El contexto de los usuarios móviles afecta la forma en que utilizan sus dispositivos. Los usuarios móviles son:

    • Orientado a la meta. Los usuarios móviles recurren a sus dispositivos móviles para responder una pregunta, consultar rápidamente el correo electrónico, encontrar información u obtener indicaciones. A menudo tienen un propósito distinto en mente cuando usan su teléfono.
    • Consciente del tiempo. Hay dos aspectos en esto. Por un lado, los usuarios de móviles suelen buscar información urgente o urgente como la dirección del restaurante que buscan, por lo que las respuestas deben estar disponibles lo más rápido posible. Por otro lado, el dispositivo móvil también se usa frecuentemente para matar el tiempo o como fuente de entretenimiento como leer artículos en el sofá, o jugar juegos mientras se espera en una cola, por lo que el contenido también es crucial. La investigación de usuarios te dirá en cuál de estos grupos se encuentran tus usuarios y cómo necesitas estructurar tu sitio en consecuencia.
    Nota

    Algunos usuarios de móviles utilizan sus teléfonos para navegar de manera similar uno usaría una computadora de escritorio. ¿Cómo usa su audiencia sus dispositivos?

    • Buscar dominante. Incluso los usuarios que saben lo que buscan tienden a navegar allí a través de la búsqueda, por ejemplo, escribiendo la marca en Google, en lugar de acceder a la página desde un marcador o escribir la URL directamente en la barra del navegador.
    • Enfocado a nivel local. Según los datos de búsqueda de Google, el 30% de todas las búsquedas móviles son por ubicación (piensa con Google, 2016). Dado que los teléfonos móviles siempre se llevan, los usuarios recurren a ellos para encontrar información de cosas en su entorno desde negocios locales hasta más detalles sobre un producto que acaban de ver.

    La usabilidad es especialmente desafiante con el móvil. Uno de los mayores desafíos es la gran cantidad de diferentes categorías de dispositivos y modelos disponibles. El informe OpenSignal de 2014 identificó 18 796 dispositivos móviles Android distintos, que ejecutan una miríada de sistemas operativos (The Next Web, 2014).

    Las limitaciones del móvil crean consideraciones adicionales para que el diseñador de UX las aborde para garantizar que los visitantes tengan una experiencia de usuario agradable mientras visitan el sitio. Estas limitaciones incluyen:

    • Pantallas pequeñas. Incluso los teléfonos inteligentes más grandes son pantallas muchas veces más pequeñas que una computadora portátil estándar y las tabletas caen en algún lugar entre las dos. Esto significa que el usuario tiene una ventana mucho más pequeña a través de la cual percibir y entender el sitio web, por lo que puede ser difícil obtener una impresión general de dónde están las cosas o qué es importante.
    • Entradas difíciles. Los teléfonos móviles no vienen con teclados y ratones de tamaño completo, por lo que suelen ser mucho más difíciles de operar de manera fluida y precisa que las computadoras de escritorio. Las pantallas táctiles pueden ser la excepción aquí, aunque también tienen sus propias trampas.
    • Velocidades de conexión bajas. Muchos usuarios de teléfonos móviles, especialmente en los países en desarrollo, tienen conexiones lentas a Internet. Incluso las opciones rápidas como 3G a menudo pueden ser más lentas que un equivalente de escritorio. Esto hace que la carga de sitios web o imágenes de gran tamaño sea lenta y frustrante y puede resultar costosa en términos de costos de datos.
    Nota

    Un enfoque de diseño coloca 'el contenido primero'. Esto significa que debes decidir qué contenido proporcionar en tu sitio dependiendo de si los usuarios lo están viendo desde un móvil o una computadora de escritorio, y luego adaptar el diseño y el material a ese dispositivo.

    • Hardware lento. A veces la lentitud viene del propio hardware. Cuanto más básico sea el teléfono, más lento es probable que sus componentes de procesamiento estén haciendo el simple acto de abrir el navegador y cargar una página que consume mucho tiempo.

    Hay tres enfoques principales para crear contenido accesible para dispositivos móviles.

    1. Sitios web móviles (llamados sitios mobi)
    2. Aplicaciones nativas y web (llamadas aplicaciones)
    3. Sitios web responsivos (sitios web que se adaptan al dispositivo).

    Usabilidad y convenciones

    Nota

    Lee más sobre esto en el capítulo Desarrollo y diseño web.

    La usabilidad consiste en hacer que los activos digitales que construimos sean fáciles e intuitivos de usar. Para parafrasear a Steve Krug, no hagas pensar a tus usuarios: simplemente deberían hacerlo (Krug, 1997−2013).

    Uno de los aspectos más importantes de la usabilidad implica apegarse a las convenciones, que son simplemente reglas comunes o formas de mostrar o estructurar cosas en la web. Las convenciones populares incluyen:

    • Enlaces que son azules y subrayados
    • Menús de navegación en la parte superior o izquierda de la página web
    • El logo en la esquina superior izquierda que está vinculado para llevar al usuario de vuelta a la página de inicio
    • Cuadros de búsqueda colocados en la parte superior de la página, usando redacción estándar como 'búsqueda', o un icono de lupa.
    Nota

    ¿Se te ocurre alguna otra Convención web? ¿Cómo han evolucionado estos con el tiempo y qué tan importante es apegarse a las reglas?

    Asegúrese de que todos los elementos del sitio web, como menús, logotipos, colores y diseño, sean distintos, fáciles de encontrar y se mantengan consistentes en todo el sitio. Hay algunos 'don't' clave cuando se trata de construir un sitio web fácil de usar y utilizable:

    • Nunca cambies el tamaño de las ventanas ni inicies el sitio en una ventana emergente.
    • No use páginas de entrada o de presentación, es decir, una página que los visitantes del sitio encuentren primero antes de llegar a la página de inicio.
    • Flash ya no se utiliza para diseñar sitios web. Sin ayuda, la mayoría de las arañas de los motores de búsqueda no pueden rastrear de manera efectiva los sitios Flash, y Flash generalmente no funciona en muchos dispositivos móviles.
    • No distraiga a los usuarios con 'árboles de Navidad' como imágenes parpadeantes, luces intermitentes, sonido automático, texto de desplazamiento y fuentes inusuales.

    Y finalmente, si bien los siguientes principios también se aplican al escritorio, son especialmente válidos para móviles:

    • Reduzca el tiempo de carga. Trate de mantener el contenido y las acciones en la misma página ya que esto asegura un mejor rendimiento ya que hay menos cargas de página. Fomentar la exploración especialmente en pantallas táctiles, a los usuarios les gusta navegar por elementos y explorar. Esto los hace sentir en control.
    • Dar comentarios. Asegúrese de que esté claro cuándo el usuario realiza una acción. Esto se puede lograr a través de animaciones y otras señales visuales.
    clipboard_eafade348c30a3ae43f13227fe0940152.png
    Figura\(\PageIndex{2}\): Animaciones que proporcionan retroalimentación al usuario de la acción que ha solicitado Adapted From Dribble, 2013.
    Nota

    Algunos notan la creciente presencia de sitios web de una página, especialmente para sitios con contenido limitado e imágenes grandes, lo que permite que el sitio se cargue más rápido. Echa un vistazo a este artículo que proporciona orientación sobre qué tipos de sitios deben optar por sitios de una página: www.webinsation. com/debería-tener-una-page-website. Este enfoque es menos efectivo en países donde los costos de datos son prohibitivos.

    • Comunicarse consistentemente. Asegúrese de entregar el mismo mensaje en todos sus puntos de contacto, por ejemplo, usando los mismos iconos en el sitio web que lo haría en la aplicación móvil evita que los usuarios tengan que volver a aprender cómo se comunica.
    • Predice lo que quiere tu usuario. Incluir funcionalidades como autocompletar o texto predictivo. Elimine la mayor cantidad de entrada manual posible para optimizar la experiencia del usuario.

    Es útil considerar pautas de usabilidad para asegurar que tu sitio web esté en buen camino. Stay In Tech proporciona una lista de verificación de usabilidad en línea en https://stayintech.com/info/UX.

    Nota

    Los usuarios móviles prefieren desplazarse en una dirección.

    Simplicidad

    En los proyectos UX, la opción más simple es casi siempre la más fácil de usar. Incluso si su servicio o producto es complejo, sus portales web orientados al cliente no necesitan serlo. De hecho, es importante recordar que la mayoría de los clientes quieren la información más básica de usted, como “¿Qué es esto?” y “¿Cómo funciona?” La simplicidad puede significar varias cosas:

    • Mucho espacio vacío. En términos de diseño, esto se conoce como espacio negativo o en blanco. Aunque, por supuesto, no necesita ser específicamente blanco. El texto oscuro sobre un fondo claro es más fácil de leer. En general, cuanto más efectivamente se coloque 'sala de respiración' entre varios elementos de página, líneas de texto y zonas de la página, más fácil será para el usuario comprender dónde está todo.
    • Menos opciones. Los estudios han encontrado que las personas que enfrentan menos opciones generalmente eligen con mayor rapidez y confianza, y luego están más satisfechas con su decisión (Roller, 2010).
    • Lenguaje llano. A menos que su sitio web esté dirigido a un campo técnico altamente especializado, generalmente no hay necesidad de ponerse elegante con las palabras que usa. Un lenguaje claro, sencillo y bien estructurado es la mejor opción a la hora de crear una gran experiencia de usuario.
    Nota

    Leer más sobre esto está en el capítulo Redacción digital

    • Apegarse a las convenciones. Como hemos dicho antes, las convenciones son excelentes atajos para mantener las cosas simples para los usuarios. No hay necesidad de reinventar la rueda e intentar enseñar a tus usuarios una forma completamente nueva de navegar por un sitio web.
    clipboard_e3f09b91f416dbd499ff3330b95700037.png
    Figura:La página de inicio de\(\PageIndex{3}\) Fresh Books es limpia, sencilla, acogedora y fácil de usar Adaptado de captura de pantalla, FreshBooks 2016

    Cuando se trata de móviles, es aún más importante simplificar. Mostrar información solo cuando sea necesaria. Si bien debe asegurarse de que el activo móvil proporcione la misma información que el equivalente de escritorio, esto no necesita presentarse en el mismo formato o volumen.

    Credibilidad

    La credibilidad se refiere a lo confiable y legítimo que se ve algo, y es una gran consideración para los usuarios de la web a la hora de decidir usar su sitio web o no. Estas son algunas de las señales que los visitantes utilizan para determinar la credibilidad de un sitio web:

    • Looks — ¿se ve profesional y hermoso?
    • Los números de teléfono y direcciones prominentes son fáciles de localizar; esto asegura al visitante que hay personas reales detrás del sitio web y que son fácilmente accesibles.
    • Informativo y personal 'Acerca de nosotros' — algunos clientes quieren ver el funcionamiento interno de una empresa y están interesados en los honchos de cabeza. Considera incluir fotos y perfiles de empleados para agregar personalidad al sitio.
    • Testimonios genuinos: los testimonios son una excelente manera de mostrar a los clientes potenciales lo que sus clientes actuales tienen que decir sobre su organización. La confianza es vital, y esta es una forma de alentarla. Los testimonios en video pueden ser particularmente efectivos, asumiendo que tu audiencia no enfrenta restricciones de datos.
    clipboard_e03f1baa0cd463ed51b51b3efa24c2e26.png
    Figura\(\PageIndex{4}\): Los testimonios de usuarios genuinos pueden crear una sensación de credibilidad, como este ejemplo de Xero que incluye testimonios de texto y video Adapted From Screenshot, Xero, 2016.
    • Comercio electrónico: usar un canal de ventas de renombre ayuda a la credibilidad de sus sitios web.
    • Redes sociales: tener presencia en las redes sociales a menudo va más allá de establecer credibilidad que los testimonios, que podrían haber sido falsos.
    • Logotipos de asociaciones y premios: si perteneces a alguna asociación relevante de la industria o has ganado algún premio, los incluyen. Esto no sólo va un largo camino para establecer tu credibilidad, sino que demostrará que estás en la cima de tu juego, una muesca por encima de la competencia.
    • Enlaces a referencias o endosos creíbles de terceros: esta es una manera de hacer valer tu credibilidad sin tocar tu propia bocina.
    • Contenido fresco y actualizado — una sección de noticias que se actualizó por última vez hace un año implica que desde entonces no ha pasado nada o que a nadie le importa lo suficiente como para actualizarlo.
    • Sin errores — los errores ortográficos y gramaticales no son profesionales, y aunque la gran mayoría de los lectores no los recojan, el uno o dos que sí cuestionarán tu credibilidad. Esto se extiende a enlaces rotos, herramientas que funcionan mal y elementos interactivos que no funcionan como se anuncia.

    This page titled 5.4: Principios básicos del diseño de UX is shared under a CC BY-NC-SA 3.0 license and was authored, remixed, and/or curated by Rob Stokes via source content that was edited to the style and standards of the LibreTexts platform; a detailed edit history is available upon request.