DISEÑO Y EVALUACIÓN DEL INTERFAZ GRÁFICO DE UN CURSO
WEB
Claudia Engel y Juan José Casa es
Cen o de Supe compu ación de Galicia
El p esen e abajo desc ibe las expe iencias du an e el p oceso de diseiño del in e az de un cu so
Web pa a el au oes udio de Fo an 90, un lenguaje de p og amación. Se ealizó un análisis
sis emá ico y cuan i a i o. El cu so ue e aluado po un g upo de 12 usua ios, modi icado en base
a los esul ados ob enidos y e aluado de nue o. Se demues a que las modi icaciones mejo a on
la pun uación de la e aluación signi ica i amen e y se des aca la impo ancia de la inco po ación
de usua ios " eales" du an e odo el p oceso de desa ollo.
This pape desc ibes he expe iences du ing he use in e ace design p ocess o a Web cou se o
he sel - s udy o Fo an 90, a p og amming language. A sys ema ic and quan i a i e analysis was
pe o med. The cou se was e alua ed by a g oup o 12 use s. Ii was hen modi ied based on he
esul s ob ained and e-e alua ed. l is shown ha he modi ica ions imp o ed he esponse alues
o he e alua ion signi ican ly, hus demons a ing he impo ance o he inco po a ion o " eal"
use s du ing he whole de elopmen p ocess.
DESCRIPTORES: E aluación No ma i a, Wo ld Wide Web, enseñanza dis ibuida, nue as
ecnologías de enseñanza, In e ne , diseño g á ico, in e az homb e-o denado , mul imedia,
hipe media, Fo an 90.
1. In oducción.
Con el c ecimien o de In e ne y la in o ma ización de uni e sidades, colegios y o as ins i uciones
de enseñanza se inc emen a ambién el uso del Wo ld Wide Web (WWW) pa a acompaña y
comple a el p oceso de ap endizaje y la enseñanza. En e sus ca ac e ís icas más des acables,
compa ado con la enseñanza adicional, cuen an la posibilidad de inclui mul imedia ( ídeo,
audio, simulaciones, e c.), el o ma o hipe ex o con la opción de enlaza sus componen es
lib emen e y c ea una es uc u a del con enido no linea , y el acceso po o denado , es deci la
p esen ación en una pan alla de moni o y el manejo con a ón. Po lo an o, el ma e ial educa i o
p epa ado pa a páginas Web equie e un a amien o di e en e, eniendo en cuen a dichas
ca ac e ís icas jun o con los obje i os del cu so. Pa a acili a el p oceso exis en una se ie de guías
de es ilo y ecomendaciones pa a el diseño de páginas Web en gene al (James, 1996; Eekma y
Collis, 1996). Sin emba go, aunque la e aluación es una pa e muy impo an e en el desa ollo de
en o nos de enseñanza, hay pocos es udios sis emá icos y cuan i a i os de e aluación del in e az
de cu sos Web ( an Rennes y Collis, 1998) y menos aún sob e la inco po ación de los esul ados
en el p oceso de ediseño.
En los siguien es apa ados se desc ibe el p oceso i e a i o de e aluación (e aluación o ma i a) y
ediseño del in e az de un cu so diseñado pa a el Wo ld Wide Web.
2. El cu so.
El obje o de la e aluación ue un cu so Web sob e el lenguaje de p og amación Fo an 90
(h p://www.cesga.es:8800/F90/). Es e cu so se desa olló con el in de acili a a los usua ios del
Cen o de Supe compu ación de Galicia (CESGA) el ma e ial necesa io pa a el conocimien o del
lenguaje con el in de pode u iliza los ecu sos de o denado es con p ocesado es escala y
ec o ial del cen o.
En la plani icación del diseño se espe a on los siguien es aspec os:
1. Acceso uni e sal. Los alumnos debe ían accede al ma e ial del cu so
desde cualquie o denado independien emen e del iempo y luga , y
a anza a i mo indi idual.
2. En oque. El cu so es á pensando pa a el au oes udio. Po an o, es
necesa io guia al alumno po los emas ele an es con máxima
b e edad y sencillez pa a limi a des íos y e i a la deso ien ación.
3. In e ac i idad. El cu so p e ende enseña el manejo p ac ico de Fo an
90, es deci , acili a capacidades de p og ama en es e lenguaje, po lo
cual e a impo an e inclui la posibilidad de p ac ica con el código.
El Wo ld Wide Web pa ece el medio idóneo pa a el acceso uni e sal y la inclusión de ma e ial
in e ac i o. Además, la ed ATM de banda ancha de que dispone el Cen o de Supe compu ación
de Galicia y el acceso di ec o a ella desde las aulas de Tele-enseñanza de las uni e sidades
gallegas (Engel y Casa es, 1998) elimina on el limi e de elocidad de ansmisión que impide
no malmen e el desa ollo de g andes aplicaciones pa a In e ne .
Pa a guia al usua io se eligió como me á o a en la que se basa la es uc u a del cu so la de un
lib o. El con enido del cu so se dis ibuye en "secciones", las secciones se componen de
"capí ulos". Cada capí ulo consis e en una se ie de "páginas" (cuad o 1).
Cuad o 1. Cu so Web de Fo an 90 – es uc u a de con enidos
Según el concep o elegido se c ea on páginas de los siguien es ipos:
* Página de ex o. Se p ocu ó di idi el ex o en can idades adecuadas y no
llena más que una pan alla.
* Página de ejemplo. Pa a isualiza los e ec os de comandos se p esen an
p og amas en Fo an 90 con explicaciones que acompañan cada línea del
código. El alumno se puede mo e lib emen e po el p og ama. Además es
posible ae una copia del código al p opio o denado pa a uso indi idual.
* Página de au oe aluación. Con iene p egun as sob e el espec i o con enido
del capí ulo en o ma o mul iple choice. Al selecciona una espues a el
alumno ecibe con es ación inmedia a sob e el esul ado.
* Página de a ea. En es e ipo de página se p oponen eje cicios de
p og amación ele an es pa a el ema del capí ulo. A a és de una conexión
( elne ) a un o denado emo o se da acceso a un compilado de Fo an 90,
con lo cual se puede p og ama , compila y ejecu a un código uen e.
El hilo conduc o lo o man las páginas de ex o. Desde ahí se accede a los o os ipos de páginas
( a eas, ejemplos, au oe aluación; g á ico 1).
Como componen es g á icos la página de ex o con iene iconos de na egación pa a mo e se po el
con enido e i a los índices. También p esen a iconos pa a enlaza a páginas de los o os ipos. No
hay enlaces den o del ex o, ni ampoco exis en enlaces a ecu sos ex e nos, es deci , ajenos al
p opio cu so.
Los u u os usua ios del cu so son en su mayo ía alumnos de cu sos a anzados de químicas,
ísicas, ma emá icas, e c. así como pe sonal in es igado de las uni e sidades gallegas, po lo cual
se p esuponen conocimien os básicos de in o má ica y de manejo de o denado es.
3. La e aluación.
Una ez e minado el diseño y desa ollo del p o o ipo del cu so y de ec ado y co egido la
mayo ía de los allos écnicos del sis ema, el obje i o de la e aluación e a comp oba su
"usabilidad" ("usabili y") (Shackel y Richa dson, 1991) con un pequeño g upo de usua ios " eales".
La usabilidad se e leja sob e odo en la acilidad de manejo de los componen es del sis ema
espec o al esul ado deseado. P oyec os p e ios demues an que la di icul ad de en ende y
ope a el sis ema, la ine icacia en el uso, ca ac e ís icas inap opiadas pa a el ap endizaje, un
compo amien o imp edecible y poco iable y una apa iencia desag adable e incomodo en el
manejo cuen an en e los p oblemas más ecuen emen e mencionados po pa e de usua ios.
Pa a consegui un p oduc o de al a calidad es necesa io inco po a p uebas de usabilidad, aplica
la écnica de diseño i e a i o e in eg a a los usua ios du an e odo el p oceso de desa ollo (Smi h
y Mayes, 1996).
En el caso del cu so Web de Fo an 90 e a impo an e comp oba la acilidad del uso in ui i o del
sis ema, ya que bajo condiciones eales el usua io iene que se capaz idealmen e de es udia con
el ma e ial po su cuen a y sin ayuda ex e na.
Pa a ealiza la e aluación se eligió un g upo de usua ios con un pe il simila al de los usua ios
des ino del cu so, que abaja on con la aplicación y espondie on a una se ie de p egun as. Pa a
mo i a la in e acción con el ma e ial del cu so y p o oca expe iencias compa ables se dio a los
usua ios una lis a de a eas pa a ealiza (cuad o 2).
1. elegi una sección del cu so
2. isi a odas las páginas de la sección
3. examina los ejemplos
4. con es a a las p egun as de la
au oe aluación
5. edi a y compila un pequeño
p og ama
Cuad o 2. Ta eas a ealiza po los usua ios e aluado es.
Al e mina las a eas se ecogie on las opiniones, imp esiones y comen a ios de los usua ios
e aluado es median e un cues iona io elec ónico con 22 p egun as (h p://www.cesga.es:8800/
DEMOS/E alFo an.h ml).
Las p egun as se cen a on en los siguien es aspec os:
i. la imp esión gene al del cu so,
ii. el diseño de las páginas en gene al,
iii. el manejo de las páginas especí icas de cada ipo.
Se diseña on las p egun as con el en oque a las ca ego ías "ins uc ional adecuacy" y "cosme ic
adequacy" (adecuado espec o a la enseñanza y a la p esen ación) de análisis de so wa e
educa i o (Hanna in y Peck, 1988). Se basan en las ecomendaciones de e aluación de in e aces
de QUIS (Ques ionnai e o Use In e ace Sa is ac ion) (Shneide man, 1993). Con el in de ecibi
espues as en ocadas, adqui i unas medidas conc e as y de i a suge encias pa a mejo a la
aplicación, se p ecisa on espues as a a és de una escala semán ica de 7 pun os según Like
(1932) (cuad o 3). Pa a cada aspec o exis ía además la posibilidad opcional de comen a ios lib es.
Ma que su imp esión gene al del sis ema:
1
2
3
4
5
6
7
Te ible







Ma a illoso
Cuad o 3. Ejemplo de p egun a del cues iona io.
Todas las pe sonas ecibie on una in oducción indi idual sob e el p oyec o y el in de la
e aluación. También es aba una pe sona p esen e pa a esponde en caso de p egun as, dudas o
allos del sis ema. Adicionalmen e, se omó no a de p oblemas que se comen a on du an e el
p oceso de la e aluación. No exis iendo un limi e de iempo, las p uebas du a on en e 30 y 60
minu os po pe sona.
La e aluación se ealizó en dos ases. En la ase 1 el p o o ipo del cu so ue e aluado po un g upo
de usua ios. Basado en los esul ados se modi ica on algunos aspec os de la aplicación. En la ase
2 se eplicó la e aluación en un p oceso idén ico de la p ime a ase, pe o con el cu so modi icado y
con o os usua ios sin conocimien os p e ios del cu so.
Los e aluado es del g upo 1 e an 12 alumnos y p o eso es de la Facul ad de In o má ica,
Uni e sidad de A Co uña (edades 21-32; 11 homb es, 1 muje ). Los e aluado es del g upo 2 e an
12 alumnos de la Facul ad de Ma emá icas, Uni e sidad San iago de Compos ela (edades 19-26;
11 homb es, 1 muje ).
4. Resul ados.
Un esumen de los esul ados se p esen a en la abla nº 1. Se da el alo medio de odas las
espues as po g upo, basado en los alo es ob enidos de la escala según Like , de 1 (peo ) a 7
(mejo ). Po an o, el alo "neu o" es el 4 y cuan o más al o el alo , más posi i a la alo ación.
A con inuación, se desc iben las dos ases de la e aluación po sepa ado.
Fase 1 (G upo 1)
En gene al, las opiniones sob e el cu so ue on posi i as, es deci , los alo es medios supe a on en
más de una unidad al alo neu o (4). Nega i amen e solo des aca on dos pa áme os
("Signi icado de iconos" y "Realización de a eas") con 4,2 y 4,0 espec i amen e, indicando que el
signi icado de los iconos no e a su icien emen e p eciso y las a eas no siemp e se podían ealiza
sin p oblemas.
En consecuencia, y jun amen e con las obse aciones del pe sonal écnico du an e las sesiones de
la p ime a ase, se iden i ica on dos uen es de p oblemas de usabilidad como más des acables:
A. Na egación. Como se indica an e io men e, las páginas de ex o o maban el hilo conduc o
del cu so, desde donde se accedía a los o os ipos de páginas (ejemplos, a eas y au oe aluación)
como complemen o a a és de los iconos de la ba a de na egación. Sin emba go, las páginas de
ejemplos y au oe aluación no se ca gaban en o a en ana adicional, sino que se ab ían en el á ea
designada pa a las páginas de ex o, es deci , "encima" de la misma y po an o, ocul ándola. A
pa ece , es o esul ó un concep o de diseño poco in ui i o y causan e de con usión, a juzga
ambién po los comen a ios y obse aciones du an e las p uebas.
Además, debido a es e plan eamien o, había que in oduci la posibilidad de ol e desde las
páginas de au oe aluación y de ejemplos a la página de ex o. El icono elegido pa a dicha unción,
una lecha señalando pa a abajo, c eó mucha con usión al no aplica se el concep o "linea " de
"a ance de página". Pa ece que una lecha hacia a ás hubie a sido más lógica como indica on
algunos de los usua ios. (Sin emba go, la lecha pa a a ás ya se u ilizaba pa a la na egación po
las páginas de ex o, po lo cual es o no e a una solución aplicable.)
Imp esión gene al del cu so
G upo1
G upo2
Di e encia
Te ible
Ma a illoso
5,5
5,6
+0,1
F us an e
Sa is ac o io
5,9
6,3
+0,4
Abu ido
Es imulan e
5,3
5,7
+0,4
Di ícil
Fácil
6,3
5,3
-1,0 b)
Rígido
Flexible
5,3
5,0
-0,3
Feo
A ac i o
5,8
5,8
 0
Páginas en gene al – o ganización
G upo1
G upo2
Di e encia
Es uc u a en pan alla
Con usa
Cla a
5,8
6,2
+0,4

Secuencia de páginas
Con usa
Cla a
5,7
6,0
+0,3
O ganización de con enidos
Ilógico
Lógico
6,1
6,1
 0
Can idad de in o mación po
página
Inadecuada
Adecuada
5,8
5,3
-0,5
Páginas en gene al – na egación
Siguien e página
Imp edecible
P edecible
5,5
5,2
-0,3
I a la página an e io
Imposible
Fácil
5,9
6,8
+0,9
Signi icado de iconos
Ambiguo
P eciso
4,2
6,0
+1,8 a)
Página de ex o
G upo1
G upo2
Di e encia
Tipog a ía
Ilegible
Pe ec amen e
legible
6,2
6,2
 0
Colo y uen e le as
Con uso
Ayuda a en ende
6,3
5,7
-0,6
Con enido
Incomp ensible
Fácil de
comp ende
5,8
5,3
-0,5
Página de ejemplos
Ap ende a maneja
Di ícil
Fácil
6,4
6,4
 0
In e p e ación
Di ícil
Fácil
6,3
5,9
- 0,4
Página de au oe aluación
Ap ende a maneja
Di ícil
Fácil
6,5
6,3
- 0,2
In e p e ación de la
espues a
Di ícil
Fácil
5.8
5,8
 0
Página de a eas
Ap ende a maneja
Di ícil
Fácil
5,2 (*)
5,8
+0,6
Ta eas se pueden ealiza
( écnicamen e) sin
p oblemas
Nunca
Siemp e
4,0 (*)
5,7
+1,7 a)
(*) mues a solo de 11 pe sonas
a p  0.025
b p  0.05
Tabla 1. Valo es de espues as al cues iona io po g upo y di e encias en e ellos
(G upo2 – G upo1)
Basados en escala según Like de 1 (peo ) a 7 (mejo ); n(G upo1) = 12, n(G upo2) = 12
B. Página de a eas. No exis ía ninguna guía in ui i a del en o no pa a p ac ica con el código
uen e. El in e az y las he amien as pa a abaja con los p og amas de Fo an 90 e an
demasiado incomp ensibles e incómodos de u iliza , como comen an es os usua ios:
"Pa a ealiza las a eas se hace necesa io dispone de conocimien os ace ca del uso de comandos
UNIX, de un edi o de ex os ... y sabe u iliza el p opio compilado de Fo an 90, cuyo uso no se
explica ... has a llega a la p ime a a ea."
"Conside o que debe ía de habe en el cu so ...[una in o mación] donde se indica a como unciona
el en o no donde se ealizan las a eas, manejo de un edi o , manejo del compilado ..."
En base de los p oblemas iden i icados se modi ica on los siguien es componen es del cu so:
Modi icaciones en na egación:
Obje i o: mejo a el sopo e del concep o no lineal a a és del diseño: di e encia en e hilo
conduc o y o os componen es (páginas) complemen a ios.
* añadi ex o a odos los iconos
* elimina icono de la lecha pa a abajo
* ca ga páginas de ejemplo y au oe aluación en p opia en ana
apa e
* uni ica el diseño de las en anas en que se ca gan las páginas
a ea, ejemplo y au oe aluación, dándoles el mismo amaño, bo de,
e c.
Modi icaciones en página de a eas:
Obje i o: acili a el abajo au ónomo con la aplicación.
* elabo a y añadi página de ayuda pa a las a eas
* añadi componen es adicionales (ba a desplazamien o, bo ones)
Fase 2 (G upo 2)
Pa a la mayo ía de los pa áme os e aluados el segundo g upo espondía ambién con alo es
ela i amen e al os, es deci , mejo es que 4 ( abla 1). Sin emba go, las pun uaciones de los
pa áme os "Signi icado de iconos" y "Realización a eas" suben a un alo de 6,0 y 5,7
espec i amen e, esul ando di e encias con el p ime g upo de +1,8 y +1,7.
Se analizó, si dichas di e encias e an es adís icamen e signi ica i as. Pa a ello se aplicó el
es   (sin co ección de con inuidad; B adley y o os, 1979), asumiendo que el pequeño amaño
de la mues a no pe mi ía habla de una dis ibución no mal. Se compa a on las dis ibuciones de
los alo es de la escala de Like clasi icados en es ca ego ías (1-3, 4 y 5-7) an es y después de
las modi icaciones.
Las dos di e encias conside adas esul a on signi ica i as (p  0,025, g ados de libe ad = 3), lo
cual se puede in e p e a que las manipulaciones esul a on en una no able mejo a del cu so
espec o a las ca ac e ís icas e aluadas. Me ece des aca que o o pa áme o elacionado con el
ema de na egación ("I a página an e io ") ambién subió a un alo muy al o de 6,8 (sin
emba go, la di e encia no es signi ica i a).
Discusión.
La expe iencia demues a que los usua ios e aluado es enían una ac i ud posi i a hacia las
nue as ecnologías de enseñanza. Es o se puede obse a en las "buenas no as" y comen a ios
a o ables que ecibió el cu so po pa e de los dos g upos de usua ios, y ambién se mani es ó en
una g an ole ancia hacía los allos del sis ema (en algunas ocasiones se quedó "colgado" y había
que einicia el equipo). Las posibilidades de in e ac ua y ap ende de una o ma no adicional a
a és de ecnologías educa i as mode nas c ean una g an ascinación en e los alumnos:
"... me pa ece que has a el momen o no hay una mane a de ap ende mas es imulan e que es a,
po lo menos pa a un lenguaje de p og amación."
"Una muy in e esan e inicia i a que espe o llegue a buen é mino..."
En conc e o, y con ayuda de una cuan i icación de esul ados la p ueba de usabilidad ayudó a
iden i ica dos p oblemas del diseño del cu so que impedían el abajo con el ma e ial. Se mos ó
que los cambios in oducidos e an adecuados ya que esul a on en una mejo e aluación en la
segunda ase.
Una excepción ue la e aluación del pa áme o "Imp esión gene al", en donde la di e encia
ob enida ue de -1,0 y es adís icamen e signi ica i a, indicando que el g upo 2 lo encon aba más
di ícil abaja con el cu so que el g upo 1. La explicación de es e enómeno pod ía se una
in luencia indi ec a causada po las modi icaciones, pe o debe busca se p obablemen e en el
diseño de la p egun a. No se especi icó de o ma p ecisa, a qué se hacía e e encia con "di ícil" y
" ácil". Po las con e saciones du an e las p uebas se sacó la imp esión de que los usua ios del
g upo 2 incluían en es e concep o el con enido del cu so, mien as los que los del g upo1 se
cen a on más en su diseño y manejo. El diseño del cues iona io debe se muy bien pensado y las
p egun as lo más p ecisas posibles. Va ios au o es ecomiendan una p e-e aluación con el único
in de comp oba la calidad del cues iona io (Shneide man, 1993).
El análisis in en ó demos a el alo de un mé odo sis emá ico pa a la e aluación y el ediseño de
ma e ial Web pa a la enseñanza, incluso con g upos de usua ios pequeños. La es a egia elegida
e eló al as de diseño an e io men e no de ec adas y ayudó así a mejo a el p oduc o espe ando
las necesidades de usua ios " eales". Con el inc emen o ápido de uso del Web pa a la enseñanza
y ap endizaje hab á que en en a se a p egun as como: ¿Cuáles son los eque imien os
pa icula es de los es udian es como usua ios? ¿En qué se di e encian de o os usua ios del Web?
En es e sen ido se á necesa ia la elabo ación de guiones de diseño especí icos pa a uso
pedagógico, basados en análisis sis emá icos como el p esen ado en es e abajo.
Re e encias bibliog á icas.
BRADLEY, D.R. y o os (1979. Type I e o a e o he chi squa e es
o independence in c ables ha ha e small expec ed
equencies. Psychological Bulle in, 86, 1200-1297.
EEKMA, A.. y COLLIS, B. (1996). Design guidelines o WWW-based
cou se en i onmen s. Telek onikk (No wegian Telecom Resea ch
Jou nal), 3/4, 44-51.
ENGEL, C. y CASARES, J. (1998). Remo e Lea ning o e B oadband
Ne wo ks. A pilo expe ience wi h ATM, en: P oceedings o he
Fou h In e na ional Con e ence on Compu e Aided Lea ning and
Ins uc ion in Science and Enginee ing CALISCE98,Gö ebo g,
Suecia, Junio 15-17, 1998.
HANNAFIN M. J. y PECK, K. L. (1988). The Design, De elopmen ,
and E alua ion o Ins uc ional So wa e. Macmillan, New Yo k,
1988.
JAMES, D. (1996). Design Me hodology o a Web-Based Lea ning
En i onmen . h p://www.lmu.ac.uk/lss/s a sup/desme h.h ml
LIKERT, R. (1932). A Technique o h Measu emen o
A i udes. A chi es o Psychology, 140.
SHACKEL, B. y RICHARDSON, S. (eds) (1991). Human Fac o s o
In o ma ics Usabili y. Camb idge Uni e si y P ess, Camb idge, UK.
SHNEIDERMAN, B. (1993). Designing he Use In e ace.
S a egies o E ec i e Human-Compu e In e ac ion. Segunda
edición, Addison Wesley, Reading, MA..
SMITH, C. y MAYES, T. (1996). Usabili y Guide. Telema ics
Applica ions o Educa ion and T aining. Ve sión 2.1. Camb idge
Lea ning Sys ems.
VAN RENNES, L. y COLLIS, B (1998). Use In e ace Design o
WWW-Based Cou ses: Building Upon S uden
E alua ions. en: P oceedings o ED-MEDIA/ED-TELECOM’98,
F eibu g (Alemania).
Pa e del abajo ue inanciado po la Comisión Eu opea (DEMOS ET-
1007) y la CICYT (TEL97-0435).