PDF de programación - Directrices de usabilidad para sitios web del Estado en Colombia

Directrices de usabilidad para
sitios web del Estado colombiano.

Programa Gobierno en línea
Manual para la implementación del decreto 1151
Autores: Mario Carvajal – Juan Saab (Astrolabio)
Revisó: CINTEL
Aprobó:
Fecha: 26 de agosto de 2010
Versión: 1.0.4 (Candidata a oficial)

Índice de contenido
Prefacio................................................................................................................................................................... 4
Primera Parte /
Introducción a la Usabilidad.................................................................................................................................... 7
¿Qué beneficios trae a su entidad cumplir con estas directrices?................................................................ 9
Ejemplos de casos reales sobre beneficios de aplicar criterios de usabilidad en sitios web......................10

Segunda Parte /
Directrices de Usabilidad Web.............................................................................................................................. 17
1. Arquitectura de Información.............................................................................................................................. 18
1.1 Objetivos del portal web....................................................................................................................... 19
1.2 Personajes y escenarios....................................................................................................................... 20
1.3 Necesidades de los usuarios................................................................................................................ 22
1.4 Evaluación constante............................................................................................................................ 23
1.5 Evaluación de la Arquitectura de Información....................................................................................... 25
1.6 Navegación global consistente............................................................................................................. 27
1.7 Navegación de contexto....................................................................................................................... 29
1.8 Ruta de migas....................................................................................................................................... 30
1.9 URL limpios.......................................................................................................................................... 32
1.10 Ubicación del usuario......................................................................................................................... 33
1.11 Tagline................................................................................................................................................. 34
1.12 Enlaces bien formulados.................................................................................................................... 36
1.13 Memoria a corto plazo........................................................................................................................ 38
2. Diseño de Interfaz de Usuario.......................................................................................................................... 41
2.1 Ubicación del logotipo........................................................................................................................... 42
2.2 Diseño ordenado y limpio..................................................................................................................... 44
2.3 Interfaces en movimiento...................................................................................................................... 46
2.4 Contenido que parece publicidad......................................................................................................... 48
2.5 Contraste en brillo y color..................................................................................................................... 51
2.6 Información transmitida a través de color............................................................................................. 53
2.7 Justificación del texto............................................................................................................................ 56
2.8 Ancho del cuerpo de texto.................................................................................................................... 58
2.9 Fuentes tipográficas comunes.............................................................................................................. 60
2.10 Texto subrayado................................................................................................................................. 63
2.11 Uso adecuado del espacio en blanco................................................................................................. 64
2.12 Desplazamiento horizontal................................................................................................................. 67
2.13 Vínculo a la página de inicio............................................................................................................... 70
2.14 Tareas clave en la página de inicio..................................................................................................... 71
2.15 Contenidos de ejemplo en la página de inicio.................................................................................... 74
2.16 Hojas de estilo para diferentes formatos............................................................................................ 76

2.17 Independencia de navegador............................................................................................................. 78
2.18 Vínculos visitados............................................................................................................................... 81
2.19 Calidad del código.............................................................................................................................. 84
3. Diseño de Interacción....................................................................................................................................... 87
3.1 Campos obligatorios............................................................................................................................. 88
3.2 Asociación de etiquetas y campos........................................................................................................ 89
3.3 Validación dinámica de datos............................................................................................................... 91
3.4 Error de página no encontrada............................................................................................................. 94
3.5 Ventanas emergentes........................................................................................................................... 96
3.6 Botón atrás........................................................................................................................................... 97
3.7 Tiempo de carga de las páginas........................................................................................................... 98
3.8 Ejemplos en los campos de formulario............................................................................................... 101
3.9 Páginas de confirmación.................................................................................................................... 102
4. Búsqueda........................................................................................................................................................ 104
4.1 Motor de búsqueda y ubicación.......................................................................................................... 105
4.2 Búsquedas con términos familiares y errores de digitación................................................................ 106
4.3 Sugerencias de búsqueda.................................................................................................................. 108
4.4 Ubicación en los 10 primeros resultados............................................................................................ 109
5. Pruebas de usabilidad..................................................................................................................................... 111
5.1 Evaluación heurística.......................................................................................................................... 112
5.2 Test de Usuario................................................................................................................................... 115
5.3 Diseño y evaluación iterativos............................................................................................................ 121
6. Contenido....................................................................................................................................................... 124
6.1 Contenido útil...................................................................................................................................... 125
6.2 Pirámide invertida............................................................................................................................... 126
6.3 Títulos y encabezados........................................................................................................................ 128
6.4 Listas.................................................................................................................................................. 130
6.5 Escaneado de contenido.................................................................................................................... 132
6.6 Vínculos rotos....................................................