diseño de páginas de internet: guía basada en … · prefacio la guía para realizar páginas de...
TRANSCRIPT
José Mario Serrano
Diseño de páginas de internet:Guía basada en conceptos de usabilidad web
Contenido
Prefacio.......................................................................................................................................................................1Introducción..............................................................................................................................................................2
Módulo I. Cliente y usuario....................................................................................................................................3
Paso 1. Entrevista con el cliente.....................................................................................................................4Paso 2. Contenido interactivo........................................................................................................................5Paso 3. Análisis del público meta..................................................................................................................6Paso 4. Recabar información para el sitio.....................................................................................................7
Módulo II. Información de contenido y diagrama de flujo...............................................................................8
Paso 1. Organización de contenido...............................................................................................................9Paso 2. Preparar el contenido.......................................................................................................................10Paso 3. Estructura del sitio y diagrama de flujo........................................................................................11
Módulo III. Retícula y diseño.................................................................................................................................12
Paso 1. Retícula...............................................................................................................................................13Paso 2. Color y tipografía..............................................................................................................................14Paso 3. Comenzar a diseñar..........................................................................................................................15Paso 4. Archivos para maqueta....................................................................................................................16Paso 5. Optimización de imágenes para maqueta....................................................................................17
Módulo IV. HTML y maquetación.........................................................................................................................18
Paso 1. Hojas de estilo y tablas.....................................................................................................................19Paso 2. Preparar el documento HTML.......................................................................................................20Paso 3. Construir el documento HTML y documento para archivos FLASH......................................21
Módulo V. Pruebas de usabilidad y publicación.................................................................................................22
Paso 1. Compatibilidad con navegadores y navegación prueba............................................................23Paso 2. Prueba de usabilidad básica............................................................................................................24Paso 3. Publicación y alta en buscadores....................................................................................................25
Consideraciones finales..........................................................................................................................................26
PrefacioPrefacio
La guía para realizar páginas de internet basada en conceptos de usabilidad tiene como objetivo presentar los elementos yfactores que se deben tomar en cuenta para la realización de una página usable y que nos ayude a disminuirsistemáticamente la incidencia de errores de usabilidad que pueden presentarse en un proyecto de diseño web.
La guía se presenta a través de módulos, cada uno abarcando alguna de las etapas básicas del proceso de diseño.Como todo proceso de creación, el diseño de un sitio de internet también implica un proceso de trabajo fundamentalque abarca desde el acopio de información necesaria para definir los objetivos del sitio, la misión y todo el contenido,establecer un público meta para su análisis, así como, definir el contenido en base a las necesidades de los usuariosy comenzar con el desarrollo del sitio propiamente dicho para su posterior publicación. Los módulos son los siguientes:
Cliente y usuario.
Información de contenido y diagrama de flujo.
Retícula y diseño
HTML y maquetación.
Pruebas de usabilidad y publicación.
En cada uno de los módulos se ofrece información técnica y teórica sobre algunos de los pasos más importantes decada etapa de diseño.
Al final del documento (página 26) se explican algunas consideraciones sobre los que es y lo que no es esta guía ycomo aplicarla.
I.
II.
III.
IV.
V.
1
Introducción
2
El concepto de usabilidad se define como “la capacidad de un software de ser aprendido, comprendido, usado y seratractivo para el usuario en condiciones específicas de uso” o “la efectividad, eficiencia y satisfacción con la que unproducto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”.
La usabilidad es la relación de comunicación óptima entre un hombre y una máquina. Los elementos principalesdentro del concepto de usabilidad son el usuario, el contexto y la máquina y es el diseñador gráfico el encargadode visualizar una mejor forma de relacionar estos tres elementos. La funcionalidad de un sitio está establecida porla usabilidad. El desarrollo web se ha adaptado a un conjunto de técnicas y conceptos que han facilitado el uso denavegadores, de sitios web y todo tipo de interfaces para realizar una tarea determinada.
El elemento más importante dentro de la usabilidad es el factor humano, lograr que un usuario utilice un sistemade la manera más eficaz, sencilla y sin complicaciones será posible mediante un adecuado diseño de usabilidad.
Un diseño de usabilidad conlleva un análisis previo del comportamiento humano y los posibles pasos que el usuariosiga para realizar una tarea. Reduce el tiempo de aprendizaje de un sistema o software, disminuye el costo deasistencia a usuarios y optimiza los costos de diseño, disminuyendo gastos en rediseños y mantenimiento de sitiosweb, además, incrementa la satisfacción del usuario.
El diseño centrado en el usuario se refiere al proceso mediante el cual se diseña en base a las necesidades de unusuario. Muchos diseñadores gráficos desarrollan sitios web dando más importancia al aspecto estético, pero unode los factores más importantes dentro del desarrollo del sitio es su facilidad de uso. Los usuarios buscan estafacilidad, rapidez y funcionalidad. Un usuario no compraría en un sitio de comercio electrónico si éste fuera muycomplicado de usar. Los diseñadores gráficos deben centrar su atención hacía estas necesidades y no incurrir enpreferencias personales.
Un proyecto exitoso lleva tras de sí una extensa investigación que define las verdaderas necesidades de un receptorfinal, es esa investigación la base del diseño de usabilidad, definir el ¿qué se va hacer?, ¿para quién se va hacer? y¿cómo lo necesitan? Es fundamental para diseñar un sitio web usable, pero responder a estas preguntas puede serdifícil si no se cuenta con una metodología de trabajo y un sentido investigativo por parte del diseñador.
Objetivo. Recabar toda la información necesaria para larealización del proyecto, definir una misión y establecercaracterísticas de los usuarios meta.
Cliente y UsuarioMódulo I
Paso 1
Paso 2
Paso 3
Paso 4
Entrevista con el cliente.
Contenidos Interactivos.
Análisis del público meta.
Recabar información para el sitio.
En este paso se debe poner atención al por que elcliente está solicitando el desarrollo de un sitio web,en este momento el cliente tiene una necesidad, undeseo o un interés y posee información y posiblementeuna idea de lo que desea realizar, hay que encaminaresta información hacia un objetivo funcional, es decir, definir una función principal del sitio y como lograrla,a quien beneficia y cómo. Al establecer todo esto yescribirlo en una frase estaremos creando la misióndel sitio.
A continuación se deberá definir cuál es la misiónbásica del sitio respondiendo las preguntas: qué, paraqué, para quién y cómo:
¿Qué función principal se puede realizar en el sitio?¿Para qué se debería realizar esa función?¿Quiénes pueden utilizar esa función?¿Cómo puedo lograr esa función?
Después de responder estas preguntas se puedeescribir la misión básica del sitio:
El sitio web de
permitirá
para
a
mediante
Cliente y usuario
Ejemplo:
”El sitio web de InvestigacionesMédicas.com permitiráofrecer información especializada sobre avances médicospara mantener una actualización disciplinar de especialistasen el área de las ciencias biomédicas, estudiantes yprofesionales médicos en general mediante la publicaciónde investigaciones recientes, artículos y entrevistas”.
En este momento ya se tiene definido los usuariospotenciales.
Tambien debe establecer los objetivos del sitio y enellos definir cómo y qué se quiere lograr durante elproceso de diseño y se establecen tiempos para cadauna de las etapas.
Si es posible haga un cronograma con todas lasactividades que se van a realizar.
A continuación escriba la misión básica del sitio:
Entrevista con el cliente
Una misión es la ideaprincipal que refleja elser del sitio web yestablece el giro quetendrá (entretener,vender, promocionar,informar, etc.)
la misión Ayuda adefinir los usuariospotenciales del sitio ylas dimensiones queéste tendrá en cuantoa contenido.
Conceptos
4
La misión estádirectamenterelacionada al públicometa que tendrá elsitio y establece cómoy qué beneficiosobtendrán de él.
Relación entre misión del sitio y misión de la empresa:http://patagoniachallenge.com/tiene_web/tienewebempresa.htm
Módulo IPaso 1
Anotaciones
¿Por qué van utilizar esos servicios?
¿En qué les benefician?
Quizás utilizar un foro de discusión no tiene el mismoobjetivo que utilizar un chat, decidir cual servicio esmejor dependerá del contenido del sitio.
Ejemplo:
“El sitio de InvestigacionesMédicas.com ofrecerá un forode discusión sobre temas relevantes de medicina, un serviciode listas de correo electrónico para mantener informados alos usuarios sobre las actualizaciones del sitio y encuestaspara opinar sobre el sitio o temas de actualidad.”
Ofrecer servicios yherramientas puedepromover un mejor ymayor uso del sitio.
Conceptos Aquí se definirán algunos de los servicios y utilidadesque el sitio ofrecerá a sus visitantes. Algunos de losservicios más comunes son los de interacción deusuarios: foros de discusión, chats, libros de visitas,listas de correo, etc.
Muchos de estos servicios requieren programaciónespecial, si no se cuenta con el recurso para cubrirlose puede optar por servicios gratuitos:
Foros: http://www.my-forum.orgChats: http://www.sigmachat.comLibros de visitas: http://www.guestbookdepot.comListas de Correo: http://notifylist.comEncuestas: http://freepolls.com
Cuando se utiliza un servicio gratuito es recomendablebuscar uno que pueda ser personalizado para novariar mucho el estilo general del sitio.
En la misión ya se estableció mediante que actividadeso contenidos se pretende lograr la función principaldel sitio, los servicios y el contenido nos indica lasdimensiones que el proyecto puede llegar a tener.
Responda:
¿Qué servicios son más atractivos para los usuariospotenciales?
5
Los sitios que másllaman la atención delos usuarios son losque presentansecciones en las que sepuede interactuar conotros usuarios.
Módulo IPaso 2
Otras páginas de recursos, utilidades y servicios:http://www.melodysoft.comhttp://www.bravenet.com
Cliente y usuarioContenido interactivo
Aunque se definan las características del público metay se diseñe en base a esas características el sitio webestá disponible a todo el público en general, por loque se debe planear hacerlo lo más accesible que sepueda: redacción de textos sencilla, contenidosatractivos, poco peso en las imágenes y gráficos, usode colores estándares para web, legibilidad, etc.
Esto es imprescindible en el diseño independien-temente de las características del usuario.
Escriba las características principales del usuario meta:
Conceptos En este paso se debe realizar un análisis del públicometa para definir algunas de las características másimportantes que pudieran influir en el diseño del sitio.
Se requiere de un poco de sentido común yobservación para determinar:
Edad de la mayoría de los usuarios que podríanacceder al sitio.
Necesidades de información.
Conocimientos informáticos.
Características del equipo de cómputo de acceso.
Capacidad de adaptación al sistema de navegación.
Ubicación geográfica.
Idioma.
Capacidad de accesibilidad.
Si se dificulta definir algunas de estas característicaspuede optar por realizar algunas actividades deinvestigación como entrevistas a usuarios, análisis desitios similares o encuestas.
6
Los sitios accesiblesmejoran la calidad denavegación deusuarios, la usabilidadgeneral de las páginas,la presencia en losbuscadores y reducenel mantenimiento alsitio.
Definir característicasde los usuarios ydiseñar en base a esascaracterísticas permiteincrementar el éxito enel uso del sitio por quese definen susnecesidades básicas.
La accesibilidad indicala facilidad con la queun sitio puede serusado o visitado portodo tipo de personas,sobretodo aquellas conalgún tipo dediscapacidad.
Módulo IPaso 3
Pruebas virtuales de accesibilidad para sitios web:http://www.tawdis.net
Anotaciones
Cliente y usuarioAnálisis del público meta
Cliente y usuario
el estilo básico del sitio. Analice sí es factible aplicaresa identidad en web y de que manera.
Contenido de las secciones del sitio.
Solicite todo el contenido del sitio. Recabar toda lainformación del sitio debe basarse en las necesidadesque el usuario tenga, ofrecer solo contenidos que élnecesite y quiera ver.
Los contenidos deben ser adecuados, cortos, sin erroresgramaticales, de terminología apropiada para elpúblico meta y debe actualizarse continuamente.
Nota: si la página va a funcionar mediante una base de datos,solicite la información del programador y solicite informaciónsobre los contenidos de la base de datos para posteriormentediseñar la plantilla del sitio donde se desplegará ese contenido.
Recabar información para el sitio
Conceptos Datos de la empresa.
Debe mantener informados a los usuarios sobrecualquier dato de la empresa y del sitio y ofrecerlesinformación sobre contacto tanto de la empresa comodel webmaster.
Solicite la siguiente información:
Dirección física.TeléfonosCorreos electrónicosCódigos postalesInformación legalPolíticas de privacidadCondiciones de uso de los servicios
Esta información nos servirá para más adelante crearun menú del entorno del sitio que generalmente escolocado al pie de la página, más adelante sedesarrollarán los menús del sitio.
También solicite información sobre la empresa, eventoo institución para la que hace la página, como visión,misión, políticas e identidad corporativa.
De esta manera se pueden definir algunas seccionesdel sitio, por ejemplo, la sección “¿quiénes somos?”,“contacto” y secciones que traten sobre la empresa.
Identidad Corporativa
Solicite la identidad corporativa: logotipos en vectoreso mapa de bits y todo lo que pueda servir para diseñar
7
Aplicar la identidadcorporativa de laempresa refuerza laimagen de ésta ysiempre cuidando queno dificulte lalegibilidad debido amal manejo de colores,imágenes, etc.
Ofrecer informaciónsobre el sitio y laempresa propicia unamejor confianza porparte del usuario.
Colocar informaciónde contacto al final decada página permite alusuario encontrarlarápidamente sinimportar la sección enque en ese momentose encuentre visitando.
Módulo IPaso 4
Bases de datos y administración de contenidos:http://www.gestiopolis.com/delta/prof/PRO172.html
Los usuarios buscancontenido. Sin uncontenido atractivo nohabría razón paravisitar el sitio. Elcontenido determina lasatisfacción del usuarioque al final decidiráregresar al sitio unasegunda vez.
Objetivo. Analizar la información recabada, preparar loscontenidos del sitio y generar el diagrama básico de flujo deinformación.
Información de contenido y diagrama de flujoMódulo II
Paso 1
Paso 2
Paso 3
Organización del contenido.
Preparar el contenido.
Estructura del sitio y diagrama de flujo.
Los usuarios pueden optar por buscar informaciónespecífica o ir a determinada sección del sitio, sinembargo se debe organizar toda la información enuna estructura que permita su navegación de maneraordenada y jerárquica.
Antes de organizar una navegación debemosestablecer las secciones que contendrá el sitio.
Señale el título de cada sección y una descripción delcontenido empezando por las secciones queprimeramente hagan una introducción sobre laempresa, servicio o evento que promociona el sitio,por ejemplo comenzar definiendo “quiénes somos”,“nuestra historia” o “antecedentes”, continuar con lassecciones del contenido del sitio y terminar coninformación útil como la información de contacto.
Ejemplo:
Información de contenido y diagrama de flujo
De esta manera podremos generar el menú decontenido del sitio. Cuando las secciones sonnumerosas, se puede optar por agruparlas según eltipo de contenido, después de agruparlas se puedendiferenciar mediante colores o líneas divisoras osepararlos en dos o más menús, por ejemplo:
Un menú con información sobre el entorno delsitio (webmaster, políticas de uso de lainformación, mapa del sitio, etc,).Un menú con los servicios o herramientas(buscador, campos de acceso a secciones especialespara miembros de la página, chat, foros, etc.).Un menú para navegación general del contenido.
Después colocarlos estratégicamente.
El menú de servicios puede colocarse en la cabecerade la página, pues son secciones que el usuario utilizaráen repetidas ocasiones.
A continuación escriba el menú básico de su sitio.
Para el título de cada sección es recomendable utilizaruna sola palabra que englobe lo que el usuario deseaencontrar ahí.
Organización del contenido
Ordenar el contenidoen una estructurajerárquica paranavegación ayuda alos usuarios a ubicarserápidamente en elcontenido ydimensiones del sitio.
Conceptos
9
Los sitios como www.terra.com.mx tienen contenidos muy extensos, visitaresas páginas y analizar los diferentes menús ayuda a establecer claramentelas posibilidades para presentar un menú de sitio atractivo.
Módulo IIPaso 1
“Quiénes Somos”
“Artículos”
“Foro”
“Contáctenos”
Describir misión yvisión de la
empresa.
Publicar artículosinformativos.
Permitir lainteracción de los
usuarios.
Ofrecer unformulario para
entrar en contacto uopinar sobre el sitio
Sección Contenido Tipo
Informativa
Contenido
Interacción
Utilidades
Es importanteestablecer una jerarquíade contenidos y colocaren primer lugar lassecciones que son másimportantes para elusuario, algunos sitiosprefieren empezar coninformacióncorporativa mientrasque otros tienenpreferencia a colocarprimero los serviciosque ofrecen.
En este momento ya se tienen definidas las diferentessecciones del sitio y la información que contendrán(recabada durante el módulo I).
Ahora es necesario resumir los contenidos textuales,preparar las imágenes, gráficas y documentos enformato no HTML para realizar un inventario de todoel contenido.
Tome en cuenta los siguientes factores:
Organice la información, identifique los contenidosde las secciones tanto si los tiene en forma impresao digital (Word, Excel) y elementos multimedia.
Determine que contenido es mejor mostrar enformatos como PDF o Word. (Generalmente esinformación que el usuario puede imprimir).
Lo primero que se debe hacer es omitir palabrasinnecesarias en los contenidos, evite frasesredundantes o instrucciones demasiado repetitivaso largas.
Generalmente un usuario con experiencia media notiene problemas en suponer como, por ejemplo,rellenar un formulario, entrar a un chat, etc.
Las instrucciones o secciones con información deayuda deben ser opcionales para el usuario y esrecomendable enlazarlos desde el área donde puedasurgir algún problema, por ejemplo debajo de camposde acceso, en áreas de registro, antes de imprimir undocumento, etc.
Información de contenido y diagrama de flujo
Se debe facilitar al usuario un sistema interno debúsqueda de modo que pueda encontrar informaciónespecífica dentro del contenido y procurar señalarleen todo momento en que parte del sitio se encuentray mediante un mapa de contenido mostrarle laestructura y dimensión del sitio.
Si el cliente no cuenta con recursos para desarrollarun sistema de búsqueda interno puede utilizar unservicio gratuito como ATOMZ, en su versiónExpress.
Para descargarlo: http://www.atomz.com
Un sistema de búsqueda es un complemento a lanavegación del sitio.
Despues de haber organizado todo el contenido sepuede comenzar a planear la navegación mediante lacual se tendrá acceso a todo el contenido.
Preparar el contenido
Conceptos
10
Resumir loscontenidos ayuda aminimizar el “ruido”del sitio, realzacontenidos másimportantes y permitegenerar documentosmás pequeños yprácticos, ademásreduce el tiempo queel usuario invierte enleer la página.
El arte de no escribir en la web:http://www.formasolutions.com/boletin/003_nov_04
Módulo IIPaso 2
El usuario sentirá quetiene mayor controlsobre la navegación yel contenido si se leinforma en todomomento que ocurre yque ocurrirá dentro delsitio, ofreciéndoleinformación sobreenlaces externos,requisitos de la página,ventanas emergentes,etc.
El usuario no lee enInternet, por lo tantoutilice títulos, listas,letras cursivas, ynegritas para destacarcontenidos, este tipode elementos llamanrápidamente laatención del usuario.
Con los contenidos bien definidos se puede estableceruna estructura de navegación que permita al usuariotener acceso a toda la información del sitio.
Los elementos de navegación deben estar presentesen todo el sitio, tanto en la estructura general(navegación global) o en cada sección de contenido(navegación local).
Existen tres tipos de estructuras básicas:
Jerárquica. De una página inicial se accede acontenidos interiores secundarios y después acontenidos terciarios.Lineal. De una página se pasa solo a otra de manerasecuencial, se accede hacía atrás o adelante.Estructura en red o hipertexto. Cada página tieneacceso a todas las demás páginas que componen elsitio.
La estructura puede ayudar a realizar el diagrama deflujo y a planear una mejor navegación. Las seccionesimportantes siempre deben estar visibles y debe haberenlaces hacía ellas en todo momento. Cada secciónpuede dividirse en otros temas, para contenidossecundarios debe haber una navegación local de esasección.
La estructura nos permite saber como diseñar lanavegación del sitio, que tipo de botones o enlacesutilizaremos y que tipo de navegación habrá en cadapágina.
En el siguiente ejemplo se aprecian diferentesestructuras, cada una respondiendo a un tipo decontenido y la manera en que el usuario debe accedero navegar por el.
Información de contenido y diagrama de flujo
Realice el diagrama de flujo y en él especifique lasiguiente información: nombre de la sección, nombredel documento, palabras clave y descripción.
Ejemplo:
La información contenida en los cuadros servirá másadelante para declarar algunas especificaciones deldocumento HTML.El diagrama de flujo tambiénpermite generar la estructura de un mapa del sitio.
Estructura del sitio y diagrama de flujo
Conceptos
11
Diagramas de flujo: planificando un espacio de información:http://www.proyectoweb.org/boletin/072-dic04.html
Módulo IIPaso 3
Página principalTítulo: Investigaciones MédicasDocumento: index.htm“medicina, artículos médicos,actualización médica”Descripción: “Página inicial deInvestigacionesMédicas.com”
¿Quiénes Somos?Título: Investigaciones MédicasDocumento: somos.htm“medicina, artículos médicos,actualización médica”Descripción: “Descripción de misióny visión”
Artículos
Sección 1 Sección 2 Sección 3 Sección 4 Sección 5
Líneal Jerárquica
Navegación en redInicio
La estructura estarádefinida mediante elcontenido que sedesea presentar en elsitio, de los serviciosque se ofrecerán y deque manera elusuario deberáacceder y emplear esainformación.
Utilizandoconjuntamentediferentes estructurasde contenidos sepuede crear unanavegación altamenteefectiva para elusuario.
Una navegación claray sencilla permite alusuario comprendery adoptar una actitudintuitiva paradeterminar en queparte del contenido seencuentra en esemomento, en quepartes ha estado ycomo llegar a uncontenido específico.
Objetivo. Realizar la retícula para el diseño del sitio, definirlos primeros elementos del estilo general y comenzar eldesarrollo de todos los elementos gráficos y prepararlos parasu maquetación.
Retícula y diseñoMódulo III
Paso 1
Paso 2
Paso 3
Paso 4
Paso 5
Retícula.
Color y tipografía.
Comenzar a diseñar.
Archivos para maqueta.
Optimización de imágenes para maqueta.
La dimensiónhorizontal del sitio estádefinida por el tipo deresolución de pantalladel monitor para el cualse diseñó. Se recomien-da trabajar pararesoluciones de 800 x600 pixeles. Aunqueestadísticamente sonmenos los monitorescon esta característicaaun hay muchosusuarios que todavía lautilizan.
Retícula y diseño
Medidas de la retícula:
Para páginas diseñadas para monitores de 800 x 600 pixeles:
783 pixeles de ancho en resoluciones, página sin margen.769 pixeles de ancho con margen en la página.
Para páginas diseñadas para monitores de 1024 x 768 pixeles:
1003 pixeles de ancho en resoluciones sin margen en la página.983 pixeles de ancho con margen en la página.
Verticalmente las dimensiones varían de acuerdo alas herramientas activas del navegador del usuario yla cantidad de contenido en cada página.
Si quiere que todo el contenido esté dentro de laventana del navegador utilice una medida de 400pixeles de altura.
El contenido de las páginas destinadas a impresióndebe estar dentro de un espacio menor a 560 pixeles.Se denomina zona segura al área menor a 560 pixelesque se registra en la impresión hecha directamentedesde el navegador.
Retícula
Conceptos En la retícula se debe especificar los elementos queconforman la página, el lugar donde van colocados ylas dimensiones que puedan tener.
Puede utilizar hojas de papel o algún programa dediseño para dibujar el esquema del sitio solo utilizandotexto y líneas simples.
El sitio se conforma básicamente de cabecera, menúsde contenidos, área de contenidos y pie de página.
Determine los principales elementos de la cabecera,como lo son: logotipo y título de la página y menú deservicios si se desea. Coloque el esquema para menúsde contenido que se desarrollaron en el módulo II.
Menú de navegación a la izquierda del sitio.
Menú del entorno al pie de página
Menú de servicios o herramientas en la cabecerao como parte del menú de navegación.
Coloque elementos de navegación como botones paravolver al inicio de la página, ir atrás o adelante yenlaces de ubicación y volver a la página inicial.
Utilice la misma retícula para todas las páginas queconforman el sitio.
La información más importante deberá estar dentrode la primera pantalla (se le llama primera pantalla atodo aquello que se visualiza dentro de la ventana delnavegador sin utilizar las barras de desplazamiento).
13
Estadísticas sobre resoluciones de pantalla:http://www.ciudad.com.ar/ar/AR_Nota_2005/0,3813,2608,00.asp
Módulo IIIPaso 1
La cabecera es el áreadel documento dondeel usuario identifica laempresa, el título yelementos deidentidad corporativacomo el logotipo.
Repetir la retícula entodas las páginas delsitio aporta a la webuna fuerte identidadgráfica, que genera enel usuario la sensaciónde estar situado yrecordar claramente elsitio.
Retícula y diseño
Esto permitirá tener siempre presente los colores quedebemos utilizar en todos los elementos del sitio.
Tipografía:
Seleccione alguna de las tipografías seguras oestándares por defecto de Windows para loscontenidos:
Times New RomanArial, Arial Black, Arial NarrowBook antiquaBookman OldstyleCentury Gothic, Century,CourierComic SansGeorgiaVerdanaTahomaTrebuchet
Puede utilizar tipografías especiales no estándares enformato GIF para títulos, menús, botones, etc. Esrecomendable no utilizar más de dos tipografías entodo el sitio.
Tome en cuenta:
La tipografía Times New Roman de tipo serif ofreceuna fácil lectura en cuerpos de texto largos. Lastipografias como Arial o helvética son recomendablespara titulares y textos cortos. Evite usar letra enmayúscula para textos largos pues los usuarios lo leen10% más despacio por ser más difícil para la vista.
Color y tipografía
Conceptos Después de establecer la retícula se puede definir loscolores que se utilizarán en el sitio.
Si no cuenta con información corporativa sobre loscolores institucionales puede seleccionar una gama de3 a 4 colores de la paleta web-safe, procurando que nodificulten la legibilidad del sitio o generen muchobrillo en la pantalla y permitan un contraste armonioso.
Utilice un programa de diseño gráfico como Photoshopo Fireworks para acceder a la paleta de colores segurose intercambiar valores entre RGB, CMYK yhexadecimal o utilice algún programa gratuitoespecializado para la gestión de colores como “VisualColor Picker” de Novosib Software.
Defina los colores para el sitio en código hexadecimal:un color básico que sobresalga en todo el sitio. Uncolor de apoyo secundario y otro para pequeñosdetalles. Puede aplicar estos colores para elementosdel sitio como enlaces, tipografía y gráficos.
Escriba el código hexadecimal para los diferentescolores:
Color básico:Color de apoyo:Color para detalles:Color de enlaces:Enlace visitado:Enlace activo:Color de tipografía:Color de fondo:
14
Para descargar Visual Color Picker:http://www.linxexplorer.com
Módulo IIIPaso 2
Es recomendableutilizar los coloresseguros web-safe parala interfaz gráfica ycontenidos paraasegurar unavisualización correctaen todos losnavegadores,resoluciones y sistemasoperativos.
Los colores estándarpara enlaces son elazul y el morado paraenlaces ya visitados.Un usuario promedioidentifica los coloresde enlaces con el colorestándar. Colocarpalabras en esoscolores puedeconfundir al usuarioy hacerle creer que setrata de un enlace.
Se debe cuidar elcontraste entre losdiferentes tipos deletra que se utilizan,los bloques de texto deinformación y surelación con lostitulares, espaciosvacíos y el fondo de lapágina.
Retícula y diseño
Busque siempre:
Un contraste entre todos los elementos del sitio.
Un equilibrio entre elementos gráficos y elementosde texto.
Claridad y orden.
Una jerarquía visual: organice los elementos enforma lógica y previsible
En general si se logra una armonía visual de todoslos elementos se puede tener un diseño efectivo: tomeen cuenta la misión del sitio, los tipos de contenidosy el público meta.
Desarrolle imágenes, botones e íconos para lanavegación, un menú de sitio web puede estarconstruido tanto con enlaces textuales como porbotones o íconos, establezca tipografías, colores ytamaños.
Al terminar esta etapa es importante que la base dedatos, si requiere, deba de estar ya terminada.
Comenzar a diseñar
Conceptos A continuación se debe desarrollar la interfaz gráfica.
La interfaz es el área de comunicación entre el usuarioy la máquina, es una visualización gráfica que permiterealizar tareas, elegir comandos, iniciar programas ynavegar por el contenido de un sitio mediante el usode representaciones visuales como íconos, menús,hipervínculos e imágenes.
Un diseño efectivo puede mejorar la navegabilidad yreducir los problemas de usabilidad.
Utilizando un programa de diseño gráfico para web,como Macromedia Fireworks, Photoshop oImageReady de Adobe cree un nuevo documento conlas dimensiones de la retícula según la resolución parala que trabaja y a 72 DPI.
Las dimensiones similares son para páginas hechasen Macromedia Flash, puede utilizar un programa dediseño de gráficos web y después importar a undocumento de Flash o trabajar directamente en eseprograma. Si se opta por diseñar en Flash continúecon el paso número 3 del módulo V paraespecificaciones de publicación.
Comience a desarrollar la plantilla de diseño en basea la retícula.
Diseñe la cabecera del sitio, el menú y todos loselementos gráficos necesarios.
Es recomendable utilizar el estilo en el diseño en todaslas páginas que conforman el sitio.
15
Foros del Web: Foros de diseño web y desarrollo de sitios:http://www.forosdelweb.com
Módulo IIIPaso 3
En el diseño de sitiosen flash se debe tenerun mejor diseño denavegación pues elusuario no puedeutilizar los elementosde navegación queofrece el navegadorde Internet.
Sin el impacto visualde las formas, el colory los contrastes laspáginas podrían seraburridas y nomotivar visualmenteal usuario.
Un manejo adecuadode tipografías,imágenes y color guíaal usuario a través detodo el contenido y lapágina.
Aplicar el estilo dediseñoconsistentemente entodas las páginasbrinda una identidady cadencia fuerte queel usuario reconoceen todo el sitio.
Retícula y diseño
Si el sitio estará destinado para HTML puede comenzara utilizar las herramientas de corte (slices) paradelimitar los diferentes elementos del sitio y poderexportarlos por separado.
Los slices permiten dividir el sitio en imágenespequeñas para después construir el documento HTML.Los programas de diseño de sitios permiten aplicaralgunas características a los slices como roll-overs. Sedenomina roll-over cuando un botón cambia de estadoal pasar el ratón de la computadora sobre el.
Además de roll-over, utilizando otras herramientasde los programas de diseño web, se pueden crearanimaciones, marquesinas, y otras acciones parabrindar al sitio de más dinamismo pero generandistracción, utilícelos sólo en casos estrictamentenecesarios.
Para acceder a la herramienta de corte:
Fireworks: En la sección Web de lapaleta de herramientas.
Para los estados del botón se utilizanlos frames (window> frame o Shift +F2).
Para aplicar funciones a los slices conel botón derecho del ratón sobre cadaslice.
Para su configuración: en la ventanade propiedades (windows>propertieso CTRL + F3).
Archivos para maqueta
Conceptos
16
Manuales sobre programas de diseño web:http://www.webtaller.com
Módulo IIIPaso 4
ImageReady: En la paleta deherramientas.
Para utilizar las funciones de los slicesse utiliza la ventana de contenido web(windows> web content).
Para los contenidos de los slices seutilizan los layers.
Para las propiedades de cada sliceutilice la ventana Slice (Window>slice).
Cada slice puede tener diferentes atributos y se puedenexportar en formato de imagen, celda de tabla o comocontenido HTML
Junto a estas herramientas aparecen también lasherramientas de mapas de imagen y su configuración.
Un roll-over de botónpermite al usuarioidentificar el área quepuede presionar y asíoptimizar lanavegación.
El uso excesivo deanimaciones,marquesinas, GIFsanimados y textos enmovimiento causandistracción al usuario, alteran la visiónperiférica y dificultanla lectura.
Retícula y diseño
Los programas de diseño web ofrecen una opciónpara exportar el contenido y generar los documentosHTML, esta opción exporta las imágenes de losdiferentes slices, y los documentos HTML que loscontiene con todas las funciones y enlaces especificadosen las propiedades de los slices.
También ofrecen la opción de copiar el código HTMLlisto para pegarse en algún editor de sitios web comoDreamweaver o Frontpage que ya contiene toda lamaquetación del documento. La desventaja de estaopción es que genera un documento HTML con unatabla de organización estrictamente rígida que si semodifica puede causar problemas en la visualizaciónde los elementos.
Se puede optar por crear una plantilla base exportandosólo los gráficos y creando la maqueta uno mismo enalgún editor de sitios web en donde colocar loscontenidos para cada sección y especificar y lasfunciones de las imágenes (roll-over, enlaces, etc.).
Cada slice puede tener diferente optimización yexportarse ya sea en formato GIF o JPG.
Utilice GIF para imágenes con colores planos y conpocas texturas o gráficos vectoriales, este es el formatomás utilizado para publicar los gráficos de la interfazdel sitio. La compresión de GIF se realiza medianteel número de colores disponibles en la imagen, unaimagen con colores indexados tiene un máximo de256 colores.
Optimización de imágenes para maqueta.
Conceptos
17
Documento PDF: Importancia de la optimización de imágenes:http://cevug.ugr.es/web-cevug/material/optimizacion.pdf
Módulo IIIPaso 5
Utilice JPG para comprimir imágenes fotográficas. Sepuede aplicar también a gráficos con ilustracionesmás complejas y con transiciones de tono, unacompresión del 80% es aceptable para web. Debido a la baja
velocidad de conexióncon la que la mayoríade los usuariosacceden a internettodas las imágenesdeben estarcomprimidas para unavisualización másrápida.
Objetivo. Preparar el documento HTML para comenzar aconstruir el sitio y ofrecer información sobre los elementosestructurales del mismo.
HTML y maquetaciónMódulo IV
Paso 1
Paso 2
Paso 3
Hojas de estilo y tablas.
Preparar el documento HTML.
Construir el documento HTML y documentopara archivos FLASH.
HTML y maquetación
Para organizar los contenidos en tablas, se toma encuenta:
Para evitar problemas cuando algún usuariomodifica la dimensión de la ventana del navegadorse deben establecer el ancho y alto de las celdasque componen la tabla en valores de pixelesabsolutos.
Agregar un GIF transparente con las mismasdimensiones del tamaño que se desea en la celdade la tabla.
Puede utilizar tablas dentro de otras para alcanzarniveles de organización más complicados (tablasanidadas).
Hojas de estilo y tablas
Conceptos Los elementos del sitio se pueden organizar medianteel uso de hojas de estilo en cascada (CSS) o tablas.
A continuación especifique el estilo del sitio en undocumento CSS para aplicar a las páginas en base aestilo general que se estableció en la etapa de diseñográfico. Utilice las herramientas que los programasde edición de sitios web ofrecen para la creación deCSS.
En Dreamweaver:Menú Windows> CSS Styles o Shift + F12
En FrontPage:Menú Format> Style
Puede especificar tamaños de celdas, bloques de texto,márgenes, bordes externos, colores de fondo oposicionar elementos mediante capas para organizartodo el contenido.
La ventaja de los CSS es que cada día los navegadoresse van estandarizando y ofrece más alternativas paraorganizar el sitio, es menos pesado y más fácil demodificarse.
Las etiquetas de CSS pueden colocarse dentro delcódigo HTML de cada página pero se recomiendaenlazar a un documento CSS externo, así cualquiercambio imprevisto es cuestión solamente de modificarese archivo.CSS.
19Módulo IVPaso 1
“Por qué diseñar con tablas es estúpido” un entretenido sitio conlas principales características de las tablas y el CSS:http://www.effectivetranslations.com/stupidtables
Las hojas de estilopermiten modificarcolores, tamaños deletra y otros de lacomposición y diseñode la página. Usarlaspermite crear unaimagen consistente quese aplica a todo el sitio.
Una desventaja deluso de tablas para laorganización de loselementos es que losprogramas especialespara discapacitadosauditivos leen demanera lineal elcontenido de las celdasy muchas veces esecontenido no estaorganizado de estáforma.
Se puede utilizar CSSpara organizar ydiseñar sitios que seránmás rápidos endescargarse y másfáciles de rediseñar.Ofrecen una mejoralternativa paraorganizar loscontenidos, lo quefavorece tanto aldiseñador como alusuario.
HTML y maquetación
Hay varios aspectos a tomar en cuenta cuando secomienza a trabajar en editores de sitios web.Primeramente se debe definir algunos aspectos deidentificación del sitio: los elementos meta.
Los elementos meta se colocan dentro de las etiquetas<HEAD> y </HEAD> del documento HTML. Loselementos meta mas utilizados son el título, palabrasclave de búsqueda y descripción del sitio.
Puede utilizar la información del diagrama de flujo quese generó durante el módulo II en el paso 3 para colocarla información de las etiquetas meta:
Escriba el título de cada página entre la etiquetas<TITLE> y </TITLE>. Si se trata de la página inicialidentifique el nombre de la empresa en el título, slogano alguna frase corta sobre el tema principal del web.
Escriba la descripción de la página con las etiquetasMETA<meta name=”description” content=”Una descripción de cadapágina del sitio” />
Escriba las palabras claves con las etiquetas METAseparadas por coma:<meta name=”keywords” content=”palabras, clave, de, búsqueda”/>
Escriba el nombre del autor con las etiquetas META.<meta name=”author” content=”Nombre del autor de la página”/>
El Meta elemento robots, permite indexar el contenidoen los motores de búsqueda<meta name="robots" content="all" />
Preparar el documento HTML
Conceptos
20Módulo IVPaso 2
“La muerte de un Meta dato”:http://searchenginewatch.com/sereport/article.php/2165061
Actualmente son menos los buscadores que utilizanlos elementos meta, pero el elemento de título seguirásiendo el más importante. Cuando el usuario haceuna búsqueda, los motores de búsqueda ofrecenresultados cuyo título aparece igual o similar a laspalabras clave que empleó el usuario.
Propiedades de la página.
Utilice la información del paso 2 en el módulo IIIsobre color y tipografía para especificar los coloresde enlaces, de texto, colores de fondo y tipografía dela página, etc.
En Dreamweaver:en el menú Modify> Page Properties.
En Frontpage:Clic con el botón derecho del ratón sobre el documentopara activar el menú emergente, seleccione PageProperties.
Establezca la medida de los márgenes del documentoen cero si requiere que el contenido del sitio abarquetoda la ventana del navegador. Puede trabajar con laopción de administración de archivos para mejorarla productividad del sitio:
En Dreamweaver:Menú Windows> Files o presione la tecla F8
En FrontPage:Menú View> Folders después de abrir el sitio con laopción “Open Web” en el menú File> Open Web.
Escriba títulos depágina que englobenel contenido del sitioen una frase pequeña,el título de la páginaes utilizado por losmotores de búsqueday es el título queaparece cuando unusuario agrega el sitioa sus favoritos deInternet.
Los elementos META(o meta tags, eninglés) ofreceninformación sobre elsitio, derechos deautor, contenido ypalabras clave que lossistemasautomatizados comolos motores debúsqueda identificancuando un usuariohace una búsqueda.
HTML y maquetaciónConstruir el documento HTML y documento para archivos FLASH
Conceptos Después de haber definido todo el estilo y preparadoel documento HTML se puede proceder a construirel sitio para su posterior publicación.
Si va a utilizar tablas comience con una tabla generalque contendrá todos los elementos del sitio con lasdimensiones de la retícula, use otra tabla con lassecciones básicas: cabecera, menú y contenidos, conespecificaciones de CSS y comience a introducir todoel contenido empezando con la página principal delsitio. Si es posible rellene las celdas con un color enlugar de usar una imagen GIF cuando se trata de unacelda sin contenido.
Haga lo siguiente:
Marque todas las imágenes con una descripciónde ellas mediante el atributo ALT. Puede accedera él en la ventana de propiedades al seleccionarla imagen usando el programa de edición de sitios.
Marque los enlaces de texto mediante el atributoTITLE.
Especifique información sobre ventanasemergentes o enlaces fuera del sitio.
Evite directorios demasiado largos y confusos,busque una lógica y jerarquía en los nombres.
La dirección de acceso a un sitio web debe ser losuficientemente sencilla, clara y fácil de recordar.
Si no interfiere con el diseño: especifiqueinformación textual debajo de cada imagen.
21Módulo IVPaso 3
Usabilidad de sitios es flash, un tema controvertido:http://acceso.uv.es/accesibilidad/artics/01-usab-flash.htm
A terminar la maquetación puede utilizar esa páginacomo plantilla para todas las demás páginas delcontenido.
Sitios con Frames (Marcos):
Un frame divide la ventana del navegador en partes,cada parte con un documento HTML distinto. Losframes rompen con el esquema del sitio y los motoresde búsqueda encuentran estos documentos porseparado. Además dificultan acciones como agregara favoritos y obtener información sobre el URL delsitio. El uso de marcos debe minimizarse lo másposible y sólo recurrir a ellos cuando sea estrictamentenecesario.
Sitios en Macromedia Flash:
Si el sitio se diseñó en Macromedia Flash ofrezca unaintroducción previa donde especifique dondedescargar el reproductor especial, información sobreel peso del archivo swf y cuanto tiempo en promediotardará en descargarse completamente.
Si se diseñó una introducción en flash para un sitioHTML, además de la información anterior ofrezca unenlace de tipo “saltar introducción” directamente aese contenido HTML.
Cuando la página sedescarga lentamente,los usuarios puedensaber hacia dondellevan los enlaces deun menú hecho deimágenes que está enproceso de descargamediante el atributoALT.
Ofrecer unaintroducción en Flashpuede provocar queel usuario seimpaciente cada vezque entra al sitio sitiene que esperar aque la animación sedescargue para podercontinuar.
Objetivo. Hacer una revisión de la compatibilidad del sitioy algunos aspectos relacionados a la usabilidad. Comenzar apublicar y promocionar el sitio.
Pruebas de usabilidad y publicaciónMódulo V
Paso 1
Paso 2
Paso 3
Compatibilidad con navegadores y navegación prueba.
Prueba de usabilidad básica.
Publicación y promoción.
Pruebas de usabilidad y publicación
Las secciones contienen títulos.
No existen imágenes rotas, deformadas o de malacalidad.
Las tablas de contenido guardan las dimensionesestablecidas.
Se ofrece alternativa de impresión en contenidosextensos.
Hay suficiente contraste entre el fondo, elcontenido de las páginas y los enlaces.
Todas las imágenes tienen el atributo ALT.
Todos los enlaces tienen el atributo TITLE
Ofrece advertencias sobre enlaces externos,ventanas emergentes o enlaces a archivos comoPDF, WORD, etc.
Hay acceso al contenido más importante desdecualquier página del sitio.
Revisar y corregir estos factores puede mejorar el usodel sitio.
Compatibilidad con navegadores y navegación prueba
Conceptos Es recomendable utilizar las herramientas que ofrecenlos editores de sitios web para establecer problemasque pudieran surgir con las diferentes versiones denavegadores, revisar cuestiones de accesibilidad yenlaces rotos.
En Dreamweaver:
Acceda a esa opción mediante el menú File> Check
En FrontPage:
Editando en modo de sitio, en el Menú View> Reports
Cuando el sitio está completamente terminado esrecomendable también realizar una navegación deprueba para identificar posibles errores y verificar lafuncionalidad de los enlaces, durante esa navegaciónrevise si:
Hay consistencia en el diseño del sitio.
Todas las páginas contienen título.
No existen enlaces rotos.
La información de contacto está disponible entodo momento.
Se identifica rápidamente los contenidos para losusuarios (foros, chats, etc.).
Existe consistencia en la navegación y es intuitiva.Existen enlaces hacia la página principal en todomomento.
23Módulo VPaso 1
Sitio web del WWW Consortium para información sobre estándaresWEB:http://www.w3.org
Cuando un sitio estádiseñado para lamayoría de losnavegadores, sesatisfacen mayorescantidades deusuarios. Esrecomendable diseñaren base a estándares.
Pruebas de usabilidad y publicación
6. Sí dudaron antes de presionar algún enlace.
En general observe cuales son las partes del sitiodonde surgieron problemas y como los enfrentó elusuario.
Al finalizar pregunte:
1. ¿La página inicial es visualmente atractiva para usted?2. ¿Puede definir cuál es la temática del sitio?3. ¿Le parece sencillo navegar a través de todas las páginas?4. ¿En algún momento tuvo dificultades con el contenido delsitio o la navegación?5. ¿Qué actividades cree que podría realizar en el sitio?6. ¿Qué elemento del sitio le llamó más la atención?7. Si no visitó alguna sección del sitio, pregunte por qué.
Estas preguntas arrojan datos interesantes. Porejemplo, en la pregunta 6 por un lado puedenestablecer cuales son los contenidos importantes yatractivos para el usuario y por el otro definir si hayalgo que pueda causar una distracción visual.
Aunque esta prueba de usabilidad se realice con pocosusuarios, los resultados pueden definir problemassencillos que la mayoría de los usuarios puedenencontrar al visitar el sitio.
Después de esto se pudieron haber definido algunosproblemas de usabilidad y se pueden hacer los cambiosantes de publicar el sitio.
Prueba de usabilidad básica
Conceptos Si cree que el sitio pueda tener problemas deusabilidad, realizar una prueba básica no está de más.
Seleccione varias personas que deseen participar, queno estén relacionadas al proyecto y que cuenten condiferentes niveles de experiencia en el uso de internet(el tiempo que dedican al uso de Internet a la semanapuede ser un dato para determinar ese nivel deexperiencia). Esta prueba puede ser relativamentesencilla y no llevar más de 20 minutos en hacerla.
Pida que realicen una tarea determinada, por ejemplobuscar información específica en el sitio o utilizaralgún servicio, después pídales que entren a cuantassecciones del sitio quieran visitar.
Durante este proceso haga anotaciones sobre:
1. Las primeras secciones que visitaron.
2. Cuanto tiempo duraron antes de cambiar de sección.
3. Sí usa el botón de “regresar” del navegador.
4. Sí cambia de sección antes de que el documentotermine de cargarse.
5. Sí siguieron un orden específico al navegar por lassecciones del sitio.
24Módulo VPaso 2
Sitio Web de Jakob Nielsen sobre usabilidad, en inglés:http://www.useit.com
Para definir las secciones más atractivas.
Para definir si dedicaron tiempo para leer o ver elcontenido de la sección.
Para definir si hay problemas para utilizar lanavegación local del sitio.
Para definir si el contenido es muy extenso o pesado.
Para determinar si el enlace no es suficientementeclaro sobre lo que el usuario puede encontrar alpresionarlo.
Para determinar si el contenido del sitio estáestructurado jerárquicamente.
Para pruebas deusabilidad esrecomendable utilizarusuarios conconocimientos básicossobre sitios web. Losusuarios con estascaracterísticas son losque representan a losfuturos clientes y loque sean capaces derealizar estos usuariosinexpertos ya esdominado por losusuarios con másexperiencia.
Las pruebas deusabilidad permitenoptimizaraplicaciones, sistemasde navegación einterfaces que mejorsatisfagan lasnecesidades de losusuarios.
Pruebas de usabilidad y publicación
Existen muchas formas de promocionar un sitio, unade las principales es darse de alta en buscadores ydirectorios de internet.
Muchos de estos buscadores ya indexan sitiosautomáticamente, 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 búsqueda degoogle o yahoo para sus propios resultados.
La indexación de sitios puede tardar de uno a tres meses.
El sitio debe promocionarse además en las diferentesactividades que realice la empresa, ya que ahora formaparte de su identidad y es una herramienta importantepara su comunicación. El URL del sitio debe apareceren toda actividad de publicidad de la empresa.
Publicación y Promoción
Conceptos Si se encuentra satisfecho con el sitio puede procedera publicarlo, para esto se debe contar con un dominiopropio y un espacio de alojamiento contratado por laempresa o utilizar un sistema de alojamiento gratuitodisponible en Internet.
Muchos clientes ya tienen contratado un proveedorde acceso a Internet (como Prodigy) y muchos deestos proveedores cuentan con servicio para alojarpáginas web de tipo subdominio:
http://www.cliente.proveedor.comhttp://www.proveedor.com/cliente.
Otros servicios de hospedaje cuentan también conherramientas para transferir los archivos del sitio alservidor o la posibilidad de transferir directamentelos archivos desde los programas editores de sitiosweb como Dreamweaver o FrontPage.
De lo contrario utilice un software de transferenciaFTP como http://www.cuteftp.com.
Póngase en contacto con el cliente para determinar eltipo de dominio y contratación que se empleará.
Promoción del sitio.
Es importante tener un buen sitio de internet, con unanavegación y un diseño centrado en el usuario, pero si ese usuario no sabe de su existencia el sitiosimplemente no tiene razón de ser.
25Módulo VPaso 3
Cómo promocionar un sitio web:http://www.informaticamilenium.com.mx
La mayoría de losusuarios utiliza unservicio de búsquedacuando necesitainformación deInternet, por lo tantoun motor debúsqueda es una delas herramientas demercadotecnia másrecurrida en internet.
Consideraciones finales sobre la guía.Consideraciones finales sobre la guía.
La guía para realizar páginas de internet basada en conceptos de usabilidad ofrece a los diseñadores una metodologíade trabajo que les permite realizar páginas web orientadas a satisfacer necesidades de usuarios. La guía presenta demanera teórica los principales conceptos englobados dentro de la usabilidad y su aplicación práctica.
Sin embargo el diseñador puede adaptar todos o algunos de los módulos o pasos a su propio metodo de trabajo yno modificar su proceso de diseño web.
La informacón contenida en la guía pretende hacer un balance entre los aspectos teóricos y la información práctica.
Esta guía no es un manual de programación o un manual para usar algún programa de diseño gráfico y se centraen definir los conceptos de usabilidad más importantes y el momento en el proceso de diseño web en que puedenllegar a producirse.
26