1 00:00:00,820 --> 00:00:05,960 Con este vídeo empezamos la unidad didáctica 8, implementación de la usabilidad en la web. 2 00:00:06,799 --> 00:00:11,859 Lo que vamos a ver es cómo hacer interfaces web que tengan una buena usabilidad. 3 00:00:12,519 --> 00:00:15,679 Para ello, lo primero que vamos a definir es qué es usabilidad. 4 00:00:16,359 --> 00:00:18,140 Y eso lo define de la siguiente forma. 5 00:00:18,500 --> 00:00:25,820 La usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos 6 00:00:26,539 --> 00:00:29,820 a usuarios específicos en un contexto de uso específico. 7 00:00:30,820 --> 00:00:38,859 Si nos fijamos en esta definición, es importante reseñar que la usabilidad varía según el tipo de usuario y el contexto de uso. 8 00:00:39,799 --> 00:00:50,479 También podemos decir que la usabilidad indica la calidad de un sistema respecto a su facilidad de uso, su facilidad de aprendizaje y la satisfacción que produce su uso. 9 00:00:51,460 --> 00:00:54,840 ¿Cómo podemos saber si una interfaz tiene buena usabilidad? 10 00:00:54,840 --> 00:00:59,840 Entre las diferentes técnicas que hay, vamos a ver la evaluación de la usabilidad mediante heurísticas. 11 00:01:00,820 --> 00:01:13,239 ¿En qué consiste este método? Es un método de inspección basado en la revisión de un conjunto de características de la interfaz de acuerdo a un conjunto de características de diseño. 12 00:01:13,239 --> 00:01:21,200 En la página de Interaction Design podemos ver cómo realizar una evaluación heurística de usabilidad. 13 00:01:21,719 --> 00:01:32,000 Como hemos comentado, en la página de la Interaction Design Foundation podemos ver documentación sobre cómo realizar una evaluación heurística de la usabilidad. 14 00:01:32,620 --> 00:01:39,680 Además, es una página interesante como recurso ya que tiene mucha información sobre temas de diseño de interfaces y usabilidad. 15 00:01:39,680 --> 00:01:46,280 De las diferentes heurísticas de usabilidad que existen, vamos a analizar las formuladas por Nielsen. 16 00:01:46,879 --> 00:01:54,239 Es un conjunto de 10 heurísticas que veremos más adelante que vamos a utilizar para analizar la usabilidad de una interfaz web. 17 00:01:54,939 --> 00:02:00,400 En la página del Norman Nielsen Group puedo ver cómo funcionan estas 10 heurísticas. 18 00:02:00,859 --> 00:02:08,979 La página del Norman Nielsen Group me permite ver mucha información sobre usabilidad y sobre experiencia de usuario. 19 00:02:08,979 --> 00:02:16,979 En concreto, hay apartados sobre cómo aplicar las 10 heurísticas de usabilidad de Nielsen explicadas con diferentes ejemplos. 20 00:02:17,460 --> 00:02:21,580 Y es una buena página para aprender sobre usabilidad y sobre diseño web. 21 00:02:22,379 --> 00:02:26,400 Vamos a ver las 10 heurísticas de Nielsen explicadas con ejemplos. 22 00:02:26,539 --> 00:02:28,960 La primera heurística, visibilidad del estado del sistema. 23 00:02:29,599 --> 00:02:36,340 El sistema debe informar a los usuarios del estado del sistema dando una retroalimentación apropiada en un tiempo razonable. 24 00:02:36,340 --> 00:02:46,360 Por ejemplo, si estoy subiendo un fichero a Drive, me va diciendo cuánto tiempo queda y el porcentaje de fichero que se ha subido. 25 00:02:47,520 --> 00:02:53,439 Por ejemplo, si estoy comprando en Amazon, puedo ir viendo en mi carrito el número de productos, veo el estado del sistema. 26 00:02:53,960 --> 00:02:58,759 Si añado algo a la cesta, me da un mensaje de que esa iteración se ha producido. 27 00:02:59,800 --> 00:03:03,259 La segunda heurística, coincidencia entre el sistema y el mundo real. 28 00:03:03,259 --> 00:03:15,159 El sistema debe utilizar el lenguaje de los usuarios con palabras o frases que le sean conocidas en lugar de los términos que utiliza el sistema, para que al usuario no se le dificulte utilizar el sistema. 29 00:03:15,840 --> 00:03:31,080 Por ejemplo, podemos ver que en esta página de Amazon tenemos el icono del carrito, que el usuario enseguida entiende lo que significa, tenemos una lupa para saber que ahí puedo buscar, la bandera de España, son conceptos que son familiares al usuario. 30 00:03:31,080 --> 00:03:43,300 Igual que en Apple, puedo ver los diferentes elementos multimedias que tengo con diferentes iconos que me resultan familiares y me permiten identificarlos más fácilmente. 31 00:03:43,740 --> 00:03:58,280 Control de usuario y libertad. En casos en los que los usuarios elijan una opción de sistema por error, éste debe contar con las opciones de deshacer y rehacer para proveer al usuario de una salida fácil sin tener que utilizar diálogo extendido. 32 00:03:58,280 --> 00:04:23,180 Por ejemplo, si voy a formatear un pendrive me va a decir si quiero realmente hacerlo o puedo cancelar. Casi todos los editores de texto o de vídeo en este caso me permiten deshacer o rehacer según si me he equivocado en la última acción que he tomado. Igual que cuando salgo de un programa me va a decir si quiero guardar el proyecto que tenía o abortar esa acción. 33 00:04:23,180 --> 00:04:35,800 Consistencia y estandarización. El usuario debe seguir las normas y convenciones de la plataforma sobre la que está implementando el sistema, para que no se tenga que preguntar el significado de las palabras, situaciones o acciones del sistema. 34 00:04:35,860 --> 00:04:50,720 ¿Qué quiere decir esto? Que, por ejemplo, el sistema tiene que ser consistente con lo que el usuario espera y seguir los estándares. Por ejemplo, si yo paso de este labor, el diseño de las dos barras de herramientas es consistente. 35 00:04:51,360 --> 00:04:56,920 Sigue los estándares de lo que espero en una herramienta como esta y es fácil para el usuario entender ambas. 36 00:04:57,439 --> 00:04:58,459 Prevención de errores. 37 00:04:58,879 --> 00:05:03,459 Es más importante prevenir la aparición de errores que generar buenos mensajes de error. 38 00:05:04,060 --> 00:05:10,319 Hay que eliminar acciones predispuestas al error o en todo caso localizarlas y preguntar al usuario si está seguro de realizarlas. 39 00:05:10,639 --> 00:05:15,319 Por ejemplo, cuando estoy buscando en Google si me equivoco a la hora de escribir Nielsen, 40 00:05:15,980 --> 00:05:19,819 él directamente me va a dar sugerencias corrigiendo ese error. 41 00:05:21,319 --> 00:05:33,560 Reconocimiento antes que recuerdo. Es más fácil entender una interfaz si veo, reconozco cómo funciona en vez de si tengo que memorizarlo, lo que supone mayor carga cognitiva. 42 00:05:34,000 --> 00:05:42,600 Por ejemplo, si voy a elegir un tipo de letra, si veo, al elegir el tipo de letra, cómo es ese tipo, es más fácil identificar el que necesito. 43 00:05:42,600 --> 00:05:54,100 O si estoy escribiendo en un IDE, como Visual Studio Code, si me da una lista de palabras que empiezan por D, es más fácil recordar lo que quiero expresar. 44 00:05:54,800 --> 00:06:12,519 Flexibilidad y eficiencia de uso. Es importante que una interfaz sea válida para usuarios noveles y para usuarios avanzados, de tal manera que los aceleradores, por ejemplo, permiten que un usuario avanzado pueda acceder a las funciones de forma más rápida, de forma más óptima. 45 00:06:13,360 --> 00:06:28,079 Estética y diseño minimalista. La interfaz no debe tener información redundante. Si tenemos mucha información en la interfaz, va a ser difícil que el usuario preste atención a ella. Hay que mostrar solo la información que sea relevante en cada momento. 46 00:06:28,079 --> 00:06:49,000 3. Ayudar a los usuarios a reconocer, diagnosticar y recuperar la situación cuando se produce un error. Por ejemplo, si yo voy tecleando una password para darme de alta en una aplicación, el sistema me puede ir diciendo los errores que tengo, los elementos que me faltan por cumplir para que la password sea válida. 47 00:06:49,000 --> 00:06:56,560 O por ejemplo, si se produce un error en una fórmula de Excel, el sistema me puede corregir la fórmula y proponerme una solución. 48 00:06:57,519 --> 00:06:58,680 Ayuda y documentación. 49 00:06:59,579 --> 00:07:05,519 A pesar de que es mejor que el sistema no necesite documentación, a veces es necesario incluirla. 50 00:07:05,800 --> 00:07:12,040 Podemos incluir secciones de ayuda, ayuda contextuales, a veces se introduce en videotutoriales, como es en el caso aquí de Azure, 51 00:07:12,620 --> 00:07:15,620 o en Visual Studio Code, donde tengo también mi sección de ayuda.