ESCUELA SUPERIOR POLITCNICA DE CHIMBORAZO

FACULTAD DE INFORMTICA Y ELECTRNICA

ESCUELA DE DISEO GRFICO

CREACIN DE UN CATLOGO DE PATRONES DE DISEO DE INTERFAZ

GRFICA PARA SITIOS WEB ACADMICOS; DESARROLLO DE UN SITIO WEB
PARA EL COLEGIO ADOLFO KOLPING

TESIS DE GRADO
Previo a la obtencin del ttulo de
LICENCIADO EN DISEO GRFICO

Presentado por:
MANUEL DAVID ISIN VILEMA
Riobamba - Ecuador
2011

DEDICATORIA
El presente trabajo investigativo lo dedico a:
Dios todo poderoso, por ser mi gua espiritual que me
conduce siempre hacia el camino del bien, el xito, por darme
la vida, sabidura e iluminarme cada da.
A mi hermano Juan Carlos, quien desde el cielo me protege y
me ayuda a levantarme en una cada.
A mis padres, por su apoyo incondicional que me han
brindado en toda mi carrera y vida.
A mi tutores, quienes con sus consejos y su experiencias me
guiaron

para la cristalizacin

trabajo.

II

y culminacin del presente

AGRADECIMIENTO
La investigacin es el resultado del esfuerzo y dedicacin no
solo del autor sino tambin del trabajo desinteresado de otras
personas, quienes de una u otra forma han contribuido con
generosidad en la realizacin del trabajo.

Presento mi ms sincero agradecimiento a Dios, por darme la

oportunidad de vivir, a mis padres por formarme y hacerme
una persona de bien, a m hermano Juan Carlos por
protegerme y guiarme, a la ESPOCH por ser mi escuela de
formacin profesional.

Y a todas las dems personas que tuvieron que ver en la

elaboracin y cristalizacin de este trabajo, sinceramente:

David Isin.

III

HOJA DE CALIFICACIONES

NOMBRE

FIRMA

FECHA

Ing. Ivn Menes Camejo

DECANO DE LA FACULTAD
DE INFORMTICA Y ELECTRNICA

..........................

.........................

..........................

........................

..........................

.......................

..........................

..........................

..........................

..........................

Ing. Milton Espinoza

DIRECTOR DE LA
ESCUELA DE DISEO GRAFICO

Lcdo. Luis Vin

DIRECTOR DE TESIS

Ing. Cristhy Jimnez

MIEMBRO DEL TRIBUNAL

Tec. Carlos Rodrguez Carpio

DIRECTOR DPTO.
DOCUMENTACIN

IV

Yo, Manuel David Isin Vilema soy responsable de las ideas, doctrinas y
resultados expuestos en esta tesis; y, el patrimonio intelectual de la Tesis de
Grado pertenece a la ESCUELA SUPERIOR POLITCNICA DE
CHIMBORAZO.

Manuel David Isin Vilema

AUTORIA

NDICE DE CONTENIDOS
DEDICATORIA....II
AGRADECIMIENTO..III
HOJA DE CALIFICACION .................................................................... II
AUTORIA ........................................................................................................ .VIII
INTRODUCCION..................................................................................................1
ANTECEDENTES ............................................................................................... 3
JUSTIFICACIN ................................................................................................. 5
OBJETIVOS ........................................................................................................ 6
OBJETIVOS GENERALES ................................................................................. 6
OBJETIVOS ESPECFICOS ............................................................................... 6
HIPTESIS ......................................................................................................... 6
CAPTULO I ..................................................................................................................... 7
1.
MARCO HISTRICO ............................................................................... 7
1.1.

CENTRO DE FORMACION ARTESANAL ADOLFO KOLPING............. 7

1.2.

RESEA HISTORICA................................................................................... 7

1.3.

MISIN .......................................................................................................... 9

1.4.

VISIN ........................................................................................................... 9

1.6.

COMO EDUCA EL UEFA ............................................................................ 9

1.7.

PRINCIPIOS DE ADOLFO KOLPING....................................................... 10

1.8.

PENSAMIENTO DE ADOLFO KOLPING. ............................................... 10

CAPITULO II .................................................................................................................. 11
2.
MARCO TERICO - CONCEPTUAL ..................................................... 11
2.1.

DISEO GRAFICO ..................................................................................... 11

2.2.

HERRAMIENTAS DEL DISEO GRAFICO ............................................ 12

2.3.

ELEMENTOS DEL DISEO ...................................................................... 12

2.4.

PROCESO DE UN PROYECTO DE SISEO ............................................ 17

2.5.

TEORA DEL COLOR ................................................................................ 17

2.5.1.

EL CRCULO CROMTICO ...................................................................... 18

VI

2.5.2.

PROPIEDADES DEL COLOR .................................................................... 19

2.5.2.1.

TONO O MATIZ .......................................................................................... 19

2.5.2.2.

BRILLO ........................................................................................................ 19

2.5.2.3.

SATURACIN ............................................................................................. 20

2.5.3.

LA PSICOLOGA DEL COLOR ................................................................. 20

2.5.4.

IMPORTANCIA DEL COLOR ................................................................... 25

2.6.

IDENTIDAD CORPORATIVA ................................................................... 25

CAPITULO III ................................................................................................................. 27

3.
DISEO WEB......................................................................................... 27
3.1.

CONCEPTOS WEB ................................................................................ 27

3.1.1.1. INTERNET ......................................................................................... 27

3.1.1.2. LA WEB .............................................................................................. 27
3.1.1.3. PGINA WEB..................................................................................... 28
3.1.1.3.1.TIPOS DE PGINAS WEB ................................................................ 29
3.1.1.3.1.1. PGINAS WEB ESTTICA.29
3.1.1.3.1.2.PGINAS WEB DINMICAS .......................................................... 29
3.1.2. SITIO WEB ............................................................................................. 29
3.1.3. PORTAL WEB ........................................................................................ 30
3.2.

DISEO WEB......................................................................................... 30

3.2.1. IMGENES DIGITALES ......................................................................... 30

3.2.1.1. TIPOS DE IMGENES ....................................................................... 30
3.2.2. MODOS DE IMAGEN ............................................................................. 31
3.2.3. RESOLUCIN: ....................................................................................... 32
3.2.4. FORMATOS DE ARCHIVO .................................................................... 32
3.2.5. FORMATOS GRFICOS WEB .............................................................. 33
3.2.6. EL COLOR EN LA WEB ......................................................................... 33
3.2.6.1. TEORA DEL COLOR PARA WEB .................................................... 34
3.2.6.1.1.PERCEPCIN Y EXPERIENCIA ....................................................... 34
3.2.6.1.2.CONTEXTO EMOCIONAL Y CULTURAL.......................................... 34

VII

3.2.6.1.3. COLORES Y SUS ASOCIACIONES ................................................. 35

3.2.7. TIPOGRAFIA EN LA WEB ..................................................................... 36
3.2.7.1. CLASES DE TIPOGRAFAS Y FUENTES ......................................... 36
3.2.7.2. TAMAO DEL TEXTO ....................................................................... 36
3.2.7.3. TIPOGRAFA Y COLOR..................................................................... 37
3.2.7.4. ALINEACIN DEL TEXTO. ................................................................ 37
3.2.7.5. NORMAS BSICAS DE TIPOGRAFA .............................................. 38
3.2.8. ELEMENTOS GRAFICOS WEB ............................................................. 38
3.3.

INTERFAZ WEB ..................................................................................... 43

3.3.1. EL DINTEL ............................................................................................. 43

3.3.2. SISTEMAS DE NAVEGACIN............................................................... 44
3.3.3. EL CUERPO DE LA PGINA ................................................................. 46
3.3.4. EL PIE DE PGINA ................................................................................ 47
3.4.

USABILIDAD WEB ................................................................................. 48

3.4.1. DEFINICIONES ISO ............................................................................... 49

3.4.1.1. USABILIDAD: MTODOS Y TCNICAS DE EVALUACIN ISO ...... 51
3.4.1.1.1.APLICACIN DE J. NIELSEN CON ISO 9241-11 ............................ 53
3.4.1.1.2.MTRICAS DE EVALUACIN DE CALIDAD .................................... 53
3.4.2. PRINCIPIOS HEURSTICOS DE USABILIDAD ..................................... 53
3.4.3. MTODOS DE EVALUACIN DE USABILIDAD ................................... 59
3.4.3.1. MTRICAS DE USABILIDAD............................................................. 60
3.4.3.2. MTODOS APLICADOS PARA LA EVALUACIN DE USABILIDAD 60
3.4.3.2.1.REUNIONES O WORKSHOPS CON RESPONSABLES DEL SITE .. 60
3.4.3.2.2.CUESTIONARIOS PARA USUARIOS ............................................... 61
3.4.3.2.3.ENTREVISTAS Y GRUPOS DE DISCUSIN .................................... 62
3.4.3.2.4.CARD SORTING ................................................................................ 62
3.4.3.2.5.BENCHMARK .................................................................................... 63
3.4.3.2.6.ANLISIS HEURSTICO .................................................................... 64
3.4.3.2.7.PROTOTIPADO ................................................................................. 65
VIII

3.4.3.2.8.EL TEST DE USABILIDAD ................................................................ 66

CAPITULO IV ................................................................................................................ 69
4.
CREACIN DE UN CATALOGO DE PATRONES ................................. 69
4.1.

HISTORIA............................................................................................... 69

4.2.

DEFINICION DE UN PATRN .............................................................. 69

4.3.

CATEGORAS DE PATRONES ............................................................ 70

4.3.1. PATRONES DE ARQUITECTURA ......................................................... 70

4.3.2. PATRONES DE DISEO: ...................................................................... 70
4.3.3. PATRONES DIALECTOS:...................................................................... 70
4.3.4. PATRONES INTERACCIN: ................................................................ 70
4.3.5. PATRONES USABILIDAD...................................................................... 70
4.4.

ERRORES MS COMUNES DE PATRONES USABILIDAD EN SITIOS

WEB.................................................................................................... 72
4.5.

ANALISIS DE PATRONES USABILIDAD.............................................. 73

4.5.1. CORTO MENU ....................................................................................... 73

4.5.2. VENTANAS DE TAREA ......................................................................... 73
4.5.3. PANEL .................................................................................................... 74
4.5.4. POCOS PANELES ................................................................................. 74
4.5.5. VERBOS Y SUSTANTIVOS ................................................................... 74
4.6.

ANALISIS DE PATRONES DE USABILIDAD EXISTENTES ................ 75

4.7.

ANLISIS DE PATRONES DE INTERFAZ DE USABILIDAD EN

PGINAS WEB ACADMICAS DE COLEGIOS DE LA CIUDAD DE

RIOBAMBA ....................................................................................................... 87
4.7.1. PGINA DEL COLEGIO EDMUNDO CHIRIBOGA ............................... 88
4.7.2. PAGINA WEB DE LA INSTITUCIN ACADMICA LA SALL .............. 91
4.7.3. PAGINA DE SAN FELIPE NERI ............................................................. 92
4.7.4. PAGINA WEB COLEGIO ISABEL DE GODIN ..................................... 95
4.8.

CREACION DE CATALOGO DE PATRONES DE DISEO DE

INTERFAZ WEB ........................................................................................ 96

IX

4.8.1. TAMAO DE INTERFAZ ........................................................................ 96

4.8.2. SITIO ACADMICO ANIMADO .............................................................. 97
4.8.3. BOTN ROLLOVER .............................................................................. 98
4.8.4. CHECKBOX ........................................................................................... 98
4.8.5. CONTEXTO............................................................................................ 99
4.8.6. CONTENIDO ........................................................................................ 100
4.8.7. IDENTIDAD CORPORATIVA ............................................................... 100
4.8.8. MENSAJES DE LA PORTADA CONCRETOS ..................................... 101
4.8.9. MULTIMEDIA INTERACTIVA ............................................................... 102
4.8.10.

CAJA DE COMENTARIO ................................................................. 103

4.8.11.

DESPLAZAMIENTO VERTICAL ...................................................... 104

4.8.12.

ANIMACIN ..................................................................................... 105

4.9.

MANUAL DE ESTILO PARA DISEO DE INTERFAZ WEB ............... 105

4.9.1. INTRODUCCIN .................................................................................. 105

4.9.2. ANTECEDENTES ................................................................................ 106
4.9.3. PLANIFICACIN .................................................................................. 107
4.9.4. IDENTIDAD CORPORATIVA ............................................................... 108
4.9.4.1. LOGOTIPO....................................................................................... 108
4.9.4.2. CONSTRUCCIN DEL IDENTIFICADOR DE LA INSTITUCIN .... 108
4.9.5. ARQUITECTURA DEL LOGOTIPO ...................................................... 109
4.9.5.1. RETCULA CONSTRUCTIVA .......................................................... 109
4.9.5.2. TAMAO MNIMO ............................................................................ 109
4.9.5.3. REA DE PROTECCIN ................................................................. 110
4.9.5.4. GAMA CROMTICA LOGOTIPO..................................................... 110
4.9.5.5. SIGNIFICADO DEL COLOR ............................................................ 110
4.9.5.6. PRESENTACIN CROMTICA ....................................................... 111
4.9.5.7. TIPOGRAFA CORPORATIVA......................................................... 111
4.9.6. DISEO DE INTERFAZ ....................................................................... 112
4.9.6.1. CONCEPTO ..................................................................................... 112
X

4.9.6.2. DISEO............................................................................................ 112

4.9.6.3. CARACTERISTICAS GENERALES ................................................. 112
4.9.6.3.1.TAMAO DE INTERFAZ ................................................................. 112
4.9.6.3.2.PRESENTACIN ............................................................................. 113
4.9.7. ANALISIS WEB .................................................................................... 113
4.9.7.1. ACCESIBILIDAD .............................................................................. 113
4.9.7.2. USABILIDAD .................................................................................... 113
4.9.7.3. INTERACTIVIDAD ........................................................................... 113
4.9.7.4. NAVEGABILIDAD ............................................................................ 114
4.9.8. ANLISIS ESTRUCTURAL .................................................................. 114
4.9.8.1. ARMONA......................................................................................... 114
4.9.8.2. EQUILIBRIO ..................................................................................... 114
4.9.8.3. PROPORCIONES ............................................................................ 114
4.9.8.4. LEGIBILIDAD Y LECTURABILIDAD ................................................ 116
4.9.8.5. FORMA VISUAL............................................................................... 116
4.9.9. PRESENTACIONES............................................................................. 117
4.9.9.1. GENERAL ........................................................................................ 117
4.9.9.2. ESPECIFICO.................................................................................... 117
4.9.9.3. GAMA CROMATICA DEL INTERFAZ WEB ..................................... 118
4.9.9.4. ESTRUCTURA VISUAL DE COMUNICACIN ................................ 118
4.9.9.4.1.DISPOSICIN DEL LOGOTIPO ...................................................... 118
4.9.9.4.2.TIPOGRAFA EN LA INTERFAZ ...................................................... 118
4.9.9.4.3.LEGIBILIDAD ................................................................................... 119
4.9.10.

DISEO Y ESTRUCTURA DEL INTERFAZ WEB ........................... 119

4.9.10.1. DISEO COMPLETO ...................................................................... 120

4.9.10.2. ELEMENTOS DE LA PGINA ........................................................ 120
4.9.11.

MAPA DE NAVEGACION DEL SITIO WEB .................................... 121

4.10. GUIN WEB......................................................................................... 122

4.10.1.

SECCION BIENVENIDA .................................................................. 122

XI

4.10.2.

SECCION INICIO ............................................................................. 123

4.10.3.

SECCIN OFERTAS ACADMICAS .............................................. 124

4.10.3.1. MECNICA GENERAL .................................................................... 125

4.10.3.2. EBANISTERA.................................................................................. 126
4.10.3.3. TEJIDO TPICO EN TELAR ............................................................ 127
4.10.3.4. CERMICA ...................................................................................... 128
4.10.3.5. JEFE DE COCINA - CHEF .............................................................. 129
4.10.4.

SECCIN NOTICIAS ....................................................................... 130

4.10.4.1. MATRICULAS .................................................................................. 131

4.10.4.2. INVESTIGACIONES ........................................................................ 132
4.10.4.3. CRONOGRAMA DE ACTIVIDADES ................................................ 133
4.10.4.4. ALUMNOS DESTACADOS .............................................................. 134
4.10.4.5. SPOT PUBLICITARIO ...................................................................... 135
4.10.5.

GALERIA .......................................................................................... 136

4.10.5.1. BACHILLERATO .............................................................................. 137

4.10.5.2. CICLO BSICO ................................................................................ 138
4.10.5.3. DOCENTES ..................................................................................... 139
4.10.6.

VOLUNTARIADO ............................................................................. 140

4.10.6.1. PASANTIAS INTERNACIONALES .................................................. 141

4.10.6.2. PROYECTO EMPRENDIMIENTO SOCIAL JUVENIL (JES) ............ 142
4.10.6.3. ALFABETIZACIN ........................................................................... 143
4.10.6.4. APADRINAMIENTO ......................................................................... 144
4.10.7.

CONTACTOS ................................................................................... 145

4.11. CONTENIDO ........................................................................................ 146

4.11.1.

DESCRIPCIN TIPOGRFICA ....................................................... 146

4.11.2.

USO DE IMGENES ........................................................................ 147

4.11.3.

ESTORY BOARD: PRESENTACION DE LA MARCA ..................... 148

4.12. EVALUACION MEDIANTE LOS PATRONES DE DISEO.................. 148

4.13. PROGRAMACIN ................................................................................ 152
XII

4.14. PRUEBAS DE USUARIO ..................................................................... 156

4.14.1.

TABULACIN Y ANLISIS .............................................................. 156

4.15. ANLISIS GLOBAL DE LAS PRUEBAS DE TAREAS ......................... 179

4.16. VALIDACIN DE LA HIPTESIS ....................................................... 180
4.17. CONCLUSIONES ................................................................................. 181
4.18. RECOMENDACIONES......................................................................... 182
RESUMEN ...................................................................................................... 183
SUMMARY ...................................................................................................... 184
BIBLIOGRAFIA ............................................................................................... 185

XIII

NDICE DE ILUSTRACIONES

1. Figura N I. 1 Elementos de la comunicacin visual11

2. Figura N I.2 Punto.13
3. Figura N I. 3 Lnea..13
4. Figura I. 4 Plano.13
5. Figura I. 5 Volumen.13
6. Figura I. 6 Forma14
7. Figura I.7 Tamao.14
8. Figura I. 8 Plano14
9. Figura I.9 Textura..15
10. Figura I. 10 Direccin15
11. Figura I. 11 Direccin15
12. Figura I. 12 Espacio..16
13. Figura I. 13 Gravedad..16
14. Figura II.14 El Proceso Del Diseo Grfico..17
15. Figura II.15 Circulo Cromtica.18
16. Figura II.16 Propiedades del color19
17. Figura II. 17 Colores..20
18. Figura II. 18 Colores Fros...21
19. Figura II. 19 Colores Claros21

XIV

20. Figura II. 20 Colores Oscuros.22

21. Figura II. 21 Colores Brillante.22
22. Figura IV. 21 Logotipo105
23. Figura IV. 23 Tamao Del Logotipo.106
24. Figura IV. 24 rea De Proteccin Del Logotipo106
25. Figura IV. 25 Gama Cromtica Del Logotipo..107
26. Figura IV. 26 Presentacin Del Logotipo107
27. Figura IV. 27 Proporcin De Tamao..111
28. Figura IV. 28 Proporcin Por Color.111
29. Figura IV. 29 Proporcin Por Color.112
30. Figura IV. 30 Forma Visual112
31. Figura IV. 31 Forma Visual113
32. Figura IV. 32 Presentacin113
33. Figura IV. 33 Presentacin Especfico.114
34. Figura IV. 34 Gama Cromtica Del Interfaz114
35. Figura IV. 35 Estructura Del Interfaz...115
36. Figura IV. 36 Estructura Del Interfaz115
37. Figura IV. 37 Diseo Completo.116

XV

NDICE DE TABLAS
Tabla1 Estructura De Casaday, Para Patrones De Usabilidad..72
Tabla2. Errores del diseo web73
Tabla3. Cmo Disear Una URL Amigable......75
Tabla 4. Declaracin De Polticas.76
Tabla 5. Marcar Campos Requeridos..77
Tabla 6. Acceso Subjetivo.78
Tabla 7. Navegacin Horizontal....80
Tabla 8. Delimitar Los Contenidos81
Tabla 9. Resumir Los Mensajes De La Portada....82
Tabla 10. Complementando El Mensaje.83
Tabla 11. Pgina Del Colegio Chiriboga.88
Tabla 12. Pgina san Felipe Nery89
Tabla 13. Pgina Del La Institucin Acadmica La Sall.90
Tabla 14. Pgina Del Colegio Isabel De Godin.....91
Tabla 15. Tamao de interfaz...96
Tabla 16. Diseo De Un Sitio Acadmico Dinmico.....97

XVI

Tabla 17. Botn Rollover...98

Tabla 18. Aplicacin De CheckBox.99
Tabla 19. Contexto....100
Tabla 20. Contenido.....101
Tabla 21. Identidad corporativa...101
Tabla 22. Mensajes de la portada...102
Tabla 23. Multimedia Interactiva O Dinmica102
Tabla 24. Evaluacin Mediante Los Patrones De Diseo..146

XVII

INTRODUCCIN
El diseo grfico es la accin de concebir, programar, proyectar, realizar
comunicaciones visuales, producidas en general por medios industriales y
destinadas

transmitir

mensajes

especficos

grupos

sociales

determinados. sta es la actividad que posibilita comunicar grficamente

ideas, hechos, valores procesados y sintetizados en trminos de forma y
comunicacin, factores sociales, culturales, econmicos, estticos y
tecnolgicos; dentro de esta se encuentra el
combinacin de texto, el arte grfico, sonido,

diseo web,

ya que la

animacin, fotografa,

codificacin permite el desarrollo de sitios web con navegabilidad,

accesibilidad, interactividad y usabilidad.
Debido a su amplio campo de diseo grfico y adems por la falta de
aplicacin de conocimientos cientficos que respalden a los sitios web
acadmicos se plante la creacin de catlogo de patrones de interfaz con la
finalidad que se tenga una gua para realizar posteriormente un sitio. Ya que
consiste en la planificacin, diseo e implementacin de la pgina web. No
es simplemente una aplicacin del diseo convencional, ya que requiere
tener en cuenta cuestiones tales como usabilidad, navegabilidad e
interactividad.
El diseo grfico de un sitio es una de las partes ms importantes de un
trabajo de diseo Web. Un sitio web acadmico debe constar de una buena
navegabilidad, usabilidad e interactividad, para lo cual implementamos un
catlogo de patrones de diseo de interfaz grafica web en el desarrollo de
la pgina web acadmica del colegio ADOLFO KOLPING.
Puesto que el patrn de diseo es la base para la bsqueda de soluciones a
problemas comunes en el desarrollo de sitios web el presente trabajo es la
creacin de un catlogo de patrones referentes al diseo de interaccin o
interfaz. Un patrn de diseo es una solucin a un problema de diseo.

Se creo un catlogo de patrones de diseo web acadmico para formalizar

un vocabulario comn entre diseadores, proporcionar el modo en que se
realiza el diseo y facilitar la usabilidad, navegabilidad e interactividad.
La tesis en su primera seccin se refiere a los antecedentes, objetivos,
justificacin e hiptesis del anteproyecto.
En el captulo, I se refiere sobre la institucin sus antecedentes, misin,
visin, principios, pensamientos.
El captulo II incluye, antecedentes bibliogrficos de la investigacin, las
bases tericas en las que se desarrolla: la descripcin del diseo grfico;
que sirvieron de referencia para el anlisis y desarrollo del catlogo.
En el captulo III se describe el desarrollo del diseo web y el anlisis de
patrones de interfaz web.
El captulo IV contiene el catlogo de patrones, el guion web. Mientras que el
captulo V abarca el instrumento, el anlisis e interpretacin de los datos
obtenidos, Conclusiones, Recomendaciones del estudio, la Bibliografa y
Anexos.

ANTECEDENTES
El diseo web, es la combinacin de texto informativo, arte grfico, sonido,
animacin y fotografa que llega a nosotros por computadora u otros medios
electrnicos.
La definicin del carcter de un sitio web educativo puede surgir de una
planificacin previa a la evolucin espontnea de una herramienta creada
para su utilizacin institucional por ende, esto motiv a la institucin Adolfo
Kolping a la creacin de su propio sitio Web.
Un Sitio Web sofisticado presenta contenido de varias fuentes de datos,
utilizando varias subvistas que completan una sola pgina. La unin de un
buen diseo con una jerarqua bien elaborada de contenidos aumenta la
eficiencia de la web como trasmisin de comunicacin e intercambio de
datos, que brinda posibilidades de contacto directo entre el productor y el
consumidor de contenidos, caracterstica destacable del medio.
El diseo web es una actividad que consiste en la planificacin, diseo e
implementacin de sitios web. No es simplemente una aplicacin del diseo
convencional, ya que requiere tener en cuenta cuestiones tales como
usabilidad, navegabilidad e interactividad.
La Unidad de Formacin Artesanal Adolfo Kolping, est ubicada en la
parroquia de Yaruquies, cantn Riobamba, provincia de Chimborazo.
En la apertura de la institucin se denomin Centro de Formacin Artesanal
y fue creado gracias al apoyo econmico de catlicos Alemanes a travs del
prroco de Yaruquies Wolfgang Schaft, quien luego del estudio socio
econmico de la poblacin, fue madurando la idea de crear un centro de
capacitacin o formacin.

Un 11 de octubre de 1999 se inicia el proceso de formacin de los primeros

artesanos, mediante un compromiso provisional, con 82 alumnos inscritos. El
6 de diciembre de 1999 comienza la construccin del edificio propio de la
Unidad de Formacin Artesanal en el recinto llamado Santa Rosa.
Hoy en da el colegio Adolfo Kolping cuenta con una infraestructura amplia
que acoge 500 estudiantes de toda la ciudad.
La institucin cuenta con el aval respectivo del Ministerio de Educacin,
Ministerio de Trabajo y la Junta Nacional de Defensa del Artesano.
Paralelamente la Unidad cuenta con el apoyo y respaldo del Colegio Buen
Pastor de Sevilla Espaa, MIB, Cmara de Artesanos de Llorak y la
fundacin AHIM.

JUSTIFICACIN
El patrn de diseo es la base para la bsqueda de soluciones a problemas
comunes en el desarrollo de sitios web. Por lo que el presente trabajo se
enfoca en la creacin de un catlogo de patrones referentes al diseo de
interaccin o interfaz.
Un sitio web acadmico debe constar de una buena navegabilidad,
usabilidad, diseo e interactividad, por lo que implementamos un catlogo
de patrones de diseo de interfaz grafica web, en el desarrollo de la pgina
web acadmica del colegio ADOLFO KOLPING.
Con la finalidad de formalizar un vocabulario comn entre diseadores,
proporcionando

el modo en que se realiza el sitio para garantizar la

usabilidad, navegabilidad e interactividad, ya que un catlogo de patrones

sirve de modelo en el desarrollo del sitio, para no cometer los mismos
errores presentes en sitios web de este tipo.
El catlogo de patrones de interfaz web fue evaluado y se observo que
ayudo a mejorar el nivel de comunicacin mantenindonos acorde con la
tecnologa a nivel mundial.

OBJETIVOS
OBJETIVOS GENERALES
Crear un catlogo de patrones de interfaz grfica de sitios web acadmicos
para su aplicacin en el desarrollo del sitio web para el colegio Adolfo
Kolping
OBJETIVOS ESPECFICOS

Estudiar fundamentos tcnicos para la creacin de diseo web.

Estudiar los conceptos de patrones y catlogos de patrones existentes.

Crear un catlogo de patrones para el diseo de sitios web acadmicos
en base al estudio de problemas recurrentes.

Desarrollar el sitio web para el colegio Adolfo Kolping aplicando el
catlogo de patrones.

Validar el sitio web desarrollado.
HIPTESIS
La aplicacin de un catlogo de patrones para el diseo de sitios web
acadmicos permitir mejorar la navegacin usabilidad e interactividad en
este tipo de sitios

CAPTULO I
1. MARCO HISTRICO
1.1. CENTRO DE FORMACION ARTESANAL ADOLFO KOLPING
Hemos seguido el ejemplo de Adolfo Kolping de Alemania, que recogi a los
nios y jvenes para educarlos, capacitarlos en artesanas de tal forma que
abandonen la calle, los malos ejemplos y puedan aspirar a un mejor nivel de
vida. En su honor nos llamamos ADOLFO KOLPING.1
1.2. RESEA HISTORICA
El padre Wolfgang Schaft, ms conocido como Padre Lobito, de origen
Alemn tomo posesin como prroco de Yaruques el 28 de Agosto de 1996
desde all pone en marcha su lnea de accin pastoral, poco a poco se va
dando cuenta de la situacin econmica, social y cultural de las parroquia
urbana mestiza e indgena de Yaruques y rural indgena de Cacha, frente a
esta realidad y dando nfasis en dos aspectos claves como son:
1. Los nios de estas 2 parroquias a duras penas avanzan a terminar la
instruccin primaria, para

luego salir a trabajar de cargadores, lustra

botas y en servicios domsticos, los que sern marginados para toda la

vida.
2. En el pas y en especial en la provincia de Chimborazo se da poca
importancia a la formacin Artesanal.
Frente a este panorama y como respuesta a estos surge la idea de crear
una institucin de formacin artesanal, una de las personas que afirma esta
idea es el Arq. Carlos Ortiz H.; quien viene trabajando en las obras sociales
que el padre emprende en la parroquia, adems es persona de confianza;
donde juntos van madurando la idea, la idea surge en mayo 19 de 1998.

Libros de vida del colegio Adolfo Kolping.1999

El 27 de Abril de 1999 se da la primera reunin, donde participan el Padre

Wolfgang Schaft, el Arq. Juan Carlos Ortiz, la Lcda. Piedad Yerovi y Janeth
Lpez, es aqu donde se propone, citar a la reunin a los moradores de la
parroquia de Yaruquies, an no se tena clara la idea, si va a ser centro de
capacitacin o a su vez centro de formacin o colegio.
Una nueva reunin se da el 27 de mayo de 1999, con el mismo grupo donde
se ve que es necesario invitar a sectores como el gremio de los artesanos, el
parque industrial, a la direccin de educacin bilinge e hispana, se habla
ya de que artesanas pueden darse en este centro se habla del sistema dual
de Alemania, que tiene mucho xito en la formacin artesanal, cada vez se
va cimentando la idea en todos los miembros, se apropian de la idea,
aspecto muy necesario para emprender con un proyecto grande e
importante.
Al inicio se denomin Centro de Formacin Artesanal y fue creado gracias al
apoyo econmico de catlicos alemanes a travs del prroco de Yaruques
Wolfgang Schaft, quien luego del estudio socio econmico de la poblacin,
va madurando la idea de crear un centro de capacitacin o formacin, hasta
que el 11 de octubre de 1999 se inicia el proceso de formacin de los
primeros artesanos, mediante un compromiso provisional, con 82 alumnos
inscritos.
El 6 de diciembre de 1999 comienza la construccin del edificio propio de la
Unidad de Formacin Artesanal en el Barrio llamado Santa Rosa. La
institucin cuenta con el aval respectivo del Ministerio de Educacin,
Ministerio de Trabajo y la Junta Nacional de Defensa del Artesano.
Paralelamente la Unidad cuenta con el apoyo y respaldo del Colegio Buen
Pastor de Sevilla Espaa, MIB, Cmara de Artesanos de Llorak y la
fundacin AHIM.

Hoy en da el colegio Adolfo Kolping cuenta con una infraestructura amplia

que acoge 500 estudiantes de toda la ciudad. La institucin cuenta con el
aval respectivo del Ministerio de Educacin, Ministerio de Trabajo y la Junta
Nacional de Defensa del Artesano.
1.3. MISIN
El Centro de Formacin Artesanal

Dirige su labor educativa a los

adolescentes de Riobamba que han culminado la instruccin primaria para

formarles y capacitarles en una profesin artesanal y mejorar su nivel de
vida con un aprendizaje terico prctico

contando con la cooperacin de

instituciones y organizaciones nacionales e internaciones.

1.4. VISIN
Convertir al centro en experiencia demostrativa que proponga una formacin
y capacitacin a los adolescentes, y jvenes A TRVEZ DEL SITEMA DE
FORMACIN

PROFESIONAL COMPARTIDA generando un proceso de

recuperacin de la cultura y revalorizacin del trabajo artesanal inyectando

en la sociedad ciudadanos tiles, crticos creadores y constructores de
nuevos horizontes para nuestro pas.
1.5. OBJETIVOS DEL CENTRO

Ofrecer una educacin til, productiva y de alta calidad a mediano plazo
(3 aos).

Responder a las demandas

laborales y econmicas del entorno,

formando artesanos con calidad tcnica y humana.

Recuperar la identidad cultural como base de la artesana.
1.6. COMO EDUCA EL UEFA
Como una nueva pedagoga que permita que los jvenes sean:


Artesanos responsables y calificados para producir con calidad, organizar

microempresas y garantizar la comercializacin de sus artesanas.

Con conocimientos suficientes para continuar nuevos estudios de
perfeccionamiento en otras instituciones educativas.

Dentro del sistema de FORMACIN PROFECIONAL COMPARTIDA con
prcticas en talleres y empresas que completan su formacin para el
trabajo.
1.7. PRINCIPIOS DE ADOLFO KOLPING.

Buen Cristiano.

Buen padre de Familia.

Buen ciudadano.

Buen artesano.
1.8. PENSAMIENTO DE ADOLFO KOLPING.

Sin alegra, sin humor el corazn humano no puede existir y mucho
menos en la juventud.

La eficacia en el trabajo es una de las principales muestras de
satisfaccin interior.

Si cada uno en su hogar hace lo mejor posible, pronto el mundo tendr
un lugar mejor.

10

CAPITULO II
2. MARCO TERICO - CONCEPTUAL
2.1. DISEO GRAFICO
El diseo grfico es un lenguaje visual que, mediante sus signos, resuelve
las necesidades comunicativas entre un emisor y mltiples receptores.2
Se aplica a cualquier tipo de concepto, idea o mensaje que se plantee
comunicar. El diseador grfico realiza la funcin de traductor en esta
comunicacin. Para ello debe conocer varios elementos:
El lenguaje
El mensaje a transmitir
Quin lo transmite (cliente)
El medio (TV, radio, prensa, etc.)
A quin va dirigido

Figura N II. 1 Elementos de la comunicacin visual

http://es.wikipedia.org/wiki/Dise%C3%B1o_gr%C3%A1fico

11

2.2. HERRAMIENTAS DEL DISEO GRAFICO

Es imprescindible manejar las herramientas que permitan plasmar el
mensaje traducido de una manera clara. Las herramientas informticas son
bsicas para el diseador, con varios tipos de programas:

Los de dibujo

Los de maquetacin y tratamiento de texto

Los de tratamiento de imgenes
2.3. ELEMENTOS DEL DISEO
Un diseador (sin importar su rama) puede realizar diseos sin conocimiento
alguno sobre la materia, ya sea por gusto personal o por su sensibilidad a la
creacin visual (talento) sin embargo conocer de estos principios le har ser
un mejor diseador. En general se distinguen 4 grupos de elementos
a. Elementos Conceptuales
b. Elementos Visuales
c. Elementos de Relacin
d. Elementos Prcticos

a. Elementos Conceptuales
Los elementos conceptuales son aquellos que estn presentes en el diseo,
pero que no son visibles a la vista. Se dividen en 4 elementos

Punto: Indica posicin, no tiene largo ni ancho, es el principio y el fin
de una lnea.

12

Figura N I.2Punto

Lnea: Es una sucesin de puntos, tiene largo, pero no ancho, tiene

una posicin y una direccin.

Figura N I. 3 Lnea

Plano: Un plano tiene largo y ancho, tiene posicin y direccin y

adems esta limitado por lneas.

Figura I. 4 Plano

Volumen: El recorrido de un plano en movimiento se convierte en

volumen, tiene posicin en el espacio, esta limitado por planos y
obviamente en un diseo bidimensional el volumen es ilusorio.

Figura I. 5 Volumen

13

b. Elementos Visuales
Es la lnea visible del dibujo, tiene largo y ancho. Su color y textura quedan
determinados por los materiales usados y como se usan. Poseen forma,
color, medida y textura. Son la parte ms prominente del Diseo.

Forma: Todo lo visible tiene una forma, la cual aporta para la
percepcin del ojo una identificacin del objeto.

Figura I. 6 Forma

Medida: Todas las formas tienen un tamao.

Figura I.7 Tamao

Color: El color se utiliza comprendiendo no slo los del espectro

solar, sino as mismo los neutros (blanco, negros, grises) y las
variaciones tonales y cromticas

.
Figura I. 8 Plano

14


Textura: Tiene que ver con el tipo de superficie resultante de la

utilizacin del material. Puede atraer tanto al sentido del tacto como al
visual.

Figura I.9 Textura

c. Elementos de Relacin
Se refiere a la ubicacin y a la interrelacin de las formas en un diseo

Direccin: La direccin de una forma depende de como esta
relacionada con el observador, con el marco que la contiene o con
otras formas cercanas.

Figura I. 10 Direccin

Posicin: La posicin de una forma depende del elemento o

estructura que la contenga.

Figura I. 11 Direccin

15


Espacio: Todas las formas por mas pequeas que sean ocupan un
espacio, el espacio as mismo puede ser visible o ilusorio (para dar
una sensacin de profundidad)

Figura I. 12 Espacio

Gravedad: El efecto de gravedad no solamente es visual, sino que

tambin psicolgica. Podemos atribuir estabilidad o inestabilidad a
una forma o a un grupo de ellas.

Figura I. 13 Gravedad

d. Elementos Prcticos
Los elementos prcticos van ms all del diseo en s y como es de esperar
son conceptos abstractos.

Representacin: Se refiere a la forma de realizar el diseo: puede
ser una representacin realista, estilizada o semi-abstracta.

Significado: Todo diseo conlleva consiente o subconscientemente
un significado o mensaje.

Funcin: Para lo que esta creado dicho diseo.

16

2.4. PROCESO DE UN PROYECTO DE SISEO

Figura II.14 El Proceso Del Diseo Grfico

Tras la entrevista con el cliente, el diseador debe tener en cuenta todos los
condicionantes dichos en el apartado, despus se debe seguir un proceso
de documentacin e informacin, tanto terico como grfico (interesa
conocer trabajos anteriores sobre el mismo tema, pues evita caer en tpicos
o repeticiones), luego comienza la fase de bocetaje.
Se plasmarn las primeras imgenes que traduzcan las ideas antes
aportadas. Tambin es el momento de plantear las dificultades tcnicas, tras
estos pasos se puede realizar un boceto ms acabado (Layout) para
presentar al cliente.
Si el cliente acepta la propuesta, el diseador empezar todos los pasos
para acabar la obra, sin que se pierdan los objetivos planteados desde un
principio.
2.5. TEORA DEL COLOR
El color no es una caracterstica de una imagen u objeto, sino que es ms
bien una apreciacin subjetiva nuestra. Se puede definir como, una
sensacin que se produce en respuesta a la estimulacin del ojo y de sus

17

mecanismos nerviosos, por la energa luminosa de ciertas longitudes de

onda. 3
2.5.1. EL CRCULO CROMTICO
El crculo cromtico nos sirve para observar la organizacin bsica y la
interrelacin de los colores.

Figura II.15 Circulo Cromtica

Los colores primarios son: el rojo, el azul y el amarillo, son colores que se
consideran absolutos y que no pueden crearse mediante la mezcla de otros
colores.
Los colores secundarios son: el verde, el violeta y el naranja y se obtienen al
mezclar partes iguales de dos primarios.
Los colores terciarios son: el rojo violceo rojo anaranjado, amarillo
anaranjado, amarillo verdoso, azul verdoso y azul violceo, se consiguen al
mezclar partes iguales de un color primario y de un secundario adyacente.

http://mit.ocw.universia.net/6.170/6.170/f01/pdf/lecture-12.pdf

18

2.5.2. PROPIEDADES DEL COLOR

Figura II.16 Propiedades del color

2.5.2.1.

TONO O MATIZ

Es el matiz del color, es decir el color en s mismo, supone su cualidad

cromtica, es simplemente un sinnimo de color. Es la cualidad que define la
mezcla de un color con blanco y negro. Est relacionado con la longitud de
onda de su radiacin. Segn su tonalidad se puede decir que un color es
rojo, amarillo, verde.4
Aqu podran hacer una divisin entre:

Tonos clidos (rojo, amarillo y anaranjados): aquellos que asociamos
con la luz solar, el fuego.

Tonos fros (azul y verde): Los colores fros son aquellos que
asociamos con el agua, la luz de la luna.
2.5.2.2.

BRILLO

Tiene que ver con la intensidad o el nivel de energa. Es la luminosidad de

un color (la capacidad de reflejar el blanco), es decir, el brillo. Alude a la
claridad u oscuridad de un tono. Es una condicin variable, que puede

Bierut, Michael (2001). Fundamentos del diseo grfico. Compilado por Michael Bierut,
Steven Heller, Rick Poynor. Ediciones Infinito

19

alterar fundamentalmente la apariencia de un color. La luminosidad puede

variar aadiendo negro o blanco a un tono.
2.5.2.3.

SATURACIN

Est relacionada con la pureza cromtica o falta de dilucin con el blanco.

Constituye la pureza del color respecto al gris, y depende de la cantidad de
blanco presente. Cuanto ms saturado est un color, ms puro es y menos
mezcla de gris posee.
2.5.3. LA PSICOLOGA DEL COLOR
Los colores despiertan respuestas emocionales especficas en las personas.
El factor psicolgico est formado por las diferentes impresiones que
emanan del ambiente creado por el color, que pueden ser de calma, de
recogimiento, de plenitud, de alegra, opresin, violencia..
La psicologa de los colores fue ampliamente estudiada por:

Colores clidos

Figura II. 17 Colores

Los colores clidos se proyectan hacia fuera y atraen la atencin. Por esta
razn, a menudo se usa el rojo en letreros y el diseo grfico. Los colores
ardientes son fuertes y agresivos, y parecen vibrar dentro de su espacio
propio.

20

El poder de los colores clidos afecta a la gente de muchas maneras, tales

como el aumento de la presin sangunea y la estimulacin del sistema
nervioso.

Colores fros

Figura II. 18 Colores Fros

El fro remite al azul en su mxima saturacin. En su estado ms brillante es

dominante y fuerte. Los colores fros nos recuerdan el hielo y la nieve.
Los sentimientos generados por los colores fros azul, verde y verde azulado
son opuestos a los generados por los colores ardientes; el azul fro aminora
el metabolismo y aumenta nuestra sensacin de calma

Colores claros

Figura II. 19 Colores Claros

Los colores claros son los pasteles ms plidos. Toman su claridad de una
ausencia de color visible en su composicin, son casi transparentes. Cuando
la claridad aumenta, las variaciones entre los distintos tonos disminuyen.

21

Los colores claros descubren los alrededores y sugieren liviandad,

descanso, suavidad y fluidez. Se parecen a las cortinas transparentes de
una ventana, y envan un mensaje de distensin. Son el color marfil, rosa,
celeste, beige.

Colores oscuros

Figura II. 20 Colores Oscuros

Los colores oscuros son tonos que contienen negro en su composicin.

Encierran el espacio y lo hacen parecer ms pequeo. Los colores oscuros
son concentrados y serios en su efecto. En cuanto a las estaciones, sugieren
el otoo y el invierno.
Combinar juntos los claros y los oscuros es una manera comn y dramtica
de representar los opuestos de la naturaleza, tales como el da y la noche.

Colores brillantes

Figura II. 21 Colores Brillantes

La claridad de los colores brillantes se logra por la omisin del gris o el

negro. Los colores azules, rojos, amarillos y naranjas son colores de brillo
pleno. Los colores brillantes son vvidos y atraen la atencin.

22

Un bus escolar amarillo, un racimo de globos de colores, el rojo de la nariz

de un payaso nunca pasan inadvertidos. Estimulantes y alegres, los colores
brillantes son colores perfectos para ser utilizados en envases, moda y
publicidad.
o Blanco.
Se halla en el extremo de la gama de los grises. Es un color latente por su
capacidad de potenciar los otros colores vecinos. El blanco puede expresar
paz, soleado, feliz, activo, puro e inocente.
o Negro.
Al igual que el blanco, tambin se encuentra en el extremo de la gama de
grises. Es el smbolo del silencio, del misterio y, en ocasiones, puede
significar impuro y maligno. Confiere nobleza y elegancia, sobre todo cuando
es brillante.
o Gris.
Simboliza la indecisin y la ausencia de energa, expresa duda y melancola.
Los colores metlicos tienen una imagen lustrosa, adoptando las cualidades
de los metales que representan. Dan impresin de frialdad metlica, pero
tambin dan sensacin de brillantez, lujo, elegancia, por su asociacin con
los metales preciosos.
o Amarillo
Es el color ms luminoso, ms clido, ardiente y expansivo. Es el color del
sol, de la luz y del oro, y como tal es violento, intenso y agudo. Suelen
interpretarse como animados, joviales, excitantes, afectivos e impulsivos.

23

o Naranja
Posee fuerza activa, radiante y expansiva. Tiene un carcter acogedor,
clido, estimulante y una cualidad dinmica muy positiva y energtica.
o Rojo.
Significa la vitalidad, es el color de la sangre, de la pasin, de la fuerza bruta
y del fuego. Est ligado al principio de la vida, expresa la sensualidad, la
virilidad, la energa; es exultante y agresivo. El rojo es el smbolo de la
pasin ardiente y desbordada, de la sexualidad y el erotismo.
o Azul.
Es el smbolo de la profundidad. Inmaterial y fro, suscita una predisposicin
favorable. La sensacin de placidez que provoca el azul es distinta de la
calma o reposo terrestres, propios del verde. Expresa armona, amistad,
fidelidad, serenidad, sosiego... y posee la virtud de crear la ilusin ptica de
retroceder. Este color se asocia con el cielo, el mar y el aire. El azul claro
puede sugerir optimismo.
o Violeta.
Es el color de la templanza, de la lucidez y de la reflexin. Es mstico,
melanclico y podra representar tambin la introversin.
o Verde.
Es el color ms tranquilo y sedante. Evoca la vegetacin, el frescor y la
naturaleza. Es el color de la calma indiferente: no transmite alegra, tristeza o
pasin. Cuando algo reverdece suscita la esperanza de una vida renovada.

24

o Marrn.
Es un color masculino, severo, confortable. Es evocador del ambiente local
otoal y da la impresin de gravedad y equilibrio. Es el color realista, tal vez
porque es el color de la tierra que pisamos.
2.5.4. IMPORTANCIA DEL COLOR
El color es uno de los medios ms subjetivos con el que cuenta el diseador,
tiene mucho poder de atraccin o rechazo dependiendo del uso que se le d.
Los colores tambin dan sensacin de movimiento, las emociones,
sensaciones, y en definitiva todo lo que los colores pueden llegar a expresar
y hacer sentir al espectador forma parte fundamental de la base de un buen
diseo.
El color, como elemento claramente evidenciado de nuestro diseo, puede
ser la clave de nuestro xito. Tanto si pensamos como si no, si nos damos
cuenta o no de ello, estamos cargando de significados cuando elegimos un
color.
2.6. IDENTIDAD CORPORATIVA
La identidad corporativa o identidad visual (IVC) es la manifestacin fsica de
la marca. Hace referencia a los aspectos visuales de la identidad de una
organizacin.
En general incluye un logotipo y elementos de soporte, generalmente
coordinados por un grupo de lneas maestras que se recogen en un
documento de tipo Manual Corporativo. Estas lneas maestras establecen
cmo debe aplicarse la identidad corporativa;

Identificando las paletas de colores.

Tipografas.
25


Organizacin visual de pginas y otros mtodos para mantener la

continuidad visual.

Reconocimiento de marca a travs de todas las manifestaciones
fsicas de la misma.

Los soportes en que ms habitualmente se refleja la imagen de marca
son:
o Papelera Corporativa
o Tarjetas de presentacin ( visita)
o Tarjetn
o Hoja membretada (Con membrete)
o Hoja de Fax
o Sobres

membretados

(Adems:

Bolsas,

Oficio,

Radiografa,
o Carpetas corporativas
o Invitaciones (Juntas, Exposiciones, Congresos, etc.)
o Etiqueta de envo (Cedes, paquetes, papelera, etc.)
o Notas de interior (Uso interno, secretarial, etc.)
o Formularios de pedido
o Contra recibos
o Vales de Caja
o Facturas
o Nota

26

Carta,

CAPITULO III
3. DISEO WEB
3.1. CONCEPTOS WEB
3.1.1.1.

INTERNET

Internet es la interconexin global de millones de redes y computadoras

para formar una red de rea extensa.
Lo que hace que el Internet funcione al Igual que dos personas necesitan
hablar el mismo idioma para poder tener una conversacin, todas las
computadoras que se encuentran conectadas a una red necesitan tener un
lenguaje comn con el fin de poder comunicarse.
El <lenguaje> capaz de hacer que las computadoras o las redes puedan
interactuar las unas con las otras; se denomina protocolo a un conjunto de
reglas de comportamiento que se encuentra formalizado y aceptado para
todo el mundo. Dentro de Internet, los protocolos son los que hacen posible
que cada computadora se pueda comunicar con cualquier otra.
HTTP es un protocolo sin estado, es decir, que no guarda ninguna
informacin sobre conexiones anteriores. El desarrollo de aplicaciones Web
necesita frecuentemente mantener un estado. Para esto se usan las cookies,
que es informacin que un servidor puede almacenar en el sistema cliente
por un tiempo indeterminado.
3.1.1.2.

LA WEB

Es una entidad que existe dentro de Internet, contiene un nmero ilimitado

de documentos utilizando una gran diversidad de medios, desde
documentos basados nicamente en texto hasta documentos con efectos
multimedia. La principal caracterstica de los documentos WWW es que

27

estos se encuentran unidos a otros documentos mediante una tecnologa

denominada Hipertexto.

El Hipertexto permite ir de un documento a otro que se encuentre
relacionado con el primero pulsando sobre una palabra o sobre un
grafico que ha sido configurado previamente como un enlace. Un
enlace se indica normalmente mediante una palabra o un grfico que
se diferencia del resto del texto por presentar un color diferente o por
estar resaltado. En funcin del destino los enlaces son clsicamente
agrupados del siguiente modo:
o Enlaces internos: Los que se dirigen a otras partes dentro de
las mismas pginas.
o Enlaces locales: Los que se dirigen a otras pginas del mismo
sitio Web
o Enlaces remotos: Los dirigidos hacia pginas de otros sitios
Web.
o Enlaces con direcciones de correo: Para crear un mensaje de
correo dirigido a una direccin.
o Enlaces con archivos: Para que los usuarios puedan descargar
ficheros.
3.1.1.3.

PGINA WEB

Una pgina Web es una fuente de informacin adaptada para la World Wide
Web (WWW) y accesible mediante un navegador de Internet. Esta
informacin se presenta generalmente en formato HTML y puede contener
hiperenlaces a otras pginas Web, constituyendo la red enlazada de la
World Wide Web.

HTML es un lenguaje utilizado para crear pginas Web que puedan
ser ledas por los exploradores WEB. Se trata de un lenguaje basado

28

en guiones, que quiere decir que utiliza secuencias especiales de

caracteres denominados etiquetas como rdenes.
Las etiquetas que se aaden a una determinada parte del texto determinan
el estilo en el que aparecer el texto. Las etiquetas tambin pueden ser
utilizadas

para indicar al

explorador que debe cargar grficos en

determinadas posiciones y otro tipo de etiquetas tambin pueden ser

utilizadas para crear enlaces con otras pginas.
3.1.1.3.1. TIPOS DE PGINAS WEB
3.1.1.3.1.1.

PGINAS WEB ESTTICAS

Una pgina Web esttica es una pgina que no requiere de actualizaciones

constantes. Se Destaca por su sencillez, rapidez, comodidad aunque ofrecen
pocas ventajas tanto a los desarrolladores como a los visitantes, ya que slo
se pueden presentar textos planos acompaados de imgenes y contenidos
multimedia como pueden ser videos o sonidos Est formada slo por cdigo
HTML y un estilo (CSS).
3.1.1.3.1.2.

PGINAS WEB DINMICAS

Las pginas Web dinmicas son aquellas que pueden acceder a bases de
datos

para extraer informacin que pueda ser presentada al visitante

dependiendo de determinados criterios. Estos sistemas permiten cambiar el

contenido de la pgina Web sin tener que utilizar un programa de ftp para
subir los cambios. Las pginas dinmicas son ms complejas y verstiles.
Existen diversos

lenguajes

de programacin que permiten agregar

dinamismo a una pgina Web tal es el caso de ASP, PHP, JSP y varios mas.
3.1.2. SITIO WEB
Un sitio Web (website) es un conjunto de pginas Web, comunes a un
dominio de Internet o subdominio en la World Wide Web en Internet.
29

3.1.3. PORTAL WEB

Un portal de Internet es un sitio Web cuyo objetivo es ofrecer al usuario, de
forma fcil e integrada, el acceso a una serie de recursos y de servicios,
entre los

que suelen encontrarse buscadores, foros,

documentos,

aplicaciones, compra electrnica, etc. Principalmente estn dirigidos a

resolver necesidades especficas de un grupo de personas o de acceso a la
informacin y servicios de una institucin pblica o privada.
3.2. DISEO WEB
Cualquier debate sobre el diseo Web pierde muy a menudo su sentido
porque esta expresin tiene significados muy distintos para cada persona.
Algunos componentes, tales como la programacin o el diseo visual, se
incluyen generalmente en cualquier debate, pero su importancia en la
construccin de sitios vara segn la persona, as como el sitio. Ms all de
las consideraciones visuales o tecnolgicas, muchos sealan la creacin y
organizacin del contenido de los sitios Web como el aspecto ms
importante del diseo Web.
Con influencias procedentes de la gestin de bibliotecas, del diseo grfico,
de la programacin, de la tecnologa cliente/servidor, del diseo de la
interfaz de usuario, de la facilidad de empleo y muchas otras materias, el
diseo Web es, realmente, un campo multidisciplinar
3.2.1. IMGENES DIGITALES
Las imgenes digitales son el resultado de una mezcla de colores cada uno
definido por una serie precisa de nmeros.
3.2.1.1.

TIPOS DE IMGENES

En el mundo grafico hay dos tipos de archivo de imagen digital, los Raster o
mapa de bits y los vectoriales.
30

a. Vectorial
En este tipo de archivos cada elemento de la imagen, con su posicin,
tamao y caractersticas est definido por una funcin matemtica. Permite
modificar las caractersticas de cada elemento sin afectar el resto de la
imagen. Son tiles para representar smbolos, esquemas o dibujos lineales.
b. Raster o mapa de bits
En estas las imgenes se dividen en pequeos puntos (pixeles) colocados
en forma de rejilla y

cada uno almacena por separado la informacin

referida al color exacto de ese punto.

Profundidad de bit, tambin se llama profundidad de color. Describe el
tamao de la paleta de color utilizada para crear una imagen digital por
ejemplo, 8 bits, 16 bits y 24 bits.
3.2.2. MODOS DE IMAGEN

CMYK (Cian, Magenta, Yelow, Black) es el sistema mas empleado en
imgenes impresas.

RGB (Red, Green, Blue) es el sistema empleado por los monitores,
independientemente de la imagen as se representa en pantalla y cada
pxel incluye un porcentaje de cada color que vara de 0 a 256.

Escala de grises,

en este sistema disponemos

de un sistema de

gradaciones que va del blanco puro al negro puro. Los datos de una
imagen de escala de grises ocupan tres veces menos espacio que los
de una imagen RGB.

LAB, espacio de color terico utilizado para procesar imgenes. Las
imgenes LAB estn divididas en tres canales uno para la luminosidad y
dos para el color.

31

3.2.3. RESOLUCIN:
Es la relacin mnima entre pixeles y tamao de la ampliacin. Alta
resolucin, dcese de las imgenes formadas, generalmente. Por un
milln de pixeles o ms y se utilizan para hacer copias de gran calidad.
Estas imgenes ocupan mucho espacio.
Baja resolucin, se aplica a las imgenes que tienen un tamao de archivo
reducido, cuyas copias son de baja calidad.
3.2.4. FORMATOS DE ARCHIVO
Las imgenes digitales se pueden crear y guardar en muchos formatos que
estn diseados para poder usar las imgenes en diferentes medios, como
correo electrnico, impresin y pginas Web.
Es importante preparar y guardar las imgenes en el formato correcto para
su integracin con otros programas. Los formatos de archivo que se
identifican con una nica extensin de archivo aparece como un cdigo de
tres dgitos al final de su nombre: ejemplo, retrato.tif. Sin embargo, los
formatos de archivo especiales, desarrollados para una sola aplicacin como
por ejemplo, Photoshop. psd, estn restringidos a la aplicacin original y a
otras pocas bajo licencia.
La compresin de los archivos sirve para que las imgenes sean manejables
en internet.
Las conexiones de banda ancha, las redes ultra rpidas y los medios de
almacenamiento de alta capacidad pueden haber reducido la necesidad de
comprimir

las

imgenes

digitales

siendo esencial para su uso en internet.

32

por sistema, aunque todava sigue

3.2.5. FORMATOS GRFICOS WEB

JPEG. Acrnimo de Joint Photographic Experts Group. Formato de
archivo universal utilizado para comprimir imgenes. El nivel de
compresin se puede seleccionar en una escala desde 1 a 99, siendo la
compresin 1 la de mnima perdida de informacin y 99 la compresin
ms elevada. Es el formato de imagen mas usado en la Web.

JPEG es una rutina de compresin con prdida pues la calidad se
deteriora cada vez que la imagen se vuelve a guardar. Esta perdida de
calidad se aprecia especialmente en las gradaciones sutiles.

GIF Graphic Interchanged Format fue desarrollado por CompuServe

exclusivamente para la Web.

Se usa comnmente con imgenes

grficas de colores slidos y formas ntidas para internet. El formato gif

est pensado para la visualizacin en pantalla debido a su reducida
paleta cromtica. El formato GIF est basado en una rutina de
compresin sin prdida, por lo que las imgenes se pueden volver a
guardar sin disminucin de calidad.

Otras variaciones, como el formato GIF89a, permiten usar un fondo
transparente alrededor de motivos irregulares para fusionarlos con el
color de fondo de la pgina Web. PNG es

el ltimo formato de

compresin aparecido en la Web. Nace en, tiene lo mejor de los dos

formatos por excelencia GIF y JPG.
3.2.6. EL COLOR EN LA WEB
Para definir

el color en una pgina Web disponemos

de sistemas, el

hexadecimal y el nombre directo. En el sistema hexadecimal se emplea en la

nomenclatura #rrrggbb empleando la rr para los valores del rojo gg para los
valores del verde y bb para los valores del azul. Algunos colores
hexadecimales son: #FF0000, #FFFFFF. Con un nombre directo tenemos:
red, blue, yellow.

33

3.2.6.1.

TEORA DEL COLOR PARA WEB

El color, adems de su funcin esttica y de carcter comunicacional, ofrece

al usuario seales

de navegacin, organizacin del

contenido,

jerarquizacin, reas activas etc.

Segn los estudios, el visitante de un website forma su primera impresin
sobre un Web durante los primeros nueve segundos de su visita, por
tanto, resulta crtico encontrar un esquema de color adecuado para el
contenido y los visitantes, capaz de potenciar el contenido sin distraer o
confundir a los usuarios.
3.2.6.1.1. PERCEPCIN Y EXPERIENCIA
Como en cualquier otra experiencia, nuestra reaccin y relacin con el color
y los elementos grficos de un site se desarrolla principalmente en un nivel
subconsciente.
Expresar el tono y la personalidad significa que los colores deben reforzar la
comunicacin de los valores y la personalidad del Site y la compaa,
institucin o elemento que representa.
3.2.6.1.2. CONTEXTO EMOCIONAL Y CULTURAL
Antes de ponernos a disear debemos asegurarnos de tener el mejor
conocimiento posible de la audiencia a la que est destinado y la eleccin de
colores finales se basar en el conocimiento del entorno cultural y
emocional.
Colores segn el gnero son otro punto importante a la hora de tomar una
decisin sobre el conjunto de colores finales a emplear ser el grupo target
del Website segn su gnero. En <el significado del color para los gneros>
de Natalia Khow, se apuntan algunas teoras interesantes derivadas de
estudios acadmicos sobre color y gnero, por ejemplo:
34

Los hombres prefieren el naranja al amarillo y las mujeres prefieren amarillo

al naranja. Yuxtaposicin de colores.- Un color determinado en solitario
puede ser demasiado agresivo, pero puede resultar acertado cuando esta
combinado con otros colores.
3.2.6.1.3. . COLORES Y SUS ASOCIACIONES
Los colores poseen significados e interpretaciones:

El rojo se socia a la sangre, y a las sensaciones de energa, excitante,
apasionado o ertico. La mayora de los colores llevan implicaciones
positivas y negativas. El rojo evoca sensaciones agresivas, sugiriendo
clera o violencia.

El naranja es el color de la carne, o el calor cmodo del fuego del hogar.
Las implicaciones positivas de este color sugieren falta de formalidad.

El amarillo es el color del sol. Este color es optimista moderno. La
energa del amarillo puede llegar a ser abrumadora. Por lo tanto, el
amarillo no es un color aconsejable para dominar periodos de tiempo
largos.

El

verde en su modo positivo sugiere naturaleza,

vida,

bosques,

plantas, estabilidad, ecologa.

El azul sugiere modernidad, distancia, espiritualidad o elegancia quiz
exclusividad. En su lado negativo, podemos pensar en la implicacin de
tristeza, de pasividad, de enajenacin o depresin.

El violeta es el color de la fantasa, de la alegra, de lo impulsivo, y de
estados ideales. En su modo negativo, puede sugerir pesadillas o locura

El blanco y espacio (descanso visual), el blanco en su vaco acta como
equilibrador maravilloso entre los colores.
Cuantos ms espacios de <descanso visual> tengan nuestros diseos,
ms fcil hacemos la visualizacin de los mismos; esto es especialmente
importante si los documentos son densos en contenido. Se aconseja usar

35

un lmite una paleta de colores 2 o 3 colores y sus variaciones de

luminosidad.
3.2.7. TIPOGRAFIA EN LA WEB
Debemos tener presente que el objetivo de una pgina Web correctamente
diseada es ayudar al usuario a navegar por la informacin y el correcto uso
de la tipografa da carcter y mejora nuestra capacidad de transmisin de
ideas.
3.2.7.1.

CLASES DE TIPOGRAFAS Y FUENTES

La tipografa es el estudio y clasificacin de las diferentes familias o tipos de

letras y diseo de caracteres. La fuente es el grupo de caracteres con
cualquier diseo, cuerpo o estilo. Estos caracteres suelen incluir letras,
nmeros, ligaduras, signos.

Espaciado (kerning).- Cualquier programa grfico, tiene la capacidad
de modificar el espacio entre letras, ajustndolo a nuestro antojo hasta
que el texto se visualice correctamente.

Interlineado.- El interlineado es el espacio entre las lneas de texto, debe
ser proporcional al tipo de letra y su tamao, as como al tipo de pblico
al que va dirigido el diseo.
3.2.7.2.

TAMAO DEL TEXTO

No utilizar la misma fuente para todos los tamaos, algunas fuentes no se

visualizan bien en tamaos de menos de 10 o 12 puntos.
Por legibilidad, el tamao de las letras no puede ser ni muy grande ni muy
pequeo.

36

3.2.7.3.

TIPOGRAFA Y COLOR

Debe existir contraste entre el color de los tipos y el fondo, adems los
colores de ambos deben ser compatibles. Para elegir las combinaciones de
color ms adecuadas para texto y fondo se tiene en cuenta una serie de
reglas:

Contraste de tonos (clidos y fros)

Contrastes de valor (luminosos y oscuros)

Contrastes de saturacin (vivos y apagados)

El contraste de valor es el ms importante, tenemos que visualizar en

trminos de claridad y oscuridad, no en tonos de color.
3.2.7.4.

ALINEACIN DEL TEXTO.

A veces el texto justificado puede resultar ms esttico y ms adecuado.

Pero se debe tener especial cuidado con la separacin y evitar las lneas
apretadas o demasiado separadas.
La alineacin a la derecha es correcta en textos cortos y funciona bien en
algunos casos por necesidades del diseo. Pero para textos extensos no es
recomendable, dificulta la lectura y no ofrece una gua del inicio de cada
lnea.
El alineado al centro, es tambin indicado para textos cortos, pero resulta
fatal para textos largos.
Longitud de lneas de texto.- Las lneas de texto no deben ser muy largas, ni
muy cortas cansan al usuario por extender demasiado su visin, o por estar
saltando continuamente de lnea.

37

3.2.7.5.
a.

NORMAS BSICAS DE TIPOGRAFA

Algunas fuentes slo funcionan en tamaos grandes: emplalos tan

solo para ttulos, nunca para bloques de texto.

b.

No mesclar las fuentes en un diseo.

1 o 2 estar bien: salvo

excepciones un nmero mayor resultar un confuso desastre.

3.2.8. ELEMENTOS GRAFICOS WEB
Los elementos grficos introducen a la composicin informacin visual que
complementa en gran medida el mensaje que se desea transmitir, y que a
veces es tan importante en el diseo como los contenidos textuales del
mismo.
a) Los iconos.- Los

conos

son uno de los elementos grficos ms

usados, cuya misin fundamental

informacin visual concreta.

es ofrecer,

sin distraer,

Para poder desempaar

una

acertadamente

esta misin, un icono debe reunir una serie de caractersticas, entre las
que destacan las siguientes:
Debe ser lo ms sencillo posible, con los suficientes detalles
como para expresar lo que debe, pero no ms.
Debe seguir los modelos ya aceptados por el pblico tipo que
los va a visualizar.
Debe estar perfectamente concebido para la informacin
concreta que va a representar.
Como elementos grficos en los documentos y pginas Web. Los iconos
sirven para identificar secciones, situar puntos visuales interactivos, ampliar
la informacin de enlaces textuales a los que acompaan.
Se recomienda que el icono sea pequeo, ya que el usuario asocia por
costumbre los iconos con elemento grficos de dimensiones limitadas siendo
normal que oscilen entre 10 x 10 pixeles.
38

Si el icono se acompaa de un texto, ste debe quedar limitado a una sola

palabra, dos a lo sumo, que indiquen literalmente y sin confusiones la
finalidad del icono.
b) Ilustraciones.- La ilustracin es uno de los recursos ms usados en
diseo clsico, pues al no estar sometidas frreamente a un modelo
natural, permiten al ilustrador dibujar libremente el motivo que ms se
adapte a la composicin.
En las pginas Web las ilustraciones aportan esttica e informacin. No
obstante en ciertos casos pueden ser importantes elementos grficos que
complementan la informacin que aporta la pgina.
c) Logotipos.- El logotipo es un distintivo o emblema formado por letras,
abreviaturas, objetos grficos, etc. Peculiar de un empresa, marca o
producto, a los que representa e identifica de forma unvoca. El logotipo
debe funcionar en diferentes medios. Su diseo debe permitir su correcta
visualizacin en medios impresos y en pantalla.

d) Las fotografas.- La fotografa es actualmente uno de los elementos ms

importantes en diseo grfico, debido principalmente a sus propiedades
nicas. En primer lugar, las fotografas representan de modo excepcional
el mundo real que nos rodea. La fotografa en la Web se suele utilizar
para los siguientes fines:

Como elemento compositivo de la pgina principal, sobre todo

cuando esta pgina sirve meramente de presentacin del sitio
Web.

Formando parte integrante de dinteles superiores, generalmente

como fondos de los mismos. Es este un uso muy acertado,
dotando a la pgina de una identidad propia muy acusada,
debiendo el tema de la fotografa est directamente relacionado
con el espritu del sitio Web. Es pues un elemento identificador

39

del sitio, debiendo aplicarse a todas y cada una de las pginas

del mismo.

Como elemento identificador de un sitio, una seccin o una

pgina de primer nivel.

Formando parte

del

cuerpo

de la pgina normalmente

acompaada de contenidos textuales. En estos

casos

cada

fotografa se encuentra directamente relacionada con el texto

que la rodea, sirviendo de refuerzo informativo al mismo.
Una de las principales limitaciones al uso de las fotografas en las pginas
Web es el peso de los ficheros grficos que originan. Por lo tanto, si
queremos o necesitamos incluir este tipo de contenidos en una pgina Web
habr que optimizar al mximo los ficheros grficos, poniendo especial
cuidado en el tipo de formato elegido, en las dimensiones fsicas de las
fotografas y en su resolucin.
e) Textos como imgenes.- Se usan textos como grficos para solventar
las fuertes limitaciones que presenta la Web en lo que respecta a familias
tipogrficas. Presentando los textos como imgenes tambin podemos
conseguir vistosos efectos imposibles de aplicar a los textos simples,
como degradados, filtros, transparencias.

f) Botones grficos.- Los botones grficos son elementos exclusivos de

las aplicaciones informticas, en las que tienen bsicamente la misin de
capturar eventos realizados por el usuario para lanzar acciones de
respuesta adecuadas.
El uso comn de los botones grficos es el de representacin de opciones
en un men de navegacin. Los sistemas de navegacin suelen estar
formados por enlaces textuales, a los que, como mucho, se les cambia el
estilo propio de este tipo de elementos (color azul y subrayado cuando estn
inactivos, color morado y subrayado cuando han sido ya visitados).

40

g) Los banners.- Un banner es un anuncio que habitualmente se presenta

en una pgina Web. Se suelen colocar

en una pgina Web para

anunciar una empresa producto o servicio, cobrando el propietario del

sitio Web una cantidad variable por ello.
Un banner se presenta como una imagen que muestra informacin muy
concreta sobre un producto o servicio. A la hora de disear un banner hay
que tener en cuenta que es fundamentalmente un recurso comercial,. Que
cuesta dinero a la empresa que lo publica y que a cambio espera vender
productos o crear marca. La efectividad de un banner se mide por medio de
CTR (Clic Through Ratio), nmero de veces que un banner es visualizado
dividido por el nmero de veces que es pinchado.
h) Cliparts y dingbats.- Un clipart es una imagen ya diseada que
podemos utilizar en un diseo, directamente o tras haber sido retocado
en un programa grfico. Los clipart pueden ser vectoriales o de mapa de
bits.
La temtica de los dingbats es variada, pudiendo encontrarse material
figurativo realista, smbolos estandarizados, signos, formas geomtricas, etc.
i) Las animaciones.- las animaciones son un recurso cada vez ms
utilizado en el diseo de pginas Web, tanto en su versin clsica de GIF
animado como en la ms actual e interactiva pelcula flash (formato
SWF). Las animaciones GIF poseen las ventajas de ser admitidas por
cualquier navegador sin necesidad de plugins especiales, ofrecen
generalmente una rpida descarga.
Las animaciones o pelculas SWF, ofrecen funcionalidades adicionales que
las hacen ms verstiles y operativas: trabajo con grficos vectoriales,
interactividad,

posibilidad de programacin mediante cdigo script

(ActionScript).

41

j) Imgenes de fondo.- una imagen de fondo bien empleada puede recrear

un ambiente determinado una poca, un entorno de trabajo, un grupo
social etc. Aportando una informacin visual propia que no se puede
conseguir con el uso exclusivo de colores de fondo.
Las imgenes utilizadas como fondos en las pginas Web son elementos
grficos en formato GIF, JPG o PNG que se sitan en una pgina como
fondo de algn elemento contenedor.
El principal inconveniente de usar imgenes de fondo es que pueden llegar a
entorpecer la correcta visualizacin de los contenidos situados encima de
ellas

siendo por ello necesario en estos

casos

elegir imgenes

cuidadosamente, con objeto de que los contenidos textuales que se sitan

encima de ellas tengas el suficiente contraste como para poder ser ledos
con comodidad.
k) Otros elementos grficos.- Adems de elementos grficos ya
mencionados, en el diseo de una pgina Web, podemos utilizar otros
componentes, entre los que destacamos los siguientes:

1. Lneas horizontales.- Su misin es separar bloques de contenido,

creando un lmite visual entre ellos. Es mejor incluir lneas simples, de un
solo color y sin sombra, evitando lneas animadas, pues distraen al
usuario de los contenidos importantes.
2. Bullets o topos.- son pequeos elementos grficos que se utilizan para
marcar un punto concreto de la pantalla o para acompaar
principalmente en listas

sin ordenar precediendo a

al texto,

cada uno de los

elementos de la misma. La ventaja principal de este tipo de

construcciones es que permiten la construccin de rollovers con los topos,
pudiendo cambiar estos de color cuando se pasa el puntero sobre su
texto asociado.

42

3.3. INTERFAZ WEB

El interfaz es el medio de comunicacin entre los navegantes que acceden a
una pgina Web y el sitio Web completo, el conjunto de sus pginas y las
aplicaciones que corren por debajo de forma transparente al usuario.
Cuando uno de los sistemas que se comunican es un ser humano pasamos
al concepto de interfaz de usuario. Por un lado tenemos un sistema fsico o
informtico y por otro a una persona que desea interaccionar con l, darle
instrucciones concretas, siendo la interfaz de usuario la herramienta que
entiende a ambos y es capaz de traducir los mensajes que se intercambian.
Composicin Web.- Los elementos grficos fundamentales normalmente
no se presentan aislados, sino que se agrupan en entidades lgicas y
funcionales, tratando de expresar cada una de ellas algn tipo de
informacin concreta al espectador.
3.3.1. EL DINTEL
Se entiende por dintel una zona de la interfaz Web situada en la parte
superior de la misma, de anchura generalmente igual a la de la pgina y
altura variable, en la que se ubica generalmente el logotipo del sitio Web o
de la empresa propietaria, acompaado generalmente de un texto
identificador de la misma y de otros elementos de diseo como fotografas
(simples o formando un montaje), formularios de login (entrada de claves
de acceso al sistema), banners publicitarios, etc.
Las misiones principales del dintel en la interfaz son:

Identificar el

sitio Web en el

que se encuentra el usuario,

mediante el logotipo y el nombre del mismo, de la empresa

propietaria o de la marca que representa.

43

Dar personalidad propia al sitio, definiendo un estilo propio que

exprese su naturaleza e identidad, generalmente basado en los
colores corporativos de la empresa o marca.

Identificar cada una de las pginas pertenecientes al sitio Web,

ya que el dintel suele ser comn en todas ellas, creando con
ello un elemento de referencia comn.

Crear una separacin visual

entre el

interfaz y el contenido central

borde superior de la

de la misma, haciendo ms

cmoda su visualizacin y lectura.

El motivo por el que el dintel se encuentra situado en la zona superior de la
interfaz y el logotipo en su parte izquierda obedece a consideraciones de
jerarqua visual. En la cultura occidental estamos acostumbrados a leer de
arriba hacia abajo y de izquierda a derecha, por lo que la parte superior
izquierda de una pgina es la primera a la que dirige el usuario la vista, con
lo que situando en ella el logotipo nos aseguramos que sea el primer
elemento grfico que el espectador observe.

La forma ms

comn del

dintel

es

rectangular,

aunque tambin es

posible encontrar dinteles con trazados curvos, planos y con sombras, a un

solo color o policromticos, aislados o fundidos con otras partes de la
interfaz.

Su color o colores deben ser los adecuados para que el logotipo destaque
de forma clara sobre el fondo del mismo. Suelen utilizarse colores que
contrasten lo suficiente con el logotipo como para que ste se visualice con
claridad
3.3.2. SISTEMAS DE NAVEGACIN
Generalmente se presentan como mens

formados

por diferentes

opciones, con las que el usuario puede interaccionar; al hacer click sobre

44

cada una ellas es cargada una pgina o seccin de la misma diferente Cada
men de navegacin puede estar formado por opciones textuales, grficas o
mixtas, siendo frecuente utilizar en ellas efectos dinmicos para acentuar
el

carcter interactivo de las

mismas.

El efecto ms

habitual es

el

conocido rollover, en el que todos los componentes una opcin o algunos de

ellos cambian de aspecto al situar el usuario el puntero sobre ella (evento
mouseover), volviendo la opcin a su estado inicial al abandonarla el puntero
(efecto mouseout).
Un tipo de men muy aceptado es el de pestaas, que simula el aspecto de
un clsico archivador de carpetas, apareciendo en primer plano la pestaa
activa, en un color diferente y unido visualmente a la base comn o al cuerpo
de la pgina. Un formato de men cada vez ms usado es el de tipo "migas
de pan", sobre todo en pginas de contenidos eminentemente textuales,
que presenta en forma textual una serie de enlaces que describen la ruta
que ha seguido el usuario para llegar a la pgina actual a partir de la home o
pgina de inicio, permitiendo regresar a cualquiera de ellas rpidamente.
Estos mens poseen la ventaja adicional de ubicar al visitante en el total del
sitio, con lo que ste sabe en cada momento dnde se encuentra y cmo ha
llegado all.
Sean los mens estticos o dinmicos, grficos o textuales, lo que no hay
que olvidar nunca es que son uno de los elementos ms importantes de
una interfaz Web, ya que son las herramientas que ofreceremos a los
visitantes para poder navegar por las diferentes pginas que forman el sitio
Web y para localizar la informacin que busca.
Es por tanto muy importante su diseo. Deben tener un aspecto visual que
los identifique como parte de la pgina, guardando los estilos generales de
sta, pero teniendo la suficiente carga visual como para ser localizados de
forma rpida, aunque sin pasarse, pues no deben distraer la atencin del
usuario de los contenidos principales.

45

Su ubicacin en la interfaz debe permitir un cmodo acceso a las opciones

(enlaces) que lo forman, pero sin llegar a estorbar al resto de elementos de
la misma.
No tiene por qu existir un solo men en una pgina,
conveniente dividir el
aconsejables ms).

sistema de navegacin en dos

Caso de ser necesario, el

siendo a veces
mens

(no son

segundo men o men

secundario deber disearse de forma que se identifique claramente como

tal, siendo habitual mantener el men principal como elemento general de
navegacin del sitio Web completo y utilizar el men secundario para
permitir la navegacin entre las diferentes pginas de una seccin o nivel
concreto.
Sistemas dobles muy comunes son los formados por un men principal
lateral y uno secundario ubicado en la zona superior del cuerpo principal de
la pgina, que puede ser de tipo "migas de pan", y los formados por un men
principal horizontal bajo el dintel y uno secundario en el lateral, aunque es
posible cualquier combinacin lgica y funcional.
3.3.3. EL CUERPO DE LA PGINA
El cuerpo de la pgina es la parte de la interfaz Web que presenta a los
usuarios informacin especfica sobre un tema concreto. Por lo tanto, es la
parte de la pgina que la identifica e individualiza frente a las dems de un
sitio Web.
Si el dintel identifica en sitio Web y los sistemas de navegacin permiten al
usuario navegar por los contenidos del mismo, el cuerpo de la pgina va a
ser el escaparate donde visualizar la informacin que anda buscando, el
punto donde podemos

comunicarnos

cuestin concreta y determinada.

46

con l

directamente sobre una

Al ser la parte ms importante de la interfaz, el espacio destinado a ella debe

ser el mayor de todos, ocupando generalmente entre el 50% y el 85% del
total. Su ubicacin es siempre central, bajo el dintel (si lo hay) y al lado del
men lateral de navegacin (si lo hay).
Por ejemplo, es habitual que el cuerpo central lleve un ttulo que identifique
claramente la pgina a la que ha accedido el usuario. Este ttulo se situar
en la parte superior de esta zona, y puede ser reforzado mediante un men
de navegacin tipo "migas de pan".
El tamao de las letras del ttulo de pgina debe ser superior al del resto de
los contenidos, de tal forma que destaque sobre ellos, efecto que puede
aumentarse dando al mismo un color que le aporte un mayor peso visual. En
este caso no es imprescindible que el ttulo de pgina sea de mayor tamao,
siempre que por su contraste de colores destaque lo suficiente.
Todos los elementos grficos que situemos dentro del cuerpo de pgina
deben presentar un aspecto similar al del resto de elementos de la interfaz,
respetando sus estilos generales de diseo.
3.3.4. EL PIE DE PGINA
El pie de pgina es un elemento opcional, que suele contener informacin
muy concreta. Si la pgina es muy alta, de tal forma que el usuario se vea
obligado a utilizar la barra de desplazamiento vertical del navegador, el pie
de pgina suele contener un men auxiliar que permita al usuario continuar
navegando por el sitio Web sin tener que volver a buscar el men principal.
Tambin puede contener un men especfico, en el que sueles mostrar
enlaces a servicios muy particulares del sitio Web, como contratacin de
publicidad, formulario de contacto, ofertas de empleo, condiciones de uso,
polticas de seguridad, etc.

47

Uno de los usos ms comunes del pie de pgina en la actualidad es mostrar

informacin sobre la empresa propietaria del sitio Web o de su responsable
directo. Se muestra en cada pgina el nombre de la empresa o responsable
y una direccin fsica o de correo electrnico vlida. Esta informacin se
suele complementar con el nmero de telfono y fax e informacin sobre
copyright de los contenidos de la Web.
Los contenidos del pie de pgina pueden aparecer alineados de cualquiera
de las formas aceptadas (a la izquierda, centrados, a la derecha o
justificados), aunque lo normal es que aparezcan centrados en pantalla.
Caso de que aparezcan alineados a la derecha o a la izquierda, conviene
siempre hacerlo con respecto a los dems elementos de la pgina que
definan la lnea principal de alineaciones en ese lado.
Aunque no es obligatorio poner pie de pgina en una pgina Web, s que es
aconsejable, ya que aparte de mostrar informacin concreta, a la que
muchos usuarios estn ya acostumbrados, establece una delimitacin del
final

del documento, que ayuda al espectador a definir visualmente las

diferentes zonas de la pgina y evita el mostrar contenidos "pegados" a la

parte inferior de la ventana del navegador Web.
3.4. USABILIDAD WEB
Usabilidad se refiere a la experiencia del usuario al interactuar con un sitio
Web. Un sitio Web con usabilidad es aqul que muestra todo de una forma
clara y sencilla de entender para el usuario.
Aunque es imposible crear un sitio que sea claro y eficiente para cada
usuario, el diseador debe esforzarse para mostrar las cosas tan claramente
como sea posible, de tal modo que reduzca al mnimo cualquier aspecto que
pueda ser confuso.

48

3.4.1. DEFINICIONES ISO

La Organizacin Internacional para la Estandarizacin (ISO) dispone de dos
definiciones de usabilidad:
ISO /ICE 9126 La usabilidad se refiere a la capacidad de un software de ser
comprendido, aprendido, usado y ser atractivo para el usuario, en
condiciones especficas de uso
Esta definicin hace nfasis en los atributos internos y externos del producto,
los cuales contribuyen a su usabilidad, funcionalidad y eficiencia. La
usabilidad depende no slo del producto sino tambin del usuario. Por ello
un producto no es en ningn caso especficamente usable, slo tendr la
capacidad de ser usado en un contexto particular.
A la hora de calificar la calidad de una aplicacin web, uno de los factores
ms importantes es la usabilidad. Es el atributo ms visible ya que determina
el grado de satisfaccin del usuario respecto de la aplicacin web; de ello
depende que sea utilizada o no.
ISO 8402

define la calidad como el conjunto de propiedades y

caractersticas de un producto o servicio, que le confieren aptitud para

satisfacer unas necesidades explcitas o implcitas.
Observamos que la calidad es sinnimo de unos factores que pueden ser
medidos:

Eficiencia

Flexibilidad

Facilidad de uso

Portabilidad

Seguridad, etc.

49

ISO 9126 [basada en el modelo de Mc Call] plantea un modelo normalizado

que permite evaluar y comparar productos sobre la misma base. Aqu la
calidad queda definida a un alto nivel de abstraccin por seis caractersticas:

Funcionalidad: Las funciones satisfacen necesidades declaradas o

implcitas [ISO 9126: 1991]

Fiabilidad: Capacidad de un sistema para mantener su nivel de

rendimiento

Usabilidad: Esfuerzo necesario para el uso y la valoracin individual

de tal uso, por parte de un conjunto de usuarios. [ISO 9126: 1991]

Portabilidad: Es la capacidad de un sistema para ser transferido de

un entorno a otro. [ISO 9126: 1991]

Mantenibilidad:

Es

el

esfuerzo

necesario

para

realizar

modificaciones especficas. [ISO 9126: 1991]

Eficiencia: Es la relacin entre el nivel de prestaciones de un sistema

y el volumen de recursos utilizados en condiciones declaradas. [ISO
9126: 1991]

Este estndar no proporciona mtricas ni mtodos de medicin, por lo que

no son prcticas las mediciones directas de las caractersticas de calidad.
Se revis la ISO 9126 y se incluy un nuevo modelo de calidad que distingue
entre tres aproximaciones a la calidad de producto en ISO 14598, a saber:

Calidad Interna: Se mide por las propiedades estticas del cdigo,

utilizando tcnicas de inspeccin

Calidad externa: Se mide por las propiedades dinmicas del cdigo

cuando ste se ejecuta

Calidad en uso: Se mide por el grado por el cual el software est

realizado en funcin de las necesidades del usuario en el entorno de
trabajo para el que fue construido

50

3.4.1.1.

USABILIDAD: MTODOS Y TCNICAS DE

EVALUACIN ISO
A la hora de calificar la calidad de una aplicacin web, uno de los factores
ms importantes es la usabilidad. Es el atributo ms visible ya que determina
el grado de satisfaccin del usuario respecto de la aplicacin web; de ello
depende que sea utilizada o no.
Ocurre que la ingeniera de software se ocupa de aquellos atributos del
software relacionados con caractersticas internas del sistema, [fiabilidad,
seguridad, productividad] dejando de lado la perspectiva del usuario.
Pero en el caso de las aplicaciones web, estas estn diseadas para que
sean usadas por los usuarios, existe una interaccin entre los usuarios y el
sistema web.
El trmino usabilidad segn [Bevan, Kirakowsky, Maissel] es planteado
desde tres puntos de vista:

Orientado al producto

Orientado al usuario

Orientado al rendimiento del usuario

ISO 9126-1. Este estndar define la usabilidad como la capacidad de un

producto software de ser comprendido, aprendido, usado y de ser atractivo
para el usuario, en condiciones especficas de uso
Esta definicin expone el nfasis en los atributos internos y externos del
producto, los cuales contribuyen a su usabilidad. Se observa que la
usabilidad no depende slo del producto, sino tambin del usuario.

51

ISO 9241-11 Este estndar (que es parte de la serie ISO 9241) proporciona
la definicin de la usabilidad que se utiliza en estndares ergonmicos:
La medida en la que un producto se puede usar por determinados usuarios
para conseguir objetivos especficos con efectividad, eficiencia y satisfaccin
en un contexto de uso especificado.
La efectividad es la precisin y la plenitud con la que los usuarios alcanzan
los objetivos especificados. A esta idea van asociadas la facilidad de
aprendizaje (en la medida en la que ste sea lo ms amplio y profundo
posible), la tasa de errores del sistema y la facilidad del sistema para ser
recordado (que no se olviden las funcionalidades ni sus procedimientos).
Por eficiencia se entendern los recursos empleados en relacin con la
precisin y plenitud con que los usuarios alcanzan los objetivos
especificados.
Y por satisfaccin se entender la ausencia de incomodidad y la actitud
positiva en el uso del producto. Se trata, pues, de un factor subjetivo.
Esta norma explica cmo identificar la informacin que se necesita
considerar en el momento de especificar o evaluar la usabilidad en trminos
de medidas de funcionamiento y de satisfaccin del usuario. La direccin se
da en cmo describir el contexto de uso del producto y de las medidas de
usabilidad en una manera explcita. Incluye una explicacin de cmo la
usabilidad de un producto se puede especificar y evaluar como parte de un
sistema de calidad, por ejemplo, uno que sea conforme con el estndar ISO
9001.
Tambin explica cmo las medidas de funcionamiento y de satisfaccin del
usuario se pueden utilizar para medir como un componente cualquiera de un
sistema afecta la calidad del mismo dentro del contexto de su uso.

52

3.4.1.1.1. APLICACIN DE J. NIELSEN CON ISO 9241-11

El principal problema de la usabilidad reside en que es una cualidad
demasiado abstracta para ser medida directamente.
Por esta razn Nielsen la descompone en cinco atributos para poder
estudiarla:

Facilidad de aprendizaje

Eficiencia

Recuerdo en el tiempo

Tasa de errores

Satisfaccin
3.4.1.1.2. MTRICAS DE EVALUACIN DE CALIDAD

Estas son las mtricas propuestas en el estndar ISO 9126-4:

Mtricas relacionadas con la efectividad

Mtricas relacionadas con la productividad

Mtricas relacionadas con la seguridad

Mtricas relacionadas con la satisfaccin

3.4.2. PRINCIPIOS HEURSTICOS DE USABILIDAD

Los principios heursticos aqu mostrados estn basados en un documento

con licencia copyleft de la consultora Evolucy y la herramienta software que
ha desarrollado el grupo Griho. Se trata de 11 principios basados en los
principios heursticos de Nielsen y adaptados a la evaluacin heurstica de la
Web. Cada uno de ellos se divide en aspectos observables ms concretos. 5

UML y Patrones. Introduccin al anlisis y diseo orientado a objetos - Larman - Prentice

Hall

53

1. Claridad de propsito y objetivos

El sitio web debe comunicar de manera inmediata su propsito, funcin u
objetivo, ya que con un simple vistazo a la pgina se sabe qu pretende y
para qu sirve adems el sitio debe ser fcil de recordar y estar relacionado
con sus objetivos y nombre
2. Visibilidad y orientacin inmediatas
Los usuarios deben estar informados acerca de su situacin (ubicacin y
estado) y de lo que sucede en todo momento en el sitio web, la cual incluye
de manera visible el ttulo del sitio, de la seccin, los vnculos que estn
claramente identificados donde no existe informacin u acciones ocultas que
requieran de una accin para su visualizacin
3. Adecuacin al mundo, los objetos mentales del usuario y la lgica de
la informacin
El sitio web est adaptado al mundo real de los usuarios, su lenguaje,
conocimientos, etc. A dems usa un lenguaje para el usuario con palabras,
frases y conceptos que le sean familiares, siendo claro, simple y con una
sola idea por prrafo.
a) Los smbolos e iconos.- que utiliza son comprensibles para el usuario y
facilitan la interaccin con la pgina, la informacin es clara y precisa. La
lgica de presentacin de los contenidos es familiar o comprensible para el
usuario y cuando existen opciones estn ordenadas de manera lgica para
la forma de pensar del usuario (no la interna de la organizacin).
b) Formato de la informacin

54

La pgina usa el lenguaje sencillo, no utiliza jergas ni tecnicismos si no son

absolutamente necesarios. El lenguaje debe ser claro, simple y con una sola
idea por prrafo.
La informacin est estructurada con ttulos, negritas, endentados y vietas,
el lenguaje, la disposicin de la informacin es accesible y de lectura rpida
para el usuario. La estructura y presentacin de la informacin no necesita
explicaciones o informacin adicional para su comprensin ya que los textos
y enunciados de los campos estn redactados de forma afirmativa.
Los nombres de los botones de accin tienen etiquetas especficas y no
generales y utiliza el lenguaje en forma directa
4. Reconocimiento ms que memoria
La pgina web se basa en el reconocimiento ms que en el recuerdo para
permitir al usuario interactuar con el sitio de manera fcil y productiva, lo que
permite ver y seleccionar, ms que recordar y escribir, la informacin est
organizada segn una lgica reconocida y familiar para el usuario.
5. Control y libertad del usuario
La pgina deposita el control en el usuario, el registro de usuario, si existe,
solo es necesario al finalizar un proceso y se puede obtener la mayor parte
de la funcionalidad del sitio sin necesidad de registrarse.
Existe una salida de la pgina, del proceso o de la estructura de informacin:
desconectar, cancelar, inicio, etc. Por lo que:

No se inician de manera automtica acciones que el usuario no ha
ordenado explcitamente

No se utilizan animaciones no controladas por el usuario

Es posible guardar la informacin de la pgina web

55


Es viable imprimir la informacin de la pgina web sin perder

informacin.

Es posible aumentar y disminuir el tamao de la letra

El sitio se visualiza perfectamente con diferentes resoluciones

La pgina Web no introduce tecnologas que requieren versiones
actualizadas de navegado-res o plugins externos.
6. Consistencia y Estndares
La pgina es consistente internamente y con los estndares externos. Los
usuarios no han de preguntar si las diferentes palabras, situaciones o
acciones significan lo mismo. En general se siguen las normas y
convenciones de la plataforma sobre la que se est implementando el
sistema.
a) Consistencia.- Es la existencia de coherencia en lo que presenta y
estabiliza una sola idea con diferentes sinnimos, por lo que se debe tener
en cuenta:

Las etiquetas de los vnculos tienen los mismos nombres que los
ttulos de las pginas a las que se dirigen.

Las mismas acciones llevan a los mismos resultados y los idnticos
elementos son iguales en todo el sitio

La misma informacin (texto) se expresa de la misma forma en toda la
pgina

La informacin est organizada y es mostrada de manera similar en
cada pgina
b) Estndares.- Es mantener normativas generales que rene las
caractersticas comunes a la mayora, por lo que se debe tener en cuenta
que:

56


La pgina utiliza los estndares (HTML, XHTML, CSS, etc.) de forma

correcta

Se utilizan los colores estndares para los vnculos visitado y no
visitados

No utiliza de manera diferente a la norma, convenciones o etiquetas
universales (por ejemplo, no utilizar un icono en lugar del "ver ms")

Las reas de navegacin superior, laterales, herramientas de
bsqueda y controles (botones, botones de radio, etc.) siguen los
estndares comunes de mercado.
7. Prevencin de errores gracias a un diseo adecuado
El diseo de un sitio debe prevenir los errores de los usuarios antes de que
se cometan.

El motor de bsqueda tolera errores tipogrficos (maysculas),
ortogrficos (acentos) y acepta palabras similares

Es posible seleccionar la informacin en situaciones donde se pueden
producir errores en la escritura

La pgina especifica o da un ejemplo sobre cmo debe introducirse la
informacin en campos problemticos (P.e. fecha dd/mm/aaa o
mm/dd/aa).
8. Flexibilidad y eficiencia de uso
La pgina facilita y optimiza el acceso de los usuarios no importa la variedad
que sean sus caractersticas.

La pgina no requiere volver a escribir la informacin ya solicitada en
pginas anteriores

El buscador permite la bsqueda por varios criterios

Existen aceleradores o atajos para realizar operaciones frecuentes

57


Es posible repetir una accin ya realizada anteriormente de manera

sencilla

Cuando es pertinente la pgina permite al usuario personalizar
acciones frecuentes

El cursor aparece parpadeante en el primer campo del formulario a
completar

Se utiliza un diseo que se adapte a las diferentes resoluciones
posibles que pueda tener un usuario
9. Informacin y diseo minimalista
La pgina Web evita toda informacin o grfico irrelevante y slo incluye la
informacin necesaria.
La informacin visible es la nica esencial para realizar la accin. La pgina
no contiene informacin que es irrelevante o raramente necesaria a dems:

No existe redundancia de informacin en la pgina

La informacin es corta, concisa y precisa.

Cada elemento de informacin se distingue del resto y no se confunde
con otros

El texto es fcil de hojear, est bien organizado y las frases no son
muy largas

Las fuentes son legibles y tienen un tamao adecuado

Las fuentes utilizan colores con suficiente contraste con el fondo

No existen ms de 15 iconos

No existen ms de 7 recursos grficos (nuevo, bullets, etc.) en la
pgina.
10. Eficacia de los mensajes de error
Los mensajes de error ayudan a solucionar el problema ya que informan del
error de manera comprensible, estn escritos en lenguaje comn y no con

58

cdigos o lenguaje tcnico. Informan de la causa del error de manera que se

pueda evitar su repeticin en el futuro, permitiendo dar soluciones o
sugerencias para solucionar el mismo.
11. Documentacin de ayuda
La documentacin de ayuda est adaptada a las necesidades de los
usuarios la misma que es visible y fcil de encontrar.
La documentacin de ayuda es sensible al contexto, se refiere a la seccin
donde se encuentra el usuario adems est orientada a los objetivos del
usuario (generalmente a la resolucin de problemas) y se brinda
explicaciones cortas, sencillas de entender para que pueda acceder el
usuario.
3.4.3. MTODOS DE EVALUACIN DE USABILIDAD
Es obvio decir que todas las tcnicas y metodologas llevan asociadas una
base terica y unos componentes de ejecucin complejos que hacen
necesaria la presencia de profesionales en su desarrollo. Por lo que, siempre
que sea posible, debemos considerar la incorporacin de expertos a las
fases de trabajo para poder obtener mayor rendimiento.
Y una recomendacin ms: Las tcnicas que impliquen la participacin de
usuarios, se deben realizar con usuarios reales. Si no, la calidad de los
resultados obtenidos se ver reducida en gran medida.
Se pueden considerar dos grupos de UEM [Usability Evaluation Methods]:
Los UEM empricos, donde participan:

Usuarios

Evaluadores

Observadores

59

Expertos en test

Aqu se utilizan tcnicas tales como pensar en voz alta

Los UEM analticos donde no tienen acceso los usuarios, incluyen un
equipo de especialistas en usabilidad. Para el proceso de inspeccin se
utilizan directrices o heursticas para realizar el proceso de inspeccin.
3.4.3.1.

MTRICAS DE USABILIDAD

Por medicin se entiende el proceso de atribuir nmeros o smbolos

a los atributos de las entidades en el mundo real. a travs de la
medicin es posible juzgar lo que se mide.

Una mtrica es la correspondencia del mundo real, a un mundo
formal. Una mtrica es un valor numrico asignado a algn evento del
mundo real, software, sitio web, aplicacin web, etc.

Un atributo es la caracterstica de una entidad de tipo directo o
indirecto, por ejemplo, links no operativos, micro-cdigo no accesible,
etc.
3.4.3.2.

MTODOS APLICADOS PARA LA EVALUACIN DE

USABILIDAD
3.4.3.2.1. REUNIONES O WORKSHOPS CON
RESPONSABLES DEL SITE
El uso de mtricas no limita la intervencin humana y ofrece una reduccin
de la subjetividad en la evaluacin de calidad de un sitio o aplicacin web,
etc.
Estas reuniones son una muy buena oportunidad de acercar los objetivos del
negocio a la facilidad de uso del futuro web. Lo que se persigue con esta
tcnica es identificar todos los factores relacionados con el negocio y el uso
de la web antes de iniciar el plan de diseo. Para ello se renen en un

60

mismo espacio a todos los responsables directos del proyecto: encargados o

gerentes, diseadores del web, personas relacionadas con la gestin de
clientes, responsables de marketing y comunicacin, etc. Es importante la
presencia de personas con alto grado de poder de decisin dentro de la
empresa.
3.4.3.2.2. CUESTIONARIOS PARA USUARIOS
Esta tcnica puede ser muy valiosa para conocer la foto fija de los usuarios
de nuestro sitio en un momento determinado: preferencias sobre contenido,
momentos de conexin, familiaridad con Internet, intereses, etc. En ningn
caso hay que tomarla como una medicin de la usabilidad del sitio web, sino
ms bien como una tcnica exploratoria de usos y motivaciones de los
usuarios actuales o potenciales.
Las preguntas incluidas en el cuestionario han de ser consensuadas por el
equipo responsable del sitio. Han de centrarse en aquellos puntos en los
cuales tanto los encargados del diseo, como el conjunto del equipo, tengan
dudas o quieran simplemente confirmar algn elemento acerca de los
usuarios.
Uno de los puntos en los que hay que prestar mucha atencin cuando se
disea el cuestionario es la realizacin de las preguntas:

Evitar preguntas que inciten a una respuesta determinada, reduciendo
el sesgo de quien realiza el cuestionario. Ser lo ms objetivo y
asptico posible en las preguntas.

Procurar hacer una prueba interna antes de lanzar el cuestionario
definitivo a los usuarios para ver si en la prctica funciona. Comprobar
que vamos a recoger la informacin que deseamos.

Esta tcnica puede ser usada para conocer la opinin (recoger
feedback)

de

los

usuarios

61

una

vez

que

se

ha

lanzado

definitivamente el site a la Red, por lo que es til en estrategias de

post-venta.
3.4.3.2.3. ENTREVISTAS Y GRUPOS DE DISCUSIN
Estas tcnicas son usadas para conocer de manera directa la opinin de los
usuarios o posibles usuarios de nuestro sitio web. Son tcnicas exploratorias
y en ningn caso pueden constituir medicin alguna de la usabilidad. En el
mbito de la experiencia de uso dotan de informacin complementaria a las
tcnicas de Test de Usuarios y Card Sorting, para ayudar a la comprensin
de comportamientos de uso y agrupaciones de informacin.
El principal aporte de estas tcnicas es poder realmente captar, mediante el
discurso del usuario, cul es su grado de satisfaccin con el site o cules
son sus valoraciones sobre los contenidos. En definitiva, estas tcnicas son
ideales para conocer los porqus de la aceptacin o rechazo, y lo que
subyace tras las decisiones de los usuarios.
Por su naturaleza estas tcnicas requieren de usuarios reales y una
comunicacin presencial, cara a cara a ser posible. En ambos casos, tanto
en las entrevistas como en los grupos, es necesaria la presencia de un
moderador cuya funcin fundamental es fomentar el dilogo y dejar fluir la
conversacin, basndose en la empata con los usuarios. Hoy en da debido
a las posibilidades de las nuevas tecnologas estas tcnicas se pueden
realizar online. En este caso, la presencia de un entrevistador, moderador o
tcnico con experiencia es fundamental.
3.4.3.2.4. CARD SORTING
Esta es una tcnica de agrupacin de tarjetas, que persigue entender las
lgicas de agrupacin de informacin de los usuarios para, de esta manera,
orientar la organizacin de los contenidos del sitio web. La forma de llevarla

62

a cabo es invitando a los usuarios a una dinmica de agrupacin de tarjetas.

Cada tarjeta contendr:

Un ttulo o enunciado, que normalmente se corresponde con cada
uno de los contenidos que se incluirn en el site

Una breve descripcin del enunciado lo ms breve y clara posible,
evitando incluir palabras contenidas en el ttulo.
Las tarjetas se entregarn al usuario y este, bajo su criterio personal, ira
agrupando tarjetas (o sea, contenidos) segn sus preferencias en montones.
El resultado de la agrupacin mostrar la concepcin del usuario en cuanto a
afinidad de contenidos.
Esta tcnica es conveniente complementarla con una entrevista para permitir
al usuario expresar los motivos que le han llevado a realizar los grupos de
tarjetas. De esta forma se pueden conocer las lgicas que subyacen en las
preferencias de los usuarios, que permitirn orientar el diseo del site.
3.4.3.2.5. BENCHMARK
Esta tcnica consiste en determinar los sitios competidores directos y
analizarlos identificando las mejores prcticas de usabilidad, junto con
aquellos sitios que aunque no son competidores s pueden servirnos como
referencia por llevar a cabo acciones parecidas a las nuestras en sus sitios.
Un ejemplo de ello sera una librera online, donde adems de fijarnos en
sitios referentes como www.amazon.com, no debera de dejar pasar la
oportunidad de ver como lo hacen otros e-commerces como las tiendas de
ropa, puesto que este tipo de negocios incorporan formas de pago
interesantes para nuestro site.
Esta tcnica puede ser realizada por una persona o un grupo de personas
(paneles de expertos). Pero lo importante es identificar aquellos sitios que
mejor lo hacen dentro y fuera de nuestro sector, y centrarnos en aquellos

63

puntos cruciales del negocio definidos en los workshops o las reuniones de

descripcin de proyecto.
3.4.3.2.6. ANLISIS HEURSTICO
Esta es una de las tcnicas ms utilizadas y conocidas dentro del contexto
de evaluacin de usabilidad. Consiste en la revisin del site por un conjunto
de expertos en usabilidad (entre 3 y 5), los cuales contrastan las pginas del
site con una serie de criterios generales previamente definidos, conocidos y
aceptados por la comunidad de expertos en usabilidad que se denominan
principios heursticos.
Se pueden dar varios tipos de anlisis heursticos atendiendo a su alcance:

Anlisis del site completo

Anlisis

de

secciones

concretas,

dentro

del

site,

definidas

previamente por quien encargue el estudio.

La operativa del anlisis heurstico es el trabajo individual de cada experto
sobre las distintas secciones en las que se ha dividido el site y luego su
puesta en comn. En una primera fase cada experto trabaja de manera
separada en la bsqueda de problemas de usabilidad dentro del site. Una
vez detectados, el experto realiza una explicacin del problema haciendo
referencia al heurstico/s en cuestin al que directamente afecta la cuestin.
Por definicin, los problemas son susceptibles de ser superados, por lo que
el experto a continuacin esboza una posible solucin en forma de
recomendacin.
Una vez los expertos terminan el trabajo individual, se realiza una puesta en
comn y se elabora un documento nico con las aportaciones de cada uno.
Normalmente el documento se ordena segn las mismas secciones del sitio
web y por la severidad o grado de prioridad de los problemas detectados.

64

En el anlisis heurstico, al ser un anlisis subjetivo, pueden darse

diferencias entre los expertos. Todo ello enriquece an ms el resultado final
de esta tcnica, siendo un punto de partida para los diseadores y
desarrolladores del sitio.
3.4.3.2.7. PROTOTIPADO
Esta tcnica consiste en reproducir un modelo del sitio web final en una
maqueta, para poder testarlo previamente a la salida a Internet. El prototipo
permite de manera rpida aclarar algunas dudas de diseo en cuanto a
funcionalidades o apariencia antes de continuar con el desarrollo definitivo
del producto. Esta tcnica ayuda a depurar errores en fases iniciales del
ciclo de vida del sitio web con la consecuente reduccin de costos y
aprovechamiento de recursos resultante.
Dentro de esta tcnica podemos encontrarnos dos tipos de prototipos:

Prototipos de baja fidelidad (low-fidelity): aquellas maquetas
realizadas de manera rpida y sencilla (papel o dibujos, o
presentaciones en pantalla del ordenador). El objetivo de este tipo de
prototipado es asentar mediante test con usuarios las lneas bsicas,
sobre todo funcionalidades y de estructura de contenidos, de nuestro
producto web.

Prototipos de alta fidelidad (high-fidelity): son maquetas con un
mayor nivel de detalle desde el punto de vista grfico y de
programacin. No se pueden considerar el producto final pero se
acercan en mayor medida que los de baja fidelidad. El objetivo es
poder testar elementos de diseo y el uso de las funcionalidades que
tendr el producto final. En esta fase la programacin puede ser real o
simulada, pero la intencin es presentar al usuario como respondera
el sitio web ante sus acciones.

65

El prototipo es una tcnica orientada a la inspeccin, se busca poner a

prueba los cimientos de nuestro sitio web. Una vez estos cimientos son
slidos de cara a nuestros usuarios, existe va libre para el desarrollo
definitivo. Si los test con usuarios no dan el aprobado, es aconsejable volver
a fases iniciales para replantearse aquellos elementos puestos en
entredicho.
El resultado de los test con usuarios sobre los prototipos indicar si podemos
continuar con fases posteriores o es conveniente volver a fases previas y
replantear el prototipo.
3.4.3.2.8. EL TEST DE USABILIDAD
Esta tcnica supone el momento de la verdad, el enfrentamiento de nuestro
sitio web con el usuario. Su objetivo es constatar con usuarios reales la
usabilidad de nuestro sitio. Para ello situamos a un usuario pblico objetivo
de nuestro sitio web delante del ordenador con nuestro sitio.
La operativa de esta dinmica es la siguiente:

Se necesita un usuario, un tcnico que dirija el test y un ordenador
con el sitio web cargado. Tambin puede estar presente una tercera
persona como asistente del tcnico de usabilidad, retirado del campo
de visin del usuario, cuya finalidad es tomar notas de lo que dice y
hace el usuario durante el test.

El usuario se sienta en frente del ordenador a una distancia normal. El
entorno en el que se realice el test ha de reproducir al mximo el lugar
de navegacin del usuario y ha de estar ausente de ruidos e
interrupciones exteriores.

El tcnico se sita al lado del usuario en una posicin ms retrasada.
La intencin es no distraer al usuario durante la navegacin
respetando su espacio personal. El asistente normalmente se situar
detrs de ambos o a un lado dependiendo la distribucin de la sala
66

(ancho, largo) a una distancia suficiente para que el usuario pueda

olvidarse de su presencia.

El tcnico se presenta l mismo, al asistente, a la empresa a la que
pertenece, e indica al usuario los motivos por los cuales ha sido
seleccionado para este test. Tambin es importante introducir un poco
al usuario en los objetivos del estudio, sin entrar en detalles,
simplemente para hacer partcipe al usuario y que sea ms real la
situacin. Esta parte es importante crear un entorno amigable que
facilite la conversacin y navegacin por el sitio de cara a tranquilizar
al usuario.

Despus de esto, el tcnico explicar al usuario la dinmica: Ahora te
voy a ir dando una serie de tareas para realizar que en principio son
hipotticas pero totalmente factibles. Es decir, que te voy a pedir que
te pongas en una situacin ficticia para realizar una serie de tareas.
Pero estas tareas son totalmente realizables dentro del site. Las
tareas son ledas en voz alta por el usuario o el tcnico, y si hay
dudas se aclararn todo lo que sea necesario hasta que el usuario
entienda lo que debe hacer. En ningn caso esta aclaracin ha de
contener informacin sobre cmo encontrar la informacin o lograr el
xito de la tarea.

Importante en este punto decir al usuario que se exprese con total
libertad, de ah la necesidad de generar un ambiente agradable y de
confianza al inicio. Debemos pedirle que piense en voz alta de forma
que podamos conocer las impresiones del usuario durante su
navegacin.

Las tareas nuevas deben ser ledas segn se finalizan las anteriores.
Se consideran terminadas cuando el usuario da por hecho que ha
conseguido lo que se le peda, y no en funcin de si ha alcanzado con
xito el objetivo. Esto nos va a permitir conocer el grado de
cumplimiento con xito o fracaso de las tareas. Tambin deberemos
finalizar cuando el usuario desiste del intento de seguir con la tarea

67

debido a la frustracin de no encontrar lo que busca. Hay que evitar

sensaciones negativas que puedan condicionar las tareas siguientes.
Todos estos datos van siendo recogidos por el tcnico y el asistente.

Una vez terminada la dinmica agradeceremos al usuario su
presencia y le entregaremos el incentivo correspondiente.

Finalizados todos los test, agruparemos los datos recogidos durante el
campo para su posterior anlisis.

Es recomendable entablar una conversacin antes y despus del test
propiamente dicho de forma que podamos contextualizar la prueba
del usuario con sus intereses, gustos, necesidades y experiencias.

68

CAPITULO IV
4. CREACIN DE UN CATALOGO DE PATRONES
4.1. HISTORIA
La idea de patrones tiene su origen en el mundo de la arquitectura. En
1979, Christopher Alexander (Viena, 1936) publica en The Timeless Way of
Building, una obra que muestra de manera potica los secretos de la teora
y prctica de la arquitectura, en l propona el aprendizaje y uso de una
serie de patrones para la construccin de edificios de una mayor calidad..
Esta obra ha sido adoptada por los desarrolladores de software que influyo
notablemente en el desarrollo de software como es el caso del diseo de
interfaces.
El autor refiere que: "Cada patrn describe un problema que ocurre infinidad
de veces en nuestro entorno, as como la solucin al mismo, de tal modo
que podemos utilizar esta solucin un milln de veces ms adelante sin
tener que volver a pensarla otra vez."
4.2. DEFINICION DE UN PATRN
Es un conjunto de rasgos especiales en un diseo, para la bsqueda de
soluciones a problemas comunes en el desarrollo de software y otros
mbitos referentes al diseo de interfaces.
Un patrn de diseo o interfaz, es una conexin fsica y emocional entre el
usuario y la aplicacin, ya que los patrones no son principios abstractos
que requieran su redescubrimiento para obtener una aplicacin satisfactoria,
ni son especficos a una situacin particular o cultural; son algo intermedio.
Un patrn define una posible solucin correcta para un problema de diseo
dentro de un contexto dado, describiendo las cualidades invariantes de todas
las soluciones.

69

Segn Alexander, Cada patrn es una regla compuesta por tres partes que
expresa la relacin entre cierto contexto, un problema y una solucin. El
concepto de patrn es aplicable a arquitectura de software, y tambin al
Diseo de Interfaz.
Para Alexander, un patrn describe un problema que se produce una y otra
vez en nuestro entorno, y describe una solucin para ese problema, de
manera que puedes utilizar esa solucin millones de veces
4.3. CATEGORAS DE PATRONES
4.3.1. PATRONES DE ARQUITECTURA
Son

aqullos

que

expresan

un

esquema

organizativo

estructural

fundamental para sistemas de software.

4.3.2. PATRONES DE DISEO:
Son los que expresan esquemas para definir estructuras de diseo con las
que construir sistemas de software.
4.3.3. PATRONES DIALECTOS:
Patrones de bajo nivel especficos para un lenguaje de programacin o
entorno concreto.
4.3.4. PATRONES INTERACCIN:
Son los que permiten desarrollar patrones de diseo de interfaces web.
4.3.5. PATRONES USABILIDAD
Es aquella que permite obtener la E al cubo es decir; adquirir eficiencia,
efectividad y eficacia, alcanzando la satisfaccin del diseo de interfaces

70

web, con la que un producto contribuir al logro de objetivos previamente

planteados por los usuarios y en un contexto de uso especfico.
Este concepto en el diseo de las interfaces de usuario se dio por Ward
Cummingham y Kent Beck quienes adaptaron la propuesta de C. Alexander
y crearon cinco patrones de interfaz:
a) Ventana por tarea
b) Los paneles de pocos
c) Paneles estndar
d) Sustantivos y verbos
e) Men
En dichos patrones captan la experiencia de programadores y diseadores
expertos en el desarrollo de interfaces usables y condensan esta experiencia
en una serie de problemas y soluciones, que puedan ser usadas por los
desarrolladores novatos con el propsito de que en poco tiempo adquieran la
habilidad de disear interfaces que incidan en la satisfaccin de los usuarios.
Los patrones de interaccin buscan la reutilizacin de interfaces eficaces y
un manejo ptimo de los recursos de las pginas web, haciendo ms eficaz
el consumo de tiempo en el diseo del sitio web y permitiendo a los
programadores novatos adquirir ms experiencia. Para definir un patrn es
necesario respetar una estructura definida. Casaday, tom la estructura
original que Alexander defini y la resumi tal como se puede observar.
Nombre estructura

Detalle

Nombre

Un nombre para un patrn.

Contexto

Un contexto para un problema de diseo.

Fuerzas

Necesidades del usuario que deben ser resueltas.

Problemas

Un problema que crece a raz de las fuerzas.

Solucin

Una solucin conocida, probada en la prctica

71

Tabla1 Estructura De Casaday, Para Patrones De Usabilidad.

4.4. ERRORES MS COMUNES DE PATRONES USABILIDAD EN
SITIOS WEB
Para estudiar la usabilidad de los sitios web y poder generar patrones respecto a
ellos, es necesario primero hablar sobre la usabilidad en la web.
Jakob Nielsen en su sitio web (http://www.useit.com) ha publicado, desde 1996, la
lista de los errores de diseo ms comunes en la web. Los mismos que se
describen a continuacin.

Los 10 errores de diseo de Sitios Web

Error

Descripcin

Usando Frames

La divisin de una pgina en frames es muy

confusa para los usuarios, habiendo problemas
para agregar la pgina a favoritos o para imprimir.

Uso de la ltima
tecnologa

Si se usa la ltima tecnologa, se perder una

considerable cantidad de usuarios. Si una persona
no puede usar un sitio por falta de tecnologa,
probablemente

no

gaste

el

tiempo

en

actualizaciones, al contrario no volver al sitio.

Texto en movimiento Al usuario no se le debe bombardear con
y

constante animaciones, lo distrae de lo realmente importante.

movimiento

de

animaciones.
URL complejas

Si la persona desea escribir la URL no podr si es

demasiado compleja, adems mucha gente usa
una URL para ubicarse en la estructura del sitio.

Pginas Hurfanas

Toda pgina debe indicar dentro de qu sitio se

encuentra y su nivel en la estructura jerrquica del
sitio. Por lo que cada pgina debera mostrar una
navegacin y en que parte de sta se encuentra.

72

Pginas con scroll

muy largo

Para 1996 slo el 10% de los usuarios estn

dispuestos a desplazarse con el scroll. El autor
recomienda que todas las opciones deben estar en
la parte visible (arriba) en la pgina.

Falta de ayuda a la

Los usuarios necesitan saber dnde est la

navegacin

informacin. Hay que dar una buena estructura,

adems se puede proveer un mapa del sitio.

Uso de colores no

Enlaces a pginas que no se han visto por el

estndar para enlaces usuario son de color azul; enlaces a pginas vistos
anteriormente son de color prpura o rojo. El uso
decolores diferentes puede confundir al usuario.
Informacin obsoleta

El sitio web debe dar muestras de vida, y estar

actualizado.

Tiempos demasiado

Para que a una persona una accin le parezca

largos de descarga

inmediata debe durar menos de un segundo. Ms

de un segundo pero menos de 10 segundos es
tolerable. Ms de 10 segundos es inaguantable.
Lamentablemente para 1996 el ancho de banda no
era muy bueno.
Tabla2. Errores del diseo web.

4.5. ANALISIS DE PATRONES USABILIDAD

4.5.1. CORTO MENU
El men corto se refiere al diseo con un botn de la flecha desplegable que
se extienda el men para mostrar todas las caractersticas del mismo.
4.5.2. VENTANAS DE TAREA
Es un rea visual que contiene algn tipo de interfaz de usuario, dicha
herramienta permite el diseo de aplicacin lo que pone una interaccin con

73

bastantes remitentes, navegadores e implementadores en una sola ventana,

esto tambin significa que est asignando una ventana a cada panel del
guin grfico, o a su vez a un caso de uso idea o denominado tambin sub
ventanas.
4.5.3. PANEL
Es el rea principal de la ventana en la que una aplicacin puede mostrar
sus datos, est formado por diferentes herramientas o utilidades que le
permitirn interactuar con el sitio web tomando en cuenta las opciones:

Texto

Lista

Cuadro
Forma de onda
4.5.4. POCOS PANELES

Este patrn establece que se deben acortar los paneles demasiado extensos
que presenta una pgina, mostrando slo un resumen con la finalidad que
tenga mayor accesibilidad el usuario.
4.5.5. VERBOS Y SUSTANTIVOS
Son los que nos permiten nominar una funcionalidad de acuerdo a

los

objetivos planteados siempre y cuando se utilice sustantivos y verbos que

atraigan al usuario, dando accesibilidad a la pgina web, estos nombres de
las opciones es extremadamente importante en el diseo ya que permite
relacionar el nombre con la funcionalidad.

74

4.6. ANALISIS DE PATRONES DE USABILIDAD EXISTENTES

Patrn: Cmo disear una URL amigable
Nombre

Cmo disear una URL amigable

Origen

Necesidad de una direccin acadmica clara

Contexto

Definiendo la forma de URL del sitio.

Fuerzas

Algunas pginas acadmicas se construyen como pginas

dinmicas, donde sus posts tienen URL de la forma
http://www. nombredelweblog.com/?p=123 (lo que est en
negrita vendra a ser, el post), siendo este estilo de URL
rechazado por algunos diseadores
As mismo, la gente al navegar por la web requiere saber
en

dnde

est,

siendo

la

URL

un

elemento

de

retroalimentacin al usuario
Problemas

Los problemas pasan por cul ser el estilo de la URL

mostrada, y si el el gestor de contenidos ocupado permite
que la URL mostrada al usuario, se vea de la forma que el
diseador quiere Amigable para usuarios y buscadores.

Solucin

Se recomienda usar las URL amigables que describe a las

instituciones, esto es, que la URL amigable resultante
sera el nombre del post de quien escribi. Ejemplo si el
ttulo del mensaje dice: deportes institucionales la URL
resultante

sera

www.elnombredelblog.com/deportes

institucionales html, dependiendo del programa utilizado

para realizarlo.
Usar URL amigables obliga al desarrollador a:
- Crear ttulos descriptivos (una de las guas de Nielsen
para los sitios web) y,

75

- Crear ttulos no muy extensos (sera molesto tener una

URL muy extensa).
Con la implementacin de la URL amigable se lograr:
- Una mejor retroalimentacin al usuario.
- Una mejor indexacin por parte de los buscadores.
Las aplicaciones ya tienen implementadas los URL
amigables, sin que el Usuario deba hacer algn trabajo
adicional. Otros como Wordpress, por defecto mostrarn
los post como pginas dinmicas, pero el gestor de
contenidos ofrece en sus opciones, Cambiar el nombre de
la URL dinmica por una amigable.
Si no se pudiese realizar el cambio de pginas dinmicas
a amigables, puede deberse a que a que el servidor no
tiene activado la opcin mod_rewrite (si se usa un servidor
con Apache+PHP), que es quien permite hacer el cambio
de pginas dinmicas a Amigables.
Tabla3. Cmo Disear Una Url Amigable
Anlisis.- Muestra un URL agradable y familiar para el usuario, que sea
fcil de captar, memorizar, y que identifique en donde se encuentra. Dando
mayor accesibilidad a los servicios o a la informacin que contiene la pgina
acadmica.

Patrn: Declaracin de polticas

76

Nombre

Declaracin de polticas

Origen

Seguridad para los usuarios

Contexto

Estableciendo la declaracin de polticas del sitio

Fuerzas

Los sitios que construyen confianza con sus usuarios son

ms propensos a mantener e incrementar su impacto.
Es comn pedir el email a quien comenta en un sitio web,
pero los usuarios no desean entregar informacin
personal, a menos que entiendan cmo va a ser usada la
informacin recolectada de ellos.

Problemas

Al realizar un comentario, un sitio web podra pedir el

email de quin est comentando, pero los usuarios
muchas veces no desean entregar esta informacin y
preferirn inventarla o simplemente no hacer la accin
(perdiendo as un comentario).

Solucin

Se debe generar confianza con los usuarios, para que

stos estn dispuestos a entregar informacin personal.
Para esto, se le debe comunicar al usuario las razones del
porqu se est pidiendo la informacin y qu se har con
sta (una declaracin de polticas)
Para el caso de los comentarios, se puede colocar la
declaracin de polticas de dos formas: en una pgina
separada o en una zona cercana a la posicin de los
comentarios.
Se recomienda tambin, establecer claramente bajo qu
tipo de licencia estn publicados los contenidos del sitio
web, para que as, otros sitios web sepan, si pueden o no
copiar el contenido del sitio web. Esta informacin,
tambin puede ser incluida dentro de la declaracin de

77

polticas (en la pgina separada o en el pie de la pgina

web).
Tabla 4. Declaracin De Polticas
Anlisis: permite crear privacidad entre la pgina acadmica y el usuario,
con la aprobacin de polticas planteadas por la web y segn el diseo que
se le de a la pgina.
Patrn: Marcar campos requeridos
Nombre

Marcar campos requeridos

Origen

Informacin concreta y real

Contexto

Diseando el sistema de comentarios, marcando los

campos requeridos.

Fuerzas

Omitir un campo obligatorio puede llevar a un error de la

aplicacin (y eso siempre molesta al usuario).
Por otro lado, los usuarios quieren ocupar una aplicacin
entregando la menor informacin posible, llegando incluso
a

proporcionar

informacin

falsa

en

los

campos

requeridos.
Problemas

Los problemas van asociados a qu mecanismo, o de qu

forma, se resaltarn los campos requeridos. As tambin, a
cmo puede lograrse que la informacin entregada sea
real.

Solucin

Si bien hay ms de una forma para marcar los campos

requeridos (algunos usan un *, otros diferentes colores,
letra en negrita), los sitios web tienden a usar la palabra
requerido u obligatorio al lado del campo obligatorio.
Tambin es deseable que la informacin ingresada sea
verdica y no que el usuario ingrese informacin falsa. En

78

este sentido, es de gran ayuda el patrn de declaracin de

polticas, creando la confianza necesaria para que los
usuarios entreguen informacin.
Tabla 5. Marcar Campos Requeridos
Anlisis.- permite resaltar las opciones o la informacin con mayor
importancia que el usuario debe realizar y adems crea confianza para que
el usuario comente o brinde informacin real.
Patrn: Acceso subjetivo
Nombre

Acceso subjetivo

Contexto

Colocando el sitio web en ms de un idioma.

Fuerzas

Los visitantes del sitio web quieren que la informacin est

en un idioma que ellos entiendan, preferentemente su
idioma nativo.
Los desarrolladores no suelen hablar en muchos idiomas,
slo su lengua nativa y otro idioma, pero su segunda
lengua, muchas veces, no tiene el nivel para hacer una
transcripcin fiel de lo escrito en su lengua natal.

Problemas

Como dar una vista del contenido de acuerdo al idioma de

quien entra al sitio web.

Solucin

La solucin viable para el desarrollador, que muchas veces

slo domina su lengua, es colocar uno de los tantos
servicios gratuitos de traduccin automtica de pginas
Web.
Tabla 6. Acceso Subjetivo

Anlisis.- permite una interaccin con diferentes usuarios y no estabiliza la

informacin en un solo idioma si no que la funcionalidad que presenta

79

traduce a diferentes idiomas satisfaciendo las necesidades del usuario y no

limitando a la pgina ser vista por un solo tipo de pblico sino en general.

Patrn: Navegacin horizontal

Nombre

Navegacin horizontal

Origen

El patrn fue obtenido de la experiencia en los sitios web

estudiados donde todos tenan una navegacin con las
categoras ms importantes. La idea de utilizar pestaas,
se debe a que si se tiene una navegacin horizontal, la
mejor forma de desplegarla es a travs de pestaas.

Contexto

Definiendo la navegacin del sitio.

Fuerzas

Siempre ha sido importante dentro del contexto web, tener

una adecuada navegacin, teniendo en cuenta, que la
gente no suele leer detenidamente Internet, slo escanean
el texto rpidamente, se debe explicar en el tiempo
posible, y con la menor cantidad de texto, qu es lo que
ofrece el sitio web.
La gente lee una pgina web en forma de F, por lo que
est en la parte de arriba de la pantalla, ser lo que leer
con ms detenimiento el usuario.

Problemas

Lo ms comn es pensar en un men, que resalte cierta

informacin del sitio, pero surgen las dudas de dnde
colocar este men: arriba (bajo el logo del sitio) o en la
navegacin lateral. Tambin el desarrollador se puede
preguntar qu informacin colocar en ese men: las
etiquetas o las categoras, siendo las etiquetas ms
especficas y las categoras ms generales.

Solucin

La solucin es usar una navegacin horizontal en la parte

80

alta del sitio web (una navegacin principal) para destacar

sus categoras ms importantes. As, en unos pocos
segundos y con slo ver la navegacin, el usuario puede
obtener a travs de las categoras, una idea general de
todo lo que puede ofrecerle el sitio web.
Buscando la mejor forma de desplegar este men se
sugiere el uso de pestaas, debido a que:

Son fciles de entender: es un concepto muy intuitivo.

Estn muy logradas: tiene un estilo muy pulido, con
un objetivo claro.

Sugieren un espacio fsico: se crea la ilusin que la
pestaa activa se desplaza fsicamente para ir al
primer plano.

Son difciles de perder de vista: al ser muy distintivas
la gente

no suele pasarlas

por

alto.

Notando

claramente que es una navegacin.

Este patrn no pretende descartar otros tipos de ayudas a
la navegacin como por ejemplo las nubes de etiquetas,
pero s hace hincapi en la necesidad de tener una
navegacin principal, totalmente visible que explique lo
que puede ofrecer el sitio web al usuario.
Se recomienda el uso de este patrn slo cuando se
tienen pocas categoras en el sitio web, de otra forma se
hace impracticable.
Tabla 7. Navegacin Horizontal

81

Anlisis:
Admite desarrollar un men fcil de captar y de navegar permitiendo al
usuario interactuar con el sitio web, puesto que estos mens van a llamar la
atencin y van a dar informacin especfica.
Patrn: Delimitar los Contenidos
Nombre

Delimitar los contenidos

Contexto

Eligiendo una plantilla para el sitio web, Agregando

publicidad.

Fuerzas

El lector de un sitio web necesita que el diseo est bien

delimitado, de lo contrario el lector puede confundir las
secciones del sitio web (por ejemplo confundir el inicio y el
trmino de un contenido).
Algunos desarrolladores colocan publicidad en su sitio
web, con la legtima intencin de ganar algo de dinero a
cambio de trabajo. Pero, en general, los lectores tienden a
evitar la publicidad.

Problema

Si el desarrollador coloca la publicidad, de manera que se

confunda con el contenido, producir publicidad no tica,
donde engaar al usuario puede hacer ganar dinero al
desarrollador, pero le crear una mala reputacin. Esto
lleva al problema de dnde colocar la publicidad, para que
no moleste al usuario.
A veces los desarrolladores eligen sus plantillas slo en
criterios estticos, sin reparar en si stas permiten que los
contenidos

se

vean

claramente.

Otras

veces

los

desarrolladores desean hacer cambios en la plantilla, pero

hay aplicaciones que slo ofrece la opcin de modificar
directamente la hoja de estilos.

82

Solucin

El desarrollador, al elegir la plantilla para su sitio web,

debe asegurarse adems de los criterios estticos, que los
contenidos

se

distingan

claramente.

Para

esto,

el

desarrollador debe destacar bien los ttulos de cada

contenido

para que no se tenga dudas de cuando

comienza o termina otro, usando un color y tamao de

fuente diferente, para ttulos y textos.
Si la herramienta que usa el desarrollador, no le da la
opcin de realizar cambios como tamao de fuente, color
o tipo de letra, a travs de un interfaz, puede recurrir
directamente a la hoja de estilos. Si no tiene los
conocimientos tcnicos, el desarrollador deber buscar
alguna plantilla que ya contenga estas indicaciones.
Respecto a la publicidad, slo es recomendable colocarla
si se tiene un alto flujo de visitantes, y siempre y cuando
esta publicidad no se presente como pop-up o elementos
que molesten al usuario. Por otro lado la publicidad debe
estar relacionada con el contenido que se est observando
(para que sea un verdadero aporte a la experiencia de
lector).
Se recomienda que la publicidad est ubicada en la
esquina superior derecha del sitio web o antes de los
comentarios (entre contenidos y comentarios). Una buena
alternativa de publicidad es usar el sistema AdSense de
Google, el que proporciona publicidad relacionada con el
contenido que se lee en ese momento.
Tabla 8. Delimitar Los Contenidos

83

Anlisis: Permite que el usuario identifique las opciones de forma clara y

adems limita las

secciones y evita que se confunda por mezcla de

secciones de la pgina web.

Patrn: Resumir los mensajes de la portada
Nombre

Resumir los mensaje de la portada

Contexto

Escribiendo un nuevo mensaje.

Patrn

Complementando el mensaje.

relacionado
Fuerzas

La gente no suele leer detenidamente en Internet, slo

escanean el texto rpidamente, leyendo en promedio a lo
ms el 28% del texto de una pgina, siendo ms probable
slo el 20%.
Un texto demasiado resumido puede carecer de la
profundidad necesaria para explicar el tema presentado,
sobre todo si quien est detrs de la redaccin no es un
profesional (periodista).

Problemas

Textos demasiado cortos pueden carecer de profundidad.

Textos extensos difcilmente sern ledos en su conjunto,
o monopolizarn el espacio en pantalla.
Si se mezcla mensajes cortos y extensos en la portada del
sitio web, el sitio perder uniformidad, no acostumbrando
al usuario a un estilo de mostrar la informacin.

Solucin

Si la publicacin es muy extensa, se debe mostrar slo un

resumen en la portada del sitio web, dejando un link para
que un usuario pueda leer el mensaje en su totalidad (en
una pgina aparte). As todos los mensajes tendrn un
tamao promedio, acostumbrando al usuario a un tamao
de texto y un estilo de presentar la informacin.

84

Los mensajes ofrecen la posibilidad de mostrar slo un

resumen en la portada o idea principal, comnmente
dispuesta como una opcin ms, en las opciones de la
edicin de portada.
El desarrollador

debe asegurarse que el resumen

contenga suficiente informacin, para que el usuario sepa

qu tema se est tratando. Probablemente esto implique
un cambio en 60% el estilo de escritura del usuario.
Como recomendaciones de escritura, teniendo en cuenta
que los lectores leen en forma de F, se recomienda:
- Un ttulo claro:

los dos primeros prrafos son

fundamentales para explicar la idea central del mensaje,

siendo muy probable que esta parte sea leda (parte
superior de la F).
- Complementar con subttulos, vietas y prrafos
claramente separados.
Esto ayudar a llamar su atencin durante el escaneo
rpido del usuario (parte inferior de la F).
Si se decide agregar imgenes y/o video se recomienda
leer el patrn complementando el mensaje.
Tabla 9. Resumir Los Mensajes De La Portada
Anlisis: permite ajustar un texto de acuerdo a la informacin que se desea
impartir al usuario, en una forma resumida y precisa, para mejorar la
expectativa de los navegantes de red.

85

Patrn: Complementando el mensaje

Nombre

Complementando el mensaje

Contexto

Escribiendo un nuevo post, agregando multimedia en l.

Patrn

Resumir los mensajes de la Portada

Relacionado
Fuerzas

Texto e imgenes se complementan. El uso de imgenes

va dirigido a mejorar la experiencia del usuario. Pero si la
imagen parece publicidad, ser evitada por los lectores,
quienes con el pasar de los aos han aprendido a evitar
todo aquello que parezca publicidad.
La gente no suele leer detenidamente en Internet, slo
escanean el texto rpidamente, por lo que se debe ser
conciso en el texto y/o imgenes agregadas.

Problemas

Se debe ser cuidadoso con las imgenes y/o videos

agregados al mensaje, para lograr un balance entre la
imagen, el texto y la extensin de la pgina. Si se colocan
demasiadas imgenes, el usuario no se detendr a verlas
una por una. Adems, las imgenes no deben parecer
publicidad, o no sern vistas.
El mayor problema es, lo subjetivo que puede ser para
los usuarios, un mensaje largo o corto o muy lleno de
videos e imgenes.

Solucin

Salvo que sea un artculo especial, el mensaje no debera

incluir ms de una imagen o video, colocando primero la

86

imagen y/o video, y luego el texto asociado.

Si el texto es demasiado extenso o con muchas
imgenes, slo se debe mostrar un resumen del mensaje
que contenga la imagen que retrata mejor la idea del
mensaje y un resumen.
Respecto al tamao de la imagen y/o video: se
recomienda que el largo (vertical) de la imagen debera
ser similar a largo (vertical) del texto (resumido, si es el
caso).
Finalmente se debe procurar que la imagen sea un real
complemento al mensaje o de lo contrario slo ocupar
espacio, tampoco debe parecer publicidad.
Tabla 10. Complementando El Mensaje
Anlisis permite seleccionar las imgenes o videos de acuerdo a la pgina
web, evitando que sea evadida como publicidad por los usuarios, ya que una
imagen relacionada con el texto da mayor informacin y obtiene mayor
impacto en el interesado.
4.7. ANLISIS DE PATRONES DE INTERFAZ DE USABILIDAD EN
PGINAS WEB ACADMICAS DE COLEGIOS DE LA CIUDAD DE
RIOBAMBA
La pgina web es un documento electrnico que se caracteriza por los
hipervnculos de una pgina, por lo que est compuesta principalmente por
informacin (slo texto o mdulos multimedia) as como por hiperenlaces;
adems puede contener o asociar datos de estilo para especificar cmo
debe visualizarse, y tambin aplicaciones embebidas para hacerla
interactiva.

87

La pgina web acadmica es en esencia, una tarjeta de presentacin digital,

de una institucin. As mismo, la nueva tendencia orienta a que las pginas
web sean diseadas con patrones de interfaz, lo que dar mayor impacto al
usuario.

Ya que son una posible solucin correcta para un problema de

diseo dentro de un contexto dado, describiendo las cualidades invariantes

de todas las soluciones.
Los sitios web acadmicos de la ciudad de Riobamba han sido elaborados
con poca interaccin y una estructura montona por lo que se va analizar
algunos sitios web, lo que nos permitir interpretar

a los patrones de

usabilidad, su aplicacin ejecutada en su sitio y adems identificar

problemas para darles una solucin, lo que me permitir posteriormente
crear nuevos patrones que sean aplicables y que satisfagan a los usuarios
dando mayor impacto a los mismos.
4.7.1. PGINA DEL COLEGIO EDMUNDO CHIRIBOGA
PATRONES
Patrn paneles

ANLISIS
Permite que una aplicacin muestre sus datos,
esta formado por diferentes herramientas o
utilidades que le permitirn interactuar con el
sitio web tomando en cuenta las opciones:
Texto, Lista, Cuadro, Forma de onda. La
institucin aplica herramientas sencillas que no
alcanza mayor impacto en el usuario, muestra
los datos en forma extensa y no brinda una idea
central.

Patrn de mens cortos

Se refiere al diseo del men que contiene sub

mens despegables

que se extienda para

mostrar todas las caractersticas en forma corta

y precisa.

88

El sitio solo aplica mens principales y no

submens para que haya interaccin con el
usuario, adems se muestra con nombres
extensos y que carecen de impacto, lo que hace
que se visualice como sencillo.
Patrn

identidad Es la presentacin visual de la institucin en

corporativa

todos sus aspectos como es su logotipo y sus

colores representativos.
No presenta su identificacin en la portada, lo
que es su logotipo y no realza los colores
simblicos de la institucin.

Patrn de ventana

Es el rea visual que contiene algn tipo de

interfaz de usuario, dicha herramienta permite el
diseo de aplicaciones, lo que pone una
interaccin

con

bastantes

remitentes,

navegadores e implementadores en una sola

ventana,

esto tambin significa que est

asignando una ventana a cada panel del guin

grfico, o a su vez a un caso de uso idea o
denominado tambin sub ventanas.
Al presentar este sitio web se presenta una sola
ventana la misma que no muestra sub ventanas
dentro de ellas que permitan una dinmica del
sitio y satisfagan al usuario, ya que es simple la
aplicacin de este patrn.
Patrn de contextos

Se refiere al texto que se muestra en los post

que deben ser concretos, claros y de leguaje
comn para que todo tipo de usuario pueda

89

acceder.
Los textos presentado en la pagina web son
extensos en algunos paneles y carecen de
profundidad lo que no permite que el usuario
interactu con el sitio y encuentre en forma
clara lo que necesita.
Patrn de portada

Es la parte visual que presenta el sitio web, el

mismo que debe ser dinmico, fcil de entender
y de identificar las opciones de men para el
usuario.
En este sitio no presenta dinmica es un sitio
muy simple esttico que no tiene variacin y la
aplicacin de opciones son extensas y no llama
la atencin.

Patrn galera

Proporciona al usuario una visin general de

varias imgenes o videos en el espacio de una
pgina web. Permite que las imgenes, videos
estn organizadas y sean de fcil visualizacin.
No

presenta

mostrndolas

dinmica
estticas

en
los

Imgenes,
videos

son

enlazados con otro sitio web, que no permite la

revisin rpida del mismo lo que a veces fastidia
al usuario.
Tabla 11. Pgina Del Colegio Chiriboga

90

4.7.2. PAGINA WEB DE LA INSTITUCIN ACADMICA LA SALL

PATRONES
Patrn men cortos

ANALISIS
Se refiere al diseo del men que contiene sub
mens despegables

que se extienda para

mostrar todas las caractersticas en forma corta y

precisa.
Al aplicar la institucin en su pgina web este
patrn presenta los mens con lista desplazable
pero extensos,

lo que no llama la atencin al

usuario y da una presentacin simple.

Patrn Paneles

Permite que una aplicacin pueda mostrar sus

datos, est formado por diferentes herramientas
o utilidades que le permitirn interactuar con el
sitio web.
En la aplicacin de los paneles la institucin no
utiliza todas la opciones como son: Texto, Lista,
Cuadro, Forma de onda, en un perfil especifico
sino que la muestra muy extensa lo que no
causara mayor impacto por los usuarios.

Patrn de contexto

Se refiere al texto que se muestra en los post que

deben ser concretos, claros y de leguaje comn
para que todo tipo de usuario pueda acceder.
El instituto muestra textos extensos para brindar
una idea general y especifica lo que no se debe
aplicar en este tipo de pginas acadmicas si no
mostrar la idea central o concreta

que desee

hacer llegar al usuario.

Patrn identidad

Es la presentacin visual de la institucin en

91

corporativa

todos sus aspectos como es su logotipo y sus

colores representativos.
El establecimiento no cuenta con identidad
corporativa en la pgina web lo que no identifica
la seriedad institucional y no causa satisfaccin al
usuario.

Patrn de limitacin

El usuario necesita que el diseo est bien

de mensajes

delimitado, de lo contrario el puede confundir las

secciones e interpretar inadecuadamente la
informacin presentada.
La institucin eligen sus plantillas slo en criterios
estticos, sin reparar en si stas permiten que los
post se vean claramente en la pagina web lo que
implica que el usuario no tendr una adecuada
navegacin

Tabla 12. Pgina Del La Institucin Acadmica La Sall

4.7.3. PAGINA DE SAN FELIPE NERI
PATRONES
Patrn paneles

ANLISIS
Permite que una aplicacin muestre sus datos,
est formado por diferentes herramientas o
utilidades que le permitirn interactuar con el sitio
web tomando en cuenta las opciones: Texto,
Lista, Cuadro, Forma de onda. La institucin
aplica las herramientas de acuerdo a lo que
desea hacer llegar la informacin al usuario. Este
sitio es el que presenta una adecuada aplicacin
de patrones de usabilidad que impacta al usuario

92

y que le permite interactuar.

Patrn

de

mens Se refiere al diseo del men que contiene sub

cortos

mens despegables

que se extienda para

mostrar todas las caractersticas en forma corta y

precisa.
El sitio aplica mens principales y submens
para que haya interaccin con el usuario,
adems muestra dinmica en sus despliegues, lo
que hace que se visualice de una forma
impactante para el usuario..
Patrn

identidad Es la presentacin visual de la institucin en

corporativa

todos sus aspectos como es su logotipo y sus

colores representativos.
No presenta su identificacin en la portada, lo
que es su logotipo y no realza los colores
simblicos de la institucin.

Patrn de ventana

Es el rea visual que contiene algn tipo de

interfaz de usuario, dicha herramienta permite el
diseo de aplicaciones, lo que pone una
interaccin

con

bastantes

remitentes,

navegadores e implementadores en una sola

ventana,

esto

tambin

significa

que

est

asignando una ventana a cada panel del guin

grfico, o a su vez a un caso de uso idea o
denominado tambin sub ventanas.
Al presentar este sitio web se presenta una
variedad de ventanas la misma que muestra sub
ventanas dentro de ellas que permitan una

93

dinmica del sitio y satisfacen al usuario, pero su

dinmica no presenta esttica lo que le hace
montono. .
Patrn de contextos

Se refiere al texto que se muestra en los post que

deben ser concretos, claros y de leguaje comn
para que todo tipo de usuario pueda acceder.
Los textos presentados en la pgina web son
extensos en algunos paneles y carecen de
profundidad lo que no permite que el usuario
encuentre en forma clara lo que necesita.

Patrn de portada

Es la parte visual que presenta el sitio web, el

mismo que debe ser dinmico, fcil de entender y
de identificar las opciones de men para el
usuario.
En este sitio presenta dinmica pero no esttica
de diseo por lo que sus aplicaciones y sus
opciones se vuelven simples y no importantes ya
que llaman la atencin de una forma superficial y
no profunda.
Proporciona al usuario una visin general de
varias imgenes o videos en el espacio de una

Patrn galera

pgina web. Permite que las imgenes, videos

estn organizadas y sean de fcil visualizacin.
Presenta dinmica en Imgenes, mostrndolas
como lbumes interactivos y los videos poseen
una presentacin clara y precisa, que llama la
atencin del usuario.
Tabla 13. Pgina Del San Felipe Nery

94

4.7.4. PAGINA WEB COLEGIO ISABEL DE GODIN

Patrn Aplicado
Patrn de men

Anlisis
El men corto se refiere al diseo de un men
que contenga sub mens desplegable que se
extiendan para mostrar todas las caractersticas
de forma corta y precisa.
El sitio web no cuenta con mens desplegables lo
cual hace que muestre un men sencillo y
montono.

Portada interactiva

La interaccin con el usuario depende de la

dinmica y del contexto que se muestre en el sitio
web.
Al iniciar el sitio web de esta institucin educativa
nos permite interactuar con una revista digital que
presenta un texto extenso que no permite captar la
atencin del usuario.

Resumir los post de

Se refiere al texto que se muestra en cada panel.

paneles

Un texto demasiado extenso puede carecer de la

profundidad necesaria para explicar el tema
presentado, sobre todo si quien est detrs de la
redaccin no es un profesional (periodista).

En este sitio web el panel es muy extenso lo cual

hace que el usuario tenga cansancio visual.
Identidad corporativa

Es la presentacin visual de la institucin en todos

sus aspectos como es su logotipo y sus colores

95

representativos.
El establecimiento no cuenta con identidad
corporativa en la pgina web lo que no identifica la
seriedad institucional y no causa satisfaccin al
usuario.
Tabla 14. Pgina Del Colegio Isabel De Godin
4.8. CREACION DE CATALOGO DE PATRONES DE DISEO DE
INTERFAZ WEB
4.8.1. TAMAO DE INTERFAZ
PATRON DE TAMAO DE INTERFAZ
NOMBRE

Interfaz (1024X768) pixel.

CONTEXTO

Limitar el interfaz de la pgina web.

FUERZAS

Evitar que el usuario del sitio web acadmico desarrolle un

cansancio visual ya que necesita que el diseo de interfaz
est limitado en una dimensin adecuada, de lo contrario
el interesado puede confundir las secciones del sitio web
acadmico (por ejemplo confundir el inicio y el trmino del
interfaz).

PROBLEMA

Si el diseador no utiliza un interfaz de dimensin

adecuada, el usuario

va a confundir el contenido,

produciendo una monotona en l, lo que no permitir que

el mismo satisfaga su necesidad y la interaccin con el
sitio web acadmico.
A veces los diseadores eligen sus dimensiones de
acuerdo a sus necesidades y no van enfocadas a la de los
usuarios lo que causa una pgina web montona y menos
visitada.

96

SOLUCION

El desarrollador debe aplicar el interfaz de 1024 X 768

pixel, adems

asegurarse de limitar su dimensin para

que dicho interfaz se aceptado por el usuario y el sitio web

acadmico se presente de una forma que impacte al
usuario. Para esto, el diseador debe destacar bien los
ttulos de cada post para que no se tenga dudas de
cuando comienza o termina otro, usando un color y
tamao de fuente diferente, para ttulos y textos.
Tabla 15. Tamao de interfaz
4.8.2. SITIO ACADMICO ANIMADO
Patrn: Diseo De Un Sitio Acadmico Animado
Nombre:

Sitio Acadmico Animado

Contexto

Definir interaccin entre el usuario y el sitio

Fuerzas

Una pgina que sea interactiva evitara que el sitio

sea montono y no impacte al usuario, lo que permite
dar dinamismo y capta la atencin de los que visiten
la pgina.

Problema

El problema se manifiesta por el estilo del sitio y la

interaccin que presenta. De la animacin y esttica
con la que se aplique se asegurara el impacto y la
utilizacin continua del sitio por sus usuarios.

Solucin

Se recomienda usar interaccin en los sitios web

acadmicos para brindar animacin al usuario pero
siempre con esttica para que no se manifieste como
algo tedioso. Si no que llame la atencin, impacte,
sea fcil de usar y que satisfaga las necesidades de
los usuarios.

97

Tabla 16. Diseo De Un Sitio Acadmico Dinmico

4.8.3. BOTN ROLLOVER
Patrn: Botn Rollover
Nombre:

Botn Rollover

Contexto

Aplicacin de botn rollover en los iconos del men

Fuerzas

El dinamismo que presenta un icono permite que el

usuario identifique bien el botn que va utilizar y
adems impacta e interacta con el sitio web.

Problema

La inactividad empleada en los iconos no permite

interaccin con el usuario volvindole a la pgina web
montona, lo que disminuye las visitas por parte de
los interesados y adems es comn ver un sitio sin
aplicacin de botn rollover.

Solucin

Al aplicar los botones rollover transforma al sitio en

dinmico y

llama la atencin del usuario, adems

permite que el usuario identifique el icono a utilizar y

no se confunda.
Tabla 17. Botn Rollover
4.8.4. CHECKBOX
Patrn: Aplicacin De CheckBox
Nombre:

Checkbox

Contexto

Aplicacin de checkbox

Fuerzas

Permite la seleccin de opciones por parte del

usuario, facilitndole la bsqueda de la informacin.

Problema

Al presentar en el sitio web un interfaz extenso el

usuario no interacta con la pgina mas bien la
vuelve montona, por lo que al aplicar checkbox

98

limita el interfaz y la vuelve interactiva llamando la

atencin del usuario.
Solucin

Por ser un elemento de la interfaz grfica de usuario

que permite al usuario hacer selecciones mltiples de
un conjunto de opciones estn mostradas en la
pantalla como una caja cuadrada que puede contener
un espacio en blanco (para deseleccionar) o una
marca de chequeo o una X (para seleccionar).
Tabla 18. Aplicacin De CheckBox

4.8.5. CONTEXTO
Patrn: Contexto
Nombre:

Contexto del sitio web

Contexto

Estructuracin del sitio web acadmico

Fuerzas

El sitio Web captura su esttica y percepcin

funcional

enfocndose

caractersticas

de

en

diseo

grficos,
interesantes,

colores,
metas

utilitarias, y la facilidad de navegacin.

Problema

En los sitios web no presentan una estructura de

acuerdo a la necesidad del usuario y adems no
presentan un contexto sobrio lo que no impacta al
mismo, volvindole un sitio simple.

Solucin

Para sitios acadmicos se recomienda un contexto

sobrio y de fcil navegacin. Las dimensiones del
contexto son la funcin y la esttica. Dentro de la
funcin estn: la divisin de la seccin, la estructura
de vnculos, las herramientas de navegacin, la
velocidad de carga, la confiabilidad, la independencia
de plataforma, acceso a los medios y el valor

99

prctico. Y dentro la esttica son: el esquema de

colores y los temas visuales.
Tabla 19. Contexto
4.8.6. CONTENIDO
Patrn: Contenido
Nombre:

Contenido especifico

Contexto

Es el tipo de informacin a brindarse al usuario.

Fuerzas

La temtica digital en el sitio (texto, video, audio y

grficos), as como la forma en que se presenta y sus
dominios, incluyendo ofertas de producto, servicio e
informacin.

Problema

Algunos sitios web presentan contenidos extensos y

no son de mayor importancia lo que fastidia al
usuario y no permite que sea visitada la pgina.

Solucin

Si

los

contenidos

son

de

valor

el

visitante

seguramente regresar. Las dimensiones para el

contenido son: mezcla de ofertas, mezcla de
atraccin, mezcla de multimedia y tipo de contenido.
Tabla 20. CONTENIDO
4.8.7. IDENTIDAD CORPORATIVA
Patrn: identidad corporativa
Nombre:

Identidad corporativa

Contexto

Es la imagen institucional que se presenta a los

usuarios

Fuerzas

Es el conjunto de aspectos visuales que le da a la

institucin

una

identidad,

100

una

personalidad,

un

concepto o un estilo definido y propio.

Problema

Algunas instituciones en sus pginas acadmicas no

tienen

definido

sus

colores

institucionales

y no

presentan su logotipo, lo que no le da seriedad al sitio y

tampoco brinda identidad a la institucin, y es a veces
causa de que el usuario no visite dicha pgina.
Solucin

Ya definido el concepto o estilo para proyectar, se le

aade a la pgina web como entrada el logotipo de la
institucin

los

contenidos

de

los

colores

se

representan con los colores del establecimiento. Con el

fin de que los usuarios solo con observar sepan de qu
institucin es la pgina web y distingan la identidad que
tiene.
Tabla 21. Identidad corporativa
4.8.8. MENSAJES DE LA PORTADA CONCRETOS
Patrn: Mensajes de la portada
Nombre

mensaje de la portada concretos

Contexto

Escribiendo informacin bsica en

un nuevo

mensaje.
Fuerzas

A los usuarios no les interesan mensajes extensos y

que brinden informacin inespecfica.
Un texto demasiado resumido puede carecer de la
profundidad

necesaria

para

explicar

el

tema

presentado, o un texto demasiado extenso no llama

la atencin del usuario, por lo que se debe presentar
un mensaje especifico con la informacin clara y
concreta.
Problemas

Textos

demasiado

101

cortos

pueden

carecer

de

profundidad. Textos extensos difcilmente sern

ledos en su conjunto, o monopolizarn el espacio en
pantalla.
Si se mezcla mensajes cortos y extensos en la
portada del sitio web, el sitio perder uniformidad, no
acostumbrando al usuario a un estilo de mostrar la
informacin.
Solucin

Los mensajes ofrecen la posibilidad de mostrar slo

un

resumen

en

la

portada

idea

principal,

comnmente dispuesta como una opcin ms, en las

opciones de la edicin de portada.
El desarrollador

debe asegurarse que el resumen

contenga suficiente informacin, para que el usuario

sepa qu tema se est tratando. Si la publicacin es
muy extensa, se debe mostrar slo un resumen en la
portada del sitio web, dejando un link para que un
usuario pueda leer el mensaje en su totalidad (en una
pgina aparte). As todos los mensajes tendrn un
tamao promedio.
Tabla 22. Mensajes de la portada
4.8.9. MULTIMEDIA INTERACTIVA
Patrn: multimedia interactiva o dinmica
Nombre:

Aplicacin de dinmica en la multimedia

Contexto

Presentar lbumes fotogrficos en diferente estructura y

que

muestren

interaccin

con

el

usuario,

videos

seleccionados y que se intercalen con otras pginas web.

Con la finalidad de no volverle montono al sitio.

102

Fuerzas

Mostrar de una sola estructura a las imgenes y los videos

no interacten con el usuario no brinda atraccin e
impacto al usuario.

Problema

Algunos sitios web acadmico presentan su multimedia

con estructuras ya conocidas y que no llaman la atencin
del usuario por lo que se vuelven montonas y no
llamativas para interactuar con el beneficiario.

Solucin

Aplicacin de animaciones como flash o de tipo revista

que interactu con el usuario y llame la atencin del
mismo, definiendo muy bien el lbum que se desea
mostrar e identificando cada una de ellos.
Tabla 23. Multimedia Interactiva O Dinmica

4.8.10.

CAJA DE COMENTARIO
Patrn: Caja de Comentario

Nombre:

Caja De comentario

Contexto

Aadir un pequeo formulario que permite a los usuarios

enviar un comentario

Fuerzas

Al colocar esta opcin permite que el usuario manifieste

sus interrogantes o que se expresen referentes al sitio
web.

Problema

Mucho de los sitios web acadmicos carece de este, lo

que no permite que el usuario exprese su criterio. Mientras
que algunos atraen los vnculos a sitios web spam al
utilizar este patrn lo que recarga mucho a la pagina por
demasiada interactividad.

Solucin

Un cuadro de comentario es bsicamente un tipo simple

de formulario . Los campos principales son el nombre,
direccin

de

correo

electrnico

de

los

propios

comentarios. Adems, una direccin del sitio web tambin

103

se le puede pedir. La direccin de correo electrnico es la

mayora del tiempo pedido con el fin de poder notificar a la
comentarista de respuestas o de seguimiento, pero
generalmente no es mostrado cuando se muestra el
comentario. Indican claramente que los campos son
obligatorios y cules son opcionales.
Tabla 24. Caja De Comentario
4.8.11.

DESPLAZAMIENTO VERTICAL
Patrn: navegacin vertical

Nombre

Desplazamiento vertical

Contexto

Definiendo la navegacin del sitio.

Fuerzas

Siempre ha sido importante dentro del contexto web, tener

una adecuada navegacin, teniendo en cuenta, que la
gente no suele leer detenidamente Internet, slo escanean
el texto rpidamente, se debe explicar en el tiempo
posible, y con la menor cantidad de texto, qu es lo que
ofrece el sitio web.

Problemas

Lo ms comn es pensar en un texto concreto, que resalte

cierta informacin del sitio, pero surgen las dudas de
dnde colocar este este texto. Tambin el desarrollador se
puede preguntar qu informacin colocar en ese men: las
etiquetas o las categoras, siendo las etiquetas ms
especficas y las categoras ms generales.

Solucin

La solucin es usar una navegacin vertical para destacar

sus categoras ms importantes. As, en unos pocos
segundos y con slo ver la navegacin, el usuario puede
obtener a travs de las categoras, una idea general de
todo lo que puede ofrecerle el sitio web. Se recomienda el

104

uso de este patrn slo cuando se tienen pocas categoras

en el sitio web, de otra forma se hace impracticable.
Tabla 25. Navegacin vertical
4.8.12.

ANIMACIN
Patrn: Animacin

Nombre

Animacin armnica

Contexto

Definiendo la armona en el diseo

Fuerzas

Siempre ha sido importante dentro del contexto web, tener

una adecuada animacin, teniendo en cuenta, que la
gente suele cansarse de revisar una pagina montona.

Problemas

Lo ms comn la sobrecarga de animacin, que resalte

cierta informacin del sitio, pero surgen la exageracin.
Tambin el desarrollador se puede preguntar sobre las
etiquetas o las categoras, siendo las etiquetas ms
especficas y las categoras ms generales.

Solucin

La solucin es usar una animacin sencilla y elegante

para destacar sus categoras ms importantes. As, en
unos pocos segundos y con slo ver la navegacin, el
usuario puede obtener una idea agradable del sitio. Se
recomienda el uso de este patrn para realizar un sitio
armnico e impactante.
Tabla 26. Animacin

4.9. MANUAL DE ESTILO PARA DISEO DE INTERFAZ WEB

4.9.1. INTRODUCCIN
Dentro del diseo grfico, el diseo web es una actividad que consiste en la
planificacin, diseo e implementacin de pginas web. No es simplemente
una aplicacin del diseo convencional, ya que requiere tener en cuenta

105

cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura

de la informacin y la interaccin de medios como el audio, texto, imagen y
vdeo.
La unin de un buen diseo con una jerarqua bien elaborada de contenidos
aumenta la eficiencia de la web como canal de comunicacin e intercambio
de datos, que brinda la interaccin entre el sitio web y el usuario. El diseo
de sitios web acadmicos en la actualidad se basan en la necesidad del
usuario, porque pueden presentar informacin de la institucin y su imagen,
a travs del Internet.
Para que el diseo del sitio web acadmico, proyecte una sensacin de
unidad, armona, y equilibrio; se aplica patrones de interfaz de usabilidad
que dan el realce a la pgina web. El diseo consiste en la aplicacin de
elementos grficos, cromticos y textuales con la finalidad de conseguir un
equilibrio en las formas que se presentan en el sitio web y que identifique a
la institucin a la que se refiere.
En este presente manual se aborda los aspectos del diseo del sitio web
mediante la aplicacin de patrones de interfaz de usabilidad, para la
obtencin de una pgina web acadmica interactiva y con un diseo grfico
que proyecta a la institucin.
4.9.2. ANTECEDENTES
El diseo del sitio web acadmico del colegio Adolfo Kolping, tiene la
finalidad de entregar una pgina web con un diseo interactivo, accesible,
con una aplicacin de colores, formas, y grficos equilibrados. Presentando
la identidad de la institucin a travs de diseos, lo que a su composicin
grafica la har dinmica e interesante facilitando a los usuarios una imagen
institucional e informacin actual, adems de una interaccin con el sitio y
una agradable presentacin de la pgina.

106

El contenido del sitio web se ha desarrollado por la aplicacin de patrones de

interfaz de usabilidad web, los cuales son:
f) Ventana por tarea
g) Los pocos paneles
h) Paneles estndar
i) Sustantivos y verbos
j) Men, etc.
Segn el anlisis realizado a los patrones aplicados al sitio web, el diseo
muestra la identidad de la institucin, armona, equilibrio en los colores y en
las formas grficas que llaman la atencin del usuario y le proporcionan
informacin actual, adems es de fcil accesibilidad para la interaccin.
4.9.3. PLANIFICACIN
Despus de haber investigado y analizado algunas pginas web acadmicas
existentes se determin la importancia de crear patrones de interfaz
aplicables para el diseo del sitio web, lo que se plantea en el diseo del
sitio web del colegio Adolfo Kolping dando como resultado un sitio dinmico,
interactivo y con un diseo equilibrado en sus figuras grficas y en la
cromtica que presenta.
Se ha desarrollado el sitio web acadmico en funcin de los siguientes
parmetros:
Identidad Corporativa
Diseo De Interfaz Web Grafica
Mapa De Navegacin
Guion Web
Story Board: Presentacin De La Marca
Evaluacin Mediante Los Patrones De Diseo Web
Programacin
107

 Pruebas De Usuarios
4.9.4. IDENTIDAD CORPORATIVA
4.9.4.1.

LOGOTIPO

El logotipo es la identidad de la institucin mediante un smbolo que le da

carcter y dinamismo, la composicin del logotipo est basada en cada una
de las especialidades de esta institucin educativa, su estructura grfica
est compuesta por figuras y por colores que identifican a la institucin,
adems presenta una tipografa gruesa la cual permite una buena visibilidad
que nos permite trasmitir sobriedad, claridad y seriedad

al momento de

identificar a la institucin.
4.9.4.2.

CONSTRUCCIN

DEL

IDENTIFICADOR

DE

LA

INSTITUCIN
El logotipo en su estructura cumple con un equilibrio, la posicin clara de su
nombre por la armona de su tipogrfica, formado un estado en el que las
fuerzas que operan se compensan manteniendo el peso y la presentacin
equilibrada

Engranaje
Representa:
Mecnica industrial

Telar
Representa:
Tejido Andino

.
Vasija:
Representa:
Cermica

Figura IV. 21 LOGOTIPO

108

Madera
Representa:
Ebanistera

4.9.5. ARQUITECTURA DEL LOGOTIPO

4.9.5.1.

RETCULA CONSTRUCTIVA

Figura IV. 22 LOGOTIPO

Es una herramienta que permite la reproduccin correcta y proporcionada

del logotipo.
4.9.5.2.

TAMAO MNIMO

El tamao es de 180 pix por 122pix, lo que permite la legibilidad y clara

lectura del logotipo.

Figura IV. 23 TAMAO DEL LOGOTIPO

109

4.9.5.3.

REA DE PROTECCIN

Figura IV. 24 TAMAO DEL LOGOTIPO

Es determinar un espacio imaginario libre alrededor del logotipo ya que

permite darle independencia visual e impide que se vea afectado su espacio,
adems permite colocar otros elementos grficos o de animacin con el fin
de destacar y no competir visualmente con otros elementos.
4.9.5.4.

GAMA CROMTICA LOGOTIPO

Figura IV. 25 GAMA CROMATICA DEL LOGOTIPO

4.9.5.5.

SIGNIFICADO DEL COLOR

Naranja: Es un color que encaja muy bien con la gente joven, por lo que es
muy recomendable para comunicar con ellos. Representa la fortaleza y la

110

resistencia. Color ctrico. El color naranja tiene una visibilidad muy alta, por
lo que es muy til para captar atencin y subrayar los aspectos ms
destacables de una pgina web.
Negro: El color negro es a la vez de proteccin. El negro representa el
poder, la elegancia, la fuerza.
El negro representa tambin autoridad, fortaleza, intransigencia. Tambin se
asocia al prestigio y la seriedad.
4.9.5.6.

PRESENTACIN CROMTICA

Figura IV. 26 PRESENTACION DEL LOGOTIPO

El contenido cromtico del logotipo estar definido siempre por dos colores
el negro y el naranja por ser colores de la identidad institucional.
4.9.5.7.

TIPOGRAFA CORPORATIVA

Se utiliz la Bauhaus 93 como texto principal del logotipo y como segundaria

l una Arial Black Par el nombre de la institucin ya que permite una clara
legibilidad y lecturabilidad importantes para en la percepcin visual
logotipo.
Bauhaus 93

111

del

A, B, C, D, E, F, G, H, I, J, K, L, M, N, , O, P, Q, R, S, T, U, V, W, X, Y y Z
a, b, c, d, e, f, g, h, i, j, k, l, m, n, , o, p, q, r, s, t, u, v, w, x, y y z
Arial Black
A, B, C, D, E, F, G, H, I, J, K, L, M, N, , O, P, Q, R, S, T, U, V, W,
X, Y y Z
a, b, c, d, e, f, g, h, i, j, k, l, m, n, , o, p, q, r, s, t, u, v, w, x, y y
z
4.9.6. DISEO DE INTERFAZ
4.9.6.1.

CONCEPTO

Es un sitio web acadmico con un diseo grfico equilibrado e interactivo

con un enfoque visual y de interaccin con el usuario, que va a identificar a
la institucin, la misma que va hacer puesta a disposicin del pblico del
Adolfo Kolping.
4.9.6.2.

DISEO

Est diseado por un estudiante y tutorado por catedrticos de la Escuela de

Diseo Grfico de la ESPOCH. Basado en formas andinas y modernistas
que representen a la institucin Adolfo Kolping y presentada a los
estudiantes, maestros.
4.9.6.3.

CARACTERISTICAS GENERALES

4.9.6.3.1. TAMAO DE INTERFAZ

El desarrollador debe aplicar el interfaz de 1024x768 pixel,

ya que las

pantallas estn presentadas con esas resoluciones, adems permite limitar

su dimensin para que dicho interfaz se aceptado por el usuario y el sitio

112

web acadmico se presente claramente en la pantalla de cualquier

computador.
4.9.6.3.2. PRESENTACIN
El sitio web consta de mens y submens, adems de formas grficas,
cromtica equilibrada que da armona y que llama la atencin al usuario. Da
la identidad corporativa de la institucin e interacciona con el usuario.
4.9.7. ANALISIS WEB
4.9.7.1.

ACCESIBILIDAD

Se refiere a la capacidad de acceso a la web y a sus contenidos por todas

las personas, el sitio web est diseado pensando en la accesibilidad, todos
los usuarios pueden acceder en condiciones de igualdad a los contenidos ya
que se proporciona un texto equivalente alternativo a las imgenes y a los
enlaces se les da un nombre significativo, por lo que los contenidos estn
escritos en un lenguaje sencillo e ilustrados con imgenes y animaciones.
4.9.7.2.

USABILIDAD

La usabilidad se refiere a la claridad y la elegancia con que se disea la

interaccin un sitio web, es la aplicacin de los patrones de interfaz de
usabilidad que permite un acceso rpido al usuario y que es de fcil
interaccin con el usuario.
4.9.7.3.

INTERACTIVIDAD

La interactividad es fundamental para el xito de un sitio Web. Se debe

evitar la sensacin "lectura de peridico" que puede causar en un visitante
un Web pasivo y lineal. Para convertirlo en una experiencia interactiva, han
surgido lenguajes especficos de programacin y de diseo para la Web, lo
que permite que el usuario interactu con la pgina web.

113

4.9.7.4.

NAVEGABILIDAD

Son aquellas propiedades de la interactividad del sitio que permiten que el

usuario del mismo sea capaz de moverse por su estructura e identificar las
diferentes secciones y contenidos de una forma sencilla y efectiva y sin
perderse en l. La buena navegabilidad de un sitio, es en muchos casos un
factor clave en su xito y aceptacin por parte de los usuarios. Es por eso
que se presenta este sitio con una navegabilidad rpita y que no permite que
el usuario se confunda en las secciones.
4.9.8. ANLISIS ESTRUCTURAL
4.9.8.1.

ARMONA

Es la percepcin del sitio en su forma, en la que la armona de sus

contenidos y grficos son esenciales para aumentar la capacidad del uso del
sitio Web. Se dise con armona el sitio web dando as una sensacin de
equilibrio y estabilidad, lo que marca la

clara interaccin equilibrada,

armnica, ya que cada elemento posee su proporcin, y significado en el

diseo.
4.9.8.2.

EQUILIBRIO

Es la estabilidad que presenta la pgina web por la organizacin que se

visualiza en los grficos, formas y contenido dando una armona al observar
la misma.
4.9.8.3.

PROPORCIONES

Una vez determina las reas de diseo que se ocupa con las lneas (ttulos,
textos) y las formas (fotografas e ilustraciones) se les combinan dentro de
un mismo espacio para crear composiciones alternativas.
La forma ms directa de marcar proporciones es mediante el tamao relativo
de los elementos. Los elementos ms grandes, altos o anchos tienen una
114

carga visual superior a los ms pequeos, cortos o finos, creando zonas de

atraccin ms intensas.

Figura IV. 27 PROPORCION DE TAMAO

Tambin podemos delimitar proporciones en un grafismo mediante el color,

con el que podemos definir distintas reas tonales tiles para distribuir de
forma adecuada toda la informacin grfica. En este sentido, los colores
puros y saturados tienen un mayor peso visual que los secundarios neutros,
y estos mayor que los terciarios poco saturados.

Figura IV. 28 PROPORCION POR COLOR

Otra tcnica para definir proporciones es el uso de agrupaciones de

elementos y la correcta distribucin de estas en el escenario, lo que nos va a
permitir estructurar de una forma u otra la composicin.

Figura IV. 29 PROPORCION POR COLOR

115

Este sistema suele dar buenos resultados, siempre que no abusemos de l

creando un excesivo nmero de bloques significativos, ya que entonces se
restaran importancia unos a otros y se perdera la proporcionalidad
buscada.
4.9.8.4.

LEGIBILIDAD Y LECTURABILIDAD

En funcin a la lectura es escoge la calidad de la imagen, tipografa o el

interlineado, tomando en cuenta caractersticas propias que permita
visualmente distinguir una seccin de otra y que el texto pueda ser ledo
fcilmente cuando son presentados en oraciones, prrafos, o ttulos.
4.9.8.5.

FORMA VISUAL

Es la forma en que se va a dar la lectura del sitio y en la que se presenta: en

esta ocasin se da en Z ya que se va de la parte superior de izquierda a
derecha, en el medio de forma diagonal y en la parte inferior va de izquierda
a derecha. Se da esta presentacin por la aplicacin de:
Mens con disposicin horizontal;

Figura IV. 30 FORMA VISUAL

Y vertical;

Figura IV. 31 FORMA VISUAL

116

Como mencionamos antes, para sitios web con un nmero de pginas

pequeo puede ser bueno enlazar a todas ellas desde cada pgina para que
el usuario tenga en todo momento la informacin disponible en la web a su
alcance.
4.9.9. PRESENTACIONES
4.9.9.1.

GENERAL

El logotipo se ubicara en la parte superior izquierda del interfaz en todas sus

secciones, y en las reas que se necesiten la identificacin institucional.

Figura IV. 32 PRESENTACION

4.9.9.2.

ESPECIFICO

Es el uso del logotipo con todos sus elementos visuales se aplica en la

portada del sitio web

Figura IV. 33 PRESENTACION ESPECFICO

117

4.9.9.3.

GAMA CROMATICA DEL INTERFAZ WEB

Figura IV. 34 GAMA CROMATICA DEL INTERFAZ

4.9.9.4.

ESTRUCTURA VISUAL DE COMUNICACIN

4.9.9.4.1. DISPOSICIN DEL LOGOTIPO

Permite el logotipo tenga un grado de percepcin de lo que se est
representando y de lo que se desea comunicar segn la ubicacin del
formato:
Se usa en la portada de forma horizontal con una ubicacin centrada
para brindar ms realce al sitio web.
Se presentara de forma horizontal, ubicado en la parte superior
izquierda de cada seccin de la pgina.
4.9.9.4.2. TIPOGRAFA EN LA INTERFAZ

Century Gotic Bold

A, B, C, D, E, F, G, H, I, J, K, L, M, N, , O, P, Q, R, S, T, U, V, W, X, Y y Z
a, b, c, d, e, f, g, h, i, j, k, l, m, n, , o, p, q, r, s, t, u, v, w, x, y y z

Esta tipografa se la utilizo en el men, sub men y contenidos por su forma

ya que esta se caracteriza por ser gruesa lo cual le hace que tenga una
buena visibilidad.

Rockwell
A, B, C, D, E, F, G, H, I, J, K, L, M, N, , O, P, Q, R, S, T, U, V, W,
X, Y y Z
a, b, c, d, e, f, g, h, i, j, k, l, m, n, , o, p, q, r, s, t, u, v, w, x, y
yz

118

Esta tipografa se la utilizo en los ttulos y sub ttulos se la utilizo por su

forma ya que esta se caracteriza por su forma cuadrada lo cual le hace ms
visible al usuario.
4.9.9.4.3. LEGIBILIDAD
La tipografa presenta en forma clara y legible para ser leda e identificada ya
que permite la percepcin del nombre de la institucin en cuanto a la forma,
presentacin y disposicin dando como resulta la composicin de caracteres
para el logotipo que permiten leer el texto.
4.9.10.

DISEO Y ESTRUCTURA DEL INTERFAZ WEB

Posee una estructura dinmica e interactiva fcil de navegar y de usar que

permite al usuario interactuar con el sitio ya que posee un diseo armnico.

Figura IV. 35 ESTRUCTURA DEL INETRFAZ

Figura IV. 36 ESTRUCTURA DEL INTERFAZ

119

4.9.10.1.

DISEO COMPLETO

Figura IV. 37 DISEO COMPLETO

4.9.10.2. ELEMENTOS DE LA PGINA

Iconos.- es un smbolo pequeo y de imagen fcilmente reconocible y

que sirve para activar un enlace.

Secciones.- permite a la pgina presentarse en diferentes escenas o

secciones.

Imgenes.- las ilustraciones captan la atencin del usuario y brindan

una lengua visual exacta.

Animaciones.- permite que la pagina sea dinmica y interactiva para el

usuario causando mayor impacto en el mismo

Descansos visuales.-

son los espacios en blanco y son los que

previenen la saturacin de la pgina.

Fondo.- son los colores que representan la identidad corporativa.

120

4.9.11.

MAPA DE NAVEGACION DEL SITIO WEB

Muestra de una forma grfica el acceso a la pgina y como est compuesta

y su interaccin.

Figura IV. 38 Mapa De Navegacin Del Sitio Web

121

4.10.

GUIN WEB

4.10.1.

SECCION BIENVENIDA

122

4.10.2.

SECCION INICIO: Est diseada de la siguiente manera:

123

4.10.3.

SECCIN OFERTAS ACADMICAS: est diseada de la siguiente manera:

124

4.10.3.1. MECNICA GENERAL

125

4.10.3.2. EBANISTERA

126

4.10.3.3.

TEJIDO TPICO EN TELAR

127

4.10.3.4. CERMICA

128

4.10.3.5. JEFE DE COCINA - CHEF

129

4.10.4.

SECCIN NOTICIAS

130

4.10.4.1. MATRICULAS

131

4.10.4.2. INVESTIGACIONES

132

4.10.4.3. CRONOGRAMA DE ACTIVIDADES

133

4.10.4.4. ALUMNOS DESTACADOS

134

4.10.4.5. SPOT PUBLICITARIO

135

4.10.5.

GALERIA

136

4.10.5.1. BACHILLERATO

137

4.10.5.2. CICLO BSICO

138

4.10.5.3. DOCENTES

139

4.10.6.

VOLUNTARIADO

140

4.10.6.1. PASANTIAS INTERNACIONALES

141

4.10.6.2. PROYECTO EMPRENDIMIENTO SOCIAL JUVENIL (JES)

142

4.10.6.3.

ALFABETIZACIN

143

4.10.6.4. APADRINAMIENTO

144

4.10.7.

CONTACTOS

145

4.11.

CONTENIDO

Estn compuestas por varias animaciones, recuadros textos e imgenes,

que presenta informacin sobre la institucin, tanto acadmica como social.
La informacin est redactada de una forma simple pero concreta que brinda
un mensaje central o idea. La tipografa utilizada resalta y es clara para la
visualizacin que percibe el usuario, se presenta con pequeos cuadros de
texto ya que eso permite alcanzar una armona en la pgina y no la satura
solo con escritura y tambin permite brindar informacin por imgenes.
4.11.1.

DESCRIPCIN TIPOGRFICA

Century Gotic Bold

La tipografa construida a partir de lneas rectas y figuras geomtricos como

el circulo y el cuadrado, es minimalista, sin modulacin ni variaciones delos
grosores de los palos. Diseada por la fundicin Monotype, esta tipografa
geomtrica sin serif.
Por su forma y presentacin se utiliz en el men principal, en submens y
contenidos de la pgina web

A, B, C, D, E, F, G, H, I, J, K, L, M, N, , O, P, Q,
R, S, T, U, V, W, X, Y y Z
a, b, c, d, e, f, g, h, i, j, k, l, m, n, , o, p, q, r,
s, t, u, v, w, x, y y z

Rockwell

Tienen apariencia fuerte y rectangular, en ocasiones los caracteres son de

anchura fija, es decir, todos ocupan lo mismo horizontalmente (como ocurre

146

en las mquinas de escribir). Esta tipografa a veces se ven como fuentes

paloseco con serifas porque las formas de los caracteres suelen ser
similares a los de las fuentes paloseco con menor variacin entre las formas
finas y gruesas.
La visibilidad y la legibilidad que presenta esta tipografa permiten ser
aplicada en subttulos y ttulos de los contenidos, ya se visualiza de forma
clara el texto.

A, B, C, D, E, F, G, H, I, J, K, L, M, N, , O, P,
Q, R, S, T, U, V, W, X, Y y Z
a, b, c, d, e, f, g, h, i, j, k, l, m, n, , o, p, q,
r, s, t, u, v, w, x, y y z
4.11.2.

USO DE IMGENES

La presentacin de las imgenes se basan en:

Limitacin y peso de la imagen adecuada para una fcil navegacin.
La resolucin de la imagen debe ser apropiada de acuerdo a la
dimensin que se le vaya aplicar y debe ser ntida
Dejar el tamao de la imagen segn vaya a ser utilizado ampliacin o
reduccin.
La ubicacin y forma debe estar de acuerdo a lo que se desea
interpretar y a la esttica.

147

 Se aplicara animacin en las imgenes para volver a la pgina

dinmica.

4.11.3.

ESTORY BOARD: PRESENTACION DE LA MARCA

La marca va identifica en el diseo del sitio web y en su identidad

corporativa. La fuerza distintiva del logotipo y su gama cromtica le permite
llamar la atencin del usuario eligiendo el sitio web, al suceder esto
retribuye el esfuerzo del titular de la marca, adems su URL es fcil de
memorizar y permite identificar a la institucin que representa.
En todo el sitio web va identificada e individualizada la institucin por las
formas grficas, la usabilidad y toda la representacin que permiten un grado
de posicionamiento en el mercado generndole mayor accesibilidad.
4.12.

EVALUACION MEDIANTE LOS PATRONES DE DISEO

PATRN
Tamao de interfaz

ANLISIS EN EL SITIO
Al aplicar el interfaz de 1024x768 pixel y limitar la
dimensin el interfaz fue aceptado por el usuario y
el sitio web acadmico se presente de una forma
impactante. Ya que el diseador destaca bien los
ttulos de cada post para que no se tenga dudas
de cuando comienza o termina otro, usando un
color y tamao de fuente diferente, para ttulos y
textos.

Sitio

acadmico La interaccin en el sitio web acadmico brinda

148

Animado

animacin al usuario pero siempre con esttica

para que no se manifieste como algo tedioso. Si
no que llame la atencin, impacte, sea fcil de
usar y que satisfaga las necesidades de los
usuarios.

Botn rollover

Al aplicar los botones rollover transforma al sitio

animado y llama la atencin del usuario, adems
permite que el usuario identifique el icono a utilizar
y no se confunda.

Checkbox

Por ser un

elemento de la interfaz grfica de

usuario que permite al usuario hacer selecciones

mltiples de un conjunto de opciones estn
mostradas en la pantalla como una caja cuadrada
que puede contener un espacio en blanco (para
deseleccionar) o una marca de chequeo o una X
(para seleccionar).
Contexto

Para sitios acadmicos se recomienda un contexto

sobrio y de fcil navegacin. Las dimensiones del
contexto son la funcin y la esttica. Dentro de la
funcin estn: la divisin de la seccin, la
estructura de vnculos, las herramientas de
navegacin, la velocidad de carga, la confiabilidad,
la independencia de plataforma, acceso a los
medios y el valor prctico. Y dentro la esttica son:
el esquema de colores y los temas visuales.

Contenido

Si los contenidos son de valor el visitante

seguramente regresar. Las dimensiones para el
contenido son: mezcla de ofertas, mezcla de
atraccin,
contenido.

149

mezcla de multimedia y tipo de

Identidad corporativa

La identidad corporativa es el elemento central de

comunicacin, estilo y enfoque de diseo que nos
permite mostrar una imagen unificada y con un
concepto diferenciador.

Simblico, Estructural,

Sinrgico, Cromtico y de universalidad temporal

de lugar

y de grupo objetivo. Ya definido el

concepto o estilo para proyectar, se le aade a la

pgina web como entrada el logotipo de la
institucin y los contenidos de los colores se
representan con los colores del establecimiento.
Con el fin de que los usuarios solo con observar
sepan

de qu institucin es la pgina web y

distingan la identidad que tiene.

Mensajes de la portada Los mensajes ofrecen la posibilidad de mostrar
concretos

slo un resumen en la portada o idea principal,

comnmente dispuesta como una opcin ms, en
las opciones de la edicin de portada.
El desarrollador debe asegurarse que el resumen
contenga suficiente informacin, para que el
usuario sepa qu tema se est tratando.
Si la publicacin es muy extensa, se debe mostrar
slo un resumen en la portada del sitio web,
dejando un link para que un usuario pueda leer el
mensaje en su totalidad (en una pgina aparte).
As todos los mensajes tendrn un tamao
promedio.

Multimedia interactiva

Aplicacin de animaciones como flash o de tipo

revista que interactu con el usuario y llame la
atencin del mismo, definiendo muy bien el lbum

150

que se desea mostrar e identificando cada una de

ellos.
Caja de comentario

Un cuadro de comentario es bsicamente un tipo

simple de formulario . Los campos principales son
el nombre, direccin de correo electrnico y de los
propios comentarios. Adems, una direccin del
sitio web tambin se le puede pedir. La direccin
de correo electrnico es la mayora del tiempo
pedido con el fin de poder notificar a la
comentarista de respuestas o de seguimiento,
pero generalmente no es mostrado cuando se
muestra el comentario. Indican claramente que los
campos son obligatorios y cules son opcionales.

Desplazamiento vertical

La solucin es usar una navegacin vertical para

destacar sus categoras ms importantes. As, en
unos

pocos

segundos

con

slo

ver

la

navegacin, el usuario puede obtener a travs de

las categoras, una idea general de todo lo que
puede ofrecerle el sitio web.
Se recomienda el uso de este patrn slo cuando
se tienen pocas categoras en el sitio web, de otra
forma se hace impracticable.
Animacin

La solucin es usar una animacin sencilla y

elegante

para destacar sus categoras ms

importantes. As, en unos pocos segundos y con

slo ver la navegacin, el usuario puede obtener
una idea agradable del sitio. Se recomienda el uso
de este patrn para realizar un sitio armnico e
impactante.

151

Tabla 24. Evaluacin Mediante Los Patrones De Diseo

4.13.

PROGRAMACIN

a) Permite la ejecucin de la pgina web, su funcionalidad, usabilidad,

accesibilidad y navegacin por todo el sitio web.

Figura IV. 39 Programaciones del ndex

b) La codificacin y las etiquetas empleadas permiten el llamado de

archivos externos para la presentacin en el sitio web.

Figura IV. 40 etiquetas y codificacin

152

c) Esta Interpolacin de movimiento permite al acercar con el mouse en

el logotipo en la pgina de bienvenida cambie de presentacin y
adems de eso admite la accesibilidad al sitio web

Figura IV. 41 interpolaciones de movimiento

d) Permite el ingreso de la imagen en cada presentacin las diferentes

seccione utilizando un efecto desenfoque.

Figura IV. 42 interpolaciones de movimiento de enfoque

e) Audio de Botones: En la programacin del audio de los botones se ha

utilizado el siguiente cdigo para realizar la siguiente accin: Cuando
el mouse se deslice sobre un botn el audio se enciende y cuando el
mouse deja de estar sobre un botn, el audio se detiene, Por ejemplo:
Mecnica General

Figura IV. 43 audio de botones

153

f) Este cdigo permite descargar archivos externos con la finalidad que

el usuario acceda a ms informacin.

Figura IV. 44 descarga de archivos

g) Este cdigo me permite interactuar con el usuario, mostrando un

movimiento real de la revista

154

Figura IV. 45 movimiento real de revista

h) El CODIGO DE FORMULARIO permite el acceso para llenar el

formulario para dejar comentarios, recomendaciones y registrar
nuestros datos.

Figura IV. 45 movimiento real de revist

155

4.14.

PRUEBAS DE USUARIO

4.14.1.

TABULACIN Y ANLISIS
TAREAS DE USUARIOS

1. INTRODUCCIN
Este informe contiene el resumen de la Prueba de Usabilidad realizada al
Sitio Web Acadmico, con el propsito de obtener informacin referente a la
facilidad de uso del sitio en la realizacin de diversas tareas, y evaluar la
aplicacin de los patrones de usabilidad de interfaz.
Se detalla el procedimiento empleado, las tareas que realizaron los usuarios
y las principales observaciones recogidas durante la supervisin de la
prueba a cerca del comportamiento de cada uno de los participantes en la
ejecucin de las tareas encomendadas, para luego hacer un breve anlisis
de los resultados obtenidos y terminar el presente documento con las
conclusiones derivadas de este estudio.
2. PROPOSITO
El propsito de esta prueba de usabilidad fue obtener informacin acerca de
la facilidad de uso del sitio y si funciona adecuadamente o si los usuarios
pueden usarlo satisfactoriamente para llevar a cabo todas las tareas.
3. USUARIOS DE PRUEBA
El estudio se realiz con 10 usuario catalogados como Usuarios expertos
dada su experiencia en el uso de sitios web acadmicos o navegacin por
los mismos. Esta seleccin de usuarios se logr gracias al anlisis de las
respuestas al Pre-Cuestionario aplicado a ellos antes de ejecutar las tareas,
los cuales evidenciaron que tenan experiencia previa en el uso de algn
sitio web acadmico. El cuestionario Pre-test se muestra en el Anexo 2.

156

La tabla que se presenta a continuacin, resume el perfil de cada uno de los

usuarios que participaron.
Tabla 1. Resumen Perfil de Usuarios de Prueba
USUARI

EDA

SEX

CONOCIMIENTO

EXPERIENCI CONOCE LA

S DE INTERNET

A EN SITIOS

INSTITUCIO

WEB

ACADEMICO
S
Experto

1923

Intermedios

SI

SI

4. PROCEDIMIENTO
La prueba se realiz mediante la observacin del desempeo de un usuario
real en un contexto de tarea y fue realizada en el laboratorio de la
ESPOCH.
Los usuarios, previamente firmaron una forma de consentimiento (Ver
Anexo 1),

a travs de la cual acept su participacin y autorizaron la

publicacin y difusin de sus resultados.

Adicionalmente llenaron un Cuestionario Pre-Test, a partir del cual se pudo
determinar que se encontraban en la categora de usuarios expertos y es
as como fueron evaluados. El modelo del cuestionario Pre-Test utilizado se
puede observar en el Anexo 3.
Los usuarios recibieron un listado con las Tareas que deban realizar, cada
una de ellas compuesta de Sub-Tareas tal como se puede observar en el
Anexo 4. Todo el proceso fue registrado en un video donde fue tomada la
prueba.

157

El Supervisor vigil la realizacin de la prueba, tomando el tiempo que

demora el usuario en completar la tarea y analizando cada una de ellas
segn los criterios establecidos en el Documento de Diseo de la Prueba.
Ver Anexo 1.
TAREAS QUE REALIZARON LOS USUARIOS
TAREA N
Descripcin

1
Bsqueda y Navegacin a travs de las secciones
del sitio.

Criterios de xito

Navega por los mens y logra desplegar la lista de

los submens y encuentre el cronograma.

Tiempo Max (Usuario 3 minutos

Experto)
TAREA N

Descripcin

Bsqueda de informacin especfica

Criterios de xito

El Usuario logra encontrar la informacin deseada

Tiempo Max (Usuario 3 minutos

Experto)
TAREA N

Descripcin

Descarga de archivo

Criterios de xito

Obtiene la informacin y descarga la misma

Tiempo Max (Usuario 2 minutos

Experto)
TAREA N

Descripcin

Interaccin con la galera

Criterios de xito

Luego de observar las imgenes el usuario

distingue cada uno

Tiempo Max (Usuario 3 minutos

Experto)

158

TAREA N

Descripcin

Bsqueda de la seccin de contactos.

Criterios de xito

El usuario expresa su criterio referente al sitio

web.

Tiempo Max (Usuario 3 minutos

Experto)
TAREA N

Descripcin

Bsqueda de secciones

Criterios de xito

Encuentra la noticia ms relevante. Identificacin

y navegacin de la seccin.

Tiempo Max (Usuario 4 minutos

Experto)

El supervisor registr el comportamiento de los usuarios una hoja de

registro, siguiendo los criterios establecidos para cada tarea, as como
significativas tanto en el comportamiento del usuario como en la realizacin
del proceso.
Tanto los cuestionarios y la prueba de usabilidad, fueron analizados para la
realizacin del presente informe.
5. RESULTADOS
Las tablas y grficos que se presentan a continuacin resumen el resultado
de la ejecucin de las tareas por parte de cada uno de los usuarios.

159

TAREA 1. Bsqueda y Navegacin a travs de las secciones del sitio.

Sub Tareas
1. Ingrese

al

sitio

web

travs

del

navegador

con

la

www.uakolpingyaruquies.edu.ec
2. Navegue por las secciones del sitio y encuentre el cronograma de
trabajo.
Cuadro # 1
TIEMPO EN REALIZAR
LA TAREA
1 MINUTO
2 MINUTO
3 MINUTO
TOTAL

ENCUESTADOS
2
4
4
10

PORCENTAJE
20
40
40
100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 1

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.El 40% de los alumnos lo realizaron en 3 minutos, el 40% lo hizo en 2

minutos, mientras que un 20% lo realiza en un minuto, lo que determina que
la tarea fue un xito y que el sitio tiene una navegabilidad adecuada.

160

TAREA 2. Bsqueda de informacin especfica.

Sub Tareas
1. Encuentre la seccin pasantas
2. Navegue por el sitio y mencione si ha viajado algn miembro de la
institucin.
Cuadro # 2
TIEMPO EN REALIZAR LA
TAREA
1 MINUTO
2 MINUTO
3 MINUTO
7 MINUTOS
TOTAL

ENCUESTADOS
3
5
1
1
10

PORCENTAJE
30
50
10
10
100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 2

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.La tarea fue por 5 personas realizada en un tiempo de dos minutos, seguido
de un 30% por un minuto lo que con lleva que fue un xito, mientras que un
10% lo realiza en 7 minutos motivo por tal se realiza algunos cambios en el
sitio con la finalidad de satisfacer a toso los usuarios.

161

TAREA 3. Descarga de archivo.

Sub tareas
1. Encuentre la carrera de mecnica general y descargue su pensum de
estudio.
Cuadro #3
TIEMPO EN REALIZAR LA
TAREA
1 MINUTO
2 MINUTO
3 MINUTO
TOTAL

ENCUESTADOS

PORCENTAJE
6
3
1
10

60
30
10
100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 3

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.El 60% la realiza en un minuto, seguido por un 30% que lo hace en dos
minutos, lo que determina que el sitio es fcil de navegar y rpida en la
descarga de documentos, mientras que un 10% lo realiza en 3 minutos dado
ha esto se manifiesta que es un xito.

162

TAREA 4. Interaccin con la galera.

Sub Tareas
1. Interacte con la galera y mencione cuantas fotos presenta dicha
seccin.
Cuadro # 4
TIEMPO EN REALIZAR LA
TAREA

ENCUESTADOS

PORCENTAJE

1 MINUTO

60

2 MINUTO

10

3 MINUTO

30

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 4

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Se observa que el 60% lo realiza en un minuto, seguido del 30% que lo
hace en tres minutos, lo que con lleva decir que es un xito y la trasforma
en una pgina dinmica.
163

TAREA 5. Bsqueda de la seccin de contactos.

Sub Tareas
1. Envi una sugerencia o recomendacin con respecto al sitio web.
Cuadro # 5
TIEMPO EN REALIZAR LA
TAREA

ENCUESTADOS

PORCENTAJE

1 MINUTO

40

2 MINUTO

60

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 5

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.El 60% de las personas lo realiza en 2 minutos, mientras que el 40% lo hace
en 1 minuto, determinando el xito total y adems se aprueba los patrones
planteados en el desarrollo del sitio web acadmico.

164

TAREA 6. Bsqueda de secciones

Sub tareas
1. Encuentre la seccin noticias y mencione la noticia ms relevante.
Cuadro # 6
TIEMPO EN REALIZAR LA
TAREA
1 minuto
2 minuto
3 minuto
total

ENCUESTADOS
7
2
1
10

PORCENTAJE
70
20
10
100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 6

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Un 70% hace su tarea en un minuto, seguido por un 20% que lo realiza en
dos minutos mientras que un 10 % lo hace en tres, dando como resultado
xito en la tarea y al sitio web.

165

DETALLE DE LA PRUEBA

La letra de los ttulos y cuadros de textos son legibles y claros
Cuadro # 7
ALTERNATIVAS
SI
A VECES
NO
TOTAL

ENCUESTADOS
10
0
0
10

PORCENTAJE
100
0
0
100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 7

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.De las pruebas aplicadas el 100% responde que si entiende los textos eso
quiere decir que el diseo

planteado es adecuado para un sitio web

acadmico.

166


La pgina identifica a su institucin.

Cuadro # 8
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SI

80

NO

20

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 8

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.La mayor parte de alumnos responden que si, correspondiendo al 80% lo

que significa que el sitio web identifica a la institucin, mientras que el 20%
respondi no.

167


El logotipo representa a la institucin

Cuadro # 9
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SI

90

NO

10

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 9

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.El 90% de los sometidos a la prueba manifiesta que el logotipo representa a

la institucin dndome aprobado el patrn de identidad corporativa, mientras
que el 10% manifiesta que no.

168


La pgina se carga
Cuadro # 10
ALTERNATIVAS
MUY RAPIDA
RAPIDA
NORMAL
LENTA
MUY LENTA
TOTAL

ENCUESTADOS
5
3
2
0
0
10

PORCENTAJE
50
30
20
0
0
100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 10

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.De acuerdo a los datos obtenidos se puede determinar que 5 alumnos

representando el 50% manifiesta que la pgina se carga muy rpidamente,
el 30% manifiesta que se carga rpidamente, mientras que el 20%
manifiesta que es normal el cargue de la pgina; lo que determina que el
peso de los archivos es adecuado para un sitio web.

169


Al navegar por el sitio web usted identifica claramente la seccin u opcin

que est utilizando
Cuadro # 11
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SIEMPRE

70

A VECES

30

NUNCA

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 11

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Se observa que el 70% si identifica la seccin que estn utilizando, mientras
que el 30% manifiesta que no, lo que conlleva a decir que la navegabilidad
es fcil de acceder por el diseo bien estructurado.

170


El contenido de la pgina parece fiable y evidente?

Cuadro # 12
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SI

10

100

A VECES

NO

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 12

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Ha esta pregunta responden el 100% de los alumnos que el sitio web es
fiable y evidente, lo que determina la seguridad de la pgina.

171


Los efectos visuales aaden funcionalidad o informacin al sitio.

Cuadro # 13
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SI

10

100

NO

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 13

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.De las opciones mencionadas el 100% manifestaron que los efectos visuales
dan funcionalidad al sitio, lo que determina el dinamismo de la pgina.

172


El contenido mostrado en el sitio es suficiente para responder a

preguntas.
Cuadro # 14
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SI

70

A VECES

30

NO

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 14

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.La mayor parte de alumnos responden que s, correspondiendo al 70%,

mientras que el 30% manifiesta que a veces, lo que determina que le
contenido es claro y concreto.

173


Describa el tamao del texto

Cuadro # 15
ALTERNATIVAS
ADECUADO
DEMASIADO PEQUEO
DEMASIADO GRANDE
TOTAL

ENCUESTADOS
10
0
0
10

PORCENTAJE
100
0
0
100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 15

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Ha esta pregunta responden el 100% de los alumnos que el tamao del texto
es adecuado, lo que determina que en el sitio hay claridad y precisin en el
contenido.

174


La pgina es fcil de utilizar.

Cuadro # 16
Alternativas

encuestados

Porcentaje

Si

10

100

A veces

No

Total

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 16

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Se observa que el 100% de los alumnos, manifiestan que el sitio web es fcil
de utilizarlo.

175


La pgina de inicio est diseada profesionalmente y va a crear una

primera impresin positiva.
Cuadro # 17
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SI

10

100

A VECES

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 17

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Ha esta pregunta responden el 100% de los alumnos que la pgina web est
diseada profesionalmente lo que permite validar los patrones aplicados en
el sitio web.

176


La tamao de la pantalla es apropiada para los usuarios y sus tareas

Cuadro # 18

ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SI

90

NO

10

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 18

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.La mayor parte de los alumnos responden que si correspondiendo al 90%,

mientras que el 10% manifiesta que la pantalla no es apropiada para el
usuario.

177


Los botones y los links muestran cuando son clickeados

Cuadro # 19
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

SI

80

NO

20

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 19

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Ha esta pregunta responden el 80 % de los alumnos que los botones y links
muestran cuando son clickeados, mientras que el 20% manifiesta que no, lo
que determina que el sitio est bien enfocado y su diseo es usable para el
usuario.

178

4.15.

ANLISIS GLOBAL DE LAS PRUEBAS DE TAREAS

Fracaso o xito en la prueba aplicada

Cuadro #20
ALTERNATIVAS

ENCUESTADOS

PORCENTAJE

XITO

90

90

FRACASO

10

TOTAL

10

100

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

Grfico # 19

FUENTE: Pruebas aplicadas a 10 alumnos de la EIS de la ESPOCH

ELABORADO POR: David Isin

ANALISIS.Se observo que el 90% realizado todas las tareas sin ninguna complicacin
lo que nos conlleva decir que se alcanzo xito mientras que un 10% tuvo
complicaciones en el desarrollo de algunas tareas lo que nos ayudo a
mejorar y refinar el sito web acadmico.

179

4.16.

VALIDACIN DE LA HIPTESIS

La aplicacin de un catlogo de patrones para el diseo de sitios web

acadmicos permitir mejorar la navegacin usabilidad e interactividad en
este tipo de sitios

El catlogo de patrones desarrollado para el diseo de sitios web mejora la

navegacin, usabilidad e interactividad del mismo, fue validado ya que se
aplic en el sitio web acadmico del colegio Adolfo Kolping y evaluado por
pruebas de usuario y de usabilidad con parmetros de xito y fracaso a lo
que se determin que fue un xito total. Dando a la hiptesis la afirmacin.

180

4.17.

CONCLUSIONES

Una vez concluido el trabajo de investigacin se puede llegar a las

siguientes conclusiones.

Se analiz, estudio catlogos y patrones existentes referentes al
desarrollo del sitio web, lo que permiti conceptualizar y plantear
nuevos patrones especficos para la creacin de un sitio web
acadmico.

Se cre un catlogo de patrones enfocados a la usabilidad,
navegabilidad, accesibilidad e interactividad de los sitios web con la
intencin de satisfacer las necesidades del usuario.

El catalogo se aplic en el sitio web acadmico que se desarroll en el
colegio Adolfo Kolping, identificando a la institucin y cumpliendo las
expectativas de los usuarios.

Se valid el catlogo de patrones en el sitio web con la aplicacin de
pruebas de usuario y de usabilidad con la obtencin de xito en las
tareas propuestas y gracias a los resultados obtenidos en las pruebas
se logr refinar y mejora el sitio web.

Al realizar las tareas un usuario encontr dificultad en el descargue de

los archivos debido a que el botn se encontraba situado
inadecuadamente por lo que se le cambio de sitio aun ms visto y
cercano a un titulo. El botn de contactos de envi en contactos no se
distingua por lo que se le aumento un cuadro que le distingue.

181

4.18.

RECOMENDACIONES

Se recomienda a la Directora de la institucin que solicite al personal de

informtica la actualizacin de la informacin mensual para que la pgina
se mantenga actualizada.

Se recomienda a los diseadores de sitios web que analicen, compartan

y apliquen el catlogo de patrones para el desarrollo de interfaz web
acadmico que se presenta.

Se recomienda a los alumnos de la ESPOCH que revisen este trabajo

investigativo con la finalidad que sea un modelo o gua para el desarrollo
de futuras investigaciones.

182

RESUMEN
Investigacin para la Creacin de un catlogo de patrones de diseo de
interfaz grfica para sitios web acadmicos; para el Colegio Adolfo Kolping
de la ciudad de Riobamba. Con la finalidad de crear una gua y un
vocabulario comn entre los diseadores y desarrolladores de estos sitios.
Mediante mtodo deductivo se pudo analizar pginas web acadmicas
existentes, observndose la falta de aplicacin de patrones, algunos errores
en el desarrollo del sitio lo que no permite mantener la navegabilidad,
interactividad, usabilidad que requiere un sitio web.
Se utilizo investigacin experimental mediante organizacin, planeacin,
ejecucin, y evaluacin con la utilizacin de pruebas de usabilidad para
validar la aplicacin del catalogo de patrones.
Se desarrollo un catlogo de patrones y un sitio web acadmico que fueron
elaborados con los programas Adobe Flash, Dreamweaver, Photoshop y
Illustrador, adems se emplearon herramientas y tcnicas de diseo, que
facilitaron el desarrollo de las mismas, tales como fotografa.
Para evaluar la tesis se consideraron dos parmetros: el anlisis del diseo
web y el contenido de los patrones, mediante pruebas de usabilidad y de
usuario. La evaluacin proporcion como resultado que el porcentaje de
aceptacin del catlogo de patrones de diseo de interfaz web obtuvo un
90%.
Se concluye que el catlogo es usable en el desarrollo de sitios web
acadmicos ya que con las pruebas y los resultados obtenidos se logr
refino y mejoro el sitio web.

183

SUMMARY
Research to create a catalog of design patterns of graphic interface for
academic websites; for College Adolfo Kolping the city of Riobamba, In
order to create guidance and a common vocabulary among designers and
developers of these sites.
By deductive method could be analyzed exiting academic web pages,
showing the lack of implementation of standards, some errors in the
development of the site making it impossible to maintain the navigability,
interactivity, usability requires a website.
Experimental research was used by organization, planning, implementation,
and evaluation using usability testing to validate the application of the pattern
catalog.
It was developed a pattern catalog and web site academic programs were
developed with Adobe Flash, Dreamweaver, Photoshop and Illustrator, as
well as tools and techniques were used to design, which facilitated their
development, such as photography.
To evaluate the thesis it was considered two parameters: the analysis of the
design and content we patterns through usability testing and user. The
evaluation provided results in the acceptance rate of catalog design patterns
web interface was 90%.
It concludes that the catalog is usable in the development of academic
websites as the tests and the results achieved refine and improve the
website.
Therefore it is recommended that designers analyze, share and apply the
patterns catalog for academic web interface development.

184

BIBLIOGRAFIA
1. BUSCHMANN, A. A System of Patterns. EEUU, Wiley, 2007. pp. 225 240

2. COON, D. Psicologa. 8a. ed. Washington EEUU, Thomson, 1999. 732p.

3. CHAVEZ,N. Diseo y Comunicacin Visual. Mexico, G.G, 2008. pp.120145

4. DREAM, B. Ensayo sobre la Teoria del Color. Whashington EEUU, D.C.T.
2007. pp. 65-78
5. KOTLER, P. Direccin de Marketing. 10a. ed. Mxico DF, Pearson
Education, 2001. pp.172, 300.

6. LARMAN, J. Unificacin de Modelos de Lenguaje y Patrones. Londres,

Prentice Hall, 2004. pp. 775 - 784
7. MUNARI, B. Diseo y Comunicacin Visual. 8. ed. Barcelona, G.G, 1985.
p.p. 82-84
8. POWELL, T. Diseo de Sitios Web. Madrid Espaa, Mc Graw Hill, 2001.
pp. 741 - 793

9. RUSSELL, J. T y LANE, W. R. Kleppner Publicidad. 14a. ed.Mxico DF,

Pearson Education, 2001. pp. 98, 427 448, 472 482, 596.
10. SANDOVAL, M. Diseo Grfico: texto bsico. Riobamba - Ecuador, 2007.
pp. 1 - 46.(producto de computadora)

185

BIBLIOGRAFA DE INTERNET
11. DOCSTOC
http://www.docstoc.com/docs/271661/Patrones-de-dise%C3%B1o-deinterfaces-Web/
2010 09 28
12. FOROSDELWEB
http://www.forosdelweb.com/f50/interfaz-grafica -conmvc-patrones
914524/
2010 12 04
13. LAWEBERA
http://www.lawebera.es/de0/usabilidad.php
2010 10 28
14. RINAMED
http://www.rinamed.net/es/patrones_de_diseo.htm
2011-03 -06
15. RINCON DEL VAGO
http://html.rincondelvago.com/interfazgrafica.html
2011 03 11
16. UNIVERSIA

186

http://mit.ocw.universia.net/6.170/f01/pdf/lecture-12.pdf
http://mit.ocw.universia.net/6.170/f01/pdf/lecture-13.pdf
2011 02 30
17. WIKIPEDIA
http://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o
2011 0320
http://es.wikipedia.org/wiki/usabilidad.php
2011 03 - 28

187

ANEXO.1
DISEO PRUEBA DE USABILIDAD

188

PRODUCTO A EVALUAR: SITIO WEB ACADEMICO

PROPSITO
El propsito de esta prueba de usabilidad es obtener informacin acerca de
la facilidad de uso, si funciona adecuadamente y si los usuarios pueden
usarlo fcilmente para llevar a cabo todas las tareas.
RECOMENDACIONES

El supervisor y el usuario no deben tener ningn tipo de interaccin
DURANTE el desarrollo de la prueba.

El nmero mnimo de participantes en la prueba debe ser 5 para
obtener resultados fiables.

La prueba ser complementada con cuestionarios post-test.
TIPO DE PRODUCTO A EVALUAR
El producto que se va a evaluar con la presente prueba de usabilidad es un
Sitio web acadmico y la aplicacin de los patrones de interfaz ejecutados.
OBJETIVO DE LA PRUEBA
Obtener informacin sobre la facilidad de ingreso y la navegacin en el sitio
acadmico.
FACTORES A MEDIR
Tiempo que los usuarios toman en completar una tarea especfica.
Cantidad de tareas que el usuario puede realizar en un tiempo lmite dado.
Cantidad de errores que comete el usuario al usar el producto.
Tiempo utilizado por el usuario en recuperarse de los errores.
PERFILES DE USUARIOS
Se considerar:
Usuario Experto el usuario que ha interactuado con el sitio web
acadmico y/o algn otro sitio web acadmico.

189

DEFINICIN DE TAREAS
Tarea n

Descripcin

Bsqueda y Navegacin a travs de las secciones

del sitio.

Criterios de xito

Navega por los mens y logra desplegar la lista de

los submens

Tiempo Max (Usuario 4 minutos

Experto)

Tarea n

Descripcin

Bsqueda de informacin especfica

Criterios de xito

El Usuario logra encontrar la informacin deseada

Tiempo Max (Usuario 3 minutos

Experto)

Tarea n

Descripcin

Descarga de archivo

Criterios de xito

Obtiene la informacin y descarga la misma

Tiempo Max (Usuario 2 minutos

Experto)

Tarea n

Descripcin

Interaccin con la galera

Criterios de xito

Luego de observar las imgenes el usuario

distingue cada uno

Tiempo Max (Usuario 3 minutos

Experto)

190

Tarea n

Descripcin

Bsqueda de la seccin de contactos.

Criterios de xito

El usuario expresa su criterio referente al sitio

web.

Tiempo Max (Usuario 3 minutos

Experto)

Tarea n

Descripcin

Bsqueda de secciones

Criterios de xito

La identificacin y navegacin de cada seccin.

Tiempo Max (Usuario 8 minutos

Experto)

191

ANEXO.2
PRUEBA DE USUARIO
Objetivo: Evaluar la pgina acadmica y validar los patrones de interfaz de
usabilidad aplicados en la misma.
1. La letra de los ttulos y cuadros de textos son legibles y claros
a) Si
b) No
2. La pgina identifica a su institucin.
a) Si
b) No
3. El logotipo representa a la institucin
a) Si
b) No
4. La pgina se carga:
a) Muy rpida
b) Rpida
c) Normal
d) Lenta
e) Muy lenta
5. Al navegar por el sitio web usted identifica claramente la seccin u opcin
que esta utilizando
a) A veces
b) Siempre
c) Nunca
6. El contenido de la pgina parece fiable y evidente?
a) Si
b) No

192

7. Los efectos visuales aaden funcionalidad o informacin al sitio.

a) Si
b) No
8. El contenido mostrado en el sitio es suficiente para responder a
preguntas.
a) Si
b) No
c) A veces
9. Describa el tamao del texto
a) Demasiado pequeo
b) Adecuado
c) Demasiado grande
10. La pgina es fcil de utilizar.
a) Si
b) No
11. La pgina de inicio est diseada profesionalmente y va a crear una
primera impresin positiva.
a) Si
b) No
12. La densidad de la pantalla es apropiada para los usuarios finales y sus
tareas
a) Si
b) No
13. Los botones y los links muestran cuando son clickeados.
a) Si
b) NO

193

ANEXO.3
PRE-TEST
Gracias por participar en la Prueba de Usabilidad al Sitio Web
Acadmico.
Por favor complete la siguiente informacin.
DETALLES PERSONALES
1. Sexo
( ) Femenino

( ) Masculino

2. Edad_________
3. Nivel ms alto de educacin completado
( ) Enseanza media completa
( ) Tcnico
( ) Universitario
( ) Otro (especificar) _______________________
4. Cul es su ocupacin?___________________________
5. Tiene experiencia previa en pruebas de este tipo?
( ) Si

( ) No

194

INFORMACIN DE USO DE INTERNET

6. Cuntas horas por da usa el internet?
( ) Menos de 30 minutos
( ) Entre 1 y 3 horas
( ) Entre 4 y 7 horas
( ) Ms de 8 horas
7. Cmo se conecta a Internet?
( ) Dial-up (modem) en la casa
( ) Banda Ancha (Cable o DSL) en la casa
( ) Wifi
( ) Desde un telfono o dispositivo mvil
( ) Desde su lugar de trabajo

8. Cul software de navegacin usa regularmente?

( ) Internet Explorer
( ) Firefox
( ) Otro
( ) No s

9. De acuerdo a su experiencia en el uso de Internet En que categora se

identifica?
( ) Usuario nivel bsico

195

( ) Usuario nivel medio

( ) Usuario nivel avanzado
INFORMACIN

DE

EXPERIENCIA

PREVIA

ACADEMICOS.
10. Ha visitado sitios web acadmicos?
( ) Si

( ) No

11. Ha visitado el sitio www.isabeldegodin.com?

( ) Si

( ) No

12. Ha navegado algn sitio web acadmico?

( ) Si

( ) No

196

EN

SITIOS

WEB

ANEXO.4
PRUEBA DE USABILIDAD
Gracias por participar en esta prueba de usabilidad que tiene como objetivo descubrir
si el Sitio Web acadmico funciona adecuadamente y si los usuarios pueden usarlo
fcilmente.

INSTRUCCIONES
En esta web Usted realizar una serie de tareas, algunas de ellas basadas
en ciertos escenarios que se describirn posteriormente.
Recuerde que estamos evaluando un Sitio Web y no el desempeo de Usted
como usuario, por lo tanto no se preocupe si comete algn error.
Las tareas deben ser realizadas en orden
TAREA 1
Bsqueda y Navegacin a travs de las secciones del sitio.
Sub Tareas
1. Ingrese

al

sitio

web

travs

del

navegador

con

la

www.aukolpingyaruquies.edu.ec
2. Navegue por las secciones del sitio y encuentre el cronograma de
trabajo.
TAREA 2
Bsqueda de informacin especfica.
Sub Tareas
1. Encuentre la seccin pasantas

197

2. Navegue por el sitio y mencione si ha viajado algn miembro de la

institucin.
TAREA 3
Descarga de archivo.
Sub tareas
1. Encuentre la carrera de mecnica general y descargue su pensum de
estudio.
TAREA 4
Interaccin con la galera.
Sub Tareas
1. Interacte con la galera y mencione cuantas fotos presenta dicha
seccin.
TAREA 5
Bsqueda de la seccin de contactos.
Sub Tareas
1. Envi una sugerencia o recomendacin con respecto al sitio web.
TAREA 6
Bsqueda de secciones
Sub tareas
1. Encuentre la seccin noticias y mencione la noticia ms relevante.

198

ANEXO. 5
HOJA DE REGISTRO

TAREA

HORA
Inicio
Fin

USUARIO 1
XITO

199

OBSERVACIONES