Experiencia Usuario (UX)
43 Pages • 7,007 Words • PDF • 4.6 MB
Uploaded at 2021-09-24 14:59
This document was submitted by our user and they confirm that they have the consent to share it. Assuming that you are writer or own the copyright of this document, report to us by using this DMCA report button.
Experiencia Usuario (UX)
Director de contenidos: Sara López. La documentación que a continuación se muestra tiene cómo objetivo:
•
Explicar qué es usabilidad, para qué sirve y por qué debe tenerse en cuenta en
los productos digitales.
•
Explicar y describir la metodología más importante a la hora de
diseñar productos que sean usables y atractivos para los usuarios.
•
Describir las técnicas que pueden emplearse durante el proceso de creación:
investigación con usuarios (entrevistas en profundidad, encuestas online, focus groups, etc), diseño de interfaces (prototipado, card sorting, tree testing, etc) y testing con usuarios (test en laboratorio, test en remoto, eyetracking, etc.)
Dos conceptos clave para el éxito de un producto digital: La experiencia de usuario y la usabilidad • Dos conceptos clave para el éxito de un producto digital: la experiencia de usuario y la usabilidad.
La experiencia de usuario es un aspecto siempre presente en cualquier web, producto o dispositivo digital ya que se referiere a la menera en la que se siente y maneja. El concepto UX (experiencia de usuario) se ha convertido en imprescindible si se quiere conseguir tener un producto exitoso. Vamos a describir en que consiste este concepto y como se puede conseguir que un producto digital tenga un buena experiencia de usuario.
Definición
UX, es el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo. No sólo depende de los factores relativos al diseño sino además de aspectos relativos a las emociones, sentimientos, construcción y transmisión de la marca, etc. UX se preocupa de que toda la relación entre la persona y el producto digital sea positiva, esto implica pensar en:
• • • • • •
Qué necesidad va a cubrir el producto digital al usuario. Qué funcionalidad o funcionalidades son las adecuadas para cubrir dicha necesidad. Qué valores debe transmitir. Cómo va a navegar e interactuar el usuario. Qué información es adecuado mostrarle. Qué tono y sensaciones debe transmitir (lenguaje, diseño visual).
Para alcanzar una buena experiencia de usuario es necesario que la experiencia sea:
• •
Útil: El producto debe ser útil. Usable: El producto debe ser fácil de usar (buena navegación, adaptada a la lógica y al
conocimiento del usuario, etc.)
•
Deseable: El producto debe resultar agradable de usar y debe aportar un valor.
La definición usabilidad Una de las áreas de la experiencia de usuario más amplia es la usabilidad, aquella que se preocupa de la facilidad de usar el producto digital. De una forma coloquial, podemos decir que la usabilidad es la capacidad de “usar” un producto digital (puedes ser una web, una aplicación de móvil, una aplicación para un ipad o tablet, etc) fácilmente y de manera intuitiva. La Organización Internacional para la Estandarización (ISO) ofrece una definición de usabilidad que es más completa y precisa y sobre la que vamos a trabajar, la definición dice así: ISO/IEC 9241: "Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico". Veamos por partes esta definición para entenderla mejor. En la primera parte de la descripción se hablan de tres aspectos: Eficacia:
Con este concepto la definición se refiere a si la web, app o producto digital permite al usuario llevar a cabo la acción que se ha propuesto en una web. Por ejemplo: Consular el horario de un tren de Madrid a Valencia en la página de Renfe. La web es eficaz si consigue que los usuarios se informan sobre ese horario. Si un usuario quiere comprar una entrada de cine en una web o a través de una app y lo hace, estaría siendo eficaz. Saber si un producto digital es eficaz puede averiguarse, se debe observar si los usuarios son capaces de hacer las acciones que se han propuesto. Por este motivo podemos decir que la eficacia si se puede medir, se puede saber si los usuarios hacen lo que se proponen o no (no son capaces porque tienen problemas de navegación, comprensión, interacción, etc.). Eficiencia: Es el esfuerzo empleado para llevar a cabo la acción que el usuario se ha propuesto. Por ejemplo: siguiendo con el ejemplo de la persona que quería un horario de tren de Madrid a Valencia, la eficiencia sería el tiempo que ha empleado en llegar a la información, el número de veces que se ha equivocado, el número de clics que ha realizado, etc. Todas aquellas medidas que nos ayuden a saber cuánto esfuerzo le ha supuesto encontrar la información, son la eficiencia. Es posible que el usuario llegue a la información, pero debemos averiguar mediante estas métricas si el esfuerzo ha sido demasiado alto. La eficiencia es un atributo que también es objetivo ya que puede medirse el tiempo que una persona tarda en encontrar una información o cuantas veces se equivoca hasta que llega a su objetivo. Satisfacción: Es la actitud/percepción del usuario tras el uso de la web, aplicación, etc. Se trata, pues, de un factor subjetivo ya que no se puede medir objetivamente lo que siente un usuario. La mejor manera de medir la satisfacción es a través de un cuestionario y una breve entrevista una vez el usuario ha finalizado la navegación por la web. Se suelen hacer preguntas como: ‘Del 1 al 10 como valoras tu paso por esta web’. ¿Qué es lo que más te ha gustado? ¿Y qué es lo que menos?. La definición también hablaba que estos tres atributos deben contemplarse en relación a:
•
Un usuario concreto que es el que utilizará la web. Cuanto mejor se defina y conozca al
usuario más usable podremos hacer una web. Deberá tenerse en cuenta su nivel de internet, la edad, el sexo, etc.
,
•
, Un objetivo concreto. Es imprescindible saber cuáles son las acciones que va a querer hacer
el usuario en el producto que se diseña.
•
Un contexto de uso concreto. Como y de qué manera va a hacer uso el usuario del producto
digital.
Your heading text goes here Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
La importancia de UX
Varias son las ventajas de tener en cuenta la usabilidad en un proyecto:
•
Mejora la conversión: una de las consecuencias que más directamente se observan cuando
un producto digital tiene una UX positiva es que convierte más. Es muy poco común que no exista a la hora de hacer un proyecto digital un equipo de UX que defina la experiencia.
•
Reduce los costes a la hora de crear productos digitales: los costes y tiempos de desarrollo
totales pueden ser reducidos evitando hacer varios diseños y reduciendo el número de cambios posteriores.
•
Reduce los costes de mantenimiento: los productos digitales que son fáciles de usar
requieren menos soporte para el usuario y menos mantenimiento.
•
Mejora la fidelización de los clientes: gracias a que la experiencia de usuario se crean
productos de mayor calidad de uso, esto los hace más competitivos en un mercado lleno de competencia.
UX y ROI
Existe una directa y clara relación entre la usabilidad y el aumento en el retorno de inversión, o ROI. Grandes marcas abiertamente apuestan por la usabilidad como manera de obtener mayor partido a sus inversiones online, tales como intranets, tiendas online, extranets y demás entornos digitales.
Existen numerosos ejemplos de publicaciones y estudios realizados que muestran el ROI de proyectos digitales. A continuación incluimos un párrafo extraído de Usabilityfirst.com en el que se incluyen casos de éxito reales en los que las propias marcas han hecho públicos:
•
Foraker redesigned and redeveloped a community platform for nonprofit organization
Breastcancer.org, resulting in a 117% increase in traffic (visitors), a 41% increase in new memberships, a 53% reduction in time taken to register, and a 69% reduction in monthly help desk costs. This led to tens of thousands of dollars in savings for the organization and opened up several new opportunities for outreach and the funding of operating expenses. For more information, read the case study (PDF, 312KB), or contact Foraker.
•
IBM’s employees almost never accessed the company’s intranet because it was overly
complex and complicated, making it nearly impossible to find needed information. Now IBM has consolidated over “8,000 intranet sites, 680 ‘major’ sites, 11 million web pages, and 5,600 domain names,” resulting in IBM Dynamic Workplaces, which employees rate as the “number one source of information within the company.” For the whole story, read Intranetjournal.com’s article about IBM’s streamlined intranet success story.
•
The Georgia Aquarium sells an average of 70% of all tickets online using a system
customized from off-the-shelf software. The previous high for online ticket sales at aquariums and zoos across the United States was 8 – 10%. Georgia Aquarium recognized the need to control lines, historic at such venues, and wanted entice visitors with an easy-to-use online system. Because of their foresight, the aquarium has seen nearly 4 million visitors in 21 months. Dennis Kelly, president and CEO of Zoo Atlanta, says, “…the Georgia Aquarium is at the forefront of utilizing the Web to present a very engaging, customer-friendly front door to their facility.” Read the article by Computer World about Georgia Aquarium’s online ticket success here.
Existen varias calculadoras para calcular el ROI en proyectos UX. https://www.justinmind.com/blog/how-to-calculate-the-roi-of-your-ux-activities/ https://www.uxmatters.com/mt/archives/2012/07/how-to-calculate-the-roi-of-ux-using-metrics.php Para ampliar:
• •
Un video explicativo sobre este asunto:The ROI of UXhttps://youtu.be/O94kYyzqvTc Literatura más detallada del tema:Improve Customer Experience with UX Investments that
Increase
ROIhttps://www.interaction-design.org/literature/article/improve-customer-experience-
with-ux-investments-that-increase-roi
Principios de usabilidad
Para llevar a cabo un producto digital con buena usabilidad debemos tener en cuenta una serie de principios que tratan distintos aspectos. A continuación describimos estos principios son:
Claridad en los objetivos del site o app.
El producto digital debe comunicar de manera clara y rápida su propósito. Es común encontrar webs y apps en las que cuesta trabajo saber exactamente qué ofrecen. Es recomendable ser concisos y directos en lo que la web ofrece al usuario, no debemos además olvidar que el comportamiento de los usuarios en internet tiende a ser poco paciente y busca rapidez.
Un buen ejemplo de este principio: Ofo que explica qué es y que ofrece nada más acceder a su home.
Adecuación al mundo y la lógica de los usuarios. La página web o app debe estar pensada en el tipo de usuario que va a utilizarla. Esto implica que la manera de organizar la información, el tipo de lenguaje elegido y la manera de realizar las cosas deben estar pensadas para esos usuarios. Frecuentemente utilizamos productos digitales en las que encontramos términos que no entendemos y no nos sentimos cómodos, esto sucede porque se han utilizado conceptos que seguramente para las personas que han realizado la web son claros pero que para el visitante son extraños.
Un buen ejemplo de este principio: esta web en su menú de navegación no solo pone un nombre cómo categoría sino que indica los meses y/o años para adaptarse al usuario, el cual no tiene por qué conocer la nomenclatura.
Orientación. Las páginas web y apps están hechas para navegar por ellas, ir de una sección a otra, y luego ir a otra, etc. Este comportamiento hace que sea necesario tener indicadores que ayuden al usuario a estar orientado.
Hay tres aspectos a tener en cuenta en relación a este tema: Las páginas web están hechas para navegar por ellas, ir de una sección a otra, y luego ir a otra, etc. Este comportamiento hace que sea necesario tener indicadores que ayuden al usuario a estar orientado. Hay tres aspectos a tener en cuenta en relación a este tema:
•
La página siempre debe incluir de manera visible el título del sitio de la página en la que se
encuentra. El título debe ser visible y además tener un título descriptivo.
•
Si nos encontramos dentro de una sección, dicha sección debe estar diferenciada visualmente
del resto de secciones.
•
Si la web es muy extensa y tiene muchos contenidos es conveniente incluir el rastro de migas.
Inicio > Sección 1 > Subsección 1 > Nombre de la página
Un buen ejemplo de este principio: Repsol utiliza correctamente los menús para orientar al usuario y dejarle libertad para moverse por la web.
Retroalimentación (feedback). Cada acción que el usuario realice debe tener una clara reacción y debe quedar perfectamente informado Un buen ejemplo de este principio: En Gmail, cuando el usuario activa el mail automático por encontrarse fuera por vacaciones, el interfaz le muestra el aviso en la parte superior todo el periodo en el que se encuentra activo dicho periodo.
Consistencia y Estándares. Es recomendable aprovechar las convenciones establecidas en internet. En relación a la consistencia el principio se refiere a, por ejemplo, no utilizar dos rótulos distintos para referirse a un mismo contenido, o no usar estilos diferentes dentro de un mismo sitio. Además, el sitio web debe seguir estándares o convenciones de diseño ampliaente aceptados. Cuanto más se parezca un diseño y su funcionamiento al resto de sitios web, más familiar y fácil de usar resultará para el usuario. Un buen ejemplo de este principio: Gmail también realiza una buena aplicación al usar los elementos siempre de manera coherente y respetando las convenciones.
Prevención de errores. El diseño de un sitio debe prevenir los errores de los usuarios antes de que se cometan. Un buen ejemplo de este principio: en este caso se muestran ayudas para asegurar al usuario que no se equivocará introduciendo la contraseña.
Flexibilidad y eficiencia de uso. Las páginas webs o apps debe facilitar las acciones que va a realizar el usuario. El sitio debe ser fácil de usar para usuarios novatos, pero también proporcionar atajos o aceleradores para usuarios avanzados. Un buen ejemplo de este principio: Airbnb muestra una home distinta según si la vista un usuario nuevo o un usuario registrado haciendo que la experiencia sea mejor para cada uno de ellos.
Eficacia de los mensajes de error. Es muy importante comunicar al usuario de manera clara y sencilla si ha habido algún error. Además, se debe permitir al usuario solucionar el error. por ejemplo, cuando un usuario introduce una consulta en un buscador y no obtiene ningún resultado, se debe informar al usuario sobre cómo solucionar el problema, por ejemplo, con mensajes del tipo "introduzca algún sinónimo" o "quiso Ud. decir...". Es tan importante comunicar bien el error como dar una vía para poder solucionarlo. Un buen ejemplo de este principio: explicar qué esta pasando y ofrecer una alternativa para solucionarlo.
Diseño no sobrecargado. Los productos digitales que tienen un diseño con muchos elementos producen el efecto negativo, ningún elemento llama la atención. Cada pedazo de información extra compite con la importante y disminuye su visibilidad. Un buen ejemplo de este principio: Incluir la información adecuada hace que tome mucho más protagonismo.
El objetivo que tiene un usuario cuando una web o app es un aspecto muy importante para la experiencia de usuario. Si
No
Depende
Selecciona los 3 atributos que debe cumplir un producto digital para que sea usable según la definición de usabilidad Opción múltiple. Eficiente: el usuario debe poder navegar sin emplear a penas esfuerzo para conseguir sus objetivos
Dinámica: la web debe tener contenidos que vayan cambiando
Eficaz: el usuario debe poder conseguir el objetivo que se había marcado al acceder a la web
Satisfactoria: el usuario debe terminar de realizar su objetivo quedando satisfecho
Divertida: el usuario debe sentir que la web es amena
Verdadero o falso. Una app o página web debe estar pensada en el tipo de usuario que va a usarla. Esto implica que la manera de organizar la información, el tipo de lenguaje elegido y la manera de realizar las cosas deben estar pensadas para esos usuario. Verdadero
Falso
El ROI en proyectos de UX no existe. Falso
Verdadero
Como conseguir páginas web exitosas (Diseño centrado en el usuario) Cómo conseguir productos digitales exitosos: diseño centrado en el usuario
Los usuarios a tienen a su alcance miles de apps y webs a las que acceder y además muy rápidamente. La competencia es tan alta que para tener éxito hay que ofrecer un producto digital con una gran experiencia de usuario. No es fácil crear una experiencia que enamore a los usuarios pero se puede conseguir si se construye haciendo que el centro del diseño sea la persona que va a usar ese producto digital. La manera de crear una en la que el centro es el usuario se llama: Diseño centrado en el usuario (User Centered Design). Es una filosofía de diseño que tiene por objetivo la creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo de su parte. Toma forma como un proceso en el que se utilizan una serie de técnicas multidisciplinares y donde cada decisión tomada debe estar basada en las necesidades, objetivos, expectativas, motivaciones de los usuarios. Las fases que tiene esta metodología son tres:
•
Investigación: Conocer a fondo a los usuarios finales, normalmente usando investigación
cualitativa o investigación cuantitativa. Recopilar y entender los objetivos de negocio del proyecto.
•
Concepto y diseño: Diseñar un producto que resuelva sus necesidades y se ajuste a sus
capacidades, expectativas y motivaciones
• • •
Evaluación: Poner a prueba lo diseñado realizando test de usuario Desarrollar: Crear técnicamente el producto. Medir: acompañar al producto a lo largo de su vida útil para ir mejorándolo.
Veamos cada una de las tres fases en detalle.
Fase de investigación
El comienzo de todo proyecto debe sentar las bases sobre las que se va a construir, es muy importante tener los objetivos del proyecto bien definidos. Para realizar correctamente las bases se deben tener en cuenta tres aspectos: Los objetivos de negocio: Es el primero de los puntos a tratar, debemos tratar lo que se quiere conseguir con el proyecto. En muchas ocasiones los proyectos fracasan porque no hay una buena definición de objetivos a conseguir.
Debemos conseguir un listado con los objetivos que se consideran prioritarios y los que se consideran secundarios para el negocio. Por ejemplo:
Objetivos principales:
• • •
Generar leads Vender más un producto Comunicar un nuevo producto
Objetivos secundarios:
• •
Aumento de suscripciones a newsletter Aumento de visitas en el blog
La mejor manera de proceder en este punto es realizar con el equipo que dirige el proyecto una reunión en la que transmitan sus necesidades y objetivos y toda esta información detallarla en un documento por escrito. El proyecto debe vertebrarse en función a esta información por tanto hay que dedicarle tiempo a entender perfectamente lo que se quiere.
Es muy interesante conocer cómo trata la competencia los objetivos que vamos a trabajar en el proyecto para conocer sus puntos fuertes y débiles. Por este motivo es recomendable realizar un estudio benchmarking.
Existen estudios de competencia en los que se observa cómo los usuarios navegan por la web de la competencia para detectar cuales son sus puntos fuertes y débiles. Es especialmente útil para saber cómo posicionar ciertos aspectos de tu web.
Los usuarios: La otra parte imprescindible a tratar son los usuarios, las personas que van a utilizar el producto. Cuanto mejor conozcamos cómo son, qué les motiva, que no les gusta mejor podremos diseñar para que se sientan bien en nuestra página. Para ello es imprescindible realizar una investigación que permita acercarnos a ellos, conocer en profundidad. Existen multitud de técnicas que nos permiten obtener mucha información: aproximaciones cualitativas, aproximaciones cuantitativas, aquellas que permiten el estudio del comportamiento y aquellas que permiten el estudio de la actitud de las personas.
Algunas de las técnicas más usadas:
• • • • • • • • • •
Entrevistas Técnica Persona Encuestas online Focus groups Estudio contextual Diarios User journey o customer journey Benchmark Analítica web Co-creación
Uno de los errores habituales en el diseño y rediseño de productos digitales es empezar el proyecto sin haber realizado una investigación con usuarios previa. Suele pensarse que no es necesario realizar esta tarea, y ese es un gran problema. Es necesario conocer en profundidad a al usuario y la necesidad que se va a cubrir porque será la manera de crear una experiencia que realmente sea satisfactoria. No es necesario que un mismo proyecto realice todas las técnicas de investigación, en función del proyecto será recomendable usar unas u otras. Por último, antes terminar esta primera fase, es recomendable crear un documento para finalizar esta fase que incluya las conclusiones de ambas partes (negocio y usuarios). Las conclusiones obtenidas en esta fase serán las que definan todo el proyecto.
las que definan todo el proyecto.
Fase de concepto y diseño
En esta fase se diseña el producto que resuelve las necesidades que se han definido en la fase anterior (objetivos de negocio) y que además debe ajustarse a las capacidades, expectativas y motivaciones de los usuarios. Esta fase consta de a su vez de 4 subfases: a. Concepto b. Arquitectura de información
c. Diseño de interfaz d. Diseño visual y creatividad
a. Concepto. Para crear un producto digital es necesario definirlo, para ello lo primero es poner en orden la información que se tiene en relación a: objetivos de negocio, debilidades y fortalezas, definición del usuario, necesidad del usuario que se va a cubrir, cómo es la competencia y cómo es la marca.
Con la información bien planteada se debe comenzar a dar forma al producto respondiendo a las siguientes cuestiones:
• • • •
Cómo debería ser la experiencia. Qué acciones y pasos vamos a realizar para conseguirlo. Qué funcionalidades debería tener el producto o servicio. Qué se consideraría éxito
Esta es una de las partes más críticas de la construcción del producto, no haber realizado correctamente la fase de investigación o precipitarse en la definición podría llevar a plantear incorrectamente el producto digital.
b. Arquitectura de información Una vez se tiene el concepto comienza la labor de la estructuración y la navegación. El objetivo de esta fase es organizar la información que vamos utilizar en el producto digital para que el usuario pueda manejarla y navegarla de manera que pueda satisfacer sus necesidades. La arquitectura de información define la estructura del producto digital: secciones, funcionalidades y sistemas de navegación. En esta subfase no se tiene en cuenta el aspecto gráfico (imágenes, colores, logos, etc.), sólo se trabaja con la información. Las labores que deben realizarse son:
• • • • •
Estructurar la información (número de secciones, agrupaciones de información, etc.). Diseñar la manera en la que va a poderse acceder a la información Elegir el nombre de las secciones de información Gestionar la información. Diseñar buscadores
La manera de trabajar con la información es mediante diagramas como el que a continuación se muestra:
Resulta de gran importancia etiquetar o nombrar correctamente las secciones o grupos de información que hayamos creado. Puede que un nombre poco adecuado en una sección o categoría provoque un problema serio. Crear una buena arquitectura de información es uno de los puntos más importantes de un producto digital. Tiene la complejidad de tener que responder a los objetivos de negocio y comunicación que se hayan marcado y a las necesidades y gustos de los usuarios. En esta fase de utilizan algunas técnicas con usuarios que ayudan a construir arquitecturas intuitivas y sencillas para los usuarios. Las 2 técnicas más impornates de esa fase son: Card sorting y Tree testing.
c. Diseño de interfaz En esta subfase se diseñan las pantallas (el interfaz) del producto digital presentando la información de manera que facilite el entendimiento. Es decir, con la estructura ya definida ahora toca diseñar las pantallas para mostrar el contenido y los usuarios puedan interactuar con él. Vamos a empezar bocetando cada una de las páginas del producto digital. Esta manera de empezar realizando bocetos se llama prototipado.
• •
Los prototipos representan, organizan y jerarquizan la información de las páginas. Se define donde se colocará la navegación, los diferentes bloques de información, las
llamadas a la acción, etc.
•
Deben ser sencillos para no perder la rapidez.
Ventajas de realizar prototipos:
• • • • • •
No se necesita mucho tiempo para su elaboración y edición/corrección Muestran cómo funcionará la aplicación, antes de que se haya desarrollado Permite asegurar la calidad y usabilidad en una etapa temprana Comparación de ideas y propuestas Permite hacer test Los tiempos de desarrollo se hacen mucho más precisos ya que se define con detalle lo
que será el nuevo interfaz. El equipo de desarrollo puede ir mucho más rápido.
Ejemplo de un prototipo:
A la hora de crear el interfaz, en el caso de webs, se debe contemplar cómo los contenidos serán vistos en los dos dispositivos principales: escritorio (desktop) y móvil. A este ejercicio se le llama Responsive Desing, se trata de adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizar y cuando se diseña se debe tener en cuenta. Se comienza diseñando para versión escritorio pero se piensa para que luego se vea correctamente en un móvil. Actualmente el uso del móvil es tan frecuente que el orden es distinto, se comienza a diseñar para el dispositivo móvil y se adapta en un segundo paso para el escritorio, lo que se denomina Mobile First.
d. Diseño gráfico
Una vez hemos hecho las páginas del sitio con prototipos es el momento de aplicar la capa gráfica. Los prototipos indican al equipo de diseño cuales son las prioridades de comunicación, cual es la jerarquía entre los elementos que hay en una página, etc.
El diseño terminará de dar a la nueva página web la parte más emocional, se trabajarán los colores, las texturas, las imágenes. Todos tiene que estar en consonancia para que el resultado sea muy bueno.
Fase de evaluación
Una vez la web ya está diseñada es el momento de comprobar el resultado y para ello se utiliza a potenciales usuarios, ellos probarán la web. Es importante destacar que las pruebas se realizan sobre diseños, no sobre la web una vez ya está programada. Una de las ventajas más interesantes de esta metodología es que realizando los test en este momento (antes de desarrollar) si se encontraran problemas, la capacidad de rectificar supondría muy poco tiempo, y por tanto, poco presupuesto.
Por tanto, el nuevo web debe probarse y si los resultados indican que hay cosas que no funcionan deben cambiarse y volver a probar con usuarios hasta que el resultado sea lo más óptimo posible.
Para llevar a cabo dichas evaluaciones y testeos puede realizarse varios tipos de técnicas:
Test de usuario en laboratorio Es una prueba cualitativa que se basa en la observación y análisis de cómo un grupo de usuarios reales utiliza la web. Es la prueba más importante para evaluar la usabilidad de cualquier producto digital.
Cómo se realiza: La muestra a realizar los test puede ir de los 5 a los 10 participantes. Hay un excelente artículo sobre cuantos participantes
utilizar
para
realizar
los
test
de
usuarios
en
la
página
de
Jacob
Nielsen
(http://www.useit.com/alertbox/20000319.html).
Es importante que los participantes se ajusten al perfil de los visitantes de la web. Este puede ser un punto problemático si los usuarios no son realmente el público objetivo.
De uno en uno, los participantes van a realizar en la nueva web una serie de tareas que anteriormente se han definido. Las tareas las define la persona que va a realizar el test. Suelen elegirse las acciones más importantes que un usuario debe hacer en la web.
Por ejemplo, en una web de viajes las tareas a realizar serían: Tarea 1: Consulta de precio de una habitación para tres personas en un hotel de la costa de Málaga. Tarea 2: Reserva de una habitación para 2 personas y 2 niños. Tarea 3: Realiza una consulta de tu compra.
La persona que ha realizado el test observará si los usuarios saben donde dirigirse, si se equivocan a la hora de navegar, si saben manejarse con el buscador, si pueden rellenar los formularios, etc.
Al ser una prueba cualitativa el moderador que está con el usuario al finalizar la prueba puede aprovechar a preguntar aspectos que ha observado durante la realización de las tareas y profundizar en ellos.
Se recomienda que la sesión con el usuario no dure más que una hora ya que cuanto más tiempo dure más puede cansarse el usuario y afectar a los resultados de la prueba.
Test de usuario en laboratorio y eyetracking El eyetracking es una técnica que complementa al test de usuario en laboratorio que aporta información sobre el comportamiento visual del usuario cuando navega.
Mediante un monitor (de aspecto normal) que tiene sensores infrarojos el eyetracking analiza el movimiento de la pupila del ojo cuando trabaja sobre una interfaz.
Los resultados ayudan a determinar:
• •
Qué es lo que más le llama la atención al usuario. Qué áreas son las más observadas lo que complementado con otras técnicas permite
investigar el por qué.
•
Cuál es el orden en el que miran los elementos.
Ejemplo de gráfica obtenida tras una prueba de eyetracking
Test de usuario en remoto El test de usuarios en remoto tiene la misma base que el test de usuario en laboratorio (estudio basado en que el usuario realice tareas concretas que se han predeterminado) pero en vez de hacerlo de manera presencial con una muestra de 8 usuarios se realiza con una muestra más amplia (50, 100, 200 o más usuarios) que participan desde su casa, su oficina o donde tengan un ordenador y conexión a internet.
Mediante un software se le presentan a los usuarios unas determinadas tareas que realizan en su contexto natural, desde su trabajo o casa y se recoge la información que permite analizar la eficacia, eficiencia y satisfacción que han tenido durante su interacción con el site al realizar dichas tareas específicas.
Las principales ventajas de esta técnica son 2:
1.
El test puede hacerse a cientos de personas, por lo que los resultados obtenidos son mucho más
representativos.
2.
Las personas pueden estar en cualquier parte (siempre que tengan conexión a internet). Si el
público de la web a estudiar es español, con estos test los usuarios del estudio podrían estar en cualquier lugar. Esta es una ventaja doblemente interesante si una marca tiene la web en diferentes idiomas, se recomienda hacer el test de usabilidad en los diferentes idiomas que tenga ya que existen diferencias culturales que pueden afectar a la experiencia en la web.
Evaluaciones heurísticas Es una evaluación en la que no se utilizan usuarios a los que se les pide que realicen acciones, en este caso es un experto en usabilidad el que lleva a cabo el estudio.
Es una revisión de usabilidad basada en principios heurísticos que están establecidos por la disciplina IPO (Interacción Persona Ordenador).
Dos o tres expertos realizan de manera independiente la revisión de la página web y posteriormente unen sus conclusiones en un documento.
Cómo ejemplo a continuación se muestra un fragmento de guía de evaluación heurística (sacado de http://www.nosolousabilidad.com/articulos/heuristica.htm):
Aspectos generales
•
¿Cuáles son los objetivos del sitio web? ¿Son concretos y bien definidos? ¿Los
contenidos y servicios que ofrece se corresponden con esos objetivos?
•
¿Tiene una URL correcta, clara y fácil de recordar? ¿Y las URL de sus páginas
internas? ¿Son claras y permanentes?
•
¿Muestra de forma precisa y completa qué contenidos o servicios ofrece
realmente el sitio web? Esto está relacionado directamente con el diseño de la página de inicio, que debe ser diferente al resto de páginas y cumplir la función de 'escaparate' del sitio.
•
¿La estructura general del sitio web está orientada al usuario? Los sitios web
deben estructurarse pensando en el usuario, sus objetivos y necesidades. No se debe calcar la estructura interna de la empresa u organización, al usuario no le interesa cómo funciona o se organiza la empresa. Lenguaje y Redacción
•
¿El sitio web habla el mismo lenguaje que sus usuarios? Se debe evitar usar un
lenguaje corporativista. Así mismo, hay que prestarle especial atención al idioma, y ofrecer versiones del sitio en diferentes idiomas cuando sea necesario.
•
¿Emplea un lenguaje claro y conciso?
•
¿Es amigable, familiar y cercano? Es decir, lo contrario a utilizar un lenguaje
imperativo, mensajes crípticos, o tratar con "desprecio" al usuario.
Tras la fase de test, si los resultados son buenos, el siguiente paso es el de programar la web, sabiendo que no vamos a encontrar problemas de usabilidad, y publicarla (lo que se suele llamar, ponerla en producción).
En este momento la actividad de los expertos en usabilidad cambia, sus preocupaciones son otras, la principal es analizar lo que sucede con usuarios que visitan la web y que tienen una verdadera motivación en ella.
Ahora son otras técnicas que nos ayudarán a seguir de cerca la web y aportarán información de mucho valor para poder hacer ajustes.
Por supuesto una gran fuente de información es la analítica web, pero además de ésta tenemos tras herramientas que debemos contemplar para saber qué está pasando en la web, sobre todo las técnicas de Voice of customer.
Voice of customer Voice of customer es un conjunto de técnicas orientadas a dar voz al usuario/cliente que visita la web de manera espontánea. A diferencia de los test anteriores, en este caso es el usuario que si tenía una verdadera motivación con la web (quería informarse de un producto, comprar, devolver, consultar un horario, etc.) el que es el protagonista del estudio. El quién es el que responde al estudio es la clave de esta técnica.
En relación a la información que se obtiene cuando se utiliza esta técnica destaca:
1.
Saber a qué vienen concretamente los usuarios a la web.
Es un aspecto que suele no ser muy analizado por los responsables de la web dando por sentando lo que los usuarios quieren de su web, pero en muchas ocasiones hay sorpresas.
2.
A raiz de esta información sobre su motivo concreto de visita se averigua cómo ha sido su
experiencia, si ha tenido problemas, donde los ha tenido (navegación, formulario…), si le ha gustado la información que ha consultado, si no le gusta el diseño, por qué no ha comprado, etc.
Los responsables de la experiencia de usuario y usabilidad de una web podrán contar con las técnicas que ya mencionamos en la fase de invetigación si necesita profundizar en más aspectos.
La web debe estar en continua revisión y mejora si quiere estar entre las elegidas por los usuarios.
Fase de medición
Voice of customer Voice of customer es un conjunto de técnicas orientadas a dar voz al usuario/cliente que visita la web de manera espontánea. A diferencia de los test anteriores, en este caso es el usuario que si tenía una verdadera motivación con la web (quería informarse de un producto, comprar, devolver, consultar un horario, etc.) el que es el protagonista del estudio.El quién es el que responde al estudio es la clave de esta técnica.En relación a la información que se obtiene cuando se utiliza esta técnica destaca:
1.
Saber a qué vienen concretamente los usuarios a la web.Es un aspecto que suele no ser muy
analizado por los responsables de la web dando por sentando lo que los usuarios quieren de su web, pero en muchas ocasiones hay sorpresas.
2.
A raiz de esta información sobre su motivo concreto de visita se averigua cómo ha sido su
experiencia, si ha tenido problemas, donde los ha tenido (navegación, formulario…), si le ha gustado la información que ha consultado, si no le gusta el diseño, por qué no ha comprado, etc. Los responsables de la experiencia de usuario y usabilidad de una web podrán contar con las técnicas que ya mencionamos en la fase de invetigación si necesita profundizar en más aspectos.La web debe estar en continua revisión y mejora si quiere estar entre las elegidas por los usuarios.
Analítica comportamiento digital Permite medir el producto digital ya que recopila datos del comportamiento del usuario cuando usa producto digital con el propósito de comprender y optimizar.
UX y usabilidad mobile
Al abordar un proyecto mobile, aplica todo aquello que se ha explicado anteriormente en relación a fases y a técnicas. Sin embargo a la hora de plantear el interfaz hay una serie elementos que si es necesario implementar de manera diferente.
Adaptándonos al dispositivo Navegar con un smartphone es una experiencia muy diferente a cuando lo hacemos en un pc. La pantalla es mucho más pequeña, no tenemos ratón o teclado físico sino que se utilizan pantallas táctiles, etc. Esto nos lleva a considerar que la manera de diseñar las webs o apps que serán usadas desde un smartphone o tablet sea distinta.
Responsive Design Desde hace ya un tiempo, a la hora de crear webs para dispositivos móviles se ha extendido el uso de Responsive Design. Este concepto significa crear un solo sitio web que se adapte automáticamente a todas las resoluciones y dispositivosreorganizando la distribución de todos sus elementos. Resposive Design es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de
las páginas web al dispositivo que se esté utilizando para visitarlas. Hoy día las páginas web se ven en multitud de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PCs, etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, sistema operativo o capacidad de memoria entre otras. Esta tecnología pretende que con un único diseño web, todo se vea correctamente en cualquier dispositivo. (Wikipedia). Y continuando con esta filosofía existe una tendencia que va un paso más allá, mobile first.
Mobile First Este concepto significa diseñar la web para móviles (pantalla pequeña) y posteriormente adaptarla a versiones para tablets y pc (pantallas grandes), obligando así a centrarse únicamente en los elementos y las acciones más importantes de un sitio web. Sería al contrario de lo que se suele hacer en las versiones responsive (primero desktop y luego adaptación a tablet y smartphone).
Usabilidad para dispositivos móviles
Son varios los asuntos que se deben tener en cuenta para crear una buena usabilidad en smartphones y tablets, a continuación los listamos:
•
Priorizar:
Leer en el móvil es incómodo y el usuario quiere buscar información con el menor esfuerzo posible, esto implica que sea necesario incluir la información más importante evitando lo que es secundario o adorno. Trabajar la versión móvil es un ejercicio de priorización.
•
Jerarquizar:
Se trata de ordenar los elementos de tal manera que lo más importante esté al comienzo de la página. El usuario hará scroll ya que es una interacción que es natural en los dispositivos móviles sin embargo lo que se ubique en la parte superior tendrá más impacto que lo que aparece en zonas intermedias o inferiores.
•
Dar espacio entre los elementos (comunicación e interacción):
En pantallas pequeñas es imprescindible que las piezas de información sean grandes y que entre los elementos haya espacio, esto ayuda a comunicar al usuario que son piezas (mensajes) diferentes. La comprensión resulta más sencilla. Además el dar espacio entre los elementos también ayuda a la interacción, esto se debe a que es más fácil seleccionar con el dedo elementos grandes que no se encuentran pegados a otros.
•
Formularios grandes:
Los elementos que forman los formularios se deben mostrar con buen tamaño y separación para que el usuario pueda apuntar con el dedo sin problemas los campos que quiera rellenar.
•
Textos legibles:
Se debe poder leer sin tener que acercarnos el móvil o hacer zoom en la pantalla táctil. Es decir, hay que mostrar un tamaño de letra adecuado, sin demasiado pequeño.
•
Diseño Vertical:
El usuario suele manipular el móvil con un solo dedo, el pulgar, así que intentemos pensar en webs de tal manera que el usuario pueda desplazarse fácilmente y con verticalidad.
•
Imágenes ligeras:
Para agilizar el tiempo de carga, las imágenes deben pesar poco y adaptarse al formato de la pantalla sin que sobre imagen, fuera de la pantalla.
•
Menú desplegable:
El espacio debe aprovecharse lo mejor posible en pantallas pequeñas y elementos como el menú
El espacio debe aprovecharse lo mejor posible en pantallas pequeñas, y elementos como el menú cuando se muestran en formato desplegable son una muy buena solución. En este sentido, el menú hamburguesa se ha convertido en un elemento muy extendido.
Cual sería el orden adecuado según la metodología de Diseño Centrado en el Usuario. Fase de medición
Fase de investigación
Fase de evaluación
Fase de concepto y diseño
Los prototipos de una web o app se realizan en la fase de: Fase de diseño
Fase de evaluación
A la hora de trabajar la usabilidad en dispositivos móviles es importante dar espacio entre los elementos que aparecen en la página para facilitar la comunicación y la interacción: Verdadero
Falso
Qué técnica de evaluación es la más importante para poder evaluar la usabilidad de cualquier producto digital Test de usabilidad en laboratorio
Encuestas online
Focus groups
Verdadero o falso. Es imprescindible definir los objetivos que se quieren conseguir cuando se va a diseñar un diseño digital.
Verdadero
Falso
Para realizar fase correcta de investigación y toma de requisitos debemos contemplar: Opción múltiple. Los objetivos de negocio del proyecto, qué se quiere conseguir
El análisis de los usuarios, como son, qué les gusta, que echan en falta, etc.
El color que tendrá la web
Recursos utilizados RECURSOS UTILIZADOS
Sites:
•
www.useit.com
• • •
www.nosolousabilidad.com
• • • •
Jakob Nielsen y Hoa Loranger- ‘Priorizando la usabilidad web ‘
www.sidar.org www.usability.org
Libros:
Jakob Nielsen – ‘Usabilidad. Diseño de sitios web’ Steve Krugg – ‘No me hagas pensar’
Jesse James Garrett - User-Centered design for the web and beyond
• Rex Hartson y Ardha Pyla - UX Book
Director de contenidos: Sara López. La documentación que a continuación se muestra tiene cómo objetivo:
•
Explicar qué es usabilidad, para qué sirve y por qué debe tenerse en cuenta en
los productos digitales.
•
Explicar y describir la metodología más importante a la hora de
diseñar productos que sean usables y atractivos para los usuarios.
•
Describir las técnicas que pueden emplearse durante el proceso de creación:
investigación con usuarios (entrevistas en profundidad, encuestas online, focus groups, etc), diseño de interfaces (prototipado, card sorting, tree testing, etc) y testing con usuarios (test en laboratorio, test en remoto, eyetracking, etc.)
Dos conceptos clave para el éxito de un producto digital: La experiencia de usuario y la usabilidad • Dos conceptos clave para el éxito de un producto digital: la experiencia de usuario y la usabilidad.
La experiencia de usuario es un aspecto siempre presente en cualquier web, producto o dispositivo digital ya que se referiere a la menera en la que se siente y maneja. El concepto UX (experiencia de usuario) se ha convertido en imprescindible si se quiere conseguir tener un producto exitoso. Vamos a describir en que consiste este concepto y como se puede conseguir que un producto digital tenga un buena experiencia de usuario.
Definición
UX, es el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo. No sólo depende de los factores relativos al diseño sino además de aspectos relativos a las emociones, sentimientos, construcción y transmisión de la marca, etc. UX se preocupa de que toda la relación entre la persona y el producto digital sea positiva, esto implica pensar en:
• • • • • •
Qué necesidad va a cubrir el producto digital al usuario. Qué funcionalidad o funcionalidades son las adecuadas para cubrir dicha necesidad. Qué valores debe transmitir. Cómo va a navegar e interactuar el usuario. Qué información es adecuado mostrarle. Qué tono y sensaciones debe transmitir (lenguaje, diseño visual).
Para alcanzar una buena experiencia de usuario es necesario que la experiencia sea:
• •
Útil: El producto debe ser útil. Usable: El producto debe ser fácil de usar (buena navegación, adaptada a la lógica y al
conocimiento del usuario, etc.)
•
Deseable: El producto debe resultar agradable de usar y debe aportar un valor.
La definición usabilidad Una de las áreas de la experiencia de usuario más amplia es la usabilidad, aquella que se preocupa de la facilidad de usar el producto digital. De una forma coloquial, podemos decir que la usabilidad es la capacidad de “usar” un producto digital (puedes ser una web, una aplicación de móvil, una aplicación para un ipad o tablet, etc) fácilmente y de manera intuitiva. La Organización Internacional para la Estandarización (ISO) ofrece una definición de usabilidad que es más completa y precisa y sobre la que vamos a trabajar, la definición dice así: ISO/IEC 9241: "Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico". Veamos por partes esta definición para entenderla mejor. En la primera parte de la descripción se hablan de tres aspectos: Eficacia:
Con este concepto la definición se refiere a si la web, app o producto digital permite al usuario llevar a cabo la acción que se ha propuesto en una web. Por ejemplo: Consular el horario de un tren de Madrid a Valencia en la página de Renfe. La web es eficaz si consigue que los usuarios se informan sobre ese horario. Si un usuario quiere comprar una entrada de cine en una web o a través de una app y lo hace, estaría siendo eficaz. Saber si un producto digital es eficaz puede averiguarse, se debe observar si los usuarios son capaces de hacer las acciones que se han propuesto. Por este motivo podemos decir que la eficacia si se puede medir, se puede saber si los usuarios hacen lo que se proponen o no (no son capaces porque tienen problemas de navegación, comprensión, interacción, etc.). Eficiencia: Es el esfuerzo empleado para llevar a cabo la acción que el usuario se ha propuesto. Por ejemplo: siguiendo con el ejemplo de la persona que quería un horario de tren de Madrid a Valencia, la eficiencia sería el tiempo que ha empleado en llegar a la información, el número de veces que se ha equivocado, el número de clics que ha realizado, etc. Todas aquellas medidas que nos ayuden a saber cuánto esfuerzo le ha supuesto encontrar la información, son la eficiencia. Es posible que el usuario llegue a la información, pero debemos averiguar mediante estas métricas si el esfuerzo ha sido demasiado alto. La eficiencia es un atributo que también es objetivo ya que puede medirse el tiempo que una persona tarda en encontrar una información o cuantas veces se equivoca hasta que llega a su objetivo. Satisfacción: Es la actitud/percepción del usuario tras el uso de la web, aplicación, etc. Se trata, pues, de un factor subjetivo ya que no se puede medir objetivamente lo que siente un usuario. La mejor manera de medir la satisfacción es a través de un cuestionario y una breve entrevista una vez el usuario ha finalizado la navegación por la web. Se suelen hacer preguntas como: ‘Del 1 al 10 como valoras tu paso por esta web’. ¿Qué es lo que más te ha gustado? ¿Y qué es lo que menos?. La definición también hablaba que estos tres atributos deben contemplarse en relación a:
•
Un usuario concreto que es el que utilizará la web. Cuanto mejor se defina y conozca al
usuario más usable podremos hacer una web. Deberá tenerse en cuenta su nivel de internet, la edad, el sexo, etc.
,
•
, Un objetivo concreto. Es imprescindible saber cuáles son las acciones que va a querer hacer
el usuario en el producto que se diseña.
•
Un contexto de uso concreto. Como y de qué manera va a hacer uso el usuario del producto
digital.
Your heading text goes here Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
La importancia de UX
Varias son las ventajas de tener en cuenta la usabilidad en un proyecto:
•
Mejora la conversión: una de las consecuencias que más directamente se observan cuando
un producto digital tiene una UX positiva es que convierte más. Es muy poco común que no exista a la hora de hacer un proyecto digital un equipo de UX que defina la experiencia.
•
Reduce los costes a la hora de crear productos digitales: los costes y tiempos de desarrollo
totales pueden ser reducidos evitando hacer varios diseños y reduciendo el número de cambios posteriores.
•
Reduce los costes de mantenimiento: los productos digitales que son fáciles de usar
requieren menos soporte para el usuario y menos mantenimiento.
•
Mejora la fidelización de los clientes: gracias a que la experiencia de usuario se crean
productos de mayor calidad de uso, esto los hace más competitivos en un mercado lleno de competencia.
UX y ROI
Existe una directa y clara relación entre la usabilidad y el aumento en el retorno de inversión, o ROI. Grandes marcas abiertamente apuestan por la usabilidad como manera de obtener mayor partido a sus inversiones online, tales como intranets, tiendas online, extranets y demás entornos digitales.
Existen numerosos ejemplos de publicaciones y estudios realizados que muestran el ROI de proyectos digitales. A continuación incluimos un párrafo extraído de Usabilityfirst.com en el que se incluyen casos de éxito reales en los que las propias marcas han hecho públicos:
•
Foraker redesigned and redeveloped a community platform for nonprofit organization
Breastcancer.org, resulting in a 117% increase in traffic (visitors), a 41% increase in new memberships, a 53% reduction in time taken to register, and a 69% reduction in monthly help desk costs. This led to tens of thousands of dollars in savings for the organization and opened up several new opportunities for outreach and the funding of operating expenses. For more information, read the case study (PDF, 312KB), or contact Foraker.
•
IBM’s employees almost never accessed the company’s intranet because it was overly
complex and complicated, making it nearly impossible to find needed information. Now IBM has consolidated over “8,000 intranet sites, 680 ‘major’ sites, 11 million web pages, and 5,600 domain names,” resulting in IBM Dynamic Workplaces, which employees rate as the “number one source of information within the company.” For the whole story, read Intranetjournal.com’s article about IBM’s streamlined intranet success story.
•
The Georgia Aquarium sells an average of 70% of all tickets online using a system
customized from off-the-shelf software. The previous high for online ticket sales at aquariums and zoos across the United States was 8 – 10%. Georgia Aquarium recognized the need to control lines, historic at such venues, and wanted entice visitors with an easy-to-use online system. Because of their foresight, the aquarium has seen nearly 4 million visitors in 21 months. Dennis Kelly, president and CEO of Zoo Atlanta, says, “…the Georgia Aquarium is at the forefront of utilizing the Web to present a very engaging, customer-friendly front door to their facility.” Read the article by Computer World about Georgia Aquarium’s online ticket success here.
Existen varias calculadoras para calcular el ROI en proyectos UX. https://www.justinmind.com/blog/how-to-calculate-the-roi-of-your-ux-activities/ https://www.uxmatters.com/mt/archives/2012/07/how-to-calculate-the-roi-of-ux-using-metrics.php Para ampliar:
• •
Un video explicativo sobre este asunto:The ROI of UXhttps://youtu.be/O94kYyzqvTc Literatura más detallada del tema:Improve Customer Experience with UX Investments that
Increase
ROIhttps://www.interaction-design.org/literature/article/improve-customer-experience-
with-ux-investments-that-increase-roi
Principios de usabilidad
Para llevar a cabo un producto digital con buena usabilidad debemos tener en cuenta una serie de principios que tratan distintos aspectos. A continuación describimos estos principios son:
Claridad en los objetivos del site o app.
El producto digital debe comunicar de manera clara y rápida su propósito. Es común encontrar webs y apps en las que cuesta trabajo saber exactamente qué ofrecen. Es recomendable ser concisos y directos en lo que la web ofrece al usuario, no debemos además olvidar que el comportamiento de los usuarios en internet tiende a ser poco paciente y busca rapidez.
Un buen ejemplo de este principio: Ofo que explica qué es y que ofrece nada más acceder a su home.
Adecuación al mundo y la lógica de los usuarios. La página web o app debe estar pensada en el tipo de usuario que va a utilizarla. Esto implica que la manera de organizar la información, el tipo de lenguaje elegido y la manera de realizar las cosas deben estar pensadas para esos usuarios. Frecuentemente utilizamos productos digitales en las que encontramos términos que no entendemos y no nos sentimos cómodos, esto sucede porque se han utilizado conceptos que seguramente para las personas que han realizado la web son claros pero que para el visitante son extraños.
Un buen ejemplo de este principio: esta web en su menú de navegación no solo pone un nombre cómo categoría sino que indica los meses y/o años para adaptarse al usuario, el cual no tiene por qué conocer la nomenclatura.
Orientación. Las páginas web y apps están hechas para navegar por ellas, ir de una sección a otra, y luego ir a otra, etc. Este comportamiento hace que sea necesario tener indicadores que ayuden al usuario a estar orientado.
Hay tres aspectos a tener en cuenta en relación a este tema: Las páginas web están hechas para navegar por ellas, ir de una sección a otra, y luego ir a otra, etc. Este comportamiento hace que sea necesario tener indicadores que ayuden al usuario a estar orientado. Hay tres aspectos a tener en cuenta en relación a este tema:
•
La página siempre debe incluir de manera visible el título del sitio de la página en la que se
encuentra. El título debe ser visible y además tener un título descriptivo.
•
Si nos encontramos dentro de una sección, dicha sección debe estar diferenciada visualmente
del resto de secciones.
•
Si la web es muy extensa y tiene muchos contenidos es conveniente incluir el rastro de migas.
Inicio > Sección 1 > Subsección 1 > Nombre de la página
Un buen ejemplo de este principio: Repsol utiliza correctamente los menús para orientar al usuario y dejarle libertad para moverse por la web.
Retroalimentación (feedback). Cada acción que el usuario realice debe tener una clara reacción y debe quedar perfectamente informado Un buen ejemplo de este principio: En Gmail, cuando el usuario activa el mail automático por encontrarse fuera por vacaciones, el interfaz le muestra el aviso en la parte superior todo el periodo en el que se encuentra activo dicho periodo.
Consistencia y Estándares. Es recomendable aprovechar las convenciones establecidas en internet. En relación a la consistencia el principio se refiere a, por ejemplo, no utilizar dos rótulos distintos para referirse a un mismo contenido, o no usar estilos diferentes dentro de un mismo sitio. Además, el sitio web debe seguir estándares o convenciones de diseño ampliaente aceptados. Cuanto más se parezca un diseño y su funcionamiento al resto de sitios web, más familiar y fácil de usar resultará para el usuario. Un buen ejemplo de este principio: Gmail también realiza una buena aplicación al usar los elementos siempre de manera coherente y respetando las convenciones.
Prevención de errores. El diseño de un sitio debe prevenir los errores de los usuarios antes de que se cometan. Un buen ejemplo de este principio: en este caso se muestran ayudas para asegurar al usuario que no se equivocará introduciendo la contraseña.
Flexibilidad y eficiencia de uso. Las páginas webs o apps debe facilitar las acciones que va a realizar el usuario. El sitio debe ser fácil de usar para usuarios novatos, pero también proporcionar atajos o aceleradores para usuarios avanzados. Un buen ejemplo de este principio: Airbnb muestra una home distinta según si la vista un usuario nuevo o un usuario registrado haciendo que la experiencia sea mejor para cada uno de ellos.
Eficacia de los mensajes de error. Es muy importante comunicar al usuario de manera clara y sencilla si ha habido algún error. Además, se debe permitir al usuario solucionar el error. por ejemplo, cuando un usuario introduce una consulta en un buscador y no obtiene ningún resultado, se debe informar al usuario sobre cómo solucionar el problema, por ejemplo, con mensajes del tipo "introduzca algún sinónimo" o "quiso Ud. decir...". Es tan importante comunicar bien el error como dar una vía para poder solucionarlo. Un buen ejemplo de este principio: explicar qué esta pasando y ofrecer una alternativa para solucionarlo.
Diseño no sobrecargado. Los productos digitales que tienen un diseño con muchos elementos producen el efecto negativo, ningún elemento llama la atención. Cada pedazo de información extra compite con la importante y disminuye su visibilidad. Un buen ejemplo de este principio: Incluir la información adecuada hace que tome mucho más protagonismo.
El objetivo que tiene un usuario cuando una web o app es un aspecto muy importante para la experiencia de usuario. Si
No
Depende
Selecciona los 3 atributos que debe cumplir un producto digital para que sea usable según la definición de usabilidad Opción múltiple. Eficiente: el usuario debe poder navegar sin emplear a penas esfuerzo para conseguir sus objetivos
Dinámica: la web debe tener contenidos que vayan cambiando
Eficaz: el usuario debe poder conseguir el objetivo que se había marcado al acceder a la web
Satisfactoria: el usuario debe terminar de realizar su objetivo quedando satisfecho
Divertida: el usuario debe sentir que la web es amena
Verdadero o falso. Una app o página web debe estar pensada en el tipo de usuario que va a usarla. Esto implica que la manera de organizar la información, el tipo de lenguaje elegido y la manera de realizar las cosas deben estar pensadas para esos usuario. Verdadero
Falso
El ROI en proyectos de UX no existe. Falso
Verdadero
Como conseguir páginas web exitosas (Diseño centrado en el usuario) Cómo conseguir productos digitales exitosos: diseño centrado en el usuario
Los usuarios a tienen a su alcance miles de apps y webs a las que acceder y además muy rápidamente. La competencia es tan alta que para tener éxito hay que ofrecer un producto digital con una gran experiencia de usuario. No es fácil crear una experiencia que enamore a los usuarios pero se puede conseguir si se construye haciendo que el centro del diseño sea la persona que va a usar ese producto digital. La manera de crear una en la que el centro es el usuario se llama: Diseño centrado en el usuario (User Centered Design). Es una filosofía de diseño que tiene por objetivo la creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo de su parte. Toma forma como un proceso en el que se utilizan una serie de técnicas multidisciplinares y donde cada decisión tomada debe estar basada en las necesidades, objetivos, expectativas, motivaciones de los usuarios. Las fases que tiene esta metodología son tres:
•
Investigación: Conocer a fondo a los usuarios finales, normalmente usando investigación
cualitativa o investigación cuantitativa. Recopilar y entender los objetivos de negocio del proyecto.
•
Concepto y diseño: Diseñar un producto que resuelva sus necesidades y se ajuste a sus
capacidades, expectativas y motivaciones
• • •
Evaluación: Poner a prueba lo diseñado realizando test de usuario Desarrollar: Crear técnicamente el producto. Medir: acompañar al producto a lo largo de su vida útil para ir mejorándolo.
Veamos cada una de las tres fases en detalle.
Fase de investigación
El comienzo de todo proyecto debe sentar las bases sobre las que se va a construir, es muy importante tener los objetivos del proyecto bien definidos. Para realizar correctamente las bases se deben tener en cuenta tres aspectos: Los objetivos de negocio: Es el primero de los puntos a tratar, debemos tratar lo que se quiere conseguir con el proyecto. En muchas ocasiones los proyectos fracasan porque no hay una buena definición de objetivos a conseguir.
Debemos conseguir un listado con los objetivos que se consideran prioritarios y los que se consideran secundarios para el negocio. Por ejemplo:
Objetivos principales:
• • •
Generar leads Vender más un producto Comunicar un nuevo producto
Objetivos secundarios:
• •
Aumento de suscripciones a newsletter Aumento de visitas en el blog
La mejor manera de proceder en este punto es realizar con el equipo que dirige el proyecto una reunión en la que transmitan sus necesidades y objetivos y toda esta información detallarla en un documento por escrito. El proyecto debe vertebrarse en función a esta información por tanto hay que dedicarle tiempo a entender perfectamente lo que se quiere.
Es muy interesante conocer cómo trata la competencia los objetivos que vamos a trabajar en el proyecto para conocer sus puntos fuertes y débiles. Por este motivo es recomendable realizar un estudio benchmarking.
Existen estudios de competencia en los que se observa cómo los usuarios navegan por la web de la competencia para detectar cuales son sus puntos fuertes y débiles. Es especialmente útil para saber cómo posicionar ciertos aspectos de tu web.
Los usuarios: La otra parte imprescindible a tratar son los usuarios, las personas que van a utilizar el producto. Cuanto mejor conozcamos cómo son, qué les motiva, que no les gusta mejor podremos diseñar para que se sientan bien en nuestra página. Para ello es imprescindible realizar una investigación que permita acercarnos a ellos, conocer en profundidad. Existen multitud de técnicas que nos permiten obtener mucha información: aproximaciones cualitativas, aproximaciones cuantitativas, aquellas que permiten el estudio del comportamiento y aquellas que permiten el estudio de la actitud de las personas.
Algunas de las técnicas más usadas:
• • • • • • • • • •
Entrevistas Técnica Persona Encuestas online Focus groups Estudio contextual Diarios User journey o customer journey Benchmark Analítica web Co-creación
Uno de los errores habituales en el diseño y rediseño de productos digitales es empezar el proyecto sin haber realizado una investigación con usuarios previa. Suele pensarse que no es necesario realizar esta tarea, y ese es un gran problema. Es necesario conocer en profundidad a al usuario y la necesidad que se va a cubrir porque será la manera de crear una experiencia que realmente sea satisfactoria. No es necesario que un mismo proyecto realice todas las técnicas de investigación, en función del proyecto será recomendable usar unas u otras. Por último, antes terminar esta primera fase, es recomendable crear un documento para finalizar esta fase que incluya las conclusiones de ambas partes (negocio y usuarios). Las conclusiones obtenidas en esta fase serán las que definan todo el proyecto.
las que definan todo el proyecto.
Fase de concepto y diseño
En esta fase se diseña el producto que resuelve las necesidades que se han definido en la fase anterior (objetivos de negocio) y que además debe ajustarse a las capacidades, expectativas y motivaciones de los usuarios. Esta fase consta de a su vez de 4 subfases: a. Concepto b. Arquitectura de información
c. Diseño de interfaz d. Diseño visual y creatividad
a. Concepto. Para crear un producto digital es necesario definirlo, para ello lo primero es poner en orden la información que se tiene en relación a: objetivos de negocio, debilidades y fortalezas, definición del usuario, necesidad del usuario que se va a cubrir, cómo es la competencia y cómo es la marca.
Con la información bien planteada se debe comenzar a dar forma al producto respondiendo a las siguientes cuestiones:
• • • •
Cómo debería ser la experiencia. Qué acciones y pasos vamos a realizar para conseguirlo. Qué funcionalidades debería tener el producto o servicio. Qué se consideraría éxito
Esta es una de las partes más críticas de la construcción del producto, no haber realizado correctamente la fase de investigación o precipitarse en la definición podría llevar a plantear incorrectamente el producto digital.
b. Arquitectura de información Una vez se tiene el concepto comienza la labor de la estructuración y la navegación. El objetivo de esta fase es organizar la información que vamos utilizar en el producto digital para que el usuario pueda manejarla y navegarla de manera que pueda satisfacer sus necesidades. La arquitectura de información define la estructura del producto digital: secciones, funcionalidades y sistemas de navegación. En esta subfase no se tiene en cuenta el aspecto gráfico (imágenes, colores, logos, etc.), sólo se trabaja con la información. Las labores que deben realizarse son:
• • • • •
Estructurar la información (número de secciones, agrupaciones de información, etc.). Diseñar la manera en la que va a poderse acceder a la información Elegir el nombre de las secciones de información Gestionar la información. Diseñar buscadores
La manera de trabajar con la información es mediante diagramas como el que a continuación se muestra:
Resulta de gran importancia etiquetar o nombrar correctamente las secciones o grupos de información que hayamos creado. Puede que un nombre poco adecuado en una sección o categoría provoque un problema serio. Crear una buena arquitectura de información es uno de los puntos más importantes de un producto digital. Tiene la complejidad de tener que responder a los objetivos de negocio y comunicación que se hayan marcado y a las necesidades y gustos de los usuarios. En esta fase de utilizan algunas técnicas con usuarios que ayudan a construir arquitecturas intuitivas y sencillas para los usuarios. Las 2 técnicas más impornates de esa fase son: Card sorting y Tree testing.
c. Diseño de interfaz En esta subfase se diseñan las pantallas (el interfaz) del producto digital presentando la información de manera que facilite el entendimiento. Es decir, con la estructura ya definida ahora toca diseñar las pantallas para mostrar el contenido y los usuarios puedan interactuar con él. Vamos a empezar bocetando cada una de las páginas del producto digital. Esta manera de empezar realizando bocetos se llama prototipado.
• •
Los prototipos representan, organizan y jerarquizan la información de las páginas. Se define donde se colocará la navegación, los diferentes bloques de información, las
llamadas a la acción, etc.
•
Deben ser sencillos para no perder la rapidez.
Ventajas de realizar prototipos:
• • • • • •
No se necesita mucho tiempo para su elaboración y edición/corrección Muestran cómo funcionará la aplicación, antes de que se haya desarrollado Permite asegurar la calidad y usabilidad en una etapa temprana Comparación de ideas y propuestas Permite hacer test Los tiempos de desarrollo se hacen mucho más precisos ya que se define con detalle lo
que será el nuevo interfaz. El equipo de desarrollo puede ir mucho más rápido.
Ejemplo de un prototipo:
A la hora de crear el interfaz, en el caso de webs, se debe contemplar cómo los contenidos serán vistos en los dos dispositivos principales: escritorio (desktop) y móvil. A este ejercicio se le llama Responsive Desing, se trata de adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizar y cuando se diseña se debe tener en cuenta. Se comienza diseñando para versión escritorio pero se piensa para que luego se vea correctamente en un móvil. Actualmente el uso del móvil es tan frecuente que el orden es distinto, se comienza a diseñar para el dispositivo móvil y se adapta en un segundo paso para el escritorio, lo que se denomina Mobile First.
d. Diseño gráfico
Una vez hemos hecho las páginas del sitio con prototipos es el momento de aplicar la capa gráfica. Los prototipos indican al equipo de diseño cuales son las prioridades de comunicación, cual es la jerarquía entre los elementos que hay en una página, etc.
El diseño terminará de dar a la nueva página web la parte más emocional, se trabajarán los colores, las texturas, las imágenes. Todos tiene que estar en consonancia para que el resultado sea muy bueno.
Fase de evaluación
Una vez la web ya está diseñada es el momento de comprobar el resultado y para ello se utiliza a potenciales usuarios, ellos probarán la web. Es importante destacar que las pruebas se realizan sobre diseños, no sobre la web una vez ya está programada. Una de las ventajas más interesantes de esta metodología es que realizando los test en este momento (antes de desarrollar) si se encontraran problemas, la capacidad de rectificar supondría muy poco tiempo, y por tanto, poco presupuesto.
Por tanto, el nuevo web debe probarse y si los resultados indican que hay cosas que no funcionan deben cambiarse y volver a probar con usuarios hasta que el resultado sea lo más óptimo posible.
Para llevar a cabo dichas evaluaciones y testeos puede realizarse varios tipos de técnicas:
Test de usuario en laboratorio Es una prueba cualitativa que se basa en la observación y análisis de cómo un grupo de usuarios reales utiliza la web. Es la prueba más importante para evaluar la usabilidad de cualquier producto digital.
Cómo se realiza: La muestra a realizar los test puede ir de los 5 a los 10 participantes. Hay un excelente artículo sobre cuantos participantes
utilizar
para
realizar
los
test
de
usuarios
en
la
página
de
Jacob
Nielsen
(http://www.useit.com/alertbox/20000319.html).
Es importante que los participantes se ajusten al perfil de los visitantes de la web. Este puede ser un punto problemático si los usuarios no son realmente el público objetivo.
De uno en uno, los participantes van a realizar en la nueva web una serie de tareas que anteriormente se han definido. Las tareas las define la persona que va a realizar el test. Suelen elegirse las acciones más importantes que un usuario debe hacer en la web.
Por ejemplo, en una web de viajes las tareas a realizar serían: Tarea 1: Consulta de precio de una habitación para tres personas en un hotel de la costa de Málaga. Tarea 2: Reserva de una habitación para 2 personas y 2 niños. Tarea 3: Realiza una consulta de tu compra.
La persona que ha realizado el test observará si los usuarios saben donde dirigirse, si se equivocan a la hora de navegar, si saben manejarse con el buscador, si pueden rellenar los formularios, etc.
Al ser una prueba cualitativa el moderador que está con el usuario al finalizar la prueba puede aprovechar a preguntar aspectos que ha observado durante la realización de las tareas y profundizar en ellos.
Se recomienda que la sesión con el usuario no dure más que una hora ya que cuanto más tiempo dure más puede cansarse el usuario y afectar a los resultados de la prueba.
Test de usuario en laboratorio y eyetracking El eyetracking es una técnica que complementa al test de usuario en laboratorio que aporta información sobre el comportamiento visual del usuario cuando navega.
Mediante un monitor (de aspecto normal) que tiene sensores infrarojos el eyetracking analiza el movimiento de la pupila del ojo cuando trabaja sobre una interfaz.
Los resultados ayudan a determinar:
• •
Qué es lo que más le llama la atención al usuario. Qué áreas son las más observadas lo que complementado con otras técnicas permite
investigar el por qué.
•
Cuál es el orden en el que miran los elementos.
Ejemplo de gráfica obtenida tras una prueba de eyetracking
Test de usuario en remoto El test de usuarios en remoto tiene la misma base que el test de usuario en laboratorio (estudio basado en que el usuario realice tareas concretas que se han predeterminado) pero en vez de hacerlo de manera presencial con una muestra de 8 usuarios se realiza con una muestra más amplia (50, 100, 200 o más usuarios) que participan desde su casa, su oficina o donde tengan un ordenador y conexión a internet.
Mediante un software se le presentan a los usuarios unas determinadas tareas que realizan en su contexto natural, desde su trabajo o casa y se recoge la información que permite analizar la eficacia, eficiencia y satisfacción que han tenido durante su interacción con el site al realizar dichas tareas específicas.
Las principales ventajas de esta técnica son 2:
1.
El test puede hacerse a cientos de personas, por lo que los resultados obtenidos son mucho más
representativos.
2.
Las personas pueden estar en cualquier parte (siempre que tengan conexión a internet). Si el
público de la web a estudiar es español, con estos test los usuarios del estudio podrían estar en cualquier lugar. Esta es una ventaja doblemente interesante si una marca tiene la web en diferentes idiomas, se recomienda hacer el test de usabilidad en los diferentes idiomas que tenga ya que existen diferencias culturales que pueden afectar a la experiencia en la web.
Evaluaciones heurísticas Es una evaluación en la que no se utilizan usuarios a los que se les pide que realicen acciones, en este caso es un experto en usabilidad el que lleva a cabo el estudio.
Es una revisión de usabilidad basada en principios heurísticos que están establecidos por la disciplina IPO (Interacción Persona Ordenador).
Dos o tres expertos realizan de manera independiente la revisión de la página web y posteriormente unen sus conclusiones en un documento.
Cómo ejemplo a continuación se muestra un fragmento de guía de evaluación heurística (sacado de http://www.nosolousabilidad.com/articulos/heuristica.htm):
Aspectos generales
•
¿Cuáles son los objetivos del sitio web? ¿Son concretos y bien definidos? ¿Los
contenidos y servicios que ofrece se corresponden con esos objetivos?
•
¿Tiene una URL correcta, clara y fácil de recordar? ¿Y las URL de sus páginas
internas? ¿Son claras y permanentes?
•
¿Muestra de forma precisa y completa qué contenidos o servicios ofrece
realmente el sitio web? Esto está relacionado directamente con el diseño de la página de inicio, que debe ser diferente al resto de páginas y cumplir la función de 'escaparate' del sitio.
•
¿La estructura general del sitio web está orientada al usuario? Los sitios web
deben estructurarse pensando en el usuario, sus objetivos y necesidades. No se debe calcar la estructura interna de la empresa u organización, al usuario no le interesa cómo funciona o se organiza la empresa. Lenguaje y Redacción
•
¿El sitio web habla el mismo lenguaje que sus usuarios? Se debe evitar usar un
lenguaje corporativista. Así mismo, hay que prestarle especial atención al idioma, y ofrecer versiones del sitio en diferentes idiomas cuando sea necesario.
•
¿Emplea un lenguaje claro y conciso?
•
¿Es amigable, familiar y cercano? Es decir, lo contrario a utilizar un lenguaje
imperativo, mensajes crípticos, o tratar con "desprecio" al usuario.
Tras la fase de test, si los resultados son buenos, el siguiente paso es el de programar la web, sabiendo que no vamos a encontrar problemas de usabilidad, y publicarla (lo que se suele llamar, ponerla en producción).
En este momento la actividad de los expertos en usabilidad cambia, sus preocupaciones son otras, la principal es analizar lo que sucede con usuarios que visitan la web y que tienen una verdadera motivación en ella.
Ahora son otras técnicas que nos ayudarán a seguir de cerca la web y aportarán información de mucho valor para poder hacer ajustes.
Por supuesto una gran fuente de información es la analítica web, pero además de ésta tenemos tras herramientas que debemos contemplar para saber qué está pasando en la web, sobre todo las técnicas de Voice of customer.
Voice of customer Voice of customer es un conjunto de técnicas orientadas a dar voz al usuario/cliente que visita la web de manera espontánea. A diferencia de los test anteriores, en este caso es el usuario que si tenía una verdadera motivación con la web (quería informarse de un producto, comprar, devolver, consultar un horario, etc.) el que es el protagonista del estudio. El quién es el que responde al estudio es la clave de esta técnica.
En relación a la información que se obtiene cuando se utiliza esta técnica destaca:
1.
Saber a qué vienen concretamente los usuarios a la web.
Es un aspecto que suele no ser muy analizado por los responsables de la web dando por sentando lo que los usuarios quieren de su web, pero en muchas ocasiones hay sorpresas.
2.
A raiz de esta información sobre su motivo concreto de visita se averigua cómo ha sido su
experiencia, si ha tenido problemas, donde los ha tenido (navegación, formulario…), si le ha gustado la información que ha consultado, si no le gusta el diseño, por qué no ha comprado, etc.
Los responsables de la experiencia de usuario y usabilidad de una web podrán contar con las técnicas que ya mencionamos en la fase de invetigación si necesita profundizar en más aspectos.
La web debe estar en continua revisión y mejora si quiere estar entre las elegidas por los usuarios.
Fase de medición
Voice of customer Voice of customer es un conjunto de técnicas orientadas a dar voz al usuario/cliente que visita la web de manera espontánea. A diferencia de los test anteriores, en este caso es el usuario que si tenía una verdadera motivación con la web (quería informarse de un producto, comprar, devolver, consultar un horario, etc.) el que es el protagonista del estudio.El quién es el que responde al estudio es la clave de esta técnica.En relación a la información que se obtiene cuando se utiliza esta técnica destaca:
1.
Saber a qué vienen concretamente los usuarios a la web.Es un aspecto que suele no ser muy
analizado por los responsables de la web dando por sentando lo que los usuarios quieren de su web, pero en muchas ocasiones hay sorpresas.
2.
A raiz de esta información sobre su motivo concreto de visita se averigua cómo ha sido su
experiencia, si ha tenido problemas, donde los ha tenido (navegación, formulario…), si le ha gustado la información que ha consultado, si no le gusta el diseño, por qué no ha comprado, etc. Los responsables de la experiencia de usuario y usabilidad de una web podrán contar con las técnicas que ya mencionamos en la fase de invetigación si necesita profundizar en más aspectos.La web debe estar en continua revisión y mejora si quiere estar entre las elegidas por los usuarios.
Analítica comportamiento digital Permite medir el producto digital ya que recopila datos del comportamiento del usuario cuando usa producto digital con el propósito de comprender y optimizar.
UX y usabilidad mobile
Al abordar un proyecto mobile, aplica todo aquello que se ha explicado anteriormente en relación a fases y a técnicas. Sin embargo a la hora de plantear el interfaz hay una serie elementos que si es necesario implementar de manera diferente.
Adaptándonos al dispositivo Navegar con un smartphone es una experiencia muy diferente a cuando lo hacemos en un pc. La pantalla es mucho más pequeña, no tenemos ratón o teclado físico sino que se utilizan pantallas táctiles, etc. Esto nos lleva a considerar que la manera de diseñar las webs o apps que serán usadas desde un smartphone o tablet sea distinta.
Responsive Design Desde hace ya un tiempo, a la hora de crear webs para dispositivos móviles se ha extendido el uso de Responsive Design. Este concepto significa crear un solo sitio web que se adapte automáticamente a todas las resoluciones y dispositivosreorganizando la distribución de todos sus elementos. Resposive Design es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de
las páginas web al dispositivo que se esté utilizando para visitarlas. Hoy día las páginas web se ven en multitud de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PCs, etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, sistema operativo o capacidad de memoria entre otras. Esta tecnología pretende que con un único diseño web, todo se vea correctamente en cualquier dispositivo. (Wikipedia). Y continuando con esta filosofía existe una tendencia que va un paso más allá, mobile first.
Mobile First Este concepto significa diseñar la web para móviles (pantalla pequeña) y posteriormente adaptarla a versiones para tablets y pc (pantallas grandes), obligando así a centrarse únicamente en los elementos y las acciones más importantes de un sitio web. Sería al contrario de lo que se suele hacer en las versiones responsive (primero desktop y luego adaptación a tablet y smartphone).
Usabilidad para dispositivos móviles
Son varios los asuntos que se deben tener en cuenta para crear una buena usabilidad en smartphones y tablets, a continuación los listamos:
•
Priorizar:
Leer en el móvil es incómodo y el usuario quiere buscar información con el menor esfuerzo posible, esto implica que sea necesario incluir la información más importante evitando lo que es secundario o adorno. Trabajar la versión móvil es un ejercicio de priorización.
•
Jerarquizar:
Se trata de ordenar los elementos de tal manera que lo más importante esté al comienzo de la página. El usuario hará scroll ya que es una interacción que es natural en los dispositivos móviles sin embargo lo que se ubique en la parte superior tendrá más impacto que lo que aparece en zonas intermedias o inferiores.
•
Dar espacio entre los elementos (comunicación e interacción):
En pantallas pequeñas es imprescindible que las piezas de información sean grandes y que entre los elementos haya espacio, esto ayuda a comunicar al usuario que son piezas (mensajes) diferentes. La comprensión resulta más sencilla. Además el dar espacio entre los elementos también ayuda a la interacción, esto se debe a que es más fácil seleccionar con el dedo elementos grandes que no se encuentran pegados a otros.
•
Formularios grandes:
Los elementos que forman los formularios se deben mostrar con buen tamaño y separación para que el usuario pueda apuntar con el dedo sin problemas los campos que quiera rellenar.
•
Textos legibles:
Se debe poder leer sin tener que acercarnos el móvil o hacer zoom en la pantalla táctil. Es decir, hay que mostrar un tamaño de letra adecuado, sin demasiado pequeño.
•
Diseño Vertical:
El usuario suele manipular el móvil con un solo dedo, el pulgar, así que intentemos pensar en webs de tal manera que el usuario pueda desplazarse fácilmente y con verticalidad.
•
Imágenes ligeras:
Para agilizar el tiempo de carga, las imágenes deben pesar poco y adaptarse al formato de la pantalla sin que sobre imagen, fuera de la pantalla.
•
Menú desplegable:
El espacio debe aprovecharse lo mejor posible en pantallas pequeñas y elementos como el menú
El espacio debe aprovecharse lo mejor posible en pantallas pequeñas, y elementos como el menú cuando se muestran en formato desplegable son una muy buena solución. En este sentido, el menú hamburguesa se ha convertido en un elemento muy extendido.
Cual sería el orden adecuado según la metodología de Diseño Centrado en el Usuario. Fase de medición
Fase de investigación
Fase de evaluación
Fase de concepto y diseño
Los prototipos de una web o app se realizan en la fase de: Fase de diseño
Fase de evaluación
A la hora de trabajar la usabilidad en dispositivos móviles es importante dar espacio entre los elementos que aparecen en la página para facilitar la comunicación y la interacción: Verdadero
Falso
Qué técnica de evaluación es la más importante para poder evaluar la usabilidad de cualquier producto digital Test de usabilidad en laboratorio
Encuestas online
Focus groups
Verdadero o falso. Es imprescindible definir los objetivos que se quieren conseguir cuando se va a diseñar un diseño digital.
Verdadero
Falso
Para realizar fase correcta de investigación y toma de requisitos debemos contemplar: Opción múltiple. Los objetivos de negocio del proyecto, qué se quiere conseguir
El análisis de los usuarios, como son, qué les gusta, que echan en falta, etc.
El color que tendrá la web
Recursos utilizados RECURSOS UTILIZADOS
Sites:
•
www.useit.com
• • •
www.nosolousabilidad.com
• • • •
Jakob Nielsen y Hoa Loranger- ‘Priorizando la usabilidad web ‘
www.sidar.org www.usability.org
Libros:
Jakob Nielsen – ‘Usabilidad. Diseño de sitios web’ Steve Krugg – ‘No me hagas pensar’
Jesse James Garrett - User-Centered design for the web and beyond
• Rex Hartson y Ardha Pyla - UX Book
Related documents
Experiencia Usuario (UX)
43 Pages • 7,007 Words • PDF • 4.6 MB
Constancia experiencia docente 2019
3 Pages • PDF • 745.2 KB
Guía del usuario - General
15 Pages • 343 Words • PDF • 349.2 KB
Manual de Usuario SMNET
106 Pages • 8,338 Words • PDF • 4.6 MB
Cartografía de la experiencia psicoactiva
48 Pages • 17,654 Words • PDF • 1.6 MB
formato de experiencia Stella
2 Pages • 282 Words • PDF • 127.7 KB
Tema la curva de experiencia
23 Pages • 1,539 Words • PDF • 2 MB
Manual de usuario DirectA
48 Pages • 5,430 Words • PDF • 3.1 MB
Manual de usuario 2.0
117 Pages • 23,292 Words • PDF • 4.7 MB
epson stylus office tx320f Manual do usuario
162 Pages • 34,770 Words • PDF • 8 MB
Corel PHOTO-PAINT 11 Guía del Usuario
311 Pages • 70,123 Words • PDF • 17.2 MB
Manual del usuario de SAP Crystal
396 Pages • 146,542 Words • PDF • 8 MB