universidad del azuay departamento de …dspace.uazuay.edu.ec/bitstream/datos/6371/1/12537.pdf ·...
TRANSCRIPT
1
UNIVERSIDAD DEL AZUAY
DEPARTAMENTO DE POSGRADOS
MAESTRÍA EN DISEÑO MULTIMEDIA
III VERSIÓN
ANÁLISIS Y DISEÑO DE LA INTERFAZ WEB DE LA UNIVERSIDAD TÉCNICA DE
MACHALA, BASADA EN TÉCNICAS DE LA METODOLOGÍA WEB CENTRADO EN
EL USUARIO.
TRABAJO DE GRADUACIÓN PREVIO A LA OBTENCIÓN DEL TÍTULO DE
MAGISTER EN DISEÑO MULTIMEDIA
AUTOR: LCDO. ALEXANDER RUBEN PALADINES AMAIQUEMA
DIRECTOR: ING. RODRIGO FERNANDO MOROCHO ROMAN, Mg.
CUENCA – ECUADOR
2016
2
DEDICATORIA
Para mis padres por su apoyo, consejos,
comprensión, amor en todos los momentos de mi
vida y por ayudarme con los recursos necesarios
para estudiar y crecer profesionalmente.
A mi esposa que me ha brindado su ayuda y
apoyo incondicional y ha querido emprender un
viaje juntos por la vida, y más aun teniendo en
cuenta que nuestro hijo Derek nació durante mi
proceso académico de esta Maestría.
A la familia de mi esposa por apoyarme en este
proceso, nuestro segundo hogar con Don
Rodrigo Morocho y Doña Cecilia Guamán, que
hicieron posible 2 años de convivencia
inolvidables.
3
AGRADECIMIENTOS
Debo agradecer de manera especial y sincera al
Ing. Rodrigo Morocho por aceptarme para
realizar esta tesis bajo su dirección. Su apoyo y
confianza en mi trabajo y su capacidad para
guiar mis ideas ha sido un aporte invaluable.
Agradezco también a mis Padres y esposa por su
paciencia, ayuda y apoyo incondicional en este
proyecto.
4
Objetivos
Objetivo General
Diseñar la interfaz web de la Universidad Técnica de Machala mediante el
análisis de las técnicas más adecuadas basadas en la metodología del
diseño centrado en el usuario, que permita mejorar la experiencia de uso del
sitio.
Objetivos Específicos:
Analizar las técnicas más adecuadas del diseño centrado en el usuario
para el desarrollo del sitio web de la UTMach.
Diseñar un prototipado vertical y de alta fidelidad.
Evaluar la usabilidad y experiencia de usuario.
5
RESUMEN
La presente investigación pretende diseñar la interfaz web de la Universidad
Técnica de Machala (UTMach) basándose en la metodología de Diseño
Centrado en el Usuario (DCU).
Con los datos que arroje esta investigación se pretende diseñar la interfaz
web de la UTMach, mediante técnicas propuestas por varios autores como;
Norman y Nielsen e incluso estándares ISO. El objetivo es diseñar la interfaz
web de la Universidad Técnica de Machala a partir de la identificación de las
necesidades, características y objetivos de los usuarios que permita mejorar
la experiencia de uso.
Palabras Claves
Análisis, usabilidad, diseño web, metodología DCU, diseño centrado en el
usuario, UTMach, Universidad Técnica de Machala, UDA, Universidad del
Azuay.
6
ABSTRACT
7
INDICE DE CONTENIDOS
DEDICATORIA ...................................................................................................... 2
AGRADECIMIENTOS ............................................................................................. 3
Objetivos ............................................................................................................. 4
RESUMEN ............................................................................................................ 5
ABSTRACT ........................................................................................................... 6
1. Introducción: .............................................................................................. 13
2. Materiales y Métodos ................................................................................. 16
2.1. Metodología ................................................................................................. 16
2.1.1. Metodología Estándar ISO ............................................................................. 18
2.1.2. Metodología TRUMP ...................................................................................... 19
2.1.3. Metodología MPIu+a ..................................................................................... 21
2.1.4. Metodología de UsabilityNet ......................................................................... 22
2.1.5. Metodología de Usability Planner .................................................................. 23
2.1.6. Metodología de Usability.gov ........................................................................ 24
2.1.7. Metodología The Elements of User Experience ............................................. 26
2.1.7.1. Plano Estrategia ..................................................................................................... 28
2.1.7.2. Plano Alcance ........................................................................................................ 28
2.1.7.3. Plano Estructura .................................................................................................... 28
2.1.7.4. Plano Esqueleto ..................................................................................................... 28
2.1.7.5. Plano Superficie ..................................................................................................... 28
2.1.8. Metodología del Diseño Web Centrado en el Usuario: Usabilidad y
Arquitectura de la Información ...................................................................................... 28
2.2. Evaluación y Conclusión de las Metodologías ................................................. 30
3. The Elements of User Experience – James Garrett ....................................... 32
3.1. Plano Estratégico ........................................................................................... 32
3.1.1. Necesidades de los Usuarios .......................................................................... 32
8
3.1.1.1. Usuarios ................................................................................................................. 33
3.1.1.2. Segmentación demográfica ................................................................................... 33
3.1.1.3. Personas y Escenarios ............................................................................................ 34
3.1.1.4. Stakeholders .......................................................................................................... 36
3.2. Plano de Alcance ........................................................................................... 39
3.2.1. Requisitos del Contenido ............................................................................... 39
3.3. Plano Estructura ............................................................................................ 40
3.3.1. Arquitectura de la Información ...................................................................... 40
3.3.1.1. Estructura Jerárquica ............................................................................................. 41
Nodo UTMach ..................................................................................................................... 41
Nodo Oferta Académica ..................................................................................................... 42
Nodo Investigación ............................................................................................................. 42
Nodo Servicios y Recursos .................................................................................................. 43
Nodo Titulación .................................................................................................................. 43
Nodo Contactos .................................................................................................................. 43
Nodo Transparencia............................................................................................................ 44
3.3.1.2. Lenguaje y Metadatos ........................................................................................... 44
Metadatos .......................................................................................................................... 44
3.4. Plano Esqueleto ............................................................................................. 45
3.4.1. Diseño de Navegación .................................................................................... 45
3.4.1.1. Navegación Global ................................................................................................. 46
3.4.1.2. Navegación Local ................................................................................................... 46
3.4.1.3. Mapa de Sitio ......................................................................................................... 47
3.4.1.4. Diseño de la Información ....................................................................................... 48
3.4.1.5. Wayfinding ............................................................................................................. 50
3.4.1.6. Wireframes ............................................................................................................ 50
3.5. Plano Superficie ............................................................................................ 53
3.5.1. Diseño Sensorial ............................................................................................. 53
3.5.1.1. Uniformidad ........................................................................................................... 54
Diseño Basado en Cuadrícula ............................................................................................. 54
Grid-Layout Master – Página de Inicio ................................................................................ 55
Grid-Layout Master 2– Sección Interna 1 ........................................................................... 56
Grid-Layout Master 3 – Sección Interna 2 .......................................................................... 57
3.5.1.2. Paleta de colores y Tipografía ................................................................................ 58
Paleta de Colores ................................................................................................................ 58
Tipografía ............................................................................................................................ 58
9
3.5.1.3. Diseño de Componentes y Guías de Estilo ............................................................ 59
Logotipo UTMach ............................................................................................................... 59
Navegación Global .............................................................................................................. 60
Banner Principal .................................................................................................................. 60
Botonera de Accesos Directos ............................................................................................ 61
Sección de Noticias – Versión Resumen ............................................................................. 61
Pie de Página....................................................................................................................... 62
3.5.1.4. Diseño Final ........................................................................................................... 62
Lenguaje de Maquetación HTML5: ..................................................................................... 63
Hojas de Estilos CSS3: ......................................................................................................... 63
Lenguaje JavaScript:............................................................................................................ 63
3.5.2. Evaluación de la Usabilidad ............................................................................ 64
3.5.2.1. Test de Usuarios .................................................................................................... 64
Lista de tareas: .................................................................................................................... 64
3.5.2.2. Resultados Test de Usuarios .................................................................................. 65
Identidad ............................................................................................................................. 65
Contenido ........................................................................................................................... 66
Navegación ......................................................................................................................... 66
Gráfica Web ........................................................................................................................ 66
Búsqueda ............................................................................................................................ 67
Utilidad ............................................................................................................................... 67
3.5.2.3. Conclusiones del Test de Usuarios ........................................................................ 68
3.5.2.4. Encuesta ................................................................................................................ 68
3.5.2.5. Resultados Encuesta .............................................................................................. 69
3.6. Resultados .................................................................................................... 76
4. Conclusiones y Recomendaciones ............................................................... 77
4.1. Conclusiones ................................................................................................. 77
4.2. Recomendaciones ......................................................................................... 77
5. Bibliografía ................................................................................................. 78
6. Anexos ....................................................................................................... 82
6.1. Anexo 1 – Encuesta preliminar para la detección de problemas ...................... 82
6.2. Anexo 2 – Evaluación Heurística Método SIRIUS ............................................. 87
6.3. Anexo 3 – Formato Encuestas Evaluación Usabilidad ...................................... 88
6.4. Anexo 4 – Código Fuente – Maquetado HTML5 – index.html .......................... 90
6.5. Anexo 5 – Hoja de Estilos – global.css ............................................................ 100
10
6.6. Anexo 6 – Captura de pantalla Prototipo Alta Fidelidad ................................. 112
6.7. Anexo 7 – Análisis del Manual de Identidad Visual Corporativa UTMACH ....... 113
INDICE DE FIGURAS
Figura 1 - Proceso iterativo del DCU según ISO 13407. Fuente: Sánchez, 2011
............................................................................................................................ 19
Figura 2 – Ciclo de vida Método TRUMP. Fuente: (Serco Ltd, 2000a) .............. 20
Figura 3 - Ciclo de vida Método TRUMP Básico. Fuente (Serco Ltd, 2000b) ... 21
Figura 4 - Modelo de Proceso de la Ingeniería de la Usabilidad y la
Accesibilidad - MPIu+a. Fuente: (Granollers i Saltiveri, 2004)..................... 22
Figura 5 - Métodos de UsabilityNet con opción a filtrado mediante 3
condiciones. Fuente: (UsabilityNet, 2006) ..................................................... 23
Figura 6 - Captura de pantalla de Usability Planner. Fuente:
www.usabilityplanner.org ............................................................................... 24
Figura 7 - Guía de Usabilidad Paso-a-Paso. Fuente: Usability.gov ................... 25
Figura 8 - Esquema "The Elements of User Experiencie" de J.J. Garrett, el
esquema se lee de abajo hacia arriba. Fuente: ........................................ 26
Figura 9 - Esquema completo "The Elements of User Experiencie" de J.J.
Garrett. Fuente: (Garrett, 2011) ...................................................................... 27
Figura 10 - Proceso de Diseño Web Centrado en el Usuario. Fuente: (Hassan,
Martin, & Iazza, 2004) ....................................................................................... 29
Figura 11 - Enfoque top-down, Arquitectura de la Información. Fuente:
(Garrett, 2011) ................................................................................................... 41
Figura 12- Estructura Jerárquica Vertical Nodo “UTMach”. Fuente: El autor .. 41
Figura 13 - Estructura Jerárquica Horizontal Nodo “Oferta Académica”.
Fuente: El autor ................................................................................................. 42
Figura 14 - Estructura Jerárquica Vertical Nodo “Investigación”. Fuente: El
autor ................................................................................................................... 42
11
Figura 15 - Estructura Jerárquica Vertical Nodo “Servicios y Recursos”. Fuente:
El autor ............................................................................................................... 43
Figura 16 - Estructura Jerárquica Vertical Nodo “Titulación”. Fuente: El autor
............................................................................................................................ 43
Figura 17 - Estructura Jerárquica Vertical Nodo “Contactos”. Fuente: El autor
............................................................................................................................ 43
Figura 18 - Estructura Jerárquica Vertical Nodo “Transparencia”. Fuente: El
autor ................................................................................................................... 44
Figura 19 - Representación de Navegación Global. Fuente: (Garrett, The
Elements of User Experience: User-Centered Design for the Web and
Beyond, 2011) ................................................................................................... 46
Figura 20 - Representación de Navegación Local. Fuente: (Garrett, The
Elements of User Experience: User-Centered Design for the Web and
Beyond, 2011) ................................................................................................... 47
Figura 21 - Wireframe Sección Inicio. Software: JUSTINMIND. Fuente: El autor
............................................................................................................................ 51
Figura 22 - Wireframe sección Oferta Académica. Software: JUSTINMIND.
Fuente: El autor ................................................................................................. 52
Figura 23 - Wireframe sección Pregrado. Software: JUSTINMIND. Fuente: El
autor ................................................................................................................... 52
Figura 24 - Wireframe sección UACS. Software: JUSTINMIND. Fuente: El autor
............................................................................................................................ 53
Figura 25 - Grid-Layout Master 1, página Inicio. Fuente: El autor ..................... 55
Figura 26 - Grid-Layout Master 2, secciones internas. Fuente: El autor............ 56
Figura 27 - Grid-Layout Master 3, sección interna 2. Fuente: El autor .............. 57
Figura 28 - Colores Institucionales, sección 1.4. Fuente: Manual de Identidad
Visual Corporativa UTMACH ........................................................................... 58
12
Figura 29 - Logotipo UTMach. Fuente: Manual de Identidad Visual Corporativa
UTMACH ............................................................................................................. 59
Figura 30 - Diseño Final-Prototipo de alta fidelidad [http://utmach.plus.ec].
Fuente: El autor ................................................................................................. 63
Figura 31 - Correo Electrónico enviado desde cuenta institucional
[email protected]. Fuente: El autor ...................................... 68
INDICE DE TABLAS
Tabla 1 - Criterios para la selección de la metodología a usar. Fuente: El autor
............................................................................................................................ 31
Tabla 2 - Tipo de Lenguaje del sitio web UTMach. Fuente: El autor ................. 44
13
1. Introducción:
Los sitios web institucionales, sobre todo, los universitarios deben diseñarse
para atender demandas en información de sus diferentes grupos de interés,
siendo estos: los estudiantes, docentes, personal administrativo y de servicio,
así como todos aquellos ciudadanos y organizaciones que tengan interés en
la institución, por consiguiente, la Universidad Técnica de Machala con su sitio
web institucional1 debe ser considerado uno de los medios de comunicación
de mayor impacto e importancia, que mediante una política editorial y
tecnológica debe promover los lineamiento de utilización de una manera
eficiente y transversal por todas las dependencias.
El diseño web constituye un instrumento indispensable en la comunicación de
una institución, con el avance de las tecnologías han propiciado que el uso
de los recursos técnicos-visuales se intensifique, además de la amplificada
incorporación de herramientas de lenguaje de software que convencen y
llaman la atención a ser usados en los sitios web y aplicaciones.
Este grupo de herramientas conllevan a diseñadores incluir contenido visual
con desmesura, creando exceso y ruido visual de formas, que al final distraen
la atención del usuario que busca un objetivo específico, entorpeciendo de
tal manera el fin por la cual un usuario llega al sitio web. Por consiguiente, la
experiencia del usuario al navegar por un sitio web complejo se convierte en
algo negativo, comprometiendo el verdadero objetivo de llegada de un
usuario. (Nielsen, Usability 101: Introduction to Usability, 2012)
Esto para algunos diseñadores pasa a ser un proceso de diseño de
interacción y de usabilidad totalmente distante de los objetivos tanto gráficos
como comunicativos del sitio. Es decir, sitios web que ofrecen un aspecto
visual llamativo para el usuario carecen y fallan en lo que le usuario realmente
1 Sitio web Universidad Técnica de Machala – www.utmachala.edu.ec
14
necesita, o que simplemente el camino hacia ese objetivo no es sencillo o de
fácil acceso (Norman, 2005). Esto se evidencia en el uso exagerado de
banners, animaciones, publicidad y enlaces, y en ocasiones reemplazando
por gráficos llamativos a excusa de pretender ser diferentes o creativos.
(Lasso Guerrero, 2013).
Por tal razón los sitios web emprendieron un camino equivocado,
organizando su información en base a la estructura interna o filosofía
institucional y no en las necesidades de los usuarios, obviando la facilidad de
uso de la interfaz.
El concepto de usabilidad ha sido explicado por muchos autores, como:
Jakob Nielsen, Donald Norman, JJ Garrett, Steve Krug, Yusef-Hassan-Montero,
Lou Rosenfeld, Peter Morville y Alan Cooper, e incluso ha sido objeto de
estudio de estándares internacionales, la ISO, específicamente como Diseño
Centrado en el Usuario (DCU) en el que su definición central e inherente al
DCU es “la facilidad de uso, refiriéndose al grado de eficacia, eficiencia y
satisfacción de los usuarios al lograr objetivos específicos en contextos de uso
específicos” (ISO 9241-11, 1998).
Dicho esto, la usabilidad es el objetivo principal del DCU, en obtener
productos más usables (Sánchez, 2011). Por tanto, el DCU tiende a ser una
metodología, una guía básica de uso para interfaces web, aunque sin bien
definir al DCU como una metodología detallada que guíe absolutamente
todos los pasos del proceso de diseño, no sería práctico ni factible. El aporte
iniciado por (Norman & Draper, 1986) en su recopilatorio de trabajos centrado
en el usuario y luego popularizada por el mismo Norman (2012) lo convierte
en un referente, aunque no genérico pero si el más adaptable al diseño web.
Mencionar el trabajo de (Norman & Draper, 1986) como una metodología
genérica para todos los proyectos reales sería muy pretencioso, muchas de
las menciones al DCU se consideran como un conjunto más o menos
heterogéneo de técnicas diversas que se pueden llevar a cabo en diferentes
momentos del desarrollo. (Sánchez, 2011).
15
Las metodologías analizadas para la presente investigación fueron las
siguientes:
Metodología Estándar ISO
Metodología TRUMP
Metodología MPIu+a
Metodología de UsabilityNet
Metodología de Usability Planner
Metodología de Usability.gov
Metodología “The Elements of User Experience”
Estas metodologías fueron sometidas a un análisis exhaustivo y comparativo
de las características de cada una; resultando que “The Elementos of User
Experiencie” fue la que mejor se adaptó a las necesidades de los usuarios
para el diseño de la interfaz web de la Universidad Técnica de Machala.
16
2. Materiales y Métodos
2.1. Metodología
Existen varias metodologías para evaluar un sitio web, tanto así, que en el
contexto actual de la elaboración de esta tesis, no existe una metodología
genérica para todo tipo de proyecto, pero si existe un referente que parte de
la Metodología de Diseño Centrado en el Usuario - DCU, (Norman & Draper,
1986).
Actualmente el concepto de usabilidad que no es más que los objetivos
principales del DCU, forma parte de un estándar internacional como la ISO,
el cual permite ser adaptado a diversos tipos de proyectos, de los más
sencillos hasta los más complejos, por lo que, en esta investigación se
analizarán diferentes tipos de técnicas que tienen su origen en el DCU para
seleccionar el que mejor se adapte a las necesidades de la presente
investigación.
El sitio web de estudio es la Universidad Técnica de Machala (UTMach).
Durante la etapa de la definición del problema, en la aplicación inicial del
método de Test de Guerrilla de Nielsen (Nielsen, 1994) se encontraron muchos
errores en el sitio web (Anexo 1). Ante el hallazgo de problemas se procedió
ir más allá de la evaluación del actual sitio web, el análisis del Manual de
Identidad de la UTMach. Como resultado, la inexistente aplicación de alguna
metodología del DCU (Anexo 7), por tal razón, se propuso identificar un
modelo que incluya los siguientes seis criterios que forman parte de los
problemas encontrados.
1. Identidad
2. Contenido
3. Navegación
4. Gráficas Web
5. Búsqueda
6. Utilidad
17
Cabe indicar que, aunque la mayoría de técnicas existentes para la
aplicación del DCU no son genéricas, se escogieron las técnica más
adaptables a los seis problemas antes mencionados.
Además, para reforzar hallazgos durante el análisis en la etapa de la
definición del problema del actual sitio web de la UTMach, se realizó una
medición de la usabilidad mediante el sistema SIRIUS, que consiste en evaluar
la usabilidad mediante la evaluación heurística, este sistema es propuesto
por María del Carmen Suárez en su tesis doctoral (Suárez Torrente, 2011), y el
que Olga Carreras Montoto lo propone como un archivo digital de Microsoft
Excel para evaluar la usabilidad de los sitios web según la metodología de
Suárez (Carreras Montoto, 2011).
El archivo Excel para evaluar mediante SIRIUS de Olga Carreras, es de libre
descarga sin licencia alguna, y lo único que se recomienda es primero leer el
artículo que explica el manejos y uso del sistema (Carreras Montoto, 2011).
La evaluación consiste en llenar una serie de preguntas denominadas criterios
heurísticos dadas en 10 etapas:
1. Aspectos Generales
2. Identidad e Información
3. Estructura y Navegación
4. Rotulado
5. Layout de la página
6. Entendibilidad y Facilidad en la interacción
7. Control y Retroalimentación
8. Elementos Multimedia
9. Búsqueda
10. Ayuda
Al final el resultado es mostrado en porcentaje en la pestaña “Cálculo de %
de usabilidad” del archivo Excel.
El Porcentaje de usabilidad aplicado al sitio web de la Universidad Técnica
de Machala fue de 36.89% (Anexo 2).
18
A continuación se analizarán las técnicas más conocidas que pueden ser
usadas en proyectos reales, para luego seleccionar la que más se adapte a
esta investigación.
2.1.1. Metodología Estándar ISO
Desde hace muchos años el DCU ha sido objeto de estudio para estándares
internacionales, como lo es el ISO, específicamente 13407:1999 – Human-
centred design process for interactive systems (ISO 13407:1999, 1999), en la
cual se escribe el DCU básicamente como una actividad multidisciplinar. Se
define en cuatro actividades [Figura 1]:
Entender y especificar el contexto de uso.
Especificar los requisitos de usuario y de la organización.
Producir soluciones de diseño.
Evaluar los diseños en base a los requisitos.
Para esto, en una reciente actualización de la ISO 13407, la (ISO 9241-210,
2010), describe 6 principios claves para el DCU (Sánchez, 2011):
El diseño está basado en una comprensión explícita de usuarios, tareas
y entornos.
Los usuarios están involucrados durante el diseño y el desarrollo .
El diseño está dirigido y refinado por evaluaciones centradas en
usuarios.
El proceso es iterativo.
El diseño está dirigido a toda la experiencia del usuario.
El equipo de diseño incluye habilidades y perspectivas
multidisciplinares.
19
Figura 1 - Proceso iterativo del DCU según ISO 13407. Fuente: Sánchez, 2011
A partir del estándar 13407, ISO desarrolló dos modelos, el ISO TR 18529:2000 –
Ergonomics – Ergonomics of human-system-interaction – Human-centred
lifecycle process description (ISO/TR 18529:2000, 2000) y la ISO 18252:2003 –
Ergonomics of human-system interaction – Specification for the process
assessment of human-system issues (ISO/PAS 18152:2003, 2003).
Esta dos derivaciones, al ser normas o estándares internacionales, tienden a
incluir alcances muy ambiciosos, tratando de cubrir todas las actividades en
los que exista factores humanos involucrados.
Por otro lado el ISO TR 16982:2002, ahora en revisión como ISO NP 9241-230,
proporciona información sobre Human-centred design en la que puede ser
utilizado para diseño y evaluación.
2.1.2. Metodología TRUMP
Trial Usability Maturity Process – TRUMP, este proyecto está basado en los
principios de la ISO-13407, y está estructurado de una forma más simple para
planificar y aplicar que la ISO, este método es recomendado para el
desarrollo de software y sistemas interactivos (Serco Ltd, 2000a). Consta de 10
métodos para el diseño centrado en el usuario [Figura 2].
20
Figura 2 – Ciclo de vida Método TRUMP. Fuente: (Serco Ltd, 2000a)
1. Reunión con los involucrados (básico).
2. Análisis del contexto de uso.
3. Escenarios.
4. Evaluación del sistema existente.
5. Requisitos de usabilidad.
6. Prototipado (en papel) (básico).
7. Guía de estilo.
8. Evaluación de prototipos.
9. Pruebas de usabilidad (con usuarios) (básico).
10. Recolección de feedback de los usuarios.
Y un conjunto básico de 3 métodos pueden ser usados para comenzar con
el diseño centrado en el usuario (Serco Ltd, 2000b). [Figura 3]
1. Organizar una reunión de un día de las principales partes interesadas
(incluyendo el director del proyecto y un representante de los usuarios)
para desarrollar una visión clara y compartida con el propósito del
producto, cómo se va a utilizar y los objetivos de usabilidad.
2. Evaluar los conceptos iniciales del diseño de la perspectiva del usuario
(preferiblemente usando papel y post-it-notes), antes de comenzar el
diseño detallado o codificación.
3. Prueba de la capacidad de uso de prototipos con usuarios reales.
21
Figura 3 - Ciclo de vida Método TRUMP Básico. Fuente (Serco Ltd, 2000b)
2.1.3. Metodología MPIu+a
Denominado Modelo de Procesos de la Ingeniería de la Usabilidad y de la
Accesibilidad, MPIu+a (Granollers i Saltiveri, MPIu+a. Una metodología que
integra la ingeniería del software, la interacción persona-ordenador y la
accesibilidad en el contexto de equipos de desarrollo multidisciplinares,
2004). Este modelo de proceso se fundamenta en la disciplina de la
Interacción Persona-Ordenador (IPO) y fundamentalmente en Sistemas
Interactivos de la Ingeniería del Software con principios básicos de la
Ingeniería de la Usabilidad y los de la Accesibilidad.
Cabe mencionar que aunque no está concebida como un manual, ya que
es una tesis doctoral, gracias a su contenido , los temas y la claridad con la
que se maneja, ya forma parte de muchos estudios convirtiéndolo así en un
Manual de Diseño Centrado en el Usuario y Usabilidad (Carreras Montolo,
2008).
Su esquema está organizado en tres pilares fundamentales [Figura 4], en base
a una serie de módulos o etapas que determinan la fase de desarrollo en la
que nos encontramos. Para el autor esto en definitiva no hace mas que poner
cada cosa en su sitio, permitiendo dar las pautas necesarias durante el diseño
de un sistema interactivo. (Granollers i Saltiveri, MPIu+a, 2004).
22
Figura 4 - Modelo de Proceso de la Ingeniería de la Usabilidad y la Accesibilidad - MPIu+a.
Fuente: (Granollers i Saltiveri, 2004)
2.1.4. Metodología de UsabilityNet
Es un derivado del proyecto TRUMP, financiado por la Unión Europea (EU)
para proporcionar recursos y la creación de redes para los profesionales de
usabilidad, gerentes y proyectos de la UE, en el cual amplió los métodos a un
total de 35 de ellos [Figura 5], los cuales pueden ser filtrados dependiendo de
las siguientes tres condiciones: (UsabilityNet, 2006):
Límite de tiempo/Recursos.
Sin acceso directo a usuarios.
Limitada Habilidades/Experiencias
23
Figura 5 - Métodos de UsabilityNet con opción a filtrado mediante 3 condiciones. Fuente:
(UsabilityNet, 2006)
2.1.5. Metodología de Usability Planner
Este proyecto se basa en la ISO PAS 18152, el cual se desarrolla como una
herramienta web disponible públicamente (Bevan, Ferre, & Antón Escobar,
2010), su características principal es la de permitir seleccionar los DCU más
recomendados en función de las características específicas de cada
proyecto [Figura 6].
La versión web original de Usability Planner fue concebida en el 2010 2 ,
actualmente existe una nueva versión a fecha de 2013, en el que aparece
2 Sitio web original de Usability Planner: www.usabilityplanner.org de Bevan, Ferre & Antón. 2010
24
como nuevo desarrollador Alberto Blázquez, pasante del proyecto Usability
Planner 3.
Figura 6 - Captura de pantalla de Usability Planner. Fuente: www.usabilityplanner.org
2.1.6. Metodología de Usability.gov
Conjunto de directrices reunidas y desarrolladas por el Departamento de
Salud y Servicios Humanos del gobierno de los Estados Unidos en materia de
usabilidad (U.S. Dept. of Health and Human Services, 2006), con el objetivo de
servir a profesionales y estudiantes en el gobierno y sectores privados, siendo
así, Usability.gov, ha servidor de referencia para muchas instituciones públicas
en la formación de directrices para la elaboración de sitios web
gubernamentales, como lo es en el caso de Colombia (Carvajal & Saab,
2010).
3 Sitio web actualizado de Usability Planner: www.usabilityplanner.albertoblazquez.net de
Bevan, Ferre, Antón & Blázquez. 2013
25
La guía está dado mediante un mapa de procesos compuestos de algunos
métodos y tareas relacionadas al desarrollo de sitios web, diseñado en cuatro
pasos básicos [Figura 7].
1. Planificar
2. Analizar
3. Diseñar
4. Probar y Refinar
Figura 7 - Guía de Usabilidad Paso-a-Paso. Fuente: Usability.gov
Cada paso lleva consigo algunas tareas, las cuales están dadas de una
forma interativa hasta llegar a su último paso de Prueba y Refinado. Aunque
la intención de este mapa de procesos es de servir de guía para todo tipo de
proyecto, lo cierto es que, su diseño estructural está dado para aplicarse más
en sitios web complejos, por ejemplo, sitios gubernamentales en los cuales se
maneja mucha información de diferentes departamentos creando una
Arquitectura de la Información sumamente compleja, para lo cual este
modelo de usabilidad que posee una naturaleza un poco multidisciplinar,
26
ayuda a los desarrolladores a determinar las tareas y el orden que debe
realizarse.
2.1.7. Metodología The Elements of User Experience
Tiene sus inicios desde el año 2000, cuando J.J. Garrett publicaba en su sitio
web el diagrama “The Elements of User Experiencie”4. Originalmente fue un
método propuesto exclusivamente para la web, dos años más tarde publica
la primera versión del libro con el mismo nombre desarrollando y explicando
el esquema propuesto, para luego a finales del año 2010, publicar la segunda
edición revisada, dando una orientación no solo a web, si no, a todo tipo de
productos y servicios .
El esquema propuesto por Garrett se basa en 5 planos fundamentales que
suponen las diferentes etapas de los proyectos que van de lo abstracto a lo
concreto [Figura 8].
Figura 8 - Esquema "The Elements of User Experiencie" de J.J. Garrett, el esquema se lee de
abajo hacia arriba. Fuente: (Garrett, 2011)
4 Versión oficial traducida al español del diagrama de “The Elements of User Experience”:
http://www.jjg.net/elements/translations/elements_es.pdf por Javier Velasco.
27
Los planos luego son divididos a la mitad [Figura 9], conformando así dos
mundos diferentes con el mismo esquema, resultando a la izquierda los
elementos de la web concebida como una plataforma de funcionalidades,
esto a razón de que el desarrollo de las tecnologías son cada vez más
sofisticadas permitiendo una interfaz remota de software, llegando así a
considerar el producto como una herramienta o un conjunto de ellas para
cumplir tareas. Y por el contrario al lado derecho los elementos de la web
concebida exclusivamente como un sistema de información o hipertexto
(Garrett, The Elements of User Experience: User-Centered Design for the Web
and Beyond, 2011).
Figura 9 - Esquema completo "The Elements of User Experiencie" de J.J. Garrett. Fuente:
(Garrett, The Elements of User Experience: User-Centered Design for the Web and Beyond,
2011)
A continuación una breve descripción de cada plano desde el rol de
producto como sistema de información o hipertexto:
28
2.1.7.1. Plano Estrategia
Necesidades el Usuario: Son los objetivos por los cuales se pretende llegar a
los usuarios, aquí se define qué quiere la audiencia de nosotros y cómo
encaja con otros objetivos que ellos tienen.
2.1.7.2. Plano Alcance
Requerimientos del contenido: Descripción de varios requerimientos de
contenidos.
2.1.7.3. Plano Estructura
Arquitectura de la Información: La disposición de los elementos de contenido
para facilitar la comprensión humana.
2.1.7.4. Plano Esqueleto
Diseño de la Información: La presentación de la información en una forma
que facilita su entendimiento
Diseño de Navegación: Conjunto de elementos en pantalla que permiten al
usuario moverse a través de la arquitectura de la información.
2.1.7.5. Plano Superficie
Experiencia Sensorial: Tal como suena, este es creado por el producto
terminado.
2.1.8. Metodología del Diseño Web Centrado en el Usuario: Usabilidad
y Arquitectura de la Información
Este método propuesto por Hassan, Martín e Iazza, está basado en los
principios del marco metodológico del Diseño Centrado en el Usuario
(Norman & Draper, 1986) adaptado al desarrollo de sitios web.
29
El esquema propuesto está dividido en varias etapas, algunas de ellas de
carácter iterativo [Figura 10].
Figura 10 - Proceso de Diseño Web Centrado en el Usuario. Fuente: (Hassan, Martin, & Iazza,
2004)
Este proceso está dado en cuatro fases, su segunda fase está compuesto de
tres elementos las cuales son cíclicas e iterativas “Diseño-Evaluación-
Prototipado”, lo cual indica que todo lo que se diseñe debe ser
constantemente evaluado mediante el prototipo. Esto permite corregir
errores desde el inicio del proyecto, ya que evaluar el sitio web una vez
finalizado conllevaría a muchos errores y problemas de usabilidad (Hassan,
Martin, & Iazza, 2004).
Su metodología es simple de entender y está específicamente adaptado
para el desarrollo de sitios web, haciendo énfasis en que la usabilidad no
30
depende únicamente del diseño de la interfaz, sino también de su
arquitectura-estructura y organización, es decir, todo lo que hay por detrás
del diseño como tal.
2.2. Evaluación y Conclusión de las Metodologías
Después de analizar las metodologías más comunes usadas por expertos en
la materia, grandes empresas e incluso gobiernos para la creación de
manuales para el manejo de la usabilidad en sitios web institucionales, y que
si bien todas las metodologías expuestas tienen elementos en común, se
puede decir con claridad que no existe un referente genérico para todos los
tipos de proyectos a la hora de utilizar el DCU en un proyecto de desarrollo
real.
A pesar de que la ISO es una de la metodologías más completas, con muchas
especificaciones, la convierte en algo excesivamente complejo de aplicar
en la mayoría de proyectos, ya que su uso está más enfocado en el diseño y
desarrollo de aplicaciones, con un enfoque hacia la ingeniería en la que
(Sánchez, 2011)exista el factor humano.
Para la selección de la metodología más adecuada para esta investigación,
se definieron ocho criterios que provienen de las necesidades de esta
investigación: Baja experiencia (No es necesario ser expertos en usabilidad o
UX), multidisciplinar, iteractivo, prototipo, evaluar, bajo costo, fácil aplicación
y práctico uso real.
Por medio del análisis comparativo simple, en una tabla, haciendo uso de
símbolos, se completó con “X” cada metodología analizada que cumpla con
cada criterio.
31
Baja
experiencia
Multi-
disciplinar Iterativo Prototipo Evaluar
Bajo
costo
Fácil
aplica
ción
Práctico
-Uso
Real
Estándar
ISO X X X X
TRUMP X X X X X X
MPIu+a X X X X
UsabilityNet X X X X X X
Usability
Planner X X X X X X
Usability.go
v X X X X X X
The
Elements of
User
Experiencie
X X X X X X X X
Diseño Web
Centrado
en el
Usuario
X X X X X X X
Tabla 1 - Criterios para la selección de la metodología a usar. Fuente: El autor
De las metodologías analizadas se ha escogido a “The Elements of User
Experiencie” de J.J. Garrett, debido a que es práctico, de fácil aplicación,
comprensión y usable en proyectos de sitios web reales como el propuesto
en esta tesis. Cada fase consta con su respectiva descripción en un lenguaje
claro y entendible para un equipo de trabajo multidisciplinario sean o no
experimentados en materia de usabilidad o experiencia de usuario. Además,
es el más usado por muchos profesionales al ser la fuente bibliográfica más
actual en este tema.
32
3. The Elements of User Experience – James Garrett
3.1. Plano Estratégico
3.1.1. Necesidades de los Usuarios
Esta sección se describen las necesidades de los usuarios que obtienen
información del sitio web, es decir, lo que esperan del sitio, de tal manera,
que es necesario identificar los objetivos del sitio, así como, las necesidades,
requerimientos y objetivos de la audiencia potencial. Cuanto más se conozca
de la audiencia, más se adapta el diseño y más satisfactoria la experiencia
del usuario final.
Universo
Universidad Técnica de Machala. 11000 personas.
Muestra
Atendiendo a las recomendaciones de (Nielsen, 2012), quien sostiene que el
número de participantes para un estudio de usabilidad es de tan solo 5
personas, lo que permite revelar alrededor del 85% de los problemas de
usabilidad del sitio web estudiado, y que al incrementar el número de
personas a 10, el porcentaje de hallazgos de usabilidad llegan a 95%; por
consiguiente, de aumentar el número de usuarios, mayor es el porcentaje de
hallazgos.
Siguiendo esta recomendación se definió a 29 usuarios distribuidos
proporcionalmente a la población de cada área de estudios de la siguiente
manera: Seis usuarios del Personal Administrativo de diferentes áreas, diez
Docentes y Trece estudiantes de las cinco Unidades Académicas.
33
3.1.1.1. Usuarios
Personal administrativo: 6 usuarios de diferentes áreas;
1 usuario Departamento de Talento Humano.
1 usuario Centro de Investigaciones.
1 usuario Departamento de Tecnologías de la Información y
Comunicación.
1 usuario Departamento de Vicerrectorado Académico.
1 usuario Dirección de Bienestar Estudiantil.
1 usuario Centro de Educación Continua.
Personal Docente: 10 usuarios;
2 usuarios Unidad Académica de Ciencias Sociales.
2 usuarios Unidad Académica de Ciencias Químicas y la Salud.
3 usuarios Unidad Académica de Ciencias Empresariales.
1 usuarios Unidad Académica de Ciencias Agropecuarias.
2 usuarios Unidad Académica de Ingeniería Civil.
Estudiantes: 13 usuarios;
3 usuarios Unidad Académica de Ciencias Sociales.
2 usuarios Unidad Académica de Ciencias Químicas y la Salud.
3 usuarios Unidad Académica de Ciencias Empresariales.
2 usuarios Unidad Académica de Ciencias Agropecuarias.
3 usuarios Unidad Académica de Ingeniería Civil
Total usuarios: 29
3.1.1.2. Segmentación demográfica
Personal Administrativo y Docente
Edades: Entre 25 a 55 años
Nivel de Educación: Tercer Nivel, Maestría y PhD.
Estudiantes
Edades: Entre 16 a 25 años
34
Nivel de Educación: Bachillerato.
Perfil: Legalmente Matriculado en cualquiera de las carreras que ofrezca
cada Unidad Académica y que tenga un nivel básico del uso del
computador.
Objetivos del sitio web
Generar contenidos actualizados por parte de los responsables de
departamentos de la UTMach que tangan información visible a todos
los usuarios.
Visualizar las áreas de mayor uso del sitio web incluido los elementos
del manual de identidad de la UTMach.
Acceder a la información de forma más intuitiva.
Incluir una sección de búsqueda de contenidos.
Generar contenido propio multimedia y audiovisual.
Definir modelos del sitio web adaptables a cualquier pantalla, incluso
la intranet.
Organizar todos los elementos que componen la Interfaz gráfica.
Adecuar una mejor Arquitectura de la Información.
3.1.1.3. Personas y Escenarios
Acorde a la metodología, se procedió a construir tres posibles escenarios con
personas de perfiles diferentes, con el propósito de describir los tipos de
público que harán uso del sitio web, que servirán como guía durante el
desarrollo del Plano Estratégico.
35
Personal Administrativo
Opinión de Priscila
“No tengo tiempo para buscar entre tanta
información, necesito información rápida”
Datos Básicos
Edad: 30
Cargo: Asistente Director
Estado Civil: Casada, dos hijos
Ingresos: $9000/año
Priscila trabaja en el
departamento de
Centro de
Investigaciones bajo
mucha presión, por lo
que el hacer cosas
innecesarias significa
perder tiempo y un
llamado de atención.
Perfil Técnico: Manejo de
Ofimática, sitio con
conexión a internet-
intranet, uso de Windows,
manejo de redes sociales
a nivel personal.
Tiempo en Internet: 5
horas/día
Sitios Web Favoritos
facebook.com eluniverso.com ecuavisa.com
Personal Docente
Opinión de Sebastián
“Mi profesión no me permite tener mucho
tiempo para leer como funciona algo, me gusta
que sea claro y a simple vista se entienda”
Datos Básicos
Edad: 42
Cargo: Docente Medicina
Estado Civil: Casado, un hijo
Ingresos: $40000/año
Sebastián es docente
de Medicina, su
trabajo en los
hospitales y la
docencia le quita
tiempo como para
perderlo en buscar
algo específico.
Perfil Técnico: Manejo de
Ofimática, sitio con
conexión a internet-
intranet, uso de Windows,
Tiempo en Internet: 1
horas/día
Sitios Web Favoritos
Medes.com eltelegrafo.com.ec
36
Estudiante
Opinión de Juan
“Como comunicador me encanta las
tecnologías, me gusta navegar por todo lado
siempre y cuando se vea bien, agrade y tenga
información útil así no sea para el momento”
Datos Básicos
Edad: 18
Cargo: Estudiante
Comunicación
Estado Civil: Soltero, pero tiene
novia
Ingresos: -------
Juan tiene toda la
tecnología a su
alcance, Smartphone
con internet, Tablet y
macbook, siempre
anda preocupado
por su record
académico y
accede a la intranet
de la Universidad
para revisar su
estado.
Perfil Técnico: Manejo de
Ofimática, Smartphone
con internet, macbook
con conexión a internet,
uso de Mac y Windows,
redes sociales
Tiempo en Internet: 12
horas/día
Sitios Web Favoritos
facebook.com amazon.com apple.com
3.1.1.4. Stakeholders
Se dedicó 1 hora con autoridades y personas entendidas en el tema de sitios
web.
Director del Departamento Tecnologías de Información y
Comunicación.
Director del Departamento de Talento Humano.
Coordinadora de la Carrera de Ciencias de la Educación Mención en
Docencia Informática.
Vicerrectora Académica
37
La reunión se llevó a cabo en el salón de eventos sin más personas alrededor.
A todos los participantes se les proveyó los objetivos a discutir durante la
reunión.
Se formularon las siguientes preguntas durante la reunión:
1. ¿Porqué se pretende rediseñar el sitio web actual?
2. ¿Cuáles son los objetivos generales?
3. ¿Quiénes serán los usuarios?
4. ¿Cuáles son los escenarios típicos en los cuales será usado el sitio web?
5. ¿Por qué utilizan el sitio web?
6. ¿Cómo los usuarios obtienen ayuda o asistencia?
Siguiente el mismo orden de las preguntas anteriores, se obtuvieron los
siguientes resultados. Dada la cantidad de información generada, se
seleccionó la información más relevante para este trabajo.
1. Pregunta 1
a) A pesar de recientemente haber lanzado el rediseño del sitio web de
la UTMach, sería necesario una corrección del mismo, ya que, muchas
de las áreas que la Universidad tiene, no aparecen o pasan
desapercibidas.
b) Es necesario ya que en el contexto actual, existen otras área de mayor
relevancia a ser mostradas y actualizadas, por incluso los mismos
requerimientos del Consejo de Educación Superior (CES).
2. Pregunta 2
a) Mostrar las áreas más pertinentes en una mejor posición.
b) Crear un ambiente de uso no obligatorio a los usuarios, que abran el
sitio web porque este genere información importante-relevante en un
estilo amigable y entendible.
c) Atraer público externo a visitar el sitio web, ya que ahora se cuenta
con el Centro de Educación Continua que ofrece servicios al público
interno y externo.
38
d) Que el sitio web sea más visual que textual en la forma en como se
muestra la información.
3. Pregunta 3
a) Los usuario son todos los Estudiantes, Personal Administrativo,
Docentes, público Externo por cuestiones del Centro de
Capacitación Continua e incluso por Pasantías.
b) Otras instituciones educativas interesadas en alguno de los servicios
que ofrece la UTMach, por ejemplo: Ayuda jurídica o
capacitaciones especializadas en herramientas ofimáticas que
ofrece el Centro de Capacitación Continua.
4. Pregunta 4
a) Los estudiantes necesitan revisar sus calificaciones.
b) Los estudiantes necesitan abrir su aula virtual.
c) Público externo desea conocer los servicios externos que ofrece la
UTMach
d) Que de la facilidad de actualizar contenido cuando existan
eventos relevantes-importantes para la Universidad. Por ejemplo,
en sus fechas de fundación, permitir el cambio de plantilla acorde
al evento.
e) Temas de consulta para las instituciones educativas de
bachillerato. Ahora la Universidad fomenta un ambiente
investigativo el cual generará mucha información académica que
puede servir como material de consulta de los estudiantes.
5. Pregunta 5
a) Para entrar al sistema del Aula Virtual
b) Para entrar al sistema informático de la UTMach, SIUTMACH.
c) Información de las carreras ofertadas tanto de 3er nivel como
pronto de 4to nivel.
d) Cursos que ofrece el Centro de Capacitación Continua.
e) Buscar una noticia en específica.
f) Conocer los servicios externos que ofrece la Universidad.
39
6. Pregunta 6
a) Mediante la sección de comentarios o sugerencia.
b) Formulario de preguntas, de ayuda.
c) Un chat en vivo para los servicios intranet de la UTMAch, en caso
de cualquier inconveniente en cualquier área, un personal debe
estar disponible para atender ese llamado.
d) Si los Estudiantes tiene problemas con el SIUTMACH, que se ofrezca
chat en vivo para resolver el problema lo más pronto posible.
e) Los números telefónicos por cada área y correos electrónicos de la
mismo forma, siempre visibles-disponibles.
3.2. Plano de Alcance
3.2.1. Requisitos del Contenido
Mediante la etapa de Plano Estratégico, en Stakeholders nacen muchos de
los siguientes requisitos, y otros por medio de una lluvia de ideas.
Uso de Fotografías
con mismo público
que conforma la
UTMach
Cualquier archivo descargable
debe ofrecerse en formato PDF y
no debe sobrepasar los 5mb
La traducción de
idiomas del sitio web
debe ser nativo, no
ofrecer la
traducción
automática de
Google.
Todas las imágenes
principales deben
tener una resolución
mínima de 1920x1080
Toda imagen debe llevar el
nombre de archivo de lo que
representa usando el siguiente
formato como ejemplo:
juegosdeportivos_candidatas_2016
Cualquier noticia
que contenga
imagen o
publicidad, debe ser
revisada por el
diseñador
encargado, no se
permite subir
cualquier tipo de
imagen que dañe la
línea gráfica del sitio
Toda imagen
principal debe tener
su imagen de vista
previa (thumbnail)
de 200px de ancho y
alto proporcional
Toda noticias debe llevar su
resumen en no mas de 140
caracteres.
Todo el contenido a
subir debe ser
primero aprobado
por el respectivo
personal
encargado. Por
ejemplo, noticias,
equipo de
redacción
40
Generar contenido
de cada área al
menos de 1 vez por
semana
Todas las imágenes debe estar
alojadas y organizadas en
carpetas y subcarpetas en el
mismo servidor
Mostrar
públicamente el
proceso, el manual
de imagen usado
para la realización
del sitio web
Todos los eventos o
fechas importantes
para la UTMach
deben estar
acompañados de
imágenes y videos
Cualquier uso de imagen vectorial
de internet, debe llevar su
respectiva fuente
Recordar siempre
que en las secciones
principales del sitio
web de la UTMach
debe ser gráfico, las
imágenes deben ser
protagonistas del
contenido
Todas la imágenes
deben ser tratadas
antes de colocarlas
para reducir su peso
de kb.
Aprovechar ciertas asignaturas
para generar contenido gráfico
propio
Tener una sección
de Preguntas y
respuestas (FAQs)
Todos los formatos de las
fotografías deben estar en .jpg
Todas las imágenes
principales no deben
tener un peso mayor
a 200kb
Logotipo de la Universidad,
Unidades Académicas y/o
carreras, debes ser totalmente
vectoriales. Todo navegador
ahora soporta formato .svg
3.3. Plano Estructura
3.3.1. Arquitectura de la Información
El esquema seleccionado para la creación de la arquitectura de la
información parte el enfoque top-down (Arriba-Abajo), este implica la
creación de la arquitectura directamente desde una comprensión de las
consideraciones del “Plano Estratégico”: que son los objetivos y necesidades
de los usuarios.
En la parte superior Inicia con categorías amplias para lograr los objetivos
estratégicos, luego hacia abajo se rompen las categorías en subsecciones
lógicas [Figura 11].
41
Figura 11 - Enfoque top-down, Arquitectura de la Información. Fuente: (Garrett, The Elements
of User Experience: User-Centered Design for the Web and Beyond, 2011)
Siguiendo las mismas recomendaciones de Garrett en su artículo “Un
Vocabulario Visual”, se plantea el uso de líneas simples o conectores
mediante un árbol de páginas jerárquico reflejados en un diagrama de
diseño de interacción (Garrett, 2002).
3.3.1.1. Estructura Jerárquica
Aquí se describe detalladamente la información por cada nodo para una
mejor lectura. Cada nodo no tiene más de dos niveles, de esta forma se
aseguró una estructura jerárquica adecuada.
Nodo UTMach
Figura 12- Estructura Jerárquica Vertical Nodo “UTMach”. Fuente: El autor
Inicio UTMach
Modelo EducativoInformación
GeneralAutoridades Departamentos Campus
continúahacia:
Oferta Académica
42
Nodo Oferta Académica
Figura 13 - Estructura Jerárquica Horizontal Nodo “Oferta Académica”. Fuente: El autor
Nodo Investigación
Figura 14 - Estructura Jerárquica Vertical Nodo “Investigación”. Fuente: El autor
continúahacia:
InvestigaciónOferta Académica
Pregrado Posgrados Educación Continua Idiomas
continúadesde:
UTMach
continúadesde:
Oferta AcadémicaInvestigación
DirecciónUnidades de
Investigación
continúahacia:
Servicios y Recursos
43
Nodo Servicios y Recursos
Figura 15 - Estructura Jerárquica Vertical Nodo “Servicios y Recursos”. Fuente: El autor
Nodo Titulación
Figura 16 - Estructura Jerárquica Vertical Nodo “Titulación”. Fuente: El autor
Nodo Contactos
Figura 17 - Estructura Jerárquica Vertical Nodo “Contactos”. Fuente: El autor
continúadesde:
Servicios y RecursosTitulación
Proceso TitulaciónSeguimiento Graduados
continúahacia:
Contactos
continúadesde:
TitulaciónContactos
MapaExtensiones Telefónicas
Denuncias/Quejas
continúahacia:
Transparencia
continúadesde:
Investigación
Servicios y Recursos
SIUTMACH Aula Virtual U.B.E. Bilbioteca DNA Ingresar Noticias
continúahacia:
Titulación
44
Nodo Transparencia
Figura 18 - Estructura Jerárquica Vertical Nodo “Transparencia”. Fuente: El autor
3.3.1.2. Lenguaje y Metadatos
El sitio web de la UTMach genera contenido de carácter informativo,
académico y técnico, resultando en lo siguiente:
TIPO DE INFORMACIÓN LENGUAJE EMPLEADO
Secciones de noticias Lenguaje Informativo o Periodístico
Textos académicos-investigativos Lenguaje Científico-Técnico
Tabla 2 - Tipo de Lenguaje del sitio web UTMach. Fuente: El autor
Metadatos
Aplicar metadatos significa generar información sobre la información, es
decir, aplicar valores y atributos a los contenidos generados, con el fin de
facilitar la recuperación de la información por parte del usuario (Hassan
Montero & Núnez Peña, 2005).
continúadesde:
ContactosTransparencia
Información Administrativa
Información Financiera
Información de Regulación y
Control
Información Legal
45
Sección Noticias
Atributo Valor/es
Fecha 28/02/2016
Título UTMach edita 121 libros elaborados
por docentes
Palabras claves Publicaciones; imprenta utmach;
investigaciones científicas; libros
académicos
Categoría Centro de Publicaciones
Sección Textos Académicos-Investigaciones
Atributo Valor/es
Fecha 28/02/2016
Autor/es Paladines Amaiquema, Alexander
Rubén; Serrano Tinoco, Ana Victoria
Título Evaluación de la Usabilidad
Palabras claves Test de usuarios; card sorting;
evaluación heurística; entrevistas;
observación
Unidad Académica Unidad Académica de Ingeniería
Civil
Carrera Carrera de Informática
Categoría Desarrollo Web
3.4. Plano Esqueleto
3.4.1. Diseño de Navegación
El sitio web de la UTMach está conformado por diferentes nodos de acuerdo
a la arquitectura de la información en el Plano Estrategia, esto permitió tener
una idea de cómo funcionaría la navegación dentro del sitio web, es decir,
el poder ir a páginas vecinas de la misma sección o ir a otras secciones
principales sin salir del punto en el que el usuario se encuentra.
Para lograr esto se aplica dos tipos de sistemas de navegación verticales:
46
3.4.1.1. Navegación Global
Se aplicó menús desplegables fijos para los nodos principales permitiendo
siempre una navegación hacia las distintas secciones del sitio web [Figura 19],
el despliegue de cada menú se basó en la Estructura Jerárquica de la
sección 3.3.1.1 de esta tesis, estos nodos fueron:
Inicio->
UTMach->
Oferta Académica->
Investigación->
Servicios y Recursos->
Titulación->
Contactos->
Transparencia
Figura 19 - Representación de Navegación Global. Fuente: (Garrett, The Elements of User
Experience: User-Centered Design for the Web and Beyond, 2011)
3.4.1.2. Navegación Local
Para resolver la navegación local se usó un menú fijo por cada nodo
principal, este provee acceso a secciones vecinas dentro del mismo nodo sin
necesidad de regresar al nodo principal [Figura 20], por ejemplo.
o UTMach (Nodo Principal)
o Modelo Educativo (Nodo Secundario)
o Información General (Nodo Secundario)
o Autoridades (Nodo Secundario)
o Departamentos (Nodo Secundario)
o Campus (Nodo Secundario)
47
Figura 20 - Representación de Navegación Local. Fuente: (Garrett, The Elements of User
Experience: User-Centered Design for the Web and Beyond, 2011)
3.4.1.3. Mapa de Sitio
Se muestra de forma general todo el contenido estructural jerárquico
recogido de la arquitectura de la información, quedando de la siguiente
forma:
Inicio
UTMach
o Modelo Educativo
o Información General
o Autoridades
o Departamentos
o Campus
Oferta Académica
o Pregrado
o Posgrados
o Educación Continua
o Idiomas
Investigación
o Nosotros
o Publicaciones
o Noticias
Servicios y Recursos
o SIUTMACH
o Aula Virtual
o U.B.E.
o Biblioteca
o DNA
o Ingresar
o Noticias
Titulación
o Proceso Titulación
o Seguimiento
Graduados
Contactos
o Mapa
o Extensiones
Telefónicas
o Denuncias/Quejas
Transparencia
o Información
Administrativa
o Información
Financiera
o Información de
Regulación y Control
o Información Legal
48
3.4.1.4. Diseño de la Información
En base al análisis de la arquitectura de la información en el numeral 3.3.1 &
3.3.1.1, la jerarquía vertical usada agrupa todas las áreas necesarias a mostrar
a los usuarios, esquema que proviene del análisis de la información de los
Stakeholders en el numeral 3.1.1.4.
El esquema propuesto de 2 niveles permite una navegación fácil y global, sin
embargo, fue necesario agregar más información a estos niveles, los cuales
no son mostrados dentro de la arquitectura de la información, mas bien, lo
detallado a continuación forma parte de una sección paralela a la
arquitectura de la información, la cual sirve de refuerzo a cada uno de los
nodos del modelo jerárquico. Esto ayudó a generar una navegación intuitiva
y de fácil entendimiento, sin necesidad de generar un tercer nivel dentro de
la arquitectura de la información debido a la gran cantidad de información
que genera el sitio web de la UTMach.
El texto de color azul muestra el tercer nivel generado paralelamente al nodo
secundario en una nueva área fuera de los nodos principales.
Inicio
UTMach
o Modelo Educativo
o Información General
Historia
Misión y Visión
o Autoridades
o Administración Central
Dirección Financiera
Dirección Administrativa
Dirección de Talento Humano
Dirección de Tecnologías de la Información y
Comunicación
Dirección de Vinculación, Cooperación, Pasantías y
Prácticas
Dirección de Cultura y Arte
Dirección de Comunicación
o Campus
Ciudadela Universitaria
Campus Machala
Oferta Académica
o Pregrado
UAIC
49
Nosotros
Carreras
Investigación
Noticias
Seminarios-Congresos
UACE
Nosotros
Carreras
Investigación
Noticias
Seminarios-Congresos
UACS
Nosotros
Carreras
Investigación
Noticias
Seminarios-Congresos
UACQ
Nosotros
Carreras
Investigación
Noticias
Seminarios-Congresos
UACA
Nosotros
Carreras
Investigación
Noticias
Seminarios-Congresos
o Posgrados
Nosotros
Oferta Académica
o Educación Continua
Nosotros
Cursos
Noticias
o Idiomas
Nosotros
Inscripciones
Noticias
Investigación
o Nosotros
o Publicaciones
o Noticias
Servicios y Recursos
o SIUTMACH
o Aula Virtual
o U.B.E.
50
Nosotros
Servicios
Becas
Inclusión
Noticias
o Biblioteca
Bases Digitales
Repositorio UTMach
Noticias
o DNA
Inscripciones
o Ingresar
o Noticias
Titulación
o Proceso Titulación
o Seguimiento Graduados
Contactos
o Mapa
o Extensiones Telefónicas
o Denuncias/Quejas
Transparencia
o Información Administrativa
Informes Anuales
o Información Financiera
Presupuesto
o Información de Regulación y Control
Rendición de Cuentas
o Información Legal
Reglamentos
3.4.1.5. Wayfinding
Toda la información Wayfinding se la manejó en forma de ruta con la
siguiente estructura
Inicio -> Nodo Principal -> Segundo Nivel -> Tercer Nivel - > Cuarto Nivel
3.4.1.6. Wireframes
Las páginas tanto principal como internas se diseñaron en el software
JUSTINMIND5 en forma esquemática. Una muestra en vivo se puede acceder
desde la siguiente URL permanente: http://utmach.plus.ec/wireframes,
5 Plataforma de prototipado para web y apps móviles: www.justinmind.com
51
muestra cuatro esquemas funcionales; Inicio->Oferta Académica->Pregrado-
>UACS, estos Wireframes van un poco más allá, ya que muestran interacción
entre páginas llegando a convertirse en un prototipo.
Los cuatro esquemas representan la funcionalidad total del sitio web, ya que
sus secciones o categorías internas tienen el mismo diseño de página o
Layout.
Figura 21 - Wireframe Sección Inicio. Software: JUSTINMIND. Fuente: El autor
52
Figura 22 - Wireframe sección Oferta Académica. Software: JUSTINMIND. Fuente: El autor
Figura 23 - Wireframe sección Pregrado. Software: JUSTINMIND. Fuente: El autor
53
Figura 24 - Wireframe sección UACS. Software: JUSTINMIND. Fuente: El autor
3.5. Plano Superficie
3.5.1. Diseño Sensorial
Aquí se definen todos los aspectos sensoriales, siendo este el último plano de
la metodología de Garrett, en donde el contenido, funcionalidad y estética
se unen para producir un diseño final que agrada a los sentidos.
54
3.5.1.1. Uniformidad
Diseño Basado en Cuadrícula
El diseño en base a cuadrícula permite mantener un diseño uniforme
mediante el diseño de plantillas para una página maestra, esta permite
ajustar variaciones a distintos elementos gráficos o texto dentro del espacio
propuesto.
Se diseñó tres modelos de cuadrícula –grid-layout-, que están pensados en
cubrir todas disposiciones de elementos posibles dentro de las secciones
internas del sitio web.
El grid-layout de la página principal es inamovible en su disposición espacial
de elementos, este esquema nace de las necesidades de mostrar
información relevante y clara teniendo en cuenta nuestro Plan Estratégico en
su segmentación demográfica [Figura 25].
Los dos grid-layout restantes permitieron cubrir todas las disposiciones
espaciales de los elementos a mostrar [Figura 26],[Figura 27]. El objetivo era
mostrar contenido relevante de forma más visual que textual obtenido de la
sección de Stakeholders numeral 3.1.1.4.
El diseño de las cuadrículas asegura la colocación de elementos uniformes y
consistentes, por tanto, no se puede alterar la cuadrícula para contenidos
específicos, estos tendrán que adaptarse al esquema propuesto por más
necesarios que estos parezcan. Esto podría causar variación en la disposición
de elementos hasta llegar al punto de crear tensión visual.
La anchura máxima de todo el contenido web es de 960px, valores menores
a este no deben alterar la cuadrícula, el diseño responsivo permite crear
fluidez en los contenidos, por tanto, a menor anchura la cuadrícula se
adapta. Esto permite generar contenido para todo tipo de pantalla.
55
Grid-Layout Master – Página de Inicio
Figura 25 - Grid-Layout Master 1, página Inicio. Fuente: El autor
56
Grid-Layout Master 2– Sección Interna 1
Figura 26 - Grid-Layout Master 2, secciones internas. Fuente: El autor
57
Grid-Layout Master 3 – Sección Interna 2
Figura 27 - Grid-Layout Master 3, sección interna 2. Fuente: El autor
58
3.5.1.2. Paleta de colores y Tipografía
Paleta de Colores
Dado que la Universidad Técnica de Machala cuenta con un Manual de
Identidad Visual Corporativa6 en lo referente a la marca institucional, se tomó
en cuenta los lineamiento de manejo de la marca.
En la sección 1.4 del Manual de Identidad Visual Corporativa se describen los
colores institucionales que se deben utilizar [Figura 28].
Figura 28 - Colores Institucionales, sección 1.4. Fuente: Manual de Identidad Visual
Corporativa UTMACH
Tipografía
En el Manual de Identidad Visual Corporativa de la UTMach, en su sección
1.5, describe la Tipografía Institucional de uso principal y secundaria.
Principal
Book Antiqua Regular
Book Antiqua Italic
Book Antiqua Bold
Book Antiqua Bold Italic
6 Manual de identidad Visual Corporativa UTMACH:
http://www.utmachala.edu.ec/portal/public/general/listdoc/hl/es/item/103-786-787-801
59
Secundaria
Myriad Pro Regular
Myriad Pro Italic
Myriad Pro Bold
Myriad Pro Semibold
Myriad Pro Semibold Italic
Myriad Pro Bold Italic
3.5.1.3. Diseño de Componentes y Guías de Estilo
Aunque los Wireframes son esquemas que permiten visualizar la disposición
espacial de los elementos que llevará el sitio web, con el objetivo de entender
la importancia de agrupar elementos, estos no tienen por qué ser exactos al
diseño visual final, precisamente porque son esquemas-borradores.
El ancho máximo del contenido es de 960px, algunos de los elementos a
continuación son omitidos por este valor, ya que su anchura es porcentual al
100% del ancho de la pantalla.
Logotipo UTMach
La marca UTMACH tiene una altura de 100px y proporcional de ancho,
siguiendo los lineamientos del manual de identidad. Su ubicación se
encuentra en la parte superior izquierda del sitio web, y siempre será fija su
ubicación espacial.
Figura 29 - Logotipo UTMach. Fuente: Manual de Identidad Visual Corporativa UTMACH
60
Navegación Global
Son ocho categorías incluyendo Inicio para la formación de la navegación
global. El estilo es simple, sin fondo. Lleva 4 estados de interacción: Normal,
Rollover, Pulsado y Activo.
Estado Normal
Sin color de fondo, texto color negro.
Estado Rollover
Color de fondo Pantone 2925 EC, texto color blanco.
Estado Botón Pulsado
Color de fondo Pantone 301 EC, texto color blanco.
Banner Principal
Todo anuncio colocado en este banner debe ser diseñado específicamente
para esta área, las medidas son de 920x300px.
61
Botonera de Accesos Directos
Este proporciona atajos a las secciones más usadas del sitio web de la
UTMach. El resultado de cuantos atajos incluir en la sección principal de la
web, nace de las necesidades de los usuarios durante el Plan Estrategia.
Un número de seis botones comprende la botonera de accesos directos,
cabe mencionar que aunque muchas de las áreas, departamentos,
unidades académicas y otros, aún no cuentan con logotipo, marca o
distintivos para su fácil identificación, lo que se propuso fue diseñar botones
con líneas gráficas basadas del Manual de Identidad Visual Corporativa en
el uso de la marca UTMACH, quedando de la siguiente forma:
Sección de Noticias – Versión Resumen
El diseño para mostrar la introducción de las noticias, nace de la necesidad
de generar más contenido visual que textual durante la etapa de Plano
Estratégico. Con un esquema de tres columnas a lo ancho de los 960px
distribuidos horizontalmente permite mostrar contenido relevante generado
por distintos departamentos de la UTMach.
Adicional, cada recuadro de noticias permite la transición automática de tres
contenidos informativos, alcanzando un total de 9 por toda la sección de
Noticas.
Para los títulos se empleó tipografía en estilo negrita o bold tamaño 18, y el
contenido tamaño 14, este no debe sobrepasar de los 144 caracteres.
62
Pie de Página
La plantilla termina con un pie de página fijo y adaptable a cualquier tamaño
de pantalla. Con un color de fondo Pantone 2925 EC siguiendo los colores
institucionales del Manual de Identidad de la UTMach y una proporción que
va por todo el ancho al 100% del contenido de la pantalla y una altura de
82px. El texto se coloca en color blanco.
La información que se muestra aquí es: Derechos de Autor; Nombre de la
Institución; Dirección de la Institución, quedando de la siguiente forma.
3.5.1.4. Diseño Final
Como resultado de la agrupación de los elementos de la sección 3.5.1.3, se
logra el diseño final de la interfaz web.
Al mismo tiempo se desarrolló un prototipo de alta fidelidad el cual es
totalmente usable y puede ser testeado desde la siguiente URL:
http://utmach.plus.ec.
La tecnología empleada para el desarrollo del prototipo es la siguiente:
63
Lenguaje de Maquetación HTML5: Permite generar sitios web con un
significado semántico, mejora el SEO arrojando información mucho más
adecuada e intuitivo en la búsqueda de contenidos.
Hojas de Estilos CSS3: Este permite generar estilos en base el lenguaje de
maquetación HTML5.
Lenguaje JavaScript: Lenguaje de programación orientado a objetos que
permite generar dinamismo a elementos estáticos.
Figura 30 - Diseño Final-Prototipo de alta fidelidad [http://utmach.plus.ec]. Fuente: El autor
64
De esta forma se da cumplimiento a otro objetivo específico de Diseñar un
Prototipo vertical y de alta fidelidad.
3.5.2. Evaluación de la Usabilidad
3.5.2.1. Test de Usuarios
Como método de refuerzo a la metodología de Garrett, ya que este es un
proceso totalmente iterativo y que por su naturalidad no requiere una única
evaluación en la etapa final de la metodología, se adiciona un test con
usuarios siguiendo las recomendaciones de Nielsen basta con 5 usuario para
realizar pruebas de usabilidad (Nielsen, 2012).
La prueba consistió en observar todo lo que el usuario demuestre en base a
las tareas que debía realizar, esto en frente de un computador de escritorio
mediante el prototipo de alta fidelidad puesto en marcha en el navegador
de internet Google Chrome versión 51.0.2704.84, bajo el sistema operativo
Windows 10, con acceso a internet DSL y todos sus periféricos funcionando
correctamente.
Fue realizada en una oficina particular con todas las comodidades del caso
a cada usuario en distintos momentos.
Lugar: Centro Comercial Oro Plaza, oficina #320
Tres usuario en horario de la mañana y dos en horario de la tarde.
Lista de tareas:
En base a los mismo perfiles Personas y Escenarios de la metodología de
Garrett en la etapa de Plano Estrategia, se consiguieron 5 usuario para realizar
las siguiente tareas.
Identidad
1. ¿Con la información que se ofrece en pantalla, es posible saber de
qué institución corresponde al sitio, es decir, sabe que se trata de la
UTMach, más allá de verificar la URL?
65
Contenido
1. ¿Le parece adecuada la selección de contenidos destacados en la
portada o usted echó de menos otras áreas de información que le
habría gustado ver destacadas?
2. ¿Es fácil distinguir los nuevos contenidos que presenta el sitio web? ¿Por
ejemplo, es posible saber cuál fue la última noticia publicada en el sitio
web?
Navegación (Cada usuario iniciará en distintas páginas)
1. ¿Existen elementos dentro de las páginas, que le permitan saber
exactamente dónde se encuentra dentro de este sitio y cómo volver
atrás sin usar los botones del programa navegador?
Gráficas Web
1. ¿Le pareció adecuada la forma en que se muestran las imágenes en
el sitio web? ¿Son nítidas? ¿Son adecuadas para representar el
contenido del que trata el sitio?
Búsqueda
1. ¿Si desea buscar una noticia en específico que no aparece a simple
vista, como lo haría, y donde se encuentra dicha opción?
Utilidad
1. ¿Tras una primera mirada, le queda claro cuál es el objetivo del sitio?
¿Qué contenidos y servicios ofrece? ¿Los puede enumerar?
3.5.2.2. Resultados Test de Usuarios
Identidad
Tarea 1
Las cinco usuario no tuvieron inconvenientes en decir que se trataba del sitio
web la Universidad Técnica de Machala, respondieron con total seguridad y
en muy corto tiempo, no existió la actitud de estar confundido o perdido.
66
Contenido
Tarea 1
Los cinco usuarios mostraron una actitud contenta en poder por fin acceder
a los servicios más usados desde la pantalla principal, y los cinco coincidieron
en que no extrañan por el momento ninguna sección adicional o que les
gustaría encontrar entre las que existen en el prototipo.
Tarea 2
Dos de cinco usuarios distinguen tres secciones que son: Banner, Accesos
directos y Noticias, mientras que los tres dos usuarios restantes distinguen
cuatro secciones: Menú principal, Banner, Accesos director y Noticias.
Todos pudieron contestar y asegurar cual era la última noticia generada sin
inconveniente alguno.
Navegación
Tarea 1
Aunque no sabían el nombre correcto de los Wayfinding, breadcrumbs o ruta
de ubicación, lograron identificar este elemento y contestar en que sección
se encontraban.
Gráfica Web
Tarea 1
Tres usuario comenzaron comparando mentalmente pero en voz alta como
recordaban el sitio original www.utmachala.edu.ec y cómo lo ven ahora en
el prototipo, sus respuestas fueron que ahora es limpio y serio, ordenado e
intuitivo. Mientras que los dos usuario restantes no compararon, pero muy
rápidamente contestaron que el sitio es limpio y agrada a la vista, ordenado
y serio.
67
Búsqueda
Tarea 1
Lo primero que notaron los cinco usuario fue la barra de búsqueda en la parte
superior derecha, contestaron muy rápidamente diciendo, desde aquí se
puede encontrar cualquier cosa, al intentarlo no había interacción alguna ya
que esa funcionalidad no estaba prevista dentro del prototipo al no constar
como un objetivo que deba cumplirse.
Utilidad
Tarea 1
El primer usuario contestó lo siguiente: Los servicios que más uso
frecuentemente los puedo encontrar ahora en un solo sitio.
Segundo Usuario: Siempre accedo al SIUTMACH desde diferente
máquinas pero nunca me acuerdo de la dirección (URL), por lo que
me toca entrar al sitio web actual de la Universidad para encontrar el
vínculo hacia el SIUTMACH, ahora está en la pantalla principal por lo
que me satisface totalmente en mi caso.
Tercer y cuarto usuario: Actualmente el Aula Virtual tiene una dirección
(URL) complicada y difícil de acordarse, por lo que toca entrar al sitio
web de la Universidad, dar clic en servicios y luego de una ruleta que
no carga bien en cualquier computador toca adivinar la parte para
hacer clic entrar al aula virtual. Ahora lo veo en la pantalla principal lo
cual es muy útil y no tengo problema con encontrarlo.
Quinto usuario: Mencionó que no tiene preferencia alguna de los
servicios que se ofrece, más que por la obligatoriedad de entrar el
SIUTMACH cada día para registrar asistencias. Sin embargo estuvo
contento de encontrar los servicios en un solo lado.
68
3.5.2.3. Conclusiones del Test de Usuarios
Los cinco usuarios en algún momento hacían comparación del sitio actual de
la UTMACH con el prototipo, no se observó actitudes de desagrado o
confundidos, las tareas eran claras para realizarlas. Esto demostró que el
grado de aceptación del prototipo es muy bueno, esto debido a que quería
seguir usando el prototipo una vez finalizado las tareas a razón de mostrar un
sitio más limpio y de agrado a la vista.
3.5.2.4. Encuesta
En base al numeral 3.1.1.1. del Plano Estratégico se realizó una encuesta en
línea mediante el sistema TypeForm 7 , este permite generar formularios
dinámicos y obtener resultados detallados.
El vínculo para entrar a la encuesta fue enviado mediante correo electrónico
desde la dirección [email protected], con la base de datos de
direcciones de correos electrónicos institucionales obtenidas de la
Coordinación General de la Unidad Académica de Ciencias Sociales,
responsable Lcdo. Pedro Cedillo. Formato de encuesta en Anexo 3.
En el correo electrónico consta la URL para iniciar la encuesta
https://plus.typeform.com/to/rpYlrZ y prototipo.
Figura 31 - Correo Electrónico enviado desde cuenta institucional
[email protected]. Fuente: El autor
7 Aplicación web y móvil para el desarrollo de formularios: www.typeform.com
69
3.5.2.5. Resultados Encuesta
Identidad
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, cree que la identidad
institucional está clara a simple vista, considerando que la marca si está presente y
se la reconoce como la UTMACH.
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que es fácil
mantener contacto con la institución, ya que los números de contactos están a
simple vista y son de fácil acceso.
29; 100%
1. ¿Con la información que se ofrece en pantalla, es posible saber de que institución corresponde al sitio, es decir, sabe que se trata de la UTMach, más
allá de verificar la URL?
SI
NO
29; 100%
Si tuviera que tomar contacto telefónico o enviar una carta tradicional a la institución, ¿se ofrece información de números o direcciones? ¿Son útiles
como para hacer esa tarea?
SI
NO
70
Contenido
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que es
adecuada la selección de contenido destacado en portada, y que no hay
necesidad de otra sección.
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, distingue las diferentes
secciones; siendo estas Menú, banner, accesos directos y noticias, pudiendo ubicar
está última sin inconveniente.
29; 100%
1. ¿Le parece adecuada la selección de contenidos destacados en la portada o usted echó de menos otras áreas de información que le habría gustado ver
destacadas?
SI
NO
29; 100%
2. ¿Es fácil distinguir los nuevos contenidos que presenta el sitio web? ¿Por ejemplo, es posible saber cual fue la última noticia publicada en el sitio web?
SI
NO
71
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que es fácil la
navegación, y no existe la necesidad de iniciar nueva navegación.
Navegación
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que es fácil
saber en qué sección se encuentra sin necesidad de usar los botones atrás y
adelante del navegador.
0; 0%
29
3. En caso de haber información relacionada con la que estaba viendo, ¿se le ofreció de manera simple? ¿O tuvo que volver a navegar para encontrarla?
DIFICIL
FACIL
29; 100%
0
1. ¿Existen elementos dentro de las páginas, que le permitan saber exactamente dónde se encuentra dentro de este sitio y cómo volver atrás sin
usar los botones del programa navegador?
SI
NO
72
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que es fácil
distinguir si un enlace fue o no visitado, este cambiar de color a uno más opaco..
Gráficas Web
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que las
imágenes están en buena resolución y bien ubicadas, además de representar el
contenido.
29; 100%
0
2. ¿Logra distinguir gráficamente los enlaces visitados de aquellos que no ha visitado aún?
SI
NO
29; 100%
0
1. ¿Le pareció adecuada la forma en que se muestran las imágenes en el sitio web? ¿Son nítidas? ¿Son adecuadas para representar el contenido del que
trata el sitio?
SI
NO
73
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que el sitio
carga rápido y no existe demora exagerada en la descarga de las imágenes de las
secciones principales.
Análisis
El 97% de los encuestados que corresponde a 28 usuarios, considera que el sitio
mantiene una estructura equilibrada gráficamente, ni mucho texto ni muchas
imágenes. El 1% que representa a 1 usuario considera gráficamente simple el sitio.
0; 0%
29; 100%
2. ¿Las imágenes grandes se demoraron más de lo esperado? ¿Tuvo que seguir navegando sin que llegaran a mostrarse completamente? ¿Cree que el
sitio es muy lento?
SI
NO
28; 97%
1
3. ¿Considera que gráficamente el sitio está equilibrado, muy simple o recargado?
EQUILIBRADO
SIMPLE
RECARGADO
74
Búsqueda
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que es fácil
iniciar una búsqueda, en la parte superior derecha se encuentra el recuadro de
búsqueda encima de los íconos sociales.
Utilidad
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que solo con
ver de inicio la página principal, se entiende el mensaje a transmitir, sus objetivos de
informar a la comunidad universitaria y científica. Ofreciendo información
académica e incluso servicios a la comunidad.
29; 100%
0
1. ¿Si desea buscar una noticia en específico que no aparece a simple vista, como lo haría, y donde se encuentra dicha opción?
FACIL
DIFICIL
NO PUDO LOGRARLO
29; 100%
0; 0%
1. ¿Tras una primera mirada, le queda claro cuál es el objetivo del sitio? ¿Qué contenidos y servicios ofrece?
SI
NO
75
Análisis
El 100% de los encuestados que corresponde a 29 usuarios, considera que son útiles
los accesos directos en la página principal ya que son los de uso más frecuente.
Análisis
El 22% de los encuestados que corresponde a 29 usuarios, considera el sitio se muestra
serio demostrando sus objetivos académicos y de vinculación a la sociedad, de igual
forma el 22% de 29 usuarios cree que el sitio se muestra útil al considerar información
relevante, el 22% de 29 usuarios cree que el sitio es agradable y llama la atención, el
19% que son 29 usuarios considera que se muestra limpio sin ruido visual distractor y
29; 100%
0; 0%
2. ¿Cree que los contenidos y servicios que se ofrecen en este sitio son de utilidad para su caso personal?
SI
NO
AGRADABLE; 29; 22%
LIMPIO; 25; 19%
SERIO; 29; 22%
RAPIDO; 20; 15%
UTIL; 29; 22%
3. ¿Qué es lo que más te llamó la atención positivamente o negativamente de la utilidad que ofrece
el sitio web?
AGRADABLE LIMPIO SERIO RAPIDO UTIL
76
relajado y por último el 15% que corresponde a 20 usuario considera que los tiempos
de carga son imperceptibles y no distraen su atención, lo consideran rápido.
3.6. Resultados
Metodologías de Diseño centrado en el usuario aplicables a sitios web.
Análisis de las técnicas del diseño centrado en el usuario más
adecuadas para el desarrollo del sitio web de la UTMach.
Evaluación y conclusiones de la Metodología seleccionada.
Diseño de la interfaz web mediante la Metodología The Elements of
User Experience de James Garrett.
Diseñar un prototipo vertical de alta fidelidad en un servidor web.
Evaluar la usabilidad y experiencia de usuario
Test de Usuario
Encuestas
Diseño Final
77
4. Conclusiones y Recomendaciones
4.1. Conclusiones
Se analizó las diferentes metodologías del diseño centrado en el usuario que
son aplicables a sitios web y software web.
Se evaluó la metodología mejor adaptable a las necesidades del sitio web
para la UTMach, haciendo uso de test rápidos para evaluar la usabilidad
basado en la metodología MPIu+a llamada SIRIUS.
Se evaluó que la metodología The Elements of User Experiencie de James
Garrett es la que mejor se adapta a las necesidades de este trabajo.
Se diseñó y desarrolló un prototipo de alta fidelidad permitiendo mostrar el
sitio web tal cual fuera para su lanzamiento.
La evaluación de la usabilidad mediante la técnice de Test de Usuario y
Encuestas, permitió confirmar la eficacia y validez de la metodología de
Garrett.
4.2. Recomendaciones
Sugerir a las autoridades de la Universidad Técnica de Machala la
Implementación y Lanzamiento de esta propuesta de interfaz web
asegurando mediante metodologías de diseño y usabilidad su correcta
estructura y diseño.
Este trabajo de tesis sirve como guía de la aplicación del diseño centrado en
el usuario en un sitio web real adoptando la metogología de James Garrett,
The Elements os User Experiencie.
78
5. Bibliografía
Bevan, N., Ferre, X., & Antón Escobar, T. (2010). UCD method selection with
usability planner. Proceedings of the 6th Nordic Conference on Human-
Computer Interaction: Extending Boundaries (págs. 829-830). New York:
ACM.
Carreras Montolo, O. (7 de Marzo de 2008). Metodología DCU MPIu+a.
Recuperado el 17 de Febrero de 2016, de Usable Accesible:
http://olgacarreras.blogspot.com/2008/03/metodologa-dcu-
mplua.html
Carreras Montoto, O. (20 de Julio de 2011). Sirius. Nuevo sistema para la
evaluación de la usabilidad web . Recuperado el 10 de Marzo de 2016,
de UsableAccesible - Olga Carreras:
http://olgacarreras.blogspot.com.es/2011/07/sirius-nueva-sistema-
para-la-evaluacion.html
Carvajal, M., & Saab, J. (23 de Agosto de 2010). Lineamientos y metodologías
en Usabilidad para Gobierno en línea. Programa Gobierno en línea,
Marzo(12). Colombia.
Garrett, J. J. (6 de Marzo de 2002). Un vocabulario visual para describir
arquitectura de información y diseńo de interacción, 1.1b.
Recuperado el 16 de Marzo de 2016, de Sitio web de JJ Garrett:
http://www.jjg.net/ia/visvocab/spanish.html
Garrett, J. J. (2011). The Elements of User Experience: User-Centered Design for
the Web and Beyond (2nd Edition ed.). (M. J. Nolan, Ed.) Berkeley,
California, EEUU: New Riders.
Granollers i Saltiveri, T. (15 de Julio de 2004). MPIu+a. (J. Lorés Vidal, Ed.)
Recuperado el 10 de Febrero de 2016, de Modelo de Proceso de la
Ingeniería de la usabilidad y de la accessibilidad:
http://www.grihotools.udl.cat/mpiua/fases-mpiua/
79
Granollers i Saltiveri, T. (15 de Julio de 2004). MPIu+a. Una metodología que
integra la ingeniería del software, la interacción persona-ordenador y
la accesibilidad en el contexto de equipos de desarrollo
multidisciplinares. (J. Lorés Vidal, Ed.) Recuperado el 16 de Febrero de
2016, de Tesis Doctorales Universidad de Lleida:
http://www.tdx.cat/handle/10803/8120
Hassan Montero, Y., & Martín Fernández, F. J. (Julio de 2004). Propuesta de
adaptación de la metodología de diseño centrado en el usuario para
el desarrollo de sitios web accesibles. Revista española de
documentación científica, 27(3), 330-344.
Hassan Montero, Y., & Núnez Peña, A. (14 de Enero de 2005). Diseño de
Arquitecturas de Información: Descripción y Clasificación.
Recuperado el 10 de Enero de 2016, de No Solo Usabilidad:
http://www.nosolousabilidad.com/articulos/descripcion_y_clasificaci
on.htm
Hassan Montero, Y., & Ortega Santamaría, S. (2009). Informe APEI sobre
Usabilidad. Asociación Profesional de Especialistas en Información.
Gijón: APEI.
Hassan, Y., Martin, F., & Iazza, G. (2004). Diseño Web Centrado en el Usuario:
Usabilidad y Arquitectura de la Información. Recuperado el 18 de
Noviembre de 2015, de Hipertext.net:
https://www.upf.edu/hipertextnet/numero-2/diseno_web.html
ISO 13407:1999. (10 de Junio de 1999). ISO 13407:1999. Recuperado el 20 de
Diciembre de 2015, de Human-centred design processes for interactive
systems:
http://www.iso.org/iso/catalogue_detail.htm?csnumber=21197
ISO 9241-11. (19 de Marzo de 1998). ISO 9241-11:1998. Recuperado el 20 de
Noviembre de 2015, de Ergonomic requirements for office work with
visual display terminals (VDTs) -- Part 11: Guidance on usability:
http://www.iso.org/iso/catalogue_detail.htm?csnumber=16883
80
ISO 9241-210. (15 de Marzo de 2010). ISO 9241-210:2010. Recuperado el 20 de
Noviembre de 2015, de Ergonomics of human-system interaction -- Part
210: Human-centred design for interactive systems:
http://www.iso.org/iso/catalogue_detail.htm?csnumber=52075
ISO/PAS 18152:2003. (01 de Octubre de 2003). ISO/PAS 18152:2003.
Recuperado el 20 de Enero de 2016, de Ergonomics of human-system
interaction -- Specification for the process assessment of human-system
issues: http://www.iso.org/iso/catalogue_detail.htm?csnumber=38596
ISO/TR 18529:2000. (15 de Junio de 2000). ISO/TR 18529:2000. Recuperado el
20 de Enero de 2016, de Ergonomics of human-system interaction --
Human-centred lifecycle process descriptions:
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail
.htm?csnumber=33499
Lasso Guerrero, J. G. (2013). Ergonomía en el diseño web: Usabilidad de sitios
web dedicados al comercio electrónico en Buenos Aires. Universidad
de Palermo, Facultad Diseño y Comunicación - Maestría en Diseño.
Buenos Aires: Universidad de Palermo.
Marcos, M.-C. (2007). La usabilidad en España, un boom muy necesario.
Anuario ThinkEPI.
Nielsen, J. (1 de Enero de 1994). Guerrilla HCI: Using Discount Usability
Engineering to Penetrate the Intimidation Barrier. Recuperado el 25 de
Noviembre de 2015, de Nielsen Norman Group:
http://www.nngroup.com/articles/guerrilla-hci/
Nielsen, J. (4 de Junio de 2012). How many test users in a Usability Study?
Recuperado el 8 de Diciembre de 2015, de Nielsen Norman Group:
https://www.nngroup.com/articles/how-many-test-users/
Nielsen, J. (4 de Enero de 2012). Usability 101: Introduction to Usability.
Recuperado el 23 de Noviembre de 2015, de Nielsen Norman Group:
http://www.nngroup.com/articles/usability-101-introduction-to-
usability/
81
Norman, D. A. (01 de Julio-Agosto de 2005). Human-Centered Design
Considered Harmful. Magazine Interactions, 12(4), 14-19.
Norman, D. A. (2012). The Design of Everyday Things. Basic Books.
Norman, D. A., & Draper, S. W. (1986). User centered system design: New
Persperctive on Human-Computer Interaction. Hillsdale, New Jersey,
Londres: Lawrence Eribaum Associates, In., Publishers.
Sánchez, J. (05 de Septiembre de 2011). En busca del Diseño Centrado en el
Usuario (DCU): definiciones, técnicas y una propuesta. Recuperado el
22 de Noviembre de 2015, de No Solo Usabilidad:
http://www.nosolousabilidad.com/articulos/dcu.htm
Serco Ltd. (11 de Julio de 2000a). Recommended methods for User Centred
Design. (N. Bevan, J. Earthy, Productores, & Serco) Recuperado el 10
de Febrero de 2016, de Cost-effective User Centred Design:
http://www.usabilitynet.org/trump/methods/recommended/index.ht
m
Serco Ltd. (11 de Julio de 2000b). Basic methods for User Centred Design. (N.
Bevan, J. Earthy, Productores, & Serco) Recuperado el 10 de Febrero
de 2016, de Cost-effective User Centred Design:
http://www.usabilitynet.org/trump/methods/basic/index.htm
Suárez Torrente, M. d. (2011). SIRIUS: Sistema de Evaluación de la Usabilidad
Web Orientado al Usuario y basado en la Determinación de Tareas
Críticas . Universidad de Oviedo, Departamento de Informática.
Oviedo: Universidad de Oviedo.
U.S. Dept. of Health and Human Services. (2006). User-Centered Design
Process Map. Recuperado el 10 de Marzo de 2016, de Usability.gov:
http://www.usability.gov/how-to-and-tools/resources/ucd-map.html
UsabilityNet. (2006). Tabla de Métodos. Recuperado el 20 de Febrero de 2016,
de Usability Net: http://www.usabilitynet.org/tools/methods.htm
82
6. Anexos
6.1. Anexo 1 – Encuesta preliminar para la detección de problemas
Las siguientes preguntas fueron realizadas a 5 usuarios pertenecientes a la
Universidad Técnica de Machala, basados en el estudio de Nielsen de Test de
guerrilla. (Nielsen, 1994). Distribuidas de la siguiente forma: Dos docentes de la UACS,
1 Docente de la UACE, 1 Docente de la UAIC y 1 estudiante perteneciente a la UACS.
La encuesta fue realizada in situ, es decir, en frente de la computadora con el sitio
web actual de la UTMach abierto en un navegador de internet.
Teniendo en cuenta que los usuarios seleccionados tienen características requeridas
para este trabajo, el primer requisito pasa por tener conocimiento previo del sitio web
de la UTMach, en cualquier contexto de uso.
Para que respondan, primero se les solicita a que realicen la acción que pide la
pregunta de ser necesario, luego respondan.
Identidad
2. ¿Con la información que se ofrece en pantalla, es posible saber de
qué institución corresponde al sitio, es decir, sabe que se trata de la
UTMach, más allá de verificar la URL?
3. Si tuviera que tomar contacto telefónico o enviar una carta tradicional
a la institución, ¿se ofrece información de números o direcciones? ¿Son
útiles como para hacer esa tarea? ¿Le costó encontrar esa
información?
Contenido
3. ¿Le parece adecuada la selección de contenidos destacados en la
portada o usted echó de menos otras áreas de información que le
habría gustado ver destacadas?
83
4. ¿Es fácil distinguir los nuevos contenidos que presenta el sitio web? ¿Por
ejemplo, es posible saber cuál fue la última noticia publicada en el sitio
web?
5. En caso de haber información relacionada con la que estaba viendo,
¿se le ofreció de manera simple? ¿O tuvo que volver a navegar para
encontrarla?
Navegación
2. ¿Existen elementos dentro de las páginas, que le permitan saber
exactamente dónde se encuentra dentro de este sitio y cómo volver
atrás sin usar los botones del programa navegador?
3. ¿Logra distinguir gráficamente los enlaces visitados de aquellos que no
ha visitado aún?
Gráficas Web
2. ¿Le pareció adecuada la forma en que se muestran las imágenes en
el sitio web? ¿Son nítidas? ¿Son adecuadas para representar el
contenido del que trata el sitio?
3. ¿Las imágenes grandes se demoraron más de lo esperado? ¿Tuvo que
seguir navegando sin que llegaran a mostrarse completamente?
¿Cree que el sitio es muy lento?
4. ¿Considera que gráficamente el sitio está equilibrado, muy simple o
recargado?
Búsqueda
2. ¿Si desea buscar una noticia en específico que no aparece a simple
vista, como lo haría, y donde se encuentra dicha opción?
Utilidad
2. ¿Tras una primera mirada, le queda claro cuál es el objetivo del sitio?
¿Qué contenidos y servicios ofrece? ¿Los puede enumerar?
3. ¿Cree que los contenidos y servicios que se ofrecen en este sitio son de
utilidad para su caso personal?
84
4. ¿Qué es lo que más te llamó la atención positivamente o
negativamente de la utilidad que ofrece el sitio web?
Resultados
Identidad
Pregunta 1
SI: 60% NO: 40%
Para la mayoría de los encuestados el 60% piensa que la identidad institucional pasa
desapercibida durante la navegación, y el 40% considera que la marca si está
presente.
Pregunta 2
SI: 100% NO: 0%
Para el 100% de los encuestados se considera que es fácil mantener contacto con la
institución, ya que los números de contactos están a simple vista y son de fácil
acceso.
Contenido
Pregunta 1
SI: 20% NO: 80%
Para la mayoría de los encuestados el 80% piensa que el contenido en su mayoría no
es relevante y que les gustaría ver la información en un mejor orden, y el 20%
considera que el contenido destacado actual es adecuado.
Pregunta 2
SI: 0% NO: 100%
Para el 100% de los encuestados se considera que es muy confuso encontrar las
últimas noticias publicadas, ya que el sitio cuenta con dos secciones en su página
principal, y es difícil acceder a la búsqueda de noticias pasadas específicas.
Pregunta 3
DIFICIL: 100% FACIL: 0%
Para el 100% de los encuestados se considera que es muy difícil regresar a la última
sección visitada, hay que ir a la página principal para acceder a ello.
85
Navegación
Pregunta 1
SI: 60% NO: 20%
Para la mayoría de los encuestados el 60% ve una forma de guiarse en que sección
se encuentran, y el 20% se le hizo confuso para forma de ubicarse dentro de que
sección estaban.
Pregunta 2
SI: 0% NO: 100%
Para el 100% de los encuestados se considera que es muy confuso distinguir si la
sección en la que se encuentra corresponde al enlace seleccionado, el color azul y
rojo para diferenciar entre activo y desactivo es muy confuso.
Gráficas Web
Pregunta 1
SI: 0% NO: 100%
Para el 100% de los encuestados cree que la selección de imágenes no es la más
adecuada, mucho uso de imágenes de internet, pocas imágenes propias, y de existir
estas últimas, no se muestran correctamente, aparecen distorsionadas y borrosas.
Pregunta 2
SI: 100% NO: 0%
Para el 100% de los encuestados consideran que es mucho tiempo la espera de la
carga de las imágenes, que muchas veces deben continuar navegando sin dejar
que estas terminen, lo que provoca que el sitio en general se vuelva pesado.
Pregunta 3
EQUILIBRADO: 20% SIMPLE: 40% RECARGADO: 40%
Para el 40% de los encuestados consideran que el sitio web es simple, pero al mismo
tiempo el otro 40% considera que está muy recargado, esto debido a la falta de
tratamiento de imágenes en la sección noticias, y el 20% considera que está
equilibrado al tener pocos colores y un fondo blanco.
86
Búsqueda
Pregunta 1
FACIL: 0% DIFICIL: 20% NO PUDO LOGRARLO: 80%
Para el 80% de los encuestados no pudo realizar la tarea, ya que función de
búsqueda no funciona correctamente, escriben palabras claves para buscar
contenidos y no arroja resultado alguno. Para el 20% pudo realizar la tarea pero de
forma difícil, tuvieron que buscar página por página dentro de la sección noticia
para llegar a la esperada.
Utilidad
Pregunta 1
SI: 0% NO: 100%
Para el 100% de los encuestados cree el sitio web no ofrece un claro objetivo en la
información que muestra, todo está mezclado y genera confusión al momento de
ubicarse en alguna sección, los servicios que ofrece se muestran de forma confusa
siendo muy difícil acceder a ellas.
Pregunta 2
SI: 0% NO: 100%
Para el 100% de los encuestados consideran que los servicios que más usan no se
ofrecen de primera mano, llegar a ello es muy complicado, recurriendo en muchas
ocasiones y más fácil guardar como favorito en el navegador. Existen servicios que
no conocen pero se muestran dentro de los más usados.
Pregunta 3
DESORDEN: 40% NAVEGACION CONFUSA: 20%
FUNCIONES CON FALLAS: 20% LENTO AL CARGAR: 20
Para el 40% de los encuestados consideran que el sitio web no mantiene orden
alguno, las secciones más importantes y de mayor uso, no están a simple vista y son
de difícil acceso. El 20% considera que la navegación es confusa, esto a razón de
utilizar el rojo y azul como colores de activo y desactivo, existe mucho espacio en
blando que contiene links y no pueden ser accedidos de forma fácil, deben buscar
la parte activa del link para abrir la sección. El 20% considera que la función mas
importante de búsqueda no funciona y no permita acceder a ello, y el 20% considera
el sitio web en general es lento al cargar.
87
6.2. Anexo 2 – Evaluación Heurística Método SIRIUS
Checklist de evaluación heurística metodología MPIu+a, y adaptado
a digital por Olga Carreras -SIRIUS-.
Nombre de Archivo: checklist_revision_heuristica_metodo_sirius_v3.xlsx
Este archivo puede ser descargado desde la siguiente URL:
http://utmach.plus.ec/anexos/checklist_revision_heuristica_metodo_sirius_v3.xlsx
Capturas de pantalla
88
6.3. Anexo 3 – Formato Encuestas Evaluación Usabilidad
Identidad
4. ¿Con la información que se ofrece en pantalla, es posible saber de
qué institución corresponde al sitio, es decir, sabe que se trata de la
UTMach, más allá de verificar la URL?
5. Si tuviera que tomar contacto telefónico o enviar una carta tradicional
a la institución, ¿se ofrece información de números o direcciones? ¿Son
útiles como para hacer esa tarea? ¿Le costó encontrar esa
información?
Contenido
6. ¿Le parece adecuada la selección de contenidos destacados en la
portada o usted echó de menos otras áreas de información que le
habría gustado ver destacadas?
7. ¿Es fácil distinguir los nuevos contenidos que presenta el sitio web? ¿Por
ejemplo, es posible saber cuál fue la última noticia publicada en el sitio
web?
8. En caso de haber información relacionada con la que estaba viendo,
¿se le ofreció de manera simple? ¿O tuvo que volver a navegar para
encontrarla?
Navegación
4. ¿Existen elementos dentro de las páginas, que le permitan saber
exactamente dónde se encuentra dentro de este sitio y cómo volver
atrás sin usar los botones del programa navegador?
5. ¿Logra distinguir gráficamente los enlaces visitados de aquellos que no
ha visitado aún?
Gráficas Web
5. ¿Le pareció adecuada la forma en que se muestran las imágenes en
el sitio web? ¿Son nítidas? ¿Son adecuadas para representar el
contenido del que trata el sitio?
89
6. ¿Las imágenes grandes se demoraron más de lo esperado? ¿Tuvo que
seguir navegando sin que llegaran a mostrarse completamente?
¿Cree que el sitio es muy lento?
7. ¿Considera que gráficamente el sitio está equilibrado, muy simple o
recargado?
Búsqueda
3. ¿Si desea buscar una noticia en específico que no aparece a simple
vista, como lo haría, y donde se encuentra dicha opción?
Utilidad
5. ¿Tras una primera mirada, le queda claro cuál es el objetivo del sitio?
¿Qué contenidos y servicios ofrece? ¿Los puede enumerar?
6. ¿Cree que los contenidos y servicios que se ofrecen en este sitio son de
utilidad para su caso personal?
7. ¿Qué es lo que más te llamó la atención positivamente o
negativamente de la utilidad que ofrece el sitio web?
90
6.4. Anexo 4 – Código Fuente – Maquetado HTML5 – index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Universidad Técnica de Machala</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/ global.css"/>
<link rel="stylesheet" type="text/css" href="css/ alterna.css" id="pagesheet"/>
<script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="scripts/museutils.js" type="text/javascript"></script>
<script src="scripts/whatinput.js" type="text/javascript"></script>
<script src="scripts/jquery.musemenu.js" type="text/javascript"></script>
<script src="scripts/webpro.js" type="text/javascript"></script>
<script src="scripts/musewpslideshow.js" type="text/javascript"></script>
<script src="scripts/jquery.museoverlay.js " type="text/javascript"></script>
<script src="scripts/touchswipe.js" type="text/javascript"></script>
<script src="scripts/jquery.watch.js" type="text/javascript"></script>
</head>
<body>
<div class="clearfix borderbox" id="page"><!-- column -->
<div class="position_content" id="page_position_content">
<div class="clearfix colelem" id="pu4004"><!-- group -->
<div class="clip_frame grpelem" id="u4004"><!-- image -->
<img class="block" id="u4004_img" src="images/logoh-utmach.png" alt=""
data-image-width="361" data-image-height="100"/>
</div>
<div class="clearfix grpelem" id="pu4006"><!-- column -->
<div class="clearfix colelem" id="u4006"><!-- group -->
<div class="grpelem" id="u4009"><!-- custom html -->
<input type="text" name="LastName" value="Buscar">
</div>
</div>
<div class="clearfix colelem" id="pu4002"><!-- group -->
<div class="clip_frame grpelem" id="u4002"><!-- image -->
<img class="block" id="u4002_img" src="images/fb-on.jpg" alt="" data-
image-width="34" data-image-height="34"/>
</div>
<div class="clip_frame grpelem" id="u4139"><!-- image -->
<img class="block" id="u4139_img" src="images/tw-on.jpg" alt="" data-
image-width="34" data-image-height="34"/>
</div>
<div class="clip_frame grpelem" id="u4137"><!-- image -->
<img class="block" id="u4137_img" src="images/gplus-on.jpg" alt="" data-
image-width="34" data-image-height="34"/>
</div>
91
<div class="clip_frame grpelem" id="u4007"><!-- image -->
<img class="block" id="u4007_img" src="images/youtube_logo_detail.jpg"
alt="" data-image-width="34" data-image-height="34"/>
</div>
</div>
</div>
</div>
<nav class="MenuBar clearfix colelem" id="menuu3945"><!-- horizontal box -
->
<div class="MenuItemContainer clearfix grpelem" id="u3953"><!-- vertical
box -->
<div class="MenuItem MenuItemWithSubMenu clearfix colelem"
id="u3954"><!-- horizontal box -->
<div class="MenuItemLabel NoWrap clearfix grpelem" id="u3956-4"><!--
content -->
<p>Inicio</p>
</div>
</div>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u3974"><!-- vertical
box -->
<div class="MenuItem MenuItemWithSubMenu clearfix colelem"
id="u3977"><!-- horizontal box -->
<div class="MenuItemLabel NoWrap clearfix grpelem" id="u3978-4"><!--
content -->
<p>UTMach</p>
</div>
</div>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u3988"><!-- vertical
box -->
<div class="MenuItem MenuItemWithSubMenu clearfix colelem"
id="u3991"><!-- horizontal box -->
<div class="MenuItemLabel NoWrap clearfix grpelem" id="u3992-4"><!--
content -->
<p>Oferta Académica</p>
</div>
</div>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u3995"><!-- vertical
box -->
<div class="MenuItem MenuItemWithSubMenu clearfix colelem"
id="u3998"><!-- horizontal box -->
<div class="MenuItemLabel NoWrap clearfix grpelem" id="u4000-4"><!--
content -->
<p>Investigación</p>
</div>
</div>
</div>
92
<div class="MenuItemContainer clearfix grpelem" id="u3946"><!-- vertical
box -->
<div class="MenuItem MenuItemWithSubMenu clearfix colelem"
id="u3949"><!-- horizontal box -->
<div class="MenuItemLabel NoWrap clearfix grpelem" id="u3952-4"><!--
content -->
<p>Servicios</p>
</div>
</div>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u3981"><!-- vertical
box -->
<div class="MenuItem MenuItemWithSubMenu clearfix colelem"
id="u3984"><!-- horizontal box -->
<div class="MenuItemLabel NoWrap clearfix grpelem" id="u3986-4"><!--
content -->
<p>Titulación</p>
</div>
</div>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u3967"><!-- vertical
box -->
<div class="MenuItem MenuItemWithSubMenu clearfix colelem"
id="u3970"><!-- horizontal box -->
<div class="MenuItemLabel NoWrap clearfix grpelem" id="u3972-4"><!--
content -->
<p>Contactos</p>
</div>
</div>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u3960"><!-- vertical
box -->
<div class="MenuItem MenuItemWithSubMenu clearfix colelem"
id="u3963"><!-- horizontal box -->
<div class="MenuItemLabel NoWrap clearfix grpelem" id="u3966-4"><!--
content -->
<p>Transparencia</p>
</div>
</div>
</div>
</nav>
<div class="SlideShowWidget clearfix colelem" id="slideshowu4011"><!--
none box -->
<div class="popup_anchor" id="u4030popup">
<div class="SlideShowContentPanel clearfix" id="u4030"><!-- stack box -->
<div class="SSSlide clip_frame grpelem" id="u4033"><!-- image -->
<img class="block ImageInclude" id="u4033_img" data-
src="images/galardones_web.jpg" src="images/blank.gif" alt="" data-
width="877" data-height="290"/>
</div>
93
<div class="SSSlide invi clip_frame grpelem" id="u4035"><!-- image -->
<img class="block ImageInclude" id="u4035_img" data-
src="images/banner_bioterio-crop-u4035.jpg" src="images/blank.gif" alt=""
data-width="920" data-height="300"/>
</div>
<div class="SSSlide invi clip_frame grpelem" id="u4031"><!-- image -->
<img class="block ImageInclude" id="u4031_img" data-
src="images/vincopp2017-crop-u4031.jpg" src="images/blank.gif" alt="" data-
width="920" data-height="300"/>
</div>
</div>
</div>
<div class="popup_anchor" id="u4025popup">
<div class="SlideShowCaptionPanel clearfix" id="u4025"><!-- stack box -->
<div class="SSSlideCaption clearfix grpelem" id="u4027-4"><!-- content -->
<p>Galardones UTMACH 2016, Solón Auditorium UTMACH</p>
</div>
<div class="SSSlideCaption invi clearfix grpelem" id="u4028-4"><!-- content
-->
<p>Inauguración Del Biomódulo Bioterio</p>
</div>
<div class="SSSlideCaption invi clearfix grpelem" id="u4026-4"><!-- content
-->
<p>Presentación de Proyectos de Vinculación con la Sociedad 2017</p>
</div>
</div>
</div>
<div class="popup_anchor" id="u4015-4popup">
<div class="SlideShowLabel SSSlideCount clearfix" id="u4015-4"><!-- content
-->
<p><span id="u4015">2 - 3</span></p>
</div>
</div>
<div class="popup_anchor" id="u4029-4popup">
<div class="SSPreviousButton clearfix" id="u4029-4"><!-- content -->
<p><span id="u4029"><</span></p>
</div>
</div>
<div class="popup_anchor" id="u4016-4popup">
<div class="SSNextButton clearfix" id="u4016-4"><!-- content -->
<p>></p>
</div>
</div>
</div>
<div class="clearfix colelem" id="u3927"><!-- group -->
<div class="clearfix grpelem" id="pu3928"><!-- group -->
<div class="grpelem" id="u3928"><!-- simple frame --></div>
<div class="clip_frame grpelem" id="u3942"><!-- image -->
<img class="block" id="u3942_img" src="images/siutmach.jpg" alt="" data-
image-width="140" data-image-height="140"/>
94
</div>
</div>
<div class="clearfix grpelem" id="pu3931"><!-- group -->
<div class="grpelem" id="u3931"><!-- simple frame --></div>
<div class="clip_frame grpelem" id="u3938"><!-- image -->
<img class="block" id="u3938_img" src="images/aulavirtual.jpg" alt=""
data-image-width="140" data-image-height="140"/>
</div>
</div>
<div class="clearfix grpelem" id="pu3944"><!-- group -->
<div class="grpelem" id="u3944"><!-- simple frame --></div>
<div class="clip_frame grpelem" id="u3936"><!-- image -->
<img class="block" id="u3936_img" src="images/biblioteca.jpg" alt="" data-
image-width="140" data-image-height="140"/>
</div>
</div>
<div class="clearfix grpelem" id="pu3932"><!-- group -->
<div class="grpelem" id="u3932"><!-- simple frame --></div>
<div class="clip_frame grpelem" id="u3940"><!-- image -->
<img class="block" id="u3940_img" src="images/correo.jpg" alt="" data-
image-width="140" data-image-height="140"/>
</div>
</div>
<div class="clearfix grpelem" id="u3933"><!-- group -->
<div class="clip_frame grpelem" id="u3934"><!-- image -->
<img class="block" id="u3934_img" src="images/ube.jpg" alt="" data-
image-width="139" data-image-height="139"/>
</div>
</div>
<div class="clip_frame grpelem" id="u3929"><!-- image -->
<img class="block" id="u3929_img" src="images/graduados.jpg" alt=""
data-image-width="139" data-image-height="139"/>
</div>
</div>
<div class="PamphletWidget clearfix colelem" id="pamphletu4038"><!--
none box -->
<div class="ThumbGroup clearfix grpelem" id="u4039"><!-- none box -->
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4040"><!--
simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4041"><!--
simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4042"><!--
simple frame --></div>
</div>
</div>
95
<div class="popup_anchor" id="u4045popup">
<div class="ContainerGroup clearfix" id="u4045"><!-- stack box -->
<div class="Container clearfix grpelem" id="u4046"><!-- column -->
<div class="clearfix colelem" id="u4049-6"><!-- content -->
<p id="u4049-2"><span class="actAsDiv normal_text" id="u4050"><!--
content --><span class="actAsDiv clip_frame clearfix" id="u4051"><!-- image --
><img class="position_content" id="u4051_img" src="images/aso_2.jpg" alt=""
width="263" height="162"/></span></span>Aso Empleados UTMACH realizará
XXI Jornadas Deportivas</p>
<p id="u4049-4">Organizado por la Asociación de Empleados
Administrativos y de Servicios UTMACH, el próximo sábado 25 de junio del
presente año en el Coliseo de la institución</p>
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4047"><!-- container box -->
<div class="clearfix grpelem" id="u4048-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u4053"><!-- column -->
<div class="clearfix colelem" id="u4054-6"><!-- content -->
<p id="u4054-2"><span class="actAsDiv normal_text" id="u4055"><!--
content --><span class="actAsDiv clip_frame clearfix" id="u4056"><!-- image --
><img class="position_content" id="u4056_img"
src="images/edici%c3%b3n_2.jpg" alt="" width="265"
height="164"/></span></span>UTMACH edita 121 libros elaborados por
docentes</p>
<p id="u4054-4">La Universidad Técnica de Machala se encuentra en
plena impresión de 121 libros elaborados por docentes-investigadores
cumpliendo así uno de los indicadores del criterio Investigación, que evaluará
el CEAACES en las próximos meses.</p>
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4058"><!-- container box -->
<div class="clearfix grpelem" id="u4059-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u4060"><!-- column -->
<div class="clearfix colelem" id="u4063-6"><!-- content -->
<p id="u4063-2"><span class="actAsDiv normal_text" id="u4064"><!--
content --><span class="actAsDiv clip_frame" id="u4065"><!-- image --><img
class="block" id="u4065_img" src="images/policia_2-crop-u4065.jpg" alt=""
width="265" height="150"/></span></span>UTMACH - Policía Comunitaria de
el Cambio mantuvo reunión de trabajo</p>
<p id="u4063-4">Con el objetivo de seguir precautelando la integridad y
seguridad de los estudiantes y servidores de la UTMACH, mantuvieron una
reunión de trabajo con el Jefe de la Policía Comunitaria de El Cambio</p>
96
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4061"><!-- container box -->
<div class="clearfix grpelem" id="u4062-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="PamphletWidget clearfix colelem" id="pamphletu4621"><!--
none box -->
<div class="ThumbGroup clearfix grpelem" id="u4650"><!-- none box -->
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4651"><!--
simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4653"><!--
simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4652"><!--
simple frame --></div>
</div>
</div>
<div class="popup_anchor" id="u4624popup">
<div class="ContainerGroup clearfix" id="u4624"><!-- stack box -->
<div class="Container clearfix grpelem" id="u4639"><!-- column -->
<div class="clearfix colelem" id="u4642-6"><!-- content -->
<p id="u4642-2"><span class="actAsDiv normal_text" id="u4643"><!--
content --><span class="actAsDiv clip_frame clearfix" id="u4644"><!-- image --
><img class="position_content" id="u4644_img" src="images/aso_2.jpg" alt=""
width="263" height="162"/></span></span>Aso Empleados UTMACH realizará
XXI Jornadas Deportivas</p>
<p id="u4642-4">Organizado por la Asociación de Empleados
Administrativos y de Servicios UTMACH, el próximo sábado 25 de junio del
presente año en el Coliseo de la institución</p>
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4640"><!-- container box -->
<div class="clearfix grpelem" id="u4641-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u4625"><!-- column -->
<div class="clearfix colelem" id="u4626-6"><!-- content -->
97
<p id="u4626-2"><span class="actAsDiv normal_text" id="u4627"><!--
content --><span class="actAsDiv clip_frame clearfix" id="u4628"><!-- image --
><img class="position_content" id="u4628_img"
src="images/edici%c3%b3n_2.jpg" alt="" width="265"
height="164"/></span></span>UTMACH edita 121 libros elaborados por
docentes</p>
<p id="u4626-4">La Universidad Técnica de Machala se encuentra en
plena impresión de 121 libros elaborados por docentes-investigadores
cumpliendo así uno de los indicadores del criterio Investigación, que evaluará
el CEAACES en las próximos meses.</p>
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4630"><!-- container box -->
<div class="clearfix grpelem" id="u4631-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u4632"><!-- column -->
<div class="clearfix colelem" id="u4635-6"><!-- content -->
<p id="u4635-2"><span class="actAsDiv normal_text" id="u4636"><!--
content --><span class="actAsDiv clip_frame" id="u4637"><!-- image --><img
class="block" id="u4637_img" src="images/policia_2-crop-u4637.jpg" alt=""
width="265" height="150"/></span></span>UTMACH - Policía Comunitaria de
el Cambio mantuvo reunión de trabajo</p>
<p id="u4635-4">Con el objetivo de seguir precautelando la integridad y
seguridad de los estudiantes y servidores de la UTMACH, mantuvieron una
reunión de trabajo con el Jefe de la Policía Comunitaria de El Cambio</p>
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4633"><!-- container box -->
<div class="clearfix grpelem" id="u4634-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="PamphletWidget clearfix colelem" id="pamphletu4825"><!--
none box -->
<div class="ThumbGroup clearfix grpelem" id="u4852"><!-- none box -->
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4855"><!--
simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4854"><!--
simple frame --></div>
</div>
98
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u4853"><!--
simple frame --></div>
</div>
</div>
<div class="popup_anchor" id="u4830popup">
<div class="ContainerGroup clearfix" id="u4830"><!-- stack box -->
<div class="Container clearfix grpelem" id="u4838"><!-- column -->
<div class="clearfix colelem" id="u4841-6"><!-- content -->
<p id="u4841-2"><span class="actAsDiv normal_text" id="u4842"><!--
content --><span class="actAsDiv clip_frame clearfix" id="u4843"><!-- image --
><img class="position_content" id="u4843_img" src="images/aso_2.jpg" alt=""
width="263" height="162"/></span></span>Aso Empleados UTMACH realizará
XXI Jornadas Deportivas</p>
<p id="u4841-4">Organizado por la Asociación de Empleados
Administrativos y de Servicios UTMACH, el próximo sábado 25 de junio del
presente año en el Coliseo de la institución</p>
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4839"><!-- container box -->
<div class="clearfix grpelem" id="u4840-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u4845"><!-- column -->
<div class="clearfix colelem" id="u4846-6"><!-- content -->
<p id="u4846-2"><span class="actAsDiv normal_text" id="u4847"><!--
content --><span class="actAsDiv clip_frame clearfix" id="u4848"><!-- image --
><img class="position_content" id="u4848_img"
src="images/edici%c3%b3n_2.jpg" alt="" width="265"
height="164"/></span></span>UTMACH edita 121 libros elaborados por
docentes</p>
<p id="u4846-4">La Universidad Técnica de Machala se encuentra en
plena impresión de 121 libros elaborados por docentes-investigadores
cumpliendo así uno de los indicadores del criterio Investigación, que evaluará
el CEAACES en las próximos meses.</p>
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4850"><!-- container box -->
<div class="clearfix grpelem" id="u4851-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u4831"><!-- column -->
<div class="clearfix colelem" id="u4832-6"><!-- content -->
<p id="u4832-2"><span class="actAsDiv normal_text" id="u4833"><!--
content --><span class="actAsDiv clip_frame" id="u4834"><!-- image --><img
class="block" id="u4834_img" src="images/policia_2-crop-u4834.jpg" alt=""
99
width="265" height="150"/></span></span>UTMACH - Policía Comunitaria de
el Cambio mantuvo reunión de trabajo</p>
<p id="u4832-4">Con el objetivo de seguir precautelando la integridad y
seguridad de los estudiantes y servidores de la UTMACH, mantuvieron una
reunión de trabajo con el Jefe de la Policía Comunitaria de El Cambio</p>
</div>
<div class="Button rounded-corners clearfix colelem"
id="buttonu4836"><!-- container box -->
<div class="clearfix grpelem" id="u4837-4"><!-- content -->
<p>Leer más...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="verticalspacer"></div>
<div class="browser_width colelem" id="u4010-bw">
<div id="u4010"><!-- group -->
<div class="clearfix" id="u4010_align_to_page">
<div class="clearfix grpelem" id="u3926-4"><!-- content -->
<h2>Copyright Alexander Paladines - 2016 | UNIVERSIDAD TÉCNICA DE
MACHALA | Av. Panamericana Km. 5 1/2 vía a Pasaje</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
100
6.5. Anexo 5 – Hoja de Estilos – global.css
html
{
min-height: 100%;
min-width: 100%;
-ms-text-size-adjust: none;
}
body,div,dl,dt,dd,ul,ol,li,nav,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,i
nput,button,textarea,p,blockquote,th,td,a
{
margin: 0px;
padding: 0px;
border-width: 0px;
border-style: solid;
border-color: transparent;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
background-repeat: no-repeat;
}
.transition
{
-webkit-transition-property: background-image,background-
position,background-color,border-color,border-radius,color,font-size,font-
style,font-weight,letter-spacing,line-height,text-align,box-shadow,text-
shadow,opacity;
transition-property: background-image,background-
position,background-color,border-color,border-radius,color,font-size,font-
style,font-weight,letter-spacing,line-height,text-align,box-shadow,text-
shadow,opacity;
}
.transition *
{
-webkit-transition: inherit;
transition: inherit;
}
table
{
border-collapse: collapse;
border-spacing: 0px;
}
fieldset,img
101
{
border: 0px;
border-style: solid;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}
address,caption,cite,code,dfn,em,strong,th,var,optgroup
{
font-style: inherit;
font-weight: inherit;
}
del,ins
{
text-decoration: none;
}
li
{
list-style: none;
}
caption,th
{
text-align: left;
}
h1,h2,h3,h4,h5,h6
{
font-size: 100%;
font-weight: inherit;
}
input,button,textarea,select,optgroup,option
{
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
body
{
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
text-align: left;
font-size: 14px;
line-height: 17px;
102
word-wrap: break-word;
text-rendering: optimizeLegibility;/* kerning, primarily */
-moz-font-feature-settings: 'liga';
-ms-font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
}
a:link
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
text-decoration: underline;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
a:active
{
color: #EE0000;
text-decoration: underline;
}
a.nontext /* used to override default properties of 'a' tag */
{
color: black;
text-decoration: none;
font-style: normal;
font-weight: normal;
}
.normal_text
{
color: #000000;
direction: ltr;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
letter-spacing: 0px;
line-height: 17px;
103
text-align: left;
text-decoration: none;
text-indent: 0px;
text-transform: none;
vertical-align: 0px;
padding: 0px;
}
.list0 li:before
{
position: absolute;
right: 100%;
letter-spacing: 0px;
text-decoration: none;
font-weight: normal;
font-style: normal;
}
.rtl-list li:before
{
right: auto;
left: 100%;
}
.nls-None > li:before,.nls-None .list3 > li:before,.nls-None .list6 > li:before
{
margin-right: 6px;
content: '•';
}
.nls-None .list1 > li:before,.nls-None .list4 > li:before,.nls-None .list7 > li:before
{
margin-right: 6px;
content: '○';
}
.nls-None,.nls-None .list1,.nls-None .list2,.nls-None .list3,.nls-None .list4,.nls-None
.list5,.nls-None .list6,.nls-None .list7,.nls-None .list8
{
padding-left: 34px;
}
.nls-None.rtl-list,.nls-None .list1.rtl-list,.nls-None .list2.rtl-list,.nls-None .list3.rtl-
list,.nls-None .list4.rtl-list,.nls-None .list5.rtl-list,.nls-None .list6.rtl-list,.nls-None
.list7.rtl-list,.nls-None .list8.rtl-list
{
padding-left: 0px;
padding-right: 34px;
}
104
.nls-None .list2 > li:before,.nls-None .list5 > li:before,.nls-None .list8 > li:before
{
margin-right: 6px;
content: '-';
}
.nls-None.rtl-list > li:before,.nls-None .list1.rtl-list > li:before,.nls-None .list2.rtl-list >
li:before,.nls-None .list3.rtl-list > li:before,.nls-None .list4.rtl-list > li:before,.nls-
None .list5.rtl-list > li:before,.nls-None .list6.rtl-list > li:before,.nls-None .list7.rtl-list >
li:before,.nls-None .list8.rtl-list > li:before
{
margin-right: 0px;
margin-left: 6px;
}
.TabbedPanelsTab
{
white-space: nowrap;
}
.MenuBar .MenuBarView,.MenuBar .SubMenuView /* Resets for ul and li in
menus */
{
display: block;
list-style: none;
}
.MenuBar .SubMenu
{
display: none;
position: absolute;
}
.NoWrap
{
white-space: nowrap;
word-wrap: normal;
}
.rootelem /* the root of the artwork tree */
{
margin-left: auto;
margin-right: auto;
}
.colelem /* a child element of a column */
{
display: inline;
float: left;
clear: both;
105
}
.clearfix:after /* force a container to fit around floated items */
{
content: "\0020";
visibility: hidden;
display: block;
height: 0px;
clear: both;
}
*:first-child+html .clearfix /* IE7 */
{
zoom: 1;
}
.clip_frame /* used to clip the contents as in the case of an image frame */
{
overflow: hidden;
}
.popup_anchor /* anchors an abspos popup */
{
position: relative;
width: 0px;
height: 0px;
}
.popup_element
{
z-index: 100000;
}
.svg
{
display: block;
vertical-align: top;
}
span.wrap /* used to force wrap after floated array when nested inside a
paragraph */
{
content: '';
clear: left;
display: block;
}
span.actAsInlineDiv /* used to simulate a DIV with inline display when already
nested inside a paragraph */
{
106
display: inline-block;
}
.position_content,.excludeFromNormalFlow /* used when child content is
larger than parent */
{
float: left;
}
.preload_images /* used to preload images used in non-default states */
{
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
.preload /* used to specifiy the dimension of preload item */
{
height: 1px;
width: 1px;
}
.animateStates
{
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
[data-whatinput="mouse"] *:focus,[data-whatinput="touch"]
*:focus,input:focus,textarea:focus
{
outline: none;
}
textarea
{
resize: none;
overflow: auto;
}
.fld-prompt /* form placeholders cursor behavior */
{
pointer-events: none;
}
107
.wrapped-input /* form inputs & placeholders let div styling show thru */
{
position: absolute;
top: 0px;
left: 0px;
background: transparent;
border: none;
}
.submit-btn /* form submit buttons on top of sibling elements */
{
z-index: 50000;
cursor: pointer;
}
.anchor_item /* used to specify anchor properties */
{
width: 22px;
height: 18px;
}
.MenuBar .SubMenuVisible,.MenuBarVertical .SubMenuVisible,.MenuBar
.SubMenu
.SubMenuVisible,.popup_element.Active,span.actAsPara,.actAsDiv,a.nonblo
ck.nontext,img.block
{
display: block;
}
.ose_ei
{
visibility: hidden;
z-index: 0;
}
.widget_invisible,.js .invi,.js .mse_pre_init,.js .an_invi /* used to hide the widget
before loaded */
{
visibility: hidden;
}
.no_vert_scroll
{
overflow-y: hidden;
}
.always_vert_scroll
{
overflow-y: scroll;
}
108
.always_horz_scroll
{
overflow-x: scroll;
}
.fullscreen
{
overflow: hidden;
left: 0px;
top: 0px;
position: fixed;
height: 100%;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.fullwidth
{
position: absolute;
}
.borderbox
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.scroll_wrapper
{
position: absolute;
overflow: auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.browser_width > *
{
position: absolute;
109
left: 0px;
right: 0px;
}
.list0 li,.MenuBar .MenuItemContainer,.SlideShowContentPanel .fullscreen img
{
position: relative;
}
.grpelem,.accordion_wrapper /* a child element of a group */
{
display: inline;
float: left;
}
.fld-checkbox input[type=checkbox],.fld-radiobutton input[type=radio] /*
Hide native checkbox */
{
position: absolute;
overflow: hidden;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
width: 1px;
margin: -1px;
padding: 0px;
border: 0px;
}
.fld-checkbox input[type=checkbox] + label,.fld-radiobutton
input[type=radio] + label
{
display: inline-block;
background-repeat: no-repeat;
cursor: pointer;
float: left;
width: 100%;
height: 100%;
}
.pointer_cursor,.fld-recaptcha-mode,.fld-recaptcha-refresh,.fld-recaptcha-
help
{
cursor: pointer;
}
p,h1,h2,h3,h4,h5,h6,ol,ul,span.actAsPara /* disable Android font boosting */
{
max-height: 1000000px;
}
110
.superscript
{
vertical-align: super;
font-size: 66%;
line-height: 0px;
}
.subscript
{
vertical-align: sub;
font-size: 66%;
line-height: 0px;
}
.horizontalSlideShow /* disable left-right panning on horizondal slide shows */
{
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.verticalSlideShow /* disable up-down panning on vertical slide shows */
{
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.colelem100,.verticalspacer /* a child element of a column that is 100% width
*/
{
clear: both;
}
.popup_element.Inactive,.js .disn,.hidden,.breakpoint
{
display: none;
}
#muse_css_mq
{
position: absolute;
display: none;
background-color: #FFFFFE;
}
.fluid_height_spacer
{
position: static;
width: 0.01px;
float: left;
}
111
@media screen and (-webkit-min-device-pixel-ratio:0)
{
body
{
text-rendering: auto;
}
}
112
6.6. Anexo 6 – Captura de pantalla Prototipo Alta Fidelidad
http://utmach.plus.ec
113
6.7. Anexo 7 – Análisis del Manual de Identidad Visual Corporativa UTMACH
Análisis del Manual de Identidad Visual Corporativa de la UTMach en su sección
número 5 –Sitio WEB-, aprobado mediante el Honorable Consejo Universitario el 6
Octubre de 2015, mediante resolución No.488/2015.
URL Pública:
https://www.utmachala.edu.ec/portal/public/general/listdoc/hl/es/item/103-786-787-801
Observación general
El objeto de estudio de esta investigación, parte de la página 134 del manual
de identidad visual, en donde se hace referencia a los elementos que posé
el sitio web, como lo son: Imagotipo, top, header o barra de navegación,
contenido, footer, tipografía, responsive web design, mapa de navegación y
termina en cromática hasta la página 140.
Análisis Heurístico
Desde la página 134 en referencia al imagotipo, no hay nada que acotar, ya
que solo se hace referencia al manejo de la marca en forma general dentro
del sitio web, en la página 135 ya se menciona la estructura de la página
web, siendo así el Top y el Header o Barra de Navegación, en ninguno de
estos dos elementos se justifica el porque del contenido de cada uno, solo se
menciona los elementos que llevarán el Top y Header.
En la página 136 se menciona el Contenido y el Footer, de igual forma no se
menciona el porque de los elementos seleccionados para cada sección. En
la página 137 en cuanto al Mapa de Navegación, se propone una
navegación muy común y lineal, la cual no tiene ninguna justificación de
porque dichos elementos forman parte de la navegación principal del sitio
web institucional de la UTMach.
En la página 138 se menciona la tipografía a usar, esto no forma parte del
análisis, ya que es un elemento propio del diseño como tal, este análisis más
está basado en la arquitectura de la información en base al usuario, por lo
que es descartado este punto. La página 139 de Responsive web design solo
muestra una descripción muy breve de lo que es web responsive, seguido de
114
una imagen con cuatro elementos: Monitor de PC, laptop, tablet y dispositivo
móvil, mostrando una propuesta gráfica adaptable a distintas pantallas. No
se da ninguna justificación del porque es necesario el web responsive para
un sitio web institucional.
Por último la página 140 trata sobre la cromática, es decir, que colores son los
oficiales a utilizar como parte de la interfaz gráfica del sitio web, sus valores
están dados en RGB y Hexadecimal distribuidos en TOP, HEADER, CONTENIDO
y FOOTER.
Sin más contenido de la sección de Sitio Web desde la página 134 a la 140,
se ha podido comprobar que no existe ningún tipo de proceso de diseño
para la justificación de cada uno de los elementos mencionados en el
manual. Es más, no se menciona cual fue la metodología a seguir para llegar
a dicha arquitectura de la información.
Conclusión
Teniendo en cuenta que un manual de identidad es la razón de ser en este
caso de la institución UTMach, de cómo se muestra la marca, si es necesario
justificar el porqué de cada elemento. De pronto subjetivo a criterio de los
autores del Manual de Identidad Visual, en la que la arquitectura de la
información propuesta lleva un estudio por detrás no implícito en el manual
pero si como proceso de diseño. Este análisis cree firmemente que todo debe
ser justificado, descrito dentro del manual o anexado al mismo con todo el
estudio correspondiente para llegar a ello, más aún cuando de una
Institución Educativa se trata.