Diseo de pginas de internet:

Gua basada en conceptos de usabilidad web

Jos Mario Serrano

Contenido
Prefacio.......................................................................................................................................................................1 Introduccin..............................................................................................................................................................2 Mdulo I. Cliente y usuario....................................................................................................................................3 Paso Paso Paso Paso 1. 2. 3. 4. Entrevista con el cliente.....................................................................................................................4 Contenido interactivo........................................................................................................................5 Anlisis del pblico meta..................................................................................................................6 Recabar informacin para el sitio.....................................................................................................7

Mdulo II. Informacin de contenido y diagrama de flujo...............................................................................8 Paso 1. Organizacin de contenido...............................................................................................................9 Paso 2. Preparar el contenido.......................................................................................................................10 Paso 3. Estructura del sitio y diagrama de flujo........................................................................................11 Mdulo III. Retcula y diseo.................................................................................................................................12 Paso Paso Paso Paso Paso 1. 2. 3. 4. 5. Retcula...............................................................................................................................................13 Color y tipografa..............................................................................................................................14 Comenzar a disear..........................................................................................................................15 Archivos para maqueta....................................................................................................................16 Optimizacin de imgenes para maqueta....................................................................................17

Mdulo IV. HTML y maquetacin.........................................................................................................................18 Paso 1. Hojas de estilo y tablas.....................................................................................................................19 Paso 2. Preparar el documento HTML.......................................................................................................20 Paso 3. Construir el documento HTML y documento para archivos FLASH......................................21 Mdulo V. Pruebas de usabilidad y publicacin.................................................................................................22 Paso 1. Compatibilidad con navegadores y navegacin prueba............................................................23 Paso 2. Prueba de usabilidad bsica............................................................................................................24 Paso 3. Publicacin y alta en buscadores....................................................................................................25 Consideraciones finales..........................................................................................................................................26

Prefacio
La gua para realizar pginas de internet basada en conceptos de usabilidad tiene como objetivo presentar los elementos y factores que se deben tomar en cuenta para la realizacin de una pgina usable y que nos ayude a disminuir sistemticamente la incidencia de errores de usabilidad que pueden presentarse en un proyecto de diseo web. La gua se presenta a travs de mdulos, cada uno abarcando alguna de las etapas bsicas del proceso de diseo. Como todo proceso de creacin, el diseo de un sitio de internet tambin implica un proceso de trabajo fundamental que abarca desde el acopio de informacin necesaria para definir los objetivos del sitio, la misin y todo el contenido, establecer un pblico meta para su anlisis, as como, definir el contenido en base a las necesidades de los usuarios y comenzar con el desarrollo del sitio propiamente dicho para su posterior publicacin. Los mdulos son los siguientes: I. Cliente y usuario. II. Informacin de contenido y diagrama de flujo. III. Retcula y diseo IV. HTML y maquetacin. V. Pruebas de usabilidad y publicacin. En cada uno de los mdulos se ofrece informacin tcnica y terica sobre algunos de los pasos ms importantes de cada etapa de diseo. Al final del documento (pgina 26) se explican algunas consideraciones sobre los que es y lo que no es esta gua y como aplicarla.

Introduccin
El concepto de usabilidad se define como la capacidad de un software de ser aprendido, comprendido, usado y ser atractivo para el usuario en condiciones especficas de uso o la efectividad, eficiencia y satisfaccin con la que un producto permite alcanzar objetivos especficos a usuarios especficos en un contexto de uso especfico. La usabilidad es la relacin de comunicacin ptima entre un hombre y una mquina. Los elementos principales dentro del concepto de usabilidad son el usuario, el contexto y la mquina y es el diseador grfico el encargado de visualizar una mejor forma de relacionar estos tres elementos. La funcionalidad de un sitio est establecida por la usabilidad. El desarrollo web se ha adaptado a un conjunto de tcnicas y conceptos que han facilitado el uso de navegadores, de sitios web y todo tipo de interfaces para realizar una tarea determinada. El elemento ms importante dentro de la usabilidad es el factor humano, lograr que un usuario utilice un sistema de la manera ms eficaz, sencilla y sin complicaciones ser posible mediante un adecuado diseo de usabilidad. Un diseo de usabilidad conlleva un anlisis previo del comportamiento humano y los posibles pasos que el usuario siga para realizar una tarea. Reduce el tiempo de aprendizaje de un sistema o software, disminuye el costo de asistencia a usuarios y optimiza los costos de diseo, disminuyendo gastos en rediseos y mantenimiento de sitios web, adems, incrementa la satisfaccin del usuario. El diseo centrado en el usuario se refiere al proceso mediante el cual se disea en base a las necesidades de un usuario. Muchos diseadores grficos desarrollan sitios web dando ms importancia al aspecto esttico, pero uno de los factores ms importantes dentro del desarrollo del sitio es su facilidad de uso. Los usuarios buscan esta facilidad, rapidez y funcionalidad. Un usuario no comprara en un sitio de comercio electrnico si ste fuera muy complicado de usar. Los diseadores grficos deben centrar su atencin haca estas necesidades y no incurrir en preferencias personales. Un proyecto exitoso lleva tras de s una extensa investigacin que define las verdaderas necesidades de un receptor final, es esa investigacin la base del diseo de usabilidad, definir el qu se va hacer?, para quin se va hacer? y cmo lo necesitan? Es fundamental para disear un sitio web usable, pero responder a estas preguntas puede ser difcil si no se cuenta con una metodologa de trabajo y un sentido investigativo por parte del diseador.

Mdulo I
Cliente y Usuario

Objetivo. Recabar toda la informacin necesaria para la realizacin del proyecto, definir una misin y establecer caractersticas de los usuarios meta.

Paso 1 Paso 2 Paso 3 Paso 4

Entrevista con el cliente. Contenidos Interactivos. Anlisis del pblico meta. Recabar informacin para el sitio.

Mdulo I
Paso 1
Conceptos

Cliente y usuario
Entrevista con el cliente
En este paso se debe poner atencin al por que el cliente est solicitando el desarrollo de un sitio web, en este momento el cliente tiene una necesidad, un deseo o un inters y posee informacin y posiblemente una idea de lo que desea realizar, hay que encaminar esta informacin hacia un objetivo funcional, es decir, definir una funcin principal del sitio y como lograrla, a quien beneficia y cmo. Al establecer todo esto y escribirlo en una frase estaremos creando la misin del sitio. A continuacin se deber definir cul es la misin bsica del sitio respondiendo las preguntas: qu, para qu, para quin y cmo: Qu funcin principal se puede realizar en el sitio? Para qu se debera realizar esa funcin? Quines pueden utilizar esa funcin? Cmo puedo lograr esa funcin? Despus de responder estas preguntas se puede escribir la misin bsica del sitio: El sitio web de permitir para a mediante Ejemplo: El sitio web de InvestigacionesMdicas.com permitir ofrecer informacin especializada sobre avances mdicos para mantener una actualizacin disciplinar de especialistas en el rea de las ciencias biomdicas, estudiantes y profesionales mdicos en general mediante la publicacin de investigaciones recientes, artculos y entrevistas. En este momento ya se tiene definido los usuarios potenciales. Tambien debe establecer los objetivos del sitio y en ellos definir cmo y qu se quiere lograr durante el proceso de diseo y se establecen tiempos para cada una de las etapas. Si es posible haga un cronograma con todas las actividades que se van a realizar. A continuacin escriba la misin bsica del sitio:

Una misin es la idea principal que refleja el ser del sitio web y establece el giro que tendr (entretener, vender, promocionar, informar, etc.)

la misin Ayuda a definir los usuarios potenciales del sitio y las dimensiones que ste tendr en cuanto a contenido.

La misin est directamente relacionada al pblico meta que tendr el sitio y establece cmo y qu beneficios obtendrn de l.

Anotaciones

Relacin entre misin del sitio y misin de la empresa: http://patagoniachallenge.com/tiene_web/tienewebempresa.htm

Mdulo I
Paso 2
Conceptos

Cliente y usuario
Contenido interactivo
Aqu se definirn algunos de los servicios y utilidades que el sitio ofrecer a sus visitantes. Algunos de los servicios ms comunes son los de interaccin de usuarios: foros de discusin, chats, libros de visitas, listas de correo, etc. Muchos de estos servicios requieren programacin especial, si no se cuenta con el recurso para cubrirlo se puede optar por servicios gratuitos: Foros: http://www.my-forum.org Chats: http://www.sigmachat.com Libros de visitas: http://www.guestbookdepot.com Listas de Correo: http://notifylist.com Encuestas: http://freepolls.com Cuando se utiliza un servicio gratuito es recomendable buscar uno que pueda ser personalizado para no variar mucho el estilo general del sitio. En la misin ya se estableci mediante que actividades o contenidos se pretende lograr la funcin principal del sitio, los servicios y el contenido nos indica las dimensiones que el proyecto puede llegar a tener. Responda: Qu servicios son ms atractivos para los usuarios potenciales? Por qu van utilizar esos servicios? En qu les benefician? Quizs utilizar un foro de discusin no tiene el mismo objetivo que utilizar un chat, decidir cual servicio es mejor depender del contenido del sitio. Ejemplo: El sitio de InvestigacionesMdicas.com ofrecer un foro de discusin sobre temas relevantes de medicina, un servicio de listas de correo electrnico para mantener informados a los usuarios sobre las actualizaciones del sitio y encuestas para opinar sobre el sitio o temas de actualidad.

Ofrecer servicios y herramientas puede promover un mejor y mayor uso del sitio.

Los sitios que ms llaman la atencin de los usuarios son los que presentan secciones en las que se puede interactuar con otros usuarios.

Otras pginas de recursos, utilidades y servicios: http://www.melodysoft.com http://www.bravenet.com

Mdulo I
Paso 3
Conceptos

Cliente y usuario
Anlisis del pblico meta
En este paso se debe realizar un anlisis del pblico meta para definir algunas de las caractersticas ms importantes que pudieran influir en el diseo del sitio. Se requiere de un poco de sentido comn y observacin para determinar: Edad de la mayora de los usuarios que podran acceder al sitio. Necesidades de informacin. Escriba las caractersticas principales del usuario meta: Aunque se definan las caractersticas del pblico meta y se disee en base a esas caractersticas el sitio web est disponible a todo el pblico en general, por lo que se debe planear hacerlo lo ms accesible que se pueda: redaccin de textos sencilla, contenidos atractivos, poco peso en las imgenes y grficos, uso de colores estndares para web, legibilidad, etc. Esto es imprescindible en el diseo independientemente de las caractersticas del usuario.

Definir caractersticas de los usuarios y disear en base a esas caractersticas permite incrementar el xito en el uso del sitio por que se definen sus necesidades bsicas.

La accesibilidad indica la facilidad con la que un sitio puede ser usado o visitado por todo tipo de personas, sobretodo aquellas con algn tipo de discapacidad.

Conocimientos informticos. Caractersticas del equipo de cmputo de acceso. Capacidad de adaptacin al sistema de navegacin. Ubicacin geogrfica. Idioma.

Los sitios accesibles mejoran la calidad de navegacin de usuarios, la usabilidad general de las pginas, la presencia en los buscadores y reducen el mantenimiento al sitio.

Capacidad de accesibilidad. Si se dificulta definir algunas de estas caractersticas puede optar por realizar algunas actividades de investigacin como entrevistas a usuarios, anlisis de sitios similares o encuestas.

Anotaciones

Pruebas virtuales de accesibilidad para sitios web: http://www.tawdis.net

Mdulo I
Paso 4
Conceptos

Cliente y usuario
Recabar informacin para el sitio
Datos de la empresa. Debe mantener informados a los usuarios sobre cualquier dato de la empresa y del sitio y ofrecerles informacin sobre contacto tanto de la empresa como del webmaster. Solicite la siguiente informacin: el estilo bsico del sitio. Analice s es factible aplicar esa identidad en web y de que manera. Contenido de las secciones del sitio. Solicite todo el contenido del sitio. Recabar toda la informacin del sitio debe basarse en las necesidades que el usuario tenga, ofrecer solo contenidos que l necesite y quiera ver. Los contenidos deben ser adecuados, cortos, sin errores gramaticales, de terminologa apropiada para el pblico meta y debe actualizarse continuamente.
Nota: si la pgina va a funcionar mediante una base de datos, solicite la informacin del programador y solicite informacin sobre los contenidos de la base de datos para posteriormente disear la plantilla del sitio donde se desplegar ese contenido.

Ofrecer informacin sobre el sitio y la empresa propicia una mejor confianza por parte del usuario.

Colocar informacin de contacto al final de cada pgina permite al usuario encontrarla rpidamente sin importar la seccin en que en ese momento se encuentre visitando.

Direccin fsica. Telfonos Correos electrnicos Cdigos postales Informacin legal Polticas de privacidad Condiciones de uso de los servicios Esta informacin nos servir para ms adelante crear un men del entorno del sitio que generalmente es colocado al pie de la pgina, ms adelante se desarrollarn los mens del sitio. Tambin solicite informacin sobre la empresa, evento o institucin para la que hace la pgina, como visin, misin, polticas e identidad corporativa. De esta manera se pueden definir algunas secciones del sitio, por ejemplo, la seccin quines somos?, contacto y secciones que traten sobre la empresa. Identidad Corporativa Solicite la identidad corporativa: logotipos en vectores o mapa de bits y todo lo que pueda servir para disear

Aplicar la identidad corporativa de la empresa refuerza la imagen de sta y siempre cuidando que no dificulte la legibilidad debido a mal manejo de colores, imgenes, etc.

Los usuarios buscan contenido. Sin un contenido atractivo no habra razn para visitar el sitio. El contenido determina la satisfaccin del usuario que al final decidir regresar al sitio una segunda vez.

Bases de datos y administracin de contenidos: http://www.gestiopolis.com/delta/prof/PRO172.html

Mdulo II
Informacin de contenido y diagrama de flujo

Objetivo. Analizar la informacin recabada, preparar los contenidos del sitio y generar el diagrama bsico de flujo de informacin.

Paso 1 Paso 2 Paso 3

Organizacin del contenido. Preparar el contenido. Estructura del sitio y diagrama de flujo.

Mdulo II
Paso 1
Conceptos

Informacin de contenido y diagrama de flujo

Organizacin del contenido
Los usuarios pueden optar por buscar informacin especfica o ir a determinada seccin del sitio, sin embargo se debe organizar toda la informacin en una estructura que permita su navegacin de manera ordenada y jerrquica. Antes de organizar una navegacin debemos establecer las secciones que contendr el sitio. Seale el ttulo de cada seccin y una descripcin del contenido empezando por las secciones que primeramente hagan una introduccin sobre la empresa, servicio o evento que promociona el sitio, por ejemplo comenzar definiendo quines somos, nuestra historia o antecedentes, continuar con las secciones del contenido del sitio y terminar con informacin til como la informacin de contacto. Ejemplo:
Seccin Quines Somos Contenido
Describir misin y visin de la empresa. Publicar artculos informativos. Permitir la interaccin de los usuarios. Ofrecer un formulario para entrar en contacto u opinar sobre el sitio

Ordenar el contenido en una estructura jerrquica para navegacin ayuda a los usuarios a ubicarse rpidamente en el contenido y dimensiones del sitio.

De esta manera podremos generar el men de contenido del sitio. Cuando las secciones son numerosas, se puede optar por agruparlas segn el tipo de contenido, despus de agruparlas se pueden diferenciar mediante colores o lneas divisoras o separarlos en dos o ms mens, por ejemplo: Un men con informacin sobre el entorno del sitio (webmaster, polticas de uso de la informacin, mapa del sitio, etc,). Un men con los servicios o herramientas (buscador, campos de acceso a secciones especiales para miembros de la pgina, chat, foros, etc.). Un men para navegacin general del contenido. Despus colocarlos estratgicamente. El men de servicios puede colocarse en la cabecera de la pgina, pues son secciones que el usuario utilizar en repetidas ocasiones.

Es importante establecer una jerarqua de contenidos y colocar en primer lugar las secciones que son ms importantes para el usuario, algunos sitios prefieren empezar con informacin corporativa mientras que otros tienen preferencia a colocar primero los servicios que ofrecen.

Tipo

A continuacin escriba el men bsico de su sitio.

Informativa

Artculos

Contenido

Para el ttulo de cada seccin es recomendable utilizar una sola palabra que englobe lo que el usuario desea encontrar ah.

Foro

Interaccin

Contctenos

Utilidades

Los sitios como www.terra.com.mx tienen contenidos muy extensos, visitar esas pginas y analizar los diferentes mens ayuda a establecer claramente las posibilidades para presentar un men de sitio atractivo.

Mdulo II
Paso 2
Conceptos El usuario sentir que tiene mayor control sobre la navegacin y el contenido si se le informa en todo momento que ocurre y que ocurrir dentro del sitio, ofrecindole informacin sobre enlaces externos, requisitos de la pgina, ventanas emergentes, etc.

Informacin de contenido y diagrama de flujo

Preparar el contenido
En este momento ya se tienen definidas las diferentes secciones del sitio y la informacin que contendrn (recabada durante el mdulo I). Ahora es necesario resumir los contenidos textuales, preparar las imgenes, grficas y documentos en formato no HTML para realizar un inventario de todo el contenido. Tome en cuenta los siguientes factores: Organice la informacin, identifique los contenidos de las secciones tanto si los tiene en forma impresa o digital (Word, Excel) y elementos multimedia. Determine que contenido es mejor mostrar en formatos como PDF o Word. (Generalmente es informacin que el usuario puede imprimir). Lo primero que se debe hacer es omitir palabras innecesarias en los contenidos, evite frases redundantes o instrucciones demasiado repetitivas o largas. Generalmente un usuario con experiencia media no tiene problemas en suponer como, por ejemplo, rellenar un formulario, entrar a un chat, etc. Las instrucciones o secciones con informacin de ayuda deben ser opcionales para el usuario y es recomendable enlazarlos desde el rea donde pueda surgir algn problema, por ejemplo debajo de campos de acceso, en reas de registro, antes de imprimir un documento, etc.
El arte de no escribir en la web: http://www.formasolutions.com/boletin/003_nov_04

10

Se debe facilitar al usuario un sistema interno de bsqueda de modo que pueda encontrar informacin especfica dentro del contenido y procurar sealarle en todo momento en que parte del sitio se encuentra y mediante un mapa de contenido mostrarle la estructura y dimensin del sitio. Si el cliente no cuenta con recursos para desarrollar un sistema de bsqueda interno puede utilizar un servicio gratuito como ATOMZ, en su versin Express. Para descargarlo: http://www.atomz.com Un sistema de bsqueda es un complemento a la navegacin del sitio. Despues de haber organizado todo el contenido se puede comenzar a planear la navegacin mediante la cual se tendr acceso a todo el contenido.

Resumir los contenidos ayuda a minimizar el ruido del sitio, realza contenidos ms importantes y permite generar documentos ms pequeos y prcticos, adems reduce el tiempo que el usuario invierte en leer la pgina.

El usuario no lee en Internet, por lo tanto utilice ttulos, listas, letras cursivas, y negritas para destacar contenidos, este tipo de elementos llaman rpidamente la atencin del usuario.

Mdulo II
Paso 3
Conceptos La estructura estar definida mediante el contenido que se desea presentar en el sitio, de los servicios que se ofrecern y de que manera el usuario deber acceder y emplear esa informacin.

Informacin de contenido y diagrama de flujo

Estructura del sitio y diagrama de flujo
Con los contenidos bien definidos se puede establecer una estructura de navegacin que permita al usuario tener acceso a toda la informacin del sitio. Los elementos de navegacin deben estar presentes en todo el sitio, tanto en la estructura general (navegacin global) o en cada seccin de contenido (navegacin local). Existen tres tipos de estructuras bsicas: Jerrquica. De una pgina inicial se accede a contenidos interiores secundarios y despus a contenidos terciarios. Lineal. De una pgina se pasa solo a otra de manera secuencial, se accede haca atrs o adelante. Estructura en red o hipertexto. Cada pgina tiene acceso a todas las dems pginas que componen el sitio. La estructura puede ayudar a realizar el diagrama de flujo y a planear una mejor navegacin. Las secciones importantes siempre deben estar visibles y debe haber enlaces haca ellas en todo momento. Cada seccin puede dividirse en otros temas, para contenidos secundarios debe haber una navegacin local de esa seccin. La estructura nos permite saber como disear la navegacin del sitio, que tipo de botones o enlaces utilizaremos y que tipo de navegacin habr en cada pgina. En el siguiente ejemplo se aprecian diferentes estructuras, cada una respondiendo a un tipo de contenido y la manera en que el usuario debe acceder o navegar por el.
Navegacin en red
Inicio

11

Seccin 1

Seccin 2

Seccin 3

Seccin 4

Seccin 5

Lneal

Jerrquica

Utilizando conjuntamente diferentes estructuras de contenidos se puede crear una navegacin altamente efectiva para el usuario.

Realice el diagrama de flujo y en l especifique la siguiente informacin: nombre de la seccin, nombre del documento, palabras clave y descripcin. Ejemplo:
Pgina principal Ttulo: Investigaciones Mdicas Documento: index.htm medicina, artculos mdicos, actualizacin mdica Descripcin: Pgina inicial de InvestigacionesMdicas.com

Una navegacin clara y sencilla permite al usuario comprender y adoptar una actitud intuitiva para determinar en que parte del contenido se encuentra en ese momento, en que partes ha estado y como llegar a un contenido especfico.

Quines Somos? Ttulo: Investigaciones Mdicas Documento: somos.htm medicina, artculos mdicos, actualizacin mdica Descripcin: Descripcin de misin y visin

Artculos

La informacin contenida en los cuadros servir ms adelante para declarar algunas especificaciones del documento HTML.El diagrama de flujo tambin permite generar la estructura de un mapa del sitio.
Diagramas de flujo: planificando un espacio de informacin: http://www.proyectoweb.org/boletin/072-dic04.html

Mdulo III
Retcula y diseo

Objetivo. Realizar la retcula para el diseo del sitio, definir los primeros elementos del estilo general y comenzar el desarrollo de todos los elementos grficos y prepararlos para su maquetacin.

Paso 1 Paso 2 Paso 3 Paso 4 Paso 5

Retcula. Color y tipografa. Comenzar a disear. Archivos para maqueta. Optimizacin de imgenes para maqueta.

Mdulo III
Paso 1
Conceptos

Retcula y diseo
Retcula
En la retcula se debe especificar los elementos que conforman la pgina, el lugar donde van colocados y las dimensiones que puedan tener. Puede utilizar hojas de papel o algn programa de diseo para dibujar el esquema del sitio solo utilizando texto y lneas simples. El sitio se conforma bsicamente de cabecera, mens de contenidos, rea de contenidos y pie de pgina. Determine los principales elementos de la cabecera, como lo son: logotipo y ttulo de la pgina y men de servicios si se desea. Coloque el esquema para mens de contenido que se desarrollaron en el mdulo II. Men de navegacin a la izquierda del sitio. Men del entorno al pie de pgina Men de servicios o herramientas en la cabecera o como parte del men de navegacin. Coloque elementos de navegacin como botones para volver al inicio de la pgina, ir atrs o adelante y enlaces de ubicacin y volver a la pgina inicial. Utilice la misma retcula para todas las pginas que conforman el sitio. La informacin ms importante deber estar dentro de la primera pantalla (se le llama primera pantalla a todo aquello que se visualiza dentro de la ventana del navegador sin utilizar las barras de desplazamiento). Medidas de la retcula:
Para pginas diseadas para monitores de 800 x 600 pixeles: 783 pixeles de ancho en resoluciones, pgina sin margen. 769 pixeles de ancho con margen en la pgina. Para pginas diseadas para monitores de 1024 x 768 pixeles: 1003 pixeles de ancho en resoluciones sin margen en la pgina. 983 pixeles de ancho con margen en la pgina.

13

La cabecera es el rea del documento donde el usuario identifica la empresa, el ttulo y elementos de identidad corporativa como el logotipo.

Repetir la retcula en todas las pginas del sitio aporta a la web una fuerte identidad grfica, que genera en el usuario la sensacin de estar situado y recordar claramente el sitio.

Verticalmente las dimensiones varan de acuerdo a las herramientas activas del navegador del usuario y la cantidad de contenido en cada pgina. Si quiere que todo el contenido est dentro de la ventana del navegador utilice una medida de 400 pixeles de altura. El contenido de las pginas destinadas a impresin debe estar dentro de un espacio menor a 560 pixeles. Se denomina zona segura al rea menor a 560 pixeles que se registra en la impresin hecha directamente desde el navegador.

La dimensin horizontal del sitio est definida por el tipo de resolucin de pantalla del monitor para el cual se dise. Se recomienda trabajar para resoluciones de 800 x 600 pixeles. Aunque estadsticamente son menos los monitores con esta caracterstica aun hay muchos usuarios que todava la utilizan.

Estadsticas sobre resoluciones de pantalla: http://www.ciudad.com.ar/ar/AR_Nota_2005/0,3813,2608,00.asp

Mdulo III
Paso 2
Conceptos

Retcula y diseo
Color y tipografa
Despus de establecer la retcula se puede definir los colores que se utilizarn en el sitio. Si no cuenta con informacin corporativa sobre los colores institucionales puede seleccionar una gama de 3 a 4 colores de la paleta web-safe, procurando que no dificulten la legibilidad del sitio o generen mucho brillo en la pantalla y permitan un contraste armonioso. Utilice un programa de diseo grfico como Photoshop o Fireworks para acceder a la paleta de colores seguros e intercambiar valores entre RGB, CMYK y hexadecimal o utilice algn programa gratuito especializado para la gestin de colores como Visual Color Picker de Novosib Software. Defina los colores para el sitio en cdigo hexadecimal: un color bsico que sobresalga en todo el sitio. Un color de apoyo secundario y otro para pequeos detalles. Puede aplicar estos colores para elementos del sitio como enlaces, tipografa y grficos. Escriba el cdigo hexadecimal para los diferentes colores: Color bsico: Color de apoyo: Color para detalles: Color de enlaces: Enlace visitado: Enlace activo: Color de tipografa: Color de fondo: Esto permitir tener siempre presente los colores que debemos utilizar en todos los elementos del sitio. Tipografa: Seleccione alguna de las tipografas seguras o estndares por defecto de Windows para los contenidos: Times New Roman Arial, Arial Black, Arial Narrow Book antiqua Bookman Oldstyle Century Gothic, Century, Courier Comic Sans Georgia Verdana Tahoma Trebuchet Puede utilizar tipografas especiales no estndares en formato GIF para ttulos, mens, botones, etc. Es recomendable no utilizar ms de dos tipografas en todo el sitio. Tome en cuenta: La tipografa Times New Roman de tipo serif ofrece una fcil lectura en cuerpos de texto largos. Las tipografias como Arial o helvtica son recomendables para titulares y textos cortos. Evite usar letra en mayscula para textos largos pues los usuarios lo leen 10% ms despacio por ser ms difcil para la vista.
Para descargar Visual Color Picker: http://www.linxexplorer.com

14

Es recomendable utilizar los colores seguros web-safe para la interfaz grfica y contenidos para asegurar una visualizacin correcta en todos los navegadores, resoluciones y sistemas operativos.

Los colores estndar para enlaces son el azul y el morado para enlaces ya visitados. Un usuario promedio identifica los colores de enlaces con el color estndar. Colocar palabras en esos colores puede confundir al usuario y hacerle creer que se trata de un enlace.

Se debe cuidar el contraste entre los diferentes tipos de letra que se utilizan, los bloques de texto de informacin y su relacin con los titulares, espacios vacos y el fondo de la pgina.

Mdulo III
Paso 3
Conceptos

Retcula y diseo
Comenzar a disear
A continuacin se debe desarrollar la interfaz grfica. La interfaz es el rea de comunicacin entre el usuario y la mquina, es una visualizacin grfica que permite realizar tareas, elegir comandos, iniciar programas y navegar por el contenido de un sitio mediante el uso de representaciones visuales como conos, mens, hipervnculos e imgenes. Un diseo efectivo puede mejorar la navegabilidad y reducir los problemas de usabilidad. Utilizando un programa de diseo grfico para web, como Macromedia Fireworks, Photoshop o ImageReady de Adobe cree un nuevo documento con las dimensiones de la retcula segn la resolucin para la que trabaja y a 72 DPI. Las dimensiones similares son para pginas hechas en Macromedia Flash, puede utilizar un programa de diseo de grficos web y despus importar a un documento de Flash o trabajar directamente en ese programa. Si se opta por disear en Flash contine con el paso nmero 3 del mdulo V para especificaciones de publicacin. Comience a desarrollar la plantilla de diseo en base a la retcula. Disee la cabecera del sitio, el men y todos los elementos grficos necesarios. Es recomendable utilizar el estilo en el diseo en todas las pginas que conforman el sitio.
Foros del Web: Foros de diseo web y desarrollo de sitios: http://www.forosdelweb.com

15

Busque siempre: Un contraste entre todos los elementos del sitio. Un equilibrio entre elementos grficos y elementos de texto. Claridad y orden. Una jerarqua visual: organice los elementos en forma lgica y previsible En general si se logra una armona visual de todos los elementos se puede tener un diseo efectivo: tome en cuenta la misin del sitio, los tipos de contenidos y el pblico meta. Desarrolle imgenes, botones e conos para la navegacin, un men de sitio web puede estar construido tanto con enlaces textuales como por botones o conos, establezca tipografas, colores y tamaos. Al terminar esta etapa es importante que la base de datos, si requiere, deba de estar ya terminada.

Un manejo adecuado de tipografas, imgenes y color gua al usuario a travs de todo el contenido y la pgina.

Aplicar el estilo de diseo consistentemente en todas las pginas brinda una identidad y cadencia fuerte que el usuario reconoce en todo el sitio.

En el diseo de sitios en flash se debe tener un mejor diseo de navegacin pues el usuario no puede utilizar los elementos de navegacin que ofrece el navegador de Internet.

Sin el impacto visual de las formas, el color y los contrastes las pginas podran ser aburridas y no motivar visualmente al usuario.

Mdulo III
Paso 4
Conceptos

Retcula y diseo
Archivos para maqueta
Si el sitio estar destinado para HTML puede comenzar a utilizar las herramientas de corte (slices) para delimitar los diferentes elementos del sitio y poder exportarlos por separado. Los slices permiten dividir el sitio en imgenes pequeas para despus construir el documento HTML. Los programas de diseo de sitios permiten aplicar algunas caractersticas a los slices como roll-overs. Se denomina roll-over cuando un botn cambia de estado al pasar el ratn de la computadora sobre el. Adems de roll-over, utilizando otras herramientas de los programas de diseo web, se pueden crear animaciones, marquesinas, y otras acciones para brindar al sitio de ms dinamismo pero generan distraccin, utilcelos slo en casos estrictamente necesarios. Para acceder a la herramienta de corte: Fireworks: En la seccin Web de la paleta de herramientas. Para los estados del botn se utilizan los frames (window> frame o Shift + F2). Para aplicar funciones a los slices con el botn derecho del ratn sobre cada slice. Para su configuracin: en la ventana de propiedades (windows>properties o CTRL + F3).
Manuales sobre programas de diseo web: http://www.webtaller.com

16

ImageReady: En la paleta de herramientas. Para utilizar las funciones de los slices se utiliza la ventana de contenido web (windows> web content). Para los contenidos de los slices se utilizan los layers. Para las propiedades de cada slice utilice la ventana Slice (Window> slice). Cada slice puede tener diferentes atributos y se pueden exportar en formato de imagen, celda de tabla o como contenido HTML Junto a estas herramientas aparecen tambin las herramientas de mapas de imagen y su configuracin.

Un roll-over de botn permite al usuario identificar el rea que puede presionar y as optimizar la navegacin.

El uso excesivo de animaciones, marquesinas, GIFs animados y textos en movimiento causan distraccin al usuario, alteran la visin perifrica y dificultan la lectura.

Mdulo III
Paso 5
Conceptos

Retcula y diseo
Optimizacin de imgenes para maqueta.
Los programas de diseo web ofrecen una opcin para exportar el contenido y generar los documentos HTML, esta opcin exporta las imgenes de los diferentes slices, y los documentos HTML que los contiene con todas las funciones y enlaces especificados en las propiedades de los slices. Tambin ofrecen la opcin de copiar el cdigo HTML listo para pegarse en algn editor de sitios web como Dreamweaver o Frontpage que ya contiene toda la maquetacin del documento. La desventaja de esta opcin es que genera un documento HTML con una tabla de organizacin estrictamente rgida que si se modifica puede causar problemas en la visualizacin de los elementos. Se puede optar por crear una plantilla base exportando slo los grficos y creando la maqueta uno mismo en algn editor de sitios web en donde colocar los contenidos para cada seccin y especificar y las funciones de las imgenes (roll-over, enlaces, etc.). Cada slice puede tener diferente optimizacin y exportarse ya sea en formato GIF o JPG. Utilice GIF para imgenes con colores planos y con pocas texturas o grficos vectoriales, este es el formato ms utilizado para publicar los grficos de la interfaz del sitio. La compresin de GIF se realiza mediante el nmero de colores disponibles en la imagen, una imagen con colores indexados tiene un mximo de 256 colores. Utilice JPG para comprimir imgenes fotogrficas. Se puede aplicar tambin a grficos con ilustraciones ms complejas y con transiciones de tono, una compresin del 80% es aceptable para web.

17

Debido a la baja velocidad de conexin con la que la mayora de los usuarios acceden a internet todas las imgenes deben estar comprimidas para una visualizacin ms rpida.

Documento PDF: Importancia de la optimizacin de imgenes: http://cevug.ugr.es/web-cevug/material/optimizacion.pdf

Mdulo IV
HTML y maquetacin

Objetivo. Preparar el documento HTML para comenzar a construir el sitio y ofrecer informacin sobre los elementos estructurales del mismo.

Paso 1 Paso 2 Paso 3

Hojas de estilo y tablas. Preparar el documento HTML. Construir el documento HTML y documento para archivos FLASH.

Mdulo IV
Paso 1
Conceptos

HTML y maquetacin
Hojas de estilo y tablas
Los elementos del sitio se pueden organizar mediante el uso de hojas de estilo en cascada (CSS) o tablas. A continuacin especifique el estilo del sitio en un documento CSS para aplicar a las pginas en base a estilo general que se estableci en la etapa de diseo grfico. Utilice las herramientas que los programas de edicin de sitios web ofrecen para la creacin de CSS. En Dreamweaver: Men Windows> CSS Styles o Shift + F12 En FrontPage: Men Format> Style Puede especificar tamaos de celdas, bloques de texto, mrgenes, bordes externos, colores de fondo o posicionar elementos mediante capas para organizar todo el contenido. La ventaja de los CSS es que cada da los navegadores se van estandarizando y ofrece ms alternativas para organizar el sitio, es menos pesado y ms fcil de modificarse. Las etiquetas de CSS pueden colocarse dentro del cdigo HTML de cada pgina pero se recomienda enlazar a un documento CSS externo, as cualquier cambio imprevisto es cuestin solamente de modificar ese archivo.CSS. Para organizar los contenidos en tablas, se toma en cuenta: Para evitar problemas cuando algn usuario modifica la dimensin de la ventana del navegador se deben establecer el ancho y alto de las celdas que componen la tabla en valores de pixeles absolutos. Agregar un GIF transparente con las mismas dimensiones del tamao que se desea en la celda de la tabla. Puede utilizar tablas dentro de otras para alcanzar niveles de organizacin ms complicados (tablas anidadas).

19

Las hojas de estilo permiten modificar colores, tamaos de letra y otros de la composicin y diseo de la pgina. Usarlas permite crear una imagen consistente que se aplica a todo el sitio.

Una desventaja del uso de tablas para la organizacin de los elementos es que los programas especiales para discapacitados auditivos leen de manera lineal el contenido de las celdas y muchas veces ese contenido no esta organizado de est forma.

Se puede utilizar CSS para organizar y disear sitios que sern ms rpidos en descargarse y ms fciles de redisear. Ofrecen una mejor alternativa para organizar los contenidos, lo que favorece tanto al diseador como al usuario.

Por qu disear con tablas es estpido un entretenido sitio con las principales caractersticas de las tablas y el CSS: http://www.effectivetranslations.com/stupidtables

Mdulo IV
Paso 2
Conceptos

HTML y maquetacin
Preparar el documento HTML
Hay varios aspectos a tomar en cuenta cuando se comienza a trabajar en editores de sitios web. Primeramente se debe definir algunos aspectos de identificacin del sitio: los elementos meta. Los elementos meta se colocan dentro de las etiquetas <HEAD> y </HEAD> del documento HTML. Los elementos meta mas utilizados son el ttulo, palabras clave de bsqueda y descripcin del sitio. Puede utilizar la informacin del diagrama de flujo que se gener durante el mdulo II en el paso 3 para colocar la informacin de las etiquetas meta: Escriba el ttulo de cada pgina entre la etiquetas <TITLE> y </TITLE>. Si se trata de la pgina inicial identifique el nombre de la empresa en el ttulo, slogan o alguna frase corta sobre el tema principal del web. Escriba la descripcin de la pgina con las etiquetas META
<meta name=description content=Una descripcin de cada pgina del sitio />

20

Escriba ttulos de pgina que engloben el contenido del sitio en una frase pequea, el ttulo de la pgina es utilizado por los motores de bsqueda y es el ttulo que aparece cuando un usuario agrega el sitio a sus favoritos de Internet.

Actualmente son menos los buscadores que utilizan los elementos meta, pero el elemento de ttulo seguir siendo el ms importante. Cuando el usuario hace una bsqueda, los motores de bsqueda ofrecen resultados cuyo ttulo aparece igual o similar a las palabras clave que emple el usuario. Propiedades de la pgina. Utilice la informacin del paso 2 en el mdulo III sobre color y tipografa para especificar los colores de enlaces, de texto, colores de fondo y tipografa de la pgina, etc. En Dreamweaver: en el men Modify> Page Properties. En Frontpage: Clic con el botn derecho del ratn sobre el documento para activar el men emergente, seleccione Page Properties. Establezca la medida de los mrgenes del documento en cero si requiere que el contenido del sitio abarque toda la ventana del navegador. Puede trabajar con la opcin de administracin de archivos para mejorar la productividad del sitio: En Dreamweaver: Men Windows> Files o presione la tecla F8 En FrontPage: Men View> Folders despus de abrir el sitio con la opcin Open Web en el men File> Open Web.
La muerte de un Meta dato: http://searchenginewatch.com/sereport/article.php/2165061

Los elementos META (o meta tags, en ingls) ofrecen informacin sobre el sitio, derechos de autor, contenido y palabras clave que los sistemas automatizados como los motores de bsqueda identifican cuando un usuario hace una bsqueda.

Escriba las palabras claves con las etiquetas META separadas por coma:
<meta name=keywords content=palabras, clave, de, bsqueda />

Escriba el nombre del autor con las etiquetas META.

<meta name=author content=Nombre del autor de la pgina />

El Meta elemento robots, permite indexar el contenido en los motores de bsqueda

<meta name="robots" content="all" />

Mdulo IV
Paso 3
Conceptos

HTML y maquetacin
Construir el documento HTML y documento para archivos FLASH
Despus de haber definido todo el estilo y preparado el documento HTML se puede proceder a construir el sitio para su posterior publicacin. Si va a utilizar tablas comience con una tabla general que contendr todos los elementos del sitio con las dimensiones de la retcula, use otra tabla con las secciones bsicas: cabecera, men y contenidos, con especificaciones de CSS y comience a introducir todo el contenido empezando con la pgina principal del sitio. Si es posible rellene las celdas con un color en lugar de usar una imagen GIF cuando se trata de una celda sin contenido. Haga lo siguiente: Marque todas las imgenes con una descripcin de ellas mediante el atributo ALT. Puede acceder a l en la ventana de propiedades al seleccionar la imagen usando el programa de edicin de sitios. Marque los enlaces de texto mediante el atributo TITLE. Especifique informacin sobre ventanas emergentes o enlaces fuera del sitio. Evite directorios demasiado largos y confusos, busque una lgica y jerarqua en los nombres. La direccin de acceso a un sitio web debe ser lo suficientemente sencilla, clara y fcil de recordar. Si no interfiere con el diseo: especifique informacin textual debajo de cada imagen.
Usabilidad de sitios es flash, un tema controvertido: http://acceso.uv.es/accesibilidad/artics/01-usab-flash.htm

21

A terminar la maquetacin puede utilizar esa pgina como plantilla para todas las dems pginas del contenido. Sitios con Frames (Marcos): Un frame divide la ventana del navegador en partes, cada parte con un documento HTML distinto. Los frames rompen con el esquema del sitio y los motores de bsqueda encuentran estos documentos por separado. Adems dificultan acciones como agregar a favoritos y obtener informacin sobre el URL del sitio. El uso de marcos debe minimizarse lo ms posible y slo recurrir a ellos cuando sea estrictamente necesario. Sitios en Macromedia Flash: Si el sitio se dise en Macromedia Flash ofrezca una introduccin previa donde especifique donde descargar el reproductor especial, informacin sobre el peso del archivo swf y cuanto tiempo en promedio tardar en descargarse completamente. Si se dise una introduccin en flash para un sitio HTML, adems de la informacin anterior ofrezca un enlace de tipo saltar introduccin directamente a ese contenido HTML.

Cuando la pgina se descarga lentamente, los usuarios pueden saber hacia donde llevan los enlaces de un men hecho de imgenes que est en proceso de descarga mediante el atributo ALT.

Ofrecer una introduccin en Flash puede provocar que el usuario se impaciente cada vez que entra al sitio si tiene que esperar a que la animacin se descargue para poder continuar.

Mdulo V
Pruebas de usabilidad y publicacin

Objetivo. Hacer una revisin de la compatibilidad del sitio y algunos aspectos relacionados a la usabilidad. Comenzar a publicar y promocionar el sitio.

Paso 1 Paso 2 Paso 3

Compatibilidad con navegadores y navegacin prueba. Prueba de usabilidad bsica. Publicacin y promocin.

Mdulo V
Paso 1
Conceptos

Pruebas de usabilidad y publicacin

Compatibilidad con navegadores y navegacin prueba
Es recomendable utilizar las herramientas que ofrecen los editores de sitios web para establecer problemas que pudieran surgir con las diferentes versiones de navegadores, revisar cuestiones de accesibilidad y enlaces rotos. En Dreamweaver: Acceda a esa opcin mediante el men File> Check En FrontPage: Editando en modo de sitio, en el Men View> Reports Cuando el sitio est completamente terminado es recomendable tambin realizar una navegacin de prueba para identificar posibles errores y verificar la funcionalidad de los enlaces, durante esa navegacin revise si: Hay consistencia en el diseo del sitio. Todas las pginas contienen ttulo. No existen enlaces rotos. La informacin de contacto est disponible en todo momento. Se identifica rpidamente los contenidos para los usuarios (foros, chats, etc.). Existe consistencia en la navegacin y es intuitiva. Existen enlaces hacia la pgina principal en todo momento. Las secciones contienen ttulos. No existen imgenes rotas, deformadas o de mala calidad. Las tablas de contenido guardan las dimensiones establecidas. Se ofrece alternativa de impresin en contenidos extensos.

23

Cuando un sitio est diseado para la mayora de los navegadores, se satisfacen mayores cantidades de usuarios. Es recomendable disear en base a estndares.

Hay suficiente contraste entre el fondo, el contenido de las pginas y los enlaces. Todas las imgenes tienen el atributo ALT. Todos los enlaces tienen el atributo TITLE Ofrece advertencias sobre enlaces externos, ventanas emergentes o enlaces a archivos como PDF, WORD, etc. Hay acceso al contenido ms importante desde cualquier pgina del sitio. Revisar y corregir estos factores puede mejorar el uso del sitio.

Sitio web del WWW Consortium para informacin sobre estndares WEB: http://www.w3.org

Mdulo V
Paso 2
Conceptos

Pruebas de usabilidad y publicacin

Prueba de usabilidad bsica
Si cree que el sitio pueda tener problemas de usabilidad, realizar una prueba bsica no est de ms. Seleccione varias personas que deseen participar, que no estn relacionadas al proyecto y que cuenten con diferentes niveles de experiencia en el uso de internet (el tiempo que dedican al uso de Internet a la semana puede ser un dato para determinar ese nivel de experiencia). Esta prueba puede ser relativamente sencilla y no llevar ms de 20 minutos en hacerla. Pida que realicen una tarea determinada, por ejemplo buscar informacin especfica en el sitio o utilizar algn servicio, despus pdales que entren a cuantas secciones del sitio quieran visitar. Durante este proceso haga anotaciones sobre: 1. Las primeras secciones que visitaron. 6. S dudaron antes de presionar algn enlace.
Para determinar si el enlace no es suficientemente claro sobre lo que el usuario puede encontrar al presionarlo.

24

Para pruebas de usabilidad es recomendable utilizar usuarios con conocimientos bsicos sobre sitios web. Los usuarios con estas caractersticas son los que representan a los futuros clientes y lo que sean capaces de realizar estos usuarios inexpertos ya es dominado por los usuarios con ms experiencia.

En general observe cuales son las partes del sitio donde surgieron problemas y como los enfrent el usuario. Al finalizar pregunte:
1. La pgina inicial es visualmente atractiva para usted? 2. Puede definir cul es la temtica del sitio? 3. Le parece sencillo navegar a travs de todas las pginas? 4. En algn momento tuvo dificultades con el contenido del sitio o la navegacin? 5. Qu actividades cree que podra realizar en el sitio? 6. Qu elemento del sitio le llam ms la atencin? 7. Si no visit alguna seccin del sitio, pregunte por qu.

Las pruebas de usabilidad permiten optimizar aplicaciones, sistemas de navegacin e interfaces que mejor satisfagan las necesidades de los usuarios.

Para definir las secciones ms atractivas.

2. Cuanto tiempo duraron antes de cambiar de seccin.

Para definir si dedicaron tiempo para leer o ver el contenido de la seccin.

Estas preguntas arrojan datos interesantes. Por ejemplo, en la pregunta 6 por un lado pueden establecer cuales son los contenidos importantes y atractivos para el usuario y por el otro definir si hay algo que pueda causar una distraccin visual. Aunque esta prueba de usabilidad se realice con pocos usuarios, los resultados pueden definir problemas sencillos que la mayora de los usuarios pueden encontrar al visitar el sitio. Despus de esto se pudieron haber definido algunos problemas de usabilidad y se pueden hacer los cambios antes de publicar el sitio.

3. S usa el botn de regresar del navegador.

Para definir si hay problemas para utilizar la navegacin local del sitio.

4. S cambia de seccin antes de que el documento termine de cargarse.

Para definir si el contenido es muy extenso o pesado.

5. S siguieron un orden especfico al navegar por las secciones del sitio.

Para determinar si el contenido del sitio est estructurado jerrquicamente.

Sitio Web de Jakob Nielsen sobre usabilidad, en ingls: http://www.useit.com

Mdulo V
Paso 3
Conceptos

Pruebas de usabilidad y publicacin

Publicacin y Promocin
Si se encuentra satisfecho con el sitio puede proceder a publicarlo, para esto se debe contar con un dominio propio y un espacio de alojamiento contratado por la empresa o utilizar un sistema de alojamiento gratuito disponible en Internet. Muchos clientes ya tienen contratado un proveedor de acceso a Internet (como Prodigy) y muchos de estos proveedores cuentan con servicio para alojar pginas web de tipo subdominio: http://www.cliente.proveedor.com http://www.proveedor.com/cliente. Otros servicios de hospedaje cuentan tambin con herramientas para transferir los archivos del sitio al servidor o la posibilidad de transferir directamente los archivos desde los programas editores de sitios web como Dreamweaver o FrontPage. De lo contrario utilice un software de transferencia FTP como http://www.cuteftp.com. Pngase en contacto con el cliente para determinar el tipo de dominio y contratacin que se emplear. Promocin del sitio. Es importante tener un buen sitio de internet, con una navegacin y un diseo centrado en el usuario, pero si ese usuario no sabe de su existencia el sitio simplemente no tiene razn de ser. Existen muchas formas de promocionar un sitio, una de las principales es darse de alta en buscadores y directorios de internet. Muchos de estos buscadores ya indexan sitios automticamente, si se desea realizar manualmente: En Google.com: http://www.google.com/addurl/?hl=es&continue=/addurl Yahoo.com: http://searchmarketing.yahoo.com/srchsb/index.php Muchos otros buscadores utilizan el motor de bsqueda de google o yahoo para sus propios resultados. La indexacin de sitios puede tardar de uno a tres meses. El sitio debe promocionarse adems en las diferentes actividades que realice la empresa, ya que ahora forma parte de su identidad y es una herramienta importante para su comunicacin. El URL del sitio debe aparecer en toda actividad de publicidad de la empresa.

25

La mayora de los usuarios utiliza un servicio de bsqueda cuando necesita informacin de Internet, por lo tanto un motor de bsqueda es una de las herramientas de mercadotecnia ms recurrida en internet.

Cmo promocionar un sitio web: http://www.informaticamilenium.com.mx

26

Consideraciones finales sobre la gua.

La gua para realizar pginas de internet basada en conceptos de usabilidad ofrece a los diseadores una metodologa de trabajo que les permite realizar pginas web orientadas a satisfacer necesidades de usuarios. La gua presenta de manera terica los principales conceptos englobados dentro de la usabilidad y su aplicacin prctica. Sin embargo el diseador puede adaptar todos o algunos de los mdulos o pasos a su propio metodo de trabajo y no modificar su proceso de diseo web. La informacn contenida en la gua pretende hacer un balance entre los aspectos tericos y la informacin prctica. Esta gua no es un manual de programacin o un manual para usar algn programa de diseo grfico y se centra en definir los conceptos de usabilidad ms importantes y el momento en el proceso de diseo web en que pueden llegar a producirse.