Módulo 4: Usabilidad Web
-
Upload
mario-carvajal -
Category
Technology
-
view
7.980 -
download
1
description
Transcript of Módulo 4: Usabilidad Web
![Page 1: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/1.jpg)
Módulo 4 /
Usabilidad en la Web
“Algunos conceptos que todo webmáster debe conocer”
![Page 2: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/2.jpg)
Usabilidad
Tipografía
El tratamiento tipográfico para la Web es diferente al tradicional para impresos.
01
![Page 3: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/3.jpg)
Usabilidad
Tamaño tipográficoUtilice en la hoja de estilos únicamente medidas relativas, como em, para asignar tamaño a los textos.
![Page 4: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/4.jpg)
Usabilidad
Alineación de párrafos
Utilice para los párrafos de prosa alineación al margen izquierdo y evite el uso de alineación justificada.
![Page 5: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/5.jpg)
Usabilidad
![Page 6: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/6.jpg)
Usabilidad
Tamaño tipográfico y retícula
Asigne medidas en em para el ancho y el alto de las cajas de composición de la retícula.
![Page 7: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/7.jpg)
Usabilidad
![Page 8: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/8.jpg)
Usabilidad
![Page 9: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/9.jpg)
Usabilidad
Fuentes tipográficas comunes
Asigne únicamente fuentes tipográficas comunes en la hoja de estilo para todos los textos.
![Page 10: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/10.jpg)
Usabilidad
![Page 11: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/11.jpg)
Usabilidad
Renglones de tamaño medio
Diseñe el texto de prosa para renglones de tamaño medio 60-80 cpl (caracteres por línea).
![Page 12: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/12.jpg)
Usabilidad
![Page 13: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/13.jpg)
Usabilidad
![Page 14: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/14.jpg)
Usabilidad
![Page 15: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/15.jpg)
Usabilidad
Imágenes
Además de textos, los sitios web transmiten en gran parte su información gracias a las imágenes. 02
![Page 16: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/16.jpg)
Usabilidad
Pie de foto
Diseñe un estilo para los textos explicativos que sirvan como pie de foto.
![Page 17: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/17.jpg)
Usabilidad
![Page 18: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/18.jpg)
Usabilidad
Imágenes como textos
Evite el uso de textos falsos, es decir, imágenes como textos.
![Page 19: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/19.jpg)
Usabilidad
![Page 20: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/20.jpg)
Usabilidad
![Page 21: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/21.jpg)
Usabilidad
Favicon
Diseñe el icono de favoritos, conocido comúnmente como favicon.
![Page 22: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/22.jpg)
Usabilidad
![Page 23: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/23.jpg)
Usabilidad
Audio
El diseñador de interfaz deberá tener en cuenta que el audio para la web tiene un tratamiento que debe cumplir con criterios de usabilidad, que muy frecuentemente no son en tenidos cuenta.
03
![Page 24: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/24.jpg)
Usabilidad
Botones con sonido
Evite programar botones con sonido.
![Page 25: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/25.jpg)
Usabilidad
![Page 26: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/26.jpg)
Usabilidad
Sonido de fondo
Evite usar sonidos de fondo.
![Page 27: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/27.jpg)
Usabilidad
![Page 28: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/28.jpg)
Usabilidad
Estándares
Asumir los estándares web, emitidos por el Consorcio W3C, generará para todos los proyectos actuales, continuidad en el futuro. 04
![Page 29: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/29.jpg)
Usabilidad
Estándares del W3C
Use los estándares de la W3C: XHTML para el contenido y CSS para la presentación.
![Page 30: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/30.jpg)
Usabilidad
![Page 31: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/31.jpg)
Usabilidad
Doctype
Declare el DOCTYPE o tipo de documento en cada una de las páginas web del sitio.
![Page 32: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/32.jpg)
Usabilidad
![Page 33: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/33.jpg)
Usabilidad
Convenciones web
Haga uso de las convenciones web.
![Page 34: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/34.jpg)
Usabilidad
![Page 35: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/35.jpg)
Usabilidad
![Page 36: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/36.jpg)
Usabilidad
![Page 37: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/37.jpg)
Usabilidad
![Page 38: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/38.jpg)
Usabilidad
Independencia de dispositivo
Diseñe con independencia de dispositivo.
![Page 39: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/39.jpg)
Usabilidad
![Page 40: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/40.jpg)
Usabilidad
Hojas de estilo para impresión
Desarrolle páginas que puedan imprimirse correctamente, usando hojas de estilo para impresión.
![Page 41: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/41.jpg)
Usabilidad
![Page 42: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/42.jpg)
Usabilidad
Hipervínculos y navegación
La web está constituida esencialmente por hipervínculos. Del buen tratamiento que se les dé, dependerá el éxito de la navegación de los usuarios y una muy buena parte de la usabilidad del sitio.
05
![Page 43: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/43.jpg)
Usabilidad
Falsos hipervínculos
Evite diseñar señales engañosas de hacer clic.
![Page 44: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/44.jpg)
Usabilidad
![Page 45: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/45.jpg)
Usabilidad
Estado de hipervínculos
Realice un diseño diferencial para todos los estados de hipervínculos.
![Page 46: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/46.jpg)
Usabilidad
![Page 47: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/47.jpg)
Usabilidad
Ubicación del usuario
Proporcione información sobre la ubicación del usuario a través de variaciones tipográficas o recursos gráficos.
![Page 48: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/48.jpg)
Usabilidad
![Page 49: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/49.jpg)
Usabilidad
Hipervínculo a la página de inicio
Habilite el acceso a la página de inicio, mediante hipervínculo en el logotipo y con un vínculo de texto rotulado como “inicio”.
![Page 50: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/50.jpg)
Usabilidad
![Page 51: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/51.jpg)
Usabilidad
Salto de bloques repetitivos
Habilite la posibilidad de saltar vínculos de navegación repetitivos.
![Page 52: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/52.jpg)
Usabilidad
![Page 53: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/53.jpg)
Usabilidad
Interacción
Los usuarios no únicamente leen, también interactúan con la interfaz, por ello es importante tener en cuenta las siguientes recomendaciones, para hacer una web más fácil de usar. 06
![Page 54: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/54.jpg)
Usabilidad
Longitud del cuadro de búsqueda
Diseñe el cuadro de búsqueda para un máximo de 30 caracteres.
![Page 55: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/55.jpg)
Usabilidad
![Page 56: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/56.jpg)
Usabilidad
Diseño GUI personalizado
Evite incluir en la página, elementos de Interfaz Gráfica de Usuario (GUI) rediseñados y personalizados.
![Page 57: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/57.jpg)
Usabilidad
![Page 58: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/58.jpg)
Usabilidad
Posicionamiento
El posicionamiento orgánico en motores de búsqueda, SEO, debe empezar desde la misma arquitectura de información de un sitio, seguir con el diseño de interfaz y codificación, y por supuesto en la escritura de contenidos.
07
![Page 59: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/59.jpg)
Usabilidad
URL complejos
Habilite un sistema de URL inteligentes para cada página web: cortas y significativas.
![Page 60: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/60.jpg)
Usabilidad
![Page 61: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/61.jpg)
Usabilidad
Titulo de la ventana
Asigne el título de la página web al título de la ventana y asegúrese que este título sea el encabezado de primer nivel
![Page 62: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/62.jpg)
Usabilidad
![Page 63: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/63.jpg)
Usabilidad
Mapa del sitio dinámico
Programe un mapa de sitio dinámico en XML y regístrelo en las herramientas de webmáster de Google.
![Page 64: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/64.jpg)
Usabilidad
![Page 65: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/65.jpg)
Usabilidad
Bibliografía imprescindible
Además de Internet, podemos encontrar mucha información en varios libros sobre el tema de usabilidad. Aquí te mostraremos algunos de ellos. 08
![Page 66: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/66.jpg)
Usabilidad
![Page 67: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/67.jpg)
Usabilidad
![Page 68: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/68.jpg)
Módulo 5 /
Evaluación heurística de la Usabilidad
“Realiza pruebas de usabilidad como un experto”
![Page 69: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/69.jpg)
Heurísticas
Qué es una evaluación heurística
La evaluación heurística o evaluación del experto es una manera muy rápida, eficaz y económica de descubrir los errores de usabilidad de un sitio web. 01
![Page 70: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/70.jpg)
Fin del curso
¡Muchas gracias!
Sí, gracias por hacer un mundo más accesible, usable, más cálido y agradable
para tus semejantes, hermanos en la vida.
![Page 71: Módulo 4: Usabilidad Web](https://reader034.fdocumento.com/reader034/viewer/2022052307/557abfd3d8b42a89258b4f1a/html5/thumbnails/71.jpg)
Más info…
Mario Carvajal
[email protected]: astromarioMSN: [email protected]: +57 (1) 341948Cel: +57 (315) 4109020Bogotá, Colombia