usabilidad aplicada al diseño de sitios web alejandro sánchez bolaños yeison henao aristizabal ...

60 Pages·2016·1.11 MB·English

USABILIDAD APLICADA AL DISEÑO DE SITIOS WEB

ALEJANDRO SÁNCHEZ BOLAÑOS
YEISON HENAO ARISTIZABAL

UNIVERSIDAD TECNOLOGICA DE PEREIRA
FACULTAD DE INGENIERÍAS: ELÉCTRICA, ELECTRÓNICA, FÍSICA Y
CIENCIAS DE LA COMPUTACIÓN
INGENIERIA DE SISTEMAS Y COMPUTACIÓN
PEREIRA
2016
USABILIDAD APLICADA AL DISEÑO DE SITIOS WEB

ALEJANDRO SÁNCHEZ BOLAÑOS
YEISON HENAO ARISTIZABAL

MONOGRAFÍA: Para obtener el Título de: INGENIERO DE SISTEMAS Y
COMPUTACIÓN

ASESOR: CARLOS AUGUSTO MENESES ESCOBAR

UNIVERSIDAD TECNOLOGICA DE PEREIRA
FACULTAD DE INGENIERÍAS: ELÉCTRICA, ELECTRÓNICA, FÍSICA Y
CIENCIAS DE LA COMPUTACIÓN
INGENIERO DE SISTEMAS Y COMPUTACIÓN
PEREIRA
2016
2
Nota de Aceptación

Presidente del Jurado

Jurado

Jurado

Ciudad y Fecha (día, mes, año) (Fecha de entrega)

3
AGRADECIMIENTOS

Agradecemos principalmente a
Dios y a nuestras familias por su
apoyo incondicional en nuestra
formación, a la Universidad por
guiarnos e instruirnos, generando
aportes para nuestro crecimiento
profesional y humano, con el
propósito de ser individuos de
bien participativos en la
sociedad.
.
A las personas que nos
colaboraron y se hicieron
participes de forma indirecta en
la elaboración de este trabajo de
grado, muchas gracias.

4
TABLA DE CONTENIDO

RESUMEN

ABSTRACT
Pág.
1. INTRODUCCIÓN 12
2. OBJETIVOS 13
2.1 OBJETIVO GENERAL 13
2.2 OBJETIVOS ESPECÍFICOS 13
3. PLANTEAMIENTO DEL PROBLEMA 14
3.1 DEFINICIÓN DEL PROBLEMA 14
3.2 FORMULACIÓN DEL PROBLEMA 14
3.3 JUSTIFICACIÓN 14
4. ESTADO DEL ARTE 15
4.1 MARCO HISTÓRICO O DE ANTECEDENTES 15
4.2 MARCO CONCEPTUAL 16
4.2.1 BENEFICIOS QUE APORTA LA USABILIDAD A UN SITIO WEB 16
4.2.2 LOS CINCO ATRIBUTOS DE LA USABILIDAD 17
4.2.3 ACCESIBILIDAD VS USABILIDAD 18
4.3 MARCO TEORICO 19
4.3.1 AUTOR REFERENTE STEVE KRUG 19
4.3.2 AUTOR REFERENTE JAKOB NIELSEN 21
5. NAVEGACION 24
5.1 TOPOLOGÍA ESTRUCTURAL WEB 24
5.1.1 ARBOL 24
5.1.2 LINEAL 24
5.1.3 MATRIX 25
5.1.4 MAYA COMPLETA 25
5.1.5 RED ARBITRARIA 26
5.1.6 HÍBRIDA 26
6. DISEÑO 27
5
6.1 ALGUNAS ESTRUCTURAS COMUNES EN SITIOS WEB 27
6.2 ELECCIÓN DEL TAMAÑO 27
6.3 CREACIÓN DE UNA PLANTILLA 28
6.4 REDUCCIÓN Y SIMPLIFICACIÓN 28
6.5 PÁGINAS DE AYUDA 29
6.6 PÁGINAS DE ERROR 29
6.6.1 HERRAMIENTAS DETECCION DE ERRORES 31
6.7 RESOLUCIÓN DE PANTALLA 32
6.7.1 RESOLUCIÓN ÓPTIMA 32
6.7.2 ORIENTACIÓN 34
6.8 TEXTO 34
6.8.1 AMBIGÜEDAD EN EL TEXTO 35
6.8.2 TEXTO DESTACADO 36
6.8.3 CONTENIDO DIRECTO Y CONCISO 36
6.8.4 LEYENDAS 36
6.8.5 INTERLINEADO 36
6.8.6 ESPACIO ENTRE LETRAS 37
6.8.7 HOJEADO 37
6.8.8 ORGANIZACIÓN DE LA INFORMACIÓN 37
6.8.9 DOCUMENTACIÓN EN LÍNEA 38
6.8.10 REDACCIÓN DE TITULARES 38
6.8.11 TÍTULOS DE PÁGINA 38
6.8.12 TIPOGRAFÍA 38
6.8.12.1 TIPOGRAFÍAS RESPONSIVE 39
6.8.13 TEXTO ACCESIBLE 39
6.8.13.1 TEXTO CON COLOR ACCESIBLE 39
6.8.13.2 FUENTE LEGIBLE 39
6.8.14 CSS UNIDADES 41
6.10 VINCULACIÓN (ENLACES) 43
6.10.1 BARRA DE PROGRESO. 44
6.10.2 RESCATANDO A LOS USUARIOS PERDIDOS 45
6
6.11 MAPA DEL SITIO 45
6.12 OPCIONES DE BÚSQUEDA 46
6.12.1 BÚSQUEDA AVANZADA 46
6.12.2 ABSTRACCIONES BREVES DE LA PÁGINA 46
6.13 TABLAS DE CONTENIDO 48
6.14 SISTEMAS DE AYUDA 48
6.15 CONTACTO 49
6.16 DOCUMENTACIÓN EN LÍNEA 49
6.17 TIEMPOS DE RESPUESTA 50
6.18VIDEO 51
7. MEDICION 52
7.1 EYE-TRACKING 52
7.2 ENCUESTAS 54
7.3 ANALÍTICA WEB 56
8. CONCLUSIONES 57
9. BIBLIOGRAFIA 58

7
LISTA DE TABLAS

Pág.

Tabla 1: Lista de Errores más comunes (1). .......................................................... 30
Tabla 2: Lista de Errores más comunes (2). .......................................................... 30
Tabla 3: Herramientas. .......................................................................................... 31
Tabla 4: Estadísticas oficiales fuente w3c actualizadas a Junio de 2016 .............. 33
Tabla 5: Resolución ............................................................................................... 33
Tabla 6:.Leyendas ................................................................................................. 36

8
LISTA DE FIGURAS

Pág.
Figura 1: Árbol ...................................................................................................... 24
Figura 2: Lineal ..................................................................................................... 24
Figura 3: Matrix ..................................................................................................... 25
Figura 4: Maya Completa ...................................................................................... 25
Figura 5: Red Arbitraria ......................................................................................... 26
Figura 6: Híbrida ................................................................................................... 26
Figura 7: Extensiva VS Profunda ............................ ¡Error! Marcador no definido.
Figura 8: Diseños de Sitios Web ........................................................................... 27
Figura 9: Reducción y Simplificación .................................................................... 28
Figura 10: Resolución Óptima ............................................................................... 32
Figura 11: Orientación .......................................................................................... 34
Figura 12: Mapa del Sitio ...................................................................................... 45
Figura 13: Index Sitio Web Google ....................................................................... 47
Figura 14: Contenidos ........................................................................................... 48
Figura 15: Seccion de Ayuda ................................................................................ 48
Figura 16: Formulario Contacto ............................................................................ 49
Figura 17: Mapa de Calor 1 .................................................................................. 53
Figura 18: Mapa de Calor 2 .................................................................................. 54

9
RESUMEN

La usabilidad es un pilar fundamental que debe servir como base para la
elaboración correcta del diseño de un sitio web. Es común encontrar ingenieros de
sistemas con altos niveles de calidad en programación, pero al momento de crear
un sitio web, desconocen la importancia de aplicar los conceptos básicos de
Usabilidad, generando en muchos casos sitios web poco amigables, con notables
falencias de diseño y generando una pobre experiencia de navegación al usuario
final.

Este proyecto pretende brindar una herramienta de apoyo, mediante la
construcción de un documento con conceptos claros que permitirán entender que
es la usabilidad aplicada al diseño de sitios web, brindando un estado del arte más
actual, exponiendo los beneficios que tiene su aplicación, explorando teorías de
los autores referentes como Steve Krug que expone los principios de Usabilidad y
revisando cada una de las reglas básicas propuestas por Jakob Nielsen.

De forma posterior se abordaran los conceptos que permiten entender los
beneficios que aporta la usabilidad en el diseño, elaboración y mantenimiento de
un sitio web. Abordando temas como los parámetros básicos para un correcto
diseño, el uso de plantillas, páginas de error y ayuda. Exponiendo la importancia
que brinda el correcto uso del texto, la tipografía, la resolución y el manejo de
imágenes al momento de generar un sitio web.

Una vez se tienen los conceptos básicos desarrollados, el documento brinda
elementos que permiten mejorar el diseño de las búsquedas, y cómo influyen de
forma positiva en el usuario, cuando los tiempos de respuesta son adecuados a su
expectativa de navegación.

Por último se expondrán tres de las técnicas más usadas en la evaluación y/o
medición de Usabilidad (Eye Tracking, Encuestas y Analíticas Web).

10