Algunos tips para hacer tu sitio web más fácil de usar.

1. Módulo 4 /
Usabilidad en la Web
“Algunos conceptos que todo
webmáster debe conocer”

2. Usabilidad
Tipografía
El tratamiento tipográfico para la
Web es diferente al tradicional
para impresos.
01

3. Usabilidad
Tamaño tipográfico
Utilice en la hoja de estilos únicamente medidas
relativas, como em, para asignar tamaño a los
textos.

4. 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.

5. Usabilidad

6. 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.

7. Usabilidad

8. Usabilidad

9. Usabilidad
Fuentes tipográficas comunes
Asigne únicamente fuentes tipográficas
comunes en la hoja de estilo para todos los
textos.

10. Usabilidad

11. 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).

12. Usabilidad

13. Usabilidad

14. Usabilidad

15. Usabilidad
Imágenes
Además de textos, los sitios web
transmiten en gran parte su
información gracias a las
imágenes.
02

16. Usabilidad
Pie de foto
Diseñe un estilo para los textos explicativos que
sirvan como pie de foto.

17. Usabilidad

18. Usabilidad
Imágenes como textos
Evite el uso de textos falsos, es decir, imágenes
como textos.

19. Usabilidad

20. Usabilidad

21. Usabilidad
Favicon
Diseñe el icono de favoritos, conocido
comúnmente como favicon.

22. Usabilidad

23. 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

24. Usabilidad
Botones con sonido
Evite programar botones con sonido.

25. Usabilidad

26. Usabilidad
Sonido de fondo
Evite usar sonidos de fondo.

27. Usabilidad

28. Usabilidad
Estándares
Asumir los estándares
web, emitidos por el Consorcio
W3C, generará para todos los
proyectos actuales, continuidad
en el futuro.
04

29. Usabilidad
Estándares del W3C
Use los estándares de la W3C: XHTML para el
contenido y CSS para la presentación.

30. Usabilidad

31. Usabilidad
Doctype
Declare el DOCTYPE o tipo de documento en
cada una de las páginas web del sitio.

32. Usabilidad

33. Usabilidad
Convenciones web
Haga uso de las convenciones web.

34. Usabilidad

35. Usabilidad

36. Usabilidad

37. Usabilidad

38. Usabilidad
Independencia de dispositivo
Diseñe con independencia de dispositivo.

39. Usabilidad

40. Usabilidad
Hojas de estilo para impresión
Desarrolle páginas que puedan imprimirse
correctamente, usando hojas de estilo para
impresión.

41. Usabilidad

42. 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

43. Usabilidad
Falsos hipervínculos
Evite diseñar señales engañosas de hacer clic.

44. Usabilidad

45. Usabilidad
Estado de hipervínculos
Realice un diseño diferencial para todos los
estados de hipervínculos.

46. Usabilidad

47. 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.

48. Usabilidad

49. 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”.

50. Usabilidad

51. Usabilidad
Salto de bloques repetitivos
Habilite la posibilidad de saltar vínculos de
navegación repetitivos.

52. Usabilidad

53. 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

54. Usabilidad
Longitud del cuadro de
búsqueda
Diseñe el cuadro de búsqueda para un máximo
de 30 caracteres.

55. Usabilidad

56. Usabilidad
Diseño GUI personalizado
Evite incluir en la página, elementos de Interfaz
Gráfica de Usuario (GUI) rediseñados y
personalizados.

57. Usabilidad

58. 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

59. Usabilidad
URL complejos
Habilite un sistema de URL inteligentes para
cada página web: cortas y significativas.

60. Usabilidad

61. 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

62. Usabilidad

63. 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.

64. Usabilidad

65. 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

66. Usabilidad

67. Usabilidad

68. Módulo 5 /
Evaluación heurística de la Usabilidad
“Realiza pruebas de usabilidad
como un experto”

69. 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

70. 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.

71. Más info…
Mario Carvajal
mario@astrolabio.com.co
Skype: astromario
MSN: astromario@hotmail.com
Tel: +57 (1) 341948
Cel: +57 (315) 4109020
Bogotá, Colombia

72. www.astrolabio.com.co