Usabiildad - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Con este vídeo empezamos la unidad didáctica 8, implementación de la usabilidad en la web.
00:00:00
Lo que vamos a ver es cómo hacer interfaces web que tengan una buena usabilidad.
00:00:06
Para ello, lo primero que vamos a definir es qué es usabilidad.
00:00:12
Y eso lo define de la siguiente forma.
00:00:16
La usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos
00:00:18
a usuarios específicos en un contexto de uso específico.
00:00:26
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.
00:00:30
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.
00:00:39
¿Cómo podemos saber si una interfaz tiene buena usabilidad?
00:00:51
Entre las diferentes técnicas que hay, vamos a ver la evaluación de la usabilidad mediante heurísticas.
00:00:54
¿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.
00:01:00
En la página de Interaction Design podemos ver cómo realizar una evaluación heurística de usabilidad.
00:01:13
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.
00:01:21
Además, es una página interesante como recurso ya que tiene mucha información sobre temas de diseño de interfaces y usabilidad.
00:01:32
De las diferentes heurísticas de usabilidad que existen, vamos a analizar las formuladas por Nielsen.
00:01:39
Es un conjunto de 10 heurísticas que veremos más adelante que vamos a utilizar para analizar la usabilidad de una interfaz web.
00:01:46
En la página del Norman Nielsen Group puedo ver cómo funcionan estas 10 heurísticas.
00:01:54
La página del Norman Nielsen Group me permite ver mucha información sobre usabilidad y sobre experiencia de usuario.
00:02:00
En concreto, hay apartados sobre cómo aplicar las 10 heurísticas de usabilidad de Nielsen explicadas con diferentes ejemplos.
00:02:08
Y es una buena página para aprender sobre usabilidad y sobre diseño web.
00:02:17
Vamos a ver las 10 heurísticas de Nielsen explicadas con ejemplos.
00:02:22
La primera heurística, visibilidad del estado del sistema.
00:02:26
El sistema debe informar a los usuarios del estado del sistema dando una retroalimentación apropiada en un tiempo razonable.
00:02:29
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.
00:02:36
Por ejemplo, si estoy comprando en Amazon, puedo ir viendo en mi carrito el número de productos, veo el estado del sistema.
00:02:47
Si añado algo a la cesta, me da un mensaje de que esa iteración se ha producido.
00:02:53
La segunda heurística, coincidencia entre el sistema y el mundo real.
00:02:59
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.
00:03:03
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.
00:03:15
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.
00:03:31
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.
00:03:43
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.
00:03:58
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.
00:04:23
¿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.
00:04:35
Sigue los estándares de lo que espero en una herramienta como esta y es fácil para el usuario entender ambas.
00:04:51
Prevención de errores.
00:04:57
Es más importante prevenir la aparición de errores que generar buenos mensajes de error.
00:04:58
Hay que eliminar acciones predispuestas al error o en todo caso localizarlas y preguntar al usuario si está seguro de realizarlas.
00:05:04
Por ejemplo, cuando estoy buscando en Google si me equivoco a la hora de escribir Nielsen,
00:05:10
él directamente me va a dar sugerencias corrigiendo ese error.
00:05:15
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.
00:05:21
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.
00:05:34
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.
00:05:42
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.
00:05:54
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.
00:06:13
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.
00:06:28
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.
00:06:49
Ayuda y documentación.
00:06:57
A pesar de que es mejor que el sistema no necesite documentación, a veces es necesario incluirla.
00:06:59
Podemos incluir secciones de ayuda, ayuda contextuales, a veces se introduce en videotutoriales, como es en el caso aquí de Azure,
00:07:05
o en Visual Studio Code, donde tengo también mi sección de ayuda.
00:07:12
- Autor/es:
- Javier Sanz
- Subido por:
- Javier S. S.
- Licencia:
- Reconocimiento - No comercial - Sin obra derivada
- Visualizaciones:
- 5
- Fecha:
- 31 de agosto de 2023 - 1:23
- Visibilidad:
- Clave
- Centro:
- IES ALONSO DE AVELLANEDA
- Duración:
- 07′ 19″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 87.39 MBytes