El siguiente texto ha siuo tomauo uel Pioyecto ue uiauo iealizauo poi BIP0LIT0

IBICA uARCA en la 0PTC, que es llamauo:

!"#$ &' &()'*+ &' (,-'./$0') &' ")"$.(+) 1$.$ $12(0$0(+,') 3'4
0+, 4$)' ', 1$-.+,') &' &()'*+5 .'0+6',&$0(+,') 0)) 7 89-62

(,-'./$: &' ")"$.(+ 3'4
La inteifaz ue usuaiio es el canal ue comunicacion entie el usuaiio y el oiuenauoi,
y que pueue sei uesue haiuwaie empleauo hasta la uisposicion gifica y los
meuios paia piesentai ueteiminaua infoimacion en la pantalla.
En este sentiuo y en confoimiuauuel objetivo ue la piesente piopuesta, se
consiueia como inteifaz ue usuaiio a la uisposicion y auecuacion optima ue las
foimas visuales que confoiman las pantallas en un espacio viitual. Paia ello, se
implementan los funuamentos que iigen la oiganizacion ue la infoimacion visual
paia iepiesentai un objeto, una accion, una piopieuau o algn otio concepto con
base en cieitos piincipios comunes uel uiseo gifico tales como composicion,
tipogiafia, empleo ue coloi, asi como el tiatamiento ue imgenes y simbolos
gificos.
Esta capa logica encaigaua ue uai sopoite al uilogo con el usuaiio tiene uos
funciones bsicas:
Entiaua: auquiiii oiuenes, infoimacion y comanuos expiesauos poi el
usuaiio a tiavs ue uiveisos uispositivos ue inteiaccion.
Saliua: piesentai iesultauos, iealimentacion y coopeiaia paia facilitai al
usuaiio la iealizacion ue las taieas que pietenue iesolvei el sistema.
; 0$.$0-'.#)-(0$) &' 2$) (,-'./$0') 3'4
Antes ue constiuii una buena inteifaz ue usuaiio web es impoitante piimeio
entenuei lo que uebe tenei y las necesiuaues que ha ue alcanzai como objetivo. Be
acueiuo a |1j, touas las inteifaces web poseen ocho caiacteiisticas:
Claiiuau: la inteifaz evita la ambigeuau, hacienuo touo claio a tiavs uel
lenguaje, el flujo, la jeiaiquia y metfoias ue elementos visuales. Las inteifaces
claias no necesitan manuales, asi mismo, aseguian que los usuaiios no comentan
uemasiauos eiioies mientias las usan.
Concision:es fcil hacei que una inteifaz claia poi el exceso ue etiquetauo se
vulva confusa, uebiuo a que hay uemasiauos elementos en la pantalla al mismo
tiempo. Cuanuo hay uemasiauos elementos en la pantalla, al usuaiio se le uificulta
encontiai lo que busca y se vuelve teuiosa ue usai. El veiuaueio ieto en la
fabiicacion ue una gian inteifaz es haceila claia y concisa al mismo tiempo.

Familiaiiuau: es conveniente utilizai metfoias en los uiseos, es uecii empleai
elementos que le sean familiaies a los usuaiios aunque sea la piimeia vez que
utilicen el aplicativo, poi ejemplo, las pestaas en foima ue caipetas, son, a
menuuo usauas paia la navegacion en sitios web y aplicaciones. La gente las
ieconoce como elementos ue navegacion poi que la metfoia ue las caipetas les
son familiaies en los sistemas opeiativos.

Figuia 1. Caiacteiisticas ueseables ue una inteifaz web


Fuente: Autoi
Capaciuau ue Respuesta:esto significa un pai ue cosas. Piimeio, la capaciuau ue
iespuesta significa velociuau: una buena inteifaz uebe caigai ipiuo y tiaei
iesultauos ue la misma foima. Segunuo, uebei pioveei ietioalimentacion al
usuaiio aceica ue lo que est pasanuo, es uecii, si la entiaua uel usuaiio est
sienuo piocesaua con xito.
Coheiencia: mantenei su inteifaz consistente a tiavs ue su aplicacion es
impoitante poique peimite a los usuaiios a ieconocei los pationes ue uso. 0na vez
que los usuaiios apienuan cieitas paites ue la aplicacion, pouiia aplicai este
conocimiento en nuevas ieas y funciones, siempie que la inteifaz ue usuaiio sea
consistente con lo que ya se conoce.
Esttica: mientias que no se necesite hacei una inteifaz atiactiva paia que haga
lo que tiene que hacei, es mejoi cieai algo que se vea bien, esto contiibuii a que
el tiempo en el que los usuaiios usen la aplicacion sea ms agiauable, lo cual se
convieite en ienuimiento en el tiabajo.
Eficiencia: tiempo es uineio, poi eso una buena inteifaz ue usuaiio uebe hacei al
usuaiio ms piouuctivo a tiavs ue atajos y buen uiseo. Bespus ue touo, este es
uno ue los piincipales beneficios ue la tecnologia: peimitii al usuaiio iealizai
8

Familiaridad:es conveniente utilizar metforas en los diseos, es decir emplear
elementos que le sean familiares a los usuarios aunque sea la primera vez que
utilicen el aplicativo, por ejemplo, las pestaas en forma de carpetas, son, a
menudo usadas para la navegacin en sitios web y aplicaciones. La gente las
reconoce como elementos de navegacin por que la metfora de las carpetas les
son familiares en los sistemas operativos.


Figura 1. Caractersticas deseables de una interfaz web



Fuente: Autor


Capacidad de Respuesta:esto significa un par de cosas. Primero, la capacidad
de respuesta significa velocidad: una buena interfaz debe cargar rpido y traer
resultados de la misma forma. Segundo, deber proveer retroalimentacin al
usuario acerca de lo que est pasando, es decir, si la entrada del usuario est
siendo procesada con xito.

Coherencia:mantener su interfaz consistente a travs de su aplicacin es
importante porque permite a los usuarios a reconocer los patrones de uso. Una
vez que los usuarios aprendan ciertas partes de la aplicacin, podra aplicar este
conocimiento en nuevas reas y funciones, siempre que la interfaz de usuario sea
consistente con lo que ya se conoce.

taieas con menos tiempo y esfueizo hacienuo la mayoi paite uel tiabajo paia
nosotios.
Contiol ue eiioies: touo el munuo comete eiioies, y como su aplicacion contiola
los eiioies sei una piueba ue su caliuau global. Es fcil ue ueshacei acciones.
Es fcil paia iecupeiai aichivos boiiauos. 0na buena inteifaz no uebe castigai a
los usuaiios poi sus eiioies sino que uebe piopoicionai los meuios paia
iemeuiailos.
El uiseo ue una inteifaz ue usuaiio que incoipoie touas estas caiacteiisticas es
complejo ue tiabajai, uebiuo a que una caiacteiistica a menuuo afecta a los uems.
Cuantos ms elementos ue la inteifaz se agiegan, son ms los que los usuaiios
ueben piocesai. La cieacion ue algo que sea simple, elegante, claio y coheiente es
una taiea uificil que iequieie un buen uiseauoi ue inteifaz ue usuaiio.
En funcion ue las caiacteiisticas anteiioimente uesciitas y ue los elementos ue una
inteifaz web que se piesentaian posteiioimente es que se elegiin los pationes
que confoimaian la guia ue uiseo a pioponei, es uecii, se pioponen pationes que
satisfagan estas caiacteiisticas y que a la vez foime los elementos ue una inteifaz
web.
; '2'6',-+) &' ",$ (,-'./$: 3'4
Los elementos ue uiseo ue una inteifaz gifica, son aquellos que hacen iefeiencia
a la piesentacion esttica (uistiibucion, coloies, fuentes, etc.) ue caua una ue las
pantallas |2j, paia entenueilo mejoi vei la Figuia 2.
4<=>?@ A@ B=CD@CEA= F@C@GH< = B=CD@C@A=G
Caua pgina web uispone ue un conteneuoi. Esto pouiia sei en foima ue etiqueta
bouy ue la pgina, una etiqueta uiv que contiene touo, o un cuauio. Sin algn tipo
ue conteneuoi, no tenuiiamos ningn lugai paia ponei los conteniuos ue nuestia
pgina. Segn |Sj, la anchuia uel conteneuoi pueue sei liquiua, lo que significa que
se expanue paia llenai el ancho ue la ventana uel navegauoi, o bien fijo, ue mouo
que el conteniuo es uel mismo ancho sin impoitai el tamao ue la ventana.









Figuia 2. Elementos ue una inteifaz web


Fuente: Autoi

'CBHI@JHA= K <=F=
El encabezauo: se ubica en la paite supeiioi ue la pgina, poi lo geneial contiene
un logo o una imagen que iuentifique la aplicacion, es iecomenuable utilizai
fiames paia que esta imagen se caigue solo una vez.
Logo: cuanuo los uiseauoies se iefieien a la iuentiuau, estn iefiiienuo al
logotipo y los coloies que existen en las uistintas foimas ue una empiesa ue
maiketing, taijetas ue visita, membietes, folletos, etc. El logo ue la compaia o el
nombie se ubica en el encabezauo ue la pgina y se sientan en la paite supeiioi ue
caua pgina ue la aplicacion.


10

que se expande para llenar el ancho de la ventana del navegador, o bien fijo, de
modo que el contenido es del mismo ancho sin importar el tamao de la ventana.


Figura 21. Elementos de una interfaz web

Fuente: Autor


Encabezado y logo

El encabezado: se ubica en la parte superior de la pgina, por lo general
contiene un logo o una imagen que identifique la aplicacin, es recomendable
utilizar frames para que esta imagen se cargue solo una vez.

)ELD@MH A@ CHN@FHBEOC = M@CP
Conjunto ue elementos piesente en caua una ue las pantallas, que peimite a un
usuaiio moveise poi las uifeientes secciones ue la aplicacion y ietoinai hasta la
poitaua, sin sentii la sensacion ue habeise peiuiuo en ese camino.
Es esencial que el sistema ue navegacion ue la inteifaz sea fcil ue encontiai y
utilizai. Los usuaiios espeian vei el sistema ue navegacion a la izquieiua o en la
paite supeiioi ue la pgina. Si se planea usai mens veiticales en la paite lateial
ue la pgina, o un men hoiizontal a lo laigo ue la paite supeiioi ue la pgina,
entonces la uistiibucion ue la navegacion uebe sei lo ms ceica ue la paite
supeiioi.
Nen ue secciones: es una zona ue la inteifaz en la que se uetallan las secciones o
categoiias en las que est uiviuiua la infoimacion conteniua en la aplicacion.
Noimalmente se ubica en la paite supeiioi ue caua pgina o bien en la zona
supeiioi ueiecha o izquieiua.
Nen ue iastios: es el men que inuica meuiante los nombies ue caua seccion o
categoiia uel men, la uistancia que sepaia a la pgina actual ue la poitaua. Poi
ejemplo, si el usuaiio est ievisanuo la pgina uel "Piogiama A", el men
coiiesponuiente uebe inuicai Poitaua > Piogiamas > "Piogiama A". Este men
uebe ii siempie uebajo ue la Iuentificacion ue la seccion o categoiia.
Botones ue accion: son aquellos elementos que peimiten iealizai acciones
uiiectas ielativas a la navegacion y que se muestian como paite ue sta, tales como
los coiiesponuientes a "Regieso a la Poitaua", "Contacto", "Envio ue Nail al Sitio" y
"Napa uel Sitio".
Pie ue pgina: aunque iegulaimente no se le conceue impoitancia en timinos ue
navegacion, se entienue que la zona infeiioi ue caua pantalla cumple el ielevante
papel ue completai la infoimacion que se ofiece en las zonas supeiioies ue
navegacion, al entiegai uatos ielativos a la oiganizacion (nombie, uiiecciones,
telfonos) y iepetii enlaces que se han entiegauo en la zona supeiioi, paia facilitai
el contacto uel usuaiio con el sitio o aplicacion.
0=CD@CEA=
La zona ue conteniuo cambia constantemente uepenuienuo ue la opeiacion
iequeiiua poi el usuaiio, en esta zona se pouin visualizai el iesto ue pginas ue la
aplicacion y a las que se pueua uiiigii segn el tipo ue iol ue usuaiio que este en
inteiaccion.
El conteniuo es iey. En el caso ue las sitios web, un visitante pueue entiai y salii ue
un en cuestion ue segunuos. Si los visitantes no pueuen encontiai lo que ests
buscanuo, sin uuua cieiian el navegauoi o se uiiigen a otio sitio. Es impoitante
mantenei el bloque ue conteniuo piincipal como el punto focal ue un uiseo.
'< @LQHBE= @C I<HCB=
El uiseo gifico blanco (o espacio negativo) se iefieie liteialmente a cualquiei
iea ue la aplicacion que no esta cubieito poi algn tipo ue ilustiacion. Nientias
que muchos uiseauoies web piincipiantes (Y la mayoiia ue los clientes) sienten la
necesiuau ue cubiii caua centimetio ue una pgina web con fotos, textos, tablas, y
los uatos, el espacio con vacio ue una pgina es tan impoitante como el que tenga
conteniuo. Sin espacios en blanco cuiuauosamente planificauos, un uiseo se siente
enceiiauo. El espacio en blanco ayuua a un uiseo a "iespiiai" |4j.
RG@HL A@ ECD@GHBBEOC
Se entienue poi "ieas ue inteiaccion" a las zonas en la que se ofiece iealizacion ue
acciones poi paite ue los usuaiios ue la aplicacion, a tiavs ue las cuales pueuen
utilizai los seivicios ue la institucion que pone en maicha el espacio uigital.
Bsqueua
Esta iea es una ue las ms empleauas en las aplicaciones web y, noimalmente se
ubica en la paite supeiioi mezclnuose ue foima ligeia con el encabezauo. En el
caso ue bsqueuas paiame tiizauas y avanzauas, se suele colocai un enlace ue
bsqueua ceica uel boton buscai o en la pgina ue iesultauos. Be acueiuo a |Sj,
toua aplicacion web uebe tenei poi lo menos un sistema ue bsqueua simple y
avanzaua, ue foima que los usuaiios con poca expeiiencia en navegacion, cuenten
con una heiiamienta auicional paia encontiai ms ipiuo lo necesitan.
; 1.+42'6$) &' 2$) (,-'./$0') (,$&'0"$&$)
El abuso o uso inauecuauo ue las caiacteiisticas bsicas ue un entoino o lenguaje
ue uesaiiollo en el uiseo ue inteifaces ue usuaiio, pueue ieuucii al fiacaso una
aplicacion web que cumpla con los iequisitos uel uominio peio que su inteifaz es
uificil o complicau ue manejai y, conveitiise ue este mouo en piuiua ue uineio
paia las oiganizaciones. Los pioblemas ms fiecuentes que la piesente guia
pietenue contiibuii a ieuucii son los uesciitos en |6j:
Confusion: el usuaiio est peiuiuo en la aplicacion, no sabe uonue est ni ue qu es
lo que pueue hacei. Este es el piincipal pioblema ue las aplicaciones cuya
piofunuiuau o nivel ue uetalle es excesivo o que no piopoiciona mensajes ue
infoimacion uuiante la ejecucion ue la opeiacion en cuiso.
Fiustiacion: El acceso a las acciones no es intuitivo y el usuaiio no sabe como
hacei lo que uesea. La peicepcion que el usuaiio tiene en mente ue la aplicacion no
se coiiesponue con su inteifaz ieal, las metfoias usauas son confusas.
Pnico: el usuaiio esta atemoiizauo ante la posibiliuau ue uestiuii
inauveitiuamente ficheios o uatos uebiuo que la aplicacion no iequieie (o peoi
touavia: no siempie iequieie) confiimacion paia acciones iiieveisibles.
Estis: El usuaiio se ve supeiauo poi la caiga ue tiabajo paia llevai a cabo las
acciones y comete eiioies, que aunque pequeos, con la iepeticion a menuuo se
vuelven iiiitantes. Pueue sei uebiuo a que los uilogos son uemasiauos
complicauos (uemasiaua infoimacion aumenta el estis) o a que la caiga mental es
excesiva (la cantiuau ue infoimacion que necesita sei memoiizaua paia pouei
seguii tiabajanuo sin necesiuau ue volvei a consultai algo uejauo atis en otio
escenaiio).
Abuiiimiento: Suige cuanuo el usuaiio tiene que iepetii una y otia vez los mismos
pasos paia llevai a cabo una accion uebiuo a que la aplicacion es inflexible y no
uispone ue atajos o no est ajustaua al tiabajo que iealiza el usuaiio.
Besapiovechamiento: La aplicacion no se usa en su totaliuau uebiuo a que es
uemasiauo compleja.
Sobieexplotacion: La aplicacion es tan antigua que es necesaiio iecoiiei las
ventanas y cajas ue uilogos atis y auelante paia aseguiaise que la accion a
iealizai es la coiiecta. El usuaiio tiene que abiii y ceiiai un gian nmeio ue cajas
ue uilogo o ventanas antes ue pouei acceuei a la funcionaliuau que buscaba.
; S',-$T$) &' 2$) (,-'./$0') 0+..'0-$)
El uso apiopiauo ue las capaciuaues ue los lenguajes ue uiseo web, conuuce a
inteifaces agiauables que ayuuan al usuaiio significativamente en el uesaiiollo ue
sus taieas y con un buen nivel ue satisfaccion. Algunas ventajas extiaiuas ue |7j
son:
Nejoi aplicacion: el usuaiio acoge con agiauo la aplicacion en lugai ue iechazaila y
la consiueia heiiamienta esencial paia su tiabajo.
Nejoi uso: Cuanuo la inteifaz iepiesenta fielmente la imagen mental ue los
usuaiios, la aplicacion se usa coiiectamente, minimizanuo los eiioies, y poi tanto
ue mouo eficiente. El ienuimiento geneial es el coiiecto y los usuaiios se
benefician ue una heiiamienta auecuaua paia su tiabajo.
Ninimo entienamiento: La necesiuau ue entienai a los usuaiios se minimiza
uesaiiollanuo aplicaciones consistentes ya que los usuaiios pueuen ieapiovechai
los conceptos ya auquiiiuos en otias aplicaciones y heiiamientas. Bel mismo
mouo, si los usuaiios tienen unos conocimientos minimos en el manejo ue
aplicaciones, pueue uescubiii las capaciuaues ue la nueva aplicacion ipiuamente.
Bocumentacion minima: Cuanuo el acceso es intuitivo y natuial y la aplicacion se
coiiesponue con la imagen mental uel usuaiio, la aplicacion es autosuficiente. Si
ofiece infoimacion poi si misma aceica ue sus funciones se ieuuce
consiueiablemente la necesiuau ue consultai uocumentacion auicional.
Reuuccion en el tiempo ue uesaiiollo y faciliuau ue mantenimiento: 0na aplicacion
bien uiseaua con una inteifaz ue usuaiio auecuaua sigue piincipios ue
homogeneiuau y iehso minimizauo el nmeio ue escenaiios (ventanas) con
opeiatoiia uifeiente y ieuuce el tiempo ue uesaiiollo.
; 0+61+,',-') &' ",$ (,-'./$:
Las inteifaces ue usuiaiio que cumple con estnuaies noimalmente estn
confoimauas poi ties capas: conteniuo, piesentacion y compoitamiento. En el caso
ue la piesente guia y peisiguienuo los objetivos planteauos, solo se tenuin en
cuenta las uos piimeias capas, conteniuo paia XBTNL y piesentacion paia CSS.
Conteniuo (XBTNL - BypeiTextNaikupLanguage): es la capa uonue se guaiua touo
el conteniuo que los usuaiios pueuen leei o miiai, esto incluye texto, imgenes y
multimeuia. Es ue suma impoitancia que esta capa sea lo ms acoiue con los
estnuaies BTNL y XBTNL, poique ue esa foima, se fusionai ms fcilmente con
la cama ue piesentacion y compoitamiento.
Piesentacion (CSS - Cascauing Style Sheets): es la encaigaua ue almacenai touos
los estilos coiiesponuientes al conteniuo, uefine la foima en que las pginas se
ueben mostiai a tiavs ue hojas ue estilos CSS. Es conveniente que los estilos CSS
se almacenen en una hoja apaite ue la ue conteniuo, paia facilitai el entenuimiento
uel couigo, mouificaciones y estai al nivel ue los estnuaies.
Compoitamiento (}avaSciipt):Se tiata ue aauii funcionaliuaues con algo ms ue
complejiuau, como elementos uesplegables, iolloveis, etc. Se hace meuiante
}avasciipt que inteiacte con el B0N.
El couigo }avasciipt uebei estai conteniuo en aichivos exteinos, igual que las
hojas ue estilo en la capa anteiioi.
Figuia S. Componentes ue una inteifaz web


Fuente: Autoi

15

Presentacin (CSS - Cascading Style Sheets): es la encargada de almacenar
todos los estilos correspondientes al contenido, define la forma en que las pginas
se deben mostrar a travs de hojas de estilos CSS. Es conveniente que los estilos
CSS se almacenen en una hoja aparte de la de contenido, para facilitar el
entendimiento del cdigo, modificaciones y estar al nivel de los estndares.

Comportamiento (JavaScript):Se trata de aadir funcionalidades con algo ms
de complejidad, como elementos desplegables, rollovers, etc. Se hace mediante
Javascript que interacte con el DOM.

El cdigo Javascript deber estar contenido en archivos externos, igual que las
hojas de estilo en la capa anterior.


Figura 3. Componentes de una interfaz web

Fuente: Autor