Diseño de Interfaces Web
Diseño de Interfaces Web
Diseño de Interfaces Web
ÍNDICE
INTRODUCCIÓN
- iconos
- mapas sensibles
BIBLIOGRAFÍA
INTRODUCCIÓN
La Psicología y la Ingeniería tienen una rama de estudio en común, que son los
factores humanos; esta especialidad trata de averiguar cuáles son las causas que
influyen en el comportamiento humano. Una de ellas está relacionada con el
entorno del hombre y la interfaz de los objetos que maneja; esto se aprecia de
forma muy clara cuando lo que se maneja son máquinas, dentro de las cuales se
incluyen los ordenadores. Por eso es muy importante diseñar interfaces que
optimicen la relación hombre-maquina.
Para hacer posible la comunicación entre máquinas es necesario que cada una
posea una identificación que la haga única y que permita recibir la información
que le es enviada. Lo que se hace es dotar a cada máquina conectada a Internet
un número IP y una DNS (Domain Name Server), el primero con número y el
segundo con letras.
http://hipatia.uc3m.es/~nogales/HTML/css2.html
World Wide Web, 3W, WWW o web, no importa qué denominación se escoja,
pues se usan indistintamente para referirse al medio por antonomasia para
"navegar" por Internet. Unos utilizan el masculino al intentar castellanizar el
término inglés -el web-, otros prefieren usar el femenino por corresponder la
traducción a este género -la web, la telaraña-.
Sea como sea, se conoce con este nombre al sistema preparado para recorrer
diferentes páginas web dispuestas en servidores accesibles desde cualquier
ordenador conectado a la Red y enlazadas unas con otras conformando una
estructura similar a la de la tela de araña.
Las negociaciones entre los países que conformaban el CERN y las instituciones
estadounidenses interesadas en el proyecto web dieron lugar a la creación del
W3 Consortium en Boston (Massachussetts) en 1994. En él participan el CERN,
el Institut National de Recherche en Informatique et en Automatique de Francia
(INRIA) y el Massachussetts Institute of Technology (MIT).
HIPERTEXTO E HIPERMEDIA
o Qué es
o Ventajas y desventajas
o Historia
o Consejos a los autores de hipertextos
Qué es el hipertexto
Si nos centramos en una situación más científica, no tenemos más que hojear
cualquier libro de corte investigador y comprobaremos que muchas de sus
páginas están plagadas de referencias bibliográficas a fuentes que tratan del
mismo tema, que lo amplían o que dan otra visión diferente, y de citas textuales
de autores que ofrecen determinada información relevante sobre ese asunto. Esto
ocurre debido a que nuestra mente es por naturaleza hipertextual y no podemos
evitar relacionar conceptos, personas y situaciones.
El término de hipertexto fue acuñado por Ted Nelson en los años sesenta, y se
ha mantenido con éxito hasta hoy en día. Ligado a este concepto nace el de
hipermedia para denominar a los documentos de estructura hipertextual que
combinan texto, imagen y sonido, es decir, la unión del hipertexto con el
multimedia. Un ejemplo de hipermedia son las enciclopedias y los diccionarios
electrónicos.
Para paliar esta sensación de estar perdido se han ideado herramientas que guían
al usuario y le ayudan a encauzar su camino. Los creadores de hipertextos
pueden ofrecer una organización que facilite un cierto orden, por ejemplo
índices jerárquicos, mapas de la estructura del documento, así como opciones de
"volver a la página anterior", "volver a la página principal", marcas que indican
qué nodos se han pulsado anteriormente, mapas que indican el recorrido
realizado hasta el momento. Parece ser que es conveniente que el documento se
articule en torno a una estructura jerárquica y se complete mediante relaciones
asociativas, como ocurre en el proyecto Xanadu de Ted Nelson. Otras
herramientas que facilitan la orientación en el camino de la lectura son las que
permiten saber al usuario que recorrido ha seguido hasta llegar a un punto y las
que le dejan añadir marcas a las que pueda volver más adelante. También
conviene que los sistemas dispongan de índices alfabéticos y de búsqueda por
palabras clave para lograr recuperar aquella información concreta que se
necesite.
Pero el lugar que dio nacimiento al sistema hipertextual por antonomasia fue el
Centro Europeo de Investigación Nuclear (CERN) de Ginebra; allí, Tim
Berners-Lee tomó la estructura del hipertexto con el fin de crear un sistema de
trabajo para los físicos del CERN. Este proyecto fue el inicio de lo que hoy
conocemos como World Wide Web.
Su origen se produjo a la par que el del web, ya que se trata del lenguaje que
sirve para crear páginas web, también llamadas páginas HTML. Desde su
nacimiento ha estado sometido a incesantes cambios; de hecho ha habido
diversas versiones: 1.0, (en 1993), 2.0 (en 1995), 3.0 (en 1995), 3.2 (en 1997),
4.0 (en 1997, revisada en 1998). La última versión está disponible en el sitio
web del W3 Consorcium en la dirección http://www.w3.org/TR/1998/REC-
html40-19980424. Existe una guía en español elaborada por el Dr. Nogales
(profesor de la Universidad Carlos III de Madrid) en la que se comenta punto
por punto la especificación 4.0 de HTML:
http://hipatia.uc3m.es/~nogales/HTML/html40.html
Como aspecto novedoso de esta versión respecto a la anterior hay que destacar
que se da una reorientación del HTML hacia su función primitiva de marcado de
la estructura y semántica del documento, dejando lo relacionado con el aspecto
físico a las hojas de estilo y desaconsejando el uso de ciertos elementos o
atributos relacionados con la presentación del documento. Además, esta última
versión es capaz de representar diversos alfabetos y de utilizar dispositivos
diferentes a la pantalla del ordenador (por ejemplo la televisión, la impresora, un
dispositivo Braille...).
Poco vamos a decir acerca de este lenguaje, ya que para el objetivo del presente
estudio no se requiere un conocimiento profundo sino tan solo unas nociones
que ayuden a comprender cómo están creadas las páginas web que visualizamos
desde el navegador. Por tanto nos limitaremos a hacer un breve repaso de su
estructura.
Todo documento HTML debe comenzar y finalizar con la etiqueta que indica
que se trata efectivamente de ese tipo de documento, y que es <HTML> al
comienzo y la misma de cierre al finalizar, </HTML>.
Una vez señalado el título se continúa con el cuerpo del documento, todo él
encerrado por la etiqueta <BODY> y su homónima de cierre </BODY>. Dentro
del cuerpo se coloca el contenido de la página web: textos, imágenes, mapas
pulsables, tablas, formularios. La información se puede estructurar en párrafos y
o secciones con cabeceras de distinto nivel, enlaces a otras partes del mimo
documento, de otros situados en la misma carpeta o en otras que estén en ese
servidor o incluso de ficheros en otros servidores.
Hasta el momento hemos hablado de la creación de hojas de estilo por parte del
autor de los documentos, pero no son los únicos que pueden decidir acerca de la
presentación de la información. También el usuario/lector puede definir cómo
quiere que se le presente lo que va a leer, y lo hará desde su visualizador; éste a
su vez, puede que tenga una hoja de estilo introducida por defecto o varias para
dar a elegir al usuario.
Pero, ¿por qué está cambiando la metáfora?, ¿por qué ya no resulta adecuada la
idea del escritorio?. La respuesta es fácil, el usuario antes gestionaba la
información que almacenaba en su disco duro, y lo hacía con la metáfora del
escritorio (documentos en carpetas, carpetas dentro de carpetas mayores como si
fueran cajones y estanterías, cambiar documentos y carpetas de sitios, sacar
copias para llevar a otro lado...). Ahora, con el acceso a información distribuida
en servidores de todo el mundo, ya no tiene sentido almacenar grandes
cantidades de datos en el disco local, pues se puede consultar en línea sin
necesidad de ocupar espacio en el disco; por tanto, los documentos que se usan
ya no son sólo los almacenados, y la metáfora de organizar el escritorio de
trabajo queda obsoleta. La nueva metáfora de la navegación está sustituyendo
con éxito a aquella.
La interfaz de la web se ha hecho tan popular que está llegando al mundo del
PC: los sistemas de exploración de los sistemas operativos (pensemos en
Windows) se están cambiando por una forma de navegación interna en el disco
duro idéntica a la acostumbrada en Internet basada en enlaces que llevan de un
directorio a otro. También los creadores de aplicaciones ofimáticas han
integrado el sistema de hipertexto en sus programas: en un documento de Word,
de Excel o de otras aplicaciones se pueden crear enlaces a otros documentos, no
importa si están en el disco duro en el que se trabaja, en otro de la red local o en
un servidor externo.
Según Conklin (1987) el hipertexto suponen una gran ventaja para aplicar al
web ya que:
En una página web hay dos tipos de zonas en función de si suponen un cambio o
no, es decir, hay zonas que al pinchar en ellas no ocurre nada y otras en las que
se produce una acción; esa acción puede ser de dos tipos:
o un enlace. Puede llevar a otra parte de esa página web, a otra página del
mismo sitio web o a una de otro servidor distinto del de origen, o
también el destino puede ser un servidor gopher o un servidor ftp.
o una ejecución. Por ejecución se entiende el resto de casos, por ejemplo
abrir un archivo, descargarlo, ejecutar un programa, lanzar una
aplicación (la de correo electrónico es muy frecuente que se lance al
pulsar un ancla que es una dirección de correo electrónico).
La zona donde al pinchar ocurre alguno de estos casos puede ser tanto un texto
como una imagen. Se sabe que se trata de ese tipo de zona porque al pasar sobre
ella con el puntero del ratón éste se convierte en una mano. Además,
normalmente las partes de texto que se pueden pinchar van en un color diferente
al del resto (azul casi siempre) y subrayadas, de manera que a simple vista
también se pueden reconocer. En el caso de las imágenes no siempre está claro
si hay un enlace hasta que no se pasa sobre ellas.
Diseñar una página web cuya interfaz sea adecuada para la finalidad que se
persigue no es algo sencillo ni para lo que se pueda decir ¡hágalo usted mismo
en unos minutos!, sino que es una tarea para expertos.
Snyder (1996) dice que crear un sitio web requiere un equipo con cuatro
personas, cada una experta en una de las siguientes materias:
o El cabeza del equipo será un diseñador, él tendrá la visión general del
web.
o Otro será un programador que conozca el HTML y los programas
necesarios para hacer el web.
o El tercero será un diseñador gráfico y un diseñador de interfaces de
usuario.
o El cuarto es el usuario, que probará la página web y opinará sobre ella.
o Los que copian el HTML saben hacer páginas simples, pero no suelen
tener idea de diseño de interfaces; se trata de diseñar sitios completos, no
páginas sueltas y desconectadas que no tengan estructura de navegación
entre ellas.
o Los profesionales de interfaces de usuario (UI) sí saben diseño, y si
tienen idea de hipertextos pueden lograr estructuras de navegación
buenas. En las interfaces tradicionales lo más importante era crear
diseños que hicieran a los sistemas fáciles de aprender y eficientes de
usar; al diseñar páginas web eso también es importante (si el usuario no
lo entiende se irá a otro sitio), pero está cobrando relevancia el aspecto
en cuanto a la atracción que produce.
o Las agencias publicitarias diseñan webs, pero a menudo no aprovechan
las posibilidades de interacción que les ofrece el medio. Ellas están
potenciando lo que llaman un "nuevo medio", refiriéndose a la
publicación en línea.
UN USUARIO ACTIVO
Algunos creadores han optado por asemejar su interfaz a la que acostumbramos
a ver en la televisión: con publicidad. El motivo es la financiación de las páginas
web. Este modelo no es adecuado para imitar, ya que frente a la televisión el
telespectador es pasivo, no puede controlar lo que va a aparecer en ella, mientras
que frente a la pantalla y dentro de la web, el internauta decide hacia dónde
quiere ir, qué tipo de información quiere recibir. No se trata ni mucho menos de
una lucha televisión/internet, cada uno tiene sus puntos positivos(Brueckner
1996): la televisión ofrece mayor resolución para ver imágenes en movimiento,
tiene mayor calidad de sonido, entretiene de forma pasiva y tiene cortes de la
programación para la publicidad; el web es bueno para la comunicación entre las
personas, entretiene de forma activa y permite elegir a quien lo usa qué tipo de
información desea recibir.
La interfaz para estas aplicaciones web debe ser lo más interactiva posible,
aunque cada uno utiliza sus páginas con la finalidad que quiere, y muchos lo
hacen para dar propaganda de su empresa y sus productos sin ofrecer la
posibilidad de nada más.
La web se usa a menudo para ofrecer información no estable, es decir, que varía
con el tiempo (precios, clima, noticias...); las interfaces que presentan este tipo
de información variante deben ser diferentes a las que mantienen datos estáticos.
Es importante variar la web regularmente para que los usuarios tengan que
visitarla frecuentemente si quieren estar al día de la información que hay en ella.
Es más probable que un usuario regrese a una página con datos cambiantes que a
una estática, porque una vez leída pierde interés. Aquí se dan algunos consejos
para los creadores de páginas que varían en el tiempo:
o No poner fecha a la información a menos que se actualice a menudo, ya
que los usuarios no querrán visitar de nuevo un sitio con datos no
actuales.
o Indicar cada cuánto tiempo se actualiza la web. Actualizar de forma
automática. Dejar que los usuarios decidan con qué frecuencia desean
obtener los nuevos datos.
o Si los usuarios pueden actualizar la información por sí mismos, dejarles
hacerlo.
o Ofrecer un apartado de "Novedades" que ponga de relieve la información
más actual.
o Determinar si conviene tener contadores de visitantes de la página: si son
pocas no interesa que lo vean.
o Usar fechas de expiración; si la información caduca en un día
determinado es preferible colocarla en un archivo al que puedan acceder
los usuarios, y así mantener directamente en la página lo actual y en
archivos la información retrospectiva.
Las claves del éxito de un sitio web están en dos puntos: su contenido y el
diseño de su interfaz. El primer punto deberá ser cuidado de la misma forma que
se hace con documentos en papel, pero el segundo requiere unas reglas propias.
Como norma general se puede decir que lo que se busca con un buen diseño de
interfaz web es la comodidad de los usuarios. Como en cualquier servicio, lo que
interesa es tener el mayor número de usuarios posible, por lo tanto es
fundamental que les agrade nuestro sitio.
Un primer paso para proceder al diseño de un sitio web –una vez determinado el
contenido- es conocer que tareas van a querer los usuarios realizar a través de él.
Puede ser que quieran encontrar información, conocer un producto, pedirlo,
descargar una demo, obtener soporte técnico, contactar con alguna persona (el
encargado de ventas, algún empleado de la empresa, el webmaster...), descargar
drivers y actualizaciones...
Facilidad en la navegación
Sobre la selección de opciones hay que decir quelos objetos típicos de los GUIs
como botones, listas, menús desplegables, cajas de texto están disponibles para
usar en interfaces web, pero debe elegirse bien cuando recurrir a cada uno, ya
que un uso inapropiado puede bajar la productividad de la web, aumentar los
errores y proporcionar resultados no deseados por el usuario. Para utilizarlos
debidamente es imprescindible conocer la intención de los usuarios. Las pruebas
de la web nos revelarán si se han elegido bien o no los objetos que en ella se
incluyen.
En las interfaces como Windows estamos acostumbrados a que al pulsar una
opción de un menú se produzca una acción (abrir un documento, abrir un menú,
copiar...), en cambio no ocurre lo mismo cuando seleccionamos una opción de
un menú en una página web, pues para que ocurra la acción es necesario pulsar
el icono de aceptación y envío ("summit" o "enviar") y después esperar la
respuesta. Pensemos en los motores de búsqueda: primero se teclean los
términos de consulta, se crea la cadena de interrogación con sus operadores
correspondientes, a veces se elige de un menú el idioma en el que se quieren los
resultados y el tipo de documentos que se desea recibir, y una vez que está
preparado se envía la consulta y se espera el listado de direcciones de interés.
El uso de menús desplegables está aconsejado para usar en páginas web cuando
se debe seleccionar una opción de entre muchas (unas 10), pero no si se trata de
unas pocas posibilidades, en cuyo caso se recomienda el uso de botones tipo
radio, donde sólo uno es elegible (radio buttons).
o Siempre debe quedar claro qué partes de la página son enlaces y cuáles
no, sobre todo cuando se trata de imágenes. Para aclarar esto es
conveniente que las partes pulsables queden bien identificadas como
tales, por ejemplo dándoles forma de botón y usando colores
normalizados para indicar cuando un texto es un enlace (azul para
enlaces no visitados y rojo o púrpura para los visitados).
o En los puntos dónde hay un enlace, se debe hacer saber qué información
aguarda tras él estableciendo una relación entre la palabra o imagen que
sirve de nodo y el contenido del documento que se referencia.
o Se debe poner una etiqueta textual a todos los gráficos que supongan un
enlace.
ICONOS
Las etiquetas que acompañan a los iconos no deben estar incluidas en el propio
gráfico, sino que deben ser texto en HTML. Los motivos que se dan son varios:
el gráfico tiene menos tamaño y por tanto no se ralentiza la carga de la página,
se puede cambiar el idioma del mensaje y se ajusta mejor a la resolución de los
monitores.
MAPAS SENSIBLES
Una alternativa a los menús de selección son los mapas pulsables. Tienen algún
inconveniente: al tratarse de imágenes tardan más en cargarse que el texto, y
además, si están mal diseñados, pueden hacer perder mucho tiempo al usuario,
ya que no elegirá el camino adecuado como primera opción (por ejemplo si las
distintas opciones se encuentran demasiado cerca es fácil pulsar sobre la que no
es).
De los mapas de regiones que existían en las interfaces tradicionales, en los que
había que indicar los códigos de latitud y longitud, a los mapas pulsables de hoy
en día o a los simuladores de realidad virtual hechos en VRML hay una
diferencia enorme. Eso es un buen ejemplo de aplicación del diseño de
interfaces a la web, ya que se explotan sus nuevas posibilidades que no existían
en los GUIs.
Comodidad en la lectura
Un buen ejemplo de cómo se pueden aplicar los test de uso al diseño de webs es
el que presentan Jacob Nielsen y Darrell Sano (1995), quienes los llevaron a
cabo en el diseño del nuevo sitio web de Sun Microsystems.
http://www.sun.com/technology-research/sun.design/sunweb.html
Sirva como ejemplo de buenos diseños web la recopilación que se hace en:
http://www.highfive.com, y como ejemplo de malos diseños la que hay en:
http://www.suck.com.
Tendencias más novedosas son las que se están dando ya en sistemas de tres
dimensiones: la realidad virtual permite al usuario integrarse mucho más en el
sistema informático y sentir sensaciones lo más parecido posible a la realidad.
Las interfaces de realidad virtual están yendo más allá del ocio y de la
simulación de aparatos, llegando a ser implementadas en sistemas de
recuperación de información, como se está haciendo en el proyecto IRVAIE
(proyecto de investigación de las universidades de Granada, Alcalá de Henares,
Extremadura y Carlos III).
BIBLIOGRAFÍA BÁSICA
Bolter, J.D. (1991). Writting space: the computer, hypertextm and the history of
writting. Hillsdale, Nueva Jersey: Erlbaum.
Brueckner, R. (1996). "Taking on TV: TV is a bad role model for the web".
Internet World (jul.), pp. 59-60.
Bush, Vannenar. (1945)."As we may think". Atlantic Mounthly, 176 (july), pp.
101-108.
Canals Cabiró, I. (1990). "El concepto de hipertexto y el futuro de la
documentación". En: Terceras Jornadas de Documentación Automatizada,
"Documat 90". Palma de Mallorca: Universitat de les Illes Balears, pp. 49-76.
Chandler, D.M. (1994?). Running a perfect web site. Indianapolis, Indiana: Que
Corporation.
Dern, D. (1996). "Just one more click..." Computer World, 8(jul.), pp. 93-96.
Eager, W. (1994). Using the World Wide Web. Indianapolis, Indiana: Que.
García Marco, Javier; Tramullas Saz, Jesús. (1996). World Wide Web:
Fundamentos, navegación y lenguajes de la red mundial de información.
Madrid: Ra-Ma.
Heller, H.; Rivers, D. (1996). "So you wanna design for the web". ACM
Interactions, (mar.), pp. 19-23.
Horton, W. (1994). The Icon Book: Visual Symbols for Computer Systems and
Documentation. New York: Wiley.
Horton, W. (1994). Designing and writing online documentation. 2nd ed. New
York: Wiley.
Horton, W. (et al.). (1996). The web page design cookbook: all the ingredientes
you need to create 5-star web pages. New York: Wiley.
Langa, F. (1996). "Seven deadly web sins". Windows Magazine, (jun.), pp. 11-
14.
Mandel, T.(1997). The elements of user interface design. New York: Wiley.
Marcus, A. (1992). Graphic design for electronic documents and user interfaces.
New York: ACM Press, Addison-Wesley.
Nielsen, J. (1995). "Who should you hire to design your web site?". The Alert
Box (oct.), http://www.useit.com/alertbox/9510.html
Nielsen, J. (1996). "Top ten mistakes in web design". The Alert Box (may),
http://www.useit.com/alertbox/9605.html
Nielsen, J. (1997). "Be succinct! (Writing form the web)". The Alert Box (mar.),
http://www.useit.com/alertbox/9703b.html
Nielsen, J. The Alertbox, http://www.useit.com/alertbox. Publicación periódica
electrónica.
Nielsen, J., Galdo, E.M., Sprung, R.C., and Sukaviriya, P.N. (1990). "Designing
for International Use". Proceedings of ACM CHI '90 Conference on Human
Factors in Computing Systems, pp. 291-294.
Norman, D.A. (1990). "Why interfaces don't work". En: Laurel, B. (ed.). The art
of human-computer interface design. Reading, MA: Addison-Wesley.
Norman, D.A. (1993). Things that make us smart: Defending human attributes in
the age of the machine. Reading, MA: Addison-Wesley.
Patton, P. (1993). "Making metaphors: User interface design". ID 40 (2), pp. 62-
66.
Tufte, E.R. (1989). Visual design of the user interface. Armonk, NY: IBM
Corporation.