Índice
¿Qué es la experiencia de usuario?
Un diseño por etapas de la experiencia de usuario (UX):
Etapa de investigación
Etapa de arquitectura de la información
Etapa de diseño de interfaz de usuario
Etapa de prueba
«QUÉ ES LA EXPERIENCIA DE USUARIO (UX)
»Cuando una empresa decide tener presencia en internet y hacerlo a través de un sitio web, lo primero que debe tener en cuenta es que ese nuevo punto de contacto con su cliente debe ofrecerle lo que él está buscando. Para esto es básico pensar en cuál será su experiencia al ingresar al sitio buscando satisfacer una necesidad.
»La experiencia de usuario (UX), un término que viene del campo del marketing, hace referencia al nivel final de satisfacción de una persona, luego de interactuar con un servicio o producto. Esta depende de la integración de varios elementos y se califica como positiva o negativa dependiendo del tipo de percepción que tenga el usuario.
»Una óptima experiencia de usuario en un sitio web no solo busca que este cumpla con estándares de usabilidad, sino también que ofrezca al usuario un respuesta efectiva y eficaz a lo que busca y que además, este disfrute de su uso como algo realmente placentero. Tiene mucho que ver también con el sentimiento y confianza hacia el producto y la marca. De ahí el principal reto al implementar prácticas de diseño centrado en el usuario.
»Según Mauricio Angulo, consultor de User eXperience, el diseño de experiencia de usuario consiste en encontrar la manera en que “la tecnología sea más usable para todo el mundo. Es justo la diferencia entre un producto exitoso y un producto mediocre”.
»Cabe resaltar que para que esto sea posible, es necesario contar con un equipo multidisciplinario que aporte significativamente al objetivo principal, desde su visión y capacidad.
»Entre los elementos que al integrarse influyen en la experiencia de usuario en un sitio web, se encuentran:
»Interfaz del usuario
»En este punto se encuentran los elementos gráficos que permiten a los usuarios realizar tareas en un sitio web, por ejemplo, los botones. Es muy importante que el diseño gráfico de la interfaz sea muy atractivo e intuitivo, no solo para facilitar la navegación del sitio, sino también para reforzar el mensaje de comunicación que se quiere entregar.
»Arquitectura de la información
»Consiste en la organización, jerarquización y estructuración de los contenidos del sitio web, con el fin de facilitar al usuario su manejo y acceso, procurando así satisfacer fácilmente sus necesidades sin que tenga que dar demasiadas vueltas para llegar a donde quiere.
»Plataforma
»En este punto vale la pena tener en cuenta algunas de las recomendaciones que entregamos en nuestra reciente publicación "Ventajas de tener un CMS amigable", pues de las posibilidades que ofrezca la plataforma que administra nuestros contenidos, depende en gran medida el despliegue que tengan la información desde diferentes dispositivos, así como la posible implementación de desarrollos especiales.
»Usabilidad y accesibilidad
»Es la capacidad que tiene cualquier tipo de usuario para acceder a un sitio web, de forma fácil. Esto básicamente significa que el sitio debe tener funciones y menús sencillos y contenidos de carga rápida. Asimismo contar con las características de funcionalidad necesarias para ser entendido y navegable por cualquier persona.
»UN DISEÑO POR ETAPAS DE LA EXPERIENCIA DE USUARIO (UX)
»ETAPA DE INVESTIGACIÓN
»[Acabamos de definir] qué es la experiencia de usuario y cuáles son los aspectos que principalmente influyen en que esta sea exitosa o mediocre. Pero, adicional a esto, vale la pena tener en cuenta que la Organización Internacional de Estandarización (ISO) [*Ver nota de Plaka Logika al pie de este párrafo], propone seis principios que aseguran que un diseño está centrado en el usuario:
»1. El diseño está basado en el entendimiento de los usuarios, tareas y entornos.
»2. Los usuarios participan en el proceso de diseño y desarrollo.
»3. El diseño evoluciona mediante evaluaciones centradas en el usuario.
»4. El proceso es interactivo.
»5. El diseño se dirige a la experiencia de usuario general.
»6. El equipo de diseño incluye habilidades y perspectivas multidisciplinares.
[*Nota de Plaka Logika: ISO 9241-161:2016 Ergonomics of human-system interaction – Part 161: Guidance on visual user-interface elements
Normas ISO precedentes:
ISO 13407:1999 Human-centred design processes for interactive systems. This standard has been revised by:
ISO 9241-210:2010 Ergonomics of human-system interaction – Part 210: Human-centred design for interactive systems. This standard was last reviewed and confirmed in 2015. Therefore this version remains current].
»Ahora bien, para que esta experiencia de usuario sea tan positiva como esperamos y que los elementos que la conforman cumplan con su objetivo, es importante seguir las etapas que hacen parte del proceso de construcción de un diseño centrado en el usuario: investigación, arquitectura de la información, diseño de la interfaz de usuario, pruebas.
»[A continuación] abordaremos la etapa 1: investigación
»Esta quizá sea la etapa más importante del diseño centrado en el usuario, ya que consiste en estudiar el perfil del público objetivo, indagar en qué contexto se mueve, identificar sus necesidades y definir los objetivos que se quieren lograr con el producto o servicio, mediante diferentes métodos que nos permitan obtener datos cualitativos y cuantitativos.
»Aunque existen muchas técnicas para indagar sobre los hábitos y necesidades de un usuario, entre los métodos de investigación más efectivos y usados se encuentran:
»Entrevistas y encuestas
»Estos métodos permiten obtener datos de tipo cualitativo y cuantitativo y puede decirse que son de las mejores opciones para obtener un primer acercamiento a lo que es el usuario.
»Técnicas proyectivas
»Son pruebas escritas u orales, desarrolladas a través de actividades grupales, en las que el usuario proyecta sus sensaciones o emociones frente a un producto o servicio que se le presenta. Por ejemplo: completado de frases y asociación de palabras o calificativos con el producto. Este tipo de actividades son muy útiles para estudiar la actitud y motivación del consumidor así como los ejercicios mentales de los que se vale para responder a los estímulos que le da un servicio o producto.
»Estudios etnográficos
»Esta técnica permite principalmente conocer el contexto y entorno en el que se mueve el público objetivo, así como la forma en que el producto o servicio le entregará soluciones a sus necesidades.
»Benchmarking
»Esta es una efectiva herramienta de gestión empresarial que permite realizar la evaluación de rendimiento de una empresa con relación a sus competidores. David T. Kearns, Director General de Xerox Corporation, empresa norteamericana de soluciones digitales, “el benchmarking es un proceso sistemático y continuo para evaluar los productos, servicios y procesos de trabajo de las organizaciones reconocidas como las mejores prácticas, aquellos competidores más duros”. Es decir que durante la etapa de investigación, este método permite identificar cuáles son las mejores prácticas de la industria, con el objetivo de llevarlas a un nivel superior.
»Construcción de usuario
»Este método consiste básicamente en la creación de un “usuario ficticio” que representa todo lo que es o necesita nuestro público objetivo. Se hace a través de una ficha en la que se incluyen datos del usuario como su edad, gustos, motivaciones, experiencia con el productos, necesidades, expectativas y el entorno en el que se desenvuelve (estrato social, país, ciudad, comunidad, etc.).
»En este punto suelen crearse también usuarios secundarios, que aunque no hacen parte del público objetivo, están involucrados de alguna manera en el consumo del producto o servicio y por lo tanto es indispensable tenerlos en cuenta al momento de diseño de este. Un ejemplo de esto podrían ser los familiares de una persona con discapacidad visual que desea acceder a un sitio web para descargar un software que le permitirá usar su computador de forma independiente.
»Para el caso de rediseño: analítica de los datos existentes
»Cuando se trata del rediseño de un sitio web existente, hay un insumo valioso que se debe aprovechar al máximo, y es la analítica de los datos de navegación sobre el sitio actual. Este es un ejercicio en donde sobre un sitio que ya ha estado publicado, se puede estudiar claramente el perfil de los usuarios, ubicación desde donde acceden, recorrido que hacen por el sitio web, dispositivo más usados (móvil o escritorio) y errores significativos de accesiblidad que representen una barrera para el público objetivo.
»ETAPA DE ARQUITECTURA DE LA INFORMACIÓN
»Luego de culminar la etapa de investigación del proceso de diseño centrado en el usuario, los datos y conclusiones que perfilan al público objetivo se convierten en el principal insumo para continuar con la etapa de arquitectura de la información, momento en el que se define la estrategia de contenidos, que básicamente consiste en evaluar todas las estructuras posibles que podría tener el sitio, en referencia a las necesidades del público objetivo y su contexto, para elegir finalmente la más idónea.
»Entre otras cosas, esta etapa debe definir cuál es la mejor forma de satisfacer al usuario, de acuerdo a la información recolectada en la etapa uno (investigación), cómo ofrecer un alternativa que supere lo que ofrece la competencia directa y cuál es la manera de presentar el contenido (secciones, niveles de navegación, etc), para persuadir al usuario e inducirlo a realizar las acciones que queremos.
»Cuando se trata de un rediseño de un sitio, este es el momento de identificar las soluciones a los conflictos que se tengan.
»El proceso de arquitectura de información implica realizar al menos tres ejercicios que explicaremos a continuación:
»Inventario de contenidos
»Como su nombre lo dice, este ejercicio consiste en poner sobre la mesa el contenido que se tiene o que hace falta para incluir en el sitio web. Para esto es de gran ayuda clasificarlo bajo algunos parámetros como el tipo de formato en el que se tiene la información, descripción del contenido, fecha de creación o actualización, tipo de contenido o responsable de definirlo. En el caso de que sea un contenido necesario pero que no se tiene, se deben evaluar los requerimientos y tiempos con los que se cuenta para consolidarlo. Lee también: La importancia del contenido en tu sitio web.
»Card Sorting
»Este es un método que permite evaluar la arquitectura de la información de un sitio. Durante una sesión de Card Sorting, lo que hacen los participantes es agrupar, por medio de tarjetas marcadas, los contenido en categorías que ayudan a definir las secciones y subsecciones (y sus posibles nombres) de un sitio web. Esto ayuda a tener un acercamiento a la forma en que los usuarios esperan encontrar el contenido. Aplica para la creación desde cero de una página web o para su rediseño.
»Existen dos tipos de Card Sorting:
»_Abierto: en el que no se presentan categorías definidas y el participante debe sugerirlas y clasificar el contenido en cada una de ellas.
»_Cerrado: en el que se presenta a los participantes una serie de categorías y a partir de ahí, tienen que ordenar el contenido donde mejor consideren.
»Generalmente esta actividad se realiza de forma presencial con uno o varios participantes, pero en ocasiones en las que no se puede llevar a cabo de esta manera o que simplemente se quiere hacer con la ayuda de un software especializado, se pueden emplear herramientas como UXSort o UserZoom.
»Wireframes
»En este punto lo que se hace es crear uno o varios prototipos, que permiten ver un esquema sencillo (sin color ni diseño) de lo que será la estructura de la página web. El objetivo de este ejercicio es definir la posición del contenido (menús de navegación, bloques multimedia, columnas, etc.), e identificar errores de funcionalidad o usabilidad que puedan surgir.
»Existen diferentes aplicativos para crear wireframes en línea de una forma rápida y fácil, un ejemplo son MockFlow o Balsamiq Mockups.
»ETAPA DE DISEÑO DE INTERFAZ DE USUARIO
»Luego de pasar por un proceso de investigación y proceder con un dedicado trabajo de arquitectura de la información, este es el momento en el que los insumos de las dos primeras etapas se juntan para entregar un resultado real de lo que es el sitio web. Quizá esta sea la etapa en la que la creatividad es la protagonista, pues si bien el contenido juega un papel importantísimo, los elementos gráficos que se usen deben ser el complemento ideal para darle al mensaje toda la fuerza que necesita y convertir al sitio web en un producto realmente usable y deseable para el usuario.
»Según varios estudios, uno de los factores que más influye en la credibilidad de un sitio web —y la reputación de la marca que este representa— es su impacto visual. Esto incluye principalmente colores, tipografías, calidad de imágenes y distribución de contenido.
»El secreto del éxito en esta etapa está en encontrar un equilibrio entre la armonía de los elementos gráficos y la funcionalidad de los mismos.
»Prototipos de alta calidad
»Luego de haber hecho un acercamiento simple a lo que sería la estructura del sitio (a través de los wireframes) y la distribución de los diferentes tipos de contenidos, este es el punto en el que ese esbozo gráfico se aterriza a lo que en realidad será la parte visual del sitio web. Aquí es cuando el diseñador debe procurar entregar una interfaz limpia, con una línea gráfica que se identifique con la marca o proyecto y que sea lo suficientemente atractiva no solo para cautivar la atención del usuario, sino para lograr que este identifique con facilidad nuestra propuesta de valor y realice las acciones que queremos.
»Para esto, el equipo de diseño de Newtenberg, hace algunas recomendaciones:
»1. Tener claro quién es tu usuario final
»Gracias al proceso de investigación de la primera etapa de diseño de experiencia de usuario, en este punto se tendrá la claridad suficiente a la hora de escoger la línea gráfica del sitio (tipos de letra, color, imágenes, etc.). Ejemplo: Si tu usuario final es un niño, los colores que se utilizarán serán más llamativos, seguramente.
»2. Ser intuitivo
»No olvides esta palabra y su significado, a la hora de pensar en tu diseño no debe estar ausente. Ser intuitivo te permite encontrar buenas alternativas para que tu sitio web sea muy agradable y fácil de recorrer. Recuerda que puedes atraer a un usuario a tu página, pero mantenerlo en ella es el gran reto. Por eso no es bueno entregar toda la información en una sola pantalla, entrega bocados que permitan ver de una forma global todo lo que tu página tiene para dar.
»3. Cuidar el menú de navegación
»Este punto tiene mucho que ver con la arquitectura de la información, pero lo resaltamos aquí por su gran importancia. No hagas complicado el recorrido por tu página, no es conveniente tener demasiadas secciones (máximo 8), ni demasiados niveles (máximo 2), tampoco usar palabras largas o tecnicismos en los nombres del menú. (Ver: Experiencias exitosas Newtenberg).
»4. Peso de pluma en archivos como imágenes y otros
»Si tu sitio pesa menos será más fácil el acceso para muchos usuarios, y para que esto pase, es necesario valerse de diferentes herramientas (existen muchas online), que harán más fácil esta tarea. Ejemplo: cuando se deban incluir recursos como videos, siempre será una buena alternativa usar YouTube. (Ver: Ventajas de elegir un CMS amigable)
»5. Responsive design o diseño adaptable
»Como lo mencionamos en una de nuestras anteriores publicaciones (¿Por qué pensar en móvil al momento de crear tu sitio web?), hoy no nos podemos dar el lujo de diseñar o crear un contenido que no sea de consumo amigable desde cualquier dispositivo. Si eres nuevo en el tema o no eres experto en hojas de estilos, existen muchas herramientas (frameworks) como Bootstrap o Foundation, que son en otras palabras, colecciones de códigos que hacen tu vida más fácil.
»6. Creación del manual de identidad gráfica
»Una vez se ha definido y aprobado la línea gráfica del sitio web, esta debe quedar consignada en un documento que se conoce como manual de identidad gráfica y que se convertirá en la guía para actualizaciones posteriores. En este se detallan datos sobre elementos como: tipografías, tamaños de texto (títulos, subtítulos, encabezado, cuerpos de texto), estilos, colores, efectos especiales aplicados a elementos como fotos o botones, usos y variantes de logos, entre otros.
»ETAPA DE PRUEBA
»Tal como lo hemos venido explicando, el diseño de experiencia centrado en el usuario consta de 4 etapas:
»Etapa 1: Investigación
»Etapa 2: Arquitectura de la información
»Etapa 3: Diseño de interfaz de usuario
»Etapa 4: Prueba
»A esta última etapa se llega cuando se ha pasado por diferentes ejercicios que permiten la comprensión de las necesidades del usuario final y la estructuración de una serie de soluciones para estas necesidades. Básicamente es aquí donde se identifican las fallas, los aciertos y los correctivos que sean necesarios.
»Cuando se va a ejecutar la etapa de prueba se debe:
»_ Tener claros los objetivos de los usuarios en el sitio y priorizarlos.
»_ Tener claros cuáles son las tareas que el usuario realizará y qué implica o exige cada una de ellas.
»_ Identificar los diferentes escenarios de uso del sitio web.
»_ Priorizar las necesidades funcionales.
»Durante esta etapa final se aplican varios test, entre los que se encuentran:
»Test heurísticos
»Esta técnica de indagación consiste en el análisis por parte de un experto, para detectar problemas de usabilidad del sitio web.
»Esta prueba, que debe realizarse antes que las que se realizan con usuarios finales, se hace a partir de un conjunto de principios de usabilidad y se califican de acuerdo al impacto que cada principio tiene sobre el usuario.
»El resultado de este test permite, entre otras cosas, evaluar la flexibilidad y eficiencia de uso, la capacidad de respuesta, la libertad que tiene el usuario para acceder a los contenidos, la forma en que se presenta la información, la estética y flexibilidad del diseño, y el nivel de ayuda o documentación que está disponible para el usuario.
»Test de percepción
»Este tipo de test suele realizarse con participantes que hagan parte del público objetivo y lo que permite es observarlos en su contexto. Puede hacerse de forma presencial o remota, y a través de varios métodos como [los siguientes].
»_Entrevistas a usuarios
»Este ejercicio consiste en mostrar una página web a un usuario durante un corto tiempo y posteriormente hacer una serie de preguntas sobre su percepción “a simple vista”, que tienen que ver con qué tan agradable es el diseño, qué cree que puede hacer el el sitio o si cree que el contenido es poco o exagerado.
»Una segunda parte de este ejercicio, consiste en encargar al usuario realizar algunas tareas en el sitio y luego preguntarle qué tan fácil fue ejecutarlas.
»_Análisis de clics y recorridos
»Este suele ser uno de los ejercicios más interesantes y reveladores sobre el comportamiento de un usuario en un sitio web. Aquí es donde se identifica que tan eficaz es la ubicación de los elementos de la página y cuáles son las zonas de más interacción o de mayor atracción visual (eye-tracking).
»Herramientas para hacer análisis de clics y mapas de calor: CrazyEgg, ClickHeat, ClickTale.
»_Test A/B y multivariante
»Este test consiste en crear dos versiones de una misma pantalla o elemento y medir cuál funciona mejor. En este ejercicio del diseño de UX lo que se hace es mostrar a los usuarios diferentes prototipos del sitio web, y comprobar cuál es mejor recibido.
»Por otro lado, el test multivariante consiste en presentar pequeñas variaciones dentro de un mismo sitio, con el objetivo de saber cuál funciona mejor frente al público objetivo.
»Algunas herramientas usadas para realizar test remotos, son: Loop11, UserTesting, Userlytics.
»Una vez finalizada esta etapa de prueba, es necesario consolidar las propuestas de mejora para el sitio web y empezar a trabajar en ellas cuanto antes».
