Академический Документы
Профессиональный Документы
Культура Документы
Directora
Gloria Luca Giraldo Gmez
I.I, M.Sc, Ph.D
Anlisis, diseo y construccin de software en la web con UN-MTODO para una experiencia de usuario satisfactoria
by Daniel Gonzlez is licensed under a Creative Commons Reconocimiento 4.0 Internacional License.
ii
CONTENIDO
Pg.
LISTA DE TABLAS
LISTA DE ILUSTRACIONES
LISTA DE ANEXOS
GLOSARIO
RESUMEN
13
ABSTRACT
14
RESUMO
15
INTRODUCCIN
16
18
18
18
19
20
21
MARCO TERICO
2.1 LA INTERACCIN HUMANO - COMPUTADOR
2.2 DISEO CENTRADO EN EL USUARIO - DISEO CENTRADO EN EL USO.
2.3 INGENIERA DE SOFTWARE
2.3.2 Diferencias entre la Ingeniera de Software y la Interaccin HumanoComputador.
2.4 CALIDAD DE SOFTWARE
2.5 CMO REALMENTE USAMOS LA WEB?
2.5.1 Diferencias entre los Sitios y las Aplicaciones Web
2.6 DEFINICIN: USABILIDAD.
2.7 DEFINICIN: EXPERIENCIA DE USUARIO (UX)
2.7.1 Elementos de la Experiencia de Usuario
2.8 DEFINICIN: SATISFACCIN DE USO.
2.8.1 Factores del diseo que Influyen en la Satisfaccin de Uso.
2.9 UTILIDAD
2.9.1 Relacin entre Utilidad e Ingeniera de Requisitos.
2.9.1 UN-Mtodo: Metodologa de la Universidad Nacional de Colombia, Sede
Medelln, para la Elicitacin de Requisitos de Software.
2.10 FUNCIONALIDAD
2.10.1 Funcionalidad y Usabilidad
2.10.2 Errores del Software y Mantenimiento.
2.12 DISEO DE INTERACCIN: CMO ENCONTRAR Y MANIPULAR LA
INFORMACIN?
21
22
25
26
28
30
32
33
36
39
41
42
43
44
47
49
50
51
54
2.11 ACCESIBILIDAD
2.11.1 Pautas de Evaluacin de la Accesibilidad en la Web. (W3C)
2.11.1.1 Proporcionar alternativas para el contenido.
2.11.1.2 Contraste de Color.
2.11.1.3 Marcadores y Hojas de Estilo (CSS)
2.11.1.4 Preferencias de Idioma
2.11.1.5 Creacin de tablas que se transformen de acuerdo al contenido.
2.11.1.6 Manejo de JavaScript
2.11.1.7 El usuario tiene el control sobre los cambios de contenido.
2.11.1.8 Accesibilidad directa de las interfaces.
2.11.1.9 Diseo Independiente del Dispositivo.
Evaluacin Heurstica
Paseo Cognitivo (Cognitive Walkthrough)
Inspeccin de Estndares.
Seguimiento Interdisciplinario.
54
55
56
56
58
59
59
59
60
60
61
62
63
64
65
65
65
66
66
66
67
67
68
70
73
74
76
77
78
78
80
81
81
81
82
2.15.2.1 Metodologas
85
85
86
PROTOTIPO DE APLICACIN
91
91
92
93
94
95
ANLISIS DE RESULTADOS
95
96
96
98
102
103
103
105
108
CONCLUSIONES
110
BIBLIOGRAFA
112
ANEXOS
117
LISTA DE TABLAS
Pg.
TABLA 1: DIFERENCIAS ENTRE EL DISEO CENTRADO EN EL USUARIO, Y EL DISEO
CENTRADO EN EL USO.
24
TABLA 2: DIFERENCIAS ENTRE LA INGENIERA DE SOFTWARE Y LA INTERACCIN
HUMANO-COMPUTADOR
28
TABLA 3: TABLA COMPARATIVA ENTRE SITIO WEB Y APLICACIN WEB.
33
TABLA 4: CRITERIOS PARA LA CLASIFICACIN DE LOS FACTORES DE DISEO
42
TABLA 5: LEYES BSICAS DE LA COMPOSICIN POR GESTALT.
71
TABLA 6: EFECTOS CROMTICOS ASOCIADOS A LOS COLORES EN EL DISEO WEB. 75
TABLA 7: METODOLOGAS DE EVALUACIN DE LA USABILIDAD
84
TABLA 8: TEST PROPUESTO PARA LA MEDICIN DE LA EXPERIENCIA DE USUARIO 90
TABLA 9: PORCENTAJE DE CUMPLIMIENTO DE ACCESIBILIDAD POR CASO DE USO. 97
TABLA 10: TABLA RESUMEN DE LA EVALUACIN CON USUARIOS DEL PROTOTIPO
ANTIGUO.
99
TABLA 11: RESULTADOS DE LA EVALUACIN POR USUARIOS - PROTOTIPO ANTIGUO
101
TABLA 12: TABLA DEL CUMPLIMIENTO DE LOS ESTNDARES DE LA W3C PRIORIDAD A PROTOTIPO NUEVO
103
TABLA 13: TABLA DEL CUMPLIMIENTO DE LOS ESTNDARES DE LA W3C PRIORIDAD
AA - PROTOTIPO NUEVO
105
TABLA 14: TABLA RESUMEN DE LA EVALUACIN CON USUARIOS DEL PROTOTIPO
NUEVO.
105
TABLA 15: DIAGRAMAS Y RESULTADOS DE LA EVALUACIN CON USUARIOS DE
PROTOTIPO NUEVO
107
TABLA 16: RESUMEN DE LAS PAUTAS DE ACCESIBILIDAD ESTABLECIDAS POR LA W3C
DE PRIORIDAD 1 (A) (WCAG 1.0)
121
TABLA 17: RESUMEN DE LAS PAUTAS DE ACCESIBILIDAD ESTABLECIDAS POR LA W3C
DE PRIORIDAD 1 (AA) (WCAG 1.0)
124
TABLA 18: RESUMEN DE LAS PAUTAS DE ACCESIBILIDAD ESTABLECIDAS POR LA W3C
DE PRIORIDAD 1 (AAA) (WCAG 1.0)
125
TABLA 19: RELACIN ENTRE LOS FACTORES DE DISEO, Y LOS ROLES
PROFESIONALES
127
LISTA DE ILUSTRACIONES
Pg.
ILUSTRACIN 1: MBITOS DEL TRABAJO DE GRADO.
17
ILUSTRACIN 2: ACTIVIDADES DEL DISEO CENTRADO EN EL USUARIO (ISO-13407) 23
ILUSTRACIN 3: MODELO EN CASCADA DE LA INGENIERA DE SOFTWARE
25
ILUSTRACIN 4: CARACTERSTICAS DE LA CALIDAD DEL SOFTWARE SEGN EL
ESTNDAR ISO 9126
29
ILUSTRACIN 5: CARACTERSTICAS DE LA CALIDAD DE USO SEGN EL ESTNDAR ISO
9126
30
ILUSTRACIN 6: ASPECTOS Y SUBDIVISIONES DE LA EXPERIENCIA DE USUARIO
38
ILUSTRACIN 7: ELEMENTOS DE LA EXPERIENCIA DE USUARIO SEGN GARRETT. 40
ILUSTRACIN 8: FACTORES DE DISEO ORIENTADOS A LA SATISFACCIN DE USO 43
ILUSTRACIN 9: IMPACTO DE LAS MODIFICACIONES DEL PRODUCTO, DEPENDIENDO
DE LA ETAPA DE DESARROLLO.
47
ILUSTRACIN 10: PRINCIPALES CAUSAS DE LOS DEFECTOS DEL SOFTWARE
53
ILUSTRACIN 11: DIAGRAMA QUE ILUSTRA EL PRINCIPIO DE LA LEY DE FITTS.
57
ILUSTRACIN 12: GUA VISUAL A TRAVS DE UNA JERARQUA VISUAL.
72
ILUSTRACIN 13: DIAGRAMA DE CLASES (PROTOTIPO DIMA)
92
ILUSTRACIN 14: DIAGRAMA ENTIDAD- ASOCIACIN (PROTOTIPO DIMA)
93
ILUSTRACIN 15: MODELO RELACIONAL
94
ILUSTRACIN 16: CAPTURA DE PANTALLA DEL PROTOTIPO ANTIGUO
95
ILUSTRACIN 17: PORCENTAJE DE CUMPLIMIENTO DE LOS ESTNDARES DE
ACCESIBILIDAD - PRIORIDAD A
97
ILUSTRACIN 18: CUMPLIMIENTO DE LOS ESTNDARES DE ACCESIBILIDAD,
PRIORIDAD AA POR EL PROTOTIPO ANTIGUO.
98
ILUSTRACIN 19: CAPTURAS DE PANTALLA DEL PROTOTIPO PROPUESTO DESDE
VARIOS DISPOSITIVOS
102
ILUSTRACIN 20: GRFICO DEL PORCENTAJE DE CUMPLIMIENTO-INCUMPLIMIENTO
DE LOS ESTNDARES DE LA W3C. PROTOTIPO NUEVO.
104
ILUSTRACIN 21: GRFICO DEL PORCENTAJE DE CUMPLIMIENTO DE LOS
ESTNDARES DE ACCESIBILIDAD - PRIORIDAD AA - PROTOTIPO NUEVO
104
ILUSTRACIN 22: ELEMENTOS DE LA EXPERIENCIA DE USUARIO (GRFICO RESUMEN)
117
ILUSTRACIN 23: ESQUEMA GENERAL DE LA METODOLOGA UN-MTODO. TOMADO
DE: (ARANGO, F; ZAPATA, C, M; 2006)
118
ILUSTRACIN 24: DIAGRAMA DE CAUSA-EFECTO, CUYAS CAUSAS (EN ROJO) SE
SATISFACEN CON LA SOLUCIN PROPUESTA.
119
ILUSTRACIN 25: RESOLUCIN DE PANTALLA DE DISPOSITIVOS MS COMUNES. 126
ILUSTRACIN 26: CUADRO EXPLICATIVO DE LA LEGIBILIDAD DEL TEXTO SEGN SU
COLOR POR: EVA HELLER
127
ILUSTRACIN 27: MODELO DETALLADO DE LA METODOLOGA DE JAKOB NIELSEN 128
ILUSTRACIN 28: ESQUEMA DE LA METODOLOGA DUTCH - INGENIERA DE
USABILIDAD
130
ILUSTRACIN 29: CICLO DE VIDA DE LA INGENIERA DE USABILIDAD PROPUESTO POR
D.J. MAYHEW
131
ILUSTRACIN 30: MODELO POR FASES DEL MPIU+A
133
LISTA DE ANEXOS
Pg.
ANEXO A: ELEMENTOS DE LA EXPERIENCIA DE USUARIO
117
ANEXO B - ESQUEMA GENERAL DE LA METODOLOGA UN-MTODO
118
ANEXO C: PROPUESTA DE SOLUCIN CREATIVA CON UN-MTODO
119
ANEXO D EVALUACIN DE LAS PAUTAS DE ACCESIBILIDAD EN LA WEB, SEGN LA
WCAG VERSIN 1.0
120
ANEXO E - TAMAOS DE PANTALLA MS COMUNES
126
ANEXO F - LEGIBILIDAD DE LOS TEXTOS SEGN SU COLOR
127
ANEXO G - RELACIN FACTORES DE DISEO- ROLES PROFESIONALES
127
ANEXO H METODOLOGAS DE LA INGENIERA DE USABILIDAD
128
ANEXO I: CASOS DE USO ASOCIADOS AL PROTOTIPO
135
GLOSARIO
accesibilidad.
1. f. Cualidad de accesible.
aceptabilidad.
1. f. Cualidad de aceptable.
2. f. Ling. Conjunto de propiedades gramaticales y semnticas que un
enunciado debe reunir para que resulte comprensible por los hablantes de una
lengua dada.
cualitativo, va. (Del lat. qualitatvus).
1. adj. Que denota cualidad.
cuantificacin.
1. f. Accin y efecto de cuantificar.
2. f. Fil. Expresin de la cantidad (extensin y comprensin) en los enunciados
o juicios, o especialmente en el predicado.
cuantitativo, va. (Del lat. quanttas, -tis).
1. adj. Perteneciente o relativo a la cantidad.
emprico, ca. (Del lat. empircus, que se rige por la experiencia).
1. adj. Perteneciente o relativo a la experiencia.
2. adj. Fundado en ella.
ergonoma.
(Del gr. , obra, trabajo, y -noma).
11
12
RESUMEN
13
ABSTRACT
the
concepts
analyzed
from
the
theoretical
framework,
are
14
RESUMO
Usurio,
satisfao
de
uso,
utilidade,
usabilidade,
funcionalidade,
15
INTRODUCCIN
16
17
1.2 OBJETIVOS
18
19
20
MARCO TERICO
A diferencia de los productos tangibles, las aplica las aplicaciones de software
desarrolladas en la web, definen gran parte de su xito o fracaso a la
satisfaccin del usuario final. En caso de que ste no consiga sus objetivos o la
aplicacin no satisface sus necesidades, sencillamente abandonar el sitio, en
busca de otra alternativa. Por esta razn, es de vital importancia que en el
anlisis y construccin del software para la web, se tenga en cuenta el diseo
orientado al usuario para lograr una alta satisfaccin, y adems una mayor
probabilidad de que vuelva a visitar el sitio, o se fidelice con la aplicacin
fcilmente, ya que para el usuario de la web existe como regla principal "si algo
es complicado de utilizar, simplemente no lo uso demasiado". (Krug, 2006)
21
Consistencia.
Dilogo simple y natural.
Reduccin del esfuerzo mental del usuario.
Proporcionar realimentacin adecuada.
Proporcionar mecanismos de navegacin adecuados.
Dejar que el usuario dirija la navegacin.
Presentar informacin clara.
El sistema debe ser amigable.
Reducir el nmero de errores.
La ISO, a travs del estndar 13407, contribuye con los principios bsicos para
la elaboracin de sistemas interactivos, que incorporan el Diseo Centrado en
el Usuario, durante todo el desarrollo. (ISO, 2001). El estndar internacional,
describe cuatro actividades claves: Entender y especificar los contextos de uso,
especificar los requisitos de los usuarios, producir las soluciones de diseo, y
finalmente, evaluar los diseos confrontndolos con los requisitos. En la figura,
se observa el ciclo de desarrollo, basado en las cuatro actividades bsicas.
23
esta tcnica, est principalmente en las tareas que el usuario desea realizar.
Fue planteado por (Constantine & Loockwood, 1999), como una aproximacin
al modelo para el diseo visual e interactivo de las interfaces de usuario,
basadas en la web.
Principalmente, el Diseo Centrado en el Uso, busca la construccin de
modelos precisos, en vez de la iteracin sobre ensayo y error que se observa
en el Diseo Centrado en el Usuario. Para resumir las diferencias entre los dos
trminos, es necesario citar la tabla del trabajo de (Granollers, 2004).
Enfoque
Principal
Dirigido por
Implicacin
del Usuario
Descripcin
Diseado
por
Proceso
Proviene de
Diseo Centrado en el
Diseo Centrado en el Uso.
Usuario
Los usuarios. (Su experiencia y El uso (Mejora de las
satisfaccin de uso)
herramientas para el
cumplimento de las tareas)
La entrada o Input del usuario
Modelos
Alta (Estudio de los Usuarios,
Selectiva (Modelado
Diseo participativo, feedback
Exploratorio, Validacin de
del usuario, usuarios en las
Modelos, Evaluacin de la
pruebas).
Usabilidad con Mtodos de
Inspeccin estructurada)
Usuarios y sus caractersticas
Modelos de relaciones entre
los usuarios y los sistemas.
Prototipo iterativo.
Modelado
Variado, a menudo informal
(bajo nivel de especificacin)
Una evolucin mediante
mtodos de ensayo-error.
Sistemtico y completamente
especificado.
Una derivacin de la
Ingeniera de Software.
24
25
la
cual
ser
profundizada
en
el
captulo
26
Ingeniera de Software
Recursos
Predominan los
especialistas de la
computacin y el desarrollo
de software.
Humanos
Tareas
Dirigidas por la
funcionalidad.
Casos de Uso Se obtienen a partir del
Anlisis de Tareas.
Inter. Humano-Computador
Por lo general, se compone de
profesionales
interdisciplinarios provenientes
de campos del conocimiento
alejados de la ciencia de los
computadores.
Enfocadas por la evaluacin.
Dirigidas por el uso.
Aspectos sociales
relacionados con los factores
La tecnologa.
27
humanos.
Modelos de
proceso
Prototipos
Evaluaciones
Por esta razn, y desde la Ingeniera, se busca la unin de las dos disciplinas,
por medio de una metodologa que permita la evaluacin y medicin de los
aspectos que determinan el uso de las aplicaciones interactivas. De esto, se
profundizar en el captulo de Ingeniera de Usabilidad, y el anexo A.
2.4
CALIDAD DE SOFTWARE
28
Por otro lado, el estndar tambin establece ciertos estndares que influyen
en la calidad de uso, principalmente basadas en las caractersticas de
efectividad, productividad seguridad y satisfaccin.
29
de
software,
es
de
vital
importancia
comprender
el
31
Siendo
as,
surge
la
necesidad
de
comprender
estos
patrones
de
32
Sitio Web
Aplicacin Web
Encontrar Informacin
Casual
Lineal
Contenidos y mens
Formularios
Espacios de Informacin
Arquitectura de Informacin
Diseo de Interaccin
Objetivo
Navegacin
Interfaces
Preocupacin
Tcnicas
Academia Espaola, ya que se traduce directamente dela palabra inglesa Usability, que se
define como la capacidad que tiene un objeto, para ser utilizado por humanos de una manera
fcil y efectiva.
33
sin
terminar
enormemente
frustrado.
(Krug,
2006).
34
35
36
las buenas
experiencias no siempre cuentan con una buena usabilidad pero esta ltima se
convierte en una buena consejera para lograr experiencias positivas. A partir
de la analoga, podemos deducir la gran diferencia que se observa entre la
Usabilidad y la Experiencia del Usuario. Segn la ISO, y como se cit
anteriormente, la Usabilidad se mide segn la eficiencia, eficacia y satisfaccin,
mientras que la experiencia de usuario, segn la ISO 9241, son todos los
aspectos que el usuario siente, por medio de la interaccin con un producto o
servicio. (Standardisation, 2001) Por otro lado, los conceptos de usabilidad, y
experiencia de usuario, se pueden diferenciar segn los objetivos que cumple
cada una en la web. La primera, busca la comodidad del usuario en la
consecucin de sus objetivos, mientras que la segunda busca la felicidad del
usuario antes, durante y despus de utilizar la aplicacin. Adems, la primera
se cuestiona Pudo el usuario cumplir con su objetivo? Mientras que la
segunda se pregunta Tuvo el usuario la mejor experiencia posible?
De lo anterior, y Partiendo de la Interaccin Humano-Computador, es necesario
citar a (D'Hertefelt, 2000), quien afirma que la Experiencia de Usuario,
representa un cambio sustancial del propio concepto de usabilidad, donde el
objetivo no se limita a mejorar el rendimiento del usuario en la interaccin
eficacia, eficiencia y facilidad de aprendizaje, sino que se intenta resolver el
problema estratgico de la utilidad del producto (que el producto sea til y
usable), y el problema psicolgico del placer y diversin de su uso, (que el
producto sea aceptado por el usuario). Con la experiencia de usuario entran
en juego ms factores (como la aceptacin, la credibilidad, la confianza, la
emocin o el placer), pero todos ellos comienzan a mantener una relacin tan
estrecha que el fallo de uno de ellos afecta con determinacin al resto, lo que
eleva el concepto de usabilidad hacia la experiencia de usuario.
37
39
40
41
Higinico
Motivador
Carcter desapercibido
Carcter apercibido
Impiden la desmotivacin
Impiden la frustracin
Provocan satisfaccin
Partiendo de estos criterios, y del trabajo previo de (Zhang & Dran, 2000),
42
2.9
UTILIDAD
43
con
aquellos
desarrolladores,
diseadores
ingenieros
DISEO
CENTRADO EN EL USO.).
Formalmente, los requisitos de una aplicacin, se definen como las
descripciones de cmo el sistema debe comportarse, la informacin acerca del
dominio de aplicacin, las restricciones operativas del sistema y las
44
45
puede llegar a pensar que los requisitos del proyecto cambian continuamente,
y que estos cambios pueden acomodarse fcilmente, ya que el software es
muy flexible, sin saber el impacto de estos cambios a medida que el ciclo de
desarrollo del producto avanza. La siguiente figura, tomada de la tesis doctoral
de (Granollers, 2004), ilustra ese impacto:
46
47
CDM son las siglas de Common Diagnostic Model, que en espaol "Modelo de Diagnstico
Comn".
7
48
solucin.
Comparando
con
la
metodologa
CDM,
UN-Mtodo
49
Conformidad: Son los atributos del software que hacen que el mismo
se adhiera a los estndares o convenciones relativas a la aplicacin o a
regulaciones de tipo legal y prescripciones similares.
50
51
Por esta razn, los errores deben ser invisibles a los usuarios, mientras hacen
uso la aplicacin, y en caso de que ocurran, la sta debe recuperarse
fcilmente. Generalmente, en una aplicacin bien desarrollada, aquellos
errores catastrficos no ocurren. (Nielsen J. , Usability Engineering, 1993).
Generalmente, los fallos ms comunes se presentan en alguna de los
siguientes aspectos:
Paseo Cognitivo
52
11,0%
Interfaz/Hardware
7,8%
6,0%
Interfaz/Software
11,7%
20,2%
Lgica
Manejo de datos
25,7%
10,6%
7,0%
Estndares
53
54
55
una
aproximacin
terica,
basada
en
los
fundamentos
56
57
que el tamao de stas en el Ley de Fitts, es infinito. Por esta razn, las
esquinas son puntos fciles dnde llegar, por lo que comnmente en los
sistemas operativos se les asignan tareas comunes.
A pesar de ser excelentes reas, en el diseo de pginas web, slo sera
efectivo dado el caso que la navegacin se realice en modo pantalla
completa, ya que las aplicaciones web se ejecutan sobre los navegadores, que
poseen interfaz propia, pero es un factor clave del diseo de interaccin.
2.12.3.2 Productividad.
Para (Tognazzini, 1998), las personas son costosas y los computadores
baratos, por lo que es necesario darle prioridad a la productividad del usuario,
sobre la mquina. Por esta razn, propone cuatro tcnicas que ayudan a
mejorar la productividad del usuario, mientras utiliza una aplicacin web:
58
2.12.3.3 Autonoma.
El usuario es el controla la interfaz, por lo que se le debe brindar la posibilidad
de trabajar confortable y confidencialmente (Tognazzini, 1998). En algunas
ocasiones, y por privacidad, algunos controles en las interfaces prohben el
acceso a ciertos usuarios, lo que impide explorar ciertas opciones, por lo que
se deben evitar aquellos enlaces que no estn permitidos dependiendo del rol
de usuario, y as evitar la frustracin del usuario ante la imposibilidad de
navegar por toda la aplicacin.
2.12.3.5 Consistencia.
Para (Tognazzini, 1998), la expectativa que tienen los usuarios acerca del
59
2.12.3.6 Seguridad.
En la lista planteada por (Tognazzini, 1998), este mbito resume cuatro
principios bsicos: La capacidad de exploracin de la interfaz, el seguimiento
del estado de la aplicacin, la proteccin del trabajo del usuario y la
navegacin. Principalmente, se busca que la interfaz sea un entorno para que
el usuario minimice la posibilidad de cometer errores por lo que todas las
acciones del usuario deben ser reversibles (por razones como stas, (Nielsen
J. , 2001) asegura que el botn atrs es el ms utilizado en los navegadores
web), y que el trabajo del usuario sea constantemente guardado, para evitar
prdidas de datos ante los fallos en la conexin, errores crticos en el
navegador, etc.
Este aspecto, quizs est ligado a la funcionalidad de la aplicacin, y debe ser
estrictamente implementada desde la interfaz, para evitar frustracin en el
usuario ante una eventual falla en el sistema.
60
2.12.3.8 Comprensin.
El usuario debe ser capaz de comprender completamente la interfaz de la
aplicacin. El texto debe tener un contraste alto con el fondo, y el tamao de
fuente debe ser claramente legible. Si la aplicacin ser utilizada por personas
con problemas de visin, se debe disear el texto adecuadamente, segn los
parmetros de accesibilidad de la W3C, que sern vistos en el captulo 2.11.1
Pautas de Evaluacin de la Accesibilidad en la Web. (W3C).
2.11 ACCESIBILIDAD
Uno de los factores que se encuentra ntimamente ligado al concepto de
usabilidad, es el de accesibilidad, ya que encierra en s, la posibilidad de
acceder a la informacin sin excluir a aquellos usuarios con limitaciones
individuales - discapacidades, dominio del idioma... - o limitaciones derivadas
del contexto de acceso - software y hardware empleado para acceder, ancho
de banda de la conexin empleada, etc. (Hassan & Martn, 2003)
Normalmente, en el desarrollo de aplicaciones, utilizando UN-Mtodo, se
disean las interfaces para el usuario final, cuyas necesidades especficas se
hacen presentes en el proceso de anlisis y desarrollo. Pero cuando se
desarrollan aplicaciones para una audiencia mayor (aplicaciones web), se
presentan necesidades de acceso muy diferentes, las cuales se deben tener en
cuenta. De hecho, es uno de los factores que claramente se puede clasificar
como higinico en el modelo de Hassan, ya que refiere a la posibilidad de
acceder a la aplicacin, y si un usuario no puede hacerlo, o no puede usarlo,
sentir frustracin. En cambio, si una aplicacin es accesible, y por lo tanto no
causa frustracin, este factor ser desapercibido por usuario, ya que solo ser
notado en la ausencia de ste.
Por lo general, la accesibilidad es concebida por todos los desarrolladores,
como realmente necesaria, pero muy pocas veces se lleva a la prctica,
nicamente cuando las empresas, observan en ellas una gran posibilidad de
llegar a ciertos clientes potenciales.
62
63
En cada punto de verificacin, hay un enlace que conduce a las tcnicas que
permiten superar las dificultades de accesibilidad, acordes a cada pauta. Estas
tcnicas proporcionan estrategias, ejemplos y explicaciones utilizando el
lenguaje HTML y CSS. Por conocimiento general, aqu se nombran y se
describen superficialmente, las pautas establecidas por la WAI en su versin
1.09. Si se desea profundizar en esta rea de conocimiento, se recomienda la
lectura de los documentos publicados por el consorcio, disponibles en la web
de la W3C. (Ver BIBLIOGRAFA).
Vale la pena aclarar, que en el mbito del trabajo de grado, la metodologa vigente para la
64
66
2.11.1.9
67
Dado que no existe la forma de saber con exactitud el tamao de las pantallas
de los dispositivos de los usuarios (Ver ANEXO E - TAMAOS DE PANTALLA
MS COMUNES), (Nielsen J. , 2001) plantea la posibilidad de disear para
todos los tamaos de pantalla. El principio bsico, consiste en evitar el uso de
valores en pixeles fijos para los elementos del diseo. (Nielsen J. , 2001).
Por otro lado, otros criterios que pueden ser evaluados en esta pauta, se
encuentran los mapas de imagen controlados por el servidor, diseo de interfaz
independiente del dispositivo de acceso, crear un orden lgico para la
navegacin por tabulacin, entre otros.
La evaluacin detallada por prioridades, y la metodologa propuesta por la W3C
para la evaluacin de la accesibilidad, se encuentran en el ANEXO D
68
agradables,
pueden
ser
compatibles
con
una
buena
accesibilidad. Por otro lado, otro de los factores que pueden afectarse, es la
utilidad percibida por el usuario, ya que segn (Heijden, 2003), es influenciada
positivamente, provocando una mayor intencin de uso.
En el contexto de uso en la web, se generaliza el uso repetido de las
aplicaciones, con tal de cumplir una tarea u ofrecer un servicio. As, segn
(Manchn, 2002), lo determinante para que el usuario vuelva a utilizar la
aplicacin, ser una experiencia de uso satisfactoria y para ello se han de
generar emociones positivas a travs de la experiencia de uso real, es decir, la
fidelizacin de usuarios, a diferencia de la compra y venta de productos, se
basa en la experiencia de stos, no en su apariencia. As, Manchn determina
69
y la manera de
los
elementos
Ley de la Similitud
estn Se perciben como grupo, aquellos
cuya
caractersticas
forma,
visuales
posee
similares,
70
Ley de la Continuidad
71
Por esta razn, y teniendo en cuenta la Ley de Fitts, (Ver captulo 2.12.3.1
Eficiencia y Ley de Fitts.), la vista se centra en la accin que debe realizar, a
partir de una visualizacin rpida, ya que es mucho ms lenta el movimiento
del dispositivo para conocer la accin. En aplicaciones sin jerarqua visual, el
usuario comenzar a buscar en el contenido, acciones similares o botones que
lo dirijan a lo que debe hacer, por lo que tarda ms tiempo de lo normal,
impidiendo una experiencia satisfactoria.
Entre otros elementos a tener en cuenta, se pueden observar las proporciones,
el nmero de oro, la regla de los tercios, etc. Adems vale la pena tener en
cuenta, que junto con los esquemas de colores, la ley de proximidad y la
temperatura del color, generan la sensacin de profundidad de los elementos
que componen el diseo web, lo que permite, a partir de un diseo en dos
dimensiones, establecer elementos que se encuentran mas lejanos que otros.
72
73
Descripcin
El rojo, es uno de los colores que ms llama la atencin, y
evoca sentimientos de peligro, pasin, amor, y energa.
Comnmente, es utilizado para connotar errores en las
aplicaciones, o en botones cuyas acciones denoten urgencia
o excitacin.
El amarillo, es un color estimulante, que evoca la memoria y
la retencin de datos, pero puede ser irritante por su
exagerada exposicin. Est asociado a la cobarda, o a la
felicidad. En el diseo web, est asociado principalmente a la
74
en
acciones
que
se
llevan
cabo
75
76
comprensin,
evitar
la
desmotivacin
de
uso,
adems
depender
Evaluacin Heurstica
78
Jakob Nielsen; quien propone un conjunto de diez (10) principios para evaluar
la usabilidad: (Nielsen J, 1994).
) Cuanto ms se parezca
79
2.15.1.2
80
2.15.1.3
Inspeccin de Estndares.
2.15.1.4
Seguimiento Interdisciplinario.
software
(usuarios,
desarrolladores,
psiclogos,
etc.)
trabajen
81
2.15.2.1 Metodologas
En
la
literatura,
abundan
los
modelos
propuestos
para
facilitar
la
MODELO
CARACTERSTICA
Jakob Nielsen es considerado el padre de la Usabilidad, ya
que introdujo el concepto en el desarrollo de aplicaciones.
Por lo tanto, su metodologa fue la primera hacer aparicin,
y enumera las actividades necesarias para desarrollar
Nielsen
conclusiones.
(Nielsen
J.
Enhancing
82
the
de
Vrije
[Amsterdam
Holanda].
Adems,
esta
metodologa
plantea
la
Ciclo de vida
de la Ingeniera
de la
Usabilidad.
si
los
objetivos
de
la
fase
se
cumplen
de
Lanzamiento)
Requisitos,
algunas
Humano-Computador,
83
Diseo,
actividades
que
Implementacin
de
permiten
la
unir
Interaccin
las
dos
84
3.1 METODOLOGA
A partir de las tcnicas que promueve la ingeniera de la usabilidad, en el
presente trabajo de grado, se proponen dos tipos de mediciones, para los
aspectos que componen la experiencia de usuario.
Primero, se realizar una inspeccin de estndares, que permita medir los
aspectos incluidos en la WCAG Versin 1.0, en cada uno de los prototipos que
se presentarn a continuacin. Dependiendo de esta validacin, se determinar
el grado de accesibilidad que posee cada una de las aplicaciones, con el fin de
observar posibles falencias en este aspecto.
Luego, y partiendo de una evaluacin heurstica, se proceder a evaluar la
funcionalidad y usabilidad de la aplicacin, para establecer el porcentaje de
errores, las fallas en determinados casos de uso, para que el equipo de
desarrollo de software las corrija en el menor tiempo posible. Adems, si se
observa algn problema de usabilidad, que incumpla uno de los factores
establecidos por Nielsen, el grupo tambin proceder a replantearlo y
solucionarlo.
Por ltimo, se realizar un cuestionario para los usuarios, los cuales explorarn
la aplicacin por medio de un paseo cognitivo, y respondern las preguntas
planteadas a continuacin. Finalmente, medirn su nivel de satisfaccin en el
manejo de la aplicacin, para luego establecer las posibles mejoras y falencias
que posea el prototipo.
85
3.2.1 CUESTIONARIO
Accesibilidad
SI
Considera que el contraste (La diferencia entre el color del fondo y el texto) es correcto, y que la
informacin detallada por la aplicacin puede leerse fcilmente?
Se permite modificar el idioma del texto?
La aplicacin provoca destellos en la pantalla?
El tamao de la letra permite la correcta lectura de la informacin?
Se permite aumentar o disminuir el tamao de la letra?
Las imgenes utilizadas se encuentran borrosas?
Si hay animaciones, considera que stas lo distraen del objetivo principal?
La aplicacin tiene un dominio (www.ejemplo.com) fcil de pronunciar y recordar?
Ha notado si las imgenes o elementos de la aplicacin tardan mucho en cargar?
El sitio funciona con cualquier navegador? Incluso en Internet Explorer?
Usuario Experto
Las imgenes muestran informacin adicional en los thumnails?
Dado el caso que el men utilice imgenes, se proporcionan textos alternativos para navegar?
Aparecen todas las imgenes y grficos de la aplicacin?
El diseo de interfaz, se adapta fcilmente a las diferentes resoluciones de pantalla?
Es necesaria la instalacin de un Plug-in para utilizar la aplicacin?
86
NO
N/A
Funcionalidad
SI
NO
N/A
SI
NO
N/A
87
La aplicacin posee opciones para corregir errores?, es decir, volver atrs dado el caso de
equivocarse en las opciones, o borrar el formulario en caso de equivocarse, etc.)
La aplicacin proporciona un punto claro de salida, en caso de volver atrs o cerrar la sesin?
Considera que la aplicacin le ayuda para no cometer errores?
Existen campos de formulario que realmente le parecen intiles?
En caso de formularios extensos y encuestas, La aplicacin le permite saber cunto falta para
culminar la tarea, y en qu fase del proceso se encuentra?
Considera que hay demasiados distractores en la pgina que le impiden concentrarse en su
tarea?
Despus de completar la accin, la aplicacin anuncia si la operacin fue realizada
exitosamente, o si se produjo algn fallo?
Diferencia claramente dnde puede hacer clic, y dnde no? Los enlaces son claros y se
diferencian del resto del contenido?
Usuario Experto
SI
88
NO
N/A
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
89
Usabilidad
SI
90
NO
N/A
PROTOTIPO DE APLICACIN
El problema abordado desde Ingeniera de Requisitos, consiste en solucionar
los inconvenientes que posee la DIMA (Direccin de Investigacin de la Sede
Manizales, de la Universidad Nacional de Colombia), en la gestin de los
proyectos y grupos de investigacin.
Partiendo del anlisis de la organizacin, se procede a realizar la especificacin
de requisitos, utilizando la metodologa UN-Mtodo, de la Escuela de Sistemas
de la Universidad Nacional, por medio del cual se obtiene una solucin
informtica creativa que soluciona los inconvenientes en un 77%. (Ver ANEXO
C: PROPUESTA DE SOLUCIN CREATIVA CON UN-MTODO.
Luego, a partir de la solucin, se plantean los respectivos casos de uso (Ver
ANEXO I: CASOS DE USO ASOCIADOS AL PROTOTIPO), teniendo en
cuenta la interaccin y las acciones del usuario y la aplicacin, para luego, en
diseo y construccin de productos de software, realizar la correspondiente
divisin de capas, utilizando el Modelo-Vista-Controlador, los contratos, y
finalmente la implementacin.
91
92
93
94
ANLISIS DE RESULTADOS
95
96
Cumple
% cumple
No cumple
% no cumple
No aplica
% no aplica
6
6
6
6
6
6
6
6
6
6
6
31,58
31,58
31,58
31,58
31,58
31,58
31,58
31,58
31,58
31,58
31,58
8
13
9
9
9
9
9
9
9
9
9
42,11
68,42
47,37
47,37
47,37
47,37
47,37
47,37
47,37
47,37
47,37
5
0
4
4
4
4
4
4
4
4
4
26,32
0,00
21,05
21,05
21,05
21,05
21,05
21,05
21,05
21,05
21,05
57,96
% cumplimiento A
42,04
% incumplimiento A
97
51,78
48,22
% cumplimiento AA
% incumplimiento AA
Si se tienen en cuenta tanto las pautas de prioridad A, como las AA, se observa
que el prototipo cumple con el 45,85% de ellas, mientras incumple con el 51%.
Tambin se puede observar que el caso de uso que presenta mayores
dificultades de accesibilidad, corresponde al Diagrama de Gantt, ya que al ser
generado por medio de plug-ins externos, los convierte en un objeto poco
personalizable y accesible al usuario.
98
NO
CUMPLE
NO
APLICA
%
% NO
CUMPLE CUMPLE
% NO
APLICA
Accesibilidad
50
31
16
62,0
32,0
6,0
Funcionalidad
Diseo
Interaccin
20
18
10,0
90,0
0,0
74
26
44
35,1
59,5
5,4
Esttica
32
29
90,6
0,0
9,4
Credibilidad
16
11
31,3
68,8
0,0
Usabilidad
28
12
14
42,9
50,0
7,1
Tabla 10: Tabla resumen de la evaluacin con usuarios del prototipo antiguo.
99
Funcionalidad
0,010,0
6,0
32,0
62,0
90,0
% CUMPLE
% NO CUMPLE
% NO APLICA
% CUMPLE
Diseo Interaccin
% NO CUMPLE
% NO APLICA
Esttica
5,4
9,4
0,0
35,1
59,5
90,6
% CUMPLE
% NO CUMPLE
% NO APLICA
100
% CUMPLE
% NO CUMPLE
% NO APLICA
Usabilidad
Credibilidad
0,0
7,1
31,3
42,9
50,0
68,8
% CUMPLE
% NO CUMPLE
% NO APLICA
% CUMPLE
% NO CUMPLE
% NO APLICA
101
Ilustracin 19: Capturas de Pantalla del Prototipo propuesto desde varios dispositivos
102
tres,
los
cuales
corresponden
futuras
mejoras
Cumple
14
13
Porcentaje
No
Porcentaje
No
Porcentaje
cumple
cumple no cumple aplica no aplica
73,68
0
0,00
5
26,32
73,68
1
5,26
4
21,05
Tabla 12: Tabla del cumplimiento de los estndares de la W3C Prioridad A - Prototipo Nuevo
103
3,45
% cumplimiento A
% incumplimiento A
96,55
4,76
95,24
% cumplimiento AA
% incumplimiento AA
Ilustracin 21: Grfico del porcentaje de cumplimiento de los estndares de accesibilidad Prioridad AA - Prototipo Nuevo
104
Cumple
No cumple
% no
cumple
% no se
aplica
No aplica
19
61,29
3,23
11
35,48
21
67,74
3,23
29,03
Tabla 13: Tabla del cumplimiento de los estndares de la W3C Prioridad AA - Prototipo Nuevo
Accesibilidad
NO
NO
CUMPLE CUMPLE APLICA
%
% NO
CUMPLE CUMPLE
% NO
APLICA
Funcionalidad
50
20
39
17
6
3
5
0
78,0
85,0
12,0
15,0
10,0
0,0
Diseo
Interaccin
Esttica
Credibilidad
Usabilidad
73
32
16
28
55
28
15
23
13
0
1
4
5
4
0
1
75,3
87,5
93,8
82,1
17,8
0,0
6,3
14,3
6,8
12,5
0,0
3,6
Tabla 14: Tabla resumen de la Evaluacin con usuarios del Prototipo nuevo.
En este caso, se observan cuatro factores de diseo, que tienen una mayor
relevancia en este prototipo: La credibilidad, la esttica, la funcionalidad, y la
105
Funcionalidad
15,0 0,0
10,0
12,0
78,0
% CUMPLE
% NO CUMPLE
85,0
% NO APLICA
% CUMPLE
Diseo Interaccin
% NO CUMPLE
Esttica
6,8
12,5
0,0
17,8
75,3
% CUMPLE
% NO CUMPLE
87,5
% NO APLICA
% CUMPLE
Credibilidad
14,3
% NO APLICA
3,6
82,1
93,8
% NO CUMPLE
% NO CUMPLE
Usabilidad
6,30,0
% CUMPLE
% NO APLICA
% NO APLICA
% CUMPLE
% NO CUMPLE
% NO APLICA
107
5.3 ANLISIS
Los resultados en la evaluacin de la satisfaccin del usuario final, demuestran
que los factores higinicos son los que ms influencian la experiencia del
usuario. Solo basta observar los resultados del prototipo desarrollado como
trabajo de la asignatura Diseo y Construccin de Software, que a pesar de
cumplir con las pautas estticas establecidas, su psima funcionalidad
provocaba un declive en la percepcin del usuario, a tal punto de calificar su
experiencia con el software negativamente.
En el prototipo propuesto en la realizacin de este trabajo de grado, se observa
un amplio margen de mejora, al implementar los conceptos y estrategias clave
que incrementan la percepcin de cada aspecto. Por ejemplo, funcionalmente,
desde el desarrollo de software, se evitaron los enlaces rotos, y se evaluaron
las respuestas del sistema ante cada accin planteada en los casos de uso,
para lograr aumentar los factores percibidos por el usuario respecto al
funcionamiento, del 10 al 85 por ciento.
Por otro lado, se obtienen mejoras significativas en la accesibilidad percibida,
que pas del 62 al 78 por ciento, a pesar de ser menor que la accesibilidad
objetiva, medida a travs de los estndares de la W3C.
Quizs el diseo de la interaccin, fue el rea en la que se generaron ms
cambios en comparacin al prototipo inicial. Se implement un sistema de
errores para informar posibles fallas, se corrigieron los nombres de men, se
describen claramente cada uno de los campos de formulario, y se
implementaron herramientas para predecir el comportamiento del usuario, para
disminuir la probabilidad de cometer errores, a tal punto de mejorar la
satisfaccin en la experiencia de usuario en este aspecto, de un 35 a un 75 por
ciento.
El nico aspecto que disminuy, respecto al prototipo inicial, fue el diseo
visual y esttico, que pas del 90 al 87 por ciento. La causa principal de este
108
109
CONCLUSIONES
A partir de un extenso anlisis bibliogrfico, desde la Interaccin HumanoComputador, se establecen siete aspectos que influyen en el diseo de las
aplicaciones web, para asegurar una buena experiencia de usuario utilidad,
funcionalidad, accesibilidad, diseo de interaccin, confiabilidad, el diseo
visual, y la usabilidad-. Estos principios, estn ntimamente relacionados, e
incluyen componentes ntimamente emocionales y subjetivos, los cuales fueron
definidos, estudiados, y aplicados a la metodologa de anlisis, diseo, y
construccin de productos de software, por medio de la implementacin de un
prototipo que maximice la probabilidad de que el usuario posea una experiencia
satisfactoria.
Por eso, el modelo de evaluacin propuesto, basado en el mbito de este
trabajo de grado, con base a la investigacin y la bibliografa, definen ciertas
reglas que mejoraran la experiencia de usuario en las aplicaciones
desarrolladas para la web. Partiendo de las reglas, y los estndares
establecidos en algunos mbitos, (como la accesibilidad), se observa un
incremento en la satisfaccin de uso del prototipo propuesto, con respecto al
prototipo realizado en la asignatura de Diseo de Software.
As,
se
deduce
fundamentalmente
que
al
acceder
evaluar
a
la
una
aplicacin,
aplicacin
web,
el
usuario,
luego
busca
explorar
su
110
111
BIBLIOGRAFA
112
113
114
115
Sauro, J., & Kindlund, E. (2005). A Method to Standardize Usability Metrics Into
a Single Score. CHI 2005, (pgs. 401-409). Portland.
Shackel, B. (1991). Usability context, framework, definition, design and
evaluation. Cambridge University Press.
Standardisation, I. O. (2001). ISO 9241 Ergonomic, Part 11: Guidance on
usability. Ginebra.
Tognazzini, B. (1998). First Principles of Interaction Design. Recuperado el 31
de Enero de 2012, de Bruce Tognazzini:
http://www.asktog.com/basics/firstPrinciples.html
Tractinsky , N. (1997). Aesthetics and Apparent Usability: Empirically Assessing
Cultural and Methodological Issues. Recuperado el 10 de Enero de
2012, de CHI 97 Electronic Publications: Papers:
http://www.sigchi.org/chi97/proceedings/paper/nt.htm
Tufte, E. (s.f.). Presenting Data and Information. Recuperado el 6 de Enero de
2012, de Edward Tufte Web Page.:
http://www.edwardtufte.com/tufte/courses
UsabilityNet European Union Project. (2001-2003). UsabilityNet European
Union Project. Recuperado el 4 de Agosto de 2011, de
www.usabilitynet.org
Veer, G., Lenting, B., & Bergevoet, B. (1996). GTA: Groupware Task Analysis Modeling Complexity. Acta Psychologica, 297-322.
W3C - WCAG 1.0 . (s.f.). Pautas de Accesibilidad al Contenido en la Web Versin 1.0. Recuperado el 14 de Octubre de 2011, de
http://www.w3.org/WAI/: http://www.w3.org/WAI/
Zambonini, D. (2011). A Practical Guide to Web App Success. Londres: Five
Simple Steps.
Zapata, C. M. (2011). Introduccin a la calidad de software. Presentaciones de
clase - Calidad de Software. Medelln: Universidad Nacional de
Colombia.
Zhang, P., & Dran, G. (2000). Satisfiers and Dissatisfiers: A Two-Factor Model
forWebsite Design and Evaluation. Journal of the American Society for
Information, 1253-1268.
116
ANEXOS
ANEXO A: ELEMENTOS DE LA EXPERIENCIA DE USUARIO
117
Ilustracin 23: Esquema General de la Metodologa UN-Mtodo. Tomado de: (Arango, F; Zapata, C, M; 2006)
118
Ilustracin 24: Diagrama de Causa-Efecto, cuyas causas (en rojo) se satisfacen con la solucin propuesta.
119
ANEXO D EVALUACIN DE LAS PAUTAS DE ACCESIBILIDAD EN LA WEB, SEGN LA WCAG VERSIN 1.0
Puntos de Verificacin Prioridad 1 - A
Punto de Verificacin
1.1 La aplicacin proporciona un texto equivalente para todo elemento no textual? (por
ejemplo, a travs de "alt", "longdesc" o en el contenido del elemento). Esto incluye:
imgenes, representaciones grficas del texto, mapas de imagen, animaciones (por
ejemplo, GIFs animados), "applets" y objetos programados, "ascii art", marcos, scripts,
imgenes usadas como vietas en las listas, espaciadores, botones grficos, sonidos
(ejecutados con o sin interaccin del usuario), archivos exclusivamente auditivos, banda
sonora del vdeo y vdeos
2.1 La informacin transmitida a travs de los colores tambin est disponible sin color, por
ejemplo mediante el contexto o por marcadores.
4.1 La aplicacin o el sitio permiten cambios en el idioma del texto del documento y en
cualquier texto equivalente (Por ejemplo, leyendas).
6.1 El documento puede ser ledo sin hoja de estilo CSS? Por ejemplo, cuando un
documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible
leerlo.
6.2 Los contenidos dinmicos son actualizados cuando cambia el contenido dinmico.
7.1 La aplicacin provoca destellos en la pantalla?
14.1 Se utiliza un lenguaje claro ms claro y simple para el contenido?
Si se utilizan imgenes y mapas de imagen (Prioridad 1)
1.2 La aplicacin proporciona vnculos redundantes en formato texto para cada zona
activa de un mapa de imagen del servidor?
9.1 Se proporcionan los correspondientes mapas de imagen, controlados por el cliente en
lugar de por el servidor, excepto donde las zonas sensibles no puedan ser definidas con
una forma geomtrica?
Y si utiliza tablas (Prioridad 1)
5.1 En las tablas de datos, identifique los encabezamientos de fila y columna.
120
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
NO
N/A
Tabla 16: Resumen de las Pautas de Accesibilidad establecidas por la W3C de prioridad 1 (A) (WCAG 1.0)
121
SI
3.1 Cuando exista un marcador apropiado, use marcadores en vez de imgenes para
transmitir la informacin.
3.2 Cree documentos que estn validados por las gramticas formales publicadas.
3.3 Utilice hojas de estilo para controlar la maquetacin y la presentacin.
3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos
de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo.
3.5 Utilice elementos de encabezado para transmitir la estructura lgica y utilcelos de
acuerdo con la especificacin.
3.6 Marque correctamente las listas y los tems de las listas.
3.7 Marque las citas. No utilice el marcador de citas para efectos de formato como sangras.
6.5 Asegrese de que los contenidos dinmicos son accesibles o proporcione una pgina o
presentacin alternativa.
3.6 Marque correctamente las listas y los tems de las listas.
3.7 Marque las citas. No utilice el marcador de citas para efectos de formato tales como
sangras.
6.5 Asegrese de que los contenidos dinmicos son accesibles o proporcione una pgina o
presentacin alternativa.
2.2 Asegrese de que las combinaciones de los colores de fondo y primer plano tengan
suficiente contraste
7.2 Hasta que las aplicaciones de usuario permitan controlarlo, evite el parpadeo del
contenido (por ejemplo, cambio de presentacin en periodos regulares, as como el
encendido y apagado).
7.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las
actualizaciones, no cree pginas que se actualicen automticamente de forma peridica.
7.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el
redireccionamiento automtico, no utilice marcadores para redirigir las pginas
automticamente. En su lugar, configure el servidor para que ejecute esta posibilidad.
10.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas
ventanas, no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana
122
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
124
SI
NO
N/A
usuario) y, hasta que las aplicaciones de usuario lo hagan, proporcione una manera de
evitar el grupo.
13.7 Si proporciona funciones de bsqueda, permita diferentes tipos de bsquedas para
diversos niveles de habilidad y preferencias.
13.8 Localice al principio de los encabezamientos, prrafos, listas, etc, la informacin que
los diferencie.
13.9 Proporcione informacin sobre las colecciones de documentos (por ejemplo, los
documentos que comprendan mltiples pginas).
13.10 Proporcione un medio para saltar sobre un dibujo ASCII art de varias lneas.
14.2 Complemente el texto con presentaciones grficas o auditivas cuando ello facilite la
comprensin de la pgina.
14.3 Cree un estilo de presentacin que sea coherente en todas las pginas.
Y si utiliza imgenes o mapas de imagen (Prioridad 3)
1.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vnculos
de los mapas de imagen de cliente, proporcione vnculos en formato texto redundantes para
cada zona activa del mapa de imagen de cliente.
Y si utiliza tablas (Prioridad 3)
5.5 Proporcione resmenes de las tablas.
5.6 Proporcione abreviaturas para las etiquetas de encabezamiento.
10.3 Hasta que las aplicaciones de usuario (incluidas las ayudas tcnicas) interpreten
correctamente los textos contiguos, proporcione un texto lineal alternativo (en la pgina
actual o en alguna otra) para todas las tablas que maquetan texto en paralelo, columnas
envoltorio de palabras.
Y si utiliza formularios (Prioridad 3)
SI
NO
N/A
SI
NO
N/A
SI
NO
N/A
10.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacos,
incluya caracteres por defecto en los cuadros de edicin y reas de texto.
Tabla 18: Resumen de las Pautas de Accesibilidad establecidas por la W3C de prioridad 1 (AAA) (WCAG 1.0)
125
126
Ilustracin 26: Cuadro explicativo de la Legibilidad del Texto segn su color Por: Eva Heller
Responsable profesional
Programador o desarrollador web
Experto - Auditor de Accesibilidad
Diseador de Interaccin
Equipo de desarrollo
Diseador visual o grfico
Todo el equipo de desarrollo
Experto Diseador de Interaccin
Tabla 19: Relacin entre los factores de diseo, y los roles profesionales
127
128
METODOLOGA DUTCH
El mtodo o modelo DUTCH, Designig far Users and Tasks fram Cancepts ta
Handles, fue desarrollado por el grupo de investigadores de la seccin de
Cestin de la Informacin e Ingeniera del Software de la Universidad de Vrije
(Amsterdam), liderada por el Dr. Cerrit van der Veer.
Sus autores lo definen como un mtodo de diseo de sistemas interactivos,
cuya base es el desarrollo de prototipos incrementales que conducen
gradualmente a la implementacin del sistema final; el prototipo realizado en
un ciclo es considerado como una nueva visin del sistema y, tras su
evaluacin, se convierte en el punto de partida del siguiente ciclo. Este modelo
da mucha importancia a disponer en los equipos de desarrollo de personas
provenientes de las disciplinas provenientes del campo de las humanidades,
de varias ingenieras y del diseo grfico.
El mtodo comienza analizando a los usuarios y las tareas que stos realizan
en una situacin actual (si sta existe), analizando futuros usos y usuarios,
involucrando a estos usuarios, a los implicados en el sistema a disear, as
como a los clientes receptores de dicho diseo. Intenta modelar entornos
complejos donde personas diversas interactan con sistemas interactivos,
considerando necesarios tres puntos de vista para modelar el marco de trabajo
de cualquier aplicacin: Las personas (usuarios y grupos de usuarios), el
trabajo y la situacin. Las actividades de estos tres puntos de vista se
estructuran en dos categoras de modelos: El Modelo de Tareas 1 (MT1) y el
Modelo de Tareas 2 (MT2). El MT1 representa el modelado de las tareas de la
129
La segunda fase est a su vez dividida en tres subfases o niveles, que son el
diseo del modelo conceptual, el diseo de la pantalla y el diseo detallado de
la interfaz de usuario, teniendo las tcnicas de prototipado y de evaluacin
"integradas" dentro de cada una de ellas.
Todas las fases, excepto el anlisis de requisitos, incluyen actividades de
valoracin final que formalizan la iteracin al modelo. Una vez se alcanza el
final de cada fase (o subfase), se formula una pregunta para analizar la
consecucin o no del objetivo propuesto en la correspondiente fase y slo est
permitido pasar a la prxima fase si la respuesta a dicha pregunta es
verdadera.
Ilustracin 29: Ciclo de Vida de la Ingeniera de Usabilidad propuesto por D.J. Mayhew
Las tres columnas centrales, correspondientes a las fases o niveles del diseo
(diseo del modelo conceptual, diseo de la pantalla y el diseo detallado de la
131
Existe una amplia variedad de tcnicas para llevar a cabo cada tarea del
ciclo de vida.
132
MODELO MPIU+a
El esquema est organizado en una serie de fases cada nodo del esquema
corresponde a una de estas fases que repetitivamente irn realizndose
durante el desarrollo de un determinado sistema interactivo. Veremos a
continuacin el objetivo de cada una de estas fases y las actividades que en
cada una de ellas pueden o deben ejecutarse. El criterio seguido para explicar
cada una de las fases es el siguiente: Primero se explican las columnas de fase
nica concernientes al prototipo y a la evaluacin para posteriormente entrar en
el detalle de las fases de la primera columna (que como se ha mencionado
corresponde a un ciclo de vida de la IS). La razn de esta decisin se debe a
que tanto el prototipo como la evaluacin son aspectos primordiales en todo
diseo de sistemas centrado en el usuario e inevitablemente se hace
continuada referencia al explicar el resto de fases y sus actividades
relacionadas.
partes
del
mismo
con
multitud
133
de
objetivos
para:
Verificar
134
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Se resuelven:
Resumen
Actores
Precondicin
Secuencia de
interacciones
Programa reuniones
4
5
Sistema
Enva al
Correo del grupo de
investigacin, una notificacin de
fechas tentativas listas.
Ingresa al sistema, a la seccin
reuniones.
Acepta fechas
Secuencia alternativa
5
Demora
Rechaza fechas
135
Frecuencia
Tipo
Interaccin
Actores
Comit supervisor
Resumen
Secuencia de
interacciones
Secuencia Normal
1. Sistema -> Enva al
Correo del grupo de investigacin, una
notificacin de fechas tentativas listas.
2. Grupo de investigacin-> Ingresa al sistema, a la seccin reuniones.
3. Sistema -> Muestra horario tentativo de reunin
4. Grupo de investigacin -> Aprueba o rechaza el horario
5. Sistema -> Si el horario es aprobado, el sistema programa al reunin
y enva notificaciones.
Secuencia alternativa
1. Sistema -> Muestra otro horario tentativo de reunin (Paso 1
Secuencia normal)
136
Pantalla
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Se resuelven:
Resumen
Actores
Precondicin
Secuencia de
interacciones
Investigador
Sistema
137
Ingresa proyecto
Demora
Frecuencia
Tipo
Secundario
Registra proyecto.
Interaccin
Crea el proyecto
Actores
Investigador
Resumen
Secuencia de
interacciones
138
Pantalla
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
139
Objetivo
Resumen
Actores
Se resuelven:
C3. No hay seguimiento a la ejecucin de los proyectos
C5. No hay sistema que administre la ejecucin del proyecto
Despus de que el proyecto es aprobado, el sistema genera un
diagrama de Gantt, en base a la informacin del mismo, para servir
como apoyo al seguimiento de los proyectos.
El investigador
Precondicin
Secuencia de
interacciones
Investigador
Sistema
Consulta
Demora
Inmediato.
Frecuencia
Tipo
Secundario
Interaccin
Actores
Investigador
Resumen
Secuencia de
interacciones
140
Pantalla
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Se resuelven:
Resumen
Actores
DIMA e investigador.
Precondicin
Secuencia de
interacciones
investigador
Sistema
Demora
141
Frecuencia
Cada mes
Tipo
Secundario
Interaccin
Actores
Investigador
Resumen
Secuencia de
interacciones
142
Pantalla
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Resumen
Actores
DIMA.
Precondicin
143
Secuencia de
interacciones
DIMA
Consulta informe
Analiza Informe
Demora
Solicita
envi
cofinanciadora
Sistema
la
entidad Enva
informe
cofinanciadora.
la
entidad
Frecuencia
Tipo
Secundario
Interaccin
Actores
DIMA
Resumen
Secuencia de
interacciones
144
Pantalla
Caso de Uso
Versin
1.2
Autor
Grupo6
Propsito
Objetivo
Resumen
Fecha
Actores
Director
Precondicin
Secuencia de
interacciones
Director
Sistema
Actualiza Hermes,
Actualiza Cvlac
Actualiza GrupLac
Demora
145
Frecuencia
Tipo
Primario
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Resumen
Actores
DIMA
Precondicin
Secuencia de
interacciones
DIMA
Sistema
146
El operario
verifica
asignado
por
la
cofinanciadora
el
Demora
Frecuencia
Tipo
Secundario
Interaccin
Distribucin de presupuesto
Actores
DIMA
Resumen
Secuencia de
interacciones
147
Pantalla
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Resumen
Que el comit supervisor tenga una visin del estado de los proyectos y
pueda actuar en consecuencia.
Se resuelven:
C4. Falta de asesora a los investigadores en la ejecucin de los proyectos
C5. No hay sistema que administre la ejecucin del proyecto
C7. No hay sistema que garantice el seguimiento a la distribucin del
presupuesto
C9. No hay supervisin adecuada al presupuesto en la ejecucin del
proyecto
El comit asesor revisa el avance del proyectoen caso de que haya
retraso, adems de la utilizacin del presupuesto.
Actores
Comit supervisor
Precondicin
148
Secuencia de
interacciones
1
2
Demora
Frecuencia
Tipo
Comit supervisor
Sistema
Consulta
los
presupuesto
informes
Interaccin
Actores
Comit supervisor
Resumen
Secuencia de
interacciones
Muestra
149
informes
presupuestales
del
proyecto
Pantalla
Caso de Uso
Versin
1.2
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Resumen
Actores
Precondicin
Secuencia de
interacciones
1
2
Sistema
150
Demora
Inmediato
Frecuencia
Tipo
Primario
Pantalla
Este caso de uso es una Funcin Interna del sistema por lo cual no
tiene interfaz
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Resumen
Actores
Entidad cofinanciadora
Precondicin
Secuencia de
Entidad cofinanciadora
151
Sistema
interacciones
2
3
Demora
Frecuencia
Tipo
Secundario
Interaccin
Entrega de presupuesto
Actores
Entidad cofinanciadora
Resumen
Secuencia de
interacciones
152
Pantalla
Caso de Uso
Versin
Autor
Grupo6
Fecha
Fuente
Propsito
Objetivo
Se resuelven:
Resumen
Actores
Precondicin
Secuencia de
interacciones
1
Secuencia alternativa
Informacin incorrecta o
incompleta.
153
Grfico
Interaccin
Actores
Resumen
Secuencia de
interacciones
Secuencia Normal
6. Comit de supervisin -> ingresa horario para programacin de
reuniones
7. Sistema -> almacena informacin si esta es correcta?
Secuencia alternativa
2. Sistema -> El sistema solicita correccin de informacin incorrecta.
Pantalla
154